index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Juego de Mecanografía</title>

    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Contenedor Principal -->
    <div id="main-container">
        <!-- Header -->
        <header id="header">
            <h1>¡Practica tu velocidad de mecanografía!</h1>
            <div id="header-buttons">
                <button id="language-button">Cambiar a Inglés</button>
                <button id="start-button">Iniciar Juego</button>
                <button id="pause-button">Pausar</button>
                
            </div>
        </header>

        <!-- Contenedor del juego -->
        <main id="game-container">
            <div id="text-to-type">Escribe el texto aquí para empezar...</div>
            <input type="text" id="input-box" placeholder="Escribe aquí...">
            <div id="info">
                <p id="timer">Tiempo: 0 segundos</p>
                <p id="score">Puntuación: 0</p>
            </div>
            <div id="feedback"></div>
        </main>
    </div>
    
<footer class="footer">
    Hecho por <a href="https://github.com/maurux01" target="_blank">maurux01</a>
</footer>
    
    <!-- Script -->
    <script src="script.js"></script>
</body>
</html>