dan63
/
Problem-2038-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fullscreen mode

This commit is contained in:
dan63047 2020-07-03 19:11:24 +03:00
parent ab54c476ea
commit 07b75e8168
4 changed files with 97 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
fullscreen-style.css Normal file
View File

@ -0,0 +1,51 @@
body{
background-color: #000;
color: #fff;
font-family: 'Heebo', sans-serif;
}
#prog{
width: 100%;
}
#time{
font-size: 10em;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
overflow: auto;
}
#time-left-readable{
text-align: center;
cursor: pointer;
}
#bar{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
#button-to-fullscreen, #button-fullscreen-exit{
position: absolute;
left: 25px;
top: 35px;
cursor: pointer;
color: #333;
z-index: 1;
}
#button-to-fullscreen:hover, #button-fullscreen-exit:hover{
color: #fff;
}
#button-to-fullscreen, #decsription, footer{
display: none;
}
#title{
text-align: center;
}
a:visited{
color: #fff;
}

22
index.html
View File

@ -6,15 +6,33 @@
<title>Проблема 2038 года</title>
<link href="https://fonts.googleapis.com/css?family=Heebo&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="icon.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" id="style" type="text/css" href="style.css">
<meta name="theme-color" id="meta-color" content="#000000">
</head>
<body>
<div id="button-to-fullscreen" onclick="document.documentElement.requestFullscreen();">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrows-fullscreen" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.464 10.536a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3.5a.5.5 0 0 1-.5-.5v-3.5a.5.5 0 0 1 .5-.5z"/>
<path fill-rule="evenodd" d="M5.964 10a.5.5 0 0 1 0 .707l-4.146 4.147a.5.5 0 0 1-.707-.708L5.257 10a.5.5 0 0 1 .707 0zm8.854-8.854a.5.5 0 0 1 0 .708L10.672 6a.5.5 0 0 1-.708-.707l4.147-4.147a.5.5 0 0 1 .707 0z"/>
<path fill-rule="evenodd" d="M10.5 1.5A.5.5 0 0 1 11 1h3.5a.5.5 0 0 1 .5.5V5a.5.5 0 0 1-1 0V2h-3a.5.5 0 0 1-.5-.5zm4 9a.5.5 0 0 0-.5.5v3h-3a.5.5 0 0 0 0 1h3.5a.5.5 0 0 0 .5-.5V11a.5.5 0 0 0-.5-.5z"/>
<path fill-rule="evenodd" d="M10 9.964a.5.5 0 0 0 0 .708l4.146 4.146a.5.5 0 0 0 .708-.707l-4.147-4.147a.5.5 0 0 0-.707 0zM1.182 1.146a.5.5 0 0 0 0 .708L5.328 6a.5.5 0 0 0 .708-.707L1.889 1.146a.5.5 0 0 0-.707 0z"/>
<path fill-rule="evenodd" d="M5.5 1.5A.5.5 0 0 0 5 1H1.5a.5.5 0 0 0-.5.5V5a.5.5 0 0 0 1 0V2h3a.5.5 0 0 0 .5-.5z"/>
</svg>
</div>
<div id="button-fullscreen-exit" onclick="document.exitFullscreen();">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-fullscreen-exit" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"/>
</svg>
</div>
<div id="counter">
<h1 id="title">До смерти 32-битных систем осталось</h1>
<div style="text-align: center;"><span id="time-left" onclick="msecDisplaySwitcher()"></span><span id="time-left-msec"></span></div>
<div id="time"></div>
<div id="bar">
<p id="time-left-readable" onclick="ReadableTimerSwitcher()"></p>
<progress id="prog" max="2147483647"></progress>
</div>
</div>
<div id="decsription">
<h3>О чём этот сайт?</h3>
<p>Проблема 2038 года в вычислительной технике — ожидаемые сбои в программном обеспечении накануне 19 января

23
script.js
View File

@ -1,36 +1,29 @@
const maxtimestamp = 2147483647;
var readable_timer_mode = 0;
var msec_display = true;
function ReadableTimerSwitcher(){
readable_timer_mode++
if(readable_timer_mode > 2){readable_timer_mode = 0}
}
function msecDisplaySwitcher(){
if(msec_display){
msec_display = false
$("#time-left-msec").css("display", "none");
addEventListener("fullscreenchange", (event) => {
console.log("lol")
if(document.fullscreen){
$("#style").attr("href", "fullscreen-style.css")
}else{
msec_display = true
$("#time-left-msec").css("display", "unset");
$("#style").attr("href", "style.css")
}
}
})
function Cycle() {
var timestamp = Date.now() / 1000,
left = maxtimestamp - timestamp,
tmsec = Math.floor(left * 1000) % 1000,
t = Math.floor(left);
$("#time-left").html(t.toLocaleString('ru'));
$("#time-left-msec").html("." + ('00' + tmsec).slice(-3));
$("#time").html(t.toLocaleString('ru'));
$("#prog").val(timestamp);
$("#timestamp").html(Math.trunc(timestamp).toLocaleString('ru'));
if (left < 60 && readable_timer_mode != 2) { $("#time-left-readable").css("display", "none") }
if (left <= 0) {
clearInterval(c);
$("#time-left").html("0");
$("#time-left-msec").html(".000");
$("#time").html("0");
$("#title").html("С͓̪̩̳͕͍̄ͮͤ̚̚м̦͎͉̝̋̄е̥͕̫̫̱̱͓̞̾р̞̤̰͖̤̟̫͓̏̍͒ͣ͐͂̚ͅт̗̥̲̩̣̯̹̅ͅь̙͍̟̟̮̩̦̹ͩͤ");
}
switch (readable_timer_mode){

17
style.css
View File

@ -6,14 +6,27 @@ body{
#prog{
width: 100%;
}
#time-left{
#time{
text-align: center;
font-size: 10em;
cursor: pointer;
}
#time-left-readable{
text-align: center;
cursor: pointer;
}
#button-to-fullscreen, #button-fullscreen-exit{
position: absolute;
left: 25px;
top: 35px;
cursor: pointer;
color: #333;
}
#button-to-fullscreen:hover, #button-fullscreen-exit:hover{
color: #fff;
}
#button-fullscreen-exit{
display: none;
}
#title{
text-align: center;
}