├── .vscode └── settings.json ├── assets ├── css │ └── style.css └── js │ └── main.js └── index.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | 10 | body { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | min-height: 100vh; 15 | background: #091921; 16 | overflow: hidden; 17 | } 18 | 19 | body.light { 20 | background: #d1dae3; 21 | color: #333; 22 | } 23 | 24 | .container { 25 | width: 100%; 26 | height: 100%; 27 | align-items: center; 28 | justify-content: center; 29 | position: relative; 30 | } 31 | 32 | h1 { 33 | color: #f0f0f0; 34 | justify-content: center; 35 | text-align: center; 36 | align-items: center; 37 | z-index: -1; 38 | opacity: 0.7; 39 | } 40 | 41 | body.light h1 { 42 | color: #333; 43 | } 44 | 45 | .heart-icon { 46 | color: gray; 47 | margin-left: 10px; 48 | transition: color 0.3s; 49 | cursor: pointer; 50 | } 51 | 52 | .heart-icon:hover { 53 | color: pink; 54 | } 55 | 56 | .heart-icon:active { 57 | color: red; 58 | } 59 | 60 | .clock { 61 | width: 350px; 62 | height: 350px; 63 | display: flex; 64 | justify-content: center; 65 | align-items: center; 66 | background: #091921 url(https://i.imgur.com/4vCk1uy.png); 67 | background-size: cover; 68 | margin-left: 600px; 69 | margin-top: 30px; 70 | z-index: 1; 71 | border: 4px solid #091921; 72 | border-radius: 50%; 73 | box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.05), 74 | 20px 20px 20px rgba(0, 0, 0, 0.3), 75 | inset -8px -8px 15px rgba(255, 255, 255, 0.05), 76 | inset 20px 20px 20px rgba(0, 0, 0, 0.3); 77 | } 78 | 79 | .made { 80 | color: #f0f0f0; 81 | opacity: 0.7; 82 | display: block; 83 | margin-top: 20px; 84 | text-align: center; 85 | } 86 | 87 | .made a { 88 | color: #f0f0f0; 89 | opacity: 0.7; 90 | text-decoration: none; 91 | } 92 | 93 | body.light .made { 94 | color: #333; 95 | } 96 | 97 | .made a:hover { 98 | color: #00ffab; 99 | opacity: 0.7; 100 | text-decoration: underline; 101 | font-style: italic; 102 | font-weight: 500; 103 | } 104 | 105 | body.light a { 106 | color: #333; 107 | opacity: 1; 108 | } 109 | 110 | body.light a:hover { 111 | color: #0B666A; 112 | } 113 | 114 | body.light .clock { 115 | background: #d1dae3 url(https://i.imgur.com/bJOf8Ww.png); 116 | background-size: cover; 117 | border: 4px solid #cad3dc; 118 | box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.5), 119 | 10px 10px 10px rgba(0, 0, 0, 0.1), 120 | inset -8px -8px 15px rgba(255, 255, 255, 0.5), 121 | inset 10px 10px 10px rgba(0, 0, 0, 0.1); 122 | } 123 | 124 | .clock::before { 125 | content: ""; 126 | position: absolute; 127 | width: 15px; 128 | height: 15px; 129 | background: #fff; 130 | border-radius: 50%; 131 | z-index: 10000; 132 | } 133 | 134 | body.light .clock::before { 135 | background: #008eff; 136 | } 137 | 138 | .hour, 139 | .min, 140 | .sec { 141 | position: absolute; 142 | } 143 | 144 | .hour, 145 | .hr { 146 | width: 160px; 147 | height: 160px; 148 | } 149 | 150 | .min, 151 | .mn { 152 | width: 190px; 153 | height: 190px; 154 | } 155 | 156 | .sec, 157 | .sc { 158 | width: 230px; 159 | height: 230px; 160 | } 161 | 162 | .hr, 163 | .mn, 164 | .sc { 165 | display: flex; 166 | justify-content: center; 167 | /* align-items:center; */ 168 | position: absolute; 169 | border-radius: 50%; 170 | } 171 | 172 | .hr::before { 173 | content: ""; 174 | position: absolute; 175 | width: 8px; 176 | height: 80px; 177 | background: #ff105e; 178 | z-index: 10; 179 | border-radius: 6px 6px 0 0; 180 | } 181 | 182 | .mn::before { 183 | content: ""; 184 | position: absolute; 185 | width: 4px; 186 | height: 90px; 187 | background: #fff; 188 | z-index: 11; 189 | border-radius: 6px; 190 | } 191 | 192 | body.light .mn::before { 193 | background: #091921; 194 | } 195 | 196 | .sc::before { 197 | content: ""; 198 | position: absolute; 199 | width: 2px; 200 | height: 150px; 201 | background: #3d61ff; 202 | z-index: 12; 203 | border-radius: 6px; 204 | } 205 | 206 | .toggle { 207 | position: absolute; 208 | top: 30px; 209 | right: 150px; 210 | width: 20px; 211 | height: 20px; 212 | font-size: 18px; 213 | border-radius: 50%; 214 | background: #d1dae3; 215 | color: #d1dae3; 216 | font-family: consolas; 217 | cursor: pointer; 218 | transition: 0.5s; 219 | display: flex; 220 | align-items: center; 221 | } 222 | 223 | .toggle:before { 224 | position: absolute; 225 | content: "Light Mode"; 226 | left: 25px; 227 | white-space: nowrap; 228 | } 229 | 230 | body.light .toggle { 231 | background: #091921; 232 | color: #091921; 233 | } 234 | 235 | body.light .toggle:before { 236 | content: "Dark Mode"; 237 | white-space: nowrap; 238 | } 239 | 240 | @media screen and (max-width: 560px) { 241 | /* Mengatur kontainer untuk tampilan responsif */ 242 | .container { 243 | display: flex; 244 | flex-direction: column; 245 | align-items: center; 246 | } 247 | 248 | /* Mengatur jarak atas untuk elemen .made pada tampilan responsif */ 249 | .made { 250 | margin-top: 10px; 251 | } 252 | 253 | /* Mengatur jarak atas dan margin kanan untuk elemen .toggle pada tampilan responsif */ 254 | .toggle { 255 | position: absolute; 256 | top: 40px; 257 | right: 120px; 258 | } 259 | 260 | /* Mengubah ukuran teks elemen h1 pada tampilan responsif */ 261 | h1 { 262 | font-size: 18px; 263 | margin-bottom: 30px; 264 | } 265 | 266 | /* Mengubah ukuran elemen .clock pada tampilan responsif */ 267 | .clock { 268 | width: 250px; 269 | height: 250px; 270 | margin: 0; 271 | } 272 | } -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | let $ = document 2 | 3 | const deg = 6 4 | const hr = $.querySelector("#hr") 5 | const mn = $.querySelector("#mn") 6 | const sc = $.querySelector("#sc") 7 | const toggleMode = $.querySelector(".toggle") 8 | 9 | function toggleClass(){ 10 | const body = $.querySelector("body") 11 | body.classList.toggle("light") 12 | } 13 | 14 | setInterval(function(){ 15 | let day = new Date() 16 | let hh = day.getHours() * 30 17 | let mm = day.getMinutes() * deg 18 | let ss = day.getSeconds() * deg 19 | 20 | hr.style.transform = "rotateZ(" + (hh+(mm/12)) + "deg)" 21 | mn.style.transform = "rotateZ(" + mm + "deg)" 22 | sc.style.transform = "rotateZ(" + ss + "deg)" 23 | }) 24 | 25 | toggleMode.addEventListener("click", toggleClass) 26 | 27 | const heartIcon = document.getElementById("heart"); 28 | let isRed = false; 29 | 30 | heartIcon.addEventListener("click", () => { 31 | isRed = !isRed; 32 | if (isRed) { 33 | heartIcon.style.color = "red"; // Ubah menjadi merah saat diklik 34 | } else { 35 | heartIcon.style.color = "gray"; // Ubah menjadi abu-abu saat diklik lagi 36 | } 37 | }); 38 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaSxript clock 7 | 8 | 9 | 10 | 11 |
12 |

BIAR KAMU GA LUPA WAKTU

13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | Made by @risnugr 25 |
26 |
27 | 28 | 29 | 30 | --------------------------------------------------------------------------------