new file: components/Arrivals/aririvals.tsx

new file: components/Estimation/estimation.tsx new file: components/Layout.tsx new file: components/Table/Arrivals.tsx new file: components/Table/Rating.tsx new file: components/UI/Box/Box.tsx new file: components/UI/Box/styles.scss new file: components/UI/Button/Button.tsx new file: components/UI/Button/styles.scss new file: components/UI/H3/H3.scss new file: components/UI/H3/H3.tsx new file: components/UI/Menu/Menu.tsx new file: components/UI/Menu/menu.scss new file: components/UI/Switch/Switch.tsx new file: components/UI/Switch/styles.scss new file: components/UI/index.ts new file: "components/\320\241ategory/category.tsx" new file: html/menu.css new file: html/menu.html modified: package-lock.json modified: package.json modified: pages/_app.tsx new file: pages/arrivals.tsx modified: pages/index.tsx new file: pages/judging/aririvals.tsx new file: pages/judging/category.tsx new file: pages/slalom.tsx new file: postcss.config.js modified: styles/Home.module.css deleted: styles/globals.css new file: styles/globals.scss new file: tailwind.config.js
3 years ago · 208d583178
parent b7dbf89dfc
commit 208d583178
32 changed files with 4810 additions and 431 deletions
--- 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/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,12 +9,23 @@
    "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
@ -1,6 +1,10 @@
-import '../styles/globals.css'
+import '../styles/globals.scss'
 import type { AppProps } from 'next/app'
+import { Layout } from '../components/Layout'

 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return( 
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>)
 }
--- 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
@ -1,71 +1,10 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
-
+import Head from 'next/head';
 export default function Home() {
  return (
-    <div className={styles.container}>
      <Head>
-        <title>Create Next App</title>
+        <title>Соревнования по робототехнике</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
  )
 }
--- a/pages/judging/aririvals.tsx
+++ b/pages/judging/aririvals.tsx
@ -0,0 +1,35 @@
+
+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() {
+   
+    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() {
+  
+
+  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/styles/Home.module.css
+++ b/styles/Home.module.css
@ -1,15 +1,9 @@
-.container {
-  padding: 0 2rem;
-}
-
 .main {
-  min-height: 100vh;
-  padding: 4rem 0;
+  padding: 10px;
  flex: 1;
  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  margin: 0 auto;
+
 }

 .footer {
@ -21,109 +15,7 @@
  align-items: center;
 }

-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}
+.container{
+  margin: 0 auto;
 
-@media (prefers-color-scheme: dark) {
-  .card,
-  .footer {
-    border-color: #222;
-  }
-  .code {
-    background: #111;
-  }
-  .logo img {
-    filter: invert(1);
-  }
 }
--- a/styles/globals.css
+++ b/styles/globals.css
@ -1,26 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: white;
-    background: black;
-  }
-}
--- 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: [],
+}