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

Compare commits

base: chris:6304066cd6303a8548329c3c68cd8cf55d0af7a2
Branches Tags
chris:main
chris:gallery-tags
chris:orgin
..
compare: chris:6e09f0a32c7aa5a66c97794d4cd85c3b5ba6605e
Branches Tags
chris:main
chris:gallery-tags
chris:orgin

No commits in common. "6304066cd6303a8548329c3c68cd8cf55d0af7a2" and "6e09f0a32c7aa5a66c97794d4cd85c3b5ba6605e" have entirely different histories.
6304066cd6 ... 6e09f0a32c

18 changed files with 1853 additions and 17 deletions
Show Stats Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@ -1,3 +1,3 @@
{ {
"liveServer.settings.port": 5511 "liveServer.settings.port": 5510
} }

5
about/index.html
View File

@ -101,12 +101,11 @@
<h1 class="section-title has-text-centered">Beach Party Balloons: A celebration of joy and creativity</h1> <h1 class="section-title has-text-centered">Beach Party Balloons: A celebration of joy and creativity</h1>
<div class="article"> <div class="article">
<p class="has-text-centered">Since 2016, Beach Party Balloons has been steadfastly dedicated to providing exceptional family-friendly entertainment in Milford, Connecticut. <p class="has-text-centered">Since 2016, Beach Party Balloons has been steadfastly dedicated to providing exceptional family-friendly entertainment in Milford, Connecticut. Our journey began with the establishment of our sister company, Painted You, which laid the foundation for crafting unforgettable experiences through creative party services.</p>
Our journey began with the establishment of our sister company, Painted You, which laid the foundation for crafting unforgettable experiences through creative party services.</p>
</div> </div>
<div class="article"> <div class="article">
<p class="has-text-centered">In 2016, Melissa spearheaded the opening of Beach Party Balloons at Walnut Beach, bringing her unwavering passion for joy and magic to the community. Fast forward to today, we have relocated to a new venue at 554 Boston Post Road, continuing our legacy with enhanced innovation and growth. In 2025, Chris, a long time employee, purchased the business from Melissa. </p> <p class="has-text-centered">In 2016, Melissa spearheaded the opening of Beach Party Balloons at Walnut Beach, bringing her unwavering passion for joy and magic to the community. Fast forward to today, we have relocated to a new venue at 554 Boston Post Road, continuing our legacy with enhanced innovation and growth.</p>
</div> </div>
<div class="article"> <div class="article">
<p class="has-text-centered"> <p class="has-text-centered">

2
contact/index.html
View File

@ -116,6 +116,6 @@
</div> </div>
</footer> </footer>
<script src="../script.js"></script> <script src="../script.js"></script>
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script>
</body> </body>
</html> </html>

2
faq/index.html
View File

@ -159,6 +159,6 @@
</div> </div>
</footer> </footer>
<script src="../script.js"></script> <script src="../script.js"></script>
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script>
</body> </body>
</html> </html>

221
gallery/centerpiece/index.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<title>Beach Party Balloons</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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=Autour+One&family=Mogra&family=Rubik+Glitch&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" />
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
padding: 20px;
max-width: 1200px;
margin: auto;
}
.gallery-item {
text-align: center;
}
.gallery img {
object-fit: cover;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer; /* Make images clickable */
}
.gallery img:hover {
transform: scale(1.05);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
.caption {
font-size: 0.9rem;
margin-top: 5px;
color: #4a4a4a;
font-family: 'Autour One', cursive;
}
.modal{
--bulma-modal-content-width: 95vw;
--bulma-modal-content-height: 95vh;
}
.modal-image {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: none;
max-height: 95vh;
background-color: transparent !important;
}
.modal-card-title {
font-family: 'Autour One', cursive;
background-color: transparent !important;
}
.modal-card-body{
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</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="../../index.html">
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" 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="../../index.html">Home</a>
<a class="navbar-item" href="../../about/index.html">About Us</a>
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
<a class="navbar-item" href="../../terms/index.html">Terms</a>
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
<a class="navbar-item" href="../../contact/index.html">Contact</a>
</div>
</div>
</nav>
<button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
<ul>
<li><a href="../index.html">Gallery</a></li>
<li class="is-active"><a href="#" aria-current="page">Centerpieces</a></li>
</ul>
</nav>
<section class="section">
<div class="container">
<h1 class="title has-text-centered has-text-dark">Centerpieces</h1>
<div class="gallery">
<div class="gallery-item">
<figure class="image is-square">
<img loading=lazy src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="Cocktail Arrangements" data-target="modal1" aria-haspopup="true">
</figure>
<p class="caption">Cocktail Arrangements</p>
</div>
<div class="modal" id="modal1">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title has-size-4">Cocktail Arrangements</p>
<button class="delete" aria-label="close" data-action="close"></button>
</header>
<section class="modal-card-body">
<img class="modal-image" src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="Cocktail Arrangements">
</section>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.add('is-active');
document.body.classList.add('modal-open'); // Prevent background scroll
}
function closeModal(modal) {
modal.classList.remove('is-active');
document.body.classList.remove('modal-open'); // Allow scrolling again
}
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
const targetModal = image.dataset.target;
openModal(targetModal);
});
});
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
closeButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal');
closeModal(modal);
});
});
const modalBackgrounds = document.querySelectorAll('.modal-background');
modalBackgrounds.forEach(background => {
background.addEventListener('click', () => {
const modal = background.closest('.modal');
closeModal(modal);
});
});
});
</script>
<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>
</body>
</html>

212
gallery/classic/classic.css Normal file
View File

@ -0,0 +1,212 @@
/*
font
*/
/*
body
*/
body {
font-family: "Montserrat Alternates", sans-serif;
}
img {
max-width: 100%;
}
footer {
width: 100%;
padding: 15px;
text-align: center;
}
/*
sprite svg
*/
.sprite-svg {
display: none;
z-index: 10;
}
/*
title
*/
h1 {
padding: 40px 0 40px;
font-size: 40px;
text-align: center;
text-transform: uppercase;
}
/*
images wrapper
*/
.wrapper {
display: block;
width: 100%;
max-width: 1200px;
-moz-columns: 1;
columns: 1;
-moz-column-gap: 0;
column-gap: 0;
-moz-column-break-inside: avoid;
break-inside: avoid;
margin: 20px auto 50px;
}
@media (min-width: 600px) {
.wrapper {
-moz-columns: 2;
columns: 2;
}
}
@media (min-width: 800px) {
.wrapper {
-moz-columns: 3;
columns: 3;
}
}
.grid-image {
float: left;
width: 100%;
padding: 4px;
}
.grid-image img {
float: left;
width: 100%;
}
.zoom-wrapper {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
overflow: auto;
background-color: black;
background-color: rgba(0, 0, 0, 0.6);
}
.zoom-wrapper:target {
display: flex;
}
@-webkit-keyframes top-animation {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
@keyframes top-animation {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
.zoom-wrapper__image {
position: relative;
width: 80%;
max-width: 1000px;
height: 100%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
/* animation */
-webkit-animation-name: top-animation;
animation-name: top-animation;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.cell {
box-flex: 1;
flex: 1 1 auto;
}
.zoom-image {
max-height: 100vh;
}
/*
arrow navigation
*/
.navigation-arrow {
position: fixed;
top: 50%;
transform: translateY(-50%);
perspective: 1000px;
perspective-origin: 100% 50%;
}
.navigation-arrow__left {
left: 0;
}
.navigation-arrow__next {
right: 0;
}
.navigation-arrow__image {
position: absolute;
width: 100px;
height: 100px;
overflow: hidden;
transition: transform 0.3s;
}
.navigation-arrow__prev .navigation-arrow__image {
left: 40px;
transform: rotateY(90deg);
transform-origin: 0% 50%;
}
.navigation-arrow__next .navigation-arrow__image {
right: 40px;
transform: rotateY(-90deg);
transform-origin: 100% 50%;
}
.navigation-arrow__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.navigation-arrow__prev:hover .navigation-arrow__image, .navigation-arrow__next:hover .navigation-arrow__image {
transform: rotateY(0deg);
}
.navigation-arrow__icon {
position: relative;
display: block;
width: 40px;
height: 100px;
padding: 6px;
background-color: #ffffff;
}
.navigation-arrow__icon svg.icon {
top: 50%;
transform: translateY(-50%);
fill: #000000;
position: relative;
stroke-width: 2;
stroke: #000000;
}
.zoom-wrapper__close {
position: fixed;
top: 70px;
right: 10px;
z-index: 100 !important;
color: #ffffff;
font-size: 40px;
text-decoration: none;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
}

139
gallery/classic/classic.html Normal file
View File

@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../style.css">
<link rel="stylesheet" href="classic1.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="../../index.html">
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu has-text-right">
<div class="navbar-end">
<a class="navbar-item" href="../../index.html">Home</a>
<a class="navbar-item" href="../../about/index.html">About Us</a>
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
<a class="navbar-item" href="../../terms/index.html">Terms</a>
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
<a class="navbar-item" href="../../contact/index.html">Contact</a>
</div>
</div>
</nav>
<!-- Images used to open the lightbox -->
<div class="row">
<div class="column">
<img src="../../assets/pics/gallery/classic/20230617_131551.webp" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="column">
<img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="../../assets/pics/gallery/classic/20230617_131551.webp" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<!-- Caption text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail image controls -->
<div class="column">
<img class="demo" src="../../assets/pics/gallery/classic/20230617_131551.webp" onclick="currentSlide(1)" alt="Nature">
</div>
<div class="column">
<img class="demo" src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" onclick="currentSlide(2)" alt="Snow">
</div>
<script>
// Open the Modal
function openModal() {
document.getElementById("myModal").style.display = "block";
}
// Close the Modal
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
<footer class="footer has-background-primary-light">
<div class="content has-text-centered">
<p>Copyright &copy; <span id="year"></span> Beach Party Balloons</p>
<p>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</p>
</div>
</footer>
</body>
</html>

125
gallery/classic/classic1.css Normal file
View File

@ -0,0 +1,125 @@
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 75px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Caption text */
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

361
gallery/classic/classic1.html Normal file
View File

@ -0,0 +1,361 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../style.css">
<link rel="stylesheet" href="classic.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="../../index.html">
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu has-text-right">
<div class="navbar-end">
<a class="navbar-item" href="../../index.html">Home</a>
<a class="navbar-item" href="../../about/index.html">About Us</a>
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
<a class="navbar-item" href="../../terms/index.html">Terms</a>
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
<a class="navbar-item" href="../../contact/index.html">Contact</a>
</div>
</div>
</nav>
<!-- <section class="section">
<div class="container">
<h1 class="title has-text-centered has-text-dark">Gallery</h1>
<div class="gallery">
<label class="item" style="background-image:url(../../assets/pics/gallery/classic/20230617_131551.webp);"><p class="has-text-dark has-text-centered has-background-grey-lighter" id="cap">Classic Arch</p></label>
<label class="item" style="background-image:url(../../assets/pics/gallery/classic/_Photos_20241207_083534.webp);"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
<label class="item" style="background-image:url();"></label>
</div>
</div>
</section> -->
<div class='sprite-svg'>
<svg height='64' viewbox='0 0 64 64' width='64'>
<path d='M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z' id='arrow-left-1'></path>
</svg>
<svg height='64' viewbox='0 0 64 64' width='64'>
<path d='M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z' id='arrow-right-1'></path>
</svg>
</div>
<h1>minimal mosaic</h1>
<div class='wrapper'>
<a class='grid-image' href='#img1'>
<img alt='image 1' src='../../assets/pics/gallery/classic/20230617_131551.webp'>
</a>
<a class='grid-image' href='#img2'>
<img alt='image 2' src='../../assets/pics/gallery/classic/_Photos_20241207_083534.webp'>
</a>
<a class='grid-image' href='#img3'>
<img alt='image 3' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</a>
<a class='grid-image' href='#img4'>
<img alt='image 3' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</a>
<a class='grid-image' href='#img5'>
<img alt='image 3' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</a>
<a class='grid-image' href='#img6'>
<img alt='image 3' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</a>
<a class='grid-image' href='#img7'>
<img alt='image 3' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</a>
<a class='grid-image' href='#img8'>
<img alt='image 3' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</a>
<a class='grid-image' href='#img9'>
<img alt='image 4' src='https://images.pexels.com/photos/708921/pexels-photo-708921.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</a>
</div>
<div class='zoom-wrapper' id='img1'>
<div class='zoom-wrapper__image'>
<div class='cell'>
<img alt='image 1' class='zoom-image' src='../../assets/pics/gallery/classic/20230617_131551.webp'>
</div>
</div>
<a class='zoom-wrapper__close' href='#'>×</a>
<a class='navigation-arrow navigation-arrow__next' href='#img2'>
<span class='navigation-arrow__image'>
<img alt='image 2' src=''>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
</div>
<div class='zoom-wrapper' id='img2'>
<div class='zoom-wrapper__image'>
<div class='cell'>
<img alt='image 2' class='zoom-image' src='../../assets/pics/gallery/classic/_Photos_20241207_083534.webp''>
</div>
</div>
<a class='zoom-wrapper__close' href='#'>×</a>
<a class='navigation-arrow navigation-arrow__prev' href='#img1'>
<span class='navigation-arrow__image'>
<img alt='image 1' src='https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
<a class='navigation-arrow navigation-arrow__next' href='#img3'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
</div>
<div class='zoom-wrapper' id='img3'>
<div class='zoom-wrapper__image'>
<div class='cell'>
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1000'>
</div>
</div>
<a class='zoom-wrapper__close' href='#'>×</a>
<a class='navigation-arrow navigation-arrow__prev' href='#img2'>
<span class='navigation-arrow__image'>
<img alt='image 2' src='https://images.pexels.com/photos/774861/pexels-photo-774861.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
<a class='navigation-arrow navigation-arrow__next' href='#img4'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
</div>
<div class='zoom-wrapper' id='img4'>
<div class='zoom-wrapper__image'>
<div class='cell'>
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1000'>
</div>
</div>
<a class='zoom-wrapper__close' href='#'>×</a>
<a class='navigation-arrow navigation-arrow__prev' href='#img3'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
<a class='navigation-arrow navigation-arrow__next' href='#img5'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
</div>
<div class='zoom-wrapper' id='img5'>
<div class='zoom-wrapper__image'>
<div class='cell'>
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1000'>
</div>
</div>
<a class='zoom-wrapper__close' href='#'>×</a>
<a class='navigation-arrow navigation-arrow__prev' href='#img4'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
<a class='navigation-arrow navigation-arrow__next' href='#img6'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
</div>
<div class='zoom-wrapper' id='img6'>
<div class='zoom-wrapper__image'>
<div class='cell'>
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1000'>
</div>
</div>
<a class='zoom-wrapper__close' href='#'>×</a>
<a class='navigation-arrow navigation-arrow__prev' href='#img5'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
<a class='navigation-arrow navigation-arrow__next' href='#img7'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
</div>
<div class='zoom-wrapper' id='img7'>
<div class='zoom-wrapper__image'>
<div class='cell'>
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1000'>
</div>
</div>
<a class='zoom-wrapper__close' href='#'>×</a>
<a class='navigation-arrow navigation-arrow__prev' href='#img6'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
<a class='navigation-arrow navigation-arrow__next' href='#img8'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
</div>
<div class='zoom-wrapper' id='img8'>
<div class='zoom-wrapper__image'>
<div class='cell'>
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1000'>
</div>
</div>
<a class='zoom-wrapper__close' href='#'>×</a>
<a class='navigation-arrow navigation-arrow__prev' href='#img7'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
<a class='navigation-arrow navigation-arrow__next' href='#img9'>
<span class='navigation-arrow__image'>
<img alt='image 4' src='https://images.pexels.com/photos/708921/pexels-photo-708921.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
</div>
<div class='zoom-wrapper' id='img9'>
<div class='zoom-wrapper__image'>
<div class='cell'>
<img alt='image 4' class='zoom-image' src='https://images.pexels.com/photos/708921/pexels-photo-708921.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1000'>
</div>
</div>
<a class='zoom-wrapper__close' href='#'>×</a>
<a class='navigation-arrow navigation-arrow__prev' href='#img8'>
<span class='navigation-arrow__image'>
<img alt='image 3' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=400'>
</span>
<span class='navigation-arrow__icon'>
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</span>
</a>
</div>
<footer class="footer has-background-primary-light">
<div class="content has-text-centered">
<p>Copyright &copy; <span id="year"></span> Beach Party Balloons</p>
<p>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</p>
</div>
</footer>
<script>
document.querySelectorAll(".item").forEach(item => {
item.addEventListener("click", function () {
expandImage(this);
});
});
function expandImage(element) {
let expandedItem = document.querySelector('.item.expanded');
// If another image is expanded, remove it
if (expandedItem && expandedItem !== element) {
expandedItem.classList.remove('expanded');
}
// Toggle expansion and update caption class
element.classList.toggle('expanded');
document.querySelector("#cap").classList.add('is-size-2');
}
</script>
</body>
</html>

16
gallery/classic/convertToWebp.sh
View File

@ -12,17 +12,17 @@ for ext in "${IMAGE_EXTENSIONS[@]}"; do
for filename in $(find "$INPUT_DIR" -type f -name "$ext"); do for filename in $(find "$INPUT_DIR" -type f -name "$ext"); do
# Determine the output file name based on the original extension # Determine the output file name based on the original extension
case "$ext" in case "$ext" in
*.heic|*.HEIC) *.heic)
CONVERTED_FILE="${filename%}.webp" CONVERTED_FILE="${filename%.}.webp"
;; ;;
*.jpg|*.jpeg|*.JPG|*.JPEG) *.jpg|*.jpeg)
CONVERTED_FILE="${filename%}.webp" CONVERTED_FILE="${filename%.}.webp"
;; ;;
*.png|*.PNG) *.png)
CONVERTED_FILE="${filename%}.webp" CONVERTED_FILE="${filename%.}.webp"
;; ;;
*.gif|*.GIF) *.gif)
CONVERTED_FILE="${filename%}.webp" CONVERTED_FILE="${filename%.}.webp"
;; ;;
*) # Default case for unknown file types (if you add more later) *) # Default case for unknown file types (if you add more later)
echo "Unknown file type: $filename" echo "Unknown file type: $filename"

236
gallery/classic/index.html Normal file
View File

@ -0,0 +1,236 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<title>Beach Party Balloons</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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=Autour+One&family=Mogra&family=Rubik+Glitch&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" />
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
padding: 20px;
max-width: 1200px;
margin: auto;
}
.gallery-item {
text-align: center;
}
.gallery img {
object-fit: cover;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer; /* Make images clickable */
}
.gallery img:hover {
transform: scale(1.05);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
.caption {
font-size: 0.9rem;
margin-top: 5px;
color: #4a4a4a;
font-family: 'Autour One', cursive;
}
.modal{
--bulma-modal-content-width: 95vw;
--bulma-modal-content-height: 95vh;
}
.modal-image {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: none;
max-height: 95vh;
background-color: transparent !important;
}
.modal-card-title {
font-family: 'Autour One', cursive;
background-color: transparent !important;
}
.modal-card-body{
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</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="../../index.html">
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" 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="../../index.html">Home</a>
<a class="navbar-item" href="../../about/index.html">About Us</a>
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
<a class="navbar-item" href="../../terms/index.html">Terms</a>
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
<a class="navbar-item" href="../../contact/index.html">Contact</a>
</div>
</div>
</nav>
<button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
<ul>
<li><a href="../index.html">Gallery</a></li>
<li class="is-active"><a href="#" aria-current="page">Classic</a></li>
</ul>
</nav>
<section class="section">
<div class="container">
<h1 class="title has-text-centered has-text-dark">Classic Balloon Décor</h1>
<div class="gallery">
<div class="gallery-item">
<figure class="image is-square">
<img loading=lazy src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch" data-target="modal1" aria-haspopup="true">
</figure>
<p class="caption">20' Classic Arch</p>
</div>
<div class="modal" id="modal1">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">20' Classic Arch</p>
<button class="delete" aria-label="close" data-action="close"></button>
</header>
<section class="modal-card-body">
<img class="modal-image" src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch">
</section>
</div>
</div>
<div class="gallery-item">
<figure class="image is-square">
<img loading=lazy src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns" data-target="modal2" aria-haspopup="true">
</figure>
<p class="caption">Classic Columns</p>
</div>
<div class="modal" id="modal2">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Classic Columns</p>
<button class="delete" aria-label="close" data-action="close"></button>
</header>
<section class="modal-card-body">
<img class="modal-image" src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns">
</section>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.add('is-active');
}
function closeModal(modal) {
modal.classList.remove('is-active');
}
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
const targetModal = image.dataset.target;
openModal(targetModal);
});
});
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
closeButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal');
closeModal(modal);
});
});
const modalBackgrounds = document.querySelectorAll('.modal-background');
modalBackgrounds.forEach(background => {
background.addEventListener('click', () => {
const modal = background.closest('.modal');
closeModal(modal);
});
});
});
</script>
<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>
</body>
</html>

71
gallery/classic/updateGallery1.sh Executable file
View File

@ -0,0 +1,71 @@
#!/bin/bash
# Check if input is provided
if [ -z "$1" ]; then
echo "Usage: $0 DIRECTORY"
exit 1
fi
DIRECTORY=$1
# Check if directory exists
if [ ! -d "$DIRECTORY" ]; then
echo "Error: Directory does not exist."
exit 1
fi
# Set variables
IMAGE_ DIR="$DIRECTORY"
OUTPUT_FILE="index.html"
# Generate gallery with captions
count=1
for img in $IMAGE_DIR/*.{jpg,jpeg,png,gif,webp}; do
if [ -f "$img" ]; then
filename=$(basename "$img")
caption_file="${filename%.*}.txt"
# Read caption if available, otherwise use default
if [ -f "$caption_file" ]; then
caption=$(cat "$caption_file")
else
caption=""
fi
echo " <div class=\"gallery-item\">" >> $OUTPUT_FILE
echo " <a href=\"#lightbox$count\"><figure class=\"image is-square\"> <img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\"></figure></a>" >> $OUTPUT_FILE
echo " <div class=\"caption\">$caption</div>" >> $OUTPUT_FILE
echo " </div>" >> $OUTPUT_FILE
count=$((count+1))
fi
done
# Add closing tags for the gallery
cat >> $OUTPUT_FILE <<EOL
</div>
</div>
<footer class="footer has-background-primary-light">
<div class="content has-text-centered">
<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>
<div id="footer"></div>
<script src="$IMAGE_DIR/script.js"></script>
EOL
# Add lightbox overlays with captions
count=1
for img in $IMAGE_DIR/*.{jpg,jpeg,png,gif,webp}; do
if [ -f "$img" ]; then
filename=$(basename "$img")
caption_file="${filename%.*}.txt"
if [ -f "$caption_file" ]; then
caption=$(cat "$caption_file")
else
caption=""
fi
echo " <div id=\"lightbox$count\" class=\"lightbox\">

2
gallery/index.html
View File

@ -136,6 +136,6 @@
</div> </div>
</footer> </footer>
<script src="../script.js"></script> <script src="../script.js"></script>
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script>
</body> </body>
</html> </html>

237
gallery/organic/index.html Normal file
View File

@ -0,0 +1,237 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<title>Beach Party Balloons</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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=Autour+One&family=Mogra&family=Rubik+Glitch&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" />
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
padding: 20px;
max-width: 1200px;
margin: auto;
}
.gallery-item {
text-align: center;
}
.gallery img {
object-fit: cover;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer; /* Make images clickable */
}
.gallery img:hover {
transform: scale(1.05);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
.caption {
font-size: 0.9rem;
margin-top: 5px;
color: #4a4a4a;
font-family: 'Autour One', cursive;
}
.modal{
--bulma-modal-content-width: 95vw;
--bulma-modal-content-height: 95vh;
}
.modal-image {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: none;
max-height: 95vh;
background-color: transparent !important;
}
.modal-card-title {
font-family: 'Autour One', cursive;
background-color: transparent !important;
}
.modal-card-body{
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</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="../../index.html">
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" 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="../../index.html">Home</a>
<a class="navbar-item" href="../../about/index.html">About Us</a>
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
<a class="navbar-item" href="../../terms/index.html">Terms</a>
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
<a class="navbar-item" href="../../contact/index.html">Contact</a>
</div>
</div>
</nav>
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
<ul>
<li><a href="../index.html">Gallery</a></li>
<li class="is-active"><a href="#" aria-current="page">Organic</a></li>
</ul>
</nav>
<button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
<section class="section">
<div class="container">
<h1 class="title has-text-centered has-text-dark">Organic Balloon Décor</h1>
<div class="gallery">
<div class="gallery-item">
<figure class="image is-square">
<img loading=lazy src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt="" data-target="modal1" aria-haspopup="true">
</figure>
<p class="caption"></p>
</div>
<div class="modal" id="modal1">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title has-size-4"></p>
<button class="delete" aria-label="close" data-action="close"></button>
</header>
<section class="modal-card-body">
<img class="modal-image" src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt="">
</section>
</div>
</div>
<div class="gallery-item">
<figure class="image is-square">
<img loading=lazy src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt="" data-target="modal2" aria-haspopup="true">
</figure>
<p class="caption"></p>
</div>
<div class="modal" id="modal2">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title has-size-4"></p>
<button class="delete" aria-label="close" data-action="close"></button>
</header>
<section class="modal-card-body">
<img class="modal-image" src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt="">
</section>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.add('is-active');
}
function closeModal(modal) {
modal.classList.remove('is-active');
}
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
const targetModal = image.dataset.target;
openModal(targetModal);
});
});
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
closeButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal');
closeModal(modal);
});
});
const modalBackgrounds = document.querySelectorAll('.modal-background');
modalBackgrounds.forEach(background => {
background.addEventListener('click', () => {
const modal = background.closest('.modal');
closeModal(modal);
});
});
});
</script>
<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>
</body>
</html>

200
gallery/sculpture/index.html Normal file
View File

@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<title>Beach Party Balloons</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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=Autour+One&family=Mogra&family=Rubik+Glitch&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" />
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
padding: 20px;
max-width: 1200px;
margin: auto;
}
.gallery-item {
text-align: center;
}
.gallery img {
object-fit: cover;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer; /* Make images clickable */
}
.gallery img:hover {
transform: scale(1.05);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
.caption {
font-size: 0.9rem;
margin-top: 5px;
color: #4a4a4a;
font-family: 'Autour One', cursive;
}
.modal{
--bulma-modal-content-width: 95vw;
--bulma-modal-content-height: 95vh;
}
.modal-image {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: none;
max-height: 95vh;
background-color: transparent !important;
}
.modal-card-title {
font-family: 'Autour One', cursive;
background-color: transparent !important;
}
.modal-card-body{
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</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="../../index.html">
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" 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="../../index.html">Home</a>
<a class="navbar-item" href="../../about/index.html">About Us</a>
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
<a class="navbar-item" href="../../terms/index.html">Terms</a>
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
<a class="navbar-item" href="../../contact/index.html">Contact</a>
</div>
</div>
</nav>
<button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
<ul>
<li><a href="../index.html">Gallery</a></li>
<li class="is-active"><a href="#" aria-current="page">Sculptures and Themes</a></li>
</ul>
</nav>
<section class="section">
<div class="container">
<h1 class="title has-text-centered has-text-dark">Sculptures and Themes</h1>
<div class="gallery">
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.add('is-active');
}
function closeModal(modal) {
modal.classList.remove('is-active');
}
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
const targetModal = image.dataset.target;
openModal(targetModal);
});
});
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
closeButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal');
closeModal(modal);
});
});
const modalBackgrounds = document.querySelectorAll('.modal-background');
modalBackgrounds.forEach(background => {
background.addEventListener('click', () => {
const modal = background.closest('.modal');
closeModal(modal);
});
});
});
</script>
<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>
</body>
</html>

2
index.html
View File

@ -191,7 +191,7 @@
</div> </div>
</footer> </footer>
<script src="script.js"></script> <script src="script.js"></script>
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script> <script defer data-domain="preview.beachpartyballoons.com" src="https://metric.chrisedwards.tech/js/script.js"></script>
</body> </body>
</html> </html>

35
sendEmail.php Normal file
View File

@ -0,0 +1,35 @@
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Validate and sanitize inputs
$name = htmlspecialchars(trim($_POST['name']));
$email = filter_var(trim($_POST['email']), FILTER_SANITIZE_EMAIL);
$message = htmlspecialchars(trim($_POST['message']));
// Check if the email is valid
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Invalid email address.";
exit;
}
// Prepare email
$to = "info@beachpartyballons.com"; // Replace with your business email
$headers = "From: $name <$email>\r\n";
$headers .= "Reply-To: $email\r\n";
$headers .= "Content-Type: text/plain; charset=UTF-8\r\n";
$email_body = "You have received a new message from your website contact form.\n\n";
$email_body .= "Name: $name\n";
$email_body .= "Email: $email\n";
$email_body .= "Phone: $phone\n";
$email_body .= "Message:\n$message\n";
// Send email
if (mail($to, $subject, $email_body, $headers)) {
echo "Message sent successfully!";
} else {
echo "Failed to send message. Please try again later.";
}
} else {
echo "Invalid request.";
}
?>

2
terms/index.html
View File

@ -197,6 +197,6 @@ h1{
</div> </div>
</footer> </footer>
<script src="../script.js"></script> <script src="../script.js"></script>
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script>
</body> </body>
</html> </html>