mirror of
https://gitlab.com/Zer0interrupt/recipe-manager.git
synced 2026-11-01 23:24:11 -05:00
230 lines
9.3 KiB
HTML
230 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ForkFolio – Shared Recipe Viewer</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">
|
||
<style>
|
||
/* Styling adjustments specifically for the share page public view */
|
||
.share-cta-banner {
|
||
background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(244, 63, 94, 0.15) 100%);
|
||
border: 1px dashed var(--primary);
|
||
border-radius: var(--border-radius-lg);
|
||
padding: 24px;
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
.share-cta-banner h3 {
|
||
font-size: 1.4rem;
|
||
color: var(--text-main);
|
||
}
|
||
.share-cta-banner p {
|
||
font-size: 0.95rem;
|
||
color: var(--text-muted);
|
||
max-width: 500px;
|
||
line-height: 1.5;
|
||
}
|
||
.share-container {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 30px 20px 80px 20px;
|
||
}
|
||
.share-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 5%;
|
||
border-bottom: 1px solid var(--border-color);
|
||
background-color: var(--bg-nav);
|
||
backdrop-filter: var(--glass-blur);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
.recipe-not-found {
|
||
display: none;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 100px 20px;
|
||
color: var(--text-muted);
|
||
}
|
||
.recipe-not-found i {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin-bottom: 16px;
|
||
color: var(--danger);
|
||
}
|
||
.recipe-not-found h2 {
|
||
color: var(--text-main);
|
||
font-size: 2rem;
|
||
margin-bottom: 8px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="dark-theme">
|
||
<!-- Top Navigation -->
|
||
<header class="share-header">
|
||
<div class="header-logo" style="cursor: pointer;" onclick="window.location.href='/'">
|
||
<div class="logo-icon"><i data-lucide="cooking-pot"></i></div>
|
||
<span class="logo-text">Fork<span>Folio</span></span>
|
||
</div>
|
||
|
||
<div class="header-actions">
|
||
<a href="/" class="btn btn-primary" title="Go to Cookbook homepage">
|
||
<i data-lucide="log-in"></i> <span>Join ForkFolio</span>
|
||
</a>
|
||
<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>
|
||
|
||
<!-- Recipe Not Found Fallback -->
|
||
<div class="recipe-not-found" id="recipe-not-found-block">
|
||
<i data-lucide="alert-triangle"></i>
|
||
<h2>Recipe Not Found</h2>
|
||
<p>This link may have expired, or the chef has set this recipe back to private.</p>
|
||
<a href="/" class="btn btn-outline" style="margin-top: 20px;">
|
||
<i data-lucide="home"></i> Back to Homepage
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Main Share Container -->
|
||
<main class="share-container" id="share-recipe-block" style="display: none;">
|
||
<!-- CTA Onboarding Banner -->
|
||
<section class="share-cta-banner">
|
||
<h3>Cooked this recipe with ForkFolio!</h3>
|
||
<p>ForkFolio lets you save recipes from any website instantly, organize your kitchen cookbook, scale portions, and cook step-by-step with an interactive assistant.</p>
|
||
<a href="/" class="btn btn-accent" style="background-color: var(--primary); box-shadow: 0 4px 14px var(--primary-glow);">
|
||
<i data-lucide="chef-hat"></i> <span>Build My Own Cookbook</span>
|
||
</a>
|
||
</section>
|
||
|
||
<!-- Unified Detail View Layout -->
|
||
<article class="modal-box no-padding" style="max-height: none; box-shadow: var(--shadow-md); margin-bottom: 40px;">
|
||
<div class="detail-hero-banner" id="recipe-detail-banner" style="height: 440px;">
|
||
<!-- Banner display cover -->
|
||
</div>
|
||
|
||
<div class="detail-main-content">
|
||
<div class="detail-header-info">
|
||
<h2 id="recipe-detail-title">Recipe Title</h2>
|
||
<div class="recipe-creator-credit" style="margin-bottom: 12px;">
|
||
<span class="creator-badge" style="font-size: 0.85rem; padding: 4px 8px; background: rgba(245, 158, 11, 0.15); border: 1px dashed rgba(245, 158, 11, 0.3); border-radius: 6px; color: #f59e0b; display: inline-flex; align-items: center; gap: 4px;">
|
||
<i data-lucide="user" style="width: 12px; height: 12px;"></i> Shared by <span id="recipe-detail-creator-name">@chef</span>
|
||
</span>
|
||
</div>
|
||
<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>
|
||
<span id="tag-total"><i data-lucide="timer"></i> Total: <span class="val">40 mins</span></span>
|
||
<a id="tag-source" href="#" target="_blank" rel="noopener noreferrer">
|
||
<i data-lucide="external-link"></i> <span class="val">Original Source</span>
|
||
</a>
|
||
</div>
|
||
<p class="recipe-detail-desc" id="recipe-detail-description">Description notes here.</p>
|
||
</div>
|
||
|
||
<div class="detail-tabs-container">
|
||
<!-- Serving Adjuster & Cooking mode trigger -->
|
||
<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">
|
||
<!-- Checklist populated dynamically -->
|
||
</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 dynamically -->
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
|
||
<!-- 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">Recipe Title</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">Step instructions...</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 dots -->
|
||
</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>
|
||
|
||
<script src="share.js"></script>
|
||
</body>
|
||
</html>
|