diff --git a/pages/index.php b/pages/index.php
index 0a30423..4e49076 100644
--- a/pages/index.php
+++ b/pages/index.php
@@ -38,6 +38,51 @@ if($reqPath === '/now-listening') {
return FM_HIT;
}
+if($reqPath === '/home') {
+ if($reqMethod !== 'GET')
+ return FM_ERR | 405;
+
+ fm_component('header', [
+ 'title' => 'flash.moe / homepage',
+ 'do_fullscreen_header' => true,
+ ]);
+?>
+
+
+ true,
+ ]);
+
+ return FM_HIT;
+}
+
if($reqPath === '/test') {
if($reqMethod !== 'GET')
return FM_ERR | 405;
diff --git a/public/assets/2020v2.css b/public/assets/2020v2.css
index 6477eb4..4dc830e 100644
--- a/public/assets/2020v2.css
+++ b/public/assets/2020v2.css
@@ -712,3 +712,201 @@ body {
line-height: 1.4em;
pointer-events: none;
}
+
+.php {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 177;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+.php-search {
+ max-width: 600px;
+ width: 100%;
+}
+.php-search-input {
+ border: 1px solid #999;
+ background-color: #fff;
+ opacity: .5;
+ box-shadow: 0 2px .5em #000a, inset 0 1px 2px #000a;
+ transition: opacity .5s, box-shadow .5s;
+}
+.php-search-input:hover,
+.php-search-input:focus,
+.php-search-input:focus-within {
+ opacity: 1;
+ box-shadow: 0 2px 1em #000, inset 0 1px 2px #000a;
+}
+.php-search-input input {
+ border-width: 0;
+ background-color: transparent;
+ color: #000;
+ font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
+ font-size: 24px;
+ line-height: 35px;
+ width: 100%;
+ height: 100%;
+ padding: 2px 5px;
+}
+.php-time {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 20px auto;
+ width: 100%;
+}
+.php-time-analog {
+ flex: 0 0 auto;
+}
+.php-time-digital {
+ font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
+ font-size: 7em;
+ line-height: 1.5em;
+ display: flex;
+ filter: drop-shadow(0 1px 5px #000);
+ color: transparent;
+ flex: 0 0 auto;
+ max-width: 300px;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+}
+.php-time-digital-separator {
+ margin-top: -4px;
+}
+.php-time-digital-separator-hidden {
+ visibility: hidden;
+}
+.php-time-digital-hours,
+.php-time-digital-separator {
+ background-image: linear-gradient(180deg, #eee 0%, #ddd 50%, #ccc 50%, #aaa 100%);
+ background-clip: text;
+ -webkit-background-clip: text;
+}
+.php-time-digital-minutes {
+ background-image: linear-gradient(0deg, #281430 0%, #392540 50%, #4a3650 50%, #6c5871 100%);
+ -webkit-background-clip: text;
+}
+
+.clock {
+ width: 200px;
+ height: 200px;
+ border-radius: 100%;
+ border: 4px solid #c0c0c0;
+ overflow: hidden;
+ box-sizing: content-box;
+ filter: drop-shadow(0 1px 5px #000);
+}
+.clock-background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #fffd;
+ filter: blur(20px);
+}
+.clock-center {
+ position: absolute;
+ top: 96px;
+ left: 96px;
+ width: 8px;
+ height: 8px;
+ background-color: #000;
+ border-radius: 100%;
+ z-index: 1000;
+}
+.clock-hand {
+ --hand-rotation: 0deg;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transform: rotate(var(--hand-rotation));
+ z-index: 900;
+}
+.clock-hand-display {
+ position: absolute;
+ width: 2px;
+ left: 99px;
+ height: 99px;
+ background-color: #000;
+}
+.clock-hand-hours {
+ z-index: 910;
+}
+.clock-hand-minutes {
+ z-index: 920;
+}
+.clock-hand-seconds {
+ z-index: 930;
+}
+.clock-hand-hours .clock-hand-display {
+ height: 70px;
+ margin-top: 30px;
+ filter: drop-shadow(0 1px 2px #000);
+}
+.clock-hand-minutes .clock-hand-display {
+ height: 80px;
+ margin-top: 20px;
+ filter: drop-shadow(0 1px 3px #000);
+}
+.clock-hand-seconds .clock-hand-display {
+ height: 90px;
+ margin-top: 25px;
+ opacity: .6;
+ background-color: #f00;
+ filter: drop-shadow(0 1px 4px #000);
+}
+.clock-number {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 500;
+ width: 100px;
+ height: 100px;
+}
+.clock-number-display {
+ position: absolute;
+ width: 2px;
+ height: 10px;
+ background-color: #000;
+}
+.clock-number-9 .clock-number-display,
+.clock-number-3 .clock-number-display {
+ width: 10px;
+ height: 2px;
+}
+.clock-number-6 .clock-number-display {
+ bottom: 0;
+}
+.clock-number-12 .clock-number-display {
+ right: 0;
+ height: 15px;
+}
+.clock-number-3 .clock-number-display {
+ right: 0;
+ bottom: 0;
+}
+.clock-number-12 {
+ left: 1px;
+}
+.clock-number-9 {
+ top: 99px;
+}
+.clock-number-6 {
+ top: 100px;
+ left: 99px;
+}
+.clock-number-3 {
+ top: 1px;
+ left: 100px;
+}
diff --git a/public/assets/2020v2.js b/public/assets/2020v2.js
index 0d724db..fbb047e 100644
--- a/public/assets/2020v2.js
+++ b/public/assets/2020v2.js
@@ -91,7 +91,7 @@ window.fm = (function() {
var set = JSON.parse(sessionStorage.getItem('header-bgs'));
if(!set)
return '/assets/errors/404.jpg';
- return set[parseInt(Math.random() * set.length) - 1];
+ return set[parseInt(Math.random() * set.length)];
};
this.setRandomHeaderBackground = function() {
@@ -141,5 +141,40 @@ window.fm = (function() {
setInterval(this.updateIndexNowListening, (npInterval || 30) * 1000);
};
+ this.initClock = function() {
+ var digitalClock = document.querySelector('.php-time-digital'),
+ analogClock = document.querySelector('.php-time-analog'),
+ digHours = digitalClock.querySelector('.php-time-digital-hours'),
+ digSeparator = digitalClock.querySelector('.php-time-digital-separator'),
+ digMinutes = digitalClock.querySelector('.php-time-digital-minutes'),
+ angHours = analogClock.querySelector('.clock-hand-hours'),
+ angMinutes = analogClock.querySelector('.clock-hand-minutes'),
+ angSeconds = analogClock.querySelector('.clock-hand-seconds');
+
+ setInterval(function() {
+ var time = new Date;
+
+ var dHour = time.getHours(),
+ dMin = time.getMinutes();
+
+ if(dHour < 10)
+ dHour = '0' + dHour;
+ if(dMin < 10)
+ dMin = '0' + dMin;
+
+ digHours.textContent = dHour;
+ digMinutes.textContent = dMin;
+ digSeparator.classList[time.getSeconds() % 2 ? 'add' : 'remove']('php-time-digital-separator-hidden');
+
+ var rSec = time.getSeconds() / 60,
+ rMin = (time.getMinutes() + Math.min(.99, rSec)) / 60,
+ rHour = (time.getHours() + Math.min(.99, rMin)) / 12;
+
+ angHours.style.setProperty('--hand-rotation', (rHour * 360).toString() + 'deg');
+ angMinutes.style.setProperty('--hand-rotation', (rMin * 360).toString() + 'deg');
+ angSeconds.style.setProperty('--hand-rotation', (rSec * 360).toString() + 'deg');
+ }, 200);
+ };
+
return this;
}).call(window.fm || {});