лабораторные 1-5 и отчеты 1-4

This commit is contained in:
sardq 2024-01-08 18:17:47 +04:00
parent 8b22c33265
commit c24938fe3d
301 changed files with 25943 additions and 0 deletions

6
.idea/misc.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>

8
.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/rep.iml" filepath="$PROJECT_DIR$/.idea/rep.iml" />
</modules>
</component>
</project>

9
.idea/rep.iml Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

111
2 lab/admin-page.html Normal file
View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/icon.jpg" alt="logo" width="40">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="home.html">Главная</a>
<a class="nav-link" href="messages.html">Сообщения</a>
<a class="nav-link" href="settings.html">Настройки</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<h1 class=" text-center font-weight-bold">Панель администратора</h1>
<div class="btn-group" role="group">
<a class="btn btn-dark" href="page-edit.html">Добавить аккаунт</a>
</div>
<div>
<h2 class=" text-center font-weight-bold" style="padding-top: 10px;">Таблица данных</h2>
<table id="items-table" class="table table-striped">
<thead>
<th scope="col"></th>
<th scope="col" class="w-25">Никнейм</th>
<th scope="col" class="w-25">Почта</th>
<th scope="col" class="w-10">Пароль</th>
</thead>
<tbody></tbody>
</table>
</div>
</main>
<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog">
<form id="items-form" class="needs-validation" novalidate>
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="items-update-title"></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="text-center">
<img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
alt="placeholder">
</div>
<input id="items-line-id" type="number" hidden>
<div class="mb-2">
<label for="item" class="form-label">Товары</label>
<select id="item" class="form-select" name="selected" required>
</select>
</div>
<div class="mb-2">
<label class="form-label" for="price">Цена</label>
<input id="price" name="price" class="form-control" type="number" value="99.00" min="99.00"
step="1.00" required>
</div>
<div class="mb-2">
<label class="form-label" for="stock">Акция</label>
<input id="stock" name="price" class="form-control" type="number" value="0" min="0"
step="100" required>
</div>
<div class="mb-2">
<label class="form-label" for="count">Количество</label>
<input id="count" name="count" class="form-control" type="number" value="0" min="1" step="1"
required>
</div>
<div class="mb-2">
<label class="form-label" for="image">Изображение</label>
<input id="image" type="file" name="image" class="form-control" accept="image/*">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="submit" class="btn btn-primary">Сохранить</button>
</div>
</div>
</form>
</div>
</div>
<script type="module">
import validation from "./js/validation";
import { linesForm } from "./js/lines";
/*document.addEventListener('DOMContentLoaded', () => {
validation();
linesForm();
});*/
</script>
</body>
</html>

91
2 lab/dialog.html Normal file
View File

@ -0,0 +1,91 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<title>Диалог</title>
<style>
</style>
</head>
<body style = "background:#FFFFFF; ">
<div class = "container">
<div class="d-flex gap-2 w-100 justify-content-between" style ="background:black">
<img src="images/da.jpg" alt="david" width="60" height="60" class="rounded-circle flex-shrink-0">
<div class="nickname-avatar">
<p>Давид Макаров</p></div>
<a href="Messages.html">Назад</a>
</div>
<div class='chat p-3'>
<div class ="d-flex align-items-end flex-column gap-3">
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">12:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
</div>
<div class ="d-flex align-items-start flex-column gap-3">
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
</div>
</div>
<div class='chat-input'>
<form method='post' id='chat-form'>
<input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'>
<input type='submit' class='chat-form__submit' value='=>' style = "margin-right:auto">
</form>
</div>
</div>
</div>
</body>
</html>

186
2 lab/home.html Normal file
View File

@ -0,0 +1,186 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<title>Главная</title>
</head>
<body>
<main class="d-flex flex-nowrap">
<div class ="cl1 text-bg-dark">
<div class="filters ">
<div class="d-flex flex-column flex-shrink-0 text-bg-dark;" style ="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><img src="images/icon.jpg" alt="icon" width ="24" height ="24"></svg>
<span class="fs-4">Сообщения</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="Messages.html" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/messages.png" alt="home" width ="24" height ="24"></svg>
Сообщения
</a>
</li>
<li>
<a href="settings.html" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/settings.png" alt="settings" width ="24" height ="24"></svg>
Настройки
</a>
</li>
<li>
<a href="login.html" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/exit.png" alt="exit" width ="24" height ="24"></svg>
Выход
</a>
</li>
</ul>
<hr>
</div>
</div>
</div>
<div class ="cl2 bg-body-tertiary" style ="position:sticky; height:100vh;">
<div class="filters">
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 3rem;">
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<img class="icon" src="images/icon.jpg" alt="icon" width ="32" height ="32">
<span class="visually-hidden">Icon</span>
</a>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
<li class="nav-item">
<a href="Messages.html" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Messages" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><img src="images/messages.png" alt="home" width ="24" height ="24"></svg>
</a>
</li>
<li>
<a href="settings.html" class="nav-link py-3 border-bottom rounded-0" title="Settings" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Settings"><img src="images/settings.png" alt="settings" width ="24" height ="24"></svg>
</a>
</li>
<li>
<a href="login.html" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><img src="images/exit.png" alt="exit" width ="24" height ="24"></svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="filters">
</div>
<div class="list-group">
<a class="list-group-item list-group-item-action d-flex gap-1 py-2" aria-current="true">
<img src="images/da.jpg" alt="twbs" width="40" height="40" class="rounded-circle flex-shrink-0">
<div class="d-flex w-100 justify-content-between">
<div>
<h6 class="mb-0">Давид Макаров</h6>
<p class="mb-0 opacity-75">Оцените моего</p>
<div class = "postImage">
<img src="images/da2.jpg" class="img-fluid" alt="Данил" height="200" width="500"></div>
<div class="d-flex gap-2 w-100 justify-content-between">
<input type="image" src="images/like.png" width="20" height="20" alt="Кнопка «input»">
<h6 class="mb-0">5</h6>
</div>
<div class="d-flex gap-2 w-100 justify-content-between">
<img src="images/eye.png" alt="Просмотры" width="20" height="20" >
<h6 class="mb-0">2100</h6>
</div>
<div class="d-flex gap-2 w-50 justify-content-between">
<button class="btn btn-dark rounded-pill px-3" type="button">Прокомментировать</button>
</div>
</div>
<small class="opacity-1">сейчас</small>
</div>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">List group item heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">now</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
</div>
</main>
</body>
</html>

56
2 lab/index.html Normal file
View File

@ -0,0 +1,56 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<title>Регистрация</title>
</head>
<body style = "background:#CDECDE">
<main>
<div class ="container">
<form role = "form" class = "form-horizontal">
<div class = "form-group col-md-3 text-center">
<h3>Регистрация</h3>
<label for ="name" class = "control-label center">Введите никнейм</label>
<input type = "name" class = "form-control" id = "name" placeholder ="Введите никнейм">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="email" class = "control-label">Введите почту</label>
<input type = "email" class = "form-control" id = "email" placeholder ="Введите почту">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="pasword" control = "control-label">Введите пароль</label>
<input type = "pasword" class = "form-control" id = "pasword" placeholder ="Введите пароль">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="paswordConfirm" control = "control-label">Подтвердите пароль</label>
<input type = "paswordConfirm" class = "form-control" id = "paswordConfirm" placeholder ="Подтвердите пароль">
<a href ="login.html">У вас уже есть профиль?</a>
<p></p>
</div>
</div>
</form>
<div class = "form-group col-md-3 text-center">
<form action="home.html">
<input type = "submit" class = "btn btn-primary" value = "Зарегистрироваться">
</form>
</div>
</div>
</main>
</body>
</html>

41
2 lab/login.html Normal file
View File

@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<title>Логин</title>
<style>
</style>
</head>
<body style = "background:#CDECDE">
<main>
<div class ="container >
<form role = "form" class = "form-horizontal">
<div class = "form-group col-md-3 text-center">
<h3>Логин</h3>
<label for ="name" class = "control-label center">Введите никнейм или почту</label>
<input type = "name" class = "form-control" id = "name" placeholder ="Введите никнейм или почту">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="password" class = "control-label">Введите пароль</label>
<input type = "password" class = "form-control" id = "password" placeholder ="Введите пароль">
</div>
<div class = "form-group col-md-3 text-center">
<a href ="index.html">Нет профиля? Зарегистрироваться</a>
<p></p>
<div>
<form action="home.html">
<input type = "submit" class = "btn btn-primary" value = "Войти">
</form>
</div>
</div>
</form>
</div>
</main>
</body>
</html>

107
2 lab/messages.html Normal file
View File

@ -0,0 +1,107 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<title>Сообщения</title>
<style>
</style>
</head>
<body>
<main class="d-flex flex-nowrap">
<div class ="cl1 text-bg-dark">
<div class="filters ">
<div class="d-flex flex-column flex-shrink-0 text-bg-dark;" style ="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><img src="images/icon.jpg" alt="icon" width ="24" height ="24"></svg>
<span class="fs-4">Сообщения</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="home.html" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/home.png" alt="home" width ="24" height ="24"></svg>
Главная
</a>
</li>
<li>
<a href="settings.html" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/settings.png" alt="settings" width ="24" height ="24"></svg>
Настройки
</a>
</li>
<li>
<a href="login.html" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/exit.png" alt="exit" width ="24" height ="24"></svg>
Выход
</a>
</li>
</ul>
<hr>
</div>
</div>
</div>
<div class ="cl2 bg-body-tertiary" style ="position:sticky; height:100vh;">
<div class="filters">
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 3rem;">
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<img class="icon" src="images/icon.jpg" alt="icon" width ="32" height ="32">
<span class="visually-hidden">Icon</span>
</a>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
<li class="nav-item">
<a href="home.html" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><img src="images/home.png" alt="home" width ="24" height ="24"></svg>
</a>
</li>
<li>
<a href="settings.html" class="nav-link py-3 border-bottom rounded-0" title="Settings" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Settings"><img src="images/settings.png" alt="settings" width ="24" height ="24"></svg>
</a>
</li>
<li>
<a href="login.html" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><img src="images/exit.png" alt="exit" width ="24" height ="24"></svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="filters">
</div>
<div class = "container-fluid">
<div class="list-group">
<a href="dialog.html" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/da.jpg" alt="david" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Давид Макаров</h6>
<p class="mb-0 opacity-75">пример</p>
</div>
<small class="opacity-50 text-nowrap">now</small>
</div>
</a>
<a href="dialog.html" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/da2.jpg" alt="danil" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Даниил Путинцев</h6>
<p class="mb-0 opacity-75">?</p>
</div>
<small class="opacity-50 text-nowrap">3d</small>
</div>
</a>
</div>
</div>
</main>
</body>
</html>

2240
2 lab/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

20
2 lab/package.json Normal file
View File

@ -0,0 +1,20 @@
{
"name": "int-prog",
"version": "1 .0.0",
"type": "module",
"scripts": {
"start": "vite",
"serve": "http-server -p 3000 ./",
"build": "vite build",
"prod": "npm-run-all build serve"
},
"dependencies": {
"bootstrap": "5.2.1 ",
"@fortawesome/fontawesome-free": "6.2.0"
},
"devDependencies": {
"http-server": "14.1 .1 ",
"vite": "4.4.9",
"npm-run-all": "4.1.5"
}
}

77
2 lab/page-edit.html Normal file
View File

@ -0,0 +1,77 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Моя страница</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body class="h-100 d-flex flex-column">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/icon.jpg" alt="logo" width="40">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="home.html">Главная</a>
<a class="nav-link" href="messages.html">Сообщения</a>
<a class="nav-link" href="settings.html">Настройки</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<h1 class=" text-center font-weight-bold">Добавление аккаунта</h1>
<div class="text-center">
<img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
alt="placeholder">
</div>
<form id="items-form" class="needs-validation" novalidate>
<div class="mb-2">
<label for="nickname" class="form-label">Никнейм</label>
<input id="nickname" name="nickname" class="form-control" type="string"
required>
</div>
<div class="mb-2">
<label class="form-label" for="email">Почта</label>
<input id="email" name="email" class="form-control" type="string"
required>
</div>
<div class="mb-2">
<label class="form-label" for="password">Пароль</label>
<input id="password" name="password" class="form-control" type="string"
step="1" required>
</div>
<div class="mb-2">
<label class="form-label" for="image">Изображение</label>
<input id="image" type="file" name="image" class="form-control" accept="image/*">
</div>
<a href="admin-page.html" class="btn btn-secondary">Назад</a>
<button type="submit" class="btn btn-primary">Сохранить</button>
</form>
</main>
<script type="module">
import validation from "./js/validation";
import { linesPageForm } from "./js/lines"
document.addEventListener('DOMContentLoaded', () => {
validation();
linesPageForm();
});
</script>
</body>
</html>

78
2 lab/settings.html Normal file
View File

@ -0,0 +1,78 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<title>Настройки</title>
<style>
</style>
</head>
<body style = "background:#CDECDE">
<main>
<div class ="container text-center>
<form role = "form" class = "form-horizontal">
<div class ="col-md-5 offset-md-4">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<img src="images/account.png" alt="accound" width="32" height="32" class="rounded-circle flex-shrink-0">
<a>Никнейм пользователя</a>
</div>
<div class ="return">
<a href="home.html">Вернуться</a>
</div>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/account.png" alt="account" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Аккаунт</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/private.png" alt="private" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Приватность</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/autentification.png" alt="autentication" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Двухфакторная Аутентификация</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/blacklist.jpg" alt="blacklist" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Черный список</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/plus.png" alt="add" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Добавить аккаунт</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/help.png" alt="help" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Помощь</h6>
</a>
<a href="admin-page.html" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/help.png" alt="help" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Панель администратора</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/bell.png" alt="bell" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Уведомления</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/info.png" alt="info" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Информация</h6>
</a>
<a href="index.html" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/exit.png" alt="exit" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Выход из аккаунта</h6>
</a>
</div>
</div>
</div>
</form>
</div>
</main>
</body>
</html>

120
2 lab/style.css Normal file
View File

@ -0,0 +1,120 @@
.chat
{
border:1px solid #333;
width:100%;
background:#FFFFFF;
color:#fff;
max-height:85vh;
overflow: auto;
}
#image-preview {
width: 200px;
}
.nickname-avatar p
{
color:#FFFFFF;
}
.message
{
height: 100%;
font-size:200%;
background:gray;
border-radius: 10px;
}
.input
{
font-family:arial;
font-size:16px;
vertical-align:middle;
background:#333;
color:#fff;
display:inline-block;
margin:1px;
height:30px;
}
.chat-form__input
{
width:79%;
}
.chat-form__submit
{
width:18%;
}
.return a
{
margin-left:auto;
font-size: 20px;
height: 44px;
width: 180px;
vertical-align:middle;
background-color:#000000
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.cl2
{
display:none;
}
.filters {
position: -webkit-sticky;
position: sticky;
top: 0;
height: 100vh;
}
.text-center{
margin-right:auto;
margin-left:auto;
}
@media (max-width: 700px){
.cl1
{
display:none;
}
.cl2
{
display:block;
}
.chat
{
height: 60vh;
overflow: auto;
}
.list-group button
{
font-size: 12px;
}
}
@media (max-width: 300px){
.list-group a
{
font-size: 10px;
}
.list-group h6
{
font-size: 10px;
}
.list-group .postImage img
{
width: 100px;
height: 100px;
}
.list-group img
{
width: 20px;
height: 20px;
}
.list-group button
{
font-size: 6px;
}
}

21
3 lab/.eslintrc.json Normal file
View File

@ -0,0 +1,21 @@
{
"env": {
"browser": true,
"es2021": true
},
"extends": "airbnb-base",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"quotes": "off",
"indent": "off",
"linebreak-style":0,
"no-console": "off",
"no-use-before-define": "off",
"no-alert": "off",
"no-restricted-globals": "off",
"quote-props": "off"
}
}

65
3 lab/admin-page.html Normal file
View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/icon.jpg" alt="logo" width="40">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="home.html">Главная</a>
<a class="nav-link" href="messages.html">Сообщения</a>
<a class="nav-link" href="settings.html">Настройки</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<h1 class=" text-center font-weight-bold">Панель администратора</h1>
<div class="btn-group" role="group">
<a class="btn btn-dark" href="page-edit.html">Добавить аккаунт(страница)</a>
</div>
<div>
<h2 class=" text-center font-weight-bold" style="padding-top: 10px;">Таблица данных</h2>
<table id="items-table" class="table table-striped">
<thead>
<th scope="col"></th>
<th scope="col" class="w-25">Никнейм</th>
<th scope="col" class="w-25">Почта</th>
<th scope="col" class="w-10">Пароль</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
</thead>
<tbody></tbody>
</table>
</div>
</main>
<script type="module">
import validation from "./js/validation";
import { drawLinesTable as drawTable } from "./js/lines";
document.addEventListener('DOMContentLoaded', () => {
validation();
drawTable();
});
</script>
</body>
</html>

46
3 lab/data.json Normal file

File diff suppressed because one or more lines are too long

91
3 lab/dialog.html Normal file
View File

@ -0,0 +1,91 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<title>Диалог</title>
<style>
</style>
</head>
<body style = "background:#FFFFFF; ">
<div class = "container">
<div class="d-flex gap-2 w-100 justify-content-between" style ="background:black">
<img src="images/da.jpg" alt="david" width="60" height="60" class="rounded-circle flex-shrink-0">
<div class="nickname-avatar">
<p>Давид Макаров</p></div>
<a href="Messages.html">Назад</a>
</div>
<div class='chat p-3'>
<div class ="d-flex align-items-end flex-column gap-3">
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">12:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
</div>
<div class ="d-flex align-items-start flex-column gap-3">
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
</div>
</div>
<div class='chat-input'>
<form method='post' id='chat-form'>
<input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'>
<input type='submit' class='chat-form__submit' value='=>' style = "margin-right:auto">
</form>
</div>
</div>
</div>
</body>
</html>

100
3 lab/dist/admin-page.html vendored Normal file
View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" crossorigin src="/assets/admin_page-df9b9b2d.js"></script>
<link rel="modulepreload" crossorigin href="/assets/style-afc16ede.js">
<link rel="modulepreload" crossorigin href="/assets/lines-b7354fa1.js">
<link rel="stylesheet" href="/assets/style-675f72be.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="/assets/icon-8b2b7123.jpg" alt="logo" width="40">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="home.html">Главная</a>
<a class="nav-link" href="messages.html">Сообщения</a>
<a class="nav-link" href="settings.html">Настройки</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<h1 class=" text-center font-weight-bold">Панель администратора</h1>
<div class="btn-group" role="group">
<button id="items-add" class="btn btn-info">Добавить аккаунт (диалог)</button>
<a class="btn btn-dark" href="page-edit.html">Добавить аккаунт(страница)</a>
</div>
<div>
<h2 class=" text-center font-weight-bold" style="padding-top: 10px;">Таблица данных</h2>
<table id="items-table" class="table table-striped">
<thead>
<th scope="col"></th>
<th scope="col" class="w-25">Никнейм</th>
<th scope="col" class="w-25">Почта</th>
<th scope="col" class="w-10">Пароль</th>
</thead>
<tbody></tbody>
</table>
</div>
</main>
<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog">
<form id="items-form" class="needs-validation" novalidate>
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="items-update-title"></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="text-center">
<img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
alt="placeholder">
</div>
<input id="items-line-id" type="number" hidden>
<div class="mb-2">
<label for="item" class="form-label">Аккаунт</label>
<select id="item" class="form-select" name="selected" required>
</select>
</div>
<div class="mb-2">
<label class="form-label" for="nickname">Никнейм</label>
<input id="nickname" name="nickname" class="form-control" type="string" required>
</div>
<div class="mb-2">
<label class="form-label" for="email">Почта</label>
<input id="email" name="email" class="form-control" type="string" required>
</div>
<div class="mb-2">
<label class="form-label" for="password">Пароль</label>
<input id="password" name="password" class="form-control" type="string" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="submit" class="btn btn-primary">Сохранить</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>

BIN
3 lab/dist/assets/account-31347f56.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

View File

@ -0,0 +1,2 @@
import"./style-afc16ede.js";import{v as o,l as t}from"./lines-b7354fa1.js";document.addEventListener("DOMContentLoaded",()=>{o(),t()});
//# sourceMappingURL=admin_page-df9b9b2d.js.map

View File

@ -0,0 +1 @@
{"version":3,"file":"admin_page-df9b9b2d.js","sources":["../../admin-page.html?html-proxy&index=1.js"],"sourcesContent":["\n import validation from \"./js/validation\";\n import { linesForm } from \"./js/lines\";\n \n document.addEventListener('DOMContentLoaded', () => {\n validation();\n linesForm();\n });\n"],"names":["validation","linesForm"],"mappings":"2EAII,SAAS,iBAAiB,mBAAoB,IAAM,CAChDA,IACAC,GACR,CAAK"}

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
3 lab/dist/assets/bell-411ff921.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
3 lab/dist/assets/blacklist-dcb2f8e9.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
3 lab/dist/assets/da-2655b12b.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 KiB

BIN
3 lab/dist/assets/da2-b5470625.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 KiB

View File

@ -0,0 +1 @@
{"version":3,"file":"dialog-bbcda84d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

BIN
3 lab/dist/assets/exit-18ba8829.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
3 lab/dist/assets/eye-826654ed.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
3 lab/dist/assets/help-dfa41af5.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

View File

@ -0,0 +1 @@
{"version":3,"file":"home-bbcda84d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

BIN
3 lab/dist/assets/icon-8b2b7123.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
3 lab/dist/assets/info-6e7e6660.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

6
3 lab/dist/assets/lines-b7354fa1.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
{"version":3,"file":"login-bbcda84d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

BIN
3 lab/dist/assets/messages-220127ec.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -0,0 +1 @@
{"version":3,"file":"messages-bbcda84d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

View File

@ -0,0 +1,2 @@
import"./style-afc16ede.js";import{v as a,a as e}from"./lines-b7354fa1.js";document.addEventListener("DOMContentLoaded",()=>{a(),e()});
//# sourceMappingURL=page_edit-a29ec6cf.js.map

View File

@ -0,0 +1 @@
{"version":3,"file":"page_edit-a29ec6cf.js","sources":["../../page-edit.html?html-proxy&index=1.js"],"sourcesContent":["\n import validation from \"./js/validation\";\n import { linesPageForm } from \"./js/lines\"\n\n document.addEventListener('DOMContentLoaded', () => {\n validation();\n linesPageForm();\n });\n "],"names":["validation","linesPageForm"],"mappings":"2EAIQ,SAAS,iBAAiB,mBAAoB,IAAM,CAChDA,IACAC,GACZ,CAAS"}

BIN
3 lab/dist/assets/private-a09581ce.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -0,0 +1 @@
{"version":3,"file":"registration-bbcda84d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

BIN
3 lab/dist/assets/settings-4cadbde0.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -0,0 +1 @@
{"version":3,"file":"settings-bbcda84d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

10
3 lab/dist/assets/style-675f72be.css vendored Normal file

File diff suppressed because one or more lines are too long

6
3 lab/dist/assets/style-afc16ede.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

93
3 lab/dist/dialog.html vendored Normal file
View File

@ -0,0 +1,93 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Диалог</title>
<style>
</style>
<script type="module" crossorigin src="/assets/style-afc16ede.js"></script>
<link rel="stylesheet" href="/assets/style-675f72be.css">
</head>
<body style = "background:#FFFFFF; ">
<div class = "container">
<div class="d-flex gap-2 w-100 justify-content-between" style ="background:black">
<img src="/assets/da-2655b12b.jpg" alt="david" width="60" height="60" class="rounded-circle flex-shrink-0">
<div class="nickname-avatar">
<p>Давид Макаров</p></div>
<a href="Messages.html">Назад</a>
</div>
<div class='chat p-3'>
<div class ="d-flex align-items-end flex-column gap-3">
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">12:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
</div>
<div class ="d-flex align-items-start flex-column gap-3">
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">13:05</p>
</div>
<div class = "d-flex message">
<p class ="ps-4 pe-4">пример</p>
<p class ="fs-5 mt-auto mb-1 ms-1 me-2">15:33</p>
</div>
</div>
</div>
<div class='chat-input'>
<form method='post' id='chat-form'>
<input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'>
<input type='submit' class='chat-form__submit' value='=>' style = "margin-right:auto">
</form>
</div>
</div>
</div>
</body>
</html>

188
3 lab/dist/home.html vendored Normal file
View File

@ -0,0 +1,188 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Главная</title>
<script type="module" crossorigin src="/assets/style-afc16ede.js"></script>
<link rel="stylesheet" href="/assets/style-675f72be.css">
</head>
<body>
<main class="d-flex flex-nowrap">
<div class ="cl1 text-bg-dark">
<div class="filters ">
<div class="d-flex flex-column flex-shrink-0 text-bg-dark;" style ="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><img src="/assets/icon-8b2b7123.jpg" alt="icon" width ="24" height ="24"></svg>
<span class="fs-4">Сообщения</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="Messages.html" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><img src="/assets/messages-220127ec.png" alt="home" width ="24" height ="24"></svg>
Сообщения
</a>
</li>
<li>
<a href="settings.html" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><img src="/assets/settings-4cadbde0.png" alt="settings" width ="24" height ="24"></svg>
Настройки
</a>
</li>
<li>
<a href="login.html" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><img src="/assets/exit-18ba8829.png" alt="exit" width ="24" height ="24"></svg>
Выход
</a>
</li>
</ul>
<hr>
</div>
</div>
</div>
<div class ="cl2 bg-body-tertiary" style ="position:sticky; height:100vh;">
<div class="filters">
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 3rem;">
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<img class="icon" src="/assets/icon-8b2b7123.jpg" alt="icon" width ="32" height ="32">
<span class="visually-hidden">Icon</span>
</a>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
<li class="nav-item">
<a href="Messages.html" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Messages" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><img src="/assets/messages-220127ec.png" alt="home" width ="24" height ="24"></svg>
</a>
</li>
<li>
<a href="settings.html" class="nav-link py-3 border-bottom rounded-0" title="Settings" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Settings"><img src="/assets/settings-4cadbde0.png" alt="settings" width ="24" height ="24"></svg>
</a>
</li>
<li>
<a href="login.html" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><img src="/assets/exit-18ba8829.png" alt="exit" width ="24" height ="24"></svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="filters">
</div>
<div class="list-group">
<a class="list-group-item list-group-item-action d-flex gap-1 py-2" aria-current="true">
<img src="/assets/da-2655b12b.jpg" alt="twbs" width="40" height="40" class="rounded-circle flex-shrink-0">
<div class="d-flex w-100 justify-content-between">
<div>
<h6 class="mb-0">Давид Макаров</h6>
<p class="mb-0 opacity-75">Оцените моего</p>
<div class = "postImage">
<img src="/assets/da2-b5470625.jpg" class="img-fluid" alt="Данил" height="200" width="500"></div>
<div class="d-flex gap-2 w-100 justify-content-between">
<input type="image" src="images/like.png" width="20" height="20" alt="Кнопка «input»">
<h6 class="mb-0">5</h6>
</div>
<div class="d-flex gap-2 w-100 justify-content-between">
<img src="/assets/eye-826654ed.png" alt="Просмотры" width="20" height="20" >
<h6 class="mb-0">2100</h6>
</div>
<div class="d-flex gap-2 w-50 justify-content-between">
<button class="btn btn-dark rounded-pill px-3" type="button">Прокомментировать</button>
</div>
</div>
<small class="opacity-1">сейчас</small>
</div>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">List group item heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">now</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
</div>
</main>
</body>
</html>

58
3 lab/dist/index.html vendored Normal file
View File

@ -0,0 +1,58 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Регистрация</title>
<script type="module" crossorigin src="/assets/style-afc16ede.js"></script>
<link rel="stylesheet" href="/assets/style-675f72be.css">
</head>
<body style = "background:#CDECDE">
<main>
<div class ="container">
<form role = "form" class = "form-horizontal">
<div class = "form-group col-md-3 text-center">
<h3>Регистрация</h3>
<label for ="name" class = "control-label center">Введите никнейм</label>
<input type = "name" class = "form-control" id = "name" placeholder ="Введите никнейм">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="email" class = "control-label">Введите почту</label>
<input type = "email" class = "form-control" id = "email" placeholder ="Введите почту">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="pasword" control = "control-label">Введите пароль</label>
<input type = "pasword" class = "form-control" id = "pasword" placeholder ="Введите пароль">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="paswordConfirm" control = "control-label">Подтвердите пароль</label>
<input type = "paswordConfirm" class = "form-control" id = "paswordConfirm" placeholder ="Подтвердите пароль">
<a href ="login.html">У вас уже есть профиль?</a>
<p></p>
</div>
</div>
</form>
<div class = "form-group col-md-3 text-center">
<form action="home.html">
<input type = "submit" class = "btn btn-primary" value = "Зарегистрироваться">
</form>
</div>
</div>
</main>
</body>
</html>

43
3 lab/dist/login.html vendored Normal file
View File

@ -0,0 +1,43 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Логин</title>
<style>
</style>
<script type="module" crossorigin src="/assets/style-afc16ede.js"></script>
<link rel="stylesheet" href="/assets/style-675f72be.css">
</head>
<body style = "background:#CDECDE">
<main>
<div class ="container" >
<form role = "form" class = "form-horizontal">
<div class = "form-group col-md-3 text-center">
<h3>Логин</h3>
<label for ="name" class = "control-label center">Введите никнейм или почту</label>
<input type = "name" class = "form-control" id = "name" placeholder ="Введите никнейм или почту">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="password" class = "control-label">Введите пароль</label>
<input type = "password" class = "form-control" id = "password" placeholder ="Введите пароль">
</div>
<div class = "form-group col-md-3 text-center">
<a href ="index.html">Нет профиля? Зарегистрироваться</a>
<p></p>
<div>
<form action="home.html">
<input type = "submit" class = "btn btn-primary" value = "Войти">
</form>
</div>
</div>
</form>
</div>
</main>
</body>
</html>

109
3 lab/dist/messages.html vendored Normal file

File diff suppressed because one or more lines are too long

74
3 lab/dist/page-edit.html vendored Normal file
View File

@ -0,0 +1,74 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Моя страница</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" crossorigin src="/assets/page_edit-a29ec6cf.js"></script>
<link rel="modulepreload" crossorigin href="/assets/style-afc16ede.js">
<link rel="modulepreload" crossorigin href="/assets/lines-b7354fa1.js">
<link rel="stylesheet" href="/assets/style-675f72be.css">
</head>
<body class="h-100 d-flex flex-column">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="/assets/icon-8b2b7123.jpg" alt="logo" width="40">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="home.html">Главная</a>
<a class="nav-link" href="messages.html">Сообщения</a>
<a class="nav-link" href="settings.html">Настройки</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<h1 class=" text-center font-weight-bold">Добавление аккаунта</h1>
<div class="text-center">
<img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
alt="placeholder">
</div>
<form id="items-form" class="needs-validation" novalidate>
<div class="mb-2">
<label for="nickname" class="form-label">Никнейм</label>
<input id="nickname" name="nickname" class="form-control" type="string"
required>
</div>
<div class="mb-2">
<label class="form-label" for="email">Почта</label>
<input id="email" name="email" class="form-control" type="string"
required>
</div>
<div class="mb-2">
<label class="form-label" for="password">Пароль</label>
<input id="password" name="password" class="form-control" type="string"
step="1" required>
</div>
<div class="mb-2">
<label class="form-label" for="image">Изображение</label>
<input id="image" type="file" name="image" class="form-control" accept="image/*">
</div>
<a href="admin-page.html" class="btn btn-secondary">Назад</a>
<button type="submit" class="btn btn-primary">Сохранить</button>
</form>
</main>
</body>
</html>

80
3 lab/dist/settings.html vendored Normal file
View File

@ -0,0 +1,80 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Настройки</title>
<style>
</style>
<script type="module" crossorigin src="/assets/style-afc16ede.js"></script>
<link rel="stylesheet" href="/assets/style-675f72be.css">
</head>
<body style = "background:#CDECDE">
<main>
<div class ="container text-center">
<form role = "form" class = "form-horizontal">
<div class ="col-md-5 offset-md-4">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<img src="/assets/account-31347f56.png" alt="accound" width="32" height="32" class="rounded-circle flex-shrink-0">
<a>Никнейм пользователя</a>
</div>
<div class ="return">
<a href="home.html">Вернуться</a>
</div>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/account-31347f56.png" alt="account" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Аккаунт</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/private-a09581ce.png" alt="private" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Приватность</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/autentification-fdf59272.png" alt="autentication" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Двухфакторная Аутентификация</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/blacklist-dcb2f8e9.jpg" alt="blacklist" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Черный список</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="data:image/png;base64,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" alt="add" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Добавить аккаунт</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/help-dfa41af5.png" alt="help" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Помощь</h6>
</a>
<a href="admin-page.html" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/help-dfa41af5.png" alt="help" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Панель администратора</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/bell-411ff921.png" alt="bell" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Уведомления</h6>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/info-6e7e6660.png" alt="info" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Информация</h6>
</a>
<a href="index.html" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/exit-18ba8829.png" alt="exit" width="32" height="32" class="rounded-circle flex-shrink-0">
<h6 class="mb-0">Выход из аккаунта</h6>
</a>
</div>
</div>
</div>
</form>
</div>
</main>
</body>
</html>

186
3 lab/home.html Normal file
View File

@ -0,0 +1,186 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<title>Главная</title>
</head>
<body>
<main class="d-flex flex-nowrap">
<div class ="cl1 text-bg-dark">
<div class="filters ">
<div class="d-flex flex-column flex-shrink-0 text-bg-dark;" style ="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><img src="images/icon.jpg" alt="icon" width ="24" height ="24"></svg>
<span class="fs-4">Сообщения</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="Messages.html" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/messages.png" alt="home" width ="24" height ="24"></svg>
Сообщения
</a>
</li>
<li>
<a href="settings.html" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/settings.png" alt="settings" width ="24" height ="24"></svg>
Настройки
</a>
</li>
<li>
<a href="login.html" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/exit.png" alt="exit" width ="24" height ="24"></svg>
Выход
</a>
</li>
</ul>
<hr>
</div>
</div>
</div>
<div class ="cl2 bg-body-tertiary" style ="position:sticky; height:100vh;">
<div class="filters">
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 3rem;">
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<img class="icon" src="images/icon.jpg" alt="icon" width ="32" height ="32">
<span class="visually-hidden">Icon</span>
</a>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
<li class="nav-item">
<a href="Messages.html" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Messages" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><img src="images/messages.png" alt="home" width ="24" height ="24"></svg>
</a>
</li>
<li>
<a href="settings.html" class="nav-link py-3 border-bottom rounded-0" title="Settings" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Settings"><img src="images/settings.png" alt="settings" width ="24" height ="24"></svg>
</a>
</li>
<li>
<a href="login.html" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><img src="images/exit.png" alt="exit" width ="24" height ="24"></svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="filters">
</div>
<div class="list-group">
<a class="list-group-item list-group-item-action d-flex gap-1 py-2" aria-current="true">
<img src="images/da.jpg" alt="twbs" width="40" height="40" class="rounded-circle flex-shrink-0">
<div class="d-flex w-100 justify-content-between">
<div>
<h6 class="mb-0">Давид Макаров</h6>
<p class="mb-0 opacity-75">Оцените моего</p>
<div class = "postImage">
<img src="images/da2.jpg" class="img-fluid" alt="Данил" height="200" width="500"></div>
<div class="d-flex gap-2 w-100 justify-content-between">
<input type="image" src="images/like.png" width="20" height="20" alt="Кнопка «input»">
<h6 class="mb-0">5</h6>
</div>
<div class="d-flex gap-2 w-100 justify-content-between">
<img src="images/eye.png" alt="Просмотры" width="20" height="20" >
<h6 class="mb-0">2100</h6>
</div>
<div class="d-flex gap-2 w-50 justify-content-between">
<button class="btn btn-dark rounded-pill px-3" type="button">Прокомментировать</button>
</div>
</div>
<small class="opacity-1">сейчас</small>
</div>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">List group item heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">now</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
</div>
</main>
</body>
</html>

BIN
3 lab/images/account.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
3 lab/images/arrow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
3 lab/images/bell.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
3 lab/images/blacklist.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
3 lab/images/da.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 KiB

BIN
3 lab/images/da2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 KiB

BIN
3 lab/images/exit.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
3 lab/images/eye.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
3 lab/images/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
3 lab/images/help.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
3 lab/images/home.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
3 lab/images/icon.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
3 lab/images/info.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
3 lab/images/ko.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

BIN
3 lab/images/like.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
3 lab/images/messages.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

BIN
3 lab/images/pa.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

BIN
3 lab/images/plus.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
3 lab/images/private.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
3 lab/images/settings.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
3 lab/images/да3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

BIN
3 lab/images/ил.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

56
3 lab/index.html Normal file
View File

@ -0,0 +1,56 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<title>Регистрация</title>
</head>
<body style = "background:#CDECDE">
<main>
<div class ="container">
<form role = "form" class = "form-horizontal">
<div class = "form-group col-md-3 text-center">
<h3>Регистрация</h3>
<label for ="name" class = "control-label center">Введите никнейм</label>
<input type = "name" class = "form-control" id = "name" placeholder ="Введите никнейм">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="email" class = "control-label">Введите почту</label>
<input type = "email" class = "form-control" id = "email" placeholder ="Введите почту">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="pasword" control = "control-label">Введите пароль</label>
<input type = "pasword" class = "form-control" id = "pasword" placeholder ="Введите пароль">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="paswordConfirm" control = "control-label">Подтвердите пароль</label>
<input type = "paswordConfirm" class = "form-control" id = "paswordConfirm" placeholder ="Подтвердите пароль">
<a href ="login.html">У вас уже есть профиль?</a>
<p></p>
</div>
</div>
</form>
<div class = "form-group col-md-3 text-center">
<form action="home.html">
<input type = "submit" class = "btn btn-primary" value = "Зарегистрироваться">
</form>
</div>
</div>
</main>
</body>
</html>

View File

@ -0,0 +1,76 @@
const serverUrl = "http://localhost:8081";
function createLineObject(itemName, itemEmail, itemPassword, image) {
return {
nickname: itemName,
email: itemEmail,
password: itemPassword,
image,
};
}
export async function getAllLines() {
const response = await fetch(`${serverUrl}/lines`);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
export async function getLine(id) {
const response = await fetch(`${serverUrl}/lines/${id}`);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
export async function createLine(itemName, itemEmail, itemPassword, image) {
const itemObject = createLineObject(itemName, itemEmail, itemPassword, image);
const options = {
method: "POST",
body: JSON.stringify(itemObject),
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
};
const response = await fetch(`${serverUrl}/lines`, options);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
export async function updateLine(id, itemName, itemEmail, itemPassword, image) {
const itemObject = createLineObject(itemName, itemEmail, itemPassword, image);
const options = {
method: "PUT",
body: JSON.stringify(itemObject),
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
};
const response = await fetch(`${serverUrl}/lines/${id}`, options);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
export async function deleteLine(id) {
const options = {
method: "DELETE",
};
const response = await fetch(`${serverUrl}/lines/${id}`, options);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}

49
3 lab/js/lines-ui.js Normal file
View File

@ -0,0 +1,49 @@
// таблица
export const cntrls = {
table: document.querySelector("#items-table tbody"),
form: document.getElementById("items-form"),
lineId: document.getElementById("items-line-id"),
nickname: document.getElementById("nickname"),
email: document.getElementById("email"),
password: document.getElementById("password"),
image: document.getElementById("image"),
imagePreview: document.getElementById("image-preview"),
};
export const imagePlaceholder = "https://via.placeholder.com/200";
function createTableAnchor(icon, callback) {
const i = document.createElement("i");
i.classList.add("fa-solid", icon);
const a = document.createElement("a");
a.href = "#";
a.appendChild(i);
a.onclick = (event) => {
event.preventDefault();
event.stopPropagation();
callback();
};
const td = document.createElement("td");
td.appendChild(a);
return td;
}
function createTableColumn(value) {
const td = document.createElement("td");
td.textContent = value;
return td;
}
export function createTableRow(item, index, editPageCallback, deleteCallback) {
const rowNumber = document.createElement("th");
rowNumber.scope = "row";
rowNumber.textContent = index + 1;
const row = document.createElement("tr");
row.id = `line-${item.id}`;
row.appendChild(rowNumber);
row.appendChild(createTableColumn(item.nickname));
row.appendChild(createTableColumn(item.email));
row.appendChild(createTableColumn(item.password));
row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback));
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
return row;
}

209
3 lab/js/lines.js Normal file
View File

@ -0,0 +1,209 @@
// модуль с логикой
import {
createLine, getLine, deleteLine, getAllLines, updateLine,
} from "./lines-rest-api";
import {
cntrls, createTableRow, imagePlaceholder,
} from "./lines-ui";
export async function drawLinesTable() {
console.info("Try to load data");
if (!cntrls.table) {
return;
}
// вызов метода REST API для получения всех записей
const data = await getAllLines();
// очистка содержимого table
// удаляется все, что находится между тегами <table></table>
// но не атрибуты
cntrls.table.innerHTML = "";
// цикл по результату ответа от сервера
// используется лямбда-выражение
// (item, index) => {} аналогично function(item, index) {}
data.forEach((item, index) => {
cntrls.table.appendChild(
createTableRow(
item,
index,
// функции передаются в качестве параметра
// это очень удобно, так как аргументы функций доступны только
// в данном месте кода и не передаются в сервисные модули
() => location.assign(`page-edit.html?id=${item.id}`),
() => removeLine(item.id),
),
);
});
}
async function addLine(itemName, itemEmail, itemPassword, image) {
console.info("Try to add item");
// вызов метода REST API для добавления записи
const data = await createLine(itemName, itemEmail, itemPassword, image);
console.info("Added");
console.info(data);
// загрузка и заполнение table
drawLinesTable();
}
async function editLine(id, itemName, itemEmail, itemPassword, image) {
console.info("Try to update item");
// вызов метода REST API для обновления записи
const data = await updateLine(id, itemName, itemEmail, itemPassword, image);
console.info("Updated");
console.info(data);
// загрузка и заполнение table
drawLinesTable();
}
async function removeLine(id) {
if (!confirm("Do you really want to remove this item?")) {
console.info("Canceled");
return;
}
console.info("Try to remove item");
// вызов метода REST API для удаления записи
const data = await deleteLine(id);
console.info(data);
// загрузка и заполнение table
drawLinesTable();
}
// функция для получения содержимого файла в виде base64 строки
// https://ru.wikipedia.org/wiki/Base64
async function readFile(file) {
const reader = new FileReader();
// создание Promise-объекта для использования функции
// с помощью await (асинхронно) без коллбэков (callback)
// https://learn.javascript.ru/promise
return new Promise((resolve, reject) => {
// 2. "Возвращаем" содержимое когда файл прочитан
// через вызов resolve
// Если не использовать Promise, то всю работу по взаимодействию
// с REST API пришлось бы делать в обработчике (callback) функции
// onloadend
reader.onloadend = () => {
const fileContent = reader.result;
// Здесь могла бы быть работа с REST API
// Чтение заканчивает выполняться здесь
resolve(fileContent);
};
// 3. Возвращаем ошибку
reader.onerror = () => {
// Или здесь в случае ошибки
reject(new Error("oops, something went wrong with the file reader."));
};
// Шаг 1. Сначала читаем файл
// Чтение начинает выполняться здесь
reader.readAsDataURL(file);
});
}
// функция для обновления блока с превью выбранного изображения
async function updateImagePreview() {
// получение выбранного файла
// возможен выбор нескольких файлов, поэтому необходимо получить только первый
const file = cntrls.image.files[0];
// чтение содержимого файла в виде base64 строки
const fileContent = await readFile(file);
console.info("base64 ", fileContent);
// обновление атрибута src для тега img с id image-preview
cntrls.imagePreview.src = fileContent;
}
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
// Если хотите делать через модальное окно, то удалите эту функцию
// eslint-disable-next-line import/prefer-default-export
export async function linesPageForm() {
console.info("linesPageForm");
// загрузка и заполнение select со списком товаров
drawLinesTable();
// func1 = (id) => {} аналогично function func1(id) {}
const goBack = () => location.assign("/admin-page.html");
// Вызов функции обновления превью изображения при возникновении
// события onchange в тэге input с id image
cntrls.image.addEventListener("change", () => updateImagePreview());
// получение параметров GET-запроса из URL
// параметры перечислены после символа ? (?id=1&color=black&...)
const urlParams = new URLSearchParams(location.search);
// получение значения конкретного параметра (id)
// указан только при редактировании
const currentId = urlParams.get("id");
// если id задан
if (currentId) {
try {
// вызов метода REST API для получения записи по первичному ключу(id)
const line = await getLine(currentId);
// заполнение формы для редактирования
cntrls.nickname.value = line.nickname;
cntrls.email.value = line.email;
cntrls.password.value = line.password;
// заполнение превью
// Если пользователь выбрал изображение, то оно загружается
// в тэг image с id image - preview
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
} catch {
// в случае ошибки происходит возврат к page4
goBack();
}
}
// обработчик события отправки формы
// возникает при нажатии на кнопку (button) с типом submit
// кнопка должна находится внутри тега form
cntrls.form.addEventListener("submit", async (event) => {
console.info("Form onSubmit");
// отключение стандартного поведения формы при отправке
// при отправке страница обновляется и JS перестает работать
event.preventDefault();
event.stopPropagation();
// если форма не прошла валидацию, то ничего делать не нужно
if (!cntrls.form.checkValidity()) {
return;
}
let imageBase64 = "";
// Получение выбранного пользователем изображения в виде base64 строки
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
// дефолтное изображение
if (cntrls.imagePreview.src !== imagePlaceholder) {
// Загрузка содержимого атрибута src тэга img с id image-preview
// Здесь выполняется HTTP запрос с типом GET
const result = await fetch(cntrls.imagePreview.src);
// Получение из HTTP-ответа бинарного содержимого
const blob = await result.blob();
// Получение base64 строки для файла
// Здесь выполняется Promise из функции readFile
// Promise позволяет писать линейный код для работы с асинхронными методами
// без использования обработчиков (callback) с помощью await
imageBase64 = await readFile(blob);
}
// если значение параметра запроса не задано,
// то необходимо выполнить добавление записи
// иначе обновление записи
if (!currentId) {
await addLine(
cntrls.nickname.value,
cntrls.email.value,
cntrls.password.value,
imageBase64,
);
} else {
await editLine(
currentId,
cntrls.nickname.value,
cntrls.email.value,
cntrls.password.value,
imageBase64,
);
}
// возврат к странице page4
goBack();
});
}

25
3 lab/js/validation.js Normal file
View File

@ -0,0 +1,25 @@
// модуль используется для валидации форма на странице
function validation() {
// поиск всех форма с классом .needs-validation
const forms = document.querySelectorAll("form.needs-validation");
for (let i = 0; i < forms.length; i += 1) {
const form = forms[i];
// для каждой формы добавляется обработчик события отправки
form.addEventListener("submit", (event) => {
// если форма не прошла валидацию
// то выключить стандартное действие
if (!form.checkValidity()) {
event.preventDefault();
// предотвращает распространение preventDefault
// на другие объекты
event.stopPropagation();
}
// добавляет к форме класс was-validated
form.classList.add("was-validated");
});
}
}
export default validation;

14
3 lab/jsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node",
"target": "ES2020",
"jsx": "preserve",
"strictNullChecks": true,
"strictFunctionTypes": true
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}

41
3 lab/login.html Normal file
View File

@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<title>Логин</title>
<style>
</style>
</head>
<body style = "background:#CDECDE">
<main>
<div class ="container" >
<form role = "form" class = "form-horizontal">
<div class = "form-group col-md-3 text-center">
<h3>Логин</h3>
<label for ="name" class = "control-label center">Введите никнейм или почту</label>
<input type = "name" class = "form-control" id = "name" placeholder ="Введите никнейм или почту">
</div>
<div class = "form-group col-md-3 text-center">
<label for ="password" class = "control-label">Введите пароль</label>
<input type = "password" class = "form-control" id = "password" placeholder ="Введите пароль">
</div>
<div class = "form-group col-md-3 text-center">
<a href ="index.html">Нет профиля? Зарегистрироваться</a>
<p></p>
<div>
<form action="home.html">
<input type = "submit" class = "btn btn-primary" value = "Войти">
</form>
</div>
</div>
</form>
</div>
</main>
</body>
</html>

107
3 lab/messages.html Normal file
View File

@ -0,0 +1,107 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<title>Сообщения</title>
<style>
</style>
</head>
<body>
<main class="d-flex flex-nowrap">
<div class ="cl1 text-bg-dark">
<div class="filters ">
<div class="d-flex flex-column flex-shrink-0 text-bg-dark;" style ="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><img src="images/icon.jpg" alt="icon" width ="24" height ="24"></svg>
<span class="fs-4">Сообщения</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="home.html" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/home.png" alt="home" width ="24" height ="24"></svg>
Главная
</a>
</li>
<li>
<a href="settings.html" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/settings.png" alt="settings" width ="24" height ="24"></svg>
Настройки
</a>
</li>
<li>
<a href="login.html" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/exit.png" alt="exit" width ="24" height ="24"></svg>
Выход
</a>
</li>
</ul>
<hr>
</div>
</div>
</div>
<div class ="cl2 bg-body-tertiary" style ="position:sticky; height:100vh;">
<div class="filters">
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 3rem;">
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<img class="icon" src="images/icon.jpg" alt="icon" width ="32" height ="32">
<span class="visually-hidden">Icon</span>
</a>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
<li class="nav-item">
<a href="home.html" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><img src="images/home.png" alt="home" width ="24" height ="24"></svg>
</a>
</li>
<li>
<a href="settings.html" class="nav-link py-3 border-bottom rounded-0" title="Settings" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Settings"><img src="images/settings.png" alt="settings" width ="24" height ="24"></svg>
</a>
</li>
<li>
<a href="login.html" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><img src="images/exit.png" alt="exit" width ="24" height ="24"></svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="filters">
</div>
<div class = "container-fluid">
<div class="list-group">
<a href="dialog.html" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/da.jpg" alt="david" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Давид Макаров</h6>
<p class="mb-0 opacity-75">пример</p>
</div>
<small class="opacity-50 text-nowrap">now</small>
</div>
</a>
<a href="dialog.html" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="images/da2.jpg" alt="danil" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Даниил Путинцев</h6>
<p class="mb-0 opacity-75">?</p>
</div>
<small class="opacity-50 text-nowrap">3d</small>
</div>
</a>
</div>
</div>
</main>
</body>
</html>

4700
3 lab/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

26
3 lab/package.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "int-prog",
"version": "1.0.0",
"type": "module",
"scripts": {
"vite": "vite",
"serve": "http-server -p 3000 ./",
"build": "vite build",
"rest": "json-server --watch data.json -p 8081",
"dev": "npm-run-all --parallel rest vite",
"prod": "npm-run-all build --parallel serve rest"
},
"dependencies": {
"bootstrap": "5.2.1 ",
"@fortawesome/fontawesome-free": "6.2.0"
},
"devDependencies": {
"vite": "4.4.9",
"eslint": "8.50.0",
"eslint-config-airbnb-base": "15.0.0",
"eslint-plugin-import": "2.28.1",
"http-server": "14.1.1",
"json-server": "0.17.4",
"npm-run-all": "4.1.5"
}
}

Some files were not shown because too many files have changed in this diff Show More