|
|
@@ -0,0 +1,143 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <link rel="stylesheet" href="./assets/styles/style.css">
|
|
|
+ <title>Отзывы</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="big_con" style="height: 100vh; display: flex; justify-content: center; align-items: center;">
|
|
|
+ <div class="block_auth" style="width: 600px; border-radius: 0;">
|
|
|
+ <h2 style="color: black; padding-bottom: 10px;">ОТЗЫВЫ</h2>
|
|
|
+ <div class="review-container">
|
|
|
+ <div class="review-item">
|
|
|
+ <div class="profile-picture">
|
|
|
+ <img src="/assets/imgs/чел.jpg" alt="Профиль">
|
|
|
+ </div>
|
|
|
+ <div class="review-info">
|
|
|
+ <p class="review-name">Иван Иванов</p>
|
|
|
+ <p class="review-text">Отзыв об автосалоне импортных машин.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="arrow-container" style="margin-top: 20px;">
|
|
|
+ <span class="arrow left-arrow" onclick="showPreviousReview()"><</span>
|
|
|
+ <span class="arrow right-arrow" onclick="showNextReview()">></span>
|
|
|
+ </div>
|
|
|
+ <span class="close" onclick="window.location.href='main.html'">×</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ const reviews = [
|
|
|
+ { name: "Иван Иванов", text: "Отзыв об автосалоне импортных машин.", avatar: "avatar.jpg" },
|
|
|
+ { name: "Петр Петров", text: "Отличный сервис, рекомендую!", avatar: "avatar2.jpg" },
|
|
|
+ // Добавьте больше отзывов
|
|
|
+ ];
|
|
|
+
|
|
|
+ let currentReviewIndex = 0;
|
|
|
+
|
|
|
+ function showPreviousReview() {
|
|
|
+ currentReviewIndex = (currentReviewIndex - 1 + reviews.length) % reviews.length;
|
|
|
+ updateReview();
|
|
|
+ }
|
|
|
+
|
|
|
+ function showNextReview() {
|
|
|
+ currentReviewIndex = (currentReviewIndex + 1) % reviews.length;
|
|
|
+ updateReview();
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateReview() {
|
|
|
+ const review = reviews[currentReviewIndex];
|
|
|
+ const reviewItem = document.querySelector('.review-item');
|
|
|
+ reviewItem.querySelector('.review-name').textContent = review.name;
|
|
|
+ reviewItem.querySelector('.review-text').textContent = review.text;
|
|
|
+ reviewItem.querySelector('.profile-picture img').src = review.avatar;
|
|
|
+ }
|
|
|
+
|
|
|
+ updateReview();
|
|
|
+ </script>
|
|
|
+ <style>
|
|
|
+ .big_con {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .block_auth {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30px;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
|
+ width: 600px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .review-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .review-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 10px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .profile-picture {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .profile-picture img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .review-info {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .review-name {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.2em;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .review-text {
|
|
|
+ font-size: 1em;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #777;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ font-size: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #777;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</body>
|
|
|
+</html>
|
unknown
