From 04a471a3471badea149c875bd3b6004abe4074d3 Mon Sep 17 00:00:00 2001 From: actuallyroy Date: Tue, 26 Jul 2022 21:55:50 +0530 Subject: [PATCH] 19441 --- app.js | 19 +++++++++++++ index.html | 37 +++++++++++++++++++++++++ style.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 137 insertions(+) create mode 100644 index.html diff --git a/app.js b/app.js index e69de29..03d6159 100644 --- a/app.js +++ b/app.js @@ -0,0 +1,19 @@ +setInterval(() => { + let today = new Date(); + let day = [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday', + ]; + document.getElementById('day').textContent = `${day[today.getDay()]}`; + document.getElementById('timeS').textContent = `${String( + today.getHours() + ).padStart(2, '0')}:${String(today.getMinutes()).padStart(2, '0')}`; + document.getElementById('timeB').textContent = `${String( + today.getHours() + ).padStart(2, '0')}:${String(today.getMinutes()).padStart(2, '0')}`; + }, 1000); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..5da4cff --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + + SmartWatch UI + + + + +
+
+

SmartWatch

+
+
+
+

+
+

14:25

+

Monday

+
+
+ + + + +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css index e69de29..100ca2c 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,81 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500&family=Roboto&display=swap'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: 'Noto Sans', sans-serif; + /* font-family: 'Roboto', sans-serif; */ +} +.container { + border: 1px solid black; + height: 100vh; + width: 100vw; + display: flex; +} + +.left { + width: 50vw; + background: #21292f; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: xx-large; +} + +.right { + width: 50vw; + display: flex; + justify-content: center; + align-items: center; +} + +.watch { + background: black; + height: 50vh; + width: 22vw; + border-radius: 85px; + color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px 0; +} + +.watchBack { + position: absolute; + background: #3b3b3b; + height: 58vh; + width: 22vw; + border-radius: 105px; + z-index: -1; +} + +#timeS { + align-self: flex-start; + position: absolute; + font-size: x-large; +} + +.timeB { + display: flex; + flex-direction: column; + align-items: center; + font-size: xxx-large; +} + +#day { + font-weight: 600; +} + +.icons { + height: 6vh; + width: 21vw; + align-self: end; + position: absolute; + display: flex; + justify-content: space-evenly; +} \ No newline at end of file