blob: 124c7eac17189af592ab39876329d6c509765178 (
plain) (
tree)
|
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Орём!</title>
<style>
html, body {
height: 100%;
background-color: black;
color: white;
}
.screen-center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
/*
* This is cool: https://stackoverflow.com/a/33298969/514684
* Makes sure the button doesn't jump up.
*/
#note:empty:after {
content: '\200B';
visibility: hidden;
}
/*
* The fucking font boosting on Android's Chrome.
* This does seem to disable it, for God knows what reason:
* https://stackoverflow.com/a/16432702/514684
*/
html * {
max-height: 1000000px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="screen-center">
<div>
<p class="display-6">Пустота услышала</p>
<p class="display-3"><span id="screams">0</span> <small class="text-muted">криков</small></p>
<button type="button" class="btn btn-dark btn-lg mt-5" onClick="on_scream_btn_click();">Кричать в пустоту</button>
<div class="text-muted mt-3" id="note"></div>
</div>
</div>
</div>
</div>
</div>
<!--
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
function dump_fail(data) {
console.log('Response code was: ' + data.status + ' ' + data.statusText);
console.log('Response was:\n' + data.responseText);
}
function get(url, success_callback) {
$.get(url, success_callback).fail(dump_fail);
}
function set_screams(screams) {
$('#screams').text(screams);
}
function load_screams() {
get('screams', function(data) {
set_screams(data);
});
}
var screams_now = 0;
function set_note(text) {
$('#note').text(text);
}
function handle_screams_now() {
switch (screams_now) {
case 5:
set_note('Мы орём!');
break;
case 15:
set_note('Как же ты орёшь.');
break;
case 30:
set_note('Давай поорём вместе.');
break;
}
}
function on_scream_btn_click() {
get('scream', function(data) {
set_screams(data);
++screams_now;
handle_screams_now();
});
}
function main() {
load_screams();
}
$(function() {
main();
});
</script>
</body>
</html>
|
