Compare commits
32 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 44047ff48a | |||
| 0954e4841e | |||
| 1a6db9a7a7 | |||
| c87631567f | |||
| 8bc1046d90 | |||
| 40bf1f1e75 | |||
| 8c3c7bf90f | |||
| 5d3abb140d | |||
| 9b9d2093e3 | |||
| 00a96a2244 | |||
| cc8422b049 | |||
| 733c13b77e | |||
| 1f8c295e61 | |||
| a996e5ce11 | |||
| cd78fa0241 | |||
| 7a55134cf5 | |||
| e0e1062912 | |||
| c54337597c | |||
| 4d53fe830b | |||
| 041f75a828 | |||
| 4ffe93cba0 | |||
| ffb8826ea8 | |||
| 41cf84ee99 | |||
| 4297a3c424 | |||
| d1bca0d0a3 | |||
| 7e7051d83a | |||
| 9f824c238c | |||
| 318bb778e7 | |||
| 928f2f4128 | |||
| 72c9eead6f | |||
| cdfe6d22cf | |||
| 4eab9a22ad |
18
.eslintrc.json
Normal 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
@@ -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
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"tabWidth": 4,
|
||||
"singleQuote": false,
|
||||
"printWidth": 120,
|
||||
"trailingComma": "es5",
|
||||
"useTabs": false,
|
||||
"endOfLine": "auto"
|
||||
}
|
||||
23
.vscode/launch.json
vendored
Normal 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
@@ -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
@@ -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
@@ -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
@@ -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
|
After Width: | Height: | Size: 1.0 MiB |
BIN
html/img/SL2.png
Normal file
|
After Width: | Height: | Size: 558 KiB |
BIN
html/img/VK.png
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
html/img/VK0.png
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
html/img/manga.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
html/img/ХаяоМиядзаки.png
Normal file
|
After Width: | Height: | Size: 453 KiB |
BIN
html/img/заглушка.jpg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
html/img/новость.jpg
Normal file
|
After Width: | Height: | Size: 36 KiB |
166
html/index.html
Normal 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
29
package.json
Normal 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
@@ -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"),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||