Skip to content

Commit

Permalink
admin panel
Browse files Browse the repository at this point in the history
  • Loading branch information
Hanna committed Oct 24, 2024
1 parent 9e1cc8a commit 4a8cfe3
Show file tree
Hide file tree
Showing 12 changed files with 509 additions and 135 deletions.
1 change: 1 addition & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet"

/>
</head>
<body>
Expand Down
34 changes: 34 additions & 0 deletions admin.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Admin Panel</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div class="navigation-list">
<ul class="dash-under-link">
<li class="nav__link"><a href="index.html" class="active">Головна</a></li>
<li class="nav__link"><a href="about.html">Про нас</a></li>
<li class="nav__link"><a href="#">Портфоліо</a></li>
<li class="nav__link"><a href="#">Послуги</a></li>
<li class="nav__link"><a href="#">Відгуки</a></li>
<li class="nav__link"><a href="admin.html">Панель Адміністратора</a></li>
</ul>
</div>

<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="photo" name="photo" accept="image/*" required />
<input type="text" id="description" name="description" placeholder="Опис" required /> <!-- Поле для опису -->
<input type="number" id="price" name="price" placeholder="Ціна" step="0.01" required /> <!-- Поле для ціни -->
<button type="submit">Завантажити</button>
</form>


<h2>Список фото</h2>
<div id="photoList" class="testimonials__row"></div>

<script src="./js/script.js"></script>
</body>
</html>
76 changes: 76 additions & 0 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1030,6 +1030,82 @@ body {
color: rgb(46, 45, 45);
}
}
/* Основні стилі для галереї */
.gallery {
padding: 40px 0; /* Відступи для галереї */
text-align: center; /* Вирівнювання тексту по центру */
background-color: #f9f9f9; /* Світло-сірий фон для галереї */
}

.gallery h2 {
font-size: 2.5em; /* Розмір заголовка */
margin-bottom: 20px; /* Відступ знизу */
font-weight: bold; /* Жирний шрифт */
color: #333; /* Колір заголовка */
}

#photosContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex; /* Використовуємо флекс для вирівнювання зображень */
-ms-flex-wrap: wrap;
flex-wrap: wrap; /* Дозволяє зображенням переноситися на новий рядок */
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; /* Центруємо зображення */
}

.photo-card {
margin: 15px; /* Відступи між картками */
border: 1px solid #ddd; /* Рамка навколо картки */
border-radius: 8px; /* Кути рамки */
overflow: hidden; /* Приховуємо зайве */
max-width: 250px; /* Максимальна ширина картки */
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s; /* Анімація при наведенні */
background-color: #fff; /* Білий фон для картки */
}

.photo-card-wrapper {
overflow: hidden;
}

.photo-card img {
max-width: 100%; /* Зображення займає всю ширину картки */
border-bottom: 1px solid #ddd; /* Рамка під зображенням */
-o-object-fit: cover;
object-fit: cover;
width: 100%;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
max-height: 220px;
}
.photo-card img:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

.photo-card p {
margin: 10px; /* Відступи для параграфів */
font-size: 0.9em; /* Розмір шрифту для опису та ціни */
color: #666; /* Колір тексту */
}

.photo-card:hover {
-webkit-box-shadow: 0px 10px 52px 0px rgba(0, 0, 0, 0.08);
box-shadow: 0px 10px 52px 0px rgba(0, 0, 0, 0.08);
}

.photo-card .card-testimonial__name {
font-weight: bold; /* Жирний шрифт для назви декору */
}

.photo-card .card-testimonial__city {
color: #007BFF; /* Колір ціни */
}

@media screen and (max-width: 1280px) {
.container {
max-width: 95%;
Expand Down
188 changes: 55 additions & 133 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,66 +16,65 @@
/>
</head>
<body>
<div class="background">
<nav class="nav">
<div class="container">
<div class="nav__row">
<div class="logo">
<img src="./img/icons/logo2.png" alt="logo" />

<!-- <span>West Decor</span> -->
</div>
<div class="background">
<nav class="nav">
<div class="container">
<div class="nav__row">
<div class="logo">
<img src="./img/icons/logo2.png" alt="logo" />
</div>

<!--Hamburger menu-->
<button id="hamburgerBtn" class="hamburger">&#9776;</button>
<!--Hamburger menu-->
<button id="hamburgerBtn" class="hamburger">&#9776;</button>

<div class="navigation-list">
<ul class="dash-under-link">
<li class="nav__link">
<a href="index.html" class="active">Головна</a>
</li>
<li class="nav__link"><a href="about.html">Про нас</a></li>
<li class="nav__link"><a href="#">Портфоліо</a></li>
<li class="nav__link"><a href="#">Послуги</a></li>
<li class="nav__link"><a href="#">Відгуки</a></li>
</ul>
<div class="navigation-list">
<ul class="dash-under-link">
<li class="nav__link">
<a href="index.html" class="active">Головна</a>
</li>
<li class="nav__link"><a href="about.html">Про нас</a></li>
<li class="nav__link"><a href="#">Портфоліо</a></li>
<li class="nav__link"><a href="#">Послуги</a></li>
<li class="nav__link"><a href="#">Відгуки</a></li>
<li class="nav__link"><a href="admin.html">Панель Адміністратора</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</nav>

<main class="content">
<header class="header">
<div class="container">
<div class="header__row">
<div class="header__text">
<h1 class="header__title">
Декоративна штукатурка <br />Івано-Франківськ <br />Львів
</h1>
<p>
• Мистецтво на стінах вашого дому <br />
• Безкоштовні взірці, під ваш об’єкт <br />
• знижки на матеріал від 15% ,при купівлі від 200 кг матеріалу
30%
</p>
<main class="content">
<header class="header">
<div class="container">
<div class="header__row">
<div class="header__text">
<h1 class="header__title">
Декоративна штукатурка <br />Івано-Франківськ <br />Львів
</h1>
<p>
• Мистецтво на стінах вашого дому <br />
• Безкоштовні взірці, під ваш об’єкт <br />
• знижки на матеріал від 15% ,при купівлі від 200 кг матеріалу 30%
</p>

<div class="buttons__row">
<a href="#testimonials" class="button">Каталог продукції</a>
<a href="#tell-me" class="button button--call">Замовити дзвінок</a>
<div class="buttons__row">
<a href="#testimonials" class="button">Каталог продукції</a>
<a href="#tell-me" class="button button--call">Замовити дзвінок</a>
</div>
</div>
<div class="header__img">
<img src="./img/header/moon.png" alt="header" />
</div>
</div>
<div class="header__img">
<img src="./img/header/moon.png" alt="header" />
</div>
</div>
</div>
</header>
</div>
</header>
</div>

<section class="tell-me" id="tell-me">
<div class="container">
<div class="tell-me__block">
<div class="tell-me__row">
<h1>Замовити констультацію</h1>
<h1>Замовити консультацію</h1>
<form action="" id="consultationForm">
<div class="tell-me__inputs">
<label for="phone">
Expand Down Expand Up @@ -230,82 +229,6 @@ <h2 class="title">Варіанти декору</h2>
</div>
</a>

<a href="#!" class="card-testimonial">
<div class="card-testimonial__img-wrapper">
<button
class="card-testimonial__btn-play"
onclick="confirmCall('+380 95 716 87 47')"
>
<svg
class="card-testimonial__btn-svg"
version="1.0"
xmlns="http://www.w3.org/2000/svg"
width="50"
height="50"
viewBox="0 0 1280.000000 1280.000000"
preserveAspectRatio="xMidYMid meet"
>
<circle cx="640" cy="640" r="640" />

<g
transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
fill="#000000"
stroke="none"
>
<path
d="M6145 12794 c-216 -13 -391 -28 -530 -45 -995 -122 -1927 -467 -2760
-1022 -907 -604 -1648 -1433 -2146 -2402 -395 -769 -615 -1549 -690 -2450 -17
-193 -17 -757 0 -950 75 -901 295 -1681 690 -2450 610 -1187 1579 -2156 2766
-2766 769 -395 1549 -615 2450 -690 193 -17 757 -17 950 0 901 75 1681 295
2450 690 1187 610 2156 1579 2766 2766 395 769 615 1549 690 2450 17 193 17
757 0 950 -75 901 -295 1681 -690 2450 -610 1187 -1579 2156 -2766 2766 -753
387 -1531 610 -2390 684 -164 15 -666 27 -790 19z m739 -779 c1310 -112 2518
-670 3465 -1599 979 -963 1558 -2205 1672 -3591 16 -193 16 -657 0 -850 -114
-1385 -693 -2628 -1672 -3591 -961 -943 -2169 -1494 -3524 -1605 -193 -16
-657 -16 -850 0 -1385 114 -2628 693 -3591 1672 -943 961 -1494 2169 -1605
3524 -16 193 -16 657 0 850 114 1385 693 2628 1672 3591 878 862 1988 1408
3189 1568 416 55 832 66 1244 31z"
/>
<path
d="M5060 10738 c-55 -15 -679 -379 -716 -418 -85 -87 -103 -206 -47
-315 67 -129 1153 -2002 1181 -2035 57 -68 178 -105 267 -81 46 12 662 365
715 409 71 59 108 190 78 277 -8 22 -276 495 -596 1050 -471 817 -591 1018
-628 1052 -68 64 -164 87 -254 61z"
/>
<path
d="M3942 9868 c-216 -132 -322 -210 -434 -317 -341 -326 -432 -664 -362
-1346 165 -1616 1352 -3892 2728 -5232 360 -351 731 -631 1033 -779 191 -94
332 -132 523 -141 257 -12 504 61 877 261 113 60 151 85 147 96 -5 13 -1156
2013 -1190 2068 l-15 22 -39 -20 c-69 -35 -183 -69 -275 -80 -215 -27 -466 49
-712 216 -587 397 -1121 1268 -1263 2059 -81 448 -20 809 175 1038 33 39 144
132 166 139 7 2 -220 406 -591 1049 -331 574 -605 1047 -609 1052 -4 4 -75
-35 -159 -85z"
/>
<path
d="M8220 5330 c-55 -8 -74 -18 -428 -222 -156 -90 -299 -179 -319 -198
-72 -71 -101 -183 -71 -271 17 -50 1155 -2025 1197 -2078 71 -90 212 -117 326
-62 86 41 614 347 655 380 56 45 90 120 90 202 0 37 -5 81 -12 96 -34 80
-1175 2043 -1206 2075 -61 64 -141 91 -232 78z"
/>
</g>
</svg>
</button>
<img
src="./img/testimonials/2.jpg"
alt="img"
class="card-testimonial__img"
/>
</div>
<div class="card-testimonial__body">
<p class="card-testimonial__text">
Декоративне покриття для внутрішніх робіт дозволяє домогтися
імітації натурального каменю і скелястих порід.
</p>
<p class="card-testimonial__name">Скеля</p>
<p class="card-testimonial__city">Ціна декору</p>
</div>
</a>

<a href="#!" class="card-testimonial">
<div class="card-testimonial__img-wrapper">
<button
Expand Down Expand Up @@ -536,6 +459,12 @@ <h2 class="title">Варіанти декору</h2>
</div>
</div>
</section>

<!-- Новий розділ Галерея -->
<section class="gallery" id="gallery">
<h2>Галерея</h2>
<div id="photosContainer"></div>
</section>
</main>

<footer class="footer">
Expand All @@ -545,8 +474,6 @@ <h2 class="title">Варіанти декору</h2>
<div class="footer__logo">
<div class="logo">
<img src="./img/icons/logo.png" alt="logo" />

<!-- <span>Декор</span> -->
</div>
</div>

Expand All @@ -571,8 +498,8 @@ <h2 class="title">Варіанти декору</h2>
<a href="#!">
<img src="./img/social/linkedin.svg" alt="ln" />
</a>
</div>
</div>
</div>

<div class="footer__nav">
<div class="footer__nav-block">
Expand All @@ -583,6 +510,7 @@ <h4 class="footer__nav-block-title">Навігація</h4>
<li><a href="#!">Портфоліо</a></li>
<li><a href="#!">Послуги</a></li>
<li><a href="#!">Відгуки</a></li>
<!--Admin-->
</ul>
</div>

Expand Down Expand Up @@ -626,13 +554,7 @@ <h4 class="footer__nav-block-title">Контакти</h4>
</svg>
</button>

<!-- <div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div> -->
<!-- шось я добавив -->

<script src="./js/script.js"></script>

</body>
</html>
14 changes: 14 additions & 0 deletions js/photos.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
[
{
"name": "1729782003971.jpg",
"url": "http://localhost:3000/uploads/1729782003971.jpg",
"description": "Феєрія ",
"price": "1"
},
{
"name": "1729782033543.jpg",
"url": "http://localhost:3000/uploads/1729782033543.jpg",
"description": "о",
"price": "2"
}
]
Loading

0 comments on commit 4a8cfe3

Please sign in to comment.