home fixes

pages/index.php

@@ -68,10 +68,18 @@ if($reqPath === '/home') {
                             <div class="clock-number clock-number-12"><div class="clock-number-display"></div></div>
                         </div>
                     </div>
+                    <div class="php-time-alter">
                         <div class="php-time-digital">
                             <div class="php-time-digital-hours">--</div>
-                        <div class="php-time-digital-separator" id=>:</div>
+                            <div class="php-time-digital-separator">:</div>
-                        <div class="php-time-digital-minutes" i>--</div>
+                            <div class="php-time-digital-minutes">--</div>
+                        </div>
+                        <div class="php-time-date">
+                            <span class="php-date-label">Week</span>
+                            <span class="php-date-week">--</span>
+                            <span class="php-date-label">&nbsp;&mdash;&nbsp;</span>
+                            <span class="php-date-year">----</span><span class="php-date-label">-</span><span class="php-date-month">---</span><span class="php-date-label">-</span><span class="php-date-day">--</span>
+                        </div>
                     </div>
                 </div>
                 <form class="php-search" method="get" action="https://duckduckgo.com/">

public/assets/2020v2.css

@@ -726,10 +726,12 @@ body {
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    pointer-events: none;
 }
 .php-search {
     max-width: 600px;
     width: 100%;
+    pointer-events: initial;
 }
 .php-search-input {
     border: 1px solid #999;
@@ -765,19 +767,30 @@ body {
 .php-time-analog {
     flex: 0 0 auto;
 }
-.php-time-digital {
+.php-time-alter {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 300px;
     font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
+    filter: drop-shadow(0 1px 5px #000);
+    color: transparent;
+}
+.php-time-digital {
     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-date {
+    font-size: 2em;
+}
 .php-time-digital-separator {
     margin-top: -4px;
 }
@@ -785,13 +798,19 @@ body {
     visibility: hidden;
 }
 .php-time-digital-hours,
-.php-time-digital-separator {
+.php-time-digital-separator,
+.php-date-label {
     background-image: linear-gradient(180deg, #eee 0%, #ddd 50%, #ccc 50%, #aaa 100%);
     background-clip: text;
     -webkit-background-clip: text;
 }
-.php-time-digital-minutes {
+.php-time-digital-minutes,
+.php-date-week,
+.php-date-day,
+.php-date-month,
+.php-date-year {
     background-image: linear-gradient(0deg, #281430 0%, #392540 50%, #4a3650 50%, #6c5871 100%);
+    background-clip: text;
     -webkit-background-clip: text;
 }
 
@@ -860,8 +879,8 @@ body {
     filter: drop-shadow(0 1px 3px #000);
 }
 .clock-hand-seconds .clock-hand-display {
-    height: 90px;
+    height: 100px;
-    margin-top: 25px;
+    margin-top: 15px;
     opacity: .6;
     background-color: #f00;
     filter: drop-shadow(0 1px 4px #000);

public/assets/2020v2.js

@@ -1,3 +1,16 @@
+Date.prototype.getWeek = function() {
+  var date = new Date(this.getTime());
+  date.setHours(0, 0, 0, 0);
+  date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
+  var week1 = new Date(date.getFullYear(), 0, 4);
+  return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
+}
+Date.prototype.getWeekYear = function() {
+  var date = new Date(this.getTime());
+  date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
+  return date.getFullYear();
+}
+
 window.fm = (function() {
     this.headerBackground = null;
     this.originalHeaderBackground = null;
@@ -144,12 +157,17 @@ window.fm = (function() {
     this.initClock = function() {
         var digitalClock = document.querySelector('.php-time-digital'),
             analogClock  = document.querySelector('.php-time-analog'),
+            dateZone     = document.querySelector('.php-time-date'),
             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');
+            angSeconds   = analogClock.querySelector('.clock-hand-seconds')
+            dateWeek     = dateZone.querySelector('.php-date-week'),
+            dateDay      = dateZone.querySelector('.php-date-day'),
+            dateMonth    = dateZone.querySelector('.php-date-month'),
+            dateYear     = dateZone.querySelector('.php-date-year');
 
         setInterval(function() {
             var time = new Date;
@@ -162,6 +180,11 @@ window.fm = (function() {
             if(dMin < 10)
                 dMin = '0' + dMin;
 
+            dateWeek.textContent = time.getWeek();
+            dateDay.textContent = time.getDate();
+            dateMonth.textContent = time.getMonth() + 1;
+            dateYear.textContent = time.getFullYear();
+
             digHours.textContent = dHour;
             digMinutes.textContent = dMin;
             digSeparator.classList[time.getSeconds() % 2 ? 'add' : 'remove']('php-time-digital-separator-hidden');

public/index.php

@@ -67,9 +67,9 @@ define('FM_ERRS' , [
     ],
 ]);
 
-function fm_component(string $name, array $vars = []) {
+function fm_component(string $_component_name, array $vars = []) {
     extract($vars);
-    require __DIR__ . '/../components/' . $name . '.php';
+    require __DIR__ . '/../components/' . $_component_name . '.php';
 }
 
 function first_paragraph(string $text, string $delimiter = "\n"): string {