[ { "path": ".gitattributes", "content": "# Auto detect text files and perform LF normalization\n* text=auto\n" }, { "path": "index.html", "content": "\n\n\n \n \n Clock\n \n \n\n\n
\n
\n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n\n \n\n" }, { "path": "script.js", "content": "let hour = document.getElementById('hour');\nlet minute = document.getElementById('minute');\nlet second = document.getElementById('second');\nlet ampm = document.getElementById('ampm');\n\n\nsetInterval(()=>{\n let h = new Date().getHours();\n let m = new Date().getMinutes();\n let s = new Date().getSeconds();\n let ap = h >=12 ? \"PM\" : \"AM\";\n \n h = h>12 ? h-12:h;\n h = h<=9 ? \"0\"+h:h;\n m = m<=9 ? \"0\"+m:m;\n s = s<=9 ? \"0\"+s:s;\n\n\n hour.innerText = h;\n minute.innerText = m;\n second.innerText = s;\n ampm.innerText = ap;\n});\n\n\n" }, { "path": "style.css", "content": "@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap'); \n\n*{\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Anton', sans-serif;\n}\n\n.wrapper{\n width: 100%;\n height: 100vh;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: #acbaca;\n}\n\n.container{\n width: 100%;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 25px;\n}\n\n.clock\n{\n width: 150px;\n height: 150px;\n background-color: #c9d5e0;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 30px;\n box-shadow: 20px 20px 20px -10px rgba(0, 0, 0, 0.15),inset 15px 15px 10px rgba(255, 255, 255, 0.5),-15px -15px 35px rgba(255, 255, 255, 0.35), inset -1px -1px 10px rgba(0,0,0,0.2);\n}\n\n.bg{\n width: 125px;\n height: 125px;\n background-color: #152b4a;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 20px;\n box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.15),inset 5px 5px 10px rgba(255, 255, 255, 0.5),-5px -5px 15px rgba(255, 255, 255, 0.35), inset -1px -1px 10px rgba(0,0,0,0.2);\n font-size: 62px;\n /* font-weight: 800; */\n color: white;\n letter-spacing: 2px;\n}\n\n#hour{\n color: #ff2972;\n}\n\n#minute{\n color: #fee800;\n}\n#second{\n color: transparent;\n -webkit-text-stroke: 1px #04fc43;\n}\n\n@media only screen and (max-width: 600px) {\n \n .container{\n flex-direction: column;\n }\n }" } ]