init frontend

2024-04-02 11:18:51 +03:00
parent de951ae100
commit 07dd23ee8e
75 changed files with 9329 additions and 3 deletions
@@ -0,0 +1,10 @@
+.main-admin{
+    display: flex;
+    flex-direction: column;
+    width: 80%;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+    margin-top: 40px;
+    height: 70vh;
+}
@@ -0,0 +1,30 @@
+import { Button } from "../../shared/ui/button"
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../../shared/ui/resizable"
+import less from "./Admin.module.less"
+import PlayerCard from "../../entities/PlayerCard/PlayerCard"
+import { useTranslation } from "react-i18next"
+import CreateTeam from "../../widgets/CreateTeams/CreateTeams"
+
+const AdminPage = () =>{
+    const { t } = useTranslation();
+    return(
+        <ResizablePanelGroup direction="horizontal">
+  <ResizablePanel defaultSize={95} maxSize={95}>
+    <div className={less["main-admin"]}>
+    <Button>{t("EditTree")}</Button>
+    <CreateTeam/>
+    </div>
+
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel>
+    <PlayerCard/>
+    <PlayerCard/>
+    <PlayerCard/>
+    <PlayerCard/>
+
+  </ResizablePanel>
+</ResizablePanelGroup>
+    )
+}
+export default AdminPage
@@ -0,0 +1,87 @@
+.block{
+    width: 2000px;
+    height: 2000px;
+    position: fixed;
+    top: -310px;
+    left: -808px;
+    z-index: -1;
+    background: rgb(136,255,42);
+    background: radial-gradient(circle, rgba(136,255,42,1) 0%, rgba(255,255,255,0) 52%, rgba(255,255,255,0) 100%); 
+}
+.landing{
+    font-family: "Arial Black";
+    margin-top: 200px;
+    margin-left: 20px;
+    font-size: 120px;
+    line-height: 100%;
+    text-transform: uppercase;
+
+}
+.info-block{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+}
+.desc-text{
+    margin-top: 10px;
+    margin-bottom: 2px;
+    text-align: center;
+    word-wrap: break-word;
+
+}
+@media (max-width: 910px) {
+    .landing{
+        font-family: "Arial Black";
+        margin-top: 100px;
+        margin-left: 20px;
+        font-size: 100px;
+        line-height: 100%;
+        text-transform: uppercase;
+    
+    }
+}
+@media (max-width: 760px) {
+    .landing{
+        font-family: "Arial Black";
+        margin-top: 100px;
+        margin-left: 20px;
+        font-size: 80px;
+        line-height: 100%;
+        text-transform: uppercase;
+    
+    }
+}
+@media (max-width: 520px) {
+    .landing{
+        font-family: "Arial Black";
+        margin-top: 100px;
+        margin-left: 20px;
+        font-size: 60px;
+        line-height: 100%;
+        text-transform: uppercase;
+    
+    }
+    .info-block{
+        display: flex;
+        position:absolute;
+        bottom: 0px;
+        padding: 5px;
+        padding-bottom: 15px;
+        flex-direction: column;
+        align-items: center;
+        margin: 0 auto;
+        background-color: rgba(88, 88, 88, 0.4);
+        }
+}
+@media (max-width: 400px) {
+    .landing{
+        font-family: "Arial Black";
+        margin-top: 100px;
+        margin-left: 20px;
+        font-size: 40px;
+        line-height: 100%;
+        text-transform: uppercase;
+    
+    }
+}
@@ -0,0 +1,22 @@
+import less from "./Landing.module.less"
+import '../../../i18n'
+import { Button } from "../../shared/ui/button"
+import { Label } from "@radix-ui/react-menubar"
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+function Landing() {
+    const { t } = useTranslation();
+
+  return (
+      <><div className={less.block}></div>
+        <h1 className={less.landing}>{t("landingLogo")}</h1>
+        <div className={less["info-block"]}>
+            <Label className={less["desc-text"]}>{t("landingDesc")}</Label>
+            <Button variant="outline" asChild><Link to={"login"}> {t("buttonGoTOReg")}</Link></Button>
+        </div>
+        </>
+  )
+}
+
+export default Landing
@@ -0,0 +1,40 @@
+.divv{
+    margin: 0;
+}
+.general-content{
+    margin-left: 20px;
+    display: flex;
+    height: 90vh;
+}
+.general-left{
+    width: 50%; 
+    display: flex;
+    justify-content: center;   
+    align-items: center;
+    flex-direction: column;
+    border-right-width: 1px;
+}
+.general-right{
+    margin-left: 20px;
+    
+}
+.input-form{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    width: 80%;
+    margin-bottom: 40px;
+}
+.input-item{
+    width: 80%;
+}
+.title-form{
+    font-size: 30px;
+}
+@media (max-width: 820px) {
+    .general-left{
+        width: 100%; 
+    }
+}
+
@@ -0,0 +1,38 @@
+import less from "./Main.module.less"
+import { useTranslation } from "react-i18next";
+import { Input } from "../../shared/ui/input";
+import { submitRegister } from "../../widgets/Header/AuthAPI";
+import { Button } from "../../shared/ui/button";
+import { Textarea } from "../../shared/ui/textarea";
+import { Link, useNavigate } from "react-router-dom";
+
+
+
+const Main = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+
+    return (
+        <div className={less["general-content"]}>
+            <div className={less["general-left"]}>
+                <form className={less["input-form"]} onSubmit={(event) => submitRegister(event, navigate)}>
+                    <h1 className={less["title-form"]}>{t("entrance")}</h1>
+                    <Input type="text" name="first_name" placeholder="Name" />
+                    <Input type="text" name="last_name" placeholder="Last name" />
+                    <Input type="date" name="birth_date" placeholder="Date" />
+                    <Input type="email" name="email" placeholder="Email" />
+                    
+                    <Textarea name="about" placeholder="About" />
+
+                    <Button>{t("buttonLoginInSystem")}</Button>
+                </form>
+                <Button variant="link"  asChild><Link to={"/dash/admin"}>{t("iorganizer")}</Link></Button>
+
+            </div>
+            <div className={less["general-right"]}>
+            </div>
+
+        </div>
+    )
+}
+export default Main;
@@ -0,0 +1,16 @@
+import TeamCard from "../../widgets/TeamInfoBlock/TeamInfoBlock";
+import UserProfile from "../../features/UserProfile/UserProfile";
+import less from "./MyTeams.module.less"
+import CreateTeam from "../../widgets/CreateTeams/CreateTeams";
+
+
+const MyTeams = () => {
+    return (
+        <>
+        <UserProfile />
+        <TeamCard/>
+        <CreateTeam/>
+        </>
+    )
+}
+export default MyTeams;
@@ -0,0 +1,29 @@
+.successful{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 40px;
+    height: 70vh;
+}
+.icon{
+    width: 80px;
+    height: 80px;
+}
+@media (max-width: 860px) {
+    .successful{
+        font-size: 25px;
+    }
+    .icon{
+        width: 60px;
+        height: 60px;
+    }
+}
+@media (max-width: 460px) {
+    .successful{
+        font-size: 18px;
+    }
+    .icon{
+        width: 30px;
+        height: 30px;
+    }
+}
@@ -0,0 +1,15 @@
+import less from "./Successful.module.less"
+
+const Successful = () => {
+
+
+    return (
+        <article className={less["successful"]}>
+        <svg className={less["icon"]} xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
+<linearGradient id="I9GV0SozQFknxHSR6DCx5a_70yRC8npwT3d_gr1" x1="9.858" x2="38.142" y1="9.858" y2="38.142" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#21ad64"></stop><stop offset="1" stop-color="#088242"></stop></linearGradient><path fill="url(#I9GV0SozQFknxHSR6DCx5a_70yRC8npwT3d_gr1)" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"></path><path d="M32.172,16.172L22,26.344l-5.172-5.172c-0.781-0.781-2.047-0.781-2.828,0l-1.414,1.414	c-0.781,0.781-0.781,2.047,0,2.828l8,8c0.781,0.781,2.047,0.781,2.828,0l13-13c0.781-0.781,0.781-2.047,0-2.828L35,16.172	C34.219,15.391,32.953,15.391,32.172,16.172z" opacity=".05"></path><path d="M20.939,33.061l-8-8c-0.586-0.586-0.586-1.536,0-2.121l1.414-1.414c0.586-0.586,1.536-0.586,2.121,0	L22,27.051l10.525-10.525c0.586-0.586,1.536-0.586,2.121,0l1.414,1.414c0.586,0.586,0.586,1.536,0,2.121l-13,13	C22.475,33.646,21.525,33.646,20.939,33.061z" opacity=".07"></path><path fill="#fff" d="M21.293,32.707l-8-8c-0.391-0.391-0.391-1.024,0-1.414l1.414-1.414c0.391-0.391,1.024-0.391,1.414,0	L22,27.758l10.879-10.879c0.391-0.391,1.024-0.391,1.414,0l1.414,1.414c0.391,0.391,0.391,1.024,0,1.414l-13,13	C22.317,33.098,21.683,33.098,21.293,32.707z"></path>
+</svg>
+<h2>Успешно, ожидайте ответа!</h2>
+        </article>
+    )
+}
+export default Successful;
@@ -0,0 +1,16 @@
+import { useTranslation } from "react-i18next";
+import TeamsCard from "../../entities/TeamsCard/TeamsCard";
+import SearchBar from "../../features/SearchBar/SearchBar";
+import less from "./Teams.moadule.less"
+
+
+const Teams = () => {
+    const { t } = useTranslation();
+
+    return (
+        <div><SearchBar title={t("teams")}/>
+                <TeamsCard />
+        </div>
+    )
+}
+export default Teams;