home fixes

This commit is contained in:
flash 2020-09-08 21:09:02 +00:00
parent a7a54cf84e
commit 68a227e117
4 changed files with 64 additions and 14 deletions

View file

@ -68,10 +68,18 @@ if($reqPath === '/home') {
<div class="clock-number clock-number-12"><div class="clock-number-display"></div></div> <div class="clock-number clock-number-12"><div class="clock-number-display"></div></div>
</div> </div>
</div> </div>
<div class="php-time-digital"> <div class="php-time-alter">
<div class="php-time-digital-hours">--</div> <div class="php-time-digital">
<div class="php-time-digital-separator" id=>:</div> <div class="php-time-digital-hours">--</div>
<div class="php-time-digital-minutes" i>--</div> <div class="php-time-digital-separator">:</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>
</div> </div>
<form class="php-search" method="get" action="https://duckduckgo.com/"> <form class="php-search" method="get" action="https://duckduckgo.com/">

View file

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

View file

@ -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() { window.fm = (function() {
this.headerBackground = null; this.headerBackground = null;
this.originalHeaderBackground = null; this.originalHeaderBackground = null;
@ -144,12 +157,17 @@ window.fm = (function() {
this.initClock = function() { this.initClock = function() {
var digitalClock = document.querySelector('.php-time-digital'), var digitalClock = document.querySelector('.php-time-digital'),
analogClock = document.querySelector('.php-time-analog'), analogClock = document.querySelector('.php-time-analog'),
dateZone = document.querySelector('.php-time-date'),
digHours = digitalClock.querySelector('.php-time-digital-hours'), digHours = digitalClock.querySelector('.php-time-digital-hours'),
digSeparator = digitalClock.querySelector('.php-time-digital-separator'), digSeparator = digitalClock.querySelector('.php-time-digital-separator'),
digMinutes = digitalClock.querySelector('.php-time-digital-minutes'), digMinutes = digitalClock.querySelector('.php-time-digital-minutes'),
angHours = analogClock.querySelector('.clock-hand-hours'), angHours = analogClock.querySelector('.clock-hand-hours'),
angMinutes = analogClock.querySelector('.clock-hand-minutes'), 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() { setInterval(function() {
var time = new Date; var time = new Date;
@ -162,6 +180,11 @@ window.fm = (function() {
if(dMin < 10) if(dMin < 10)
dMin = '0' + dMin; dMin = '0' + dMin;
dateWeek.textContent = time.getWeek();
dateDay.textContent = time.getDate();
dateMonth.textContent = time.getMonth() + 1;
dateYear.textContent = time.getFullYear();
digHours.textContent = dHour; digHours.textContent = dHour;
digMinutes.textContent = dMin; digMinutes.textContent = dMin;
digSeparator.classList[time.getSeconds() % 2 ? 'add' : 'remove']('php-time-digital-separator-hidden'); digSeparator.classList[time.getSeconds() % 2 ? 'add' : 'remove']('php-time-digital-separator-hidden');

View file

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