StroevVladimir/PIbd-22.-Stroev-V.M.-Internet-Programm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lab4

Browse Source
This commit is contained in:
DyCTaTOR 2023-12-07 18:57:04 +04:00
parent 00b90c16d2
commit c655110f4f
8 changed files with 141 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Lab4/index.html
View File

@ -4,10 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My shop</title> <title>UlSTU</title>
</head> </head>
<body> <body background = "./images/BackGr.png">
<div id="root" class="h-100 d-flex flex-column"></div> <div id="root" class="h-100 d-flex flex-column"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>

8
Lab4/src/index.css
View File

@ -74,8 +74,8 @@ h3 {
.rectNews{ .rectNews{
width:310px; width:310px;
height:200px; height:200px;
border : 2px solid #2582A3; border : 4px solid #2582A3;
border-radius: 8%; border-radius: 21px;
margin-left: 180; margin-left: 180;
margin-top: 9px; margin-top: 9px;
margin-bottom:25px; margin-bottom:25px;
@ -113,6 +113,6 @@ h3 {
font-size: 15px; font-size: 15px;
} }
.rectNew{ .rectNew{
border-radius: 15px; border-radius: 21px;
border: 2px #2582A3 solid; border: 3px #2582A3 solid;
} }

14
Lab4/src/main.jsx
View File

@ -9,6 +9,7 @@ import Page1 from './pages/Page1.jsx';
import Page2 from './pages/Page2.jsx'; import Page2 from './pages/Page2.jsx';
import Page3 from './pages/Page3.jsx'; import Page3 from './pages/Page3.jsx';
import Page4 from './pages/Page4.jsx'; import Page4 from './pages/Page4.jsx';
import Page5 from './pages/Page5.jsx';
import PageEdit from './pages/PageEdit.jsx'; import PageEdit from './pages/PageEdit.jsx';
const routes = [ const routes = [
@ -16,22 +17,27 @@ const routes = [
index: true, index: true,
path: '/', path: '/',
element: <Page1 />, element: <Page1 />,
title: 'Главная страница', title: 'Новости',
}, },
{ {
path: '/page2', path: '/page2',
element: <Page2 />, element: <Page2 />,
title: 'Вторая страница', title: 'Об университете',
}, },
{ {
path: '/page3', path: '/page3',
element: <Page3 />, element: <Page3 />,
title: 'Третья страница', title: 'Абитуриенту',
}, },
{ {
path: '/page4', path: '/page4',
element: <Page4 />, element: <Page4 />,
title: 'Четвертая страница', title: 'Вход',
},
{
path: '/page5',
element: <Page5 />,
title: 'Контакты',
}, },
{ {
path: '/page-edit', path: '/page-edit',

24
Lab4/src/pages/Page1.jsx
View File

@ -1,5 +1,5 @@
// import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
// import Banner from '../components/banner/Banner.jsx'; import { Button } from 'react-bootstrap';
const Page1 = () => { const Page1 = () => {
return ( return (
@ -9,14 +9,14 @@ const Page1 = () => {
<b>Новости</b> <b>Новости</b>
</span> </span>
<div className="text-center"> <div className="text-center">
<button className="btn btn-primary w-auto" type="button" onClick={() => window.location.href = 'admin.html'}> <Button as={Link} to="/page2" variant = "primary" className="btn btn-primary w-auto" type="button">
Добавить новость Добавить новость
</button> </Button>
</div> </div>
<div className="row"> <div className="row">
<div className="col mt-4"> <div className="col mb-4">
<div className="rectNews d-flex flex-column"> <div className="rectNews d-flex flex-column">
<img className = "rectNew" src="./images/New1.png" alt="New1" width="100%" /> <img src="./images/New1.png" alt="New1" width="100%" />
<div className="rectNewsTextBox"> <div className="rectNewsTextBox">
<span className="rectNewsText"> <span className="rectNewsText">
<b>УлГТУ вошёл в топ-250 лучших вузов</b> <b>УлГТУ вошёл в топ-250 лучших вузов</b>
@ -24,9 +24,9 @@ const Page1 = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="col mt-4"> <div className="col mb-4">
<div className="rectNews d-flex flex-column position-relative"> <div className="rectNews d-flex flex-column position-relative">
<img className = "rectNew" src="./images/New2.png" alt="New2" width="100%" /> <img src="./images/New2.png" alt="New2" width="100%" />
<div className="rectNewsTextBox"> <div className="rectNewsTextBox">
<span className="rectNewsText"> <span className="rectNewsText">
<b>“Мосты в будущее” будут видны из УлГТУ</b> <b>“Мосты в будущее” будут видны из УлГТУ</b>
@ -36,9 +36,9 @@ const Page1 = () => {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col mt-5"> <div className="col mb-4">
<div className="rectNews d-flex flex-column position-relative"> <div className="rectNews d-flex flex-column position-relative">
<img className = "rectNew" src="./images/New3.png" alt="New3" width="100%" /> <img src="./images/New3.png" alt="New3" width="100%" />
<div className="rectNewsTextBox"> <div className="rectNewsTextBox">
<span className="rectNewsText"> <span className="rectNewsText">
<b>Поправки в системе работы приёмной комиссии</b> <b>Поправки в системе работы приёмной комиссии</b>
@ -46,9 +46,9 @@ const Page1 = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="col mt-5"> <div className="col mb-4">
<div className="rectNews d-flex flex-column position-relative"> <div className="rectNews d-flex flex-column position-relative">
<img className = "rectNew" src="./images/New4.png" alt="New4" width="100%" /> <img src="./images/New4.png" alt="New4" width="100%" />
<div className="rectNewsTextBox"> <div className="rectNewsTextBox">
<span className="rectNewsText"> <span className="rectNewsText">
<b>Студенты возвращаются к учёбе после зимней сессии позже, чем раньше</b> <b>Студенты возвращаются к учёбе после зимней сессии позже, чем раньше</b>

71
Lab4/src/pages/Page2.jsx
View File

@ -1,41 +1,42 @@
import { Table } from 'react-bootstrap';
import ulstuLogo from '../assets/logo.png';
const Page2 = () => { const Page2 = () => {
return ( return (
<> <>
<p className="text-center"> <main className="container-fluid d-flex p-2">
Вторая страница содержит пример рисунка (рис. 1) и таблицы (таб. 1). <div className="rectPage2">
</p> <span className="mainSt text-center">
<div className="text-center"> <b>История</b>
<img src={ulstuLogo} alt="logo" width="128" /> </span>
<br /> <p>
Рис. 1. Пример рисунка. <span className="stylePage2LargeSymbol">
</div> И
<div className="mt-3 row justify-content-center"> </span>
<Table className="w-50" bordered> <span className="stylePage2">
<caption>Таблица 1. Пример таблицы.</caption> стория Ульяновского государственного технического университета началась в 1957 году,
<thead> когда согласно постановлению Совета министров РСФСР от 6 сентября 1957 года и приказу
<tr> Министерства высшего образования СССР от 18 сентября 1957 года в городе Ульяновске
<th className="w-25">Номер</th> был организован вечерний политехнический институт на базе вечернего факультета
<th>ФИО</th> Куйбышевского индустриального института.
<th className="w-25">Телефон</th> </span>
</tr> </p>
</thead> <div className="styleParagraph">
<tbody> <span className="stylePage2">
<tr> Было организовано пять кафедр: «Марксизм-ленинизм», «Высшая математика и
<td>1</td> теоретическая механика», «Начертательная геометрия и черчение»,
<td>Иванов</td> «Физика и химия», «Иностранные языки».
<td>89999999999</td> </span>
</tr> </div>
<tr> <div className="styleParagraph">
<td>2</td> <span className="stylePage2">
<td>Петров</td> Первым ректором вечернего политехнического института стал кандидат технических наук,
<td>89999999991</td> доцент Иван Шабанов, его заместителем – кандидат технических наук, профессор, доктор
</tr> технических наук Леонид Худобин. Штатное расписание института было составлено
</tbody> на 48 человек, с учетом профессорско-преподавательского состава, из
</Table> которого только четыре человека имели ученую
</div> степень и звание. Не было ни одного профессора, ни одного доктора наук.
</span>
</div>
</div>
</main>
</> </>
); );
}; };

115
Lab4/src/pages/Page3.jsx
View File

@ -1,77 +1,48 @@
import { useState } from 'react';
import { Button, Form } from 'react-bootstrap';
const Page3 = () => { const Page3 = () => {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return ( return (
<div className="row justify-content-center"> <main className="container p-2 text-center">
<Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}> <label className="mainSt d-flex justify-content-center" htmlFor="direction">
<Form.Group className="mb-2" controlId="lastname"> Направление
<Form.Label>Фамилия</Form.Label> </label>
<Form.Control type="text" name="lastname" required /> <input className="justify-content-md-center w-50"
<Form.Control.Feedback>Фамилия заполнена</Form.Control.Feedback> type="search"
<Form.Control.Feedback type="invalid">Фамилия не заполнена</Form.Control.Feedback> id="direction"
</Form.Group> name="direction"
<Form.Group className="mb-2" controlId="firstname"> required />
<Form.Label>Имя</Form.Label>
<Form.Control type="text" name="firstname" required /> <div className="tbb1 p-3 table-responsive-md mt-4 row justify-content-start">
</Form.Group> <table className="table col-lg2 w-50 mx-auto">
<Form.Group className="mb-2" controlId="email"> <thead>
<Form.Label>E-mail</Form.Label> <tr>
<Form.Control type="email" name="email" placeholder="name@example.ru" required /> <th className="w-25">Код</th>
</Form.Group> <th className="w-50">Направление</th>
<Form.Group className="mb-2" controlId="password"> <th className="w-25">Кафедра</th>
<Form.Label>Пароль</Form.Label> <th className="w-75">Предметы(ЕГЭ) по выбору</th>
<Form.Control type="password" name="password" required /> </tr>
</Form.Group> </thead>
<Form.Group className="mb-2" controlId="date"> <tbody>
<Form.Label>Дата</Form.Label> <tr>
<Form.Control type="date" name="date" required /> <td>01.03.04</td>
</Form.Group> <td>Мат. Моделирование</td>
<Form.Group className="mb-2" controlId="disabled"> <td>Прикладная математика</td>
<Form.Label>Выключенный компонент</Form.Label> <td>Иностранный язык, информатика, физика, химия</td>
<Form.Control type="text" name="disabled" value="Некоторое значение" disabled /> </tr>
</Form.Group> <tr>
<Form.Group className="mb-2" controlId="readonly"> <td>09.03.04</td>
<Form.Label>Компонент только для чтения</Form.Label> <td>Программная инженерия</td>
<Form.Control type="text" name="readonly" value="Некоторое значение" readOnly /> <td>Информационные системы</td>
</Form.Group> <td>Информатика, физика</td>
<Form.Group className="mb-2" controlId="color"> </tr>
<Form.Label>Выбор цвета</Form.Label> <tr>
<Form.Control type="color" name="color" defaultValue='#ff0055' /> <td>02.03.01</td>
</Form.Group> <td>Информационные системы и технологии</td>
<Form.Group className="mb-2 d-md-flex flex-md-row"> <td>Измерительно-вычислительные комплексы</td>
<Form.Check className="me-md-3" type='checkbox' name='checkbox1' label='Флажок 1' /> <td>Информатика, физика</td>
<Form.Check className="me-md-3" type='checkbox' name='checkbox2' label='Флажок 2' /> </tr>
</Form.Group> </tbody>
<Form.Group className="mb-2 d-md-flex flex-md-row"> </table>
<Form.Check className="me-md-3" type='radio' name='radio1' label='Переключатель 1' /> </div>
<Form.Check className="me-md-3" type='switch' name='radio2' label='Переключатель 2' /> </main>
</Form.Group>
<Form.Group className="mb-2">
<Form.Select name='selected' required>
<option value="" selected>Выберите значение</option>
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</Form.Select>
</Form.Group>
<div className="text-center">
<Button className="w-50" variant="primary" type="submit">Отправить</Button>
</div>
</Form>
</div>
); );
}; };

43
Lab4/src/pages/Page4.jsx
View File

@ -1,27 +1,26 @@
import { Button, ButtonGroup, Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const Page4 = () => { const Page4 = () => {
return ( return (
<> <main className="container-fluid text-center">
<ButtonGroup> <span className="mainSt">
<Button id="items-add" variant="info">Добавить товар (диалог)</Button> <b>Личный кабинет</b>
<Button as={Link} to="/page-edit" variant="success">Добавить товар (страница)</Button> </span>
</ButtonGroup> <div className="rectpage4 d-flex row justify-content-center">
<Table className="mt-2" striped> <form className="col-md-4 m-0 w-auto" action="./page4.html" method="get">
<thead> <div className="mb-2">
<th scope="col">№</th> <label className="form-label" htmlFor="login"><b>Логин</b></label>
<th scope="col" className="w-25">Товар</th> <input id="login" name="login" className="form-control"
<th scope="col" className="w-25">Цена</th> placeholder="dyctator" type="text" required />
<th scope="col" className="w-25">Количество</th> </div>
<th scope="col" className="w-25">Сумма</th> <div className="mb-2">
<th scope="col"></th> <label className="form-label" htmlFor="password"><b>Пароль</b></label>
<th scope="col"></th> <input id="password" name="password" className="form-control" type="password" required />
<th scope="col"></th> </div>
</thead> <div className="text-center">
<tbody></tbody> <button className="btn btn-primary w-auto" type="button">Войти</button>
</Table> </div>
</> </form>
</div>
</main>
); );
}; };

13
Lab4/src/pages/Page5.jsx Normal file
View File

@ -0,0 +1,13 @@
function Page5() {
return (
<main className="rectPage5 stsp container-fluid row justify-content-center">
<span className="mainSt">Контакты</span>
<span>
<p><i>Номер приёмной комиссии:</i></p>+7 925 876 67 43
<p><i>Номер ректората:</i></p>+7 925 876 67 43
<p><i>Электронная почта приёмной комиссии:</i></p>priemnkomulstu@mail.ru
</span>
</main>
);
}
export default Page5;