diff --git a/LICENSE b/LICENSE
index e398f3c..68f9444 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
MIT License
-Copyright (c) 2019 Jiahua Chen
+Copyright (c) 2019 Jiahua Chen & Nicholas Lorentzen
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index a680bc5..21d4ebb 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# 🕒 CClock · 
+# 🕒 CClock · 
**CClock** stands for *countdown clock*, or *class clock*. It is meant to count down the time left in each class block, and is also a reminder for the time remaining until the start of the next class block. CClock is fully customizable, adaptable, and works on all devices. Additionally, the simplest version of CClock (here) is fully static and only runs clientside. This means that CClock can be run from Github Pages or another static site host.
@@ -49,13 +49,7 @@ animation: Gradient 15s ease infinite;
## Customization
### Add your own schedule
-`script.js` is the controller for the clock on the page. It's simple but naïve –– the static page requires static changes to the code. For now, this means that you need to go into the actual functions to change the schedule, and the schedule unfortunately is not dynamically loading.
-
-`getSchedule()` gets the schedules of the day and outputs the correct block/period. `weekday` starts on Sunday (0), thus making Monday 1, and so on. You want to define and fill the array currentSchedule to indicate the period the specific weekday is following:
-```javascript
-currentSchedule[0] = new Period("Period 1", 8, 30, 9, 15);
-```
-Where `new Period("Period 1", 8, 30, 9, 15)` means that the first period of the day (in `currentSchedule[0]`) is called "Period 1", and it starts at 8:30 AM and ends at 9:15 AM. The rest of the periods, and the rest of the days are defined similarly.
+//NEEDS TO BE REWRITTEN TO SPECIFY 2 WAYS OF CUSTOMIZATION
### Special schedules
At the start of the document, there are definitions for special days. On some occasions, events or special schedules might disrupt the normal schedule. This is where it should be defined and noted. Note that `new CalDay(3, 8)` means 8th of March.
@@ -111,4 +105,4 @@ The clock will also display a random inspirational quote whenever you load it, l
## Thanks
The design of version 2 was inspired by [Decount](https://decount.co/) (and this design was reimplemented into Decount), and the original source code was adapted from [Eric Li's Network Clock](https://github.com/eli8527/Network-Clock).
-CClock © 2019, Jiahua Chen. Released under the [MIT License](https://mit-license.org/).
+CClock © 2020, [Nicholas Lorentzen](github.com/EKKOING). Released under the [MIT License](https://mit-license.org/).
diff --git a/corona-clock/assets/screenshot.jpg b/corona-clock/assets/screenshot.jpg
new file mode 100644
index 0000000..f009dd2
Binary files /dev/null and b/corona-clock/assets/screenshot.jpg differ
diff --git a/corona-clock/index-scroll.html b/corona-clock/index-scroll.html
new file mode 100644
index 0000000..0c6f5fb
--- /dev/null
+++ b/corona-clock/index-scroll.html
@@ -0,0 +1,93 @@
+
+
+
+
+ Hotchkiss Clock
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Eric Li ’13, Jiahua Chen ’20
+
+
+
Hotchkiss Clock
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Eric Li ’13, Jiahua Chen ’20, Nicholas Lorentzen ’20 V1.14
+
+
+
Scheduler for Hotchkiss Clock
+
+
+
+
+
+
+ Time/Day
+ Monday
+ Tuesday
+ Wednesday
+ Thursday
+ Friday
+
+
+ 9:30 - 10:15
+ HD 250
+
+
+ 10:25 - 11:10
+
+
+ 11:20 - 12:05
+
+
+ 12:15 - 12:35
+ Advisory
+ HD 150 & 550
+ Class Meeting
+ Chapel
+ All-School Meeting
+
+
+
+
+
= 12) ? 'PM' : 'AM';
+
+ // Outputs to HTML
+ document.getElementById("clock").innerHTML = hr + ":" + ("0" + d.getMinutes()).slice(-2) + " " + sufx;
+}
+
+function loadDate() {
+ // Dictionary for text-based date
+ var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+ //var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+ // Outputs to HTML
+ descText = days[d.getDay()];
+}
+
+// Below mostly code from Eric Li '13
+
+// Defines a Period
+function Period(title, startHr, startMin, endHr, endMin) {
+ this.title = title;
+ this.startHr = startHr;
+ this.startMin = startMin;
+ this.startRaw = startHr * 3600 + startMin * 60;
+ this.endHr = endHr;
+ this.endMin = endMin;
+ this.endRaw = endHr * 3600 + endMin * 60;
+}
+
+function CalDay(month, date) {
+ this.date = date;
+ // console.log(this.date);
+ this.month = month - 1;
+ // console.log(this.month);
+}
+
+// Updates the clock messages
+function update() {
+ var i = 0;
+ // Stores the dayType
+ var type = dayType();
+ // Debug ***
+ // console.log(type);
+ // Checks for special days
+ if (type === 1) {
+ specialSchedule();
+ } else if (type === 2) {
+ noClassSat();
+ } else if (type === 3) {
+ noClasses();
+ } else if (type === 4) {
+ holiday();
+ } else if (type === 5) {
+ schoolBreak();
+ } else if (type === 0) {
+ // console.log(" *** Is normal day");
+ // Gets today's schedule
+ var currentSchedule = getSchedule(d.getDay());
+ // console.log(" *** currentSchedule " + currentSchedule.length);
+
+ // Checks which Period it currently is
+ for (i = 0; i < currentSchedule.length; i++) {
+ // console.log(" *** for i " + i);
+ // console.log(" *** parseRaw " + parseRaw());
+
+ if (parseRaw() < currentSchedule[0].startRaw) {
+ beforeSchool(currentSchedule[0].title, currentSchedule[0].startRaw - parseRaw());
+ }
+
+ if (currentSchedule[i].startRaw < parseRaw() && parseRaw() < currentSchedule[i].endRaw) {
+ // console.log(" *** currentSchedule[i].startRaw " + currentSchedule[i].startRaw);
+ currentArrayLoc = i;
+ if (currentSchedule[i].title === "Passing Period") {
+ normalDay(currentSchedule[i].title, currentSchedule[i].endRaw - parseRaw(), currentSchedule[i + 1].title, currentSchedule[i + 1].startRaw - parseRaw());
+ } else {
+ normalDay(currentSchedule[i].title, currentSchedule[i].endRaw - parseRaw(), currentSchedule[i + 2].title, currentSchedule[i + 2].startRaw - parseRaw());
+ }
+ }
+
+ if (parseRaw() > currentSchedule[currentSchedule.length - 1].endRaw) {
+ currentArrayLoc = currentSchedule.length + 1;
+ showTime = true;
+ document.getElementById("class-info").innerHTML = "";
+ document.getElementById("schedule-info").innerHTML = descText + " ⋅ Have a nice day! ";
+ }
+ }
+ previewTableCreate();
+ }
+ if (showTime) {
+ document.getElementById("hrs").style.display = "block";
+ var rawTime = parseRaw();
+ document.documentElement.style.setProperty('--timer-hours', "'" + toHrs(rawTime).toLocaleString('en-US', {
+ minimumIntegerDigits: 2,
+ useGrouping: false
+ }) + "'");
+ document.documentElement.style.setProperty('--timer-minutes', "'" + toMins(rawTime).toLocaleString('en-US', {
+ minimumIntegerDigits: 2,
+ useGrouping: false
+ }) + "'");
+ document.documentElement.style.setProperty('--timer-seconds', "'" + toSecs(rawTime).toLocaleString('en-US', {
+ minimumIntegerDigits: 2,
+ useGrouping: false
+ }) + "'");
+ }
+
+ // Code to change the Document Title, disabled for now.
+ // document.title = "Hotchkiss Clock ⋅ " + toHrs(rawTime).toLocaleString('en-US', {
+ // minimumIntegerDigits: 2,
+ // useGrouping: false
+ // }) + ":" + toMins(rawTime).toLocaleString('en-US', {
+ // minimumIntegerDigits: 2,
+ // useGrouping: false
+ // }) + ":" + toSecs(rawTime).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping: false});
+}
+
+// Gets the right schedule for a regular class day
+function getSchedule(weekday) {
+ // console.log(" *** d.getDate() " + d.getDay());
+
+ // Defines the schedule array
+ var schedule = [];
+
+ // Assigns class schedules for weekday scenarios
+ if (weekday >= 1 && weekday <= 5) {
+ schedule[0] = new Period("1", 9, 30, 10, 15);
+ schedule[1] = new Period("→ 2", 10, 15, 10, 25);
+ schedule[2] = new Period("2", 10, 25, 11, 10);
+ schedule[3] = new Period("→ 3", 11, 10, 11, 20);
+ schedule[4] = new Period("3", 11, 20, 12, 5);
+ schedule[5] = new Period("→ 4", 12, 5, 12, 15);
+ schedule[6] = new Period("4", 12, 15, 12, 35);
+ schedule[7] = new Period("5", 12, 35, 12, 35);
+ schedule[8] = new Period("5", 12, 35, 12, 35);
+ } else {
+ noClasses();
+ }
+
+ return cookieCheck(schedule, weekday);
+
+ //Cookie Check Copy
+
+}
+
+function specialSchedule() // <- What to print during special schedules
+{
+ document.getElementById("class-info").innerHTML = "Special Schedule ";
+ document.getElementById("schedule-info").innerHTML = "Please consult your email for details.";
+}
+
+function noClassSat() // <- What to print for no-class Saturdays
+{
+ document.getElementById("class-info").innerHTML = "";
+ document.getElementById("schedule-info").innerHTML = descText + " ⋅ No-class Saturday ";
+}
+
+function noClasses() // <- What to print when no classes
+{
+ document.getElementById("class-info").innerHTML = "";
+ document.getElementById("schedule-info").innerHTML = descText + " ⋅ No Class ";
+}
+
+function holiday() // <- What to print during holidays
+{
+ document.getElementById("class-info").innerHTML = "Holiday";
+ document.getElementById("schedule-info").innerHTML = "Enjoy your holiday!";
+}
+
+function schoolBreak() // <- What to print during school breaks
+{
+ document.getElementById("class-info").innerHTML = "Break";
+ document.getElementById("schedule-info").innerHTML = "Enjoy your break!";
+}
+
+function normalDay(nowTitle, nowDiff, nextTitle, nextDiff) // <- What to print during normal days
+{
+ document.getElementById("class-info").innerHTML = nowTitle;
+ document.getElementById("schedule-info").innerHTML = descText + weekendText;
+ printTime(nowDiff);
+}
+
+function beforeSchool(title, time) {
+ document.getElementById("class-info").innerHTML = title;
+ document.getElementById("schedule-info").innerHTML = descText + weekendText;
+ printTime(time);
+}
+
+function thisWeekend() {
+ for (var addDay = 0; addDay < 7; addDay++) {
+ var result = d;
+ result.setDate(result.getDate() + addDay);
+ for (var i = 0; i < noClassSats.length; i++) {
+ if (noClassSats[i].month === result.getMonth() && noClassSats[i].date === result.getDate()) {
+ return " ⋅ No-Class Weekend ";
+ }
+ }
+ }
+ return " ⋅ Normal Weekend ";
+}
+
+function parseRaw() {
+ return d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
+}
+
+function printTime(raw) {
+ showTime = false;
+ if (toHrs(raw) === 0) {
+ document.getElementById("hrs").style.display = "none";
+ } else {
+ document.documentElement.style.setProperty('--timer-hours', "'" + toHrs(raw).toLocaleString('en-US', {
+ minimumIntegerDigits: 2,
+ useGrouping: false
+ }) + "'");
+ }
+ document.documentElement.style.setProperty('--timer-minutes', "'" + toMins(raw).toLocaleString('en-US', {
+ minimumIntegerDigits: 2,
+ useGrouping: false
+ }) + "'");
+ document.documentElement.style.setProperty('--timer-seconds', "'" + toSecs(raw).toLocaleString('en-US', {
+ minimumIntegerDigits: 2,
+ useGrouping: false
+ }) + "'");
+}
+
+function toMins(raw) {
+ return Math.floor((raw % 3600) / 60);
+}
+
+function toHrs(raw) {
+ return Math.floor(raw / 3600);
+}
+
+function toSecs(raw) {
+ return (raw % 60);
+}
+
+// Converts raw time format to a parsed time string (DEPRECATED)
+/*
+function rawToString(raw) {
+ var output = "";
+
+ if (toHrs(raw) === 0) {
+ } else if (toHrs(raw) === 1) {
+ output += toHrs(raw) + " hour ";
+ } else {
+ output += toHrs(raw) + " hours ";
+ }
+
+ if (showSeconds) {
+ if (toMins(raw) === 0) {
+ if (toSecs(raw) === 1) {
+ output += toSecs(raw) + " second";
+ } else {
+ output += toSecs(raw) + " seconds";
+ }
+ } else if (toMins(raw) === 1) {
+ output += toMins(raw) + " minute ";
+ if (toSecs(raw) === 1) {
+ output += toSecs(raw) + " second";
+ } else {
+ output += toSecs(raw) + " seconds";
+ }
+ } else {
+ output += toMins(raw) + " minutes ";
+ if (toSecs(raw) === 1) {
+ output += toSecs(raw) + " second";
+ } else {
+ output += toSecs(raw) + " seconds";
+ }
+ }
+ } else {
+ var ceilMins = toMins(raw) + 1;
+ if (toMins(raw) === 0) {
+ output += ceilMins + " minute";
+ } else {
+ output += ceilMins + " minutes";
+ }
+ }
+ return output;
+}
+*/
+
+window.addEventListener('load', onLoad);
+
+function onLoad() {
+ //d = new Date();
+ loadTime();
+ loadDate();
+ update();
+ weekendText = thisWeekend();
+ document.getElementById("schedule-message").style.display = "block";
+
+ if (localStorage.getItem('noDecount') != null && localStorage.getItem('noDecount') === 'true') {
+ stopShowingDecountAd();
+ } else {
+ document.getElementById("noDc").onclick = function() {
+ var decountAd = document.getElementById("decount-id");
+ decountAd.parentNode.removeChild(decountAd);
+ localStorage.setItem('noDecount', 'true');
+ return false;
+ }
+ }
+}
+
+// Below Code from Nicholas Lorentzen '20
+//This code was added to add the functionality of inputting a schedule
+
+//Some code off a website to check cookies
+function getCookie(cname) {
+ var name = cname + "=";
+ var decodedCookie = decodeURIComponent(document.cookie);
+ var ca = decodedCookie.split(';');
+ for(var i = 0; i 5){currentPeriodNum = currentPeriodNum + 1;}
+ if(currentPeriodName.includes("5B")){currentPeriodNum = 6;}
+ if(!(getCookie(currentAbbrev + currentPeriodNum) === "")){
+ currentPeriodName = getCookie(currentAbbrev + currentPeriodNum);
+ if(addArrow){currentPeriodName = "→ " + currentPeriodName;}
+ }
+ currentPeriod.title = currentPeriodName;
+ scheduleToCheck[i] = currentPeriod;
+ }
+ */
+ }
+ return scheduleToCheck;
+}
+
+//Adds Schedule Preview and Custom Messages
+function previewTableCreate() {
+ //if(document.cookie === "") {return;}
+ var myArrayLoc = currentArrayLoc;
+ var previewSchedule = getSchedule(d.getDay());
+ var nextDay = false;
+ if(myArrayLoc > previewSchedule.length || d.getDay() === 0){
+ if(d.getDay() + 1 == 7){
+ return;
+ }
+ previewSchedule = getSchedule(d.getDay() + 1);
+ myArrayLoc = -1;
+ nextDay = true;
+ }
+ var openingMessage = "";
+ if(nextDay){
+ openingMessage = "Here's a preview of your schedule tomorrow:";
+ } else if(currentArrayLoc > previewSchedule.length / 2){
+ openingMessage = "Here's what the rest of your day looks like:";
+ } else {
+ openingMessage = "Here's your schedule for today:"
+ }
+
+ document.getElementById("opening-message").innerHTML = openingMessage;
+
+ removeElement("schedule-preview");
+ var widget = document.getElementById("preview-table");
+ var tbl = document.createElement('table');
+ tbl.style.width = '100%';
+ tbl.setAttribute("align", "center");
+ tbl.setAttribute("id","schedule-preview")
+ var tbdy = document.createElement('tbody');
+ var tr = document.createElement('tr');
+ tr.style.textDecoration = "underline";
+ for (var j = 0; j < 2; j++) {
+ var th = document.createElement("th");
+ th.setAttribute("id","t"+j)
+ th.style.fontWeight = "600";
+ if (j === 0) {th.innerHTML= "Time Till";} else {th.innerHTML= "Event";}
+ tr.appendChild(th);
+ }
+ tbdy.appendChild(tr);
+
+ for(var i = myArrayLoc + 1; i < previewSchedule.length - 2; i++) {
+ var currentPeriod = previewSchedule[i];
+ if(!(currentPeriod.title.includes("→") || currentPeriod.title.includes("Bell"))){
+ tr = document.createElement('tr');
+ for (j = 0; j < 2; j++) {
+ var td = document.createElement('td');
+ td.setAttribute("id","td"+i+j);
+ td.setAttribute("align","center");
+
+ if(j == 0){
+ if (nextDay){
+ currentPeriod.startRaw = currentPeriod.startRaw + (3600 * 24);
+ }
+ var minsToClass = toMins(currentPeriod.startRaw - parseRaw());
+ if (minsToClass < 10) {
+ minsToClass = "0" + minsToClass;
+ if (minsToClass < 1) {
+ minsToClass = "01";
+ }
+ }
+ var hrsToClass = toHrs(currentPeriod.startRaw- parseRaw());
+ if (hrsToClass < 1){
+ hrsToClass = "0";
+ }
+ td.innerHTML = "T- " + hrsToClass + ":" + minsToClass;
+ } else {
+ td.innerHTML = currentPeriod.title;
+ }
+ tr.appendChild(td);
+ }
+ tbdy.appendChild(tr);
+ }
+ }
+ tbl.appendChild(tbdy);
+ widget.appendChild(tbl);
+}
+
+function removeElement(elementId) {
+ // Removes an element from the document
+ var element = document.getElementById(elementId);
+ if (element){
+ element.parentNode.removeChild(element);
+ }
+}
+
+function updateMainMessage()
+{
+ if(d.getMonth() === 8 && d.getDay() < 2){
+ mainMessage = "Welcome Back!";
+ if(getCookie("name") != ""){
+ mainMessage = "Welcome Back " + getCookie("name") +"!";
+ }
+ }else{
+ if(d.getHours() <= 5 && d.getHours() > 20){
+ mainMessage = "Goodnight...";
+ }else if (d.getHours() < 12 && d.getHours() >= 5){
+ mainMessage = "Good Morning!";
+ if(getCookie("name") != ""){
+ mainMessage = "Good Morning " + getCookie("name") +"!";
+ }
+ }else if (d.getHours() < 17 && d.getHours() >= 12){
+ mainMessage = "Good Afternoon!";
+ if(getCookie("name") != ""){
+ mainMessage = "Good Afternoon " + getCookie("name") +"!";
+ }
+ }else{
+ mainMessage = "Good Evening!";
+ if(getCookie("name") != ""){
+ mainMessage = "Good Evening " + getCookie("name") +"!";
+ }
+ }
+ }
+
+ if (!(mainMessage === "")) {
+ document.getElementById("message").innerHTML = mainMessage;
+ document.getElementById("message-widget").style.display = "block";
+ }
+}
+
+function stopShowingDecountAd() {
+ var decountAd = document.getElementById("decount-id");
+ decountAd.parentNode.removeChild(decountAd);
+ localStorage.setItem('noDecount', 'true');
+}
+
+setInterval(loadTime, 1000);
+setInterval(loadDate, 1000);
+setInterval(updateD, 1000);
+setInterval(update, 1000);
+setInterval(updateMainMessage, 1000);
diff --git a/corona-clock/style.css b/corona-clock/style.css
new file mode 100644
index 0000000..60f27f8
--- /dev/null
+++ b/corona-clock/style.css
@@ -0,0 +1,357 @@
+/* Loading hrs, min, and seconds content */
+.clock-hours:before {
+ content: var(--timer-hours);
+}
+
+.clock-minutes:before {
+ content: var(--timer-minutes);
+}
+
+.clock-seconds:before {
+ content: var(--timer-seconds);
+}
+
+/* Body style */
+body {
+ /* Font */
+ font-family: 'Open Sans', sans-serif;
+ min-height: 300px;
+ min-width: 500px;
+ display: flex;
+ align-items: center;
+ justify-content: left;
+ color: #fff;
+ /* Animated gradient background */
+ background: linear-gradient(-30deg, #111E6C, #0E4D92, #0F52BA, #003152);
+ background-size: 1000% 1000%;
+ -webkit-animation: Gradient 15s ease infinite;
+ -moz-animation: Gradient 15s ease infinite;
+ animation: Gradient 15s ease infinite;
+ z-index: -50;
+}
+
+/* Weather style */
+.weather {
+ float: right;
+ position: absolute;
+ width: 160px;
+ top: 0px;
+ right: 0px;
+ z-index: 10;
+}
+
+/* Class info style */
+#class-info {
+ display: flex;
+ position: fixed;
+ left: 45px;
+ bottom: 250px;
+ font-size: 4em;
+ font-weight: 700;
+ z-index: 8;
+}
+
+/* Schedule info style */
+#schedule-info {
+ display: flex;
+ position: fixed;
+ left: 50px;
+ bottom: 220px;
+ font-size: 1.3em;
+ white-space: pre-wrap;
+ z-index: 8;
+}
+
+/* Clock big container style */
+.clock-container {
+ background-color: #202020;
+ border-radius: 5px;
+ padding: 25px 10px;
+ box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5), 0 15px 90px 30px rgba(0, 0, 0, 0.15);
+ display: flex;
+ position: fixed;
+ left: 40px;
+ bottom: 40px;
+ z-index: 8;
+}
+
+/* Clock column style */
+.clock-col {
+ text-align: center;
+ margin-right: 40px;
+ margin-left: 40px;
+ min-width: 90px;
+ position: relative;
+}
+
+.clock-col:not(:last-child):before, .clock-col:not(:last-child):after {
+ content: "";
+ background-color: rgba(255, 255, 255, 0.3);
+ height: 5px;
+ width: 5px;
+ border-radius: 50%;
+ display: block;
+ position: absolute;
+ right: -42px;
+}
+
+.clock-col:not(:last-child):before {
+ top: 35%;
+}
+
+.clock-col:not(:last-child):after {
+ top: 50%;
+}
+
+.clock-timer:before {
+ color: #fff;
+ font-size: 5.2rem;
+ text-transform: uppercase;
+ font-weight: 600;
+}
+
+.clock-label {
+ color: rgba(255, 255, 255, 0.35);
+ text-transform: uppercase;
+ font-size: .7rem;
+ margin-top: 10px;
+}
+
+/* Corner clock style */
+#clock {
+ font-size: 1.5rem;
+ font-weight: 600;
+ position: absolute;
+ left: 30px;
+ top: 30px;
+ z-index: 11;
+}
+
+#widgets-bar {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ width: 400px;
+ height: 60%;
+ padding: 100px 50px 50px 100%;
+
+ /* Gradient Mask*/
+ -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 5%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 100%);
+ mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 5%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 100%);
+ overflow-y: scroll;
+ overflow-x: hidden;
+ z-index: 0;
+
+ /* Wrapping */
+ /*flex-wrap: wrap-reverse;*/
+}
+
+.widget {
+ background-color: rgba(20, 20, 20, 0.5);
+ border-radius: 5px;
+ padding: 25px;
+ box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5), 0 15px 90px 30px rgba(0, 0, 0, 0.15);
+ margin: 15px 0px;
+ line-height: 1.3;
+}
+
+.widget:last-of-type {
+ margin-bottom: 60px;
+}
+
+/* For mobile display */
+@media (max-width: 615px), (max-height: 400px) {
+ .clock-container {
+ border-radius: 0px;
+ padding: 20px 100%;
+ bottom: 0px;
+ left: 50%;
+ transform: translate(-50%, 0%);
+ justify-content: center;
+ }
+
+ .clock-timer:before {
+ font-size: 3rem;
+ }
+
+ #class-info {
+ font-size: 3.4rem;
+ bottom: 170px;
+ }
+
+ #schedule-info {
+ font-size: 1.2rem;
+ bottom: 140px;
+ }
+
+ .clock-col {
+ text-align: center;
+ margin-right: 40px;
+ margin-left: 40px;
+ min-width: 70px;
+ position: relative;
+ }
+
+ #widgets-bar {
+ height: auto;
+ top: 0px;
+ bottom: 200px;
+ min-height: 0;
+ width: 100%;
+ justify-content: center;
+ padding: 80px 0px 0px 0px;
+ display: block;
+ overflow: scroll;
+ }
+
+ .widget {
+ position: relative;
+ margin: 25px 5%;
+ }
+}
+
+/* For chrome widget display */
+@media (max-height: 400px) {
+ .clock-timer:before {
+ font-size: 2rem;
+ }
+
+ #class-info {
+ font-size: 3rem;
+ bottom: 150px;
+ }
+
+ #schedule-info {
+ font-size: 1rem;
+ bottom: 120px;
+ }
+
+ .clock-col {
+ }
+
+ #clock {
+ font-size: 1.2rem;
+ }
+
+ .weather {
+ max-height: 40px;
+ }
+
+ #widgets-bar {
+ visibility: hidden;
+ }
+}
+
+#info {
+ position: absolute;
+ right: 30px;
+ bottom: 30px;
+}
+
+#info-text {
+ visibility: hidden;
+ font-size: 0.9em;
+ float: left;
+ text-align: right;
+ margin: 0px 5px;
+}
+
+#info-circle {
+ margin: 0px 5px;
+}
+
+#bug-report {
+ color: #ffffff;
+}
+
+#info:hover #info-text {
+ visibility: visible;
+}
+
+@media (max-width: 900px) {
+ #info {
+ visibility: hidden;
+ }
+}
+
+/* Sets styles of header, bold and strong as bold */
+h1, h2, h3, h4, h5, h6, b, strong {
+ font-weight: bold;
+}
+
+/* Gradient Code */
+@-webkit-keyframes Gradient {
+ 0% {
+ background-position: 0% 50%
+ }
+ 50% {
+ background-position: 100% 50%
+ }
+ 100% {
+ background-position: 0% 50%
+ }
+}
+
+@-moz-keyframes Gradient {
+ 0% {
+ background-position: 0% 50%
+ }
+ 50% {
+ background-position: 100% 50%
+ }
+ 100% {
+ background-position: 0% 50%
+ }
+}
+
+@keyframes Gradient {
+ 0% {
+ background-position: 0% 50%
+ }
+ 50% {
+ background-position: 100% 50%
+ }
+ 100% {
+ background-position: 0% 50%
+ }
+}
+
+/* Decount BS */
+.dcLink {
+ background-color:#44c767;
+ border-radius:28px;
+ border:1px solid #18ab29;
+ display:inline-block;
+ cursor:pointer;
+ color:#ffffff;
+ font-family:Arial;
+ font-size:17px;
+ padding:16px 31px;
+ text-decoration:none;
+ margin-top:10px;
+ text-shadow:0px 1px 0px #2f6627;
+}
+.dcLink:hover {
+ background-color:#5cbf2a;
+}
+.dcLink:active {
+ position:relative;
+ top:1px;
+}
+
+#noDc {
+ background-color:#c74444;
+ border-radius:28px;
+ border:1px solid #b84242;
+ display:inline-block;
+ cursor:pointer;
+ color:#ffffff;
+ font-family:Arial;
+ font-size:17px;
+ padding:16px 31px;
+ text-decoration:none;
+ margin-top:10px;
+ text-shadow:0px 1px 0px #5c1e1e;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8f9f25d..adfd3d7 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,7 @@
-
+
@@ -63,9 +62,9 @@
-
Eric Li ’13, Jiahua Chen ’20
+
Eric Li ’13, Jiahua Chen ’20, Nicholas Lorentzen ’20 V1.13
-
+
Scheduler for Hotchkiss Clock
+
+= 12) ? 'PM' : 'AM';
@@ -78,7 +87,7 @@ function loadTime() {
function loadDate() {
// Dictionary for text-based date
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
- var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+ //var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
// Outputs to HTML
descText = days[d.getDay()];
@@ -106,6 +115,7 @@ function CalDay(month, date) {
// Updates the clock messages
function update() {
+ var i = 0;
// Stores the dayType
var type = dayType();
// Debug ***
@@ -124,7 +134,7 @@ function update() {
} else if (type === 0) {
// console.log(" *** Is normal day");
// Gets today's schedule
- var currentSchedule = getSchedule();
+ var currentSchedule = getSchedule(d.getDay());
// console.log(" *** currentSchedule " + currentSchedule.length);
// Checks which Period it currently is
@@ -138,23 +148,26 @@ function update() {
if (currentSchedule[i].startRaw < parseRaw() && parseRaw() < currentSchedule[i].endRaw) {
// console.log(" *** currentSchedule[i].startRaw " + currentSchedule[i].startRaw);
+ currentArrayLoc = i;
if (currentSchedule[i].title === "Passing Period") {
normalDay(currentSchedule[i].title, currentSchedule[i].endRaw - parseRaw(), currentSchedule[i + 1].title, currentSchedule[i + 1].startRaw - parseRaw());
} else {
normalDay(currentSchedule[i].title, currentSchedule[i].endRaw - parseRaw(), currentSchedule[i + 2].title, currentSchedule[i + 2].startRaw - parseRaw());
}
}
+
if (parseRaw() > currentSchedule[currentSchedule.length - 1].endRaw) {
+ currentArrayLoc = currentSchedule.length + 1;
showTime = true;
document.getElementById("class-info").innerHTML = "";
document.getElementById("schedule-info").innerHTML = descText + " ⋅ Have a nice day! ";
}
}
- } else {
+ previewTableCreate();
}
if (showTime) {
document.getElementById("hrs").style.display = "block";
- rawTime = parseRaw();
+ var rawTime = parseRaw();
document.documentElement.style.setProperty('--timer-hours', "'" + toHrs(rawTime).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false
@@ -180,10 +193,9 @@ function update() {
}
// Gets the right schedule for a regular class day
-function getSchedule() {
+function getSchedule(weekday) {
// console.log(" *** d.getDate() " + d.getDay());
- var weekday = d.getDay();
-
+
// Defines the currentSchedule array
var currentSchedule = [];
@@ -192,7 +204,7 @@ function getSchedule() {
currentSchedule[0] = new Period("Period 1", 8, 30, 9, 15);
currentSchedule[1] = new Period("→ Period 2", 9, 15, 9, 20);
currentSchedule[2] = new Period("Period 2", 9, 20, 10, 5);
- currentSchedule[3] = new Period("Passing Period", 10, 5, 10, 10);
+ currentSchedule[3] = new Period("→ Chapel / Class Meeting", 10, 5, 10, 10);
currentSchedule[4] = new Period("Chapel / Class Meeting", 10, 10, 10, 35);
currentSchedule[5] = new Period("→ Period 3", 10, 35, 10, 40);
currentSchedule[6] = new Period("Period 3", 10, 40, 11, 20);
@@ -212,7 +224,7 @@ function getSchedule() {
currentSchedule[0] = new Period("Period 1", 8, 30, 9, 10);
currentSchedule[1] = new Period("→ Period 2", 9, 10, 9, 15);
currentSchedule[2] = new Period("Period 2", 9, 15, 9, 55);
- currentSchedule[3] = new Period("Passing Period", 9, 55, 10, 0);
+ currentSchedule[3] = new Period("→ Auditorium", 9, 55, 10, 0);
currentSchedule[4] = new Period("Auditorium", 10, 0, 10, 35);
currentSchedule[5] = new Period("→ Period 3", 10, 35, 10, 40);
currentSchedule[6] = new Period("Period 3", 10, 40, 11, 20);
@@ -253,13 +265,14 @@ function getSchedule() {
} else {
noClasses();
}
- return currentSchedule;
+
+ return cookieCheck(currentSchedule, weekday);
}
function specialSchedule() // <- What to print during special schedules
{
document.getElementById("class-info").innerHTML = "Special Schedule ";
- document.getElementById("schedule-info").innerHTML = "Please consult your planner for details.";
+ document.getElementById("schedule-info").innerHTML = "Please consult your email for details.";
}
function noClassSat() // <- What to print for no-class Saturdays
@@ -294,16 +307,16 @@ function normalDay(nowTitle, nowDiff, nextTitle, nextDiff) // <- What to print d
}
function beforeSchool(title, time) {
- document.getElementById("class-info").innerHTML = "→ " + title;
+ document.getElementById("class-info").innerHTML = title;
document.getElementById("schedule-info").innerHTML = descText + weekendText;
printTime(time);
}
function thisWeekend() {
- for (d = 0; d < 7; d++) {
- var result = new Date();
- result.setDate(result.getDate() + d);
- for (i = 0; i < noClassSats.length; i++) {
+ for (var addDay = 0; addDay < 7; addDay++) {
+ var result = d;
+ result.setDate(result.getDate() + addDay);
+ for (var i = 0; i < noClassSats.length; i++) {
if (noClassSats[i].month === result.getMonth() && noClassSats[i].date === result.getDate()) {
return " ⋅ No-Class Weekend ";
}
@@ -348,7 +361,8 @@ function toSecs(raw) {
return (raw % 60);
}
-// Converts raw time format to a parsed time string
+// Converts raw time format to a parsed time string (DEPRECATED)
+/*
function rawToString(raw) {
var output = "";
@@ -391,18 +405,192 @@ function rawToString(raw) {
}
return output;
}
+*/
window.addEventListener('load', onLoad);
function onLoad() {
- d = new Date();
+ //d = new Date();
loadTime();
loadDate();
update();
weekendText = thisWeekend();
+ document.getElementById("schedule-message").style.display = "block";
+}
+
+// Below Code from Nicholas Lorentzen '20
+//This code was added to add the functionality of inputting a schedule
+
+//Some code off a website to check cookies
+function getCookie(cname) {
+ var name = cname + "=";
+ var decodedCookie = decodeURIComponent(document.cookie);
+ var ca = decodedCookie.split(';');
+ for(var i = 0; i 5){currentPeriodNum = currentPeriodNum + 1;}
+ if(currentPeriodName.includes("5B")){currentPeriodNum = 6;}
+ if(!(getCookie(currentAbbrev + currentPeriodNum) === "")){
+ currentPeriodName = getCookie(currentAbbrev + currentPeriodNum);
+ if(addArrow){currentPeriodName = "→ " + currentPeriodName;}
+ }
+ currentPeriod.title = currentPeriodName;
+ scheduleToCheck[i] = currentPeriod;
+ }
+ }
+ return scheduleToCheck;
+}
+
+//Adds Schedule Preview and Custom Messages
+function previewTableCreate() {
+ //if(document.cookie === "") {return;}
+ var myArrayLoc = currentArrayLoc;
+ var currentSchedule = getSchedule(d.getDay());
+ var nextDay = false;
+ if(myArrayLoc > currentSchedule.length || d.getDay() === 0){
+ if(d.getDay() + 1 == 7){
+ return;
+ }
+ currentSchedule = getSchedule(d.getDay() + 1);
+ myArrayLoc = -1;
+ nextDay = true;
+ }
+ var openingMessage = "";
+ if(nextDay){
+ openingMessage = "Here's a preview of your schedule tomorrow:";
+ } else if(currentArrayLoc > currentSchedule.length / 2){
+ openingMessage = "Here's what the rest of your day looks like:";
+ } else {
+ openingMessage = "Here's your schedule for today:"
+ }
+
+ document.getElementById("opening-message").innerHTML = openingMessage;
+
+ removeElement("schedule-preview");
+ var widget = document.getElementById("preview-table");
+ var tbl = document.createElement('table');
+ tbl.style.width = '100%';
+ tbl.setAttribute("align", "center");
+ tbl.setAttribute("id","schedule-preview")
+ var tbdy = document.createElement('tbody');
+ var tr = document.createElement('tr');
+ tr.style.textDecoration = "underline";
+ for (var j = 0; j < 2; j++) {
+ var th = document.createElement("th");
+ th.setAttribute("id","t"+j)
+ th.style.fontWeight = "600";
+ if (j === 0) {th.innerHTML= "Time Till";} else {th.innerHTML= "Event";}
+ tr.appendChild(th);
+ }
+ tbdy.appendChild(tr);
+
+ for(var i = myArrayLoc + 1; i < currentSchedule.length - 2; i++) {
+ var currentPeriod = currentSchedule[i];
+ if(!(currentPeriod.title.includes("→") || currentPeriod.title.includes("Bell"))){
+ tr = document.createElement('tr');
+ for (j = 0; j < 2; j++) {
+ var td = document.createElement('td');
+ td.setAttribute("id","td"+i+j);
+ td.setAttribute("align","center");
+
+ if(j == 0){
+ if (nextDay){
+ currentPeriod.startRaw = currentPeriod.startRaw + (3600 * 24);
+ }
+ var minsToClass = toMins(currentPeriod.startRaw - parseRaw());
+ if (minsToClass < 10) {
+ minsToClass = "0" + minsToClass;
+ if (minsToClass < 1) {
+ minsToClass = "01";
+ }
+ }
+ var hrsToClass = toHrs(currentPeriod.startRaw- parseRaw());
+ if (hrsToClass < 1){
+ hrsToClass = "0";
+ }
+ td.innerHTML = "T- " + hrsToClass + ":" + minsToClass;
+ } else {
+ td.innerHTML = currentPeriod.title;
+ }
+ tr.appendChild(td);
+ }
+ tbdy.appendChild(tr);
+ }
+ }
+ tbl.appendChild(tbdy);
+ widget.appendChild(tbl);
+}
+
+function removeElement(elementId) {
+ // Removes an element from the document
+ var element = document.getElementById(elementId);
+ if (element){
+ element.parentNode.removeChild(element);
+ }
+}
+
+function updateMainMessage()
+{
+ if(d.getMonth() === 8 && d.getDay() < 2){
+ mainMessage = "Welcome Back!";
+ if(getCookie("name") != ""){
+ mainMessage = "Welcome Back " + getCookie("name") +"!";
+ }
+ }else{
+ if(d.getHours() <= 5 && d.getHours() > 20){
+ mainMessage = "Goodnight...";
+ }else if (d.getHours() < 12 && d.getHours() >= 5){
+ mainMessage = "Good Morning!";
+ if(getCookie("name") != ""){
+ mainMessage = "Good Morning " + getCookie("name") +"!";
+ }
+ }else if (d.getHours() < 17 && d.getHours() >= 12){
+ mainMessage = "Good Afternoon!";
+ if(getCookie("name") != ""){
+ mainMessage = "Good Afternoon " + getCookie("name") +"!";
+ }
+ }else{
+ mainMessage = "Good Evening!";
+ if(getCookie("name") != ""){
+ mainMessage = "Good Evening " + getCookie("name") +"!";
+ }
+ }
+ }
+
+ if (!(mainMessage === "")) {
+ document.getElementById("message").innerHTML = mainMessage;
+ document.getElementById("message-widget").style.display = "block";
+ }
}
setInterval(loadTime, 1000);
setInterval(loadDate, 1000);
setInterval(updateD, 1000);
setInterval(update, 1000);
+setInterval(updateMainMessage, 1000);