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

8
Lab4/src/index.css
View File

@ -74,8 +74,8 @@ h3 {
.rectNews{
width:310px;
height:200px;
border : 2px solid #2582A3;
border-radius: 8%;
border : 4px solid #2582A3;
border-radius: 21px;
margin-left: 180;
margin-top: 9px;
margin-bottom:25px;
@ -113,6 +113,6 @@ h3 {
font-size: 15px;
}
.rectNew{
border-radius: 15px;
border: 2px #2582A3 solid;
border-radius: 21px;
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 Page3 from './pages/Page3.jsx';
import Page4 from './pages/Page4.jsx';
import Page5 from './pages/Page5.jsx';
import PageEdit from './pages/PageEdit.jsx';
const routes = [
@ -16,22 +17,27 @@ const routes = [
index: true,
path: '/',
element: <Page1 />,
title: 'Главная страница',
title: 'Новости',
},
{
path: '/page2',
element: <Page2 />,
title: 'Вторая страница',
title: 'Об университете',
},
{
path: '/page3',
element: <Page3 />,
title: 'Третья страница',
title: 'Абитуриенту',
},
{
path: '/page4',
element: <Page4 />,
title: 'Четвертая страница',
title: 'Вход',
},
{
path: '/page5',
element: <Page5 />,
title: 'Контакты',
},
{
path: '/page-edit',

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

@ -1,5 +1,5 @@
// import { Link } from 'react-router-dom';
// import Banner from '../components/banner/Banner.jsx';
import { Link } from 'react-router-dom';
import { Button } from 'react-bootstrap';
const Page1 = () => {
return (
@ -9,14 +9,14 @@ const Page1 = () => {
<b>Новости</b>
</span>
<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 className="row">
<div className="col mt-4">
<div className="col mb-4">
<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">
<span className="rectNewsText">
<b>УлГТУ вошёл в топ-250 лучших вузов</b>
@ -24,9 +24,9 @@ const Page1 = () => {
</div>
</div>
</div>
<div className="col mt-4">
<div className="col mb-4">
<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">
<span className="rectNewsText">
<b>“Мосты в будущее” будут видны из УлГТУ</b>
@ -36,9 +36,9 @@ const Page1 = () => {
</div>
</div>
<div className="row">
<div className="col mt-5">
<div className="col mb-4">
<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">
<span className="rectNewsText">
<b>Поправки в системе работы приёмной комиссии</b>
@ -46,9 +46,9 @@ const Page1 = () => {
</div>
</div>
</div>
<div className="col mt-5">
<div className="col mb-4">
<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">
<span className="rectNewsText">
<b>Студенты возвращаются к учёбе после зимней сессии позже, чем раньше</b>

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

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

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

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

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