298 lines
17 KiB
HTML
298 lines
17 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>
|
|
Zegar słowny
|
|
</title>
|
|
<style id="theme">
|
|
span {
|
|
color: #222;
|
|
}
|
|
|
|
.word {
|
|
color: #222 !important;
|
|
}
|
|
|
|
.active {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.seconds .active {
|
|
color: #555 !important;
|
|
}
|
|
|
|
div {
|
|
background-color: #000;
|
|
}
|
|
</style>
|
|
<style>
|
|
div.containerT {
|
|
display: table;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
div.containerTC {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
html {
|
|
font-size: 4.9vmin;
|
|
font-family: "Space Mono", monospace;
|
|
white-space: nowrap;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
line-height: 1.2em;
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: initial;
|
|
}
|
|
|
|
.buttons {
|
|
float: left;
|
|
position: absolute;
|
|
display: inline;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
var themes = {
|
|
"Czarny": "span{color:#222}.word{color:#222!important}.active{color:#fff!important}.seconds.active{color:#555!important}div{background-color:#000}",
|
|
"Biały": "span{color:#eee}.word{color:#eee!important}.active{color:#000!important}.seconds.active{color:#ccc!important}div{background-color:#fff}",
|
|
"Fiolet": "span{color:#8A4FFF}.word{color:#8A4FFF!important}.active{color:#4C1E4F!important}.seconds.active{color:#555!important}div{background-color:#E6C0E9}"
|
|
};
|
|
|
|
var showSeconds = true;
|
|
|
|
function setActive(selector, state) {
|
|
elems = document.querySelectorAll(selector);
|
|
if (state) {
|
|
elems.forEach(elem => elem.classList.add('active'));
|
|
}
|
|
else {
|
|
elems.forEach(elem => elem.classList.remove('active'));
|
|
}
|
|
}
|
|
|
|
function setTime(time) {
|
|
// dateTime = new Date('2022-07-17 00:00:00');
|
|
dateTime = new Date();
|
|
|
|
po = dateTime.getMinutes() < 30;
|
|
oclock = dateTime.getMinutes() == 0;
|
|
|
|
setActive('.po', !oclock && po);
|
|
setActive('.do', !oclock && !po);
|
|
|
|
hour = dateTime.getHours() > 12 ? dateTime.getHours() - 12 : (dateTime.getHours() == 0 ? 12 : dateTime.getHours());
|
|
hourClass = po ? `h${hour}${oclock ? '' : 'm'}` : `h${hour + 1 > 12 ? 1 : hour + 1}${oclock ? '' : 'm'}`;
|
|
|
|
setActive('.h1', hourClass == 'h1');
|
|
setActive('.h2', hourClass == 'h2');
|
|
setActive('.h3', hourClass == 'h3');
|
|
setActive('.h4', hourClass == 'h4');
|
|
setActive('.h5', hourClass == 'h5');
|
|
setActive('.h6', hourClass == 'h6');
|
|
setActive('.h7', hourClass == 'h7');
|
|
setActive('.h8', hourClass == 'h8');
|
|
setActive('.h9', hourClass == 'h9');
|
|
setActive('.h10', hourClass == 'h10');
|
|
setActive('.h11', hourClass == 'h11');
|
|
setActive('.h12', hourClass == 'h12');
|
|
setActive('.h1m', hourClass == 'h1m');
|
|
setActive('.h2m', hourClass == 'h2m');
|
|
setActive('.h3m', hourClass == 'h3m');
|
|
setActive('.h4m', hourClass == 'h4m');
|
|
setActive('.h5m', hourClass == 'h5m');
|
|
setActive('.h6m', hourClass == 'h6m');
|
|
setActive('.h7m', hourClass == 'h7m');
|
|
setActive('.h8m', hourClass == 'h8m');
|
|
setActive('.h9m', hourClass == 'h9m');
|
|
setActive('.h10m', hourClass == 'h10m');
|
|
setActive('.h11m', hourClass == 'h11m');
|
|
setActive('.h12m', hourClass == 'h12m');
|
|
|
|
minute = dateTime.getMinutes();
|
|
minuteClass = `m${minute > 30 ? 60 - minute : minute}`;
|
|
// console.log(minute);
|
|
// console.log(minuteClass);
|
|
setActive('.m1', minuteClass == 'm1' || minuteClass == 'm21');
|
|
setActive('.m2', minuteClass == 'm2' || minuteClass == 'm22');
|
|
setActive('.m3', minuteClass == 'm3' || minuteClass == 'm23');
|
|
setActive('.m4', minuteClass == 'm4' || minuteClass == 'm24');
|
|
setActive('.m5', minuteClass == 'm5' || minuteClass == 'm25');
|
|
setActive('.m6', minuteClass == 'm6' || minuteClass == 'm26');
|
|
setActive('.m7', minuteClass == 'm7' || minuteClass == 'm27');
|
|
setActive('.m8', minuteClass == 'm8' || minuteClass == 'm28');
|
|
setActive('.m9', minuteClass == 'm9' || minuteClass == 'm29');
|
|
setActive('.m10', minuteClass == 'm10');
|
|
setActive('.m11', minuteClass == 'm11');
|
|
setActive('.m12', minuteClass == 'm12');
|
|
setActive('.m13', minuteClass == 'm13');
|
|
setActive('.m14', minuteClass == 'm14');
|
|
setActive('.m15', minuteClass == 'm15');
|
|
setActive('.m16', minuteClass == 'm16');
|
|
setActive('.m17', minuteClass == 'm17');
|
|
setActive('.m18', minuteClass == 'm18');
|
|
setActive('.m19', minuteClass == 'm19');
|
|
setActive('.m20', minuteClass == 'm20' || minuteClass == 'm21' || minuteClass == 'm22' || minuteClass == 'm23' || minuteClass == 'm24' || minuteClass == 'm25' || minuteClass == 'm26' || minuteClass == 'm27' || minuteClass == 'm28' || minuteClass == 'm29');
|
|
setActive('.m30', minuteClass == 'm30');
|
|
|
|
if (showSeconds) {
|
|
second = dateTime.getSeconds();
|
|
secondClass = `s${second}`;
|
|
|
|
setActive('.s0', secondClass == 's0');
|
|
setActive('.s1', secondClass == 's1');
|
|
setActive('.s2', secondClass == 's2');
|
|
setActive('.s3', secondClass == 's3');
|
|
setActive('.s4', secondClass == 's4');
|
|
setActive('.s5', secondClass == 's5');
|
|
setActive('.s6', secondClass == 's6');
|
|
setActive('.s7', secondClass == 's7');
|
|
setActive('.s8', secondClass == 's8');
|
|
setActive('.s9', secondClass == 's9');
|
|
setActive('.s10', secondClass == 's10');
|
|
setActive('.s11', secondClass == 's11');
|
|
setActive('.s12', secondClass == 's12');
|
|
setActive('.s13', secondClass == 's13');
|
|
setActive('.s14', secondClass == 's14');
|
|
setActive('.s15', secondClass == 's15');
|
|
setActive('.s16', secondClass == 's16');
|
|
setActive('.s17', secondClass == 's17');
|
|
setActive('.s18', secondClass == 's18');
|
|
setActive('.s19', secondClass == 's19');
|
|
setActive('.s20', secondClass == 's20');
|
|
setActive('.s21', secondClass == 's21');
|
|
setActive('.s22', secondClass == 's22');
|
|
setActive('.s23', secondClass == 's23');
|
|
setActive('.s24', secondClass == 's24');
|
|
setActive('.s25', secondClass == 's25');
|
|
setActive('.s26', secondClass == 's26');
|
|
setActive('.s27', secondClass == 's27');
|
|
setActive('.s28', secondClass == 's28');
|
|
setActive('.s29', secondClass == 's29');
|
|
setActive('.s30', secondClass == 's30');
|
|
setActive('.s31', secondClass == 's31');
|
|
setActive('.s32', secondClass == 's32');
|
|
setActive('.s33', secondClass == 's33');
|
|
setActive('.s34', secondClass == 's34');
|
|
setActive('.s35', secondClass == 's35');
|
|
setActive('.s36', secondClass == 's36');
|
|
setActive('.s37', secondClass == 's37');
|
|
setActive('.s38', secondClass == 's38');
|
|
setActive('.s39', secondClass == 's39');
|
|
setActive('.s40', secondClass == 's40');
|
|
setActive('.s41', secondClass == 's41');
|
|
setActive('.s42', secondClass == 's42');
|
|
setActive('.s43', secondClass == 's43');
|
|
setActive('.s44', secondClass == 's44');
|
|
setActive('.s45', secondClass == 's45');
|
|
setActive('.s46', secondClass == 's46');
|
|
setActive('.s47', secondClass == 's47');
|
|
setActive('.s48', secondClass == 's48');
|
|
setActive('.s49', secondClass == 's49');
|
|
setActive('.s50', secondClass == 's50');
|
|
setActive('.s51', secondClass == 's51');
|
|
setActive('.s52', secondClass == 's52');
|
|
setActive('.s53', secondClass == 's53');
|
|
setActive('.s54', secondClass == 's54');
|
|
setActive('.s55', secondClass == 's55');
|
|
setActive('.s56', secondClass == 's56');
|
|
setActive('.s57', secondClass == 's57');
|
|
setActive('.s58', secondClass == 's58');
|
|
setActive('.s59', secondClass == 's59');
|
|
}
|
|
}
|
|
|
|
function showButtons() {
|
|
document.querySelector('.buttons').classList.remove('hidden');
|
|
setTimeout(() => {
|
|
document.querySelector('.buttons').classList.add('hidden');
|
|
}, 5000);
|
|
}
|
|
|
|
function makeFullscreen() {
|
|
elem = document.querySelector('.containerT');
|
|
if (elem.requestFullscreen) {
|
|
elem.requestFullscreen();
|
|
} else if (elem.webkitRequestFullscreen) { /* Safari */
|
|
elem.webkitRequestFullscreen();
|
|
} else if (elem.msRequestFullscreen) { /* IE11 */
|
|
elem.msRequestFullscreen();
|
|
}
|
|
}
|
|
|
|
function setTheme(theme) {
|
|
localStorage.setItem('theme', theme);
|
|
document.querySelector('#theme').innerHTML = themes[theme];
|
|
}
|
|
|
|
function toggleSeconds() {
|
|
showSeconds = !showSeconds;
|
|
setActive('.seconds.active', false);
|
|
}
|
|
|
|
function log(text) {
|
|
document.getElementById('log').innerText = text;
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<span id="log"></span>
|
|
<div class="containerT">
|
|
<div class="buttons hidden"><button onclick="makeFullscreen()">Fullscreen</button><button><a href="./zegar2.html">Mały zegar</a></button><button onclick="toggleSeconds()">Sekundy</button></div>
|
|
<div class="containerTC" onclick="showButtons()">
|
|
<!-- <input type="text" value="01:45:00"> -->
|
|
<div><span class="active" onclick="makeFullscreen()">Teraz</span><span class="word">X</span><span class="active">Jest</span><span class="word"><span class="s0 seconds">S</span><span span class="s1 seconds">m</span><span class="s2 seconds">o</span><span class="s3 seconds">k</span></span><span class="m20 m21 m22 m23 m24 m25 m26 m27 m28 m29">Dwadzieścia</span> </div>
|
|
<div><span class="m1 m21">Jeden</span><span class="m2 m22">Dwa</span><span class="m3 m23">Trzy</span><span class="word">Bób</span><span class="m4 m24">Cztery</span><span class="m5 m25">Pięć</span></div>
|
|
<div><span class="m6 m26">Sześć</span><span class="word">W</span><span class="m7 m27">Siedem</span><span class="m8 m28">Osiem</span><span class="m9 m29">Dziewięć</span></div>
|
|
<div><span class="m10">Dziesięć</span><span class="word"><span class="s4 seconds">M</span><span span class="s5 seconds">a</span><span class="s6 seconds">t</span><span class="s7 seconds">e</span><span span class="s8 seconds">u</span><span class="s9 seconds">s</span><span class="s10 seconds">z</span></span><span class="m11">Jedenaście</span> </div>
|
|
<div><span class="m12">Dwanaście</span><span class="word"><span class="s11 seconds">A</span><span span class="s12 seconds">n</span><span class="s13 seconds">d</span><span class="s14 seconds">r</span><span class="s15 seconds">u</span><span class="s16 seconds">s</span></span><span class="m13">Trzynaście</span>
|
|
</div>
|
|
<div><span class="m14">Czternaście</span><span class="word"><span class="s17 seconds">I</span><span span class="s18 seconds">n</span><span class="s19 seconds">k</span><span class="s20 seconds">a</span></span><span class="m15">Piętnaście</span> </div>
|
|
<div><span class="m16">Szesnaście</span><span class="word"><span class="s21 seconds">T</span><span span class="s22 seconds">i</span><span class="s23 seconds">k</span></span><span class="m17">Siedemnaście</span>
|
|
</div>
|
|
<div><span class="m18">Osiemnaście</span><span class="m19">Dziewiętnaście</span></div>
|
|
<div><span class="m30">Wpół</span><span class="po">Po</span><span class="do">Do</span><span class="word">V</span><span class="h1m">Pierwszej</span><span class="h2m">Drugiej</span>
|
|
</div>
|
|
<div><span class="h3m">Trzeciej</span><span class="word"><span class="s24 seconds">T</span><span span class="s25 seconds">a</span><span class="s26 seconds">k</span></span><span class="h4m">Czwartej</span><span class="h5m">Piątej</span></div>
|
|
<div><span class="h6m">Szóstej</span><span class="word"><span class="s27 seconds">K</span><span class="s28 seconds">o</span><span class="s29 seconds">c</span><span class="s30 seconds">i</span><span span class="s31 seconds">a</span><span class="s32 seconds">k</span></span><span class="h7m">Siódmej</span><span class="h8m">Ósmej</span></div>
|
|
<div><span class="h9m">Dziewiątej</span><span class="h10m">Dziesiątej</span><span class="word"><span span class="s33 seconds">D</span><span class="s34 seconds">e</span><span class="s35 seconds">j</span><span class="s36 seconds">z</span><span class="s37 seconds">i</span></span>
|
|
</div>
|
|
<div><span class="h11m">Jedenastej</span><span class="word"><span class="s38 seconds">M</span><span span class="s39 seconds">o</span><span class="s40 seconds">n</span><span class="s41 seconds">i</span><span class="s42 seconds">k</span><span class="s43 seconds">a</span></span><span class="h12m">Dwunastej</span>
|
|
</div>
|
|
<div><span class="h1">Pierwsza</span><span class="word"><span class="s44 seconds">P</span><span span class="s45 seconds">e</span><span class="s46 seconds">r</span><span class="s47 seconds">ł</span><span class="s48 seconds">a</span></span><span class="h2">Druga</span><span class="h3">Trzecia</span>
|
|
</div>
|
|
<div><span class="h4">Czwarta</span><span class="h5">Piąta</span><span class="word">K</span><span class="h6">Szósta</span><span class="h7">Siódma</span>
|
|
</div>
|
|
<div><span class="h8">Osma</span><span class="h9">Dziewiąta</span><span class="word"><span span class="s49 seconds">T</span><span span class="s50 seconds">o</span><span span class="s51 seconds">k</span></span><span class="h10">Dziesiąta</span></div>
|
|
<div><span class="h11">Jedenasta</span><span class="word"><span class="s52 seconds">I</span><span span class="s53 seconds">s</span><span class="s54 seconds">k</span><span class="s55 seconds">i</span><span class="s56 seconds">e</span><span class="s57 seconds">r</span><span class="s58 seconds">k</span><span span class="s59 seconds">a</span></span><span class="h12">Dwunasta</span></div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
setTheme(localStorage.getItem('theme') != null ? localStorage.getItem('theme') : 'Czarny');
|
|
|
|
setTime();
|
|
for (theme in themes) {
|
|
document.querySelector('.buttons').innerHTML += `<button onclick="setTheme('${theme}')">${theme}</button>`;
|
|
}
|
|
setInterval(setTime, 100);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |