32 Commits
main ... lab3

Author SHA1 Message Date
44047ff48a отчет 2025-05-28 18:35:00 +04:00
0954e4841e попытка 2025-05-28 18:25:12 +04:00
1a6db9a7a7 отчет 2025-05-28 18:14:54 +04:00
c87631567f fix 2025-05-28 18:09:06 +04:00
8bc1046d90 fix 2025-05-28 18:08:27 +04:00
40bf1f1e75 gitignore 2025-05-28 18:07:09 +04:00
8c3c7bf90f отчет 2025-05-26 01:03:56 +04:00
5d3abb140d отчет 2025-05-26 00:41:29 +04:00
9b9d2093e3 небольшое дополнение для удобства 2025-05-15 20:30:35 +04:00
00a96a2244 гуд 2025-05-15 13:23:55 +04:00
cc8422b049 fix 2025-05-15 12:01:21 +04:00
733c13b77e Готово к сдаче 2025-05-15 00:07:24 +04:00
1f8c295e61 Готова авторизация 2025-05-14 22:48:51 +04:00
a996e5ce11 Отчет 2025-05-14 19:22:20 +04:00
cd78fa0241 начало 2025-05-14 19:03:14 +04:00
7a55134cf5 Вроде как подготовка к лабе завершена. расширения установлены, всроде все робит, осталось подогнать к требованиям 2025-04-29 22:43:03 +04:00
e0e1062912 сдано 2025-03-15 15:09:09 +04:00
c54337597c сдача 2025-03-15 14:29:54 +04:00
4d53fe830b / 2025-03-06 00:14:38 +04:00
041f75a828 фикс отступов где новости сЪезжали 2025-03-06 00:05:34 +04:00
4ffe93cba0 read 2025-03-01 15:07:15 +04:00
ffb8826ea8 готово к сдаче 2025-03-01 14:45:13 +04:00
41cf84ee99 / 2025-03-01 04:11:04 +04:00
4297a3c424 fix head in pages 2025-03-01 04:06:49 +04:00
d1bca0d0a3 выпадающий список, подвал, корректировка размеров 2025-03-01 03:53:25 +04:00
7e7051d83a загрузка отчета по лабе + лишние комменты убрал... 2025-02-20 01:01:04 +04:00
9f824c238c Сдано, отчет поднгрузить 2025-02-15 15:56:28 +04:00
318bb778e7 готово к сдаче 2025-02-15 15:23:01 +04:00
928f2f4128 показать 2025-02-15 00:26:11 +04:00
72c9eead6f вроде как норм и можно что-то показать 2025-02-15 00:20:34 +04:00
cdfe6d22cf фикс названий 2025-02-15 00:01:59 +04:00
4eab9a22ad 1 2025-02-14 13:21:48 +04:00
26 changed files with 5738 additions and 0 deletions

18
.eslintrc.json Normal file
View File

@@ -0,0 +1,18 @@
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["airbnb-base", "prettier"],
"plugins": ["prettier", "html"],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"prettier/prettier": "error",
"no-console": "off",
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
}
}

2
.gitignore vendored
View File

@@ -5,6 +5,8 @@
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets
node_modules
dist
# Local History for Visual Studio Code
.history/

8
.prettierrc Normal file
View File

@@ -0,0 +1,8 @@
{
"tabWidth": 4,
"singleQuote": false,
"printWidth": 120,
"trailingComma": "es5",
"useTabs": false,
"endOfLine": "auto"
}

23
.vscode/launch.json vendored Normal file
View File

@@ -0,0 +1,23 @@
{
// Используйте IntelliSense, чтобы узнать о возможных атрибутах.
// Наведите указатель мыши, чтобы просмотреть описания существующих атрибутов.
// Для получения дополнительной информации посетите: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"name": "Debug",
"request": "launch",
"url": "http://localhost:5173"
},
{
"type": "node",
"name": "Start",
"request": "launch",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "start"],
"console": "integratedTerminal"
}
]
}

16
Lab/.gitignore vendored Normal file
View File

@@ -0,0 +1,16 @@
# ---> VisualStudioCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets
node_modules
dist
# Local History for Visual Studio Code
.history/
# Built Visual Studio Code Extensions
*.vsix

73
html/account.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Личный кабинет</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<!-- маска на телефон + звездочки на пароль + длина пароля -->
<body class="bg-dark text-light">
<header class=" py-3 bg-custom-dark">
<div class="container d-flex align-items-center">
<a href="index.html" class="me-3">
<img src="../img/manga.png" alt="ЛОГО" height="50" />
</a>
<h1 class="h5 mb-0 text-light">Личный кабинет</h1>
</div>
</header>
<main class="container my-5">
<div class="row justify-content-center">
<div class="col-md-6 bg-secondary p-4 rounded bg-custom-dark">
<form id="loginForm">
<h2 class="text-center mb-4">
<i class="bi bi-person-circle me-2"></i>Вход в систему
</h2>
<div class="mb-3">
<label for="number" class="form-label">
<i class="bi bi-telephone-fill me-2"></i>Номер телефона
</label>
<input type="tel" class="form-control" id="number" name="number_acc" placeholder="+7 (___) ___-__-__" required>
</div>
<div class="mb-4">
<label for="password" class="form-label">
<i class="bi bi-lock-fill me-2"></i>Пароль
</label>
<input type="password" class="form-control" id="password" name="password_acc" placeholder="Пароль" required minlength="4">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-warning">
<i class="bi bi-box-arrow-in-right me-2"></i>Войти
</button>
</div>
</form>
</div>
</div>
<div class="row justify-content-center mt-5" id="userCards">
<!-- Здесь будут карточки -->
</div>
</main>
<footer class="text-center py-4 text-light mt-5 bg-custom-dark">
<p><i class="bi bi-journal-text me-2"></i>Все права защищены, 2025</p>
</footer>
<!-- маска + карточка пользователя -->
<script type="module" src="/src/account.js"></script>
</body>
</html>

62
html/author.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Авторство</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet">
</head>
<body class="bg-dark text-light">
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-dark bg-custom-dark px-3">
<a class="navbar-brand" href="index.html">
<img src="img/manga.png" alt="ЛОГО" height="50">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Переключить навигацию">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ms-3" id="navbarNavDropdown">
<ul class="navbar-nav me-auto">
</ul>
<a href="account.html" class="btn btn-outline-warning">Вход</a>
</div>
</nav>
<!-- Информация об авторе -->
<main class="container mt-5">
<div class="row">
<div class="col-md-4 text-center">
<img class="img-fluid rounded" src="img/ХаяоМиядзаки.png" alt="Хаяо Миядзаки">
</div>
<div class="col-md-8">
<h3>Автор: Хаяо Миядзаки</h3>
<p>Посвящено автору и т.п. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur quod harum
voluptate architecto, sit eaque, voluptatibus excepturi deleniti consequatur porro vero dolorem dolorum
vitae laborum libero et veritatis sapiente a?</p>
</div>
</div>
</main>
<!-- Футер -->
<footer class="bg-custom-dark text-light text-center py-4 mt-5">
<p>Спасибо, что посетили наш сайт, если возникли вопросы, обращайтесь к нам на почту <a href="mailto:manga@manga.scom" class="text-warning">manga@manga.scom</a></p>
<p>Если вас интересуют наши соц.сети, то вот они:</p>
<div class="d-flex justify-content-center">
<a href="https://vk.com/ded_moroz1509" class="me-3">
<img src="img/VK0.png" alt="VK" height="30">
</a>
<!-- Добавить другие иконки соцсетей здесь -->
</div>
</footer>
<!-- JS Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

42
html/css/style.css Normal file
View File

@@ -0,0 +1,42 @@
.bg-custom-dark {
background-color: #0f0630 !important;
color: #f0ffff;
}
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
footer {
flex-shrink: 0;
}
.d-block {
text-decoration: none;
color: #f0ffff;
}
.img-fluid {
width: 200px;
}
.card {
width: 60%;
}
.container-news .card {
margin: 0 auto;
width: 600px;
}

BIN
html/img/SL1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
html/img/SL2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 558 KiB

BIN
html/img/VK.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
html/img/VK0.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
html/img/manga.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 453 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
html/img/новость.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

166
html/index.html Normal file
View File

@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Манга онлайн</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet">
</head>
<body class="bg-dark">
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-dark bg-custom-dark px-3">
<a class="navbar-brand" href="index.html">
<img src="img/manga.png" alt="ЛОГО" height="50">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Переключить навигацию">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ms-3" id="navbarNavDropdown">
<ul class="navbar-nav me-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="catalogDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Каталог
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="catalogDropdown">
<li><a class="dropdown-item" href="#">Жанр 1</a></li>
<li><a class="dropdown-item" href="#">Жанр 2</a></li>
<li><a class="dropdown-item" href="#">Жанр 3</a></li>
<li><a class="dropdown-item" href="#">Жанр 4</a></li>
</ul>
</li>
</ul>
<a href="account.html" class="btn btn-outline-warning">Вход</a>
</div>
</nav>
<!-- Основное содержимое -->
<div class="container mt-5 bg-secondary">
<!-- Раздел с произведениями -->
<div class="main">
<h3 class="text-center">Наши произведения</h3>
<section class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="col d-flex justify-content-center">
<a href="manga.html" class="d-block">
<figure class="text-center">
<img src="img/заглушка.jpg" class="img-fluid" alt="Заглушка">
<figcaption>Заглушка</figcaption>
</figure>
</a>
</div>
<div class="col d-flex justify-content-center">
<a href="manga.html" class="d-block">
<figure class="text-center">
<img src="img/заглушка.jpg" class="img-fluid" alt="Заглушка">
<figcaption>Заглушка</figcaption>
</figure>
</a>
</div>
<div class="col d-flex justify-content-center">
<a href="manga.html" class="d-block">
<figure class="text-center">
<img src="img/заглушка.jpg" class="img-fluid" alt="Заглушка">
<figcaption>Заглушка</figcaption>
</figure>
</a>
</div>
<div class="col d-flex justify-content-center">
<a href="manga.html" class="d-block">
<figure class="text-center">
<img src="img/заглушка.jpg" class="img-fluid" alt="Заглушка">
<figcaption>Заглушка</figcaption>
</figure>
</a>
</div>
<div class="col d-flex justify-content-center">
<a href="manga.html" class="d-block">
<figure class="text-center">
<img src="img/заглушка.jpg" class="img-fluid" alt="Заглушка">
<figcaption>Заглушка</figcaption>
</figure>
</a>
</div>
<div class="col d-flex justify-content-center">
<a href="manga.html" class="d-block">
<figure class="text-center">
<img src="img/заглушка.jpg" class="img-fluid" alt="Заглушка">
<figcaption>Заглушка</figcaption>
</figure>
</a>
</div>
<div class="col d-flex justify-content-center">
<a href="manga.html" class="d-block">
<figure class="text-center">
<img src="img/заглушка.jpg" class="img-fluid" alt="Заглушка">
<figcaption>Заглушка</figcaption>
</figure>
</a>
</div>
</section>
</div>
<!-- Новости -->
<div class="news mt-5">
<h3 class="text-center">Наши новости:</h3>
<section class="row row-cols-1 row-cols-sm-3 row-cols-md-3 g-4">
<div class="col d-flex justify-content-center">
<div class="card">
<a href="news.html">
<img src="img/новость.jpg" class="card-img-top" alt="Новость 1">
</a>
<div class="card-body">
<h4 class="card-title">Новость 1</h4>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero laborum possimus itaque quibusdam beatae ipsam odit sed? Vel blanditiis repellendus, ea nam, incidunt odio sit amet sequi nihil, laudantium aspernatur!</p>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="card">
<a href="news.html">
<img src="img/новость.jpg" class="card-img-top" alt="Новость 2">
</a>
<div class="card-body">
<h4 class="card-title">Новость 2</h4>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero laborum possimus itaque quibusdam beatae ipsam odit sed? Vel blanditiis repellendus, ea nam, incidunt odio sit amet sequi nihil, laudantium aspernatur!</p>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="card">
<a href="news.html">
<img src="img/новость.jpg" class="card-img-top" alt="Новость 3">
</a>
<div class="card-body">
<h4 class="card-title">Новость 3</h4>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero laborum possimus itaque quibusdam beatae ipsam odit sed? Vel blanditiis repellendus, ea nam, incidunt odio sit amet sequi nihil, laudantium aspernatur!</p>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Футер -->
<footer class="bg-custom-dark text-light text-center py-4 mt-5">
<p>Спасибо, что посетили наш сайт, если возникли вопросы, обращайтесь к нам на почту <a href="mailto:manga@manga.scom" class="text-warning">manga@manga.scom</a></p>
<p>Если вас интересуют наши соц.сети, то вот они:</p>
<div class="d-flex justify-content-center">
<a href="https://vk.com/ded_moroz1509" class="me-3">
<img src="img/VK0.png" alt="VK" height="30">
</a>
<!-- Добавьте другие иконки соцсетей здесь -->
</div>
</footer>
<!-- JS Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

73
html/manga.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Манга</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
</head>
<body class="bg-dark text-light d-flex flex-column min-vh-100">
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-dark bg-custom-dark px-3">
<a class="navbar-brand" href="index.html">
<img src="img/manga.png" alt="ЛОГО" height="50">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Переключить навигацию">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ms-3" id="navbarNavDropdown">
<ul class="navbar-nav me-auto">
</ul>
<a href="account.html" class="btn btn-outline-warning">Вход</a>
</div>
</nav>
<!-- Контент -->
<main class="container my-5 flex-grow-1">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<figure class="figure">
<img src="img/заглушка.jpg" class="figure-img img-fluid rounded" alt="Заглушка">
<figcaption class="figure-caption text-light">Заглушка</figcaption>
</figure>
<p class="mt-4">Здесь будет сама инфа о манге</p>
<div class="d-flex justify-content-center gap-3 mt-3">
<a href="author.html" class="btn btn-primary"><i class="bi bi-person-lines-fill me-2"></i>Про автора</a>
<a href="reading.html" class="btn btn-success"><i class="bi bi-book me-2"></i>Читать</a>
</div>
</div>
</div>
</main>
<footer class="bg-custom-dark text-light text-center py-4">
<div class="container">
<p>Спасибо, что посетили наш сайт, если возникли вопросы, обращайтесь к нам на почту <a href="mailto:manga@manga.scom" class="text-warning">manga@manga.scom</a></p>
<p>Если вас интересуют наши соц.сети, то вот они:</p>
<div class="d-flex justify-content-center">
<a href="https://vk.com/ded_moroz1509" class="me-3">
<img src="img/VK0.png" alt="VK" height="30">
</a>
</div>
</div>
</footer>
<!-- JS Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
integrity="sha384-qM3E4Th5USh8vEk7NR7s02PbZ+PeWXcP4qU3HdHPoUVYvRNEAYsGHV7kpw9yeF0L"
crossorigin="anonymous"></script>
</body>
</html>

62
html/news.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Новость</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="bg-dark">
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-dark bg-custom-dark px-3">
<a class="navbar-brand" href="index.html">
<img src="img/manga.png" alt="ЛОГО" height="50">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Переключить навигацию">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ms-3" id="navbarNavDropdown">
<ul class="navbar-nav me-auto">
</ul>
<a href="account.html" class="btn btn-outline-warning">Вход</a>
</div>
</nav>
<div class="container container-news mt-4">
<div class="row">
<div class="col-12">
<div class="card">
<img src="img/новость.jpg" class="card-img-top" alt="Новость">
<div class="card-body">
<h5 class="card-title">Новость</h5>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae exercitationem eligendi error.
Architecto voluptatum eaque, nostrum ea a consequuntur, deleniti dolor provident sequi dicta culpa
magnam delectus amet distinctio autem?
</p>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-custom-dark text-center py-4 text-light mt-5 bg-custom-dark">
<p><i class="bi bi-journal-text me-2"></i>Все права защищены, 2025</p>
</footer>
<!-- Подключаем Bootstrap JS и Popper -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

61
html/reading.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Читать мангу...</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet">
</head>
<body class="bg-dark text-light">
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-dark bg-custom-dark px-3">
<a class="navbar-brand" href="index.html">
<img src="img/manga.png" alt="ЛОГО" height="50">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Переключить навигацию">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ms-3" id="navbarNavDropdown">
<ul class="navbar-nav me-auto">
</ul>
<a href="account.html" class="btn btn-outline-warning">Вход</a>
</div>
</nav>
<!-- Чтение манги -->
<div class="container mt-5">
<div class="row">
<div class="col-12 text-center">
<h3>Читать мангу...</h3>
<div class="d-flex justify-content-center">
<img class="img-reading mx-2" src="img/SL1.png" alt="Манга страница 1">
<img class="img-reading mx-2" src="img/SL2.png" alt="Манга страница 2">
</div>
</div>
</div>
</div>
<!-- Футер -->
<footer class="bg-custom-dark text-light text-center py-4 mt-5">
<p>Спасибо, что посетили наш сайт, если возникли вопросы, обращайтесь к нам на почту <a href="mailto:manga@manga.scom" class="text-warning">manga@manga.scom</a></p>
<p>Если вас интересуют наши соц.сети, то вот они:</p>
<div class="d-flex justify-content-center">
<a href="https://vk.com/ded_moroz1509" class="me-3">
<img src="img/VK0.png" alt="VK" height="30">
</a>
<!-- Добавить другие иконки соцсетей здесь -->
</div>
</footer>
<!-- JS Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

36
html/src/account.js Normal file
View File

@@ -0,0 +1,36 @@
import Inputmask from "inputmask";
// маска для телефона
document.addEventListener("DOMContentLoaded", () => {
Inputmask("+7 (999) 999-99-99").mask(document.getElementById("number"));
});
// карточка с пользователем
document.getElementById("loginForm")?.addEventListener("submit", (e) => {
e.preventDefault();
const number = document.getElementById("number").value;
const password = document.getElementById("password").value;
const hiddenPassword = "*".repeat(password.length);
// типо AJAX
setTimeout(() => {
// создаём карточку пользователя
const card = document.createElement("div");
card.className = "col-md-4 mb-4"; // Класс для каждой карточки
card.innerHTML = `
<div class="card text-dark bg-light">
<div class="card-header">
<i class="bi bi-person-circle me-2"></i>Профиль пользователя
</div>
<div class="card-body">
<h5 class="card-title">Добро пожаловать!</h5>
<p class="card-text"><i class="bi bi-telephone-fill me-2"></i>${number}</p>
<p class="card-text"><i class="bi bi-shield-lock-fill me-2"></i>Пароль: <code>${hiddenPassword}</code></p>
</div>
</div>
`;
// добавляем карточку
document.getElementById("userCards").appendChild(card);
}, 0);
});

3
html/src/main.js Normal file
View File

@@ -0,0 +1,3 @@
import "bootstrap"; // Подключение JS Bootstrap
import "bootstrap-icons/font/bootstrap-icons.css";
import "bootstrap/dist/css/bootstrap.min.css"; // Подключение стилей

5046
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

29
package.json Normal file
View File

@@ -0,0 +1,29 @@
{
"name": "int-prog",
"version": "1.0.0",
"type": "module",
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "http-server -p 3000 ./html/",
"prod": "npm-run-all build serve",
"lint": "eslint . --ext js --report-unused-disable-directives --max-warnings 0 && echo 'Сборка успешна!'"
},
"dependencies": {
"bootstrap": "5.3.3",
"bootstrap-icons": "1.11.3",
"inputmask": "^5.0.9"
},
"devDependencies": {
"eslint": "8.56.0",
"eslint-config-airbnb-base": "15.0.0",
"eslint-config-prettier": "10.0.2",
"eslint-plugin-html": "8.1.2",
"eslint-plugin-import": "2.31.0",
"eslint-plugin-prettier": "5.2.3",
"http-server": "14.1.1",
"npm-run-all": "4.1.5",
"vite": "6.2.0"
}
}

18
vite.config.js Normal file
View File

@@ -0,0 +1,18 @@
import { resolve } from "path";
import { defineConfig } from "vite";
export default defineConfig({
root: resolve(__dirname, "html"),
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "html/index.html"),
page2: resolve(__dirname, "html/account.html"),
page3: resolve(__dirname, "html/author.html"),
page4: resolve(__dirname, "html/manga.html"),
page5: resolve(__dirname, "html/news.html"),
page6: resolve(__dirname, "html/reading.html"),
},
},
},
});

BIN
Отчет №3.docx Normal file

Binary file not shown.