This commit is contained in:
Chris 2026-05-27 00:04:36 -04:00
parent 97733b8570
commit 02f0ecb587
9 changed files with 3378 additions and 368 deletions

4
.gitignore vendored
View file

@ -28,6 +28,10 @@ pnpm-debug.log*
.idea/ .idea/
.DS_Store .DS_Store
Thumbs.db Thumbs.db
backups/
# Scratch and test scripts # Scratch and test scripts
test_scraper.js test_scraper.js
# Application Settings Configuration
public/settings.json

938
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -11,7 +11,10 @@
"axios": "^1.7.2", "axios": "^1.7.2",
"cheerio": "^1.0.0-rc.12", "cheerio": "^1.0.0-rc.12",
"cors": "^2.8.5", "cors": "^2.8.5",
"express": "^4.19.2" "express": "^4.19.2",
"puppeteer": "^25.1.0",
"puppeteer-extra": "^3.3.6",
"puppeteer-extra-plugin-stealth": "^2.11.2"
}, },
"private": true "private": true
} }

File diff suppressed because it is too large Load diff

View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GourmetVault – Curated Recipe Manager</title> <title>ForkFolio – Curated Recipe Manager</title>
<!-- Google Fonts Outfit & Inter --> <!-- Google Fonts Outfit & Inter -->
<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>
@ -16,12 +16,20 @@
<body class="dark-theme"> <body class="dark-theme">
<!-- Top Navigation --> <!-- Top Navigation -->
<header class="app-header"> <header class="app-header">
<div class="header-logo"> <div class="header-logo" style="cursor: pointer;" onclick="switchTab('my-cookbook')">
<div class="logo-icon"><i data-lucide="cooking-pot"></i></div> <div class="logo-icon"><i data-lucide="cooking-pot"></i></div>
<span class="logo-text">Gourmet<span>Vault</span></span> <span class="logo-text">Fork<span>Folio</span></span>
</div> </div>
<div class="header-actions"> <div class="header-actions">
<div class="user-badge-container" id="user-badge-container" style="display: none;">
<span class="user-display"><i data-lucide="user"></i> <span id="user-display-name">@chef</span></span>
<button class="btn btn-icon-round" id="btn-settings" title="Application Settings"><i data-lucide="settings"></i></button>
<button class="btn btn-icon-round" id="btn-logout" title="Log Out"><i data-lucide="log-out"></i></button>
</div>
<button class="btn btn-outline" id="tab-user-admin" style="display: none;" title="User Admin Management Console">
<i data-lucide="shield"></i> <span>User Admin</span>
</button>
<button class="btn btn-outline" id="btn-manual-add" title="Create Recipe Manually"> <button class="btn btn-outline" id="btn-manual-add" title="Create Recipe Manually">
<i data-lucide="plus"></i> <span>Manual Recipe</span> <i data-lucide="plus"></i> <span>Manual Recipe</span>
</button> </button>
@ -44,24 +52,37 @@
<form class="url-input-form" id="url-scrape-form"> <form class="url-input-form" id="url-scrape-form">
<div class="input-wrapper"> <div class="input-wrapper">
<i data-lucide="link" class="input-icon"></i> <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"> <input type="url" id="scrape-url-input" placeholder="Paste cooking website link here (e.g., allrecipes.com, foodnetwork.com...)" autocomplete="off">
</div>
<div class="hero-buttons-group" style="display: flex; gap: 8px;">
<button type="submit" class="btn btn-primary" id="btn-scrape-submit">
<i data-lucide="wand-2"></i> <span>Extract Recipe</span>
</button>
<input type="file" id="scan-image-input" accept="image/*" style="display: none;">
<button type="button" class="btn btn-accent" id="btn-scan-image" style="background-color: var(--secondary); color: var(--text-white);" title="Scan Recipe from Photo">
<i data-lucide="camera"></i> <span>Scan Photo</span>
</button>
</div> </div>
<button type="submit" class="btn btn-primary" id="btn-scrape-submit">
<i data-lucide="wand-2"></i> <span>Extract Recipe</span>
</button>
</form> </form>
</section> </section>
<!-- Recipe Library Dashboard --> <!-- Recipe Library Dashboard -->
<section class="library-section"> <section class="library-section">
<div class="library-header"> <div class="library-header">
<h2 class="section-title">My Cookbook</h2> <div class="dashboard-tabs">
<button class="dashboard-tab-btn active" id="tab-my-cookbook">
<i data-lucide="book-open"></i> <span>My Cookbook</span>
</button>
<button class="dashboard-tab-btn" id="tab-community-vault">
<i data-lucide="globe"></i> <span>Community Vault</span>
</button>
</div>
<!-- Search and Filters --> <!-- Search and Filters -->
<div class="filter-controls"> <div class="filter-controls">
<div class="search-wrapper"> <div class="search-wrapper">
<i data-lucide="search" class="search-icon"></i> <i data-lucide="search" class="search-icon"></i>
<input type="text" id="library-search" placeholder="Search saved recipes..."> <input type="text" id="library-search" placeholder="Search recipes...">
</div> </div>
</div> </div>
</div> </div>
@ -77,6 +98,35 @@
<h3>Your vault is empty</h3> <h3>Your vault is empty</h3>
<p>Insert a cooking web link above or create one manually to build your digital recipe collections.</p> <p>Insert a cooking web link above or create one manually to build your digital recipe collections.</p>
</div> </div>
<!-- User Admin Management Console -->
<div id="user-admin-panel" style="display: none;" class="admin-panel-container">
<div class="admin-panel-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
<div>
<h3 style="font-size: 1.4rem; color: var(--text-main); margin-bottom: 4px;">Chef Profiles Management</h3>
<p style="font-size: 0.85rem; color: var(--text-muted);">Create new user profiles and delete accounts with custom recipe preservation options.</p>
</div>
<button class="btn btn-primary" id="btn-admin-add-user">
<i data-lucide="user-plus"></i> <span>Create Chef Account</span>
</button>
</div>
<div class="table-responsive">
<table class="admin-users-table">
<thead>
<tr>
<th>Username</th>
<th>Account Type</th>
<th>Created Date</th>
<th style="text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="admin-users-list">
<!-- Dynamic list loaded via JS -->
</tbody>
</table>
</div>
</div>
</section> </section>
</main> </main>
@ -133,11 +183,19 @@
</div> </div>
<div class="input-wrapper custom-img-url-wrapper"> <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..."> <input type="url" id="edit-image-url" placeholder="Or enter a direct custom image URL...">
</div> </div>
</div> </div>
<!-- Share Option -->
<div class="form-group share-toggle-group">
<label class="checkbox-container">
<input type="checkbox" id="edit-is-public" checked>
<span class="checkbox-label"><i data-lucide="globe" style="width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-right: 4px;"></i> Share with ForkFolio Community (Public)</span>
</label>
<p class="form-help text-sm opacity-80" style="margin-top: 4px; font-size: 0.8rem; color: var(--text-muted);">If enabled, this recipe will be shared to the global Community Vault feed for everyone to view and clone.</p>
</div>
<div class="form-grid-2"> <div class="form-grid-2">
<!-- Ingredients Editing --> <!-- Ingredients Editing -->
<div class="form-group"> <div class="form-group">
@ -168,7 +226,10 @@
<div class="detail-hero-banner" id="recipe-detail-banner"> <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> <button class="detail-back-btn" onclick="closeModal('detail-modal')"><i data-lucide="arrow-left"></i> <span>Back</span></button>
<div class="detail-actions"> <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-accent" id="btn-detail-clone" style="display: none;" title="Clone to My Cookbook">
<i data-lucide="copy"></i> <span>Clone to My Cookbook</span>
</button>
<button class="btn btn-icon-round" id="btn-detail-edit" title="Edit Recipe"><i data-lucide="edit"></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> <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> </div>
@ -176,10 +237,16 @@
<div class="detail-main-content"> <div class="detail-main-content">
<div class="detail-header-info"> <div class="detail-header-info">
<h2 id="recipe-detail-title">Garlic Butter Salmon</h2> <h2 id="recipe-detail-title">Garlic Butter Salmon</h2>
<div class="recipe-creator-credit" id="recipe-detail-creator" style="display: none; 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"> <div class="recipe-meta-tags">
<span id="tag-servings"><i data-lucide="users"></i> <span class="val">4 servings</span></span> <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-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-cook"><i data-lucide="flame"></i> Cook: <span class="val">25 mins</span></span>
<a id="tag-source" href="#" target="_blank" rel="noopener noreferrer" style="display: none;">
<i data-lucide="external-link"></i> <span class="val">Original Source</span>
</a>
</div> </div>
<p class="recipe-detail-desc" id="recipe-detail-description">A quick and delicious salmon dinner.</p> <p class="recipe-detail-desc" id="recipe-detail-description">A quick and delicious salmon dinner.</p>
</div> </div>
@ -290,6 +357,192 @@
</div> </div>
</div> </div>
<!-- AUTHENTICATION DIALOG (LOG IN ONLY) -->
<div class="modal-overlay" id="auth-modal" style="display: flex;">
<div class="modal-box max-width-xs auth-modal-box">
<div class="modal-header justify-center border-none pb-0">
<div class="auth-logo">
<div class="logo-icon"><i data-lucide="cooking-pot"></i></div>
<h2>Fork<span>Folio</span></h2>
</div>
</div>
<div class="modal-body auth-modal-body">
<div id="auth-error-msg" class="auth-error-alert" style="display: none;">
<i data-lucide="alert-circle" class="error-alert-icon"></i>
<span id="auth-error-text">Error message here</span>
</div>
<!-- Log In Form -->
<form id="login-form">
<div class="form-group mb-4">
<label for="login-username">Username</label>
<div class="input-wrapper">
<input type="text" id="login-username" required placeholder="Enter username" autocomplete="username">
</div>
</div>
<div class="form-group mb-6">
<label for="login-password">Password</label>
<div class="input-wrapper">
<input type="password" id="login-password" required placeholder="Enter password" autocomplete="current-password">
</div>
</div>
<button type="submit" class="btn btn-primary btn-full-width">
<i data-lucide="log-in"></i> <span>Log In</span>
</button>
</form>
</div>
</div>
</div>
<!-- ADMIN: CREATE USER MODAL -->
<div class="modal-overlay" id="admin-create-user-modal">
<div class="modal-box max-width-xs">
<div class="modal-header">
<h3>Create New Chef Account</h3>
<button class="close-btn" onclick="closeModal('admin-create-user-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<div id="admin-create-error" class="auth-error-alert" style="display: none;">
<i data-lucide="alert-circle" class="error-alert-icon"></i>
<span id="admin-create-error-text"></span>
</div>
<form id="admin-create-user-form">
<div class="form-group mb-3">
<label for="admin-new-username">Username *</label>
<div class="input-wrapper">
<i data-lucide="user" class="input-icon"></i>
<input type="text" id="admin-new-username" required placeholder="e.g. chef_julie" autocomplete="off">
</div>
<p class="form-help text-sm opacity-80" style="margin-top: 4px; font-size: 0.8rem; color: var(--text-muted);">Lowercase letters, numbers, underscores (3-20 characters).</p>
</div>
<div class="form-group mb-6">
<label for="admin-new-password">Temporary Password *</label>
<div class="input-wrapper">
<i data-lucide="lock" class="input-icon"></i>
<input type="password" id="admin-new-password" required placeholder="Minimum 6 characters" autocomplete="off">
</div>
</div>
<button type="submit" class="btn btn-primary btn-full-width">
<i data-lucide="user-plus"></i> <span>Create Account</span>
</button>
</form>
</div>
</div>
</div>
<!-- ADMIN: DELETE USER CONFIRMATION MODAL -->
<div class="modal-overlay" id="admin-delete-user-modal">
<div class="modal-box max-width-xs">
<div class="modal-header border-none pb-0">
<h3 style="color: var(--danger); display: flex; align-items: center; gap: 8px;">
<i data-lucide="trash-2"></i> Delete Chef Account
</h3>
<button class="close-btn" onclick="closeModal('admin-delete-user-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding-top: 12px;">
<input type="hidden" id="delete-user-target-id">
<p style="font-size: 0.95rem; line-height: 1.5; color: var(--text-main); margin-bottom: 20px;">
Are you sure you want to delete account <strong id="delete-user-target-name">@username</strong>? This action cannot be undone.
</p>
<div class="form-group" style="background: rgba(245, 158, 11, 0.08); border: 1px dashed rgba(245, 158, 11, 0.25); border-radius: 8px; padding: 12px; margin-bottom: 24px;">
<label class="checkbox-container" style="align-items: flex-start;">
<input type="checkbox" id="delete-user-preserve-recipes" checked>
<span class="checkbox-label" style="font-size: 0.9rem; line-height: 1.4; color: var(--text-main); font-weight: 500;">
<i data-lucide="globe" style="width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-right: 4px;"></i> Keep recipes in Community Vault?
</span>
</label>
<p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; padding-left: 30px; margin-bottom: 0;">
If enabled, this chef's private recipes will be transferred to a public archive in the Community Vault. If disabled, all recipes owned by this chef will be purged.
</p>
</div>
<div style="display: flex; gap: 12px; justify-content: flex-end;">
<button class="btn btn-outline" onclick="closeModal('admin-delete-user-modal')">Cancel</button>
<button class="btn btn-danger" id="btn-admin-confirm-delete" style="background-color: var(--danger); color: white;">
<span>Delete Account</span>
</button>
</div>
</div>
</div>
</div>
<!-- SETTINGS MODAL -->
<div class="modal-overlay" id="settings-modal">
<div class="modal-box max-width-xs">
<div class="modal-header">
<h3 style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="settings"></i> Application Settings
</h3>
<button class="close-btn" onclick="closeModal('settings-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding-top: 12px;">
<div id="settings-status-msg" class="auth-error-alert" style="display: none; background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: #10b981; margin-bottom: 16px; padding: 10px; border-radius: 8px; font-size: 0.85rem; align-items: center; gap: 8px;">
<i data-lucide="check-circle" style="color: #10b981; width: 16px; height: 16px; flex-shrink: 0;"></i>
<span id="settings-status-text">Credentials saved successfully.</span>
</div>
<!-- SECTION 1: AI API CREDENTIALS -->
<div class="settings-section" style="margin-bottom: 24px;">
<div class="settings-section-title" style="display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 12px; color: var(--text-main);">
<i data-lucide="brain-circuit" style="color: var(--primary); width: 18px; height: 18px;"></i>
<span>AI API Credentials</span>
</div>
<p style="font-size: 0.85rem; line-height: 1.4; color: var(--text-muted); margin-bottom: 16px;">
Configure your system-wide AI credentials to enable physical recipe photo scanning.
</p>
<form id="settings-api-form" style="margin-bottom: 8px;">
<div class="form-group mb-4">
<label for="settings-gemini-key" style="font-size: 0.85rem; margin-bottom: 6px; display: block; font-weight: 500;">Google Gemini API Key</label>
<div class="input-wrapper" style="position: relative; display: flex; align-items: center;">
<input type="password" id="settings-gemini-key" placeholder="Enter your Gemini API key..." autocomplete="off" style="width: 100%; padding-right: 40px; height: 40px; border-radius: var(--border-radius-md); border: 1px solid var(--border-color); background: rgba(0,0,0,0.2); color: var(--text-main); padding-left: 12px;">
<button type="button" id="btn-toggle-gemini-key" style="position: absolute; right: 10px; background: none; border: none; color: var(--text-muted); cursor: pointer;" title="Toggle Visibility">
<i data-lucide="eye" style="width: 16px; height: 16px;"></i>
</button>
</div>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%; height: 40px;">
<i data-lucide="save"></i> <span>Save Credentials</span>
</button>
</form>
</div>
<!-- SECTION 2: CULINARY OPTIONS (COMING SOON) -->
<div class="settings-section" style="opacity: 0.55; margin-bottom: 24px;">
<div class="settings-section-title" style="display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 1.05rem; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 12px; color: var(--text-main);">
<div style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="cooking-pot" style="color: var(--text-muted); width: 18px; height: 18px;"></i>
<span>Cookbook Options</span>
</div>
<span style="font-size: 0.65rem; background: var(--border-color); padding: 2px 6px; border-radius: 4px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; font-family: var(--font-heading);">Coming Soon</span>
</div>
<p style="font-size: 0.85rem; line-height: 1.4; color: var(--text-muted); margin-bottom: 12px;">
Set default preferences for unit systems, portions, and timer configurations.
</p>
<div style="display: flex; flex-direction: column; gap: 8px;">
<label class="checkbox-container" style="cursor: not-allowed; display: flex; align-items: center; gap: 6px;">
<input type="checkbox" disabled style="cursor: not-allowed;">
<span class="checkbox-label" style="font-size: 0.85rem; color: var(--text-muted);">Default to Metric Units (grams, milliliters)</span>
</label>
<label class="checkbox-container" style="cursor: not-allowed; display: flex; align-items: center; gap: 6px;">
<input type="checkbox" disabled style="cursor: not-allowed;">
<span class="checkbox-label" style="font-size: 0.85rem; color: var(--text-muted);">Sound notifications on timer completion</span>
</label>
</div>
</div>
<div style="display: flex; justify-content: flex-end;">
<button class="btn btn-outline" onclick="closeModal('settings-modal')" style="width: 100%;">
<span>Close Settings</span>
</button>
</div>
</div>
</div>
</div>
<script> <script>
// Initialize Lucide Icons initially // Initialize Lucide Icons initially
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {

BIN
public/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 392 KiB

View file

@ -0,0 +1,3 @@
{
"geminiApiKey": "PASTE_YOUR_GEMINI_API_KEY_HERE"
}

View file

@ -1,4 +1,4 @@
/* GourmetVault CSS - Premium Styling System */ /* ForkFolio CSS - Premium Styling System */
/* Design Tokens & Root Custom Variables */ /* Design Tokens & Root Custom Variables */
:root { :root {
@ -104,6 +104,13 @@ h1, h2, h3, h4, h5, h6 {
white-space: nowrap; white-space: nowrap;
} }
.btn i,
.btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.btn-primary { .btn-primary {
background-color: var(--primary); background-color: var(--primary);
color: var(--text-white); color: var(--text-white);
@ -159,6 +166,14 @@ h1, h2, h3, h4, h5, h6 {
backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
} }
.btn-icon-round i,
.btn-icon-round svg {
width: 20px;
height: 20px;
display: block;
flex-shrink: 0;
}
.btn-icon-round:hover { .btn-icon-round:hover {
transform: scale(1.08); transform: scale(1.08);
background-color: var(--border-color); background-color: var(--border-color);
@ -599,6 +614,15 @@ h1, h2, h3, h4, h5, h6 {
padding: 20px; padding: 20px;
} }
/* Modal Stacking Z-Index Hierarchy */
#detail-modal { z-index: 1000; }
#save-modal { z-index: 1100; }
#admin-create-user-modal { z-index: 1150; }
#admin-delete-user-modal { z-index: 1160; }
#cooking-mode-modal { z-index: 1200; }
#loading-overlay { z-index: 1300; }
#auth-modal { z-index: 1400; }
.modal-overlay.active { .modal-overlay.active {
opacity: 1; opacity: 1;
pointer-events: all; pointer-events: all;
@ -622,6 +646,7 @@ h1, h2, h3, h4, h5, h6 {
transform: translateY(0) scale(1); transform: translateY(0) scale(1);
} }
.max-width-xs { max-width: 420px; }
.max-width-lg { max-width: 850px; } .max-width-lg { max-width: 850px; }
.max-width-xl { max-width: 1100px; } .max-width-xl { max-width: 1100px; }
.no-padding { padding: 0; } .no-padding { padding: 0; }
@ -694,6 +719,7 @@ h1, h2, h3, h4, h5, h6 {
.form-group input[type="text"], .form-group input[type="text"],
.form-group input[type="url"], .form-group input[type="url"],
.form-group input[type="password"],
.form-group textarea { .form-group textarea {
width: 100%; width: 100%;
padding: 12px 14px; padding: 12px 14px;
@ -708,6 +734,7 @@ h1, h2, h3, h4, h5, h6 {
.form-group input[type="text"]:focus, .form-group input[type="text"]:focus,
.form-group input[type="url"]:focus, .form-group input[type="url"]:focus,
.form-group input[type="password"]:focus,
.form-group textarea:focus { .form-group textarea:focus {
border-color: var(--primary); border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow); box-shadow: 0 0 0 3px var(--primary-glow);
@ -1445,3 +1472,415 @@ h1, h2, h3, h4, h5, h6 {
.spinning-icon { .spinning-icon {
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
} }
/* User Badge & Logout in Header */
.user-badge-container {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--glass-bg);
border: 1px solid var(--glass-border);
padding: 4px 6px 4px 12px;
border-radius: var(--border-radius-full);
backdrop-filter: var(--glass-blur);
}
.user-display {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.9rem;
color: var(--primary);
}
.user-display i {
width: 14px;
height: 14px;
opacity: 0.8;
}
#btn-logout {
width: 32px;
height: 32px;
background-color: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
color: var(--danger);
}
#btn-logout:hover {
background-color: var(--danger);
color: var(--text-white);
border-color: var(--danger);
}
/* Dashboard Tabs Navigation */
.dashboard-tabs {
display: flex;
gap: 8px;
background-color: var(--glass-bg);
border: 1px solid var(--glass-border);
padding: 6px;
border-radius: var(--border-radius-md);
backdrop-filter: var(--glass-blur);
}
.dashboard-tab-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: none;
background: transparent;
color: var(--text-muted);
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
border-radius: var(--border-radius-sm);
transition: all var(--transition-fast);
}
.dashboard-tab-btn i {
width: 16px;
height: 16px;
}
.dashboard-tab-btn:hover {
color: var(--text-main);
background-color: rgba(255, 255, 255, 0.05);
}
.dashboard-tab-btn.active {
color: var(--text-white);
background: linear-gradient(135deg, var(--primary), var(--secondary));
box-shadow: 0 4px 12px var(--primary-glow);
}
/* Auth Modal Overlay & Cards */
.auth-modal-box {
background: var(--bg-card);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-lg);
border-radius: var(--border-radius-lg);
}
.auth-logo {
text-align: center;
width: 100%;
}
.auth-logo .logo-icon {
width: 52px;
height: 52px;
font-size: 1.6rem;
margin: 0 auto 12px auto;
border-radius: var(--border-radius-md);
box-shadow: 0 6px 20px var(--primary-glow);
}
.auth-logo h2 {
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 800;
color: var(--text-main);
margin-bottom: 4px;
}
.auth-logo h2 span {
color: var(--primary);
}
.auth-logo p {
font-size: 0.85rem;
color: var(--text-muted);
}
.auth-tabs {
display: flex;
background-color: var(--bg-app);
border: 1px solid var(--border-color);
padding: 4px;
border-radius: var(--border-radius-md);
margin-bottom: 24px;
}
.auth-tab-btn {
flex: 1;
padding: 10px;
border: none;
background: transparent;
color: var(--text-muted);
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
border-radius: var(--border-radius-sm);
transition: all var(--transition-fast);
}
.auth-tab-btn.active {
background-color: var(--bg-card);
color: var(--primary);
box-shadow: var(--shadow-sm);
}
.auth-error-alert {
background-color: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
color: var(--danger);
border-radius: var(--border-radius-md);
padding: 12px 16px;
margin-bottom: 20px;
font-size: 0.88rem;
display: flex;
align-items: center;
gap: 10px;
animation: slideIn var(--transition-fast);
}
.auth-error-alert i {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.btn-full-width {
width: 100%;
padding: 12px;
font-size: 1rem;
}
/* Custom Checkbox (Public/Private Share Toggle) */
.checkbox-container {
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
gap: 10px;
}
.checkbox-container input {
display: none;
}
.checkbox-label {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-main);
display: flex;
align-items: center;
gap: 6px;
}
.checkbox-container input + .checkbox-label::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-radius: 6px;
background-color: var(--bg-app);
transition: all var(--transition-fast);
flex-shrink: 0;
}
.checkbox-container input:checked + .checkbox-label::before {
background-color: var(--primary);
border-color: var(--primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
.checkbox-container:hover input + .checkbox-label::before {
border-color: var(--primary);
}
/* Card Creator Badge & Community Feeds */
.recipe-card-creator {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
background-color: var(--border-color);
padding: 4px 8px;
border-radius: var(--border-radius-sm);
margin-top: 8px;
max-width: fit-content;
}
.recipe-card-creator i {
width: 12px;
height: 12px;
}
/* Glassmorphic border utility classes */
.border-none { border: none !important; }
.pb-0 { padding-bottom: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-6 { margin-bottom: 24px !important; }
/* User Admin management page styles */
.admin-panel-container {
background-color: var(--bg-card);
border-radius: var(--border-radius-lg);
border: 1px solid var(--border-color);
padding: 30px;
box-shadow: var(--shadow-sm);
margin-top: 10px;
animation: fadeIn var(--transition-normal);
}
.table-responsive {
width: 100%;
overflow-x: auto;
border-radius: var(--border-radius-md);
border: 1px solid var(--border-color);
}
.admin-users-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 0.95rem;
}
.admin-users-table th {
background-color: var(--bg-app);
color: var(--text-muted);
font-family: var(--font-heading);
font-weight: 600;
padding: 14px 20px;
border-bottom: 1px solid var(--border-color);
font-size: 0.88rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.admin-users-table td {
padding: 16px 20px;
border-bottom: 1px solid var(--border-color);
color: var(--text-main);
vertical-align: middle;
}
.admin-users-table tr:last-child td {
border-bottom: none;
}
.admin-users-table tr:hover td {
background-color: rgba(255, 255, 255, 0.02);
}
.admin-role-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 700;
padding: 4px 8px;
border-radius: 6px;
text-transform: uppercase;
}
.admin-role-badge.admin {
background-color: rgba(245, 158, 11, 0.15);
border: 1px solid rgba(245, 158, 11, 0.3);
color: #f59e0b;
}
.admin-role-badge.chef {
background-color: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #10b981;
}
.btn-danger {
background-color: var(--danger);
color: var(--text-white);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}
.btn-danger:hover {
background-color: var(--danger-hover);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(239, 68, 68, 0.3);
}
.btn-danger:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Original recipe source URL tag styling */
.recipe-meta-tags a#tag-source {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
color: var(--text-muted);
background-color: var(--bg-app);
padding: 6px 14px;
border-radius: var(--border-radius-full);
border: 1px solid var(--border-color);
text-decoration: none;
transition: all var(--transition-fast);
cursor: pointer;
}
.recipe-meta-tags a#tag-source i {
width: 16px;
height: 16px;
color: var(--primary);
}
.recipe-meta-tags a#tag-source .val {
font-weight: 600;
color: var(--text-main);
}
.recipe-meta-tags a#tag-source:hover {
border-color: var(--primary);
color: var(--primary);
background-color: var(--primary-glow);
}
.recipe-meta-tags a#tag-source:hover .val {
color: var(--primary);
}
.admin-role-badge.manager {
background-color: rgba(99, 102, 241, 0.15);
border: 1px solid rgba(99, 102, 241, 0.3);
color: #6366f1;
}
/* AI Settings Status Badges */
.status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-heading);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.status-badge.configured {
background-color: rgba(16, 185, 129, 0.15);
border: 1px dashed rgba(16, 185, 129, 0.35);
color: #10b981;
}
.status-badge.not-configured {
background-color: rgba(239, 68, 68, 0.15);
border: 1px dashed rgba(239, 68, 68, 0.35);
color: #ef4444;
}

1221
server.js

File diff suppressed because it is too large Load diff