feat: Implement UI/UX and code efficiency improvements for gallery and admin pages
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:
parent
cdd8ccb0e5
commit
e4240d3f02
3
admin/admin.css
Normal file
3
admin/admin.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
#clearSelection:hover {
|
||||||
|
color: #f14668;
|
||||||
|
}
|
||||||
246
admin/index.html
Normal file
246
admin/index.html
Normal 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
425
gallery.css
Normal 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 × */
|
||||||
|
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
175
gallery.html
Normal 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">×</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 © <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>
|
||||||
44
script.js
44
script.js
@ -56,6 +56,9 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
if (document.getElementById('photo-gallery')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
let images = Array.from(document.querySelectorAll(".gallery-item a"));
|
let images = Array.from(document.querySelectorAll(".gallery-item a"));
|
||||||
let lightboxImages = images.map(img => img.getAttribute("href"));
|
let lightboxImages = images.map(img => img.getAttribute("href"));
|
||||||
let currentIndex = 0;
|
let currentIndex = 0;
|
||||||
@ -133,10 +136,13 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector(".lightbox .close").addEventListener("click", function(event) {
|
const lightboxClose = document.querySelector(".lightbox .close");
|
||||||
|
if (lightboxClose) {
|
||||||
|
lightboxClose.addEventListener("click", function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
document.querySelector(".lightbox").style.display = "none";
|
document.querySelector(".lightbox").style.display = "none";
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Swipe gestures for mobile
|
// Swipe gestures for mobile
|
||||||
@ -163,25 +169,41 @@ document.querySelector(".lightbox .close").addEventListener("click", function(ev
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// Get the button:
|
// Back-to-top button (guard for pages without the element)
|
||||||
let mybutton = document.getElementById("top");
|
(() => {
|
||||||
|
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
|
if (!mybutton) return;
|
||||||
window.onscroll = function() {scrollFunction()};
|
|
||||||
|
|
||||||
function scrollFunction() {
|
function scrollFunction() {
|
||||||
if (document.body.scrollTop > 130 || document.documentElement.scrollTop > 130) {
|
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";
|
mybutton.style.display = "block";
|
||||||
} else {
|
} else {
|
||||||
mybutton.style.display = "none";
|
mybutton.style.display = "none";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// When the user clicks on the button, scroll to the top of the document
|
window.addEventListener('scroll', scrollFunction);
|
||||||
function topFunction() {
|
|
||||||
document.body.scrollTop = 0; // For Safari
|
mybutton.addEventListener('click', (e) => {
|
||||||
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
|
e.preventDefault();
|
||||||
}
|
window.topFunction();
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
// The open/closed sign function is now in update.js
|
// The open/closed sign function is now in update.js
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user