First commit
130
Admin_Pannel.html
Normal file
@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="styles/Admin_Pannel_Style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
|
||||
<title>Книжный подвальчик</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navBar">
|
||||
<div class="navBar-header">
|
||||
<p>
|
||||
Книжный <br />
|
||||
подвальчик
|
||||
</p>
|
||||
</div>
|
||||
<div class="navBarMenu">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#"><span> Администраторы </span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><span> Пользователи </span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><span> Книги </span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="contentNav">
|
||||
<div class="contentNav-Amount">
|
||||
<p>ALL(10)</p>
|
||||
</div>
|
||||
<div class="contentNav-AddButton">
|
||||
<button>
|
||||
<p>ADD NEW</p>
|
||||
</button>
|
||||
</div>
|
||||
<div class="contentNav-DeleteButton">
|
||||
<button>
|
||||
<p>DELETE</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentTable">
|
||||
<table class="tg">
|
||||
<colgroup>
|
||||
<col style="width: 25px" />
|
||||
<col style="width: 301px" />
|
||||
<col style="width: 143px" />
|
||||
<col style="width: 163px" />
|
||||
<col style="width: 100px" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tg-7803">
|
||||
|
||||
</th>
|
||||
<th class="tg-0lax">Имя</th>
|
||||
<th class="tg-0lax">Логин</th>
|
||||
<th class="tg-0lax">Emal</th>
|
||||
<th class="tg-0pky">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td class="tg-0lax">
|
||||
<img src="./images/unchecked.png" alt=""/>
|
||||
</td>
|
||||
<td class="tg-0lax">Петров Иван</td>
|
||||
<td class="tg-0lax">petya875</td>
|
||||
<td class="tg-0lax">xemt23@yopmail.com</td>
|
||||
<td class="tg-0lax">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0lax">
|
||||
<img src="./images/unchecked.png" alt=""/>
|
||||
</td>
|
||||
<td class="tg-0lax">Сергеева Виктория</td>
|
||||
<td class="tg-0lax">vikwin</td>
|
||||
<td class="tg-0lax">figo64@yopmail.com</td>
|
||||
<td class="tg-0lax">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0lax">
|
||||
<img src="./images/unchecked.png" alt=""/>
|
||||
</td>
|
||||
<td class="tg-0lax">Федоров Артем</td>
|
||||
<td class="tg-0lax">bookinist</td>
|
||||
<td class="tg-0lax">figo64@yopmail.com</td>
|
||||
<td class="tg-0lax">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0lax">
|
||||
<img src="./images/unchecked.png" alt=""/>
|
||||
</td>
|
||||
<td class="tg-0lax">Корпеев Даниил</td>
|
||||
<td class="tg-0lax">korp0qwer</td>
|
||||
<td class="tg-0lax">teiv37@yopmail.com</td>
|
||||
<td class="tg-0lax">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0lax">
|
||||
<img src="./images/unchecked.png" alt=""/>
|
||||
</td>
|
||||
<td class="tg-0lax">Малкин Максим</td>
|
||||
<td class="tg-0lax">malik926</td>
|
||||
<td class="tg-0lax">gra09@yopmail.com</td>
|
||||
<td class="tg-0lax">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-0lax">
|
||||
<img src="./images/unchecked.png" alt=""/>
|
||||
</td>
|
||||
<td class="tg-0lax">Емельянова Дарья</td>
|
||||
<td class="tg-0lax">hyper15</td>
|
||||
<td class="tg-0lax">xoux75@yopmail.com</td>
|
||||
<td class="tg-0lax">...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
67
Book.html
Normal file
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="styles/styleCatalog.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
|
||||
<title>Книжный подвальчик</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid" style="padding: 0;">
|
||||
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #452A21;">
|
||||
<div class="container">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector" d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav" style="margin-left: auto;">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="Catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Избранное</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="SignIn.html">Войти</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="SignUp.html">Зарегистрироваться</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<img src="images/fil-kam-big.png" alt="Обложка книги" style="display: block;
|
||||
margin-left: auto; margin-right: auto; border-radius: 10px; max-width: 60%; margin-top: 15px;">
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-6 col-sm-12">
|
||||
<p class="about">Книга, покорившая мир, эталон литературы для читателей всех возрастов,
|
||||
синоним успеха. Книга, сделавшая Джоан Роулинг самым читаемым писателем
|
||||
современности. Книга, ставшая культовой уже для нескольких поколений.
|
||||
"Гарри Поттер и Философский камень" - история начинается.
|
||||
</p>
|
||||
<div class="container column " style="display: flex; flex-direction: column; padding-bottom: 50px;">
|
||||
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
|
||||
<a href="#link" class="btn btn-custom" role="button">Читать отрывок</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
|
||||
Федоренко Галина, ПИбд-22
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
123
Catalog.html
Normal file
@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="styles/styleCatalog.css">
|
||||
<link rel="stylesheet" href="styles/modal.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
|
||||
<title>Книжный подвальчик</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid p-0" >
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector" d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav mt-auto" >
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="Catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="open-modal-link" style="cursor: pointer;">Избранное</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="SignIn.html">Войти</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="SignUp.html">Зарегистрироваться</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="book">
|
||||
<img src="images/mast-marg.png" alt="Обложка книги 1">
|
||||
<h3>Мастер и Маргарита, М.А. Булгагов</h3>
|
||||
<a href="#link" class="btn btn-custom" role="button">Подробнее</a>
|
||||
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/mast-marg.png" alt="Обложка книги 1">
|
||||
<h3>Мастер и Маргарита, М.А. Булгагов</h3>
|
||||
<a href="#link" class="btn btn-custom" role="button">Подробнее</a>
|
||||
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="book">
|
||||
<img src="images/sob-pari.png" alt="Обложка книги 2">
|
||||
<h3>Собор парижской Богоматери, В. Гюго</h3>
|
||||
<a href="#link" class="btn btn-custom" role="button">Подробнее</a>
|
||||
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/sob-pari.png" alt="Обложка книги 2">
|
||||
<h3>Собор парижской Богоматери, В. Гюго</h3>
|
||||
<a href="#link" class="btn btn-custom" role="button">Подробнее</a>
|
||||
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="book">
|
||||
<img src="images/fil-kam.png" alt="Обложка книги 3">
|
||||
<h3>Гарри Поттер и философский камень, Дж.К. Роулинг</h3>
|
||||
<a href="Book.html" class="btn btn-custom" role="button">Подробнее</a>
|
||||
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/fil-kam.png" alt="Обложка книги 3">
|
||||
<h3>Гарри Поттер и философский камень, Дж.К. Роулинг</h3>
|
||||
<a href="Book.html" class="btn btn-custom" role="button">Подробнее</a>
|
||||
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="book">
|
||||
<img
|
||||
style="padding-bottom: 7.73px"
|
||||
src="images/groz-per.png"
|
||||
alt="Обложка книги 4"
|
||||
/>
|
||||
<h3>Грозовой перевал, Э. Бронте</h3>
|
||||
<a href="#link" class="btn btn-custom" role="button">Подробнее</a>
|
||||
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="my-modal">
|
||||
<div class="modal-box">
|
||||
<button id="close-modal-btn" class="modal-close">
|
||||
<svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.11 2.697L2.698 4.11 6.586 8l-3.89 3.89 1.415 1.413L8 9.414l3.89 3.89 1.413-1.415L9.414 8l3.89-3.89-1.415-1.413L8 6.586l-3.89-3.89z" fill="#000"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<p>Избранное</p>
|
||||
<ul>
|
||||
<p>Book 1</p>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
|
||||
Федоренко Галина, ПИбд-22
|
||||
</footer>
|
||||
|
||||
<script src="scripts/mainPage.js"></script>
|
||||
</body>
|
||||
</html>
|
40
SignIn.html
Normal file
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="styles/styleSigh.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
|
||||
<title>Книжный подвальчик</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="background-image">
|
||||
<div class="container">
|
||||
<a class="nav-item" href="index.html">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector" d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="sign-in-container">
|
||||
<h2 class="custom-h">Добро пожаловать!</h2>
|
||||
<form id="registrationForm" action="">
|
||||
<div class="row justify-content-center">
|
||||
<input type="text" class="form-control" id="username" placeholder="логин">
|
||||
<input type="password" class="form-control" id="password" placeholder="пароль">
|
||||
<button type="submit" class="btn btn-custom">ВОЙТИ</button>
|
||||
<p class="custom-text">Ещё нет аккаунта? <a href="SignUp.html" class="custom-a">Зарегистрироваться</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
|
||||
Федоренко Галина, ПИбд-22
|
||||
</footer>
|
||||
<script src="scripts/index.js"></script>
|
||||
</body>
|
||||
</html>
|
41
SignUp.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="styles/styleSigh.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
|
||||
<title>Книжный подвальчик</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="background-image">
|
||||
<div class="container">
|
||||
<a class="nav-item" href="index.html">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector" d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="sign-up-container">
|
||||
<h2 class="custom-h">Регистрация</h2>
|
||||
<form id="registrationForm" action="">
|
||||
<div class="row justify-content-center">
|
||||
<input type="text" class="form-control" id="username" placeholder="логин">
|
||||
<input type="text" class="form-control" id="email" placeholder="email">
|
||||
<input type="password" class="form-control" id="password" placeholder="пароль">
|
||||
<button type="submit" class="btn btn-custom" id="submitButton">ЗАРЕГИСТРИРОВАТЬСЯ</button>
|
||||
<p class="custom-text">Уже есть аккаунт? <a href="SignIn.html" class="custom-a">Войти</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
|
||||
Федоренко Галина, ПИбд-22
|
||||
</footer>
|
||||
<script src="scripts/index.js"></script>
|
||||
</body>
|
||||
</html>
|
BIN
images/background.jpg
Normal file
After Width: | Height: | Size: 2.6 MiB |
BIN
images/backgroung_sign.png
Normal file
After Width: | Height: | Size: 878 KiB |
BIN
images/book.png
Normal file
After Width: | Height: | Size: 531 B |
3
images/cross.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.11 2.697L2.698 4.11 6.586 8l-3.89 3.89 1.415 1.413L8 9.414l3.89 3.89 1.413-1.415L9.414 8l3.89-3.89-1.415-1.413L8 6.586l-3.89-3.89z" fill="#000"></path>
|
||||
</svg>
|
After Width: | Height: | Size: 298 B |
BIN
images/fil-kam-big.png
Normal file
After Width: | Height: | Size: 535 KiB |
BIN
images/fil-kam.png
Normal file
After Width: | Height: | Size: 216 KiB |
BIN
images/groz-per.png
Normal file
After Width: | Height: | Size: 108 KiB |
BIN
images/heart.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
images/mast-marg.png
Normal file
After Width: | Height: | Size: 128 KiB |
BIN
images/sob-pari.png
Normal file
After Width: | Height: | Size: 108 KiB |
BIN
images/unchecked.png
Normal file
After Width: | Height: | Size: 4.7 KiB |
82
index.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="styles/styleMain.css">
|
||||
<link rel="stylesheet" href="styles/modal.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
|
||||
<title>Книжный подвальчик</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid p-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
|
||||
<div class="container">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector" d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="Catalog.html">Каталог</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="open-modal-link" style="cursor: pointer;">Избранное</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="SignIn.html">Войти</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="SignUp.html">Зарегистрироваться</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container text-center">
|
||||
<h1 class="display-4">Книжный подвальчик</h1>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<blockquote class="blockquote text-right">
|
||||
<p>Без книг пуста человеческая жизнь. Книга не только наш друг, но и постоянный вечный спутник.</p>
|
||||
<footer class="blockquote-footer">Д. Бедный</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal" id="my-modal">
|
||||
<div class="modal-box">
|
||||
<button id="close-modal-btn" class="modal-close">
|
||||
<svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.11 2.697L2.698 4.11 6.586 8l-3.89 3.89 1.415 1.413L8 9.414l3.89 3.89 1.413-1.415L9.414 8l3.89-3.89-1.415-1.413L8 6.586l-3.89-3.89z" fill="#000"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<p>Избранное</p>
|
||||
<ul>
|
||||
<p>Book 1</p>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
|
||||
Федоренко Галина, ПИбд-22
|
||||
</footer>
|
||||
|
||||
<script src="scripts/mainPage.js"></script>
|
||||
</body>
|
||||
</html>
|
170
styles/Admin_Pannel_Style.css
Normal file
@ -0,0 +1,170 @@
|
||||
.tg {
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
.tg td{
|
||||
border-bottom-width:1px;
|
||||
border-color:black;
|
||||
border-style:solid;
|
||||
border-top-width:1px;
|
||||
border-width:0px;
|
||||
font-family:Arial, sans-serif;
|
||||
font-size:14px;
|
||||
overflow:hidden;
|
||||
padding:10px 5px;
|
||||
word-break:normal;
|
||||
}
|
||||
.tg th{
|
||||
border-bottom-width:1px;
|
||||
border-color:black;
|
||||
border-style:solid;
|
||||
border-top-width:1px;
|
||||
border-width:0px;
|
||||
font-family:Arial, sans-serif;
|
||||
font-size:14px;
|
||||
font-weight:normal;
|
||||
overflow:hidden;
|
||||
padding:10px 5px;
|
||||
word-break:normal;
|
||||
}
|
||||
.tg .tg-7803{
|
||||
color:#ffffff;
|
||||
text-align:left;
|
||||
vertical-align:top
|
||||
}
|
||||
.tg .tg-0lax{
|
||||
text-align:left;
|
||||
vertical-align:top
|
||||
}
|
||||
.tg .tg-0pky{
|
||||
border-color:inherit;
|
||||
text-align:left;
|
||||
vertical-align:top
|
||||
}
|
||||
.tg img{
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
li{
|
||||
list-style-type: none;
|
||||
}
|
||||
ul{
|
||||
margin-left: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
button{
|
||||
background-color: transparent;
|
||||
border: 0px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body{
|
||||
display: grid;
|
||||
grid-template-areas: "navBar content";
|
||||
grid-template-columns: 20% 80%;
|
||||
}
|
||||
.navBar{
|
||||
grid-area: navBar;
|
||||
background-color: #383F51;
|
||||
color: #ffffff;
|
||||
height: 1024px;
|
||||
}
|
||||
.navBar-header{
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
filter: drop-shadow(10px 35px 25px rgba(0, 0, 0, 0.25));
|
||||
background: #383F51;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-family: 'Source Serif 4';
|
||||
font-size: 35px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
|
||||
}
|
||||
.navBarMenu li{
|
||||
padding-left: 30px;
|
||||
padding-top: 30px;
|
||||
color: #FFF;
|
||||
font-family: Jost;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.navBar a{
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.content{
|
||||
display: grid;
|
||||
grid-area: content;
|
||||
grid-template-areas: "contentNav" "contentTable";
|
||||
grid-template-rows: 10% 90%;
|
||||
}
|
||||
.contentNav{
|
||||
grid-area: contentNav;
|
||||
display: grid;
|
||||
grid-template-areas: "contentNav-Amount contentNav-AddButton contentNav-DeleteButton";
|
||||
justify-items: start;
|
||||
grid-template-columns: 15% 20% 20%;
|
||||
padding-left: 70px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.contentNav-Amount{
|
||||
grid-area: contentNav-Amount;
|
||||
}
|
||||
.contentNav-AddButton{
|
||||
grid-area: contentNav-AddButton;
|
||||
border-radius: 24px;
|
||||
width: 157px;
|
||||
height: 41px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-feature-settings: 'clig' off, 'liga' off;
|
||||
font-family: Jost;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
background: #6052f6 !important;
|
||||
}
|
||||
.contentNav-DeleteButton{
|
||||
grid-area: contentNav-DeleteButton;
|
||||
border-radius: 24px;
|
||||
width: 157px;
|
||||
height: 41px;
|
||||
color: #FFF;
|
||||
|
||||
text-align: center;
|
||||
font-feature-settings: 'clig' off, 'liga' off;
|
||||
font-family: Jost;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
background: #E72727 !important;
|
||||
}
|
||||
.contentTable{
|
||||
grid-area: contentTable;
|
||||
padding-left: 50px;
|
||||
}
|
||||
@media (max-width: 767px){
|
||||
body {
|
||||
grid-template-columns: 30% 70%;
|
||||
}
|
||||
|
||||
.navBar-header{
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.navBarMenu li {
|
||||
padding-left: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
56
styles/modal.css
Normal file
@ -0,0 +1,56 @@
|
||||
.modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 99998;
|
||||
background-color: rgba(0, 0, 0, 0.7 );
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .4s, visibility .4s;
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
position: relative;
|
||||
max-width: 500px;
|
||||
padding: 50px;
|
||||
z-index: 1;
|
||||
margin: 30px 15px;
|
||||
background-color: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.15);
|
||||
transform: scale(0);
|
||||
transition: transform .8s;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-close svg path {
|
||||
transition: fill .4s;
|
||||
}
|
||||
|
||||
.modal-close:hover svg path {
|
||||
fill: rgb(175, 0, 0);
|
||||
}
|
||||
|
||||
.modal.open {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal.open .modal-box {
|
||||
transform: scale(1);
|
||||
}
|
120
styles/styleCatalog.css
Normal file
@ -0,0 +1,120 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #66442B;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #452A21;
|
||||
}
|
||||
|
||||
.nav-item svg path {
|
||||
transition: fill .4s;
|
||||
}
|
||||
|
||||
.nav-item:hover svg path {
|
||||
fill: #79584c;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-family: 'Jost', sans-serif;
|
||||
font-size: 24px;
|
||||
margin-right: 25px;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.nav-link:hover{
|
||||
color: #79584c !important;
|
||||
}
|
||||
|
||||
.book {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
flex: 0 0 calc(25% - 30px);
|
||||
}
|
||||
|
||||
.book img {
|
||||
max-width: 60%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.book h3 {
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-family: Jost;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
line-height: normal;
|
||||
margin-bottom: 10px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.book button {
|
||||
width: 80%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
a.btn-custom {
|
||||
border-radius: 8px;
|
||||
width: 250px;
|
||||
height: 50px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #452B21;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: Jost;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
border: 2px solid #452B21;
|
||||
}
|
||||
|
||||
a.btn-custom:hover {
|
||||
background-color: #66442B;
|
||||
border: 2px solid #66442B;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-family: 'Jost', sans-serif;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 5px 0;
|
||||
background-color: #452A21 !important;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.about {
|
||||
margin-top: 20px;
|
||||
color: white;
|
||||
font-family: Jost;
|
||||
text-align:justify;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
a.btn-custom {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.about {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
80
styles/styleMain.css
Normal file
@ -0,0 +1,80 @@
|
||||
body {
|
||||
background-image: url("/images/background.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-family: 'Jost', sans-serif;
|
||||
font-size: 24px;
|
||||
margin-right: 25px;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.nav-link:hover{
|
||||
color: #79584c !important;
|
||||
}
|
||||
|
||||
.nav-item svg path {
|
||||
transition: fill .4s;
|
||||
}
|
||||
|
||||
.nav-item:hover svg path {
|
||||
fill: #79584c;
|
||||
}
|
||||
|
||||
.display-4 {
|
||||
color: #FFF;
|
||||
font-family: 'Source Serif 4';
|
||||
font-size: 96px;
|
||||
font-style: normal;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: white;
|
||||
font-family: 'Source Serif 4';
|
||||
text-align: right;
|
||||
font-size: 24px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
color: white !important;
|
||||
font-family: 'Source Serif 4';
|
||||
text-align: right;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-family: 'Jost', sans-serif;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 5px 0;
|
||||
background-color: #452A21 !important;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.nav-link {
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.display-4 {
|
||||
font-size: 36px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 18px !important;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
152
styles/styleSigh.css
Normal file
@ -0,0 +1,152 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #452B21;
|
||||
}
|
||||
|
||||
.nav-item svg path {
|
||||
transition: fill .4s;
|
||||
}
|
||||
|
||||
.nav-item:hover svg path {
|
||||
fill: #79584c;
|
||||
}
|
||||
|
||||
.background-image {
|
||||
background-image: url("/images/backgroung_sign.png");
|
||||
background-size: cover;
|
||||
width: 50%;
|
||||
height: 100vh;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sign-in-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.sign-up-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
width: 500px;
|
||||
height: 475px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.custom-h {
|
||||
color: #000;
|
||||
text-align: center;
|
||||
font-family: Jost;
|
||||
font-size: 50px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
line-height: normal;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
border-radius: 8px;
|
||||
font-size: 17px;
|
||||
width: 450px;
|
||||
height: 60px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 8px;
|
||||
font-size: 17px;
|
||||
width: 450px;
|
||||
height: 60px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
border-radius: 8px;
|
||||
width: 450px;
|
||||
height: 60px;
|
||||
background-color: #452B21;
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: Jost;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
border: 2px solid #452B21;
|
||||
}
|
||||
|
||||
.btn-custom:hover {
|
||||
background-color: #66442B;
|
||||
border: 2px solid #66442B;
|
||||
}
|
||||
|
||||
.custom-text {
|
||||
color: #8C8C8C;
|
||||
text-align: center;
|
||||
font-family: Jost;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.custom-a {
|
||||
color: #452B21;
|
||||
font-family: Jost;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.custom-a:hover {
|
||||
color: #9c614a;
|
||||
}
|
||||
|
||||
.error {
|
||||
border-color: red !important;
|
||||
background-color: rgba(255, 222, 222, 0.26) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sign-in-container {
|
||||
width: 290px;
|
||||
height: 375px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sign-up-container {
|
||||
width: 290px;
|
||||
height: 425px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.custom-h {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
width: 80%;
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|