-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
119 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,141 +1,164 @@ | ||
| /* Estilos generales */ | ||
| body { | ||
| font-family: 'Poppins', sans-serif; | ||
| background: linear-gradient(135deg, #eef3f7, #d6e0e6); | ||
| font-family: 'Arial', sans-serif; | ||
| background-color: #1a1a1a; | ||
| color: #ffffff; | ||
| margin: 0; | ||
| padding: 0; | ||
| padding: 20px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| min-height: 100vh; | ||
| color: #333; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| /* Header y título */ | ||
| #header { | ||
| margin: 20px auto; | ||
| width: 100%; | ||
| /* Contenedor principal */ | ||
| .game-container { | ||
| background-color: #2d2d2d; | ||
| padding: 30px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | ||
| width: 80%; | ||
| max-width: 800px; | ||
| text-align: center; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| #header h1 { | ||
| font-size: 2.8rem; | ||
| color: #222; | ||
| /* Área de texto para escribir */ | ||
| .typing-area { | ||
| background-color: #3d3d3d; | ||
| padding: 20px; | ||
| border-radius: 5px; | ||
| margin-bottom: 20px; | ||
| text-transform: uppercase; | ||
| letter-spacing: 1.5px; | ||
| font-weight: 700; | ||
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); | ||
| line-height: 1.2; | ||
| font-size: 1.2em; | ||
| line-height: 1.6; | ||
| } | ||
|
|
||
| /* Contenedor del juego */ | ||
| .game-container { | ||
| background-color: #ffffff; | ||
| padding: 30px; | ||
| border-radius: 15px; | ||
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | ||
| width: 90%; | ||
| max-width: 600px; | ||
| margin: 20px auto; | ||
| text-align: center; | ||
| transition: transform 0.3s ease, box-shadow 0.3s ease; | ||
| /* Texto a escribir */ | ||
| .text-to-type { | ||
| color: #888; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .game-container:hover { | ||
| transform: translateY(-5px); | ||
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); | ||
| /* Texto correcto */ | ||
| .correct { | ||
| color: #4CAF50; | ||
| } | ||
|
|
||
| /* Botones */ | ||
| .button-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| gap: 10px; | ||
| margin: 20px 0; | ||
| flex-wrap: wrap; | ||
| /* Texto incorrecto */ | ||
| .incorrect { | ||
| color: #f44336; | ||
| text-decoration: underline wavy #f44336; | ||
| } | ||
|
|
||
| .game-button { | ||
| padding: 10px 20px; | ||
| /* Campo de entrada */ | ||
| .input-field { | ||
| width: 100%; | ||
| padding: 15px; | ||
| font-size: 1.1em; | ||
| background-color: #4d4d4d; | ||
| border: none; | ||
| border-radius: 8px; | ||
| font-size: 1rem; | ||
| font-weight: 600; | ||
| cursor: pointer; | ||
| transition: all 0.3s ease, transform 0.2s ease; | ||
| text-transform: uppercase; | ||
| letter-spacing: 0.5px; | ||
| border-radius: 5px; | ||
| color: #ffffff; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .start-button { | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| .input-field:focus { | ||
| outline: none; | ||
| box-shadow: 0 0 5px #00ff00; | ||
| } | ||
|
|
||
| .language-button { | ||
| background-color: #2196F3; | ||
| color: white; | ||
| /* Estadísticas */ | ||
| .stats { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .pause-button { | ||
| background-color: #FFA000; | ||
| color: white; | ||
| .stat-box { | ||
| background-color: #3d3d3d; | ||
| padding: 15px; | ||
| border-radius: 5px; | ||
| text-align: center; | ||
| min-width: 120px; | ||
| } | ||
|
|
||
| .game-button:hover { | ||
| transform: translateY(-3px); | ||
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); | ||
| .stat-label { | ||
| font-size: 0.9em; | ||
| color: #888; | ||
| } | ||
|
|
||
| .game-button:active { | ||
| transform: translateY(0); | ||
| box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); | ||
| .stat-value { | ||
| font-size: 1.5em; | ||
| color: #00ff00; | ||
| margin-top: 5px; | ||
| } | ||
|
|
||
| /* Campo de texto */ | ||
| .text-input { | ||
| width: 100%; | ||
| max-width: 500px; | ||
| padding: 15px; | ||
| margin: 20px 0; | ||
| border: 2px solid #e0e0e0; | ||
| border-radius: 8px; | ||
| font-size: 1rem; | ||
| transition: border-color 0.3s ease, box-shadow 0.3s ease; | ||
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
| /* Botones */ | ||
| .button { | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| padding: 10px 20px; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| font-size: 1em; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| .text-input:focus { | ||
| outline: none; | ||
| border-color: #4CAF50; | ||
| box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); | ||
| .button:hover { | ||
| background-color: #45a049; | ||
| } | ||
|
|
||
| /* Estadísticas */ | ||
| .stats { | ||
| font-size: 1.1rem; | ||
| color: #555; | ||
| margin-top: 10px; | ||
| text-align: left; | ||
| /* Temporizador */ | ||
| .timer { | ||
| font-size: 2em; | ||
| color: #00ff00; | ||
| margin-bottom: 20px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| /* Footer */ | ||
| footer { | ||
| /* Resultados finales */ | ||
| .results { | ||
| text-align: center; | ||
| margin-top: 20px; | ||
| font-size: 0.9rem; | ||
| color: #666; | ||
| padding: 20px; | ||
| background-color: #3d3d3d; | ||
| border-radius: 5px; | ||
| display: none; | ||
| } | ||
|
|
||
| footer a { | ||
| color: #2196F3; | ||
| text-decoration: none; | ||
| font-weight: 600; | ||
| .results h2 { | ||
| color: #00ff00; | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| footer a:hover { | ||
| text-decoration: underline; | ||
| /* Animaciones */ | ||
| @keyframes blink { | ||
| 0% { opacity: 1; } | ||
| 50% { opacity: 0; } | ||
| 100% { opacity: 1; } | ||
| } | ||
|
|
||
| .cursor { | ||
| display: inline-block; | ||
| width: 2px; | ||
| height: 1.2em; | ||
| background-color: #00ff00; | ||
| margin-left: 2px; | ||
| animation: blink 1s infinite; | ||
| } | ||
|
|
||
| /* Responsive */ | ||
| @media (max-width: 768px) { | ||
| .game-container { | ||
| width: 95%; | ||
| padding: 15px; | ||
| } | ||
|
|
||
| .stats { | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| } | ||
|
|
||
| .stat-box { | ||
| width: 100%; | ||
| } | ||
| } |