uwu

natelyt12 · May 12, 2024 · 43af7e4 · 43af7e4
commit 43af7e4
Show file tree

Hide file tree

Showing 61 changed files with 102 additions and 0 deletions.
diff --git a/asset/Glisten.mp3 b/asset/Glisten.mp3
diff --git a/asset/easteregg.mp3 b/asset/easteregg.mp3
diff --git a/asset/headphones.png b/asset/headphones.png
diff --git a/asset/icon.png b/asset/icon.png
diff --git a/asset/landscape/1.png b/asset/landscape/1.png
diff --git a/asset/landscape/10.jpg b/asset/landscape/10.jpg
diff --git a/asset/landscape/11.jpg b/asset/landscape/11.jpg
diff --git a/asset/landscape/12.jpg b/asset/landscape/12.jpg
diff --git a/asset/landscape/13.jpg b/asset/landscape/13.jpg
diff --git a/asset/landscape/14.jpg b/asset/landscape/14.jpg
diff --git a/asset/landscape/15.png b/asset/landscape/15.png
diff --git a/asset/landscape/16.jpg b/asset/landscape/16.jpg
diff --git a/asset/landscape/17.png b/asset/landscape/17.png
diff --git a/asset/landscape/18.jpg b/asset/landscape/18.jpg
diff --git a/asset/landscape/19.jpg b/asset/landscape/19.jpg
diff --git a/asset/landscape/2.jpg b/asset/landscape/2.jpg
diff --git a/asset/landscape/3.jpg b/asset/landscape/3.jpg
diff --git a/asset/landscape/4.jpg b/asset/landscape/4.jpg
diff --git a/asset/landscape/5.jpg b/asset/landscape/5.jpg
diff --git a/asset/landscape/6.jpg b/asset/landscape/6.jpg
diff --git a/asset/landscape/7.jpg b/asset/landscape/7.jpg
diff --git a/asset/landscape/8.jpg b/asset/landscape/8.jpg
diff --git a/asset/landscape/9.jpg b/asset/landscape/9.jpg
diff --git a/asset/portrait/1.jpg b/asset/portrait/1.jpg
diff --git a/asset/portrait/10.jpg b/asset/portrait/10.jpg
diff --git a/asset/portrait/11.jpg b/asset/portrait/11.jpg
diff --git a/asset/portrait/12.jpg b/asset/portrait/12.jpg
diff --git a/asset/portrait/13.jpg b/asset/portrait/13.jpg
diff --git a/asset/portrait/14.jpg b/asset/portrait/14.jpg
diff --git a/asset/portrait/15.jpg b/asset/portrait/15.jpg
diff --git a/asset/portrait/16.jpg b/asset/portrait/16.jpg
diff --git a/asset/portrait/17.jpg b/asset/portrait/17.jpg
diff --git a/asset/portrait/18.jpg b/asset/portrait/18.jpg
diff --git a/asset/portrait/19.jpg b/asset/portrait/19.jpg
diff --git a/asset/portrait/2.jpg b/asset/portrait/2.jpg
diff --git a/asset/portrait/20.jpg b/asset/portrait/20.jpg
diff --git a/asset/portrait/21.jpg b/asset/portrait/21.jpg
diff --git a/asset/portrait/22.jpg b/asset/portrait/22.jpg
diff --git a/asset/portrait/23.jpg b/asset/portrait/23.jpg
diff --git a/asset/portrait/24.jpg b/asset/portrait/24.jpg
diff --git a/asset/portrait/25.jpg b/asset/portrait/25.jpg
diff --git a/asset/portrait/26.jpg b/asset/portrait/26.jpg
diff --git a/asset/portrait/27.jpg b/asset/portrait/27.jpg
diff --git a/asset/portrait/28.jpg b/asset/portrait/28.jpg
diff --git a/asset/portrait/29.jpg b/asset/portrait/29.jpg
diff --git a/asset/portrait/3.jpg b/asset/portrait/3.jpg
diff --git a/asset/portrait/30.jpg b/asset/portrait/30.jpg
diff --git a/asset/portrait/31.jpg b/asset/portrait/31.jpg
diff --git a/asset/portrait/32.jpg b/asset/portrait/32.jpg
diff --git a/asset/portrait/33.jpg b/asset/portrait/33.jpg
diff --git a/asset/portrait/34.jpg b/asset/portrait/34.jpg
diff --git a/asset/portrait/4.jpg b/asset/portrait/4.jpg
diff --git a/asset/portrait/5.jpg b/asset/portrait/5.jpg
diff --git a/asset/portrait/6.jpg b/asset/portrait/6.jpg
diff --git a/asset/portrait/7.jpg b/asset/portrait/7.jpg
diff --git a/asset/portrait/8.jpg b/asset/portrait/8.jpg
diff --git a/asset/portrait/9.jpg b/asset/portrait/9.jpg
diff --git a/asset/uwu.jpg b/asset/uwu.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wibi Slideshow</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="./asset/icon.png">
+</head>
+<body>
+    <div id="control">
+        <button type="button" id="start" onclick="start()">Start!</button>
+        <button type="button" id="info">Info</button>
+    </div>
+    <div id="info-container">
+        <p>Wibi Slideshow <span>By @phucthanhh</span></p>
+        <p>made with: <span>Javascript</span></p>
+        <p>picture: <span>Pinterest - Pixiv - @tth</span></p>
+        <p>music: <span>Glisten - Hunter Milo</span></p>
+        <p>ver: <span>2.0</span></p>
+    </div>
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,14 @@
+function start() {
+    let startbtn = document.getElementById('start')
+    let controlcon = document.getElementById('control')
+    startbtn.style.background = 'white'
+    startbtn.style.transition = '500ms'
+    startbtn.style.color = 'black'
+    controlcon.style.transform = 'translateX(-210px)'
+    controlcon.style.transition = 'all 1000ms cubic-bezier(0.610, 0.025, 0.870, 0.620)'
+}
+
+document.getElementById('info').addEventListener("click", () => {
+    var toggle = document.getElementById("info-container");
+    toggle.classList.toggle('on');
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,64 @@
+/* rgb(59, 59, 59) */
+
+
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Sans:ital,wdth@0,75..100;1,75..100&display=swap');
+
+* {
+    font-family: "Ubuntu Sans", sans-serif;
+}
+
+body {
+    background-color: black;
+    overflow: hidden;
+}
+
+#control {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    margin: 0px 0px 5px 5px;
+}
+
+button {
+    padding: 5px 0px;
+    border: 1px solid rgb(59, 59, 59);
+    background: transparent;
+    color: white;
+}
+
+button:active {
+    border: white 1px solid;
+}
+
+#start {
+    width: 150px;
+}
+
+#info {
+    width: 50px;
+}
+
+#info-container {
+    color: white;
+    position: absolute;
+    border: 1px solid rgb(59, 59, 59);
+    padding: 5px 10px;
+    margin-left: 5px;
+    bottom: 40px;
+    left: -250px;
+    transition: all 1000ms cubic-bezier(0.000, 1.620, 0.715, 0.995);
+    span {
+        font-size: 80%;
+        color: rgb(204, 204, 204);
+    }
+    p {
+        padding: 0;
+        margin: 3px 0px;
+    }
+
+}
+
+.on{
+    position: absolute;
+    transform: translateX(250px);
+}