Fully overhauled and improved

2026-08-24 03:24:13 -05:00 · 2022-11-09 19:10:38 +05:30
parent dd741c1ff1
commit 34f0f30d5a
37 changed files with 238 additions and 141 deletions
@@ -1,15 +0,0 @@
-function changeImage()
-{
-	var fileList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.png', '9.jpg',
-					'10.jpg', '11.jpg', '12.jpg', '13.png', '14.jpg', '15.jpg', '16.jpg', '17.jpg',
-					'18.jpg', '19.jpg', '20.jpg', '21.jpg', '22.jpg', '24.jpg', '25.jpg',
-					'26.jpg', '27.jpg', '28.jpg', '29.jpg', '30.jpg', '34.jpg'];
-
-	var len = fileList.length;
-	var index = Math.floor(Math.random() * len);
-	var filePath = 'Background/' + fileList[index];
-
-	document.body.style.backgroundImage = 'url("'+filePath+'")';
-}
-
-$(document).ready(changeImage);
@@ -1,60 +0,0 @@
-function startTime() {  
-    // Get time values
-    var timeOfDay = "AM";
-    var today = new Date();
-    var hour = today.getHours();
-    var minute = today.getMinutes();
-    var second = today.getSeconds();
-    
-    // Convert the time to a 12 hour clock
-    timeOfDay = convertTimeOfDay(hour, timeOfDay);
-    hour = convertHour(hour);
-    
-    // Check time to adjust format
-    minute = checkTime(minute);
-    second = checkTime(second);
-
-    // Put time in the html document
-    document.getElementById('clock').innerHTML = hour + ":" + minute + ":" + second + " " + timeOfDay;
-    
-    // Call function again after specified amount of time
-    var t = setTimeout(startTime, 500);
-}
-
-function checkTime(i) {       
-    // Add a 0 for numbers less than 10
-    if (i < 10) 
-    {
-        i = "0" + i
-    }
-
-    return i;
-}
-
-function convertTimeOfDay(hour, timeOfDay) {
-    // Make the time AM or PM
-    if (hour > 12)
-    {
-        timeOfDay = "PM";
-    }
-    else
-    {
-        timeOfDay = "AM";
-    }
-
-    return timeOfDay;
-}
-
-function convertHour(hour) {
-    // Display time in the 12-hour format
-    if (hour == 0) {
-        hour = 12;
-    }
-    if (hour > 12) {
-        hour = hour - 12;
-    }
-    return hour;
-}
-
-// Start the clock once the page has loaded
-$(document).ready(startTime);
@@ -5,51 +5,32 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Started</title>
    <link href="styles.css" type="text/css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="/img/favicon.png">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
-    <script src="background.js"></script>
-    <script src="clock.js"></script>
 </head>
 <body>
    <div class="glass">
-        <div id="clock"></div>
        <div id="greeting">Good Day</div>
+        <div id="clock">
+            <div id="hour"></div>
+            <div id="minute"></div>
+            <div id="suffix"></div>
+        </div>
+        <div id="date"></div>
+        <div id="question">What would you like to do today?</div>
+        <div class="icons">
+            <ul>
+                <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
+                <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
+                <li><a href="#"><i class="fa-brands fa-github"></i></a></li>
+                <li><a href="#"><i class="fa-brands fa-reddit"></i></a></li>
+                <li><a href="#"><i class="fa-solid fa-video"></i></a></li>
+            </ul>
+        </div>
    </div>
-
-    <div class="boxContainer">
-        <div id="twitch" class="boxes">
-            <a href="https://www.twitch.tv/directory">
-                <img src="Pictures\twitch.png" width="75" height="75" alt="Twitch"/>
-            </a>
-        </div>
-
-        <div id="youtube" class="boxes">
-            <a href="https://www.youtube.com/feed/subscriptions">
-                <img src="Pictures\youtube.png" width="75" height="75" alt="Youtube"/>
-            </a>
-        </div>
-
-        <div id="netflix" class="boxes">
-            <a href="https://www.netflix.com/browse">
-                <img src="Pictures\netflix.png" width="75" height="75" alt="Netflix"/>
-            </a>
-        </div>
-
-        <div id="reddit" class="boxes">
-            <a href="https://www.reddit.com/">
-                <img src="Pictures\reddit.png" width="75" height="75" alt="Reddit"/>
-            </a>
-        </div>
-
-         <div id="amazon" class="boxes">
-            <a href="https://smile.amazon.com/">
-                <img src="Pictures\amazon.png" width="75" height="75" alt="Amazon"/>
-            </a>
-        </div>
-
-        <button onclick="changeImage()" type="button">Change Image</button>
-    </div>
+    <script src="script.js"></script>
 </body>
 </html>
@@ -0,0 +1,128 @@
+// CODE FOR THE SITE BACKGROUND
+
+function changeImage() {
+	let fileList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.png', '9.jpg',
+					'10.jpg', '11.jpg', '12.jpg', '13.png', '14.jpg', '15.jpg', '16.jpg', '17.jpg',
+					'18.jpg', '19.jpg', '20.jpg', '21.jpg', '22.jpg', '24.jpg', '25.jpg',
+					'26.jpg', '27.jpg', '28.jpg', '29.jpg', '30.jpg', '34.jpg'];
+
+    // selecting random image from fileList[] and setting it as background image
+	let filePath = 'img/background/' + fileList[Math.floor(Math.random() * fileList.length)];
+	document.body.style.backgroundImage = 'url(' + filePath + ')';
+}
+
+// CODE FOR THE GLASS OVERLAY AND ITS CHILD COMPONENTS
+
+function loadGlassOverlayComponents() {
+    // get/initialize time and date values
+    let timeOfDay = "AM";
+    let today = new Date();
+    let hour = today.getHours();
+    let minute = today.getMinutes();
+    let second = today.getSeconds();
+    let day = today.getDay();
+    let month = today.getMonth();
+    let year = today.getFullYear();
+
+    // set the greeting message according the time of the day
+    if (hour < 5) {
+        document.querySelector('#greeting').innerHTML = 'Late Night?'
+    } else if (hour < 12) {
+        document.querySelector('#greeting').innerHTML = 'Good Morning'
+    } else if (hour < 15) {
+        document.querySelector('#greeting').innerHTML = 'Good Afternoon'
+    } else if (hour < 22) {
+        document.querySelector('#greeting').innerHTML = 'Good Evening'
+    } else {
+        document.querySelector('#greeting').innerHTML = 'Late Night?'
+    }
+    
+    // convert the time to a 12-hour clock
+    timeOfDay = convertTimeOfDay(hour, timeOfDay);
+    hour = convertHour(hour);
+    
+    // check the time and adjust the format
+    minute = checkTime(minute);
+    second = checkTime(second);
+
+    // set the suffix of the day
+    let daySuffix;
+    if (day === 1) daySuffix = 'st';
+    else if (day === 2) daySuffix = 'nd';
+    else if (day === 3) daySuffix = 'rd';
+    else daySuffix = 'th';
+
+    // get the name of the month
+    let monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+    // display the time on the glass overlay
+    document.getElementById('hour').innerHTML = hour;
+    document.getElementById('minute').innerHTML = ":" + minute + "&nbsp;";
+    document.getElementById('suffix').innerHTML = timeOfDay;
+    
+    // display the date on the glass overlay
+    document.getElementById('date').innerHTML = "Today is the " + day + daySuffix + " of " + monthNames[month - 1] + " " + year;
+
+    // Call function again after specified amount of time
+    let t = setTimeout(loadGlassOverlayComponents, 500);
+}
+
+function checkTime(i) {       
+    // Add a 0 for numbers less than 10
+    if (i < 10) {
+        i = "0" + i
+    }
+    return i;
+}
+
+function convertTimeOfDay(hour, timeOfDay) {
+    // Make the time AM or PM
+    if (hour > 12) {
+        timeOfDay = "PM";
+    } else {
+        timeOfDay = "AM";
+    }
+    return timeOfDay;
+}
+
+function convertHour(hour) {
+    // Display time in the 12-hour format
+    if (hour == 0) {
+        hour = 12;
+    }
+    if (hour > 12) {
+        hour = hour - 12;
+    }
+    return hour;
+}
+
+function setBackgroundGradient() {
+    // Setting background gradients according to the time of the day
+
+    if (hour < 5) {
+        // early morning gradient
+        document.getElementsByTagName('body').style.background="linear-gradient(-45deg, #767d92, #2f4562, #152642, #081b33)";
+    } else if (hour < 12) {
+        // morning gradient
+        document.getElementsByTagName('body').style.background="linear-gradient(-45deg, #fa4e5e, #f9a9e, #99b9d0, #00b2d2)";
+    } else if (hour < 15) {
+        // afternoon gradient
+        document.getElementsByTagName('body').style.background="linear-gradient(-45deg, #96adcf, #4570b5, #234181, #1b2966)";
+    } else if (hour < 22) {
+        // evening gradient
+        document.getElementsByTagName('body').style.background="linear-gradient(-45deg, #fdec6e, #e0943d, #bc361a, #391106)";
+    } else if (hour < 24) {
+        // night gradient
+        document.getElementsByTagName('body').style.background="linear-gradient(-45deg, #767d92, #2f4562, #152642, #081b33)";
+    }
+
+    // animating gradients
+
+    document.getElementsByTagName('body').style.backgroundSize="400% 400%";
+    document.getElementsByTagName('body').style.animation="gradient 8s ease infinite";
+}
+
+// function calls
+$(document).ready(loadGlassOverlayComponents);
+// $(document).ready(changeImage);
+$(document).ready(setBackgroundGradient);
@@ -1,45 +1,108 @@
+/* INITIALIZATIONS */
+
 * { 
-    font-family: 'Inter';
+    font-family: 'Quicksand';
    color: white;
 }
 body {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-color: black;
-    display: grid;
+    display: flex;
    align-items: center;
    justify-content: center;
+    background: linear-gradient(-45deg, #B9E49F, #3DA597, #00617A, #003F5F);
+    background-size: 400% 400%;
+	animation: gradient 8s ease infinite;
+	height: auto;
 }
+
+/* GLASS OVERLAY */
+
 .glass {
+    z-index: 2;
    width: 50rem;
-    height: 25rem;
-    padding-left: 25px;
-    padding-right: 25px;
-    padding-bottom: 10px;
-    text-align: center;
+    height: 30rem;
+    padding: 1.2rem;
    box-shadow: 0 0 1rem 0 rgba(0,0,0,0.2);
    border-radius: 0.75rem;
    background-color: rgba(255,255,255,0.15);
    backdrop-filter: blur(0.7rem);
-
-    display: grid;
-    align-items: center;
-    justify-content: center;
-}
-#clock {
-    font-size: 500%;
-    text-align: center;
-}
-.boxContainer {
    display: flex;
-    margin: auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
 }
-.boxes {
-    display: block;
+
+/* GREETING MESSAGE ON GLASS OVERLAY */
+
+#greeting {
+    border: 1.2rem;
+    font-size: 2rem;
 }
-button {
-    background-color: black;
-    color: white;
-    border-color: grey;
-    width: 75px;
+
+/* CLOCK ON GLASS OVERLAY */
+
+#clock {
+    text-align: center;
+    display: flex;
+    align-items: center;
 }
+#hour {
+    font-size: 12rem;
+}
+#minute {
+    font-size: 5rem;
+}
+#suffix {
+    font-size: 1.4rem;
+}
+
+/* PROMPT ON GLASS OVERLAY */
+
+#question {
+    font-size: 1.5rem;
+}
+
+/* ICONS ON GLASS OVERLAY */
+
+.icons {
+    font-size: 3rem;
+    cursor: pointer;
+}
+.icons ul {
+    padding: 0;
+    margin: 1.2rem;
+    width: 25rem;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    list-style-type: none;
+}
+i {
+    transition: transform 0.3s;
+}
+i::after {      /* this removes unneccesary icon leftovers that may come from the FontAwesome CDN */ 
+    display: none;
+}
+
+/* HOVER STATES */
+
+i:hover {
+    transform: scale(1.2);
+}
+i:not(:hover) {     /* this ensures smooth transform animation when mouse pointer leaves the hover state */
+    transform: scale(1);
+    transition-duration: 0.40s;
+}
+
+/* BACKGROUND ANIMATION */
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}