chris
50680a323f
Navigation & layout - Replace per-page hardcoded nav/footer with shared nav.js (client-side injection) - Add nginx reverse proxy back to docker-compose for clean localhost routing - Rename /color-picker/ to /color/ across nav, directory, and references eStore admin - Add variation hiding controls (mirrors existing modifier hiding) - Add delivery rate editor (base fee + per-mile per tier, persisted to data/) - Fix all missing BASE prefix on fetch calls (admin PATCH/DELETE, availability, slots, colors) - Mount estore/data/ as a Docker volume so admin config survives rebuilds Booking & calendar - Set pickup calendar events to TRANSPARENT (free) so they don't block delivery slots - Skip CANCELLED events in busy-time calculation - Re-check slot availability at checkout before charging (409 on conflict) Phone & email validation - Auto-format phone as (XXX) XXX-XXXX as user types - Require exactly 10 digits; tighten email regex Confirmation emails (store alert + customer) - Full item detail per line: name, price, add-ons, colors, note - Charges breakdown: subtotal, delivery fee, tax, total - Delivery window: simplified M/D/YY h:mm – h:mm AM/PM format - .ics calendar attachment on customer confirmation Delivery rates - Extract configurable rates to delivery-rates.ts (server-only, no fs in client bundle) - calcDelivery() accepts optional rates param; delivery-quote route passes configured rates Content - Change all "40+ latex colors" references to "70+" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
114 lines
6.3 KiB
HTML
114 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<script defer data-domain="beachpartyballoons.com" src="https://plausible.io/js/script.hash.outbound-links.js"></script>
|
|
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png">
|
|
<link rel="manifest" href="../assets/favicon/site.webmanifest">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Beach Party Balloons - Photo Gallery">
|
|
<title>Beach Party Balloons - Gallery</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Autour+One&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link rel="stylesheet" href="gallery.css">
|
|
<script src="/nav.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<div id="site-nav"></div>
|
|
<div class="update">
|
|
<div id="message"></div>
|
|
</div>
|
|
|
|
<main class="section gallery-wrap">
|
|
<div class="container">
|
|
<h1 class="title is-2 has-text-centered mb-4 has-text-dark">Gallery</h1>
|
|
<button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
|
|
<div class="box search-box">
|
|
<div class="is-flex is-align-items-center is-justify-content-space-between is-flex-wrap-wrap gap-sm">
|
|
<div>
|
|
<p class="is-size-5 has-text-weight-semibold">Search</p>
|
|
</div>
|
|
<div class="field has-icons-left search-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input search-input has-background-light has-text-dark" type="text" id="searchInput" placeholder="Search by tags or description" aria-label="Search gallery by tags or description">
|
|
<span class="icon is-left">
|
|
<i class="fas fa-search"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="help is-size-7 has-text-grey mt-2">Examples: classic, organic, indoor, holiday</p>
|
|
</div>
|
|
|
|
<div class="gallery-meta">
|
|
<p class="result-count" id="result-count">Loading gallery...</p>
|
|
</div>
|
|
|
|
<div class="filter-scroll">
|
|
<div class="filter-rows">
|
|
<div class="filter-row">
|
|
<div class="control"><button class="button filter-btn is-active" data-tag="all">All</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="classic">Classic</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="organic">Organic</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="centerpiece">Centerpiece</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="sculpture">Sculpture</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="arch">Arch</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="garland">Garland</button></div>
|
|
</div>
|
|
<div class="filter-row">
|
|
<div class="control"><button class="button filter-btn" data-tag="indoor">Indoor</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="outdoor">Outdoor</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="corporate">Corporate</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="wedding">Wedding</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="birthday">Birthday</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="holiday">Holiday</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="halloween">Halloween</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="easter">Easter</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="nautical">Nautical</button></div>
|
|
<div class="control"><button class="button filter-btn" data-tag="pastel">Pastel</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="photo-gallery" class="gallery-grid">
|
|
<div id="no-results" class="has-text-centered" style="display: none; width: 100%; grid-column: 1 / -1;">
|
|
<p class="is-size-5 has-text-grey">No photos found matching your criteria.</p>
|
|
</div>
|
|
<!-- Photos will be dynamically loaded here -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="image-modal" class="modal">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<section class="modal-card-body">
|
|
<button class="modal-close-btn" aria-label="Close modal">×</button>
|
|
<figure class="modal-figure">
|
|
<img class="modal-image" id="modal-image-src" src="" alt="">
|
|
</figure>
|
|
<div class="modal-caption-block">
|
|
<p class="modal-caption-title" id="modal-caption"></p>
|
|
<div class="modal-caption-tags" id="modal-caption-tags"></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="site-footer"></div>
|
|
<script>
|
|
// Force gallery API to the hosted backend to avoid localhost/mixed-content issues.
|
|
window.GALLERY_API_URL = 'https://photobackend.beachpartyballoons.com';
|
|
</script>
|
|
<script src="../script.js" defer></script>
|
|
<script src="../update.js" defer></script>
|
|
<script src="gallery.js" defer></script>
|
|
</body>
|
|
</html>
|