add some elements

WebArtWork · Nov 21, 2024 · c88eb0f · c88eb0f
1 parent 2756e9b
commit c88eb0f
Show file tree

Hide file tree

Showing 5 changed files with 278 additions and 1 deletion.
diff --git a/css/index.css b/css/index.css
diff --git a/css/scss/components/_w-file.scss b/css/scss/components/_w-file.scss
@@ -0,0 +1,57 @@
+.file{
+    &-wrapper{
+        max-width: 650px;
+        padding: 80px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 3px dashed #ffffff94;
+        border-radius: 8px;
+    }
+    &__content{
+        text-align: center;
+    }
+    &__title{
+        font-size: 24px;
+        font-weight: 700;
+    }
+    &__or{
+        padding: 15px 0;
+        color: #B0B0B0;
+    }
+}
+
+.file-upload {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.file-upload__input {
+    display: none; /* скрываем стандартный input */
+}
+
+.file-upload__button {
+    background-color: var(--c-primary-hover);
+    color: white;
+    padding: 12px 50px;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 5px;
+    border: none;
+    text-align: center;
+    transition: all .3s;
+    color: #000;
+}
+
+.file-upload__button:hover {
+    background-color: var(--c-primary-cursor);
+}
+
+.file-upload__filename {
+    margin-top: 10px;
+    font-size: 16px;
+    font-weight: 700;
+    color: #ffffff;
+}
diff --git a/css/scss/components/_w-slider.scss b/css/scss/components/_w-slider.scss
@@ -0,0 +1,92 @@
+.slider {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    background-color: #fff;
+    border-radius: 8px;
+}
+
+/* Контейнер для слайдов */
+.slider__container {
+    display: flex;
+    transition: transform 0.5s ease-in-out;
+}
+
+/* Каждый слайд */
+.slider__slide {
+    min-width: 100%;
+    height: 300px;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    text-align: center;
+}
+
+.slider__slide--1 {
+    background-color: #ff6347;
+}
+
+.slider__slide--2 {
+    background-color: #4caf50;
+}
+
+.slider__slide--3 {
+    background-color: #1e90ff;
+}
+
+.slider__slide--4 {
+    background-color: #f39c12;
+}
+
+/* Кнопки перехода */
+.slider__button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: transparent;
+    color: rgba(255, 255, 255, 0.664);
+    border: none;
+    font-size: 2rem;
+    padding: 10px;
+    cursor: pointer;
+    z-index: 10;
+}
+
+.slider__button:hover {
+    color: rgb(255, 255, 255);
+}
+
+.slider__button--prev {
+    left: 10px;
+}
+
+.slider__button--next {
+    right: 10px;
+}
+
+/* Контейнер для точек */
+.slider__dots {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+}
+
+/* Точка */
+.slider__dot {
+    height: 5px;
+    width: 32px;
+    margin: 0 5px;
+    background-color: #ffffff98;
+    border-radius: 12px;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.slider__dot--active {
+    background-color: #ffffff;
+}
diff --git a/css/scss/index.scss b/css/scss/index.scss
@@ -26,6 +26,8 @@
 @use "components/w-select";
 @use "components/w-checkbox";
 @use "components/w-stats";
+@use "components/w-slider";
+@use "components/w-file";
 // ## ATOM
 @use "atom/display";
 @use "atom/margin";

diff --git a/pages/components/components.html b/pages/components/components.html
@@ -1085,6 +1085,132 @@ <h2>Stats</h2>
 		</div>
 	</div>
 </div>
+<div class="components-stats">
+	<h2>Slider</h2>
+	<div class="index-readme__item">
+		<div class="slider">
+			<div class="slider__container" id="slider">
+				<div class="slider__slide slider__slide--1">Слайд 1</div>
+				<div class="slider__slide slider__slide--2">Слайд 2</div>
+				<div class="slider__slide slider__slide--3">Слайд 3</div>
+				<div class="slider__slide slider__slide--4">Слайд 4</div>
+			</div>
+
+			<button class="slider__button slider__button--prev" id="prev">&#10094;</button>
+			<button class="slider__button slider__button--next" id="next">&#10095;</button>
+
+			<div class="slider__dots" id="dots-container">
+				<!-- Точки для навігації будуть додаватись динамічно -->
+			</div>
+		</div>
+
+		<script>
+			const slider = document.getElementById('slider');
+			const slides = document.querySelectorAll('.slider__slide');
+			const prevBtn = document.getElementById('prev');
+			const nextBtn = document.getElementById('next');
+			const dotsContainer = document.getElementById('dots-container');
+
+			let currentIndex = 0;
+
+			// Динамічно створюємо точки
+			slides.forEach((_, index) => {
+				const dot = document.createElement('span');
+				dot.classList.add('slider__dot');
+				dot.addEventListener('click', () => goToSlide(index));
+				dotsContainer.appendChild(dot);
+			});
+
+			// Оновлюємо активну точку
+			function updateDots() {
+				const dots = document.querySelectorAll('.slider__dot');
+				dots.forEach((dot, index) => {
+					dot.classList.remove('slider__dot--active');
+					if (index === currentIndex) {
+						dot.classList.add('slider__dot--active');
+					}
+				});
+			}
+
+			// Переходимо до слайду
+			function goToSlide(index) {
+				if (index < 0) {
+					currentIndex = slides.length - 1;
+				} else if (index >= slides.length) {
+					currentIndex = 0;
+				} else {
+					currentIndex = index;
+				}
+
+				slider.style.transform = `translateX(-${currentIndex * 100}%)`;
+				updateDots();
+			}
+
+			// Обробка кнопок "Попередній" та "Наступний"
+			prevBtn.addEventListener('click', () => goToSlide(currentIndex - 1));
+			nextBtn.addEventListener('click', () => goToSlide(currentIndex + 1));
+
+			// Ініціалізація слайдера
+			updateDots();
+
+
+		</script>
+	</div>
+
+
+</div>
+<div class="components-form">
+	<h2>File</h2>
+	<div class="index-readme__item">
+		<div class="file-wrapper">
+			<div class="file__content">
+				<div class="file__icon">
+					<svg width="100" height="101" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<g clip-path="url(#clip0_118_317)">
+						<path d="M80.625 42.0133C77.7917 27.6383 65.1667 16.8467 50 16.8467C37.9583 16.8467 27.5 23.68 22.2917 33.68C9.75 35.0133 0 45.6383 0 58.5133C0 72.305 11.2083 83.5133 25 83.5133H79.1667C90.6667 83.5133 100 74.18 100 62.68C100 51.68 91.4583 42.7633 80.625 42.0133ZM70.8333 54.3467L50 75.18L29.1667 54.3467H41.6667V37.68H58.3333V54.3467H70.8333Z" fill="url(#paint0_linear_118_317)"/>
+						</g>
+						<defs>
+						<linearGradient id="paint0_linear_118_317" x1="1.85714" y1="50.1799" x2="101" y2="50.1799" gradientUnits="userSpaceOnUse">
+						<stop stop-color="#F5E920"/>
+						<stop offset="1" stop-color="#ABA31E"/>
+						</linearGradient>
+						<clipPath id="clip0_118_317">
+						<rect width="100" height="100" fill="white" transform="translate(0 0.179688)"/>
+						</clipPath>
+						</defs>
+					</svg>					
+				</div>
+				<div class="file__title">
+					Drag & Drop to Upload File
+				</div>
+				<div class="file__or">
+					OR
+				</div>
+				<div class="file-upload">
+					<input type="file" id="fileInput" class="file-upload__input" />
+					<label for="fileInput" class="file-upload__button">Browse File</label>
+					<span id="fileName" class="file-upload__filename"></span>
+				</div>
+			</div>
+		</div>
+
+		<script>
+			const fileInput = document.getElementById('fileInput');
+			const fileNameSpan = document.getElementById('fileName');
+
+			// Обработчик события для отображения имени файла
+			fileInput.addEventListener('change', function() {
+				if (fileInput.files.length > 0) {
+					fileNameSpan.textContent = `Выбран файл: ${fileInput.files[0].name}`;
+				} else {
+					fileNameSpan.textContent = '';
+				}
+			});
+
+		</script>
+
+	</div>
+</div>
 <!--comitted-->
 <!--
 <div class="components-select">