diff --git a/background.js b/background.js deleted file mode 100644 index da58e29..0000000 --- a/background.js +++ /dev/null @@ -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); \ No newline at end of file diff --git a/clock.js b/clock.js deleted file mode 100644 index 4974822..0000000 --- a/clock.js +++ /dev/null @@ -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); diff --git a/Background/1.jpg b/img/background/1.jpg similarity index 100% rename from Background/1.jpg rename to img/background/1.jpg diff --git a/Background/10.jpg b/img/background/10.jpg similarity index 100% rename from Background/10.jpg rename to img/background/10.jpg diff --git a/Background/11.jpg b/img/background/11.jpg similarity index 100% rename from Background/11.jpg rename to img/background/11.jpg diff --git a/Background/12.jpg b/img/background/12.jpg similarity index 100% rename from Background/12.jpg rename to img/background/12.jpg diff --git a/Background/13.png b/img/background/13.png similarity index 100% rename from Background/13.png rename to img/background/13.png diff --git a/Background/14.jpg b/img/background/14.jpg similarity index 100% rename from Background/14.jpg rename to img/background/14.jpg diff --git a/Background/15.jpg b/img/background/15.jpg similarity index 100% rename from Background/15.jpg rename to img/background/15.jpg diff --git a/Background/16.jpg b/img/background/16.jpg similarity index 100% rename from Background/16.jpg rename to img/background/16.jpg diff --git a/Background/18.jpg b/img/background/18.jpg similarity index 100% rename from Background/18.jpg rename to img/background/18.jpg diff --git a/Background/19.jpg b/img/background/19.jpg similarity index 100% rename from Background/19.jpg rename to img/background/19.jpg diff --git a/Background/2.jpg b/img/background/2.jpg similarity index 100% rename from Background/2.jpg rename to img/background/2.jpg diff --git a/Background/21.jpg b/img/background/21.jpg similarity index 100% rename from Background/21.jpg rename to img/background/21.jpg diff --git a/Background/22.jpg b/img/background/22.jpg similarity index 100% rename from Background/22.jpg rename to img/background/22.jpg diff --git a/Background/24.jpg b/img/background/24.jpg similarity index 100% rename from Background/24.jpg rename to img/background/24.jpg diff --git a/Background/25.jpg b/img/background/25.jpg similarity index 100% rename from Background/25.jpg rename to img/background/25.jpg diff --git a/Background/26.jpg b/img/background/26.jpg similarity index 100% rename from Background/26.jpg rename to img/background/26.jpg diff --git a/Background/27.jpg b/img/background/27.jpg similarity index 100% rename from Background/27.jpg rename to img/background/27.jpg diff --git a/Background/28.jpg b/img/background/28.jpg similarity index 100% rename from Background/28.jpg rename to img/background/28.jpg diff --git a/Background/29.jpg b/img/background/29.jpg similarity index 100% rename from Background/29.jpg rename to img/background/29.jpg diff --git a/Background/30.jpg b/img/background/30.jpg similarity index 100% rename from Background/30.jpg rename to img/background/30.jpg diff --git a/Background/34.jpg b/img/background/34.jpg similarity index 100% rename from Background/34.jpg rename to img/background/34.jpg diff --git a/Background/4.jpg b/img/background/4.jpg similarity index 100% rename from Background/4.jpg rename to img/background/4.jpg diff --git a/Background/5.jpg b/img/background/5.jpg similarity index 100% rename from Background/5.jpg rename to img/background/5.jpg diff --git a/Background/6.jpg b/img/background/6.jpg similarity index 100% rename from Background/6.jpg rename to img/background/6.jpg diff --git a/Background/7.jpg b/img/background/7.jpg similarity index 100% rename from Background/7.jpg rename to img/background/7.jpg diff --git a/Background/8.png b/img/background/8.png similarity index 100% rename from Background/8.png rename to img/background/8.png diff --git a/Background/9.jpg b/img/background/9.jpg similarity index 100% rename from Background/9.jpg rename to img/background/9.jpg diff --git a/Pictures/amazon.png b/img/icons/amazon.png similarity index 100% rename from Pictures/amazon.png rename to img/icons/amazon.png diff --git a/Pictures/netflix.png b/img/icons/netflix.png similarity index 100% rename from Pictures/netflix.png rename to img/icons/netflix.png diff --git a/Pictures/reddit.png b/img/icons/reddit.png similarity index 100% rename from Pictures/reddit.png rename to img/icons/reddit.png diff --git a/Pictures/twitch.png b/img/icons/twitch.png similarity index 100% rename from Pictures/twitch.png rename to img/icons/twitch.png diff --git a/Pictures/youtube.png b/img/icons/youtube.png similarity index 100% rename from Pictures/youtube.png rename to img/icons/youtube.png diff --git a/index.html b/index.html index 7b831c4..9738eed 100644 --- a/index.html +++ b/index.html @@ -5,51 +5,32 @@ Get Started - + + - -
-
Good Day
+
+
+
+
+
+
+
What would you like to do today?
+
+ +
- -
-
- - Twitch - -
- -
- - Youtube - -
- -
- - Netflix - -
- -
- - Reddit - -
- -
- - Amazon - -
- - -
+ \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..f611178 --- /dev/null +++ b/script.js @@ -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 + " "; + 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); \ No newline at end of file diff --git a/styles.css b/styles.css index 017bc1b..d006ed5 100644 --- a/styles.css +++ b/styles.css @@ -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%; + } +} \ No newline at end of file