recipe-manager/public/index.html
2026-05-27 00:04:36 -04:00

555 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ForkFolio – 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" style="cursor: pointer;" onclick="switchTab('my-cookbook')">
<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">
<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">
<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...)" 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>
</form>
</section>
<!-- Recipe Library Dashboard -->
<section class="library-section">
<div class="library-header">
<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 -->
<div class="filter-controls">
<div class="search-wrapper">
<i data-lucide="search" class="search-icon"></i>
<input type="text" id="library-search" placeholder="Search 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>
<!-- 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>
</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">
<input type="url" id="edit-image-url" placeholder="Or enter a direct custom image URL...">
</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">
<!-- Ingredients Editing -->
<div class="form-group">
<label>Ingredients (one per line)</label>
<textarea id="edit-ingredients" rows="8" placeholder="1 lb Pasta&#10;2 tbsp Olive oil&#10;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.&#10;Sauté garlic in olive oil.&#10;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-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>
</div>
</div>
<div class="detail-main-content">
<div class="detail-header-info">
<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">
<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>
<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>
<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>
<!-- 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>
// Initialize Lucide Icons initially
window.addEventListener('DOMContentLoaded', () => {
lucide.createIcons();
});
</script>
<!-- Frontend Javascript -->
<script src="app.js"></script>
</body>
</html>