mirror of
https://gitlab.com/Zer0interrupt/recipe-manager.git
synced 2026-11-01 23:24:11 -05:00
302 lines
13 KiB
HTML
302 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>GourmetVault – Curated Recipe Manager</title>
|
||
<!-- Google Fonts Outfit & Inter -->
|
||
<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=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<!-- Lucide Icons -->
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
<!-- Custom Styling -->
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body class="dark-theme">
|
||
<!-- Top Navigation -->
|
||
<header class="app-header">
|
||
<div class="header-logo">
|
||
<div class="logo-icon"><i data-lucide="cooking-pot"></i></div>
|
||
<span class="logo-text">Gourmet<span>Vault</span></span>
|
||
</div>
|
||
|
||
<div class="header-actions">
|
||
<button class="btn btn-outline" id="btn-manual-add" title="Create Recipe Manually">
|
||
<i data-lucide="plus"></i> <span>Manual Recipe</span>
|
||
</button>
|
||
<button class="theme-toggle" id="theme-toggle" title="Toggle Theme">
|
||
<i data-lucide="sun" class="sun-icon"></i>
|
||
<i data-lucide="moon" class="moon-icon"></i>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Workspace -->
|
||
<main class="app-container">
|
||
<!-- Hero / URL Input Bar -->
|
||
<section class="scraping-hero">
|
||
<div class="hero-content">
|
||
<h1>Save Recipes from Anywhere Instantly</h1>
|
||
<p>Paste any cooking link below. Our engine will extract ingredients, directions, times, and images directly into your personal digital cookbook.</p>
|
||
</div>
|
||
|
||
<form class="url-input-form" id="url-scrape-form">
|
||
<div class="input-wrapper">
|
||
<i data-lucide="link" class="input-icon"></i>
|
||
<input type="url" id="scrape-url-input" placeholder="Paste cooking website link here (e.g., allrecipes.com, foodnetwork.com...)" required autocomplete="off">
|
||
</div>
|
||
<button type="submit" class="btn btn-primary" id="btn-scrape-submit">
|
||
<i data-lucide="wand-2"></i> <span>Extract Recipe</span>
|
||
</button>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Recipe Library Dashboard -->
|
||
<section class="library-section">
|
||
<div class="library-header">
|
||
<h2 class="section-title">My Cookbook</h2>
|
||
|
||
<!-- Search and Filters -->
|
||
<div class="filter-controls">
|
||
<div class="search-wrapper">
|
||
<i data-lucide="search" class="search-icon"></i>
|
||
<input type="text" id="library-search" placeholder="Search saved recipes...">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Recipes Grid -->
|
||
<div class="recipes-grid" id="recipes-grid">
|
||
<!-- Recipe cards will be loaded here dynamically -->
|
||
</div>
|
||
|
||
<!-- Empty State -->
|
||
<div class="empty-state" id="empty-state">
|
||
<div class="empty-icon"><i data-lucide="folder-open"></i></div>
|
||
<h3>Your vault is empty</h3>
|
||
<p>Insert a cooking web link above or create one manually to build your digital recipe collections.</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- SCRAPE PREVIEW & EDIT DIALOG -->
|
||
<div class="modal-overlay" id="save-modal">
|
||
<div class="modal-box max-width-lg">
|
||
<div class="modal-header">
|
||
<h3 id="modal-action-title">Scraped Recipe Draft</h3>
|
||
<button class="close-btn" onclick="closeModal('save-modal')"><i data-lucide="x"></i></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="recipe-edit-form">
|
||
<input type="hidden" id="edit-recipe-id">
|
||
|
||
<div class="form-grid-2">
|
||
<div class="form-group">
|
||
<label for="edit-title">Recipe Title *</label>
|
||
<input type="text" id="edit-title" required placeholder="e.g. Garlic Butter Roast Salmon">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-source">Source URL</label>
|
||
<input type="url" id="edit-source" placeholder="Origin link">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-description">Description / Short Review</label>
|
||
<textarea id="edit-description" rows="2" placeholder="Brief note about the dish..."></textarea>
|
||
</div>
|
||
|
||
<div class="form-grid-3">
|
||
<div class="form-group">
|
||
<label for="edit-servings">Servings</label>
|
||
<input type="text" id="edit-servings" placeholder="e.g., 4">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-prep-time">Prep Time</label>
|
||
<input type="text" id="edit-prep-time" placeholder="e.g., 15 mins">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-cook-time">Cook Time</label>
|
||
<input type="text" id="edit-cook-time" placeholder="e.g., 30 mins">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Image Chooser -->
|
||
<div class="form-group">
|
||
<label>Cover Image</label>
|
||
<p class="form-help">Select one of the images extracted from the site, or paste a custom URL below.</p>
|
||
|
||
<div class="image-gallery-selector" id="image-selection-grid">
|
||
<!-- Dynamically loaded thumbnail options -->
|
||
</div>
|
||
|
||
<div class="input-wrapper custom-img-url-wrapper">
|
||
<i data-lucide="image" class="input-icon"></i>
|
||
<input type="url" id="edit-image-url" placeholder="Or enter a direct custom image URL...">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-grid-2">
|
||
<!-- Ingredients Editing -->
|
||
<div class="form-group">
|
||
<label>Ingredients (one per line)</label>
|
||
<textarea id="edit-ingredients" rows="8" placeholder="1 lb Pasta 2 tbsp Olive oil 4 cloves Garlic..." required></textarea>
|
||
</div>
|
||
|
||
<!-- Instructions Editing -->
|
||
<div class="form-group">
|
||
<label>Instructions (one step per line)</label>
|
||
<textarea id="edit-instructions" rows="8" placeholder="Boil water and cook pasta. Sauté garlic in olive oil. Combine pasta and sauce..." required></textarea>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-outline" onclick="closeModal('save-modal')">Discard</button>
|
||
<button type="submit" form="recipe-edit-form" class="btn btn-primary" id="btn-save-confirm">
|
||
<i data-lucide="save"></i> <span>Save to Vault</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- INTERACTIVE RECIPE DETAIL VIEWER -->
|
||
<div class="modal-overlay" id="detail-modal">
|
||
<div class="modal-box max-width-xl no-padding">
|
||
<div class="detail-hero-banner" id="recipe-detail-banner">
|
||
<button class="detail-back-btn" onclick="closeModal('detail-modal')"><i data-lucide="arrow-left"></i> <span>Back</span></button>
|
||
<div class="detail-actions">
|
||
<button class="btn btn-icon-round" id="btn-detail-edit" title="Edit Recipe"><i data-lucide="edit-3"></i></button>
|
||
<button class="btn btn-icon-round btn-danger-hover" id="btn-detail-delete" title="Delete Recipe"><i data-lucide="trash-2"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-main-content">
|
||
<div class="detail-header-info">
|
||
<h2 id="recipe-detail-title">Garlic Butter Salmon</h2>
|
||
<div class="recipe-meta-tags">
|
||
<span id="tag-servings"><i data-lucide="users"></i> <span class="val">4 servings</span></span>
|
||
<span id="tag-prep"><i data-lucide="clock"></i> Prep: <span class="val">15 mins</span></span>
|
||
<span id="tag-cook"><i data-lucide="flame"></i> Cook: <span class="val">25 mins</span></span>
|
||
</div>
|
||
<p class="recipe-detail-desc" id="recipe-detail-description">A quick and delicious salmon dinner.</p>
|
||
</div>
|
||
|
||
<div class="detail-tabs-container">
|
||
<!-- Serving Adjuster -->
|
||
<div class="servings-scaler-panel">
|
||
<span class="scale-label">Scale Ingredients:</span>
|
||
<div class="scaler-controls">
|
||
<button class="scaler-btn" id="scaler-minus"><i data-lucide="minus"></i></button>
|
||
<span class="scaler-val" id="current-servings-val">1x</span>
|
||
<button class="scaler-btn" id="scaler-plus"><i data-lucide="plus"></i></button>
|
||
</div>
|
||
<button class="btn btn-accent cooking-mode-trigger" id="btn-trigger-cookmode">
|
||
<i data-lucide="chef-hat"></i> <span>Start Cooking Mode</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="detail-split-layout">
|
||
<!-- Left: Ingredients Checklist -->
|
||
<div class="detail-ingredients-column">
|
||
<h3>Ingredients</h3>
|
||
<p class="section-subtext">Check off items as you gather them</p>
|
||
<ul class="ingredients-check-list" id="recipe-detail-ingredients">
|
||
<!-- Checkbox elements populated via JS -->
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Right: Instructions Checklist -->
|
||
<div class="detail-instructions-column">
|
||
<h3>Cooking Directions</h3>
|
||
<p class="section-subtext">Track your progress step-by-step</p>
|
||
<ol class="instructions-progress-list" id="recipe-detail-instructions">
|
||
<!-- Steps populated via JS -->
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FULLSCREEN INTERACTIVE COOKING MODE -->
|
||
<div class="modal-overlay cooking-mode-overlay" id="cooking-mode-modal">
|
||
<div class="cooking-container">
|
||
<div class="cooking-header">
|
||
<div class="cooking-brand">
|
||
<i data-lucide="chef-hat"></i> <span>Cooking Assistant</span>
|
||
</div>
|
||
<div class="cooking-title-indicator" id="cook-recipe-title">Garlic Salmon</div>
|
||
|
||
<!-- Live Stopwatch / Timer -->
|
||
<div class="cook-timer-panel">
|
||
<div class="timer-display" id="cook-timer-val">00:00</div>
|
||
<button class="timer-btn" id="cook-timer-play" title="Play/Pause stopwatch"><i data-lucide="play"></i></button>
|
||
<button class="timer-btn btn-outline" id="cook-timer-reset" title="Reset stopwatch"><i data-lucide="rotate-ccw"></i></button>
|
||
</div>
|
||
|
||
<button class="close-btn color-white" onclick="exitCookingMode()"><i data-lucide="x"></i></button>
|
||
</div>
|
||
|
||
<div class="cooking-stepper-box">
|
||
<div class="step-progress-track">
|
||
<div class="step-progress-bar" id="cook-progress-bar"></div>
|
||
</div>
|
||
|
||
<div class="cooking-slide">
|
||
<span class="cooking-step-badge" id="cook-step-index">STEP 1 of 5</span>
|
||
<div class="cooking-step-text" id="cook-step-instruction">Boil water and cook pasta.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cooking-controls">
|
||
<button class="btn btn-outline btn-lg color-white" id="cook-btn-prev">
|
||
<i data-lucide="chevron-left"></i> <span>Prev Step</span>
|
||
</button>
|
||
<div class="step-dots" id="cook-step-dots">
|
||
<!-- Step indicator bullet points -->
|
||
</div>
|
||
<button class="btn btn-accent btn-lg" id="cook-btn-next">
|
||
<span>Next Step</span> <span class="btn-icon-wrapper"><i data-lucide="chevron-right"></i></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LOADING / SCRAPING STATUS SCREEN -->
|
||
<div class="modal-overlay loading-overlay" id="loading-overlay">
|
||
<div class="loader-card">
|
||
<div class="spinner-outer">
|
||
<div class="spinner-inner"></div>
|
||
<i data-lucide="cooking-pot" class="spinner-logo"></i>
|
||
</div>
|
||
<h3>Extracting Recipe Data</h3>
|
||
<p class="loader-subtitle">Retrieving site contents and parsing culinary structures...</p>
|
||
|
||
<ul class="loader-steps">
|
||
<li class="loader-step active" id="loader-step-fetch">
|
||
<span class="step-icon-wrapper"><i data-lucide="check-circle-2"></i></span> <span>Connecting to source URL...</span>
|
||
</li>
|
||
<li class="loader-step" id="loader-step-parse">
|
||
<span class="step-icon-wrapper"><i data-lucide="circle-dashed" class="spinning-icon"></i></span> <span>Parsing schema structures...</span>
|
||
</li>
|
||
<li class="loader-step" id="loader-step-images">
|
||
<span class="step-icon-wrapper"><i data-lucide="circle" class="dot-icon"></i></span> <span>Extracting high-res dish photos...</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Initialize Lucide Icons initially
|
||
window.addEventListener('DOMContentLoaded', () => {
|
||
lucide.createIcons();
|
||
});
|
||
</script>
|
||
<!-- Frontend Javascript -->
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|