<!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; /* Adjust the height as needed */
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); // Clear canvas
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(); // Initial draw
</script>
</div>
</body>
</html>