From 1d44a7eca4c9d89685182aadb16e865e6da83f16 Mon Sep 17 00:00:00 2001 From: icechen Date: Sun, 27 Feb 2022 04:18:44 +0800 Subject: [PATCH] update --- src/App.css | 0 src/App.tsx | 26 ------ src/component/homeButton/index.tsx | 83 +++++++++++++++++++ src/component/homeButton/style.module.css | 99 +++++++++++++++++++++++ src/component/homeMenu/index.tsx | 23 ++++++ src/component/homeMenu/style.module.css | 3 + src/component/homeSignIn/index.tsx | 60 ++++++++++++++ src/component/homeSignIn/style.module.css | 38 +++++++++ src/component/signin/countriesInput.tsx | 2 +- src/component/signin/index.tsx | 1 + src/index.tsx | 1 - src/pages/home/index.tsx | 40 ++++++++- src/pages/home/style.module.css | 27 +++++++ src/telegram/telegram.ts | 2 +- 14 files changed, 373 insertions(+), 32 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/App.tsx create mode 100644 src/component/homeButton/index.tsx create mode 100644 src/component/homeButton/style.module.css create mode 100644 src/component/homeMenu/index.tsx create mode 100644 src/component/homeMenu/style.module.css create mode 100644 src/component/homeSignIn/index.tsx create mode 100644 src/component/homeSignIn/style.module.css create mode 100644 src/pages/home/style.module.css diff --git a/src/App.css b/src/App.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 754ae5c..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { useEffect, useState } from "react"; -import "./App.css"; -import { - Button, - Container, - Input, - InputAdornment, - Paper, - TextField, -} from "@mui/material"; -import CountriesInput, { Country } from "./component/signin/countriesInput"; -import Telegram, { - inputFile, - uploadBigFile, - sendFile, - downloadFile, -} from "./telegram/telegram"; -import SendIcon from "@mui/icons-material/Send"; -import { User } from "./user"; -import { Download, Upload } from "@mui/icons-material"; - -function App() { - return
App
; -} - -export default App; diff --git a/src/component/homeButton/index.tsx b/src/component/homeButton/index.tsx new file mode 100644 index 0000000..58072d0 --- /dev/null +++ b/src/component/homeButton/index.tsx @@ -0,0 +1,83 @@ +import style from "./style.module.css"; +import { useEffect, useState } from "react"; +import { Close } from "@mui/icons-material"; +import { IconButton } from "@mui/material"; + +enum Status { + normal, + addFile, + receive, +} + +export function HomeButton() { + let [status, setStatus] = useState(Status.normal); + let [boxStyle, setBoxStyle] = useState([style.box]); + let [isReceive, setIsReceive] = useState(false); + let onNormal = () => { + setStatus(Status.normal); + }; + let onAddFile = () => { + setStatus(Status.addFile); + }; + let onReceive = () => { + setStatus(Status.receive); + }; + + useEffect(() => { + switch (status) { + case Status.normal: + setBoxStyle([style.box]); + break; + case Status.addFile: + setBoxStyle([style.box, style.boxActivePlus]); + break; + case Status.receive: + setBoxStyle([style.box, style.boxActiveReceive]); + break; + } + }, [status]); + + return ( +
+ {!isReceive ? ( + <> +
➕
+
+ 添加文件 +
+ + + ) : ( + <> + + { + setIsReceive(false); + }} + > + + + + )} +
+ ); +} diff --git a/src/component/homeButton/style.module.css b/src/component/homeButton/style.module.css new file mode 100644 index 0000000..a13deab --- /dev/null +++ b/src/component/homeButton/style.module.css @@ -0,0 +1,99 @@ +body { + /*background-color: yellow;*/ +} + +.box { + width: 400px; + height: 80px; + border-radius: 50px; + background-color: #ffffff; + display: flex; + align-items: center; + position: relative; + box-shadow: 0 0 15px #a7a7a7; + transition: 0.5s; + color: #252525; +} + +.boxActivePlus { + transform: translateX(-20px); +} + +.boxActiveReceive { + transform: translateX(20px); +} + +.plus { + font-size: 40px; + margin-left: 30px; + height: 100px; + text-align: center; + line-height: 100px; + cursor: pointer; +} + +.addFile { + font-size: 24px; + padding-left: 30px; + margin-right: 140px; + font-weight: bold; + flex-grow: 1; + cursor: pointer; +} + +.receive { + position: absolute; + height: 60px; + width: 120px; + right: 10px; + font-size: 18px; + color: black; + border-radius: 35px; + border: 0; + background-color: #f2f2f2; +} + +.receive:hover { + background-color: #fdda65; + cursor: pointer; +} + +.receiveInput { + position: absolute; + width: 348px; + height: 48px; + background-color: white; + font-size: 18px; + color: #252525; + border-radius: 35px; + margin: 0 0 0 10px; + padding: 0 0 0 20px; + line-height: 60px; + outline: none; + border: #f1f1f1 solid 6px; + transition: 0.3s; + -webkit-user-drag: none; + right: 10px; +} + +.receiveInputNone { + width: 120px; + transition: 0.3s; +} + +.receiveInput:hover { + border: #fdda65 solid 6px; +} + +.receiveInput:active { + border: 0; +} + +.receiveInput::selection { + background-color: #ffd95a; +} + +.receiveInputClose { + position: absolute; + right: 20px; +} diff --git a/src/component/homeMenu/index.tsx b/src/component/homeMenu/index.tsx new file mode 100644 index 0000000..2d58534 --- /dev/null +++ b/src/component/homeMenu/index.tsx @@ -0,0 +1,23 @@ +import { Button } from "@mui/material"; +import style from "./style.module.css"; + +interface Props { + isSignIn: boolean; + onOpenSignIn: () => void; + className?: string; +} + +export function HomeMenu(props: Props) { + return ( +
+ + {props.isSignIn ? ( + + ) : ( + + )} +
+ ); +} diff --git a/src/component/homeMenu/style.module.css b/src/component/homeMenu/style.module.css new file mode 100644 index 0000000..7c52901 --- /dev/null +++ b/src/component/homeMenu/style.module.css @@ -0,0 +1,3 @@ +.text { + color: #252525; +} diff --git a/src/component/homeSignIn/index.tsx b/src/component/homeSignIn/index.tsx new file mode 100644 index 0000000..ed450eb --- /dev/null +++ b/src/component/homeSignIn/index.tsx @@ -0,0 +1,60 @@ +import { Button, Paper, TextField } from "@mui/material"; +import style from "./style.module.css"; +import CountriesInput, { Country } from "../signin/countriesInput"; +import { useState } from "react"; + +export function HomeSignIn() { + let [country, setCountry] = useState({} as Country | null); + + return ( + +

登录 / 注册

+
可通过登录码验证或二维码注册/登录
+
+ { + setCountry(value); + }} + /> + +
+ + +
+

重要说明

+
+ 本服务基于Telegram官方文件上传API，符合 + Telegram用户协议和隐私政策。但请您不要滥 + 用此服务，以避免账号被telegram封禁或导致 服务不可使用。 +
+
+ +
+ 未注册账号自动创建为新账号 +
登录注册均视为已同意 用户协议 和 隐私政策。 +
+ + ); +} diff --git a/src/component/homeSignIn/style.module.css b/src/component/homeSignIn/style.module.css new file mode 100644 index 0000000..59efc35 --- /dev/null +++ b/src/component/homeSignIn/style.module.css @@ -0,0 +1,38 @@ +.h1 { + font-size: 36px; + margin: 0; + padding: 0; + font-weight: bold; +} + +.describe { + color: #a7a7a7; + font-size: 14px; + text-align: center; +} + +.signInInput { + display: flex; + flex-direction: row; + margin-top: 30px; + margin-bottom: 30px; +} + +.phone { + /*margin-left: 50px;*/ +} + +.explain { + margin: 30px 0; + padding: 30px 0; + width: 100%; + text-align: center; + background-color: #f7f7f7; +} + +.explainContent { + padding: 20px; + font-size: 14px; + text-align: left; + letter-spacing: 2px; +} diff --git a/src/component/signin/countriesInput.tsx b/src/component/signin/countriesInput.tsx index 2f15d5c..ce0af56 100644 --- a/src/component/signin/countriesInput.tsx +++ b/src/component/signin/countriesInput.tsx @@ -52,7 +52,7 @@ function CountriesInput(props: { // names must be equal return 0; })} - sx={{ width: 300 }} + sx={{ width: 200 }} onChange={(_event, value) => { props.onChange(value as Country); }} diff --git a/src/component/signin/index.tsx b/src/component/signin/index.tsx index 0971150..da5f52d 100644 --- a/src/component/signin/index.tsx +++ b/src/component/signin/index.tsx @@ -127,6 +127,7 @@ function SignIn() { flexDirection: "column", justifyContent: "space-around", height: "40%", + width: "40%", }} > -
{!isSignIn ? :
Home
}
+
+
+ +
+ + { + setIsOpenSignIn(true); + }} + /> + + { + setIsOpenSignIn(false); + }} + ModalProps={{ + keepMounted: true, + }} + transitionDuration={500} + > + +
+ +
+ +
); } diff --git a/src/pages/home/style.module.css b/src/pages/home/style.module.css new file mode 100644 index 0000000..dbe9408 --- /dev/null +++ b/src/pages/home/style.module.css @@ -0,0 +1,27 @@ +.homeButton { + position: absolute; + top: 50%; + left: 88px; +} + +.homeSignIn { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.homeMenu { + position: absolute; + right: 0; + margin-top: 20px; + margin-right: 50px; + padding: 10px 20px; + background-color: white; + color: black; +} + +body { + background-color: #eae4de; +} diff --git a/src/telegram/telegram.ts b/src/telegram/telegram.ts index 3360296..bcdfa97 100644 --- a/src/telegram/telegram.ts +++ b/src/telegram/telegram.ts @@ -8,7 +8,7 @@ class TelegramHelper { this.client = new Client({ api_id: appID, api_hash: appHash, - test: false, + test: true, }); this.client.setDefaultDc(1); }