Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link | |
| rel="icon" | |
| href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎱</text></svg>" | |
| /> | |
| <meta name="viewport" content="width=device-width, user-scalable=no" /> | |
| <meta name="monetization" content="$ilp.uphold.com/JKriL7R2DZfa" /> | |
| <style> | |
| :root { | |
| --inner-height: 100vh; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| outline: none; | |
| } | |
| html, | |
| body { | |
| width: 100vw; | |
| height: var(--inner-height); | |
| overflow: hidden; | |
| background-color: #370000; | |
| touch-action: none; | |
| } | |
| img { | |
| display: none; | |
| } | |
| button { | |
| cursor: pointer; | |
| } | |
| #a { | |
| display: grid; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| @media (orientation: landscape) { | |
| #a { | |
| grid-template-areas: "a1 a2"; | |
| grid-template-columns: 300px 1fr; | |
| } | |
| #canvas { | |
| max-width: calc(100vw - 300px); | |
| max-height: var(--inner-height); | |
| } | |
| } | |
| @media (orientation: portrait) { | |
| #a { | |
| grid-template-areas: | |
| "a1" | |
| "a2"; | |
| grid-template-rows: 200px 1fr; | |
| } | |
| #canvas { | |
| max-width: 100vw; | |
| max-height: calc(var(--inner-height) - 200px); | |
| } | |
| } | |
| #a1 { | |
| grid-area: a1; | |
| } | |
| #a2 { | |
| grid-area: a2; | |
| } | |
| #b { | |
| display: grid; | |
| width: 100%; | |
| height: 100%; | |
| max-height: var(--inner-height); | |
| } | |
| @media (orientation: landscape) { | |
| #b { | |
| grid-template-areas: | |
| "b1 b1" | |
| "b2 b2" | |
| "b3 b4"; | |
| grid-template-columns: 1fr 56px; | |
| grid-template-rows: 1fr 2fr 36px; | |
| } | |
| } | |
| @media (orientation: portrait) { | |
| #b { | |
| grid-template-areas: | |
| "b2 b2 b1" | |
| "b3 b4 b1"; | |
| grid-template-columns: 1fr 56px 1fr; | |
| grid-template-rows: 1fr 36px; | |
| } | |
| } | |
| #b1 { | |
| grid-area: b1; | |
| } | |
| #b2 { | |
| grid-area: b2; | |
| } | |
| #b1, | |
| #b2 { | |
| background-color: #550000; | |
| padding: 5px; | |
| border: 3px solid #aa0000; | |
| } | |
| #b3 { | |
| grid-area: b3; | |
| background-color: #550000; | |
| padding: 0 5px; | |
| border: 3px solid #aa0000; | |
| } | |
| #b4 { | |
| grid-area: b4; | |
| border: 3px solid #aa0000; | |
| } | |
| #b textarea, | |
| #b input, | |
| #b button { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| color: white; | |
| font-family: "Courier New", Courier, monospace; | |
| font-weight: bold; | |
| } | |
| #b input { | |
| background-color: #550000; | |
| } | |
| #b textarea { | |
| background-color: #550000; | |
| resize: none; | |
| } | |
| #b textarea:disabled { | |
| opacity: 1; | |
| } | |
| #b button { | |
| background-color: #55aa00; | |
| text-align: center; | |
| display: inline-block; | |
| } | |
| #b1 textarea { | |
| white-space: pre; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="a"> | |
| <div id="a1"> | |
| <div id="b"> | |
| <div id="b1"> | |
| <textarea disabled="disabled" wrap="off">CONNECTING...</textarea> | |
| </div> | |
| <div id="b2"> | |
| <textarea disabled="disabled"></textarea> | |
| </div> | |
| <div id="b3"> | |
| <input placeholder="Message" type="text" autocomplete="off" autocapitalize="off" /> | |
| </div> | |
| <div id="b4"> | |
| <button>Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="a2"> | |
| <canvas id="canvas"></canvas> | |
| </div> | |
| </div> | |
| <img src="table.webp" /> | |
| <script src="socket.io/socket.io.js"></script> | |
| <script src="client.js"></script> | |
| </body> | |
| </html> | |