First

stepancar-web-programming · Feb 20, 2024 · d108ea3 · d108ea3
commit d108ea3
Show file tree

Hide file tree

Showing 20 changed files with 570 additions and 0 deletions.
diff --git a/content.css b/content.css
@@ -0,0 +1,173 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #f1f4fd;
+}
+.container {
+  max-width: 1200px;
+  width: 95%;
+}
+.slider-wrapper {
+  position: relative;
+}
+.slider-wrapper .slide-button {
+  position: absolute;
+  top: 50%;
+  outline: none;
+  border: none;
+  height: 50px;
+  width: 50px;
+  z-index: 5;
+  color: #fff;
+  display: flex;
+  cursor: pointer;
+  font-size: 2.2rem;
+  background: #000;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transform: translateY(-50%);
+}
+.slider-wrapper .slide-button:hover {
+  background: #404040;
+}
+.slider-wrapper .slide-button#prev-slide {
+  left: -25px;
+  display: none;
+}
+.slider-wrapper .slide-button#next-slide {
+  right: -25px;
+}
+.slider-wrapper .image-list {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 18px;
+  font-size: 0;
+  list-style: none;
+  margin-top: 100px;
+  margin-bottom: 30px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.slider-wrapper .image-list::-webkit-scrollbar {
+  display: none;
+}
+.slider-wrapper .image-list .image-item {
+  width: 325px;
+  height: 400px;
+  object-fit: cover;
+}
+.container .slider-scrollbar {
+  height: 24px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.slider-scrollbar .scrollbar-track {
+  background: #ccc;
+  width: 100%;
+  height: 2px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  position: relative;
+}
+.slider-scrollbar:hover .scrollbar-track {
+  height: 4px;
+}
+.slider-scrollbar .scrollbar-thumb {
+  position: absolute;
+  background: #000;
+  top: 0;
+  bottom: 0;
+  width: 50%;
+  height: 100%;
+  cursor: grab;
+  border-radius: inherit;
+}
+.slider-scrollbar .scrollbar-thumb:active {
+  cursor: grabbing;
+  height: 8px;
+  top: -2px;
+}
+.slider-scrollbar .scrollbar-thumb::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -10px;
+  bottom: -10px;
+}
+
+.return-btn {
+  position: fixed;
+  top: 20px; 
+  left: 20px; 
+  z-index: 1000; 
+}
+
+.return-btn img {
+  width: 50px; 
+  height: auto; 
+  border: none; 
+}
+
+#scrollButton {
+  position: absolute; 
+  bottom: 20px; 
+  left: 50%; 
+  transform: translateX(-50%); 
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+#scrollButton img {
+  width: 50px; 
+}
+
+.video-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 150px; 
+  margin-bottom: 70px;
+}
+
+video {
+  width: 80%; 
+  max-width: 100%; 
+  height: auto;
+}
+
+@media only screen and (max-width: 1023px) {
+  .slider-wrapper .slide-button {
+    display: none !important;
+  }
+  .slider-wrapper .image-list {
+    gap: 10px;
+    margin-bottom: 15px;
+    scroll-snap-type: x mandatory;
+  }
+  .slider-wrapper .image-list .image-item {
+    width: 280px;
+    height: 380px;
+  }
+  .slider-scrollbar .scrollbar-thumb {
+    width: 20%;
+  }
+  .video-container {
+    margin-top: 150px; 
+    margin-bottom: 70px;
+  }
+
+  video {
+    width: 100%;
+  }
+}
diff --git a/content.html b/content.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Котики!!!</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0"
+    />
+    <link rel="stylesheet" href="content.css" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <div class="container">
+      <a href="index.html" class="return-btn">
+        <img src="res/home.png" alt="Вернуться на главную" />
+      </a>
+      <div class="slider-wrapper">
+        <button id="prev-slide" class="slide-button material-symbols-rounded">
+          chevron_left
+        </button>
+        <ul class="image-list">
+          <img class="image-item" src="res/1.jpg" alt="img-1" />
+          <img class="image-item" src="res/2.jpg" alt="img-2" />
+          <img class="image-item" src="res/3.jpg" alt="img-3" />
+          <img class="image-item" src="res/4.jpg" alt="img-4" />
+          <img class="image-item" src="res/5.jpg" alt="img-5" />
+          <img class="image-item" src="res/6.jpg" alt="img-6" />
+          <img class="image-item" src="res/7.jpg" alt="img-7" />
+          <img class="image-item" src="res/8.jpg" alt="img-8" />
+          <img class="image-item" src="res/9.jpg" alt="img-9" />
+          <img class="image-item" src="res/10.jpg" alt="img-10" />
+        </ul>
+        <button id="next-slide" class="slide-button material-symbols-rounded">
+          chevron_right
+        </button>
+      </div>
+      <div class="slider-scrollbar">
+        <div class="scrollbar-track">
+          <div class="scrollbar-thumb"></div>
+        </div>
+      </div>
+      <button id="scrollButton" onclick="scrollToBottom()">
+        <img src="res/down.png" alt="Scroll Down" />
+      </button>
+      <div class="video-container">
+        <video controls poster="res/post.jpg">
+          <source src="res/video.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Про меня</title>
+
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
+    />
+
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div class="hero">
+      <div class="container hero__container">
+        <div class="hero__about">
+          <h1 class="hero__title">Артем</h1>
+          <p class="hero__description">
+            Привет, я учусь в ИТМО. Можете написать мне в
+            <a class="hero__link" href="https://t.me/cumsayhello">телеграм.</a>
+          </p>
+
+          <p class="hero__description">
+            Я очень люблю котиков, поэтому <a class="hero__link" href="content.html">тут</a>
+            вы можете посмотреть видео и полистать фото c ними.
+          </p>
+        </div>
+
+        <div class="hero__box">
+          <img class="hero__box-img" src="res/me.png" alt="Это я" />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/res/1.jpg b/res/1.jpg
diff --git a/res/10.jpg b/res/10.jpg
diff --git a/res/2.jpg b/res/2.jpg
diff --git a/res/3.jpg b/res/3.jpg
diff --git a/res/4.jpg b/res/4.jpg
diff --git a/res/5.jpg b/res/5.jpg
diff --git a/res/6.jpg b/res/6.jpg
diff --git a/res/7.jpg b/res/7.jpg
diff --git a/res/8.jpg b/res/8.jpg
diff --git a/res/9.jpg b/res/9.jpg
diff --git a/res/down.png b/res/down.png
diff --git a/res/home.png b/res/home.png
diff --git a/res/me.png b/res/me.png
diff --git a/res/post.jpg b/res/post.jpg
diff --git a/res/video.mp4 b/res/video.mp4
diff --git a/script.js b/script.js
@@ -0,0 +1,76 @@
+const initSlider = () => {
+  const imageList = document.querySelector(".slider-wrapper .image-list");
+  const slideButtons = document.querySelectorAll(
+    ".slider-wrapper .slide-button"
+  );
+  const sliderScrollbar = document.querySelector(
+    ".container .slider-scrollbar"
+  );
+  const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb");
+  const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth;
+
+  scrollbarThumb.addEventListener("mousedown", (e) => {
+    const startX = e.clientX;
+    const thumbPosition = scrollbarThumb.offsetLeft;
+    const maxThumbPosition =
+      sliderScrollbar.getBoundingClientRect().width -
+      scrollbarThumb.offsetWidth;
+
+    const handleMouseMove = (e) => {
+      const deltaX = e.clientX - startX;
+      const newThumbPosition = thumbPosition + deltaX;
+      const boundedPosition = Math.max(
+        0,
+        Math.min(maxThumbPosition, newThumbPosition)
+      );
+      const scrollPosition =
+        (boundedPosition / maxThumbPosition) * maxScrollLeft;
+
+      scrollbarThumb.style.left = `${boundedPosition}px`;
+      imageList.scrollLeft = scrollPosition;
+    };
+    const handleMouseUp = () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  });
+
+  slideButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const direction = button.id === "prev-slide" ? -1 : 1;
+      const scrollAmount = imageList.clientWidth * direction;
+      imageList.scrollBy({ left: scrollAmount, behavior: "smooth" });
+    });
+  });
+
+  const handleSlideButtons = () => {
+    slideButtons[0].style.display = imageList.scrollLeft <= 0 ? "none" : "flex";
+    slideButtons[1].style.display =
+      imageList.scrollLeft >= maxScrollLeft ? "none" : "flex";
+  };
+
+  const updateScrollThumbPosition = () => {
+    const scrollPosition = imageList.scrollLeft;
+    const thumbPosition =
+      (scrollPosition / maxScrollLeft) *
+      (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth);
+    scrollbarThumb.style.left = `${thumbPosition}px`;
+  };
+
+  imageList.addEventListener("scroll", () => {
+    updateScrollThumbPosition();
+    handleSlideButtons();
+  });
+};
+
+function scrollToBottom() {
+  window.scrollTo({
+    top: document.body.scrollHeight,
+    behavior: "smooth",
+  });
+}
+
+window.addEventListener("resize", initSlider);
+window.addEventListener("load", initSlider);