init

2025-10-20 21:08:52 +03:00
commit 4aaa436079
20 changed files with 6824 additions and 0 deletions
--- a/static/style.css
+++ b/static/style.css
@@ -0,0 +1,162 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+:root {
+    --bg: #334;
+    --bg-2: #557;
+    --fg: #fff;
+    --bg-chat-service: #ccc;
+    --fg-chat-service: #000;
+    --bg-chat-self: #fff;
+    --fg-chat-self: #000;
+    --bg-chat-other: #335;
+    --fg-chat-other: #fff;
+    --bg-cell-open: #eee;
+    --bg-cell-closed: #adf;
+    --bg-cell-bomb: #f55;
+    --fg-cell-1: #6B9EFF;
+    --fg-cell-2: #6BCF8A;
+    --fg-cell-3: #FF7B7B;
+    --fg-cell-4: #6B7BFF;
+    --fg-cell-5: #C79B6B;
+    --fg-cell-6: #6BD1C7;
+    --fg-cell-7: #666;
+    --fg-cell-8: #999;
+}
+
+* {
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--bg);
+    color: var(--fg);
+    font-family: "Montserrat", sans-serif;
+    font-optical-sizing: auto;
+}
+
+#content {
+    margin: 50px;
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.block {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.block>div {
+    display: flex;
+    flex: 1 1 auto;
+    gap: 5px;
+}
+
+.block>div>* {
+    flex: 1 1 0;
+    text-align: center;
+}
+
+#game {
+    background: #fff;
+
+    border: 1px solid var(--bg);
+
+    display: flex;
+
+    border-radius: 10px;
+
+    overflow: hidden;
+}
+
+#game,
+#game-canvas {
+    height: 600px;
+}
+
+#game-canvas {
+    border-right: 1px solid var(--bg);
+    background-color: var(--bg-2);
+    width: 800px;
+}
+
+#game-tools {
+    background-color: var(--bg-2);
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+}
+
+#chat-and-users {
+    border-bottom: 1px solid var(--bg);
+    flex: 1 1 0;
+    display: flex;
+    overflow: hidden;
+}
+
+#chat-and-users>* {
+    flex: 1 1 0;
+    /* display: flex;
+    flex-direction: column; */
+
+    /* justify-content: flex-end; */
+    overflow: auto;
+}
+
+.chat-service-msg,
+.chat-self-msg,
+.chat-other-msg {
+    border-radius: 5px;
+    padding: 5px;
+    margin: 5px;
+    /* width: 100%; */
+    overflow: hidden;
+}
+
+.chat-service-msg {
+    background-color: var(--bg-chat-service);
+    color: var(--fg-chat-service);
+}
+
+.chat-self-msg {
+    background-color: var(--bg-chat-self);
+    color: var(--fg-chat-self);
+}
+
+.chat-other-msg {
+    background-color: var(--bg-chat-other);
+    color: var(--fg-chat-other);
+}
+
+#buttons {
+    display: flex;
+}
+
+#buttons>input {
+    flex: 1 1 auto;
+}
+
+.color-picker {
+    display: flex;
+    align-items: center;
+}
+
+.color-picker>span {
+    flex: 1 1 auto;
+    text-align: center;
+    color: var(--fg);
+}
+
+a {
+    color: var(--fg);
+}
+
+footer {
+    font-size: 1.5em;
+    margin-top: 100px;
+    font-family: 500;
+    text-align: center;
+}