38 changed files with 5458 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/README.md
+++ b/README.md
@ -1 +1,12 @@
-Мой первый GIT!
+## Загрузка сервера
+
+Сначала запустите сервер разработки:
+
+```bash
+npm install
+
+npm run dev
+# or
+
+```
+
--- a/components/Arrivals/aririvals.tsx
+++ b/components/Arrivals/aririvals.tsx
@ -0,0 +1,28 @@
+
+import styles from '../../styles/Home.module.css';
+import { Button, Box, Switch, H3 } from '../../components/UI';
+import React, { useState } from 'react'
+
+export default function Category() {
+    return(
+        <div className={styles.container}>
+            <div className='header'>
+                <H3>Заезды: Робо-слалом </H3>
+            </div>
+            <main className={styles.main}>
+                <div className='boxButton'>
+                    <p>Сторана А </p>
+                    <Button onClick={()=> fnStart()} disable={false} color={'bgBlue2'}>Название</Button>
+                    <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+                    <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+                </div>
+                <div className='boxButton'>
+                    <p>Сторона Б </p>
+                    <Button onClick={()=> fnStart()} disable={false} color={'bgBlue2'}>Название</Button>
+                    <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+                    <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+                </div>
+            </main>
+        </div>
+    )
+}
--- a/components/Estimation/estimation.tsx
+++ b/components/Estimation/estimation.tsx
@ -0,0 +1,143 @@
+
+import Grid from '@mui/material/Grid';
+import { Button, Box, Switch } from '../../components/UI';
+import React, { useState } from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+    disable: boolean;
+  }
+
+  let scores_nay = 0;
+
+  
+
+export const Estimation: React.FC<Props> = ({children, onClick, disable}) => {
+    const [counter, setCounter] = useState(0);
+  const [butStartnDisable, setButStartnDisable] = useState(false);
+  const [butWriteDisable, setButWriteDisable] = useState(true);
+  const [switchDisable, setSwitchDisable] = useState(true);
+  const [scores, setScores] = useState(0);
+  const [start, setStart] = useState(false);
+  const [buttonText, setButtonText] = useState('СТАРТ');
+  const [data, setData] = useState({switchstart: false, switchwasher_1: false, switchwasher_2: false, switchwasher_3: false, switchwasher_4: false, switchfinish: false});
+  
+  React.useEffect(() => {
+    const timer =
+      ( counter < 60 ) && start && setInterval(() => setCounter(counter + 1), 1000);
+    return () => clearInterval(timer);
+  }, [counter, start]);
+ 
+  const fnStart = () => {
+    setStart(start ? false : true);
+    setButtonText(start ? 'СТАРТ':'СТОП');
+    console.log(start);
+    setButStartnDisable(start ? true : false);
+    setSwitchDisable(false);
+    setButWriteDisable(false);
+  }
+
+
+  const fnWrite = () => {
+    console.log(scores);
+  }
+
+  const updateData = (e: any) => {
+    setData({
+      ...data, [e.target.id]: e.target.checked
+    });
+    scores_nay = e.target.checked ? scores_nay+parseInt(e.target.value): scores_nay-parseInt(e.target.value);
+    setScores(e.target.checked ? scores+parseInt(e.target.value): scores-parseInt(e.target.value))
+
+    if (scores_nay === 50) {
+      setScores(scores_nay+(60-counter));
+    }
+  }
+    return(
+        <Grid container rowSpacing={1} columnSpacing={{ xs: 12, sm: 2, md: 2 }}>
+          <Grid item xs={12} sm={2} md={6}>
+            <Box> 
+              <div className='taskBox'> 
+                  <p className='taskTitle'>Команда: Имя</p>
+              </div>
+              <div className='taskBox'> 
+                  <p className='taskTitle'>Время: {counter} сек</p>
+                  <p className='taskTitle'>Баллы: {scores} </p>
+              </div>
+
+                <div className='taskBox'> 
+                  <p className='taskTitle'>Выезд из зоны старта</p>
+                  <Switch 
+                    isOn={data.switchstart}
+                    value={5}
+                    disable={switchDisable}
+                    name={'start'}
+                    onColor="#EF476F"
+                    handleToggle={(e) => updateData(e)}>
+                  </Switch>
+                </div>
+                <div className='taskBox'> 
+                  <p className='taskTitle'>Первая щайба</p>
+                  <Switch 
+                    isOn={data.switchwasher_1}
+                    name={'washer_1'}
+                    value={10}
+                    disable={switchDisable}
+                    onColor="#EF476F"
+                    handleToggle={(e) => updateData(e)}>
+                  </Switch>
+                </div>
+                <div className='taskBox'> 
+                  <p className='taskTitle'>Вторая шайба</p>
+                  <Switch 
+                   isOn={data.switchwasher_2}
+                   name={'washer_2'}
+                   value={10}
+                   disable={switchDisable}
+                   onColor="#EF476F"
+                   handleToggle={(e) => updateData(e)}>
+                  </Switch>
+                </div>
+                <div className='taskBox'> 
+                  <p className='taskTitle'>Третья шайба</p>
+                  <Switch 
+                   isOn={data.switchwasher_3}
+                   name={'washer_3'}
+                   value={10}
+                   disable={switchDisable}
+                   onColor="#EF476F"
+                   handleToggle={(e) => updateData(e)}>
+                  </Switch>
+                </div>
+                <div className='taskBox'> 
+                  <p className='taskTitle'>Четвертая шайба</p>
+                  <Switch 
+                    isOn={data.switchwasher_4}
+                    name={'washer_4'}
+                    value={10}
+                    disable={switchDisable}
+                    onColor="#EF476F"
+                    handleToggle={(e) => updateData(e)}>
+                  </Switch>
+                </div>
+                <div className='taskBox'> 
+                  <p className='taskTitle'>Заезд в зону финиша</p>
+                  <Switch 
+                    isOn={data.switchfinish}
+                    name={'finish'}
+                    value={5}
+                    disable={switchDisable}
+                    onColor="#EF476F"
+                    handleToggle={(e) => updateData(e)}>
+                  </Switch>
+                </div>
+                <div className='boxButton'>
+                  <Button onClick={()=> fnStart()} disable={butStartnDisable}>{buttonText}</Button>
+                  <Button onClick={()=> fnWrite()} disable={butWriteDisable}>Подтверждаю результат</Button>
+                </div>
+            </Box>
+          </Grid>
+        </Grid>
+    )
+}
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@ -0,0 +1,19 @@
+import React from 'react';
+import { Menu } from './UI/Menu/Menu';
+import styles from './../styles/Home.module.css';
+
+
+type Props = {
+    children?: React.ReactNode;
+  }
+
+export const Layout: React.FC<Props> = ({children}) => {
+    return(
+        <>
+            <Menu/>
+            <div className={styles.container}>
+                {children}
+            </div>
+        </>
+    )
+}
--- a/components/Table/Arrivals.tsx
+++ b/components/Table/Arrivals.tsx
@ -0,0 +1,61 @@
+import React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+
+
+type Props = {
+    nominations: string;
+    data: {
+        name: string,
+        attempt_1: number,
+        attempt_2: number,
+        attempt_3: number,
+        attempt_4: number,
+        attempt_all: number
+    }[];
+  }
+
+export const TableArrivals: React.FC<Props> = ({nominations,data}) => {
+    return(
+        <TableContainer component={Paper}> 
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell align="center" colSpan={6}>
+                    {nominations}
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+            <TableHead >
+            <TableRow >
+                <TableCell rowSpan={2}>№</TableCell>
+                <TableCell colSpan={2} align="center">Раунд I</TableCell>
+                <TableCell colSpan={2} align="center">Раунд II</TableCell>
+              </TableRow>
+              <TableRow >
+                <TableCell align="center">Команда 1</TableCell>
+                <TableCell align="center">Команда 2</TableCell>
+                <TableCell align="center">Команда 1</TableCell>
+                <TableCell align="center">Команда 2</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.map((row, key) => (
+                <TableRow key={row.name}>
+                    <TableCell align="center">{key+1}</TableCell>
+                    <TableCell component="th" scope="row"> {row.name}</TableCell>
+                    <TableCell align="center">{row.name}</TableCell>
+                    <TableCell align="center">{row.name}</TableCell>
+                    <TableCell align="center">{row.name}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+    )
+}
--- a/components/Table/Rating.tsx
+++ b/components/Table/Rating.tsx
@ -0,0 +1,65 @@
+import React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+
+
+type Props = {
+    nominations: string;
+    data: {
+        name: string,
+        attempt_1: number,
+        attempt_2: number,
+        attempt_3: number,
+        attempt_4: number,
+        attempt_all: number
+    }[];
+  }
+
+export const TableRating: React.FC<Props> = ({nominations,data}) => {
+    return(
+        <TableContainer component={Paper}> 
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell align="center" colSpan={6}>
+                    {nominations}
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+            <TableHead >
+            <TableRow >
+                <TableCell rowSpan={2}>№</TableCell>
+                <TableCell rowSpan={2}>Команды</TableCell>
+                <TableCell colSpan={2} align="center">Раунд I</TableCell>
+                <TableCell colSpan={2} align="center">Раунд II</TableCell>
+                <TableCell rowSpan={2} align="center">Всего</TableCell>
+              </TableRow>
+              <TableRow >
+                <TableCell align="center">Попытка 1</TableCell>
+                <TableCell align="center">Попытка 2</TableCell>
+                <TableCell align="center">Попытка 1</TableCell>
+                <TableCell align="center">Попытка 2</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.map((row, key) => (
+                <TableRow key={row.name}>
+                    <TableCell align="center">{key+1}</TableCell>
+                    <TableCell component="th" scope="row"> {row.name}</TableCell>
+                    <TableCell align="center">{row.attempt_1}</TableCell>
+                    <TableCell align="center">{row.attempt_2}</TableCell>
+                    <TableCell align="center">{row.attempt_3}</TableCell>
+                    <TableCell align="center">{row.attempt_4}</TableCell>
+                    <TableCell align="center">{row.attempt_all}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+    )
+}
--- a/components/UI/Box/Box.tsx
+++ b/components/UI/Box/Box.tsx
@ -0,0 +1,12 @@
+
+import React from 'react';
+
+interface Props {
+    children?: React.ReactNode;
+  }
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className="Main_box">{children}</div>
+    )
+}
--- a/components/UI/Box/styles.scss
+++ b/components/UI/Box/styles.scss
@ -0,0 +1,3 @@
+.Main_box{
+    width: 1024px;
+}
--- a/components/UI/Button/Button.tsx
+++ b/components/UI/Button/Button.tsx
@ -0,0 +1,15 @@
+
+import React from 'react';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+    disable: boolean;
+    color: string;
+  }
+
+export const Button: React.FC<Props> = ({children, onClick, disable, color}) => {
+    return(
+        <button className={"button-17 "+ color} role="button" onClick={onClick} disabled={disable}>{children}</button>
+    )
+}
--- a/components/UI/Button/styles.scss
+++ b/components/UI/Button/styles.scss
@ -0,0 +1,81 @@
+/* CSS */
+.button-17 {
+  align-items: center;
+  appearance: none;
+  border-radius: 24px;
+  border-style: none;
+  box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
+  box-sizing: border-box;
+  color: #3c4043;
+  cursor: pointer;
+  display: inline-flex;
+  fill: currentcolor;
+  font-family: "Google Sans",Roboto,Arial,sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  height: 48px;
+  justify-content: center;
+  letter-spacing: .25px;
+  line-height: normal;
+  max-width: 100%;
+  overflow: visible;
+  padding: 2px 24px;
+  position: relative;
+  text-align: center;
+  text-transform: none;
+  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  width: 350px;
+  will-change: transform,opacity;
+  z-index: 0;
+  margin: 5px;
+}
+
+.bgBlue2{
+  background-color: #4285f4;
+}
+
+.bgGreen{
+  background-color: greenyellow;
+}
+
+.bgBlue{
+  background-color: blue;
+}
+
+.button-17:hover {
+  background: #F6F9FE;
+  color: #174ea6;
+}
+
+.button-17:active {
+  box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
+  outline: none;
+}
+
+.button-17:focus {
+  outline: none;
+  border: 2px solid #4285f4;
+}
+
+.button-17:not(:disabled) {
+  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
+}
+
+.button-17:not(:disabled):hover {
+  box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
+}
+
+.button-17:not(:disabled):focus {
+  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
+}
+
+.button-17:not(:disabled):active {
+  box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
+}
+
+.button-17:disabled {
+  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
+}
--- a/components/UI/H3/H3.scss
+++ b/components/UI/H3/H3.scss
@ -0,0 +1,4 @@
+.h3{
+    font-size: 30px;
+    text-align: center;
+}
--- a/components/UI/H3/H3.tsx
+++ b/components/UI/H3/H3.tsx
@ -0,0 +1,14 @@
+import React from 'react';
+import type { ReactElement } from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+  }
+
+export const H3: React.FC<Props> = ({children}) => {
+    return(
+        <h3 className='h3'>
+        {children}
+        </h3>
+    )
+}
--- a/components/UI/Menu/Menu.tsx
+++ b/components/UI/Menu/Menu.tsx
@ -0,0 +1,19 @@
+import React from 'react';
+import type { ReactElement } from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+  }
+
+export const Menu: React.FC<Props> = ({children}) => {
+    return(
+        <details>
+            <summary></summary>
+            <nav className="menu">
+                <a href="slalom">Рейтинг: Слалом</a>
+                <a href="arrivals">Заезды: Слалом</a>
+                <a href="judging">Судейство: Слалом</a>
+            </nav>
+        </details>
+    )
+}
--- a/components/UI/Menu/menu.scss
+++ b/components/UI/Menu/menu.scss
@ -0,0 +1,110 @@
+
+  details {
+    margin: 5px;
+    position: absolute;
+    z-index: 9999;
+  }
+
+  summary {
+    writing-mode: vertical-lr;
+    text-align: center;
+    padding: 12px 10px;
+    width: 23px;
+    height: 17px;
+    background-color: var(--primColor);
+    border-radius: var(--cornerRad);
+    color: var(--secoColor);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    transition: transform 200ms ease-in-out 0s;
+  }
+  summary::before,
+  summary::after {
+    position: static;
+    top: 0;
+    left: 0;
+  }
+  summary::before {
+    content: "";
+  }
+  summary::after {
+    content: "III";
+    letter-spacing: -1px;
+  }
+  summary:hover {
+    transform: scale(1.1);
+  }
+  summary::marker {
+    font-size: 0;
+  }
+  summary::-webkit-details-marker {
+    display: none;
+  }
+  details[open] .menu {
+    animation-name: menuAnim;
+  }
+  details[open] summary::before {
+    content: "X";
+  }
+  details[open] summary::after {
+    content: "";
+  }
+  .menu {
+    height: 0;
+    width: fit-content;
+    border-radius: var(--cornerRad);
+    background-color: #fff;
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+    animation: closeMenu 300ms ease-in-out forwards;
+    z-index: 9999;
+  }
+  .menu a {
+    padding: 12px 24px;
+    margin: 0 16px;
+    color: var(--secoColor);
+    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+    text-decoration: none;
+    text-align: center;
+    transition: filter 200ms linear 0s;
+  }
+  .menu a:nth-of-type(1) {
+    padding-top: 24px;
+  }
+  .menu a:nth-last-of-type(1) {
+    border-bottom: none;
+  }
+  .menu a:hover {
+    filter: brightness(200%);
+  }
+  details::before {
+    color: var(--secoColor);
+    position: absolute;
+    margin-left: 80px;
+    padding: 10px 10px;
+    opacity: 0.4;
+  }
+  details[open]::before {
+    animation: fadeMe 300ms linear forwards;
+  }
+  @keyframes menuAnim {
+    0% {
+      height: 0;
+    }
+    100% {
+      height: 312px;
+    }
+  }
+  @keyframes fadeMe {
+    0% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
--- a/components/UI/Switch/Switch.tsx
+++ b/components/UI/Switch/Switch.tsx
@ -0,0 +1,33 @@
+import React from 'react';
+
+interface Props {
+    isOn: boolean;
+    handleToggle: () => void;
+    onColor: string;
+    name: string;
+    value: number;
+    disable: boolean;
+  }
+
+export const Switch: React.FC<Props> = ({isOn, handleToggle, onColor, name, value, disable }) => {
+    return(
+        <>
+        <input
+          checked={isOn}
+          onChange={handleToggle}
+          className="react-switch-checkbox"
+          id={`switch`+name}
+          type="checkbox"
+          value={value}
+          disabled={disable}
+      />
+      <label
+        style={{ 'background' : isOn && onColor }}
+        className="react-switch-label"
+        htmlFor={`switch`+name}
+      >
+        <span className={`react-switch-button`} />
+      </label>
+      </>
+    )
+}
--- a/components/UI/Switch/styles.scss
+++ b/components/UI/Switch/styles.scss
@ -0,0 +1,41 @@
+.react-switch-checkbox {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+    float: right;
+  }
+  
+  .react-switch-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    width: 90px;
+    height: 40px;
+    background: grey;
+    border-radius: 100px;
+    position: relative;
+    transition: background-color .2s;
+  }
+  
+  .react-switch-label .react-switch-button {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 35px;
+    height: 35px;
+    border-radius: 45px;
+    transition: 0.2s;
+    background: #fff;
+    box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
+  }
+  
+  .react-switch-checkbox:checked + .react-switch-label .react-switch-button {
+    left: calc(100% - 2px);
+    transform: translateX(-100%);
+  }
+  
+  .react-switch-label:active .react-switch-button {
+    width: 60px;
+  }
--- a/components/UI/index.ts
+++ b/components/UI/index.ts
@ -0,0 +1,4 @@
+export * from './Button/Button'
+export * from './H3/H3'
+export * from './Box/Box'
+export * from './Switch/Switch'
--- a/components/Сategory/category.tsx
+++ b/components/Сategory/category.tsx
@ -0,0 +1,30 @@
+
+import Grid from '@mui/material/Grid';
+import { Button, Box, Switch } from '../../components/UI';
+import React, { useState } from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+    disable: boolean;
+  }
+
+export const Category: React.FC<Props> = ({children, onClick, disable}) => {
+   
+    return(
+        <>
+        <div className='boxButton'>
+            <p>Выберите наминацию ? </p>
+            <Button onClick={()=> fnStart()} disable={false}>Стол: А - Младшая</Button>
+            <Button onClick={()=> fnStart()} disable={false}>Стол: А - Средняя</Button>
+            <Button onClick={()=> fnStart()} disable={false}>Стол: А - Старшая</Button>
+        </div>
+        <div className='boxButton'>
+            <p>Выберите стол ? </p>
+            <Button onClick={()=> fnStart()} disable={false}>Стол: Б - Младшая</Button>
+            <Button onClick={()=> fnStart()} disable={false}>Стол: Б - Средняя</Button>
+            <Button onClick={()=> fnStart()} disable={false}>Стол: Б - Старшая</Button>
+        </div>
+      </>
+    )
+}
--- a/html/menu.css
+++ b/html/menu.css
@ -0,0 +1,106 @@
+body {
+ text-align: center; 
+}
+.mdl-button--fab_flinger-container {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
+
+.mdl-button--fab_flinger-container.is-showing-options > button i {
+  -webkit-transition: -webkit-transform 0.1s linear;
+  transition: transform 0.1s linear;
+  -webkit-transform: translate(-12px, -12px) rotate(45deg);
+  -ms-transform: translate(-12px, -12px) rotate(45deg);
+  transform: translate(-12px, -12px) rotate(45deg);
+}
+
+.mdl-button--fab_flinger-container.is-showing-options .mdl-button--fab_flinger-options {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: column-reverse;
+  -ms-flex-direction: column-reverse;
+  flex-direction: column-reverse;
+}
+
+.mdl-button--fab_flinger-container.is-showing-options .mdl-button--fab_flinger-options button {
+  display: block;
+  -webkit-animation-name: enter;
+  animation-name: enter;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-duration: 0.1s;
+  animation-duration: 0.1s;
+  -webkit-transform-origin: bottom center;
+  -ms-transform-origin: bottom center;
+  transform-origin: bottom center;
+}
+
+.mdl-button--fab_flinger-container.is-showing-options .mdl-button--fab_flinger-options button:nth-of-type(1) {
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+
+.mdl-button--fab_flinger-container.is-showing-options .mdl-button--fab_flinger-options button:nth-of-type(2) {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+
+.mdl-button--fab_flinger-container.is-showing-options .mdl-button--fab_flinger-options button:nth-of-type(3) {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+
+.mdl-button--fab_flinger-container.is-showing-options .mdl-button--fab_flinger-options button:nth-of-type(4) {
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.mdl-button--fab_flinger-container.is-showing-options .mdl-button--fab_flinger-options button:nth-of-type(5) {
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.mdl-button--fab_flinger-container.is-showing-options .mdl-button--fab_flinger-options button:nth-of-type(6) {
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+
+.mdl-button--fab_flinger-container .mdl-button--fab_flinger-options {
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: 10px;
+}
+
+.mdl-button--fab_flinger-container .mdl-button--fab_flinger-options button {
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  display: none;
+}
+
+@-webkit-keyframes enter {
+  from {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+  }
+}
+
+@keyframes enter {
+  from {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+  }
+}
--- a/html/menu.html
+++ b/html/menu.html
@ -0,0 +1,11 @@
+<link rel="stylesheet" href="menu.css">
+<details>
+  <summary></summary>
+  <nav class="menu">
+    <a href="#link">Home</a>
+    <a href="#link">Work</a>
+    <a href="#link">Links</a>
+    <a href="#link">Contact</a>
+    <a href="#link">About</a>
+  </nav>
+</details>
--- a/next.config.js
+++ b/next.config.js
@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,31 @@
+{
+  "name": "competitions",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/material": "^5.10.12",
+    "@types/node": "18.11.9",
+    "@types/react": "18.0.24",
+    "@types/react-dom": "18.0.8",
+    "next": "13.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-timer-wrapper": "^0.4.1",
+    "typescript": "4.8.4"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.18",
+    "sass": "^1.56.0",
+    "tailwindcss": "^3.2.1"
+  }
+}
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -0,0 +1,10 @@
+import '../styles/globals.scss'
+import type { AppProps } from 'next/app'
+import { Layout } from '../components/Layout'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return( 
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>)
+}
--- a/pages/api/hello.ts
+++ b/pages/api/hello.ts
@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
--- a/pages/arrivals.tsx
+++ b/pages/arrivals.tsx
@ -0,0 +1,46 @@
+import styles from '../styles/Home.module.css';
+import Grid from '@mui/material/Grid';
+import { H3 } from '../components/UI/H3/H3';
+import { TableArrivals } from '../components/Table/Arrivals';
+
+function createData(
+  name: string,
+  attempt_1: number,
+  attempt_2: number,
+  attempt_3: number,
+  attempt_4: number,
+  attempt_all: number
+) {
+  return { name, attempt_1, attempt_2, attempt_3, attempt_4, attempt_all };
+}
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6, 24, 4, 5),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 5),
+  createData('Eclair', 262, 16.0, 24, 6.0, 6),
+  createData('Cupcake', 305, 3.7, 67, 4.3, 7),
+  createData('Gingerbread', 356, 16.0, 49, 3.9, 8),
+];
+
+export default function Arrivals() {
+  return (
+    <div className={styles.container}>
+      <div className='header'>
+        <H3>Заезды: Робо-слалом </H3>
+      </div>
+      <main className={styles.main}>
+        <Grid container rowSpacing={1} columnSpacing={{ xs: 12, sm: 4, md: 4 }}>
+          <Grid item xs={12} sm={3} md={4}>
+            <TableArrivals nominations={'Младшая группа'} data={rows}/>
+          </Grid>
+          <Grid item xs={12} sm={3} md={4}>
+            <TableArrivals nominations={'Младшая группа'} data={rows}/>
+          </Grid>
+          <Grid item xs={12} sm={3} md={4}>
+            <TableArrivals nominations={'Младшая группа'} data={rows}/>
+          </Grid>
+        </Grid>
+      </main>
+    </div>
+  )
+}
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -0,0 +1,10 @@
+import Head from 'next/head';
+export default function Home() {
+  return (
+      <Head>
+        <title>Соревнования по робототехнике</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+  )
+}
--- a/pages/judging/aririvals.tsx
+++ b/pages/judging/aririvals.tsx
@ -0,0 +1,36 @@
+
+import styles from '../../styles/Home.module.css';
+import { Button, H3 } from '../../components/UI';
+import React, { useState } from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+    disable: boolean;
+  }
+
+export default function  Aririvals() {
+   console.log(45)
+    return(
+        <>
+          <div className='header'>
+            <H3>Заезды: Робо-слалом </H3>
+          </div>
+          <main className={styles.main}>
+            <div className='boxButton'>
+                <p>Сторана А </p>
+                <Button onClick={()=> fnStart()} disable={false} color={'bgBlue2'}>Название</Button>
+                <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+                <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+              </div>
+              <div className='boxButton'>
+                <p>Сторона Б </p>
+                <Button onClick={()=> fnStart()} disable={false} color={'bgBlue2'}>Название</Button>
+                <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+                <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+              </div>
+            </main>
+
+        </>
+    )
+}
--- a/pages/judging/category.tsx
+++ b/pages/judging/category.tsx
@ -0,0 +1,30 @@
+import styles from '../../styles/Home.module.css';
+import { H3, Button } from '../../components/UI';
+import React, { useState } from 'react'
+
+
+export default function Judging() {
+  
+  console.log('de');
+  return (
+    <div className={styles.container}>
+      <div className='header'>
+        <H3>Заезды: Робо-слалом </H3>
+      </div>
+      <main className={styles.main}>
+        <div className='boxButton'>
+          <p>Сторана А </p>
+          <Button onClick={()=> fnStart()} disable={false} color={'bgBlue2'}>Название</Button>
+          <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+          <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+        </div>
+        <div className='boxButton'>
+          <p>Сторона Б </p>
+          <Button onClick={()=> fnStart()} disable={false} color={'bgBlue2'}>Название</Button>
+          <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+          <Button onClick={()=> fnStart()} disable={false} color={'bgGreen'}>Название</Button>
+        </div>
+      </main>
+    </div>
+  )
+}
--- a/pages/slalom.tsx
+++ b/pages/slalom.tsx
@ -0,0 +1,46 @@
+import styles from '../styles/Home.module.css';
+import { TableRating } from '../components/Table/Rating';
+import Grid from '@mui/material/Grid';
+import { H3 } from '../components/UI/H3/H3';
+
+function createData(
+  name: string,
+  attempt_1: number,
+  attempt_2: number,
+  attempt_3: number,
+  attempt_4: number,
+  attempt_all: number
+) {
+  return { name, attempt_1, attempt_2, attempt_3, attempt_4, attempt_all };
+}
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6, 24, 4, 5),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 5),
+  createData('Eclair', 262, 16.0, 24, 6.0, 6),
+  createData('Cupcake', 305, 3.7, 67, 4.3, 7),
+  createData('Gingerbread', 356, 16.0, 49, 3.9, 8),
+];
+
+export default function Slalom() {
+  return (
+    <div className={styles.container}>
+      <div className='header'>
+        <H3>Рейтинг: Робо-слалом </H3>
+      </div>
+      <main className={styles.main}>
+        <Grid container rowSpacing={1} columnSpacing={{ xs: 12, sm: 2, md: 2 }}>
+          <Grid item xs={12} sm={3} md={4}>
+            <TableRating nominations={'Младшая группа'} data={rows} />
+          </Grid>
+          <Grid item xs={12} sm={3} md={4}>
+            <TableRating nominations={'Средняя группа'} data={rows} />
+          </Grid>
+          <Grid item xs={12} sm={3} md={4}>
+            <TableRating nominations={'Старшая группа'} data={rows} />
+          </Grid>
+        </Grid>
+      </main>
+    </div>
+  )
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/vercel.svg
+++ b/public/vercel.svg
@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@ -0,0 +1,21 @@
+.main {
+  padding: 10px;
+  flex: 1;
+  display: flex;
+  margin: 0 auto;
+
+}
+
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+}
+
+.container{
+  margin: 0 auto;
+ 
+}
--- a/styles/globals.scss
+++ b/styles/globals.scss
@ -0,0 +1,51 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import './components/UI/H3/H3.scss';
+@import './components/UI/Menu/menu.scss';
+@import './components/UI/Button/styles.scss';
+@import './components/UI/Box/styles.scss';
+@import './components/UI/Switch/styles.scss';
+
+
+
+:root {
+    --primColor: #dcdcdc;
+    --secoColor: #555555;
+    --cornerRad: 4px;
+  }
+
+  body {
+    background-color: var(--primColor);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 20px;
+  }
+
+  .header{
+    margin-top: 10px;
+  }
+
+
+  .taskBox{
+    display: flex;
+    margin: 7px;
+    width: 350px;
+  }
+
+  .taskTitle{
+    padding: 4px;
+    width: 70%;
+    float: left;
+    clear: right;
+  }
+
+  .boxButton{
+    display: grid;
+    margin: 10px;
+    padding: 10px;
+    flex: 1 1 auto;
+  }
+
+  .border{
+    border: thick double #32a1ce;
+  }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}