jjsalinas/licores-son-amores
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Banner img added. Format applied to whole project (html and md too)
Some checks failed
Deploy to GitHub Pages / build (push) Has been cancelled
Details
Deploy to GitHub Pages / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Jose Jimenez
2026-02-15 20:53:26 +01:00
parent c25fbe6d72
commit 695b5cdd44
7 changed files with 72 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
index.html
View File

@@ -7,58 +7,77 @@
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;1,400&display=swap"
rel="stylesheet"
/>
<!-- styles -->
<link rel="stylesheet" href="./src/styles.css">
<link rel="stylesheet" href="./src/styles.css" />
<title>Licores son Amores</title>
</head>
<body>
<div class="container">
<div class="container">
<header>
<h1>Licores son Amores</h1>
<p class="subtitle">Descubre qué cócteles puedes preparar</p>
<button id="show-all-recipes-button" disabled="false">
¡Ver todos los cocktails!
</button>
<img src="banner.png" class="header-image" />
<p class="subtitle">Descubre qué cócteles puedes preparar</p>
<button id="show-all-recipes-button" disabled="false">
¡Ver todos los cocktails!
</button>
</header>
<div class="section">
<h2>Tus Licores</h2>
<div class="spirits-grid" id="spiritsGrid">
</div>
<button class="mix-button" id="mix-button" disabled="true">
¡A Mezclar!
<h2>Tus Licores</h2>
<div class="spirits-grid" id="spiritsGrid"></div>
<button class="mix-button" id="mix-button" disabled="true">
¡A Mezclar!
</button>
<!-- TODO: select all/none -->
<div class="selection-options" id="selection-options">
<button
class="selection-button"
id="select-all-button"
disabled="false"
>
¡Todos!
</button>
<!-- TODO: select all/none -->
<div class="selection-options" id="selection-options">
<button class="selection-button" id="select-all-button" disabled="false">
¡Todos!
</button>
<button class="selection-button" id="select-none-button" disabled="true">
Reset
</button>
</div>
<button
class="selection-button"
id="select-none-button"
disabled="true"
>
Reset
</button>
</div>
</div>
<div class="section">
<h2>Recetas Disponibles</h2>
<div id="recipesContainer" class="recipes-container">
<p class="no-recipes">Selecciona tus licores y presiona "¡A Mezclar!" para descubrir qué cócteles puedes preparar.</p>
</div>
<h2>Recetas Disponibles</h2>
<div id="recipesContainer" class="recipes-container">
<p class="no-recipes">
Selecciona tus licores y presiona "¡A Mezclar!" para descubrir qué
cócteles puedes preparar.
</p>
</div>
</div>
<div class="section">
<h2>Advertencia ⚠️</h2>
<div id="warningContainer">
<p class="warning-msg">El consumo de alcohol está prohibido a menores de 18 años 🔞</p>
<p class="warning-msg">No te recomiendo el consumo de alcohol en general 🚱</p>
<p class="warning-msg">Si vas a consumir alcohol siempre con moderación 🍷✋</p>
</div>
<h2>Advertencia ⚠️</h2>
<div id="warningContainer">
<p class="warning-msg">
El consumo de alcohol está prohibido a menores de 18 años 🔞
</p>
<p class="warning-msg">
No te recomiendo el consumo de alcohol en general 🚱
</p>
<p class="warning-msg">
Si vas a consumir alcohol siempre con moderación 🍷✋
</p>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>