diff --git a/index.html b/index.html
index f35f491..f0ec590 100644
--- a/index.html
+++ b/index.html
@@ -5,23 +5,22 @@
-
-
-
-
-
-
-
-
-
- Hi there!
-
-
- I'm your cool new webpage. Made with Glitch!
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
index 90a69f7..e7eea22 100644
--- a/script.js
+++ b/script.js
@@ -1,9 +1,82 @@
-/* If you're feeling fancy you can add interactivity
- to your site with Javascript */
+var birthday = {
+ now: null,
+ day: 25,
+ month: 6, // June
+ match: false,
+ check: function() {
+ this.now = new Date();
+ if (this.now.getDate() == this.day && this.now.getMonth() + 1 == this.month) this.activate()
+ else this.deactivate()
+ },
+ activate: function() {
+ document.getElementById('isit').innerHTML = "Yes!"
+ elementClass.remove(document.getElementById('isit'), 'nope')
+ elementClass.add(document.getElementById('isit'), 'yep')
+ confetti.render();
+ },
+ deactivate: function() {
+ document.getElementById('isit').innerHTML = "No"
+ elementClass.remove(document.getElementById('isit'), 'yep')
+ elementClass.add(document.getElementById('isit'), 'nope')
-// prints "hi" in the browser's dev tools console
-console.log("hi");
+ confetti.clear();
+ }
+}
-$(function() {
- alert('Hello, world!')
-})
\ No newline at end of file
+var confetti = {
+ displayed: false,
+ confetti: null,
+ target: 'confetti-holder',
+ max: null,
+ size: 1,
+ animate: true,
+ props: ['circle', 'square', 'triangle', 'line'],
+ colors: [[165,104,246], [230,61,135], [0,199,228], [253,214,126]],
+ clock: 25,
+ rotate: true,
+ width: null,
+ height: null,
+ render: function() {
+ this.width = window.innerWidth
+ this.height = window.innerHeight
+ this.max = Math.floor(this.width * this.height / 1799.04)
+ if (this.confetti) this.confetti.clear();
+
+ this.confetti = new ConfettiGenerator(this)
+ this.confetti.render();
+ this.displayed = true;
+ },
+ clear: function() {
+ if (!this.displayed) return;
+
+ this.confetti.clear();
+ this.displayed = false;
+ }
+}
+
+var elementClass = {
+ has: function(e, c) {
+ return !!e.className.match(new RegExp('(\\s|^)' + c + '(\\s|$)'));
+ },
+ add: function(e, c) {
+ if (!this.has(e,c)) e.className += " " + c;
+ },
+ remove: function(e, c) {
+ if (this.has(e,c)) {
+ var r = new RegExp('(\\s|^)' + c + '(\\s|$)');
+ e.className=e.className.replace(r, ' ');
+ }
+ },
+}
+
+window.onload = function() {
+ birthday.check();
+};
+
+window.addEventListener('resize', function() {
+ if (confetti.displayed) confetti.render();
+}, false);
+
+window.setInterval(function(){
+ birthday.check();
+}, 5000);
diff --git a/style.css b/style.css
index ea0844a..68d1d15 100644
--- a/style.css
+++ b/style.css
@@ -1,11 +1,43 @@
-/* CSS files add styling rules to your content */
-
+html,
body {
- font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
- margin: 2em;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ background-color: #fff;
}
-h1 {
- font-style: italic;
- color: #373fff;
+#confetti {
+ position: fixed;
+ top:0;
+ left: 0;
+ z-index: 1;
}
+
+#container {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ height: 100%;
+}
+
+#container p {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ margin: 0;
+ padding: 1vw;
+ font-family: 'Kanit', sans-serif;
+ font-size: 16vw;
+}
+
+p.nope {
+ color: #888888;
+}
+
+p.yep {
+ background-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+}
\ No newline at end of file