4:11a.m. ohhh yeah
This commit is contained in:
parent
2a4d54ea96
commit
6dbb6afa3e
@ -7,9 +7,8 @@
|
|||||||
<title>unreal tests</title>
|
<title>unreal tests</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column" style="height: auto; min-height: 100%">
|
<body id="root" class="d-flex flex-column" style="height: auto; min-height: 100%">
|
||||||
<div id="root" class="d-flex flex-column" style="height: auto; min-height: 100%" ></div>
|
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -1,6 +1,5 @@
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Outlet } from 'react-router-dom';
|
import { Outlet } from 'react-router-dom';
|
||||||
import './App.css';
|
|
||||||
import Footer from './components/footer/Footer.jsx';
|
import Footer from './components/footer/Footer.jsx';
|
||||||
import Header from './components/navigation/Header.jsx';
|
import Header from './components/navigation/Header.jsx';
|
||||||
|
|
||||||
|
|||||||
16
laba4/site/src/components/caroucele/Caroucele.css
Normal file
16
laba4/site/src/components/caroucele/Caroucele.css
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.carousel-item{
|
||||||
|
height: 30rem !important;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size:cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselItem1{
|
||||||
|
background-image: url("image.jpg");
|
||||||
|
}
|
||||||
|
.carouselItem2{
|
||||||
|
background-image: url("image.jpg");
|
||||||
|
}
|
||||||
|
.carouselItem3{
|
||||||
|
background-image: url("image.jpg");
|
||||||
|
}
|
||||||
49
laba4/site/src/components/caroucele/Caroucele.jsx
Normal file
49
laba4/site/src/components/caroucele/Caroucele.jsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import './Caroucele.css';
|
||||||
|
|
||||||
|
const Caroucele = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{ marginTop: '1rem', backgroundColor: '#252b48' }}>
|
||||||
|
<div id="carouselExample" style={{ maxWidth: '30rem' }} className="carousel slide w-50 mx-auto">
|
||||||
|
<div className="carousel-inner">
|
||||||
|
<div className="carousel-item active carouselItem1">
|
||||||
|
<div style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
||||||
|
<h2>Ваше описание</h2>
|
||||||
|
</div>
|
||||||
|
<div style={{ position: 'absolute', bottom: '2', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
||||||
|
<Link to="/testPage" className="btn btn-primary startButton" >Начать</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="carousel-item carouselItem2">
|
||||||
|
<div style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
||||||
|
<h2>Ваше описание</h2>
|
||||||
|
</div>
|
||||||
|
<div style={{ position: 'absolute', bottom: '2', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
||||||
|
<Link to="/testPage" className="btn btn-primary startButton" >Начать</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="carousel-item carouselItem3">
|
||||||
|
<div style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
||||||
|
<h2>Ваше описание</h2>
|
||||||
|
</div>
|
||||||
|
<div style={{ position: 'absolute', bottom: '2', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
||||||
|
<Link to="/testPage" className="btn btn-primary startButton" >Начать</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
|
||||||
|
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
|
<span className="visually-hidden">Previous</span>
|
||||||
|
</button>
|
||||||
|
<button className="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
|
||||||
|
<span className="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span className="visually-hidden">Next</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Caroucele;
|
||||||
15
laba4/site/src/components/createdTest/CreatedTest.jsx
Normal file
15
laba4/site/src/components/createdTest/CreatedTest.jsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
const CreatedTest = () => {
|
||||||
|
return (
|
||||||
|
<div className="row justify-content-center align-items-center g-2 mt-1 mb-1">
|
||||||
|
<div className="col-2">пёс</div>
|
||||||
|
<div className="col">ПЁЁЁСdfghkl;khgddfhkl;kjgfgh</div>
|
||||||
|
<Link to="/testPage" class="col-2 btn btn-primary startButton">открыть тест</Link>
|
||||||
|
<Link to="#" className="col-2 btn btn-secondary startButton">изменить</Link>
|
||||||
|
<Link to="#" className="col-2 btn btn-danger startButton">удалить</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreatedTest;
|
||||||
@ -19,9 +19,9 @@ const Header = () => {
|
|||||||
</button>
|
</button>
|
||||||
<div className="navbar-collapse collapse justify-content-end" id="navbarNav">
|
<div className="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||||
<div className="navbar-nav">
|
<div className="navbar-nav">
|
||||||
<Link className="nav-link active" to="/logIn.html">Вход</Link>
|
<Link className="nav-link active" to="/LogIn">Вход</Link>
|
||||||
<Link className="nav-link" to="/signIn.html">Регистрация</Link>
|
<Link className="nav-link" to="/SignIn">Регистрация</Link>
|
||||||
<Link className="nav-link" to="/profile.html">Профиль</Link>
|
<Link className="nav-link" to="/Profile">Профиль</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
42
laba4/site/src/components/question/Question.jsx
Normal file
42
laba4/site/src/components/question/Question.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const Question = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="mb-2" style={{ backgroundColor: '#445069', display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<div className="p-2">
|
||||||
|
<Form.Label className="form-label" htmlFor="file">Файл картинки</Form.Label>
|
||||||
|
<Form.Control type="file" className="form-control" id="file" />
|
||||||
|
</div>
|
||||||
|
<div className="p-2 w-100" style={{ height: '500px' }}>
|
||||||
|
<img src="image.jpg" className="h-100 w-100" style={{ objectFit: 'cover' }} alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="p-2">
|
||||||
|
<Form.Label className="form-label" htmlFor="taskText">Текст вопроса</Form.Label>
|
||||||
|
<Form.Control id="taskText" name="taskText" className="form-control" type="text" required />
|
||||||
|
</div>
|
||||||
|
<div className="p-2">
|
||||||
|
Ответы на вопрос:
|
||||||
|
<div className="form-check me-3">
|
||||||
|
<Form.Check className="" id="checkbox1" name="checkbox1" type="checkbox" />
|
||||||
|
<Form.Control id="checkbox1text" name="checkbox1text" className="form-control" type="text" placeholder="ответ 1" />
|
||||||
|
</div>
|
||||||
|
<div className="form-check me-3">
|
||||||
|
<Form.Check className="" id="checkbox2" name="checkbox2" type="checkbox" />
|
||||||
|
<Form.Control id="checkbox2text" name="checkbox2text" className="form-control" type="text" placeholder="ответ 2" />
|
||||||
|
</div>
|
||||||
|
<div className="form-check me-3">
|
||||||
|
<Form.Check className="" id="checkbox3" name="checkbox3" type="checkbox" />
|
||||||
|
<Form.Control id="checkbox3text" name="checkbox3text" className="form-control" type="text" placeholder="ответ 3" />
|
||||||
|
</div>
|
||||||
|
<div className="form-check me-3">
|
||||||
|
<Form.Check className="" id="checkbox4" name="checkbox4" type="checkbox" />
|
||||||
|
<Form.Control id="checkbox4text" name="checkbox4text" className="form-control" type="text" placeholder="ответ 4" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Question;
|
||||||
23
laba4/site/src/components/rowTest/RowTest.jsx
Normal file
23
laba4/site/src/components/rowTest/RowTest.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const RowTest = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="row justify-content-center align-items-center g-2 mt-3 mb-3" style={{ height: '10rem' }}>
|
||||||
|
<div className="col-3 h-100">
|
||||||
|
<img src="image.jpg" className="w-100 h-100" style={{ objectFit: 'cover' }} />
|
||||||
|
</div>
|
||||||
|
<div className="col justify-content-between h-100" style={{ position: 'relative', width: '70%' }}>
|
||||||
|
<div className="row-10 justify-content-center align-items-center g-2">
|
||||||
|
<h3 className="w-100 mx-auto text-left">описание</h3>
|
||||||
|
</div>
|
||||||
|
<div className="row-2 justify-content-left align-items-left g-2" style={{ position: 'absolute', bottom: '2', left: '2', width: '100%' }}>
|
||||||
|
<Link to="/TestPage" className="btn btn-primary startButton">Начать</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RowTest;
|
||||||
@ -33,19 +33,13 @@ body{
|
|||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-item{
|
.form-check-input{
|
||||||
height: 30rem !important;
|
border: none;
|
||||||
background-repeat: no-repeat;
|
border-radius: 0px !important;
|
||||||
background-size:cover;
|
background-clip: padding-box;
|
||||||
background-position: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.carouselItem1{
|
.form-control{
|
||||||
background-image: url("image.jpg");
|
padding-top: 0;
|
||||||
}
|
padding-bottom: 0;
|
||||||
.carouselItem2{
|
|
||||||
background-image: url("image.jpg");
|
|
||||||
}
|
|
||||||
.carouselItem3{
|
|
||||||
background-image: url("image.jpg");
|
|
||||||
}
|
}
|
||||||
@ -6,6 +6,12 @@ import App from './App.jsx';
|
|||||||
import './index.css';
|
import './index.css';
|
||||||
import ErrorPage from './pages/ErrorPage.jsx';
|
import ErrorPage from './pages/ErrorPage.jsx';
|
||||||
import MainPage from './pages/MainPage.jsx';
|
import MainPage from './pages/MainPage.jsx';
|
||||||
|
import LogIn from './pages/LogInInIn.jsx';
|
||||||
|
import SignIn from './pages/SignInInIn.jsx';
|
||||||
|
import Profile from './pages/Profile.jsx';
|
||||||
|
import TestInProcess from './pages/TestInProcess.jsx';
|
||||||
|
import TestPage from './pages/TestPage.jsx';
|
||||||
|
import CreateTest from './pages/CreateTest.jsx';
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@ -13,6 +19,30 @@ const routes = [
|
|||||||
path: '/',
|
path: '/',
|
||||||
element: <MainPage />,
|
element: <MainPage />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/LogIn',
|
||||||
|
element: <LogIn />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/SignIn',
|
||||||
|
element: <SignIn />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Profile',
|
||||||
|
element: <Profile />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/TestInProcess',
|
||||||
|
element: <TestInProcess />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/TestPage',
|
||||||
|
element: <TestPage />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/CreateTest',
|
||||||
|
element: <CreateTest />,
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
|
|||||||
29
laba4/site/src/pages/CreateTest.jsx
Normal file
29
laba4/site/src/pages/CreateTest.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
import Question from '../components/question/Question.jsx';
|
||||||
|
|
||||||
|
const CreateTest = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="row justify-content-center">
|
||||||
|
<Form className="col-md-6 m-0" action="./page3.html" method="get">
|
||||||
|
<div className="mb-2">
|
||||||
|
<Form.Label className="form-label" htmlFor="testName">Название теста</Form.Label>
|
||||||
|
<Form.Control id="testName" name="testName" className="form-control" type="text" required />
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<Form.Label className="form-label" htmlFor="testDescription">Описание</Form.Label>
|
||||||
|
<Form.Control id="testDescription" name="testDescription" className="form-control" type="text" required />
|
||||||
|
</div>
|
||||||
|
<Question></Question>
|
||||||
|
<div id="btAddTask" className="btn btn-primary startButton" style={{ backgroundColor: '#445069' }}>Добавить вопрос</div>
|
||||||
|
<div className="text-center m-3">
|
||||||
|
<Button className="btn btn-primary w-50 startButton" type="submit">Готово</Button>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateTest;
|
||||||
23
laba4/site/src/pages/LogInInIn.jsx
Normal file
23
laba4/site/src/pages/LogInInIn.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const LogIn = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form className="col-md-6 mx-auto mt-3" action="./profile.html" method="get">
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label className="form-label" for="email">E-mail</Form.Label>
|
||||||
|
<Form.Control id="email" name="email" className="form-control" type="email" placeholder="name@example.ru" required/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label className="form-label" for="password">Пароль</Form.Label>
|
||||||
|
<Form.Control id="password" name="password" className="form-control" type="password" required/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="text-center">
|
||||||
|
<Button className="btn btn-primary w-50 startButton" type="submit">Войти</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LogIn;
|
||||||
@ -1,60 +1,12 @@
|
|||||||
import { Link } from 'react-router-dom';
|
import RowTest from '../components/rowTest/RowTest';
|
||||||
|
import Caroucele from '../components/caroucele/Caroucele';
|
||||||
|
|
||||||
const MainPage = () => {
|
const MainPage = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div style={{ marginTop: '1rem', backgroundColor: '#252b48' }}>
|
<Caroucele></Caroucele>
|
||||||
<div id="carouselExample" style={{ maxWidth: '30rem' }} className="carousel slide w-50 mx-auto">
|
|
||||||
<div className="carousel-inner">
|
|
||||||
<div className="carousel-item active carouselItem1">
|
|
||||||
<div style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
|
||||||
<h2>Ваше описание</h2>
|
|
||||||
</div>
|
|
||||||
<div style={{ position: 'absolute', bottom: '2', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
|
||||||
<Link to="/testPage.html" className="btn btn-primary startButton" >Начать</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="carousel-item carouselItem2">
|
|
||||||
<div style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
|
||||||
<h2>Ваше описание</h2>
|
|
||||||
</div>
|
|
||||||
<div style={{ position: 'absolute', bottom: '2', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
|
||||||
<Link to="/testPage.html" className="btn btn-primary startButton" >Начать</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="carousel-item carouselItem3">
|
|
||||||
<div style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
|
||||||
<h2>Ваше описание</h2>
|
|
||||||
</div>
|
|
||||||
<div style={{ position: 'absolute', bottom: '2', transform: 'translateY(-50%)', textAlign: 'center', width: '100%' }}>
|
|
||||||
<Link to="/testPage.html" className="btn btn-primary startButton" >Начать</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
|
|
||||||
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
||||||
<span className="visually-hidden">Previous</span>
|
|
||||||
</button>
|
|
||||||
<button className="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
|
|
||||||
<span className="carousel-control-next-icon" aria-hidden="true"></span>
|
|
||||||
<span className="visually-hidden">Next</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="container mt-3 mx-auto" style={{ width: '70%' }}>
|
<div className="container mt-3 mx-auto" style={{ width: '70%' }}>
|
||||||
<div className="row justify-content-center align-items-center g-2 mt-3 mb-3" style={{ height: '10rem' }}>
|
<RowTest></RowTest>
|
||||||
<div className="col-3 h-100">
|
|
||||||
<img src="image.jpg" className="w-100 h-100" style={{ objectFit: 'cover' }} />
|
|
||||||
</div>
|
|
||||||
<div className="col justify-content-between h-100" style={{ position: 'relative', width: '70%' }}>
|
|
||||||
<div className="row-10 justify-content-center align-items-center g-2">
|
|
||||||
<h3 className="w-100 mx-auto text-left">описание</h3>
|
|
||||||
</div>
|
|
||||||
<div className="row-2 justify-content-left align-items-left g-2" style={{ position: 'absolute', bottom: '2', left: '2', width: '100%' }}>
|
|
||||||
<Link to="/testPage.html" className="btn btn-primary startButton">Начать</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
28
laba4/site/src/pages/Profile.jsx
Normal file
28
laba4/site/src/pages/Profile.jsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import CreatedTest from '../components/createdTest/CreatedTest';
|
||||||
|
|
||||||
|
const Profile = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="row" style={{ height: '100%' }}>
|
||||||
|
<div className="h-100" style={{ width: 'auto' }}>
|
||||||
|
<h1>Порофиль</h1>
|
||||||
|
</div>
|
||||||
|
<div className="h-100 p-0" style={{ backgroundColor: 'black', width: '5px' }} ></div>
|
||||||
|
<div className="col">
|
||||||
|
<h3>Созданные тесты</h3>
|
||||||
|
<div className="row justify-content-center align-items-center g-2 mt-1 mb-1">
|
||||||
|
<h3 className="col-2">навзвание</h3>
|
||||||
|
<h3 className="col">описание</h3>
|
||||||
|
</div>
|
||||||
|
<div id = "items-table">
|
||||||
|
<CreatedTest></CreatedTest>
|
||||||
|
</div>
|
||||||
|
<Link to="/CreateTest" className="btn btn-primary startButton" >Создать тест</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Profile;
|
||||||
31
laba4/site/src/pages/SignInInIn.jsx
Normal file
31
laba4/site/src/pages/SignInInIn.jsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const SignIn = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form className="col-md-6 mx-auto mt-3" action="./profile.html" method="get">
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label className="form-label" for="firstname">Логин</Form.Label>
|
||||||
|
<Form.Control id="firstname" name="firstname" class="form-control" type="text" placeholder="login" required/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label className="form-label" for="email">E-mail</Form.Label>
|
||||||
|
<Form.Control id="email" name="email" class="form-control" type="email" placeholder="name@example.ru" required/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label className="form-label" for="password">Пароль</Form.Label>
|
||||||
|
<Form.Control id="password" name="password" class="form-control" type="password" required/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label className="form-label" for="passwordAgain">Повторите ароль</Form.Label>
|
||||||
|
<Form.Control id="password" name="passwordAgain" class="form-control" type="password" required/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="text-center">
|
||||||
|
<Button className="btn btn-primary w-50 startButton" type="submit">Зарегестрироваться</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SignIn;
|
||||||
40
laba4/site/src/pages/TestInProcess.jsx
Normal file
40
laba4/site/src/pages/TestInProcess.jsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const TestInProcess = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="row w-100 d-flex justify-content-center m-3">
|
||||||
|
<img src="image.jpg" style={{ objectFit: 'cover', width: '50%', height: '500px' }} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="row w-100 d-flex justify-content-center m-1">Текст вопроса</h3>
|
||||||
|
|
||||||
|
<div className="row w-100 justify-content-center m-3">
|
||||||
|
<Form className="col-6 m-0" action="./testInProcess.html" method="get">
|
||||||
|
<Form.Group className="form-check me-md-3">
|
||||||
|
<Form.Check className="" id="checkbox1" name="checkbox1" type="checkbox" />
|
||||||
|
<Form.Label className="form-check-label" htmlFor="checkbox1">ответ 1</Form.Label>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="form-check me-md-3">
|
||||||
|
<Form.Check className="" id="checkbox2" name="checkbox2" type="checkbox" />
|
||||||
|
<Form.Label className="form-check-label" htmlFor="checkbox2">ответ 2</Form.Label>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="form-check me-md-3">
|
||||||
|
<Form.Check className="" id="checkbox3" name="checkbox3" type="checkbox" />
|
||||||
|
<Form.Label className="form-check-label" htmlFor="checkbox3">ответ 3</Form.Label>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="form-check me-md-3">
|
||||||
|
<Form.Check className="" id="checkbox4" name="checkbox4" type="checkbox" />
|
||||||
|
<Form.Label className="form-check-label" htmlFor="checkbox4">ответ 4</Form.Label>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="text-center">
|
||||||
|
<Button className="btn btn-primary w-2 startButton" type="submit">Отправить</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TestInProcess;
|
||||||
23
laba4/site/src/pages/TestPage.jsx
Normal file
23
laba4/site/src/pages/TestPage.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const TestPage = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="row justify-content-center align-items-center g-2 h-100 m-3 w-100">
|
||||||
|
<div className="h-100" style={{ width: '40%' }}>
|
||||||
|
<div className="w-100 d-flex justify-content-center" style={{ height: '70%' }}>
|
||||||
|
<img src="image.jpg" className="row w-100" style={{ objectFit: 'contain' }}/>
|
||||||
|
</div>
|
||||||
|
<div className="w-100 d-flex justify-content-center">
|
||||||
|
<Link to="/testInProcess" className="row btn btn-primary startButton m-3 w-50" >Начать тест</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="h-100 d-flex align-items-center m-3" style={{ width: '40%' }}>
|
||||||
|
<h3>Описание</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TestPage;
|
||||||
Loading…
Reference in New Issue
Block a user