Collaborative-pixel-art/public/index.html
2023-11-24 07:43:27 +01:00

47 lines
1.8 KiB
HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collaborative Pixel Art</title>
<link rel="stylesheet" href="styles.css">
</head>
<body onload="
document.getElementById('intro').classList.add('fadeout')
setTimeout(() => {
document.getElementById('intro').style.display = 'none'
}, 800);
">
<div id="intro" class="intro">
<h2>Collaborative Pixel Art</h2>
</div>
<div class="header">
<h1>Collaborative Pixel Art</h1>
<div id="pixel-count">En cours de chargement...</div> <!-- Element to display pixel count -->
</div>
<div class="container">
<div id="canvas">
<!-- Canvas will be generated dynamically -->
</div>
<div class="color-selector">
<div class="color-option" style="background-color: #5454ff;"></div>
<div class="color-option" style="background-color: #00bbff;"></div>
<div class="color-option" style="background-color: #2e7d44;"></div>
<div class="color-option" style="background-color: #5ee834;"></div>
<div class="color-option" style="background-color: #ffe600;"></div>
<div class="color-option" style="background-color: #ff9900;"></div>
<div class="color-option" style="background-color: #FF0000;"></div>
<div class="color-option" style="background-color: #ff89ff;"></div>
<div class="color-option" style="background-color: #a04cf9;"></div>
<div class="color-option" style="background-color: #808080;"></div>
<div class="color-option" style="background-color: #FFFFFF;"></div>
<div class="color-option" style="background-color: #000000;"></div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="script.js"></script>
</body>
</html>