Initial setup

hartator · Sep 18, 2019 · dddaabe · dddaabe
commit dddaabe
Show file tree

Hide file tree

Showing 15 changed files with 329 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# wheniskeynote.com
+
+Discover when Apple's next keynote / product event is happening!
+
+## Contribute
+
+Help us keep the website up to date.
+
+Add upcoming keynote / product event by updating `js/addNewEvent.js` file and creating a PR.
diff --git a/images/cal.svg b/images/cal.svg
diff --git a/images/download.ics b/images/download.ics
@@ -0,0 +1,11 @@
+BEGIN:VCALENDAR
+VERSION:2.0
+BEGIN:VEVENT
+URL:http://localhost/wheniskeynote/
+DTSTART:20191011T030000Z
+DTEND:20191011T050000Z
+SUMMARY:Apple iPhone 11 Launch Event
+DESCRIPTION:
+LOCATION:
+END:VEVENT
+END:VCALENDAR
diff --git a/images/favicon.ico b/images/favicon.ico
diff --git a/images/keynote_icon120x120.png b/images/keynote_icon120x120.png
diff --git a/images/keynote_icon176x176.png b/images/keynote_icon176x176.png
diff --git a/images/keynote_icon57x57.png b/images/keynote_icon57x57.png
diff --git a/images/keynote_icon76x76.png b/images/keynote_icon76x76.png
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="description" content="Discover when Apple&#39;s next keynote / product event is happening!">
+  <meta name="fragment" content="!">
+  <title>When is the next Apple keynote?</title>
+
+  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
+  <link rel="apple-touch-icon" href="images/keynote_icon57x57.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="images/keynote_icon76x76.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="images/keynote_icon120x120.png">
+  <link rel="apple-touch-icon" sizes="176x175" href="images/keynote_icon176x176.png">
+
+	<link rel="stylesheet" href="style/main.css">
+</head>
+<body class="counteverest">
+	<noscript>Please enable JavaScript in your browser and reload this page.</noscript>
+	<div class="container">
+		<div id="response">
+			<h1 id="dark">The next Apple keynote address / product event is:</h1>
+		</div>
+		<div class="footer">
+      <p>Help us keep this website up to date. Add the event by making a PR request on <a href="https://github.com/hartator/wheniskeynote.com">GitHub</a>
+      <br>Broughy by <a href="https://serpapi.com">Serp Api</a>: <a href="https://serpapi.com/search-api">Google Search API</a><br>
+      &copy; <script>document.write(new Date().getFullYear())</script> wheniskeynote.com</p>
+		</div>
+	</div>
+
+	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+	<script src="js/addNewEvent.js"></script>
+	<script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/addNewEvent.js b/js/addNewEvent.js
@@ -0,0 +1,24 @@
+/* --------------------------
+* UPDATE UPCOMING EVENT DATE
+* -------------------------- 
+*
+* IMPORTANT: The date has to be in the Pacific Standard Time (PST) zone
+*
+*/
+const 
+// Format: YYYY (2020)
+year = 2019,
+// Format: MM (09) or M (9), both are valid 
+month = 09,
+// Format: DD (09) or D (9), both are valid
+day = 10,  
+// Format: 0 - 24 / 5 == 5 AM / 17 == 5 PM 
+hour = 20,
+// Format: MM (09) or M (9), both are valid
+minute = 00;
+
+/* --------------------------
+* UPDATE UPCOMING EVENT NAME
+* --------------------------
+*/
+const eventName = 'Apple iPhone 11 Launch Event';
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,75 @@
+let start = new Date(month + '/' + day + '/' + year + ' ' + hour + ':' + minute + ' GMT-0700'),
+    end = new Date(month + '/' + day + '/' + year + ' ' + (hour+2) + ':' + minute + ' GMT-0700'),
+    now = new Date(),
+    distance = start - now,
+    _second = 1000,
+    _minute = _second * 60,
+    _hour = _minute * 60,
+    _day = _hour * 24,
+    timer;
+
+const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+      monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+      eventHtml = '<h2><a href="https://www.apple.com/apple-events/" target="_blank">' + eventName + '</a></h2><h3 id="dark">In your time zone, this event will be held on:</h3><div id="localtime">' + dayNames[start.getDay()] + ', ' + monthNames[start.getMonth()] + ' ' + start.getDate() + ' at ' + ("0" + start.getHours()).slice(-2) + ':' + ("0" + start.getMinutes()).slice(-2) + '</div><h4 id="dark">Time remaining:</h4><div id="countdown" class="countdown"><div class="col col1 days"><span id="days" class="ce-days time-cont"></span><span class="ce-days-label">Days</span></div><div class="col col2"><span id="hours" class="ce-hours time-cont"></span><span class="ce-hours-label">Hours</span></div><div class="col col3"><span id="minutes" class="ce-minutes time-cont"></span><span class="ce-minutes-label">Minutes</span></div><div class="col col4"><span id="seconds" class="ce-seconds time-cont"></span><span class="ce-seconds-label">Seconds</span></div>';
+
+// 7200000 = 2 hours
+if (distance < -7200001) {
+  $('#response').append('<h2>No event confirmed at this time :(</h2>');
+} else if (distance > -7200000 && distance < 0) {
+  $('#response').append(eventHtml);
+  $('#days').html('00');
+  $('#hours').html('00');
+  $('#minutes').html('00');
+  $('#seconds').html('00');
+} else {
+  $('#response').append(eventHtml);
+  timer = setInterval(showRemaining, 1000);
+}
+
+createCalendar(eventName, start, end);
+
+function showRemaining() {
+  let now = new Date(),
+      distance = start - now;
+
+  if (distance < 0) {
+    clearInterval(timer);
+    return;
+  }
+  let days = Math.floor(distance / _day),
+      hours = Math.floor((distance % _day) / _hour),
+      minutes = Math.floor((distance % _hour) / _minute),
+      seconds = Math.floor((distance % _minute) / _second);
+
+console.log(days / 100)
+
+  if(days / 100 < 1) {
+    $('#days').html(("0" + days).slice(-2));
+  } else {
+    $('#days').html(("0" + days).slice(-3));
+  }
+  $('#hours').html(("0" + hours).slice(-2));
+  $('#minutes').html(("0" + minutes).slice(-2));
+  $('#seconds').html(("0" + seconds).slice(-2));
+}
+
+function createCalendar(title, startDate, endDate) {
+  let startTime = startDate.toISOString().replace(/-|:|\.\d+/g, '');
+  let endTime = endDate.toISOString().replace(/-|:|\.\d+/g, '');
+  let href = encodeURI(
+    'data:text/calendar;charset=utf8,' + [
+      'BEGIN:VCALENDAR',
+      'VERSION:2.0',
+      'BEGIN:VEVENT',
+      'URL:' + document.URL,
+      'DTSTART:' + (startTime || ''),
+      'DTEND:' + (endTime),
+      'SUMMARY:' + (title || ''),
+      'DESCRIPTION:' + (''),
+      'LOCATION:' + (''),
+      'END:VEVENT',
+      'END:VCALENDAR'].join('\n')
+  );
+
+  $("#localtime").append('<a href="' + href + '"><img class="ics" src="./images/cal.svg" alt=""/></a>');
+}
diff --git a/style/fonts/MyriadSetPro-Thin.ttf b/style/fonts/MyriadSetPro-Thin.ttf
diff --git a/style/fonts/MyriadSetPro-Thin.woff b/style/fonts/MyriadSetPro-Thin.woff
diff --git a/style/main.css b/style/main.css
@@ -0,0 +1,176 @@
+@font-face {
+  font-family: 'Myriad Set Pro';
+  font-style: normal;
+  font-weight: 100;
+  src: url('fonts/MyriadSetPro-Thin.woff') format('woff'), url('fonts/MyriadSetPro-Thin.ttf') format('truetype');
+}
+
+html,
+body,
+button,
+input,
+select,
+textarea {
+  color: #FFF;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+html {
+  display: table;
+}
+
+body {
+  font-family: 'Myriad Set Pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  font-weight: 100;
+  font-size: 15pt;
+  line-height: 18pt;
+  text-align: center;
+  background-color: #000;
+  background-image: -webkit-gradient(
+          linear,
+          left top,
+          left bottom,
+          color-stop(0.25, #060709),
+          color-stop(0.5, #212328),
+          color-stop(0.75, #424448),
+          color-stop(1, #686A6D)
+  );
+  background-image: -o-linear-gradient(bottom, #060709 25%, #212328 50%, #424448 75%, #686A6D 100%);
+  background-image: -moz-linear-gradient(bottom, #060709 25%, #212328 50%, #424448 75%, #686A6D 100%);
+  background-image: -webkit-linear-gradient(bottom, #060709 25%, #212328 50%, #424448 75%, #686A6D 100%);
+  background-image: -ms-linear-gradient(bottom, #060709 25%, #212328 50%, #424448 75%, #686A6D 100%);
+  background-image: linear-gradient(to bottom, #060709 25%, #212328 50%, #424448 75%, #686A6D 100%);
+  display: table-cell;
+  vertical-align: middle;
+}
+
+h1 {
+  font-size: 15pt;
+  line-height: 18pt;
+  font-weight: 100;
+  margin-top: 10px;
+  margin-bottom: 0px;
+}
+
+#localtime {
+  font-size: 45pt;
+  line-height: 48pt;
+  font-weight: 100;
+  margin-bottom: 10px;
+}
+
+h2 {
+  font-size: 45pt;
+  line-height: 48pt;
+  font-weight: 100;
+  margin-top: 5px;
+  margin-bottom: 16px;
+}
+
+h3 {
+  font-size: 15pt;
+  line-height: 18pt;
+  font-weight: 100;
+  margin-top: 10px;
+  margin-bottom: 4px;
+}
+
+h4 {
+  font-size: 15pt;
+  line-height: 18pt;
+  font-weight: 100;
+  margin-top: 26px;
+  margin-bottom: 10px;
+}
+
+h5 {
+  font-size: 15pt;
+  font-weight: 100;
+  margin-top: 0px;
+  margin-bottom: 10px;
+}
+
+#dark {
+  color: #B3B3B3;
+}
+
+#error_message {
+  border-left: 5px solid #bb3;
+  border-right: 5px solid #bb3;
+  color: #770;
+}
+
+a:link, a:visited {
+  color: #FFF;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #dbdbdb;
+  text-decoration: none;
+}
+
+a:active {
+  color: #dbdbdb;
+  text-decoration: none;
+}
+
+.footer {
+  position: fixed;
+  margin-top: 0px;
+  bottom: 0px;
+  font-size: 8pt;
+  line-height: 9pt;
+  text-align: center;
+  color: #cccccc;
+  width: 100%;
+  margin-top: 100px;
+  margin-bottom: 10px;
+}
+
+.ics {
+  margin-left: 10px;
+  vertical-align: top;
+  width: 25px;
+}
+
+img {
+  border: 0px;
+}
+
+.countdown {
+  margin: 0 auto;
+  text-align: center;
+  margin-top: 30px;
+}
+
+.counteverest .ce-days,
+.counteverest .ce-hours,
+.counteverest .ce-minutes,
+.counteverest .ce-seconds {
+  font-size: 55pt;
+}
+
+.counteverest .col {
+  display: inline-block;
+}
+
+.counteverest .ce-days-label,
+.counteverest .ce-hours-label,
+.counteverest .ce-minutes-label,
+.counteverest .ce-seconds-label {
+  display: block;
+  margin-top: 20px;
+}
+
+.counteverest .col {
+  padding-bottom: 20px;
+  margin: 0 5px;
+  width: 105px;
+  text-align: center;
+}