283 lines
14 KiB
HTML
283 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>Recipe Generator</title>
|
|||
|
|
<style>
|
|||
|
|
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500&display=swap');
|
|||
|
|
|
|||
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--color-text-primary: #1a1a1a;
|
|||
|
|
--color-text-secondary: #6b6b6b;
|
|||
|
|
--color-background-primary: #ffffff;
|
|||
|
|
--color-background-secondary: #f5f5f4;
|
|||
|
|
--color-background-danger: #fef2f2;
|
|||
|
|
--color-text-danger: #b91c1c;
|
|||
|
|
--color-border-primary: #a3a3a3;
|
|||
|
|
--color-border-secondary: #d4d4d4;
|
|||
|
|
--color-border-tertiary: #e5e5e5;
|
|||
|
|
--border-radius-md: 8px;
|
|||
|
|
--border-radius-lg: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: 'DM Sans', sans-serif;
|
|||
|
|
background: var(--color-background-primary);
|
|||
|
|
color: var(--color-text-primary);
|
|||
|
|
padding: 2rem;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.app { display: none; width: 100%; max-width: 680px; padding: 2rem 0; }
|
|||
|
|
|
|||
|
|
#login-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--color-background-secondary); display: flex; align-items: center; justify-content: center; z-index: 1000; }
|
|||
|
|
|
|||
|
|
.login-card { background: var(--color-background-primary); padding: 2rem; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-lg); width: 100%; max-width: 320px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
|
|||
|
|
|
|||
|
|
.login-card h2 { font-family: 'Lora', serif; font-size: 24px; margin-bottom: 1.25rem; text-align: center; }
|
|||
|
|
|
|||
|
|
.header { margin-bottom: 2rem; border-bottom: 0.5px solid var(--color-border-tertiary); padding-bottom: 1.25rem; }
|
|||
|
|
|
|||
|
|
.header h1 { font-family: 'Lora', serif; font-size: 26px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 4px; }
|
|||
|
|
|
|||
|
|
.header p { font-size: 14px; color: var(--color-text-secondary); font-weight: 300; }
|
|||
|
|
|
|||
|
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
|
|||
|
|
|
|||
|
|
.form-field { display: flex; flex-direction: column; gap: 6px; }
|
|||
|
|
|
|||
|
|
.form-field.full { grid-column: 1 / -1; }
|
|||
|
|
|
|||
|
|
label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
|
|||
|
|
|
|||
|
|
input, textarea, select {
|
|||
|
|
font-family: 'DM Sans', sans-serif; font-size: 14px; padding: 9px 12px;
|
|||
|
|
border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md);
|
|||
|
|
background: var(--color-background-primary); color: var(--color-text-primary);
|
|||
|
|
width: 100%; transition: border-color 0.15s; outline: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input:focus, textarea:focus, select:focus { border-color: var(--color-border-primary); }
|
|||
|
|
|
|||
|
|
textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
|
|||
|
|
|
|||
|
|
.tags-input-wrapper {
|
|||
|
|
border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md);
|
|||
|
|
background: var(--color-background-primary); padding: 6px 8px;
|
|||
|
|
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
|
|||
|
|
cursor: text; min-height: 40px; transition: border-color 0.15s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tags-input-wrapper:focus-within { border-color: var(--color-border-primary); }
|
|||
|
|
|
|||
|
|
.tag { background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); border-radius: 4px; padding: 2px 8px; font-size: 13px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
|
|||
|
|
|
|||
|
|
.tag-x { cursor: pointer; color: var(--color-text-secondary); font-size: 15px; line-height: 1; }
|
|||
|
|
|
|||
|
|
.tag-x:hover { color: var(--color-text-primary); }
|
|||
|
|
|
|||
|
|
.tags-input { border: none !important; padding: 2px 4px !important; flex: 1; min-width: 100px; font-size: 14px; background: transparent !important; outline: none !important; }
|
|||
|
|
|
|||
|
|
.checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
|
|||
|
|
|
|||
|
|
.check-pill { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0.5px solid var(--color-border-secondary); border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.12s; background: var(--color-background-primary); user-select: none; }
|
|||
|
|
|
|||
|
|
.check-pill input { display: none; }
|
|||
|
|
|
|||
|
|
.check-pill.checked { background: var(--color-background-secondary); border-color: var(--color-border-primary); font-weight: 500; }
|
|||
|
|
|
|||
|
|
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-secondary); flex-shrink: 0; }
|
|||
|
|
|
|||
|
|
.check-pill.checked .dot { background: var(--color-text-primary); }
|
|||
|
|
|
|||
|
|
.generate-btn { width: 100%; padding: 11px; background: var(--color-text-primary); color: var(--color-background-primary); border: none; border-radius: var(--border-radius-md); font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; cursor: pointer; margin-top: 8px; transition: opacity 0.15s; }
|
|||
|
|
|
|||
|
|
.generate-btn:hover { opacity: 0.85; }
|
|||
|
|
|
|||
|
|
.generate-btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|||
|
|
|
|||
|
|
.status { text-align: center; padding: 2rem 0; color: var(--color-text-secondary); font-size: 14px; font-style: italic; }
|
|||
|
|
|
|||
|
|
.recipe-out { margin-top: 2.5rem; border-top: 0.5px solid var(--color-border-tertiary); padding-top: 2rem; animation: fadein 0.4s ease; }
|
|||
|
|
|
|||
|
|
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
|
|||
|
|
|
|||
|
|
.recipe-actions { display: flex; gap: 10px; margin-top: 1.5rem; }
|
|||
|
|
|
|||
|
|
.action-btn { flex: 1; padding: 10px; background: var(--color-background-primary); border: 0.5px solid var(--color-border-primary); border-radius: var(--border-radius-md); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
|
|||
|
|
|
|||
|
|
.action-btn:hover { background: var(--color-background-secondary); }
|
|||
|
|
|
|||
|
|
.saved-menu-btn { position: fixed; top: 20px; right: 20px; padding: 8px 16px; background: var(--color-text-primary); color: white; border: none; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
|
|||
|
|
|
|||
|
|
#saved-menu { position: fixed; top: 0; right: -350px; width: 320px; height: 100vh; background: var(--color-background-primary); box-shadow: -4px 0 15px rgba(0,0,0,0.05); transition: right 0.3s ease; z-index: 200; padding: 2rem 1.5rem; overflow-y: auto; border-left: 1px solid var(--color-border-tertiary); }
|
|||
|
|
|
|||
|
|
#saved-menu.open { right: 0; }
|
|||
|
|
|
|||
|
|
.saved-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
|||
|
|
|
|||
|
|
.saved-menu-header h2 { font-family: 'Lora', serif; font-size: 20px; }
|
|||
|
|
|
|||
|
|
.close-menu { cursor: pointer; font-size: 24px; color: var(--color-text-secondary); line-height: 1; background: none; border: none; }
|
|||
|
|
|
|||
|
|
.saved-recipe-item { padding: 12px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); margin-bottom: 10px; cursor: pointer; transition: border-color 0.15s; }
|
|||
|
|
|
|||
|
|
.saved-recipe-item:hover { border-color: var(--color-text-primary); }
|
|||
|
|
|
|||
|
|
.saved-recipe-item h3 { font-size: 15px; margin-bottom: 4px; }
|
|||
|
|
|
|||
|
|
.saved-recipe-item p { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|||
|
|
|
|||
|
|
.recipe-title { font-family: 'Lora', serif; font-size: 28px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 6px; }
|
|||
|
|
|
|||
|
|
.recipe-desc { font-size: 14px; color: var(--color-text-secondary); font-style: italic; margin-bottom: 1.25rem; line-height: 1.6; }
|
|||
|
|
|
|||
|
|
.meta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 1.75rem; }
|
|||
|
|
|
|||
|
|
.meta-chip { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 6px 14px; font-size: 13px; color: var(--color-text-secondary); }
|
|||
|
|
|
|||
|
|
.meta-chip strong { color: var(--color-text-primary); font-weight: 500; }
|
|||
|
|
|
|||
|
|
.section-label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 10px; margin-top: 1.5rem; }
|
|||
|
|
|
|||
|
|
.ingredients-list { list-style: none; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); overflow: hidden; }
|
|||
|
|
|
|||
|
|
.ingredients-list li { padding: 9px 16px; font-size: 14px; border-bottom: 0.5px solid var(--color-border-tertiary); display: flex; gap: 10px; align-items: baseline; }
|
|||
|
|
|
|||
|
|
.ingredients-list li:last-child { border-bottom: none; }
|
|||
|
|
|
|||
|
|
.ing-amount { font-weight: 500; min-width: 60px; }
|
|||
|
|
|
|||
|
|
.ing-name { color: var(--color-text-secondary); }
|
|||
|
|
|
|||
|
|
.steps-list { list-style: none; }
|
|||
|
|
|
|||
|
|
.step-item { display: flex; gap: 16px; margin-bottom: 1.25rem; }
|
|||
|
|
|
|||
|
|
.step-num { font-family: 'Lora', serif; font-size: 18px; font-weight: 600; color: var(--color-text-secondary); min-width: 28px; line-height: 1.5; }
|
|||
|
|
|
|||
|
|
.step-title { font-weight: 500; font-size: 14px; margin-bottom: 4px; }
|
|||
|
|
|
|||
|
|
.step-instr { font-size: 14px; line-height: 1.7; color: var(--color-text-secondary); }
|
|||
|
|
|
|||
|
|
.notes-box { background: var(--color-background-secondary); border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; padding: 12px 16px; font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); margin-top: 1.5rem; border-left: 2px solid var(--color-border-primary); }
|
|||
|
|
|
|||
|
|
.error-msg { background: var(--color-background-danger); color: var(--color-text-danger); border-radius: var(--border-radius-md); padding: 12px 16px; font-size: 13px; margin-top: 1rem; line-height: 1.5; }
|
|||
|
|
|
|||
|
|
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; }
|
|||
|
|
|
|||
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|||
|
|
</style>
|
|||
|
|
<script type="module" crossorigin src="/assets/index-CrgoFxjd.js"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="login-overlay">
|
|||
|
|
<div class="login-card">
|
|||
|
|
<h2 style="font-family: 'Lora', serif; font-size: 26px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 20px;">Welcome</h2>
|
|||
|
|
<div class="form-field" style="margin-bottom: 12px;">
|
|||
|
|
<label>Username</label>
|
|||
|
|
<input type="text" id="login-username" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-field" style="margin-bottom: 12px;">
|
|||
|
|
<label>Password</label>
|
|||
|
|
<input type="password" id="login-password" />
|
|||
|
|
</div>
|
|||
|
|
<button class="generate-btn" id="login-btn" style="margin-top: 12px;">Sign in</button>
|
|||
|
|
<div id="login-error" style="color: var(--color-text-danger); font-size: 13px; margin-top: 10px; text-align: center; display: none;">Invalid credentials</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="app" id="app-content">
|
|||
|
|
<button class="saved-menu-btn" id="open-menu-btn">View Saved Recipes</button>
|
|||
|
|
|
|||
|
|
<div id="saved-menu">
|
|||
|
|
<div class="saved-menu-header">
|
|||
|
|
<h2>Saved Recipes</h2>
|
|||
|
|
<button class="close-menu" id="close-menu-btn">×</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="saved-list">
|
|||
|
|
<!-- Saved items go here -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="header">
|
|||
|
|
<h1>Recipe Generator</h1>
|
|||
|
|
<p>Tell the AI what you have and what you want — it handles the rest.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-grid">
|
|||
|
|
<div class="form-field full">
|
|||
|
|
<label>Ingredients on hand</label>
|
|||
|
|
<div class="tags-input-wrapper" id="ing-wrapper">
|
|||
|
|
<input class="tags-input" id="ing-input" placeholder="Type an ingredient, press Enter..." />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-field full">
|
|||
|
|
<label>What do you want to make?</label>
|
|||
|
|
<input type="text" id="goal" placeholder="e.g. a hearty weeknight pasta, a light summer salad..." />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-field full">
|
|||
|
|
<label>Dietary restrictions</label>
|
|||
|
|
<div class="checkboxes">
|
|||
|
|
<label class="check-pill"><input type="checkbox" value="vegan"><span class="dot"></span>Vegan</label>
|
|||
|
|
<label class="check-pill"><input type="checkbox" value="vegetarian"><span class="dot"></span>Vegetarian</label>
|
|||
|
|
<label class="check-pill"><input type="checkbox" value="gluten-free"><span class="dot"></span>Gluten-free</label>
|
|||
|
|
<label class="check-pill"><input type="checkbox" value="dairy-free"><span class="dot"></span>Dairy-free</label>
|
|||
|
|
<label class="check-pill"><input type="checkbox" value="nut-free"><span class="dot"></span>Nut-free</label>
|
|||
|
|
<label class="check-pill"><input type="checkbox" value="low-carb"><span class="dot"></span>Low-carb</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-field">
|
|||
|
|
<label>Cuisine style</label>
|
|||
|
|
<select id="cuisine">
|
|||
|
|
<option value="">Any cuisine</option>
|
|||
|
|
<option>Italian</option><option>Mexican</option><option>Asian fusion</option>
|
|||
|
|
<option>Mediterranean</option><option>French</option><option>Indian</option>
|
|||
|
|
<option>American</option><option>Middle Eastern</option><option>Japanese</option><option>Thai</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-field">
|
|||
|
|
<label>Time available</label>
|
|||
|
|
<select id="time">
|
|||
|
|
<option value="">No limit</option>
|
|||
|
|
<option value="under 20 minutes">Under 20 minutes</option>
|
|||
|
|
<option value="under 30 minutes">Under 30 minutes</option>
|
|||
|
|
<option value="under 45 minutes">Under 45 minutes</option>
|
|||
|
|
<option value="under 1 hour">Under 1 hour</option>
|
|||
|
|
<option value="1–2 hours">1–2 hours</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-field">
|
|||
|
|
<label>Skill level</label>
|
|||
|
|
<select id="skill">
|
|||
|
|
<option value="">Any level</option>
|
|||
|
|
<option value="beginner-friendly">Beginner-friendly</option>
|
|||
|
|
<option value="intermediate">Intermediate</option>
|
|||
|
|
<option value="advanced">Advanced chef techniques</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-field">
|
|||
|
|
<label>Servings</label>
|
|||
|
|
<select id="servings">
|
|||
|
|
<option value="1">1</option><option value="2" selected>2</option>
|
|||
|
|
<option value="4">4</option><option value="6">6</option><option value="8">8</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-field full">
|
|||
|
|
<label>Any other notes or preferences</label>
|
|||
|
|
<textarea id="notes" placeholder="e.g. my kids hate mushrooms, I want it spicy, make it impressive enough for guests..."></textarea>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="generate-btn" id="gen-btn">Generate my recipe</button>
|
|||
|
|
<div id="error-area"></div>
|
|||
|
|
<div id="recipe-area"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|