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

3
.pretierrc
View File

@@ -6,5 +6,6 @@
"tabWidth": 2, "tabWidth": 2,
"useTabs": false, "useTabs": false,
"arrowParens": "always", "arrowParens": "always",
"endOfLine": "lf" "endOfLine": "lf",
"htmlWhitespaceSensitivity": "css"
} }

2
README.md
View File

@@ -7,9 +7,11 @@ Eliges las tarjetas. Se pulsa el botón grande.
Obtienes una lista de cocktails que pueden hacerse con esos licores. Obtienes una lista de cocktails que pueden hacerse con esos licores.
## Stack ## Stack
vite con vanilla javascript. vite con vanilla javascript.
Ejecútalo en local: Ejecútalo en local:
```bash ```bash
npm run dev npm run dev
``` ```

89
index.html
View File

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

4
package.json
View File

@@ -7,8 +7,8 @@
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"format": "prettier --write \"src/**/*.{js,json,css,md}\"", "format": "prettier --write \"./**/*.{js,json,css,md,html}\"",
"format:check": "prettier --check \"src/**/*.{js,json,css,md}\"" "format:check": "prettier --check \"src/**/*.{js,json,css,md,html}\""
}, },
"devDependencies": { "devDependencies": {
"prettier": "^3.8.1", "prettier": "^3.8.1",

BIN
public/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

21
src/styles.css
View File

@@ -73,21 +73,15 @@ body::before {
header { header {
text-align: center; text-align: center;
margin-bottom: 4rem; margin-bottom: 2rem;
position: relative; position: relative;
} }
h1 { .header-image {
font-family: "Fredoka", sans-serif; border-radius: 1rem;
font-size: 4.5rem; max-width: 768px;
font-weight: 700; margin: 0;
color: var(--deep-red);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
letter-spacing: -0.02em;
text-shadow:
2px 2px 0 var(--amber),
4px 4px 0 var(--cream);
animation: fadeInDown 0.8s ease-out;
} }
.subtitle { .subtitle {
@@ -95,6 +89,7 @@ h1 {
color: var(--olive); color: var(--olive);
font-style: italic; font-style: italic;
animation: fadeIn 1s ease-out 0.3s backwards; animation: fadeIn 1s ease-out 0.3s backwards;
margin-bottom: 0.5rem;
} }
@keyframes fadeInDown { @keyframes fadeInDown {
@@ -463,8 +458,8 @@ h2 {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
h1 { .header-image {
font-size: 3rem; max-width: 100%;
} }
.spirits-grid { .spirits-grid {

6
vite.config.js
View File

@@ -1,5 +1,5 @@
import { defineConfig } from 'vite' import { defineConfig } from "vite";
export default defineConfig({ export default defineConfig({
base: '/', base: "/",
}) });