Bamdoliro · dpqlsn · Jul 6, 2024 · Jul 6, 2024 · Jul 9, 2024 · Jul 9, 2024
@@ -0,0 +1,43 @@
+const clock = document.getElementById("clock");
+
+function getClock() {
+    const date = new Date();
+    const hour = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    clock.textContent = `${hour}:${minutes}`;
+}
+
+getClock();
+setInterval(getClock, 1000);
+
+document.addEventListener('DOMContentLoaded', () => {
+    const swiperContainer = document.getElementById('swiper-container');
+    let isDown = false;
+    let startX;
+    let scrollLeft;
+
+    swiperContainer.addEventListener('mousedown', (e) => {
+        isDown = true;
+        swiperContainer.classList.add('active');
+        startX = e.pageX - swiperContainer.offsetLeft;
+        scrollLeft = swiperContainer.scrollLeft;
+    });
+
+    swiperContainer.addEventListener('mouseleave', () => {
+        isDown = false;
+        swiperContainer.classList.remove('active');
+    });
+
+    swiperContainer.addEventListener('mouseup', () => {
+        isDown = false;
+        swiperContainer.classList.remove('active');
+    });
+
+    swiperContainer.addEventListener('mousemove', (e) => {
+        if (!isDown) return;
+        e.preventDefault();
+        const x = e.pageX - swiperContainer.offsetLeft;
+        const walk = (x - startX) * 2;
+        swiperContainer.scrollLeft = scrollLeft - walk;
+    });
+});
@@ -0,0 +1,93 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+body {
+    background-color: black;
+}
+.background-image{
+    position: absolute;
+    background: url(/image/assets/mockup.png) no-repeat center;
+    background-size: contain;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+}
+.footer-text, .text{
+    position: absolute;
+    font-size: 0.5em;
+    color: rgb(111, 111, 111);
+    text-align: center;
+    bottom: 58px;
+    left: 550px;
+}
+.footer-text {
+    display: flex;
+    text-align: center;
+    padding-left: 60px;
+}
+.text {
+    display: flex;
+    text-align: center;
+    padding-left: 230px;
+    pointer-events: auto;
+}
+.footer-image {
+    position: absolute;
+    width: 370px;
+    z-index: 0;
+}
+.home{
+    position: relative;
+    display: flex;
+    width: 80px;
+    height: 35px;
+    border-radius: 20px;
+}
+.box{
+    position: relative;
+    width: 100px;
+    height: 40px;
+    background-color: white;
+    border-radius: 20px;
+    left: 560px;
+    bottom: 60px;
+}
+.home-image{
+    display: flex;
+    position: relative;
+    width: 20px;
+    height: 20px;
+    z-index: 1000;
+}
+.music{
+    display: flex;
+    padding: 12px;
+    bottom: 300px;
+    padding-left: 840px;
+    padding-bottom: 720 px;
+    width: 40px;
+    height: 40px;
+    gap: 6px;
+}
+.time{
+    display: flex;
+    position: relative;
+    width: 13px;
+    height: 13px;
+    left: 250px;
+    bottom: 90px;
+}
+.icon{
+    position: relative;
+    width: 40px;
+    height: 40px;
+    gap: 8px;
+    z-index: 1000;
+}
+.video{
+    position: relative;
+    display: flex;
+    width: 370px;
+    height: 400px;
+}
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>How Sweet</title>
+    <link rel="stylesheet" href="./dance.css">
+    <script src="./dance.js" defer></script>
+</head>
+<body>
+    <div class="background-image"></div>
+    <img src="./image/assets/app-bottom.png" class="footer-image" style="position: relative; left: 530px; top: 670px;"/>
+    <div class="footer-text">©2024 ADOR. All Rights Reserved.</div>
+    <div class="text">쿠키사용방침</div>
+  </div>
+  <div class="box">
+    <div class="home">
+        <div class="home-image">
+            <a href="./member.html">
+                <img src="./image/assets/swiper-prev.png" style="position: relative; width: 10px; height: 20px; left: 10px; top: 10px;"></a>
+                <p style="position: relative; left: 23px; top: 11px;"><b>Back</b></p>
+                </div>
+            </div>
+        </div>
+        <div class="box" style=" width: 100px; height: 35px; left: 730px; bottom: 890px;">
+            <p style="position: relative; top: 10px; left: 15px"><b>Download</b></p>
+        </div>
+        <div class="time">
+            <img src="./image/assets/status-bar-black.png" style="position: relative; width: 80px; height: 13px; left: 550px; bottom: 50px;">
+          </div>
+          <div class="music">
+            <img src="./image/assets/music-icon.png" style="width: 35px; height: 35px; position: relative; bottom: 160px;">
+        </div>
+        <div class="icon">
+            <a href="./video/HR_002(walk).mp4">
+            <img src="./image/assets/video-icon-1.png" style="position: relative; width: 40px; height: 40px; left: 840px; bottom: 600px;"></a>
+            <a href="./video/HR_002(walk).mp4">
+            <img src="./image/assets/video-icon-2.png" style="position: relative; width: 40px; height: 40px; left: 840px; bottom: 595px;"></a>
+            <a href="./video/HR_002(walk).mp4">
+            <img src="./image/assets/video-icon-3.png" style="position: relative; width: 40px; height: 40px; left: 840px; bottom: 590px;"></a>
+            <a href="./video/HR_002(walk).mp4">
+            <img src="./image/assets/video-icon-4.png" style="position: relative; width: 40px; height: 40px; left: 840px; bottom: 585px;"></a>
+            <a href="./video/HR_002(walk).mp4">
+            <img src="./image/assets/video-icon-5.png" style="position: relative; width: 40px; height: 40px; left: 840px; bottom: 580px;"></a>
+        </div>
+>
+        <p id="clock" style="color: black; position: relative; bottom: 1000px; left: 570px;"><b>00:00</b></p>
+        <script>
+            const clock=document.getElementById("clock");
+
+            function getClock(){
+                const date = new Date()
+                const hour = String(date.getHours()).padStart(2,"0");
+                const minutes = String(date.getMinutes()).padStart(2,"0");
+                clock.innerText = `${hour}:${minutes}`;
+            }
+
+            getClock();
+            setInterval(getClock, 1000);
+
+        </script>
+    </body>
+</html>
@@ -0,0 +1,142 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+body {
+    background-color: black;
+}
+.container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+}
+.slide{
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    width: 370px;
+    left: 530px;
+}
+img {
+    position: relative;
+    display: flex;
+    width: 400px;
+    padding-top: 50px;
+    z-index: -1;
+}
+.background-image {
+    position: absolute;
+    background: url(/image/assets/mockup.png) no-repeat center;
+    background-size: contain;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+}
+li {
+    list-style: none;
+    padding-top: 100px;
+}
+.kind_wrap {
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+}
+.kind_wrap > .kind_slider {
+    overflow: hidden;
+}
+.kind_wrap > .kind_slider .slider {
+    display: flex; 
+    transition: 0.5s;
+}
+.kind_wrap > .kind_slider .slider li {
+    float: left;
+}
+.kind_wrap > .kind_slider img {
+    vertical-align: top;
+}
+.kind_wrap .arrow > a.prev {
+    position: absolute;
+    left: 550px;
+    bottom: 230px;
+    z-index: 1000;
+    color: gray;
+    text-decoration-line: none;
+}
+.kind_wrap .arrow > a.next {
+    position: absolute;
+    left: 880px;
+    bottom: 230px;
+    z-index: 1000;
+    color: gray;
+    text-decoration-line: none;
+}
+.arrow{
+    position: relative;
+}
+.footer-text, .text{
+    position: absolute;
+    font-size: 0.5em;
+    color: rgb(111, 111, 111);
+    text-align: center;
+    bottom: 58px;
+}
+.footer-text {
+    position: relative;
+    display: flex;
+    text-align: center;
+    padding-left: 60px;
+    left: 530px;
+    bottom: 120px;
+    z-index: 6;
+}
+.text {
+    position: relative;
+    display: flex;
+    text-align: center;
+    padding-left: 230px;
+    pointer-events: auto;
+    left: 530px;
+    bottom: 132px;
+    z-index: 6;
+}
+.footer-image {
+    position: absolute;
+    width: 370px;
+    z-index: 0;
+}
+.home{
+    display: flex;
+    width: 80px;
+    height: 35px;
+    bottom: 800px;
+    border-radius: 20px;
+}
+.box{
+    position: relative;
+    width: 90px;
+    left: 550px;
+    bottom: 800px;
+    background-color: white;
+    border-radius: 20px;
+}
+.home-image{
+    position: relative;
+    bottom: 42px;
+    left: 10px;
+    z-index: 1000;
+}
+.time{
+    position: relative;
+    width: 13px;
+    height: 13px;
+    left: 790px;
+    bottom: 940px;
+}
+.music{
+    position: relative;
+    width: 35px;
+    height: 35px;
+    left: 850px;
+    bottom: 925px;
+}