update

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 (
+    <div className={boxStyle.join(" ")}>
+      {!isReceive ? (
+        <>
+          <div className={style.plus}>➕</div>
+          <div
+            className={style.addFile}
+            onMouseEnter={onAddFile}
+            onMouseLeave={onNormal}
+          >
+            添加文件
+          </div>
+          <button
+            className={style.receive}
+            onMouseEnter={onReceive}
+            onMouseLeave={onNormal}
+            onClick={() => {
+              setIsReceive(true);
+            }}
+          >
+            接收文件
+          </button>
+        </>
+      ) : (
+        <>
+          <input
+            placeholder={"输入6位传输口令获取文件"}
+            style={{}}
+            className={isReceive ? style.receiveInput : style.receiveInputNone}
+          />
+          <IconButton
+            className={style.receiveInputClose}
+            aria-label="delete"
+            onClick={() => {
+              setIsReceive(false);
+            }}
+          >
+            <Close />
+          </IconButton>
+        </>
+      )}
+    </div>
+  );
+}

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;
+}

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 (
+    <div className={props.className}>
+      <Button className={style.text}>定价</Button>
+      {props.isSignIn ? (
+        <Button className={style.text}>文件列表</Button>
+      ) : (
+        <Button className={style.text} onClick={props.onOpenSignIn}>
+          注册 / 登录
+        </Button>
+      )}
+    </div>
+  );
+}

src/component/homeMenu/style.module.css

@@ -0,0 +1,3 @@
+.text {
+  color: #252525;
+}

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 (
+    <Paper
+      elevation={0}
+      sx={{
+        width: "400px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        border: "1px solid #e0e0e0",
+        padding: "50px 0",
+      }}
+    >
+      <h1 className={style.h1}>登录 / 注册</h1>
+      <div className={style.describe}>可通过登录码验证或二维码注册/登录</div>
+      <div className={style.signInInput}>
+        <CountriesInput
+          onChange={(value) => {
+            setCountry(value);
+          }}
+        />
+        <TextField
+          label="Phone Number"
+          className={style.phone}
+          variant="standard"
+          placeholder={"手机号码"}
+        />
+      </div>
+      <Button
+        size={"large"}
+        style={{ alignSelf: "flex-end", marginRight: "50px" }}
+        variant="contained"
+      >
+        下一步
+      </Button>
+
+      <div className={style.explain}>
+        <h1 className={style.h1}>重要说明</h1>
+        <div className={style.explainContent}>
+          本服务基于Telegram官方文件上传API，符合
+          Telegram用户协议和隐私政策。但请您不要滥
+          用此服务，以避免账号被telegram封禁或导致 服务不可使用。
+        </div>
+      </div>
+
+      <div className={style.describe}>
+        未注册账号自动创建为新账号
+        <br /> 登录注册均视为已同意 用户协议 和 隐私政策。
+      </div>
+    </Paper>
+  );
+}

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;
+}

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);
       }}

src/component/signin/index.tsx

@@ -127,6 +127,7 @@ function SignIn() {
         flexDirection: "column",
         justifyContent: "space-around",
         height: "40%",
+        width: "40%",
       }}
     >
       <CountriesInput