Merge pull request #51 from KDT1-FE/KDT0_hyeminpark

Kdt0 hyeminpark
KDT1-FE · Jul 28, 2023 · 6f54d7a · 6f54d7a
2 parents 8894f39 + 4becc4d
commit 6f54d7a
Show file tree

Hide file tree

Showing 74 changed files with 1,335 additions and 0 deletions.
diff --git a/assets/add-to-playlist.png b/assets/add-to-playlist.png
diff --git a/assets/cover.png b/assets/cover.png
diff --git a/assets/event/Download_on_the_App_Store-400px.png b/assets/event/Download_on_the_App_Store-400px.png
diff --git a/assets/event/Get-it-on-Google-Play-400px.png b/assets/event/Get-it-on-Google-Play-400px.png
diff --git a/assets/event/video-tape.png b/assets/event/video-tape.png
diff --git a/assets/heart.png b/assets/heart.png
diff --git a/assets/icon/left.png b/assets/icon/left.png
diff --git a/assets/icon/right.png b/assets/icon/right.png
diff --git a/assets/loupe.png b/assets/loupe.png
diff --git a/assets/love.png b/assets/love.png
diff --git a/assets/magazine.png b/assets/magazine.png
diff --git a/assets/magazine/magazine1.png b/assets/magazine/magazine1.png
diff --git a/assets/magazine/magazine2.png b/assets/magazine/magazine2.png
diff --git a/assets/magazine/magazine3.png b/assets/magazine/magazine3.png
diff --git a/assets/magazine/magazine4.png b/assets/magazine/magazine4.png
diff --git a/assets/magazine/magazine5.png b/assets/magazine/magazine5.png
diff --git a/assets/magazine/magazine6.png b/assets/magazine/magazine6.png
diff --git a/assets/magazine/magazine7.png b/assets/magazine/magazine7.png
diff --git a/assets/magazine/new.png b/assets/magazine/new.png
diff --git a/assets/magazine/new2.png b/assets/magazine/new2.png
diff --git a/assets/magazine/omygirl.png b/assets/magazine/omygirl.png
diff --git a/assets/magazine/zerobase.png b/assets/magazine/zerobase.png
diff --git a/assets/mic.png b/assets/mic.png
diff --git a/assets/money.png b/assets/money.png
diff --git a/assets/music-player-back.png b/assets/music-player-back.png
diff --git a/assets/music-player-next.png b/assets/music-player-next.png
diff --git a/assets/music.png b/assets/music.png
diff --git a/assets/news/123.png b/assets/news/123.png
diff --git a/assets/news/127.png b/assets/news/127.png
diff --git a/assets/news/tmxmfpdlzlwm.png b/assets/news/tmxmfpdlzlwm.png
diff --git a/assets/news/늉.png b/assets/news/늉.png
diff --git a/assets/news/박효신.png b/assets/news/박효신.png
diff --git a/assets/news/샤이니.png b/assets/news/샤이니.png
diff --git a/assets/news/세븐틴.png b/assets/news/세븐틴.png
diff --git a/assets/news/정국.png b/assets/news/정국.png
diff --git a/assets/pick/pick0.png b/assets/pick/pick0.png
diff --git a/assets/pick/pick1.png b/assets/pick/pick1.png
diff --git a/assets/pick/pick2.png b/assets/pick/pick2.png
diff --git a/assets/pick/pick3.png b/assets/pick/pick3.png
diff --git a/assets/pick/pick4.png b/assets/pick/pick4.png
diff --git a/assets/pick/pick5.png b/assets/pick/pick5.png
diff --git a/assets/pick/pick6.png b/assets/pick/pick6.png
diff --git a/assets/pick/pick7.png b/assets/pick/pick7.png
diff --git a/assets/play-button.png b/assets/play-button.png
diff --git a/assets/play_music.png b/assets/play_music.png
diff --git a/assets/playlist.png b/assets/playlist.png
diff --git a/assets/promotion/today_thumbs.1d76741b.png b/assets/promotion/today_thumbs.1d76741b.png
diff --git a/assets/random.png b/assets/random.png
diff --git a/assets/refresh.png b/assets/refresh.png
diff --git a/assets/search.png b/assets/search.png
diff --git a/assets/social/facebook.png b/assets/social/facebook.png
diff --git a/assets/social/instagram.png b/assets/social/instagram.png
diff --git a/assets/social/letter-n.png b/assets/social/letter-n.png
diff --git a/assets/sp_topbar.f4891747.svg b/assets/sp_topbar.f4891747.svg
diff --git a/assets/sparkles.png b/assets/sparkles.png
diff --git a/assets/speaker-filled-audio-tool.png b/assets/speaker-filled-audio-tool.png
diff --git a/assets/stage.png b/assets/stage.png
diff --git a/assets/trophy.png b/assets/trophy.png
diff --git a/assets/user.png b/assets/user.png
diff --git a/assets/vibe/vibe0.png b/assets/vibe/vibe0.png
diff --git a/assets/vibe/vibe1.png b/assets/vibe/vibe1.png
diff --git a/assets/vibe/vibe2.jpg b/assets/vibe/vibe2.jpg
diff --git a/assets/vibe/vibe3.png b/assets/vibe/vibe3.png
diff --git a/assets/vibe/vibe4.png b/assets/vibe/vibe4.png
diff --git a/assets/vibe/vibe5.png b/assets/vibe/vibe5.png
diff --git a/assets/vibe/vibe6.png b/assets/vibe/vibe6.png
diff --git a/assets/vibe/vibe7.png b/assets/vibe/vibe7.png
diff --git a/assets/vinyl.png b/assets/vinyl.png
diff --git a/index.html b/index.html
diff --git a/index.js b/index.js
@@ -0,0 +1,147 @@
+const magazine_next_btn = document.querySelector(".magazine_next");
+const news_next_btn = document.querySelector(".news_next");
+const vibe_next_btn = document.querySelector(".vibe_next");
+const pick_next_btn = document.querySelector(".pick_next");
+
+const magazine_prev_btn = document.querySelector(".magazine_prev");
+const news_prev_btn = document.querySelector(".news_prev");
+const vibe_prev_btn = document.querySelector(".vibe_prev");
+const pick_prev_btn = document.querySelector(".pick_prev");
+
+const magazine_slider = document.querySelector(".magazine_slider");
+const news_slider = document.querySelector(".news_slider");
+const vibe_slider = document.querySelector(".vibe_slider");
+const pick_slider = document.querySelector(".pick_slider");
+
+const magazine_images = document.querySelectorAll(
+  ".img_container_magazine img"
+);
+const news_images = document.querySelectorAll(".img_container_news img");
+const vibe_images = document.querySelectorAll(".img_container_vibe img");
+const pick_images = document.querySelectorAll(".img_container_pick img");
+
+let magazine_index = 0;
+let news_index = 0;
+let vibe_index = 0;
+let pick_index = 0;
+
+function showSlideMagazine(direction) {
+  let prevbtn = document.querySelector(".magazine_prev");
+  if (direction === "next") {
+    console.log("next");
+    magazine_slider.classList.remove("left");
+    magazine_slider.classList.add("right");
+    magazine_index++;
+    if (magazine_index === magazine_images.length) {
+      magazine_index = 0;
+    }
+    prevbtn.style.visibility = "visible";
+  } else if (direction === "prev") {
+    prevbtn.style.visibility = "hidden";
+    magazine_slider.classList.remove("right");
+    magazine_slider.classList.add("left");
+    index--;
+    if (index < 0) {
+      index = images.length - 1;
+    }
+  }
+}
+function showSlideNews(direction) {
+  let prevbtn = document.querySelector(".news_prev");
+  if (direction === "next") {
+    console.log("next");
+    news_slider.classList.remove("left");
+    news_slider.classList.add("right");
+    news_index++;
+    if (news_index === news_images.length) {
+      news_index = 0;
+    }
+    prevbtn.style.visibility = "visible";
+  } else if (direction === "prev") {
+    prevbtn.style.visibility = "hidden";
+    news_slider.classList.remove("right");
+    news_slider.classList.add("left");
+    index--;
+    if (index < 0) {
+      index = images.length - 1;
+    }
+  }
+}
+function showSlideVibe(direction) {
+  let prevbtn = document.querySelector(".vibe_prev");
+  if (direction === "next") {
+    console.log("next");
+    vibe_slider.classList.remove("left");
+    vibe_slider.classList.add("right");
+    vibe_index++;
+    if (vibe_index === vibe_images.length) {
+      vibe_index = 0;
+    }
+    prevbtn.style.visibility = "visible";
+  } else if (direction === "prev") {
+    prevbtn.style.visibility = "hidden";
+    vibe_slider.classList.remove("right");
+    vibe_slider.classList.add("left");
+    index--;
+    if (index < 0) {
+      index = images.length - 1;
+    }
+  }
+}
+function showSlidePick(direction) {
+  let prevbtn = document.querySelector(".pick_prev");
+  if (direction === "next") {
+    console.log("next");
+    pick_slider.classList.remove("left");
+    pick_slider.classList.add("right");
+    pick_index++;
+    if (pick_index === pick_images.length) {
+      pick_index = 0;
+    }
+    prevbtn.style.visibility = "visible";
+  } else if (direction === "prev") {
+    prevbtn.style.visibility = "hidden";
+    pick_slider.classList.remove("right");
+    pick_slider.classList.add("left");
+    index--;
+    if (index < 0) {
+      index = images.length - 1;
+    }
+  }
+}
+
+magazine_next_btn.addEventListener("click", () => {
+  showSlideMagazine("next");
+});
+news_next_btn.addEventListener("click", () => {
+  showSlideNews("next");
+});
+vibe_next_btn.addEventListener("click", () => {
+  showSlideVibe("next");
+});
+pick_next_btn.addEventListener("click", () => {
+  showSlidePick("next");
+});
+
+magazine_prev_btn.addEventListener("click", () => {
+  showSlideMagazine("prev");
+});
+news_prev_btn.addEventListener("click", () => {
+  showSlideNews("prev");
+});
+vibe_prev_btn.addEventListener("click", () => {
+  showSlideVibe("prev");
+});
+pick_prev_btn.addEventListener("click", () => {
+  showSlidePick("prev");
+});
+
+document.querySelector(".range").addEventListener("input", (event) => {
+  let gradient_value = 100 / event.target.attributes.max.value;
+  event.target.style.background =
+    "linear-gradient(to right, gray 0%, gray " +
+    gradient_value * event.target.value +
+    "%, #4b4b4b " +
+    gradient_value * event.target.value +
+    "%, #4b4b4b";
+});
diff --git a/styles/header.css b/styles/header.css
@@ -0,0 +1,162 @@
+.header {
+  width: 250px;
+  height: 100vh;
+  background-color: black;
+  position: fixed;
+  overflow: none;
+  flex-shrink: 0;
+}
+hr {
+  background: #1a1a1a;
+  width: 80%;
+  height: 1px;
+  border: 0;
+  margin: 0 auto;
+}
+.header_logo {
+  display: block;
+  color: white;
+  text-transform: uppercase;
+  font-family: "Cabin", sans-serif;
+  padding: 2rem 2rem;
+  cursor: pointer;
+}
+.header_logo * {
+  vertical-align: middle;
+}
+
+.logo_naver {
+  font-weight: 800;
+}
+.logo_vibe {
+  font-weight: 800;
+  font-size: 30px;
+}
+.header_submenu {
+  overflow: scroll;
+  height: 65%;
+}
+.header_signin_area {
+  display: block;
+  color: white;
+  font-size: larger;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1rem 2.5rem;
+  cursor: pointer;
+}
+
+.user_icon {
+  width: 20px;
+  height: 20px;
+}
+.login_txt {
+  margin: 0 10px 0 10px;
+}
+.header_member {
+  margin: 0 auto;
+}
+.member_p {
+  margin: 1.2rem 2.5rem;
+  font-size: 13px;
+}
+.member_button_area {
+  display: block;
+  cursor: pointer;
+  width: 80%;
+  height: 3rem;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  background: rgb(236, 0, 0);
+  background: linear-gradient(
+    90deg,
+    rgba(236, 0, 0, 1) 0%,
+    rgba(244, 47, 201, 0.6321122198879552) 48%,
+    rgba(96, 0, 135, 1) 100%
+  );
+}
+.member_icon {
+  width: 1.5rem;
+}
+.member_text {
+  font-weight: 800;
+  margin: 0 5px;
+}
+.header_search {
+  cursor: pointer;
+  border-radius: 5px;
+  margin: 0 auto;
+  padding: 1.5rem 2rem 1rem;
+  display: flex;
+  flex-direction: initial;
+  justify-content: center;
+  align-items: center;
+}
+.search_input {
+  width: 100%;
+  height: 3rem;
+  box-sizing: border-box;
+  background: #1d1d1d;
+  background-image: url("../assets/loupe.png");
+  background-size: 1.2rem 1.2rem;
+  background-position: 10px center;
+  background-repeat: no-repeat;
+  padding-left: 40px;
+  border-radius: 5px;
+  border: none;
+}
+.search_icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.header_menu {
+  margin: 0 auto;
+  width: 80%;
+  font-size: 1.2rem;
+}
+.header_menu li > a {
+  padding: 0.6rem 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+.header_menu li > a > span {
+  margin-left: 0.5rem;
+  color: gray;
+}
+.header_menu li > a > span:hover {
+  color: white;
+}
+.header_menu ul > hr {
+  width: 100%;
+  margin: 1rem auto;
+}
+.header_menu li:last-child {
+  margin-bottom: 100px;
+}
+.header_menu img {
+  width: 25px;
+  height: 25px;
+}
+.header_install {
+  border: 1px solid gray;
+  display: block;
+  width: 80%;
+  margin: 1rem auto;
+  padding: 1.1rem;
+  text-align: center;
+  font-size: large;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  background-color: transparent;
+}
+.header_install:hover {
+  width: 80%;
+  border: 2px solid white;
+}
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,16 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font: inherit;
+  color: white;
+  list-style: none;
+  text-decoration: none;
+}
+.body {
+  background-color: black;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+}