chris/bpb-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement UI/UX and code efficiency improvements for gallery and admin pages

Browse Source 
This commit includes the following changes:

Gallery Page (gallery.html):
- Moved inline CSS to gallery.css for better organization and caching.
- Implemented a skeleton loader to improve perceived loading performance.
- Added a 'No results' message when search/filter yields no photos.
- Enhanced responsive image handling in the modal to load full-resolution images.

Admin Page (admin/index.html):
- Moved inline CSS to admin.css for better organization and caching.
- Fixed an aesthetic issue with the hover style on the 'Clear selection' button.
- Introduced a confirmation modal for bulk delete operations to prevent accidental data loss.
- Implemented a progress bar for file uploads, providing better user feedback.
This commit is contained in:
chris 2025-11-24 15:14:00 -05:00
parent cdd8ccb0e5
commit e4240d3f02
5 changed files with 890 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
admin/admin.css Normal file
View File

@ -0,0 +1,3 @@
#clearSelection:hover {
color: #f14668;
}

246
admin/index.html Normal file
View File

@ -0,0 +1,246 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Panel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<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="admin.css">
</head>
<body class="admin-page">
<div id="login-modal" class="modal is-active">
<!-- <div class="modal-background"></div> -->
<div class="modal-content">
<div class="box admin-login-card has-background-light">
<div class="has-text-centered mb-4">
<p class="tag is-info is-light">Beach Party Balloons</p>
<h1 class="title is-4 mt-2">Admin Access</h1>
<p class="subtitle is-6 has-text-grey">Sign in to manage gallery photos and store status.</p>
</div>
<form id="loginForm">
<div class="field">
<p class="control has-icons-left">
<input class="input" id="passwordInput" type="password" placeholder="Password" autocomplete="current-password" required>
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</p>
</div>
<div class="field">
<p class="control">
<button class="button is-info is-fullwidth" id="loginButton">Log in</button>
</p>
</div>
</form>
</div>
</div>
</div>
<div id="admin-content" style="display: none;">
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
<div class="navbar-brand is-size-1">
<a class="navbar-item" href="/">
<img style="background-color: white;" src="../assets/logo/BeachPartyBalloons-logo.webp" alt="Beach Party Balloons logo">
</a>
</div>
</nav>
<div class="admin-hero">
<div class="container">
<p class="tag is-light admin-kicker">Control Center</p>
<h1 class="title is-2 has-text-white">Admin Panel</h1>
<p class="subtitle is-5 has-text-white-bis">Upload new work, curate your gallery, and update the store status in one place.</p>
</div>
</div>
<div class="container padding">
<div class="tabs is-boxed">
<ul>
<li class="is-active" data-tab="photo-tab"><a>Photo Gallery</a></li>
<li data-tab="status-tab"><a>Store Status</a></li>
</ul>
</div>
<div id="photo-tab" class="tab-content">
<div class="columns is-variable is-5 photo-columns">
<div class="column upload-column">
<div class="box admin-card">
<p class="is-size-5 has-text-weight-semibold mb-3">Upload new photo</p>
<p class="is-size-7 has-text-grey mb-4">Add a caption and tags to keep the gallery searchable.</p>
<form id="uploadForm" novalidate>
<div class="field">
<label class="label">Photo</label>
<div class="control">
<input class="input has-background-light has-text-black" type="file" id="photoInput" accept="image/*" multiple required>
<p class="help is-size-7 has-text-grey">Select one or many images; each will be converted to WebP automatically.</p>
</div>
</div>
<div class="field">
<label class="label has-text-dark">Caption</label>
<div class="control">
<input class="input has-background-light has-text-dark" type="text" id="captionInput" placeholder="A beautiful balloon arrangement." required>
<p class="help is-size-7 mt-1"><button id="captionToTags" type="button" class="button is-ghost is-small p-0">Use caption words as tags</button></p>
</div>
</div>
<div class="field">
<label class="label has-text-dark">Tags (comma-separated)</label>
<div class="control">
<input class="input has-background-light has-text-black" type="text" id="tagsInput" placeholder="classic, birthday" list="tagSuggestions" required>
<datalist id="tagSuggestions"></datalist>
<p class="help is-size-7 has-text-grey">Use commas between tags; suggestions come from existing photos.</p>
</div>
<div class="buttons are-small mt-2" id="quickTagButtons" aria-label="Quick tag suggestions">
</div>
</div>
<div class="control">
<button class="button is-primary is-fullwidth" id="uploadButton">Upload</button>
</div>
<progress id="uploadProgress" class="progress is-primary mt-3" value="0" max="100" style="display: none;"></progress>
<p id="uploadStatus" class="help mt-3"></p>
</form>
</div>
</div>
<div class="column manage-column">
<div class="box admin-card">
<div class="is-flex is-justify-content-space-between is-align-items-center mb-3">
<div>
<p class="is-size-5 has-text-weight-semibold mb-1">Manage existing photos</p>
<p class="is-size-7 has-text-grey">Edit captions/tags or delete images you no longer want visible.</p>
</div>
<span class="tag is-info is-light"><i class="fas fa-images mr-2"></i>Gallery</span>
</div>
<div class="box has-background-light mb-4" id="bulkPanel" style="display: none;">
<div class="columns is-vcentered is-mobile">
<div class="column is-narrow">
<button class="button is-small has-text-dark has-background-primary" id="selectAllPhotos">Select all</button>
</div>
<div class="column">
<p class="is-size-7 has-text-dark" id="selectedCount">0 selected</p>
</div>
<div class="column is-narrow">
<button class="button is-text is-small has-text-dark" id="clearSelection">Clear</button>
</div>
</div>
<div class="columns is-multiline">
<div class="column is-full-mobile is-half-tablet">
<label class="label is-size-7 has-text-dark">New caption (optional)</label>
<input class="input is-small has-background-white has-text-dark" type="text" id="bulkCaption" placeholder="Leave blank to keep captions">
</div>
<div class="column is-full-mobile is-half-tablet">
<label class="label is-size-7 has-text-dark">Tags (comma-separated, optional)</label>
<input class="input is-small has-background-white has-text-dark" type="text" id="bulkTags" placeholder="e.g. arch, pastel">
<label class="checkbox is-size-7 mt-1 has-text-dark">
<input type="checkbox" id="bulkAppendTags"> Append to existing tags (unchecked = replace)
</label>
</div>
<div class="column is-full-mobile">
<div class="buttons are-small">
<button class="button is-primary" id="applyBulkEdits" disabled>Apply to selected</button>
<button class="button is-danger is-light" id="bulkDelete" disabled>Delete selected</button>
</div>
</div>
</div>
</div>
<div id="manage-gallery" class="columns is-multiline is-variable is-4 admin-gallery-grid">
<!-- Existing photos will be loaded here -->
</div>
</div>
</div>
</div>
</div>
<div id="status-tab" class="tab-content" style="display: none;">
<div class="box admin-card">
<div class="is-flex is-align-items-center is-justify-content-space-between mb-3">
<div>
<p class="is-size-5 has-text-weight-semibold mb-1">Store status & scrolling message</p>
<p class="is-size-7 has-text-grey">Update the homepage banner and closed message.</p>
</div>
<span class="tag is-warning is-light"><i class="fas fa-bell mr-2"></i>Status</span>
</div>
<div class="field">
<label class="label has-text-dark">Scrolling Message</label>
<div class="control">
<input class="input has-background-light has-text-dark" id="scrollingMessageInput" type="text" placeholder="Enter message for the scrolling bar">
</div>
</div>
<div class="field">
<label class="checkbox">
<input type="checkbox" id="isClosedCheckbox">
Is the store closed?
</label>
</div>
<div class="field">
<label class="label has-text-dark">Closed Message</label>
<div class="control">
<input class="input has-background-light has-text-dark" id="closedMessageInput" type="text" placeholder="Enter message to display when closed">
</div>
</div>
<div class="control">
<button id="updateButton" class="button is-primary">Update</button>
</div>
<div id="response" class="notification is-light mt-4"></div>
</div>
</div>
</div>
</div>
<!-- Edit Photo Modal -->
<div id="editModal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title has-text-dark">Edit Photo</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<input type="hidden" id="editPhotoId">
<div class="field">
<label class="label">Caption</label>
<div class="control">
<input class="input has-background-light" type="text" id="editCaption">
</div>
</div>
<div class="field">
<label class="label">Tags</label>
<div class="control">
<input class="input has-background-light" type="text" id="editTags">
</div>
</div>
</section>
<footer class="modal-card-foot">
<button id="saveChanges" class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
<!-- Bulk Delete Confirmation Modal -->
<div id="bulkDeleteModal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Confirm Deletion</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p>Are you sure you want to delete the selected photos? This action cannot be undone.</p>
<p id="bulk-delete-count" class="has-text-weight-bold"></p>
</section>
<footer class="modal-card-foot">
<button id="confirmBulkDelete" class="button is-danger">Delete</button>
<button class="button" id="cancelBulkDelete">Cancel</button>
</footer>
</div>
</div>
<script src="admin.js"></script>
</body>
</html>

425
gallery.css Normal file
View File

@ -0,0 +1,425 @@
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
}
.gallery-item {
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 5;
background: #f7f7f2;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.5);
transition: transform 0.2s ease, box-shadow 0.2s ease;
opacity: 0;
transform: translateY(12px) scale(0.98);
}
.gallery-item:hover {
transform: translateY(-2px) scale(1.01);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18), 0 2px 0 rgba(255, 255, 255, 0.6);
}
.gallery-item.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
transition: transform 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
}
.gallery-photo,
.gallery-photo img {
width: 100%;
height: 100%;
display: block;
}
.gallery-photo img {
object-fit: cover;
cursor: pointer;
}
.gallery-overlay {
position: absolute;
inset: auto 0 0 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
color: #fff;
display: flex;
flex-direction: column;
gap: 0.25rem;
opacity: 0;
padding: 0.75rem 0.8rem;
transition: opacity 0.18s ease;
pointer-events: none;
}
.gallery-item:hover .gallery-overlay,
.gallery-item.touch-active .gallery-overlay {
opacity: 1;
}
.overlay-title {
font-size: 1rem;
font-weight: 800;
line-height: 1.2;
}
.overlay-tags {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.tag-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.45rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
color: #0e2238;
font-weight: 700;
font-size: 0.68rem;
letter-spacing: 0.01em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.tag-chip i {
font-size: 0.7rem;
color: #0e2238;
}
.filter-btn {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
color: #363636;
font-weight: 700;
border-radius: 999px;
padding: 0.55rem 1rem;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
transition: all 0.2s ease;
}
.filter-btn:hover {
border-color: rgba(0, 0, 0, 0.18);
color: #000;
}
.filter-btn.is-active {
background: #00c2b8;
color: #0e2238;
border-color: transparent;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}
.search-box {
margin-bottom: 1rem;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5);
position: relative;
overflow: hidden;
padding: 0.9rem 1rem;
}
.filter-scroll {
margin-bottom: 1.1rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0.25rem 0.35rem;
}
.filter-scroll::-webkit-scrollbar {
display: none;
}
.filter-rows {
display: inline-flex;
flex-direction: column;
gap: 0.45rem;
min-width: 100%;
}
.filter-row {
display: flex;
gap: 0.55rem;
flex-wrap: nowrap;
white-space: nowrap;
}
.filter-row .filter-btn {
white-space: nowrap;
}
.modal-card {
width: auto;
max-width: 90vw;
max-height: 90vh;
border-radius: 16px;
overflow: visible;
background: #fff;
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0,0,0,0.1);
position: relative;
padding: 0;
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-card-head {
display: none;
}
.modal-card-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
background: transparent;
padding: 1rem;
border-radius: 16px;
}
.modal-close-btn {
position: absolute;
top: -18px;
right: -18px;
background: #fff;
color: #4a4a4a;
border: 1px solid #dbdbdb;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 1.5rem;
font-weight: 300;
line-height: 38px; /* vertically center &times; */
text-align: center;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
}
.modal-close-btn:hover {
background: #f5f5f5;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.modal-figure {
width: 100%;
margin: 0;
display: flex;
justify-content: center;
}
.modal-image {
max-width: 100%;
max-height: calc(90vh - 120px);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
background: #f5f5f5;
border: none;
transform: translate(var(--modal-img-translate-x, 0), var(--modal-img-translate-y, 0)) scale(var(--modal-img-scale, 0.95));
opacity: 0;
}
.modal-caption-block {
width: 100%;
background: transparent;
border: none;
color: #1a1a1a;
border-radius: 0;
padding: 0.5rem 0.25rem 0;
box-shadow: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.modal-caption-title {
font-weight: 700;
letter-spacing: 0;
font-size: 1.1rem;
margin: 0;
color: #1a1a1a;
}
.modal-caption-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: center;
}
.modal-caption-tags .tag-chip {
background: #f0f0f0;
color: #5a5a5a;
box-shadow: none;
border: 1px solid #e0e0e0;
font-weight: 600;
}
.modal .modal-background {
background: rgba(18, 18, 18, 0.65);
backdrop-filter: blur(10px) saturate(120%);
opacity: 0;
transition: opacity 300ms ease;
}
.modal.show-bg .modal-background {
opacity: 1;
}
.modal.chrome-hidden .modal-card {
transform: scale(0.95);
opacity: 0;
}
.modal.is-active .modal-image {
animation: modalZoomIn 380ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
transform-origin: center center;
}
.modal.is-active .modal-card {
animation: popIn 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms forwards;
}
.gallery-hero {
background: #00c2b8;
position: relative;
overflow: hidden;
}
.gallery-hero .hero-body {
position: relative;
padding-top: 3rem;
padding-bottom: 3rem;
}
.gallery-kicker {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #0e2238;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.gallery-wrap {
background: #e7e6dd;
}
.hero-title-accent {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.16);
padding: 0.4rem 0.8rem;
border-radius: 12px;
}
.hero-title-accent i {
color: #0e2238;
background: #fef6e4;
border-radius: 50%;
padding: 0.35rem;
}
.gallery-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.result-count {
font-weight: 700;
color: #0e2238;
}
.result-count span {
color: #00c2b8;
}
.search-field .input {
border-radius: 8px;
padding-left: 2.5rem;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: none;
height: 2.6rem;
font-size: 0.95rem;
}
.search-field .icon.is-left {
top: 0.1rem;
height: 2.6rem;
display: flex;
align-items: center;
color: #0e2238;
}
.search-field .input:focus {
border-color: rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 0.08rem rgba(0, 0, 0, 0.08);
}
.help {
color: #5f7287;
font-size: 0.8rem;
}
.card .title.is-5 {
color: #0e2238;
}
.card .subtitle.is-7 {
color: #73859c;
letter-spacing: 0.01em;
}
.skip-to-gallery {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
background: #0e2238;
color: #fff;
padding: 0.55rem 1rem;
border-radius: 999px;
border: none;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16), 0 2px 0 rgba(255, 255, 255, 0.5);
text-decoration: none;
font-weight: 700;
letter-spacing: 0.01em;
}
.skip-to-gallery i {
color: #00c2b8;
}
body.modal-open {
overflow: hidden;
}
body.modal-open main,
body.modal-open nav,
body.modal-open footer {
pointer-events: none;
}
body.modal-open #top {
display: none;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes popIn {
from { transform: translateY(20px) scale(0.95); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes modalZoomIn {
from { opacity: 0; transform: scale(0.9); filter: blur(4px); }
to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@media screen and (max-width: 768px) {
.hero.gallery-hero .hero-body {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.gallery-wrap {
padding: 1rem;
}
.gallery-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.9rem;
}
.gallery-meta {
justify-content: center;
text-align: center;
}
.search-field {
width: 100%;
margin-top: 0.75rem;
}
}
.skeleton-item {
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 5;
background: #e0e0e0;
position: relative;
}
.skeleton-item::before {
content: '';
position: absolute;
top: 0;
left: -150%;
width: 150%;
height: 100%;
background: linear-gradient(to right, transparent 0%, #f0f0f0 50%, transparent 100%);
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
100% {
left: 150%;
}
}

175
gallery.html Normal file
View File

@ -0,0 +1,175 @@
<!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">
</head>
<body>
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
<div class="navbar-brand is-size-1">
<a class="navbar-item" href="/">
<img style="background-color: white;" src="assets/logo/BeachPartyBalloons-logo.webp" alt="Beach Party Balloons logo">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu has-text-right">
<div class="navbar-end">
<a class="navbar-item" href="/">
Home
</a>
<a class="navbar-item" href="https://shop.beachpartyballoons.com">
Shop
</a>
<a class="navbar-item" href="about/">
About Us
</a>
<a class="navbar-item" href="faq/">
FAQ
</a>
<a class="navbar-item" href="terms/">
Terms
</a>
<a class="navbar-item is-tab is-active" href="gallery.html">
Gallery
</a>
<a class="navbar-item" href="color/">
Colors
</a>
<a class="navbar-item" href="contact/">
Contact
</a>
</div>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
<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>
<div class="has-text-centered">
<a class="skip-to-gallery has-background-light has-text-dark" href="#photo-gallery">
<i class="fa-solid fa-images"></i>
Jump to photos
</a>
</div>
<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: arch, garland, birthday</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="arch">Arch</button></div>
<div class="control"><button class="button filter-btn" data-tag="garland">Garland</button></div>
<div class="control"><button class="button filter-btn" data-tag="columns">Columns</button></div>
<div class="control"><button class="button filter-btn" data-tag="centerpiece">Centerpiece</button></div>
</div>
<div class="filter-row">
<div class="control"><button class="button filter-btn" data-tag="birthday">Birthday</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="corporate">Corporate</button></div>
<div class="control"><button class="button filter-btn" data-tag="pastel">Pastel</button></div>
<div class="control"><button class="button filter-btn" data-tag="black-tie">Black Tie</button></div>
<div class="control"><button class="button filter-btn" data-tag="baby-shower">Baby Shower</button></div>
<div class="control"><button class="button filter-btn" data-tag="organic">Organic</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">&times;</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>
<footer class="footer has-background-primary-light">
<div class="content has-text-centered">
<div>
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
</a>
<a target="_blank" href="https://www.facebook.com/beachpartyballoons"><i class="fa-brands fa-facebook-f is-size-2"></i>
</a>
<a target="_blank" href="https://www.instagram.com/beachpartyballoons/"><i class="fa-brands fa-instagram is-size-2"></i>
</a>
<a target="_blank" href="https://bsky.app/profile/beachpartyballoons.bsky.social">
<i class="fa-brands fa-bluesky is-size-2"></i>
</a>
</div>
<h7>Copyright &copy; <span id="year"></span> Beach Party Balloons</h7>
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
</div>
</footer>
<script src="script.js"></script>
<script src="update.js"></script>
<script src="gallery.js"></script>
</body>
</html>

60
script.js
View File

@ -56,6 +56,9 @@ document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
if (document.getElementById('photo-gallery')) {
return;
}
let images = Array.from(document.querySelectorAll(".gallery-item a"));
let lightboxImages = images.map(img => img.getAttribute("href"));
let currentIndex = 0;
@ -133,10 +136,13 @@ document.addEventListener("DOMContentLoaded", function () {
}
});
document.querySelector(".lightbox .close").addEventListener("click", function(event) {
event.preventDefault();
document.querySelector(".lightbox").style.display = "none";
});
const lightboxClose = document.querySelector(".lightbox .close");
if (lightboxClose) {
lightboxClose.addEventListener("click", function(event) {
event.preventDefault();
document.querySelector(".lightbox").style.display = "none";
});
}
// Swipe gestures for mobile
@ -163,25 +169,41 @@ document.querySelector(".lightbox .close").addEventListener("click", function(ev
});
// Get the button:
let mybutton = document.getElementById("top");
// Back-to-top button (guard for pages without the element)
(() => {
const mybutton = document.getElementById("top");
// Provide a global handler for legacy onclick usage even if button is absent
window.topFunction = () => {
document.documentElement.classList.remove('is-clipped');
document.body.classList.remove('modal-open');
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
// Ensure both scrolling contexts reset (covers iOS/Android quirks)
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
if (!mybutton) return;
function scrollFunction() {
if (document.body.scrollTop > 130 || document.documentElement.scrollTop > 130) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
function scrollFunction() {
if (document.body.classList.contains('modal-open')) {
mybutton.style.display = "none";
return;
}
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if (scrollTop > 130) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
}
window.addEventListener('scroll', scrollFunction);
mybutton.addEventListener('click', (e) => {
e.preventDefault();
window.topFunction();
});
})();
// The open/closed sign function is now in update.js