diff options
| author | Egor Tensin <Egor.Tensin@gmail.com> | 2022-03-11 22:06:06 +0500 |
|---|---|---|
| committer | Egor Tensin <Egor.Tensin@gmail.com> | 2022-03-11 22:06:06 +0500 |
| commit | ffd008bfac03a48aa739897491f2614a465610d1 (patch) | |
| tree | 5eb2a75d7e604d3238c4f4532382ef08ccd50ec3 | |
| parent | add GitHub Actions workflow (diff) | |
| download | void-ffd008bfac03a48aa739897491f2614a465610d1.tar.gz void-ffd008bfac03a48aa739897491f2614a465610d1.zip | |
add index.html
| -rw-r--r-- | index.html | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..9ce3b24 --- /dev/null +++ b/index.html @@ -0,0 +1,101 @@ +<!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; +} + </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-1"><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="small 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> |