initial commit

8bit-echo · Sep 25, 2019 · 7e26c5b · 7e26c5b
commit 7e26c5b
Show file tree

Hide file tree

Showing 8 changed files with 302 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+.vscode
diff --git a/LockBackground.html b/LockBackground.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Countdown Widget</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+</head>
+
+<body>
+    <div class="container">
+        <div class="countdownContainer">
+            <div class="years">
+                <span class="number" id="yearNumber">00</span>
+                <span class="label">years</span>
+            </div>
+            <!-- /years -->
+            <div class="days">
+                <span class="number" id="dayNumber">00</span>
+                <span class="label">days</span>
+            </div>
+            <!-- /days -->
+            <div class="hours">
+                <span class="number" id="hourNumber">00</span>
+                <span class="label">hours</span>
+            </div>
+            <!-- /hours -->
+            <div class="minutes">
+                <span class="number" id="minuteNumber">00</span>
+                <span class="label">mins</span>
+            </div>
+            <!-- /minutes -->
+            <div class="seconds">
+                <span class="number" id="secondNumber">00</span>
+                <span class="label">secs</span>
+            </div>
+            <!-- /seconds -->
+        </div>
+        <!-- /countdownContainer -->
+        <div class="until">
+            <p>until <span class="event" id="event">"your event here."</span></p>
+        </div>
+    </div>
+
+    <canvas id="confetti"></canvas>
+    <!-- /container -->
+    <script src="js/confetti.js"></script>
+    <script src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/Options.plist b/Options.plist
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <array>
+    <dict>
+      <key>name</key>
+      <string>userEvent</string>
+      <key>type</key>
+      <string>edit</string>
+      <key>label</key>
+      <string>Event Title</string>
+      <key>default</key>
+      <string></string>
+    </dict>
+
+    <dict>
+      <key>name</key>
+      <string>userMonthNumber</string>
+      <key>type</key>
+      <string>edit</string>
+      <key>label</key>
+      <string>Month Number</string>
+      <key>default</key>
+      <string></string>
+    </dict>
+
+    <dict>
+      <key>name</key>
+      <string>userDayNumber</string>
+      <key>type</key>
+      <string>edit</string>
+      <key>label</key>
+      <string>Day Number</string>
+      <key>default</key>
+      <string></string>
+    </dict>
+
+    <dict>
+      <key>name</key>
+      <string>userYear</string>
+      <key>type</key>
+      <string>edit</string>
+      <key>label</key>
+      <string>Year</string>
+      <key>default</key>
+      <string></string>
+    </dict>
+
+    <dict>
+      <key>name</key>
+      <string>userTime</string>
+      <key>type</key>
+      <string>edit</string>
+      <key>label</key>
+      <string>time</string>
+      <key>default</key>
+      <string>12:00 AM</string>
+    </dict>
+  </array>
+</plist>;
diff --git a/WidgetInfo.plist b/WidgetInfo.plist
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <key>isFullscreen</key>
+    <true/>
+	<key>useOptionsPlist</key>
+ 	<true/>
+</dict>
+</plist>
diff --git a/font/VAG-Rounded-Light.ttf b/font/VAG-Rounded-Light.ttf
diff --git a/js/confetti.js b/js/confetti.js
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,77 @@
+function isEmpty(x) {
+  return typeof x == 'undefined' || (typeof x == 'string' && x.length == 0);
+}
+
+const eventName = isEmpty(userEvent) ? 'Nice.' : userEvent;
+const eventYear = isEmpty(userMonthNumber) ? '2069' : userMonthNumber;
+const eventMonth = isEmpty(userDayNumber) ? '6' : userDayNumber;
+const eventDay = isEmpty(userYear) ? '9' : userYear;
+const eventTime = isEmpty(userTime) ? '4:20 PM' : userTime;
+
+(() => {
+  const UI = {
+    event: document.getElementById('event'),
+    years: document.getElementById('yearNumber'),
+    days: document.getElementById('dayNumber'),
+    hours: document.getElementById('hourNumber'),
+    minutes: document.getElementById('minuteNumber'),
+    seconds: document.getElementById('secondNumber'),
+    canvas: document.getElementById('confetti'),
+    groups: {
+      years: document.querySelector('.years'),
+      days: document.querySelector('.days'),
+      hours: document.querySelector('.hours'),
+      minutes: document.querySelector('.minutes'),
+      seconds: document.querySelector('.seconds'),
+    },
+  };
+
+  function count() {
+    const deadline = new Date(`${eventYear}/${eventMonth}/${eventDay} ${eventTime}`);
+    const now = new Date().getTime();
+    const t = deadline - now;
+
+    const time = {
+      years: Math.floor(Math.floor(t / (1000 * 60 * 60 * 24)) / 365),
+      days: Math.floor((t / (1000 * 60 * 60 * 24)) % 365),
+      hours: Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+      minutes: Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)),
+      seconds: Math.floor((t % (1000 * 60)) / 1000),
+    };
+
+    UI.event.innerHTML = event;
+    UI.years.innerHTML = time.years;
+    UI.days.innerHTML = time.days;
+    UI.hours.innerHTML = time.hours;
+    UI.minutes.innerHTML = time.minutes;
+    UI.seconds.innerHTML = time.seconds;
+    UI.event.innerHTML = eventName;
+
+    UI.years.style.display = time.years <= 0 ? 'none' : 'inline-block';
+    UI.days.style.display = time.days <= 0 ? 'none' : 'inline-block';
+    UI.hours.style.display = time.hours <= 0 ? 'none' : 'inline-block';
+    UI.minutes.style.display = time.minutes <= 0 ? 'none' : 'inline-block';
+
+    const elements = ['years', 'days', 'hours', 'minutes'];
+    elements.forEach(el => {
+      if (time[el] <= 0) {
+        UI.groups[el].style.display = 'none';
+      }
+    });
+
+    // event time has passed.
+    if (t <= 0) {
+      UI.seconds.innerHTML = '0';
+      clearInterval(counter);
+      celebrate();
+      setTimeout(() => {
+        UI.canvas.classList.add('fade');
+      }, 10000);
+    }
+
+    // console.log(`${time.years}y ${time.days}d ${time.hours}h ${time.minutes}m ${time.seconds}s`);
+  }
+
+  const counter = setInterval(count, 1000);
+  count();
+})();
diff --git a/style.css b/style.css
@@ -0,0 +1,84 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: "VAG";
+  src: url("font/VAG-Rounded-Light.ttf");
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+  color: white;
+  font-family: "VAG", sans-serif;
+  font-weight: lighter;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  width: 100vw;
+  height: 100vh;
+}
+
+canvas {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 0;
+}
+
+.container {
+  text-align: center;
+  display: block;
+  position: relative;
+  z-index: 1;
+  max-width: 300px;
+  width: 85%;
+  margin: auto;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.countdownContainer {
+  display: flex;
+  justify-content: center;
+  align-self: center;
+}
+
+.number {
+  font-size: 2.1em;
+}
+
+.label {
+  display: block;
+  font-size: 0.75em;
+}
+
+.countdownContainer > div {
+  display: block;
+  margin: 0 1rem;
+}
+
+.until {
+  margin-top: 10px;
+}
+
+.fade {
+  animation: fade-out 2500ms forwards 1;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}