TImourka/Internet_Programming_PIbd-21_Kouvshinoff_T_A
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

4:11a.m. ohhh yeah

Browse Source
This commit is contained in:
Timourka 2023-11-24 04:12:16 +04:00
parent 2a4d54ea96
commit 6dbb6afa3e
18 changed files with 365 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
laba4/site/index.html
View File

@ -7,9 +7,8 @@
<title>unreal tests</title>
</head>
<body 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 id="root" class="d-flex flex-column" style="height: auto; min-height: 100%">
</body>
<script type="module" src="/src/main.jsx"></script>
</html>

0
laba4/site/src/App.css
View File

1
laba4/site/src/App.jsx
View File

@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import { Outlet } from 'react-router-dom';
import './App.css';
import Footer from './components/footer/Footer.jsx';
import Header from './components/navigation/Header.jsx';

16
laba4/site/src/components/caroucele/Caroucele.css Normal file
View 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
View 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
View 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;

6
laba4/site/src/components/navigation/Header.jsx
View File

@ -19,9 +19,9 @@ const Header = () => {
</button>
<div className="navbar-collapse collapse justify-content-end" id="navbarNav">
<div className="navbar-nav">
<Link className="nav-link active" to="/logIn.html">Вход</Link>
<Link className="nav-link" to="/signIn.html">Регистрация</Link>
<Link className="nav-link" to="/profile.html">Профиль</Link>
<Link className="nav-link active" to="/LogIn">Вход</Link>
<Link className="nav-link" to="/SignIn">Регистрация</Link>
<Link className="nav-link" to="/Profile">Профиль</Link>
</div>
</div>
</div>

42
laba4/site/src/components/question/Question.jsx Normal file
View 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
View 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;

20
laba4/site/src/index.css
View File

@ -33,19 +33,13 @@ body{
min-height: 100%;
}
.carousel-item{
height: 30rem !important;
background-repeat: no-repeat;
background-size:cover;
background-position: center;
.form-check-input{
border: none;
border-radius: 0px !important;
background-clip: padding-box;
}
.carouselItem1{
background-image: url("image.jpg");
}
.carouselItem2{
background-image: url("image.jpg");
}
.carouselItem3{
background-image: url("image.jpg");
.form-control{
padding-top: 0;
padding-bottom: 0;
}

30
laba4/site/src/main.jsx
View File

@ -6,6 +6,12 @@ import App from './App.jsx';
import './index.css';
import ErrorPage from './pages/ErrorPage.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 = [
{
@ -13,6 +19,30 @@ const routes = [
path: '/',
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([

29
laba4/site/src/pages/CreateTest.jsx Normal file
View 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
View 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;

56
laba4/site/src/pages/MainPage.jsx
View File

@ -1,60 +1,12 @@
import { Link } from 'react-router-dom';
import RowTest from '../components/rowTest/RowTest';
import Caroucele from '../components/caroucele/Caroucele';
const MainPage = () => {
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.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>
<Caroucele></Caroucele>
<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' }}>
<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>
<RowTest></RowTest>
</div>
</>
);

28
laba4/site/src/pages/Profile.jsx Normal file
View 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
View 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
View 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
View 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;