smart_watch

kishanrajput23 · Oct 9, 2022 · 3a82826 · 3a82826
1 parent 06e35dd
commit 3a82826
Show file tree

Hide file tree

Showing 10 changed files with 274 additions and 0 deletions.
diff --git a/smart_watch/black.png b/smart_watch/black.png
diff --git a/smart_watch/blue.png b/smart_watch/blue.png
diff --git a/smart_watch/heart.png b/smart_watch/heart.png
diff --git a/smart_watch/index.css b/smart_watch/index.css
@@ -0,0 +1,176 @@
+.header {
+    text-align: center;
+    background-color: #232f3e;
+}
+
+#headimg {
+    width: 90px;
+}
+
+#pic {
+    width: 40%;
+    float: left;
+    position: relative;
+}
+
+#content {
+    width: 60%;
+    float: right;
+    position: relative;
+}
+
+#pic1 {
+    width: 85%;
+}
+
+.container {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 80%;
+}
+
+section {
+    text-align: -webkit-center;
+    margin-top: 5%;
+}
+
+#times {
+    position: absolute;
+    top: 46%;
+    left: 49%;
+    transform: translate(-50%, -50%);
+    font-size: 80px;
+    color: white;
+    font-size: 161%;
+    visibility: visible;
+}
+
+#boxes {
+    margin-top: 3%;
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 10%;
+    place-content: space-around;
+}
+
+#blue {
+    width: 10%;
+    height: 100%;
+    background-color: #565681;
+    border-radius: 10%;
+    cursor: pointer;
+}
+
+#purple {
+    width: 10%;
+    height: 100%;
+    background-color: #8a5362;
+    border-radius: 10%;
+    cursor: pointer;
+}
+
+#black {
+    width: 10%;
+    height: 100%;
+    background-color: #23211f;
+    border-radius: 10%;
+    cursor: pointer;
+}
+
+#red {
+    width: 10%;
+    height: 100%;
+    background-color: #ca3d22;
+    border-radius: 10%;
+    cursor: pointer;
+}
+
+#pink {
+    width: 10%;
+    height: 100%;
+    background-color: #e9c7be;
+    border-radius: 10%;
+    cursor: pointer;
+}
+
+.feature {
+    text-align: -webkit-left;
+    font-size: 114%;
+    margin-bottom: 3%;
+    margin-top: 5%;
+}
+
+#time,
+#heart {
+    margin: 15px;
+    font-size: 13px;
+    width: 105px;
+    height: 25px;
+    border-radius: 6px;
+    color: black;
+    font-weight: bold;
+    background: #c0bfbf;
+    cursor: pointer;
+}
+
+#buy {
+    margin: 15px;
+    font-size: 13px;
+    width: 138px;
+    height: 36px;
+    border-radius: 6px;
+    color: black;
+    font-weight: bold;
+    background: #ffd000;
+    margin-top: 33px;
+    cursor: pointer;
+}
+
+#hear {
+    left: -28px;
+    top: -51px;
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    animation: beat 3s linear 0s infinite alternate;
+}
+
+@keyframes beat {
+    0% {
+        transform: scale(1);
+    }
+
+    25% {
+        transform: scale(1.25);
+    }
+
+    50% {
+        transform: scale(1.5);
+    }
+
+    75% {
+        transform: scale(1.25);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+#hrtdiv {
+    position: absolute;
+    top: 46%;
+    left: 49%;
+    transform: translate(-50%, -50%);
+    font-size: 80px;
+    color: white;
+    font-size: 200%;
+    visibility: hidden;
+}
+
+#hrtrate {
+    position: absolute;
+    left: -12px;
+    top: -16px;
+}
diff --git a/smart_watch/index.html b/smart_watch/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+
+<body onload="f1()">
+    <header>
+        <div class="header">
+            <img id="headimg"
+                src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png"
+                alt="" />
+        </div>
+    </header>
+    <section>
+        <div class="container">
+            <div id="pic">
+                <img id="pic1" src="pic1.png" alt="img" />
+                <div id="times">00:00:00</div>
+                <div id="hrtdiv">
+                    <img src="heart.png"
+                        alt="" id="hear">
+                    <h5 id="hrtrate">78</h5>
+                </div>
+            </div>
+            <div id="content">
+                <!-- <img id="pic1" src="pic1.png" alt="img"> -->
+                <h2 style="font-size: 240%">FitBit 19 - The Smartest Watch</h2>
+                <p>
+                    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+                    Dignissimos dolores unde consequatur commodi culpa, velit repellat
+                    nam eius eligendi.
+                </p>
+                <p style="float: LEFT; font-size: 114%; margin-bottom: 3%">
+                    <strong>SELECT COLOR</strong>
+                </p>
+                <div id="boxes">
+                    <div id="blue" onclick="blue()"></div>
+                    <div id="purple" onclick="purple()"></div>
+                    <div id="black" onclick="black()"></div>
+                    <div id="red" onclick="red()"></div>
+                    <div id="pink" onclick="pink()"></div>
+                </div>
+
+                <div class="feature">
+                    <strong>FEATURE <br /><button id="time" onclick="timebtn()">Time</button>
+                        <button id="heart" onclick="hrtbtn()">Heart Rate</button></strong>
+                    <br>
+                    <button id="buy">Buy Now</button>
+                </div>
+            </div>
+        </div>
+    </section>
+</body>
+<script src="index.js"></script>
+</html>
diff --git a/smart_watch/index.js b/smart_watch/index.js
@@ -0,0 +1,37 @@
+function GetTime() {
+    var now = new Date();
+    document.getElementById('times').innerHTML = now.toLocaleTimeString();
+}
+function f1() {
+    setInterval(GetTime, 1000);
+}
+
+function hrtbtn() {
+    document.getElementById('hrtdiv').style.visibility = "visible";
+    document.getElementById('times').style.visibility = "hidden";
+}
+function timebtn() {
+    document.getElementById('times').style.visibility = "visible";
+    document.getElementById('hrtdiv').style.visibility = "hidden";
+}
+
+
+function black() {
+    document.getElementById("pic1").src = "black.png";
+}
+
+function red() {
+    document.getElementById("pic1").src = "red.png";
+}
+
+function blue() {
+    document.getElementById("pic1").src = "blue.png";
+}
+
+function pink() {
+    document.getElementById("pic1").src = "pink.png";
+}
+
+function purple() {
+    document.getElementById("pic1").src = "purple.png";
+}
diff --git a/smart_watch/pic1.png b/smart_watch/pic1.png
diff --git a/smart_watch/pink.png b/smart_watch/pink.png
diff --git a/smart_watch/purple.png b/smart_watch/purple.png
diff --git a/smart_watch/red.png b/smart_watch/red.png