Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Retro Tetris</title> | |
| <style> | |
| @font-face { | |
| font-family: 'RetroArcade'; | |
| src: url('/assets/fonts/RetroArcade.ttf') format('truetype'); | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background: #000; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| font-family: 'RetroArcade', monospace; | |
| } | |
| #tv-frame { | |
| position: relative; | |
| width: 100%; | |
| height: 500px; | |
| background: url(assets/tv.png) no-repeat center; | |
| background-size: contain; | |
| align-content: center; | |
| } | |
| #game-container { | |
| position: relative; | |
| width: 512px; | |
| height: 390.25px; | |
| /* left: 200px; */ | |
| /* top: 46.75px; */ | |
| place-self: anchor-center; | |
| } | |
| #game-container canvas { | |
| image-rendering: -moz-crisp-edges; | |
| image-rendering: -webkit-crisp-edges; | |
| image-rendering: pixelated; | |
| image-rendering: crisp-edges; | |
| width: 100% ; | |
| height: 100% ; | |
| } | |
| #credits { | |
| margin-top: 20px; | |
| font-size: 11px; | |
| color: #eeeeee; | |
| text-align: center; | |
| font-family: Arial, sans-serif; | |
| } | |
| #credits a { | |
| color: #eeeeee; | |
| text-decoration: none; | |
| } | |
| #credits a:hover { | |
| text-decoration: underline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="tv-frame"> | |
| <div id="game-container"></div> | |
| </div> | |
| <div id="credits"> | |
| Created by Marco van Hylckama Vlieg - <a href="https://ai-created.com" target="_blank">ai-created.com</a> - <a href="https://x.com/AIandDesign" target="_blank">x.com/AIandDesign</a> | |
| </div> | |
| <script type="module" src="/src/main.js"></script> | |
| </body> | |
| </html> | |