chris
e4240d3f02
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.
176 lines
8.3 KiB
HTML
176 lines
8.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">
|
|
</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>
|