| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width" /> |
| <title>My static Space</title> |
| <link rel="stylesheet" href="style.css" /> |
| <style> |
| canvas { |
| border: 1px solid black; |
| display: block; |
| margin: 50px auto; |
| } |
| iframe { |
| width: 100%; |
| height: 500px; |
| border: 1px solid black; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="card"> |
| <h1>Welcome to your static Space!</h1> |
| <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p> |
| <p> |
| Also don't forget to check the |
| <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>. |
| </p> |
| <iframe src="https://app.cu.bzh/" frameborder="0" sandbox="allow-scripts allow-same-origin allow-modals"></iframe> |
| <canvas id="gameCanvas" width="400" height="400"></canvas> |
| <script> |
| const canvas = document.getElementById('gameCanvas'); |
| const ctx = canvas.getContext('2d'); |
| |
| let circle = { |
| x: 200, |
| y: 200, |
| radius: 20, |
| speed: 5 |
| }; |
| |
| function drawCircle() { |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| ctx.beginPath(); |
| ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); |
| ctx.fillStyle = 'red'; |
| ctx.fill(); |
| ctx.closePath(); |
| } |
| |
| document.addEventListener('keydown', (e) => { |
| switch (e.key) { |
| case 'ArrowUp': |
| circle.y -= circle.speed; |
| break; |
| case 'ArrowDown': |
| circle.y += circle.speed; |
| break; |
| case 'ArrowLeft': |
| circle.x -= circle.speed; |
| break; |
| case 'ArrowRight': |
| circle.x += circle.speed; |
| break; |
| } |
| drawCircle(); |
| }); |
| |
| drawCircle(); |
| |
| </script> |
| </div> |
| </body> |
| </html> |
|
|
