1 files changed, 121 insertions, 0 deletions
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..124c7ea
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,121 @@
+<!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>