bennet @main -
refs -
log -
-
https://git.jolheiser.com/bennet.git
Bean boy
Update
Signed-off-by: jolheiser <john.olheiser@gmail.com>
Signature
-----BEGIN PGP SIGNATURE-----
iQIzBAABCgAdFiEEgqEQpE3xoo1QwJO/uFOtpdp7v3oFAmIVwMoACgkQuFOtpdp7
v3qpcA/+KzZuAS23ZhASnRaH36nbZPZ3m5UKimTU72V4QSIZR8G5lXajGSCnQ0bC
eaRg6cfNhZ1oYc+TDALIx6rFKmIjqiMidFBrk3k5l6zVA3wi23ZV7KsvzeTQZbjd
Dw+ids5Lw6htDDwZaXJLS2NsCAYnT+J1pqyQxSyZOynVRVkvRnPFnKweXLXXauNd
Ct6yepzpxCDBVQSAgxsRjWWnxNJa7vZfbGX3Fre/t7BSgD6gEG3wOEWlW5tIlsAA
FpyABrDf0NZx82qWi5nv+jxitYZGTceyDw1gakOhM6fSqgVZc0VkYprqzBewmeA6
UG+XOYl3LtLw59z/kqKn0+mTLXgl6B5f1+9FxsO1AH0CV1EaFR5Qh3NqnFbKHhV2
M2+zGL4t6rZPy8RGh0cxNMQccVYOw+9Cye6Cgv23qOELqlL7zrClgp9mEiQYQubB
Vr1tDb3MESB+L1cpp3UNa+0rqOVYhdb2zsFpmHvlMQFFuw7oF7BCkUM00bIPM2Dy
N5TRhpYYq1/FAOhcWQXFDUrWQ9CcETzJkLzLFoKp+MBRlUs0XWiBOEATwk81TRAF
KSfTgg9nqrgjODV6U2+58unJSR5gz9oblg1cZVh2XEY+Mt2H2cUNor8na03lW9ju
88HDmVeZ51ZFxrKPXgLE+movd8mAzyjQRP5ct5auccTqT98vgK8=
=5U7F
-----END PGP SIGNATURE-----
7 changed files, 137 additions(+), 84 deletions(-)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..62c893550adb53d3a8fc29a1584ff831cb829062
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea/
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..a26a35a20a37647aa12575c2c648d135ecff6794
--- /dev/null
+++ b/README.md
@@ -0,0 +1,5 @@
+# Bennet
+
+Dedicated to the _exact_ time my son was born. Just in case I need to be _extra_ with it.
+
+11-01-2017 @ 6:13 AM
\ No newline at end of file
diff --git a/assets/baby.css b/src/bennet.css
rename from assets/baby.css
rename to src/bennet.css
index defb8649db2587ef6b61afa09860e199fad7e8c1..2e2991b4d89264c07fdcaaa8a8f7ace940b27e45 100644
--- a/assets/baby.css
+++ b/src/bennet.css
@@ -12,6 +12,11 @@ margin: auto;
}
.odometer {
+
+ text-align: center;
+}
+
+.odometer {
filter: invert(95%);
}
diff --git a/assets/odometer.css b/src/odometer.css
rename from assets/odometer.css
rename to src/odometer.css
index 59eb9f1921ccf9183c3d0728344c653e805982a5..a7a6bb5582c23ccb79f02eabf608c44e0f31ac88 100644
--- a/assets/odometer.css
+++ b/src/odometer.css
@@ -48,11 +48,11 @@ .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-train-station .odometer-digit .odometer-value.odometer-last-value {
position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up .odometer-ribbon-inner {
- -webkit-transition: -webkit-transform 2s;
+ -webkit-transition: -webkit-transform 1s;
- -moz-transition: -moz-transform 2s;
+ -moz-transition: -moz-transform 1s;
- -ms-transition: -ms-transform 2s;
+ -ms-transition: -ms-transform 1s;
- -o-transition: -o-transform 2s;
+ -o-transition: -o-transform 1s;
- transition: transform 2s;
+ transition: transform 1s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
@@ -69,11 +69,11 @@ -o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
- -webkit-transition: -webkit-transform 2s;
+ -webkit-transition: -webkit-transform 1s;
- -moz-transition: -moz-transform 2s;
+ -moz-transition: -moz-transform 1s;
- -ms-transition: -ms-transform 2s;
+ -ms-transition: -ms-transform 1s;
- -o-transition: -o-transform 2s;
+ -o-transition: -o-transform 1s;
- transition: transform 2s;
+ transition: transform 1s;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
diff --git a/assets/odometer.js b/src/odometer.js
rename from assets/odometer.js
rename to src/odometer.js
diff --git a/site/index.html b/site/index.html
deleted file mode 100644
index 4f053a5f01ef4aaeafaaefe25a8efff020064c82..0000000000000000000000000000000000000000
--- a/site/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<html>
- <head>
- <link rel="stylesheet" href="odometer.css">
- <link rel="stylesheet" href="baby.css">
-
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-
- <script src="odometer.js"></script>
- </head>
- <body>
- <table>
- <tbody>
- <tr><td colspan="2"><span class="label">How old am I?</span></td></tr>
- <tr><td><div id="year" class="odometer">0</div></td><td><span class="label">Years</span></td></tr>
- <tr><td><div id="month" class="odometer">0</div></td><td><span class="label">Months</span></td></tr>
- <tr><td><div id="week" class="odometer">0</div></td><td><span class="label">Weeks</span></td></tr>
- <tr><td><div id="day" class="odometer">0</div></td><td><span class="label">Days</span></td></tr>
- <tr><td><div id="hour" class="odometer">0</div></td><td><span class="label">Hours</span></td></tr>
- <tr><td><div id="minute" class="odometer">0</td><td></div><span class="label">Minutes</span></td></tr>
- <tr><td><div id="second" class="odometer">0</div></td><td><span class="label">Seconds</span></td></tr>
- </tbody>
- </table>
-
-
- <script type="text/javascript">
-
- $(document).ready(function() {
- var birth = new Date("04/12/1992 00:00:00");
- var now = new Date();
- var diff = Math.round((now.getTime() - birth.getTime()) / 1000); // Time in seconds
- setInterval(function() {
- calcYear(diff);
- calcMonth(diff);
- calcWeek(diff);
- calcDay(diff);
- calcHour(diff);
- calcMinute(diff);
- calcSecond(diff);
- diff++; // Add a second each second
- }, 1000);
-
- });
-
- function calcYear(diff) {
- $("#year").html(Math.floor(diff / 31536000));
- }
-
- function calcMonth(diff) {
- $("#month").html(Math.floor(diff / 2628000));
- }
-
- function calcWeek(diff) {
- $("#week").html(Math.floor(diff / 657000));
- }
-
- function calcDay(diff) {
- $("#day").html(Math.floor(diff / 87600));
- }
-
- function calcHour(diff) {
- $("#hour").html(Math.floor(diff / 3650));
- }
-
- function calcMinute(diff) {
- $("#minute").html(Math.floor(diff / 60));
- }
-
- function calcSecond(diff) {
- $("#second").html(Math.floor(diff));
- }
- </script>
-
- </body>
-</html>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..0fd426a7917e23a7ef790c34412546734f7a7927
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,116 @@
+<html lang="en">
+<head>
+ <title>Bennet</title>
+
+ <link rel="stylesheet" href="odometer.css">
+ <link rel="stylesheet" href="bennet.css">
+
+ <script src="odometer.js" defer></script>
+</head>
+<body>
+<table>
+ <thead>
+ <tr>
+ <td colspan="2"><span class="label">How old is Bennet?</span></td>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <div id="year" class="odometer">0</div>
+ </td>
+ <td><span class="label">Years, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="month" class="odometer">0</div>
+ </td>
+ <td><span class="label">Months, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="week" class="odometer">0</div>
+ </td>
+ <td><span class="label">Weeks, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="day" class="odometer">0</div>
+ </td>
+ <td><span class="label">Days, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="hour" class="odometer">0</div>
+ </td>
+ <td><span class="label">Hours, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="minute" class="odometer">0</div>
+ </td>
+ <td><span class="label">Minutes, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="second" class="odometer">0</div>
+ </td>
+ <td><span class="label">Seconds, or...</span></td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <span id="total" class="label"></span>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+
+<script type="text/javascript">
+
+ const birth = new Date("11/01/2017 06:13:00");
+ const now = new Date();
+ let diff = Math.round((now.getTime() - birth.getTime()) / 1000);
+
+ const $year = document.getElementById("year");
+ const $month = document.getElementById("month");
+ const $week = document.getElementById("week");
+ const $day = document.getElementById("day");
+ const $hour = document.getElementById("hour");
+ const $minute = document.getElementById("minute");
+ const $second = document.getElementById("second");
+ const $total = document.getElementById("total");
+
+ setInterval(() => {
+ $year.innerHTML = Math.floor(diff / 31536000).toString();
+ $month.innerHTML = Math.floor(diff / 2592000).toString();
+ $week.innerHTML = Math.floor(diff / 604800).toString();
+ $day.innerHTML = Math.floor(diff / 86400).toString();
+ $hour.innerHTML = Math.floor(diff / 3600).toString();
+ $minute.innerHTML = Math.floor(diff / 60).toString();
+ $second.innerHTML = diff.toString();
+
+ let total = diff;
+ const years = Math.floor(diff / 31536000);
+ total -= years * 31536000;
+ const months = Math.floor(total / 2592000);
+ total -= months * 2592000;
+ const days = Math.floor(total / 86400);
+ total -= days * 86400;
+ const hours = Math.floor(total / 3600);
+ total -= hours * 3600;
+ const minutes = Math.floor(total / 60);
+ total -= minutes * 60;
+ const seconds = total;
+ $total.innerHTML = `${years} Year${trn(years)}, ${months} Month${trn(months)}, ${days} Day${trn(days)}, ${hours} Hour${trn(hours)}, ${minutes} Minute${trn(minutes)}, and ${seconds} Second${trn(seconds)} old`;
+
+ diff++;
+ }, 1000);
+
+ function trn(num) {
+ return num === 1 ? "" : "s";
+ }
+</script>
+
+</body>
+</html>
\ No newline at end of file