aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--index.html101
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>