feat(landing): add change preview background

src/js/main.js

@@ -447,11 +447,43 @@ document.querySelector('#app').innerHTML = `
           </footer>
         </div>
       </div>
-      <div class="preview">
+      <div x-data="
+      {
+        currentSlide: 0,
+        slides: [
+          '/img/previews/ascent.png',
+          '/img/previews/bind.png',
+          '/img/previews/haven.png',
+          '/img/previews/split.png',
+          '/img/previews/sunset.png'
+        ],
+        thumbnails: [
+          '/img/previews/thumbnails/ascent.png',
+          '/img/previews/thumbnails/bind.png',
+          '/img/previews/thumbnails/haven.png',
+          '/img/previews/thumbnails/split.png',
+          '/img/previews/thumbnails/sunset.png'
+        ]
+      }"
+       class="preview">
         <div id="divframe">
           <h1 x-show="!search" class="no_iframe">Your preview will be located here. Please enter your profile to see it.</h1>
           <div x-transition x-show="search" title="" id="iframe"></div>
         </div>
+        <div class="preview__background">
+          <template x-for="(slide, index) in slides" :key="index">
+            <div class="preview__background__image" :style="index === currentSlide ? 'opacity: 1': 'opacity: 0'">
+              <img :src="slide" alt="Слайд"/>
+            </div>
+          </template>
+        </div>
+        <div class="preview__thumbnails">
+          <template x-for="(slide, index) in thumbnails" :key="index">
+            <div @click="currentSlide = index" class="thumbnail" :class="{ 'active': index === currentSlide }">
+              <img :src="slide" alt="Миниатюра" />
+            </div>
+          </template>
+        </div>
       </div>
       <div x-cloak x-show="alert" class="alert" x-transition>
         <span>

src/scss/main.scss

@@ -414,13 +414,9 @@ input.nickname {
 }
 .preview {
 	flex: 1;
-	background-image: url("/img/previews/sunset.png");
 	background-color: $background-color_6;
 	width: 100%;
 	height: 100%;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
 	position: relative;
 	overflow: hidden;
 	&::after {
@@ -433,6 +429,50 @@ input.nickname {
 		background: linear-gradient(270deg, rgba(0,0,0,0.5) 0%, $background-color_6 100%);
 		backdrop-filter: blur(10px);
 	}
+
+	.preview__background {
+		.preview__background__image {
+			transition: all 0.2s;
+			img {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				top: 0;
+				left: 0;
+				object-fit: cover;
+			}
+		}
+	}
+
+	.preview__thumbnails {
+		$preview_thumbnails_padding: 25px;
+		position: absolute;
+		right: $preview_thumbnails_padding;
+		bottom: $preview_thumbnails_padding;
+		z-index: 1;
+		display: flex;
+		gap: 16px;
+
+		.thumbnail {
+			cursor: pointer;
+			border-radius: 50%;
+			line-height: 0;
+			transition: all 0.2s;
+
+			img {
+				$thumnail_size: 40px;
+				width: $thumnail_size;
+				height: $thumnail_size;
+				border-radius: 50%;
+				object-fit: cover;
+				backdrop-filter: blur(30px);
+			}
+
+			&.active {
+				box-shadow: 0 0 0 3px $background-color_8;
+			}
+		}
+	}
 }
 .generate {
 	display: flex;