jotform contact us (temporary) added pages, fixed links

This commit is contained in:
chris 2025-02-06 15:56:48 -05:00
parent 37d7563b69
commit 53e717fedc
7 changed files with 475 additions and 100 deletions

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5502
}

84
about/index.html Normal file
View File

@ -0,0 +1,84 @@
<!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</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">
</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 is-tab is-active" href="index.html">
About Us
</a>
<a class="navbar-item" href="../terms/index.html">
Terms
</a>
<!-- <div class="navbar-item "> -->
<a class="navbar-item" href="../gallery/index.html">
Gallery
</a>
<!-- <div class="navbar-dropdown"> -->
<a class="navbar-item" href="../contact/index.html">
Contact
</a>
</div>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
<div style="max-width: 30%; margin: auto;">
<script type="text/javascript" src="https://form.jotform.com/jsform/250083932725053"></script>
</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 defer src="../script.js"></script>
</body>
</html>

193
gallery/index.html Normal file
View File

@ -0,0 +1,193 @@
<!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</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">
<style>
style {
/* Custom styling */
.gallery-title {
font-size: 2.5rem;
text-align: center;
margin-bottom: 2rem;
color: #333;
}
.gallery-grid {
display: grid;
gap: 2rem;
padding: 0.5rem;
}
.gallery-slide {
position: relative;
opacity-0;
overflow: hidden;
}
.gallery-slide.active {
opacity-1;
}
.gallery-button {
margin-top: 1rem;
padding: 0.5rem 1rem;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.gallery-button:hover {
background-color: #0056b3;
}
}
</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="../terms/index.html">
Terms
</a>
<!-- <div class="navbar-item "> -->
<a class="navbar-item is-tab is-active" href="../gallery/index.html">
Gallery
</a>
<!-- <div class="navbar-dropdown"> -->
<a class="navbar-item" href="../contact/index.html">
Contact
</a>
</div>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
<section class="page-title">
<h1 class="gallery-title">My Gallery</h1>
</section>
<nav class="container">
<div class="row align-items-center">
<button class="left col-auto-6 gallery-button" type="button" id="previousBtn">
Previous
</button>
<!-- Slide content will go here -->
<img src="../assets/pics/classic/20240825_104716.webp" alt="">
<button class="right col-auto-6 gallery-button" type="button" id="nextBtn">
Next
</button>
</div>
</nav>
<div class="container">
<div class="row">
<!-- Slide 1 will go here -->
<!-- Slide 2 will go here -->
<!-- Slide 3 will go here -->
</div>
</div>
<button id="playBtn" class="col-auto-6 row-auto-1 gallery-button" style="margin-top: 0.5rem;">
Next Slide
</button>
<!-- JavaScript for slide transitions -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const slides = document.querySelectorAll('.gallery-slide');
let currentSlide = 0;
function showSlide(n) {
if (n > 0) {
currentSlide++;
}
slides.forEach(function(slide, index) {
slide.classList.remove('active');
});
slides[currentSlide].classList.add('active');
}
document.getElementById('nextBtn').addEventListener('click', function() {
showSlide(1);
});
document.getElementById('previousBtn').addEventListener('click', function() {
if (currentSlide > 0) {
currentSlide--;
showSlide(-1);
}
});
});
</script>
<!-- View switcher -->
<div class="col-auto-6">
<img src="your-image-container" alt="Gallery Image">
</div>
<button class="button view-switch-btn" type="button" id="viewSwitchBtn">
Switch View
</button>
</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="script.js"></script>
</body>
</html>

View File

@ -33,14 +33,16 @@
<div id="navbarBasicExample" class="navbar-menu has-text-right">
<div class="navbar-end">
<a class="navbar-item " href="index.html">
<a class="navbar-item is-tab is-active" href="index.html">
Home
</a>
<a class="navbar-item" href="about/index.html">
About Us
</a>
<a class="navbar-item" href="terms/index.html">
Terms
</a>
<!-- <div class="navbar-item "> -->
<a class="navbar-item" href="gallery/index.html">
Gallery
@ -101,104 +103,12 @@
<img src="assets/pics/helium/img1.webp" alt="Image 1" >
</div>
<!-- <script type="text/javascript" src="https://form.jotform.com/jsform/250083932725053"></script> -->
<!-- <div class="container">
<div class="columns is-justify-content-center ">
<div class="column is-6-tablet is-5-desktop is-4-widescreen is-3-fullh">
<form method="POST" action="https://herotofu.com/start" class="box p-5">
<label class="is-block mb-4">
<span class="is-block mb-2">Your name</span>
<input
name="name"
type="text"
class="input"
placeholder="Joe Bloggs"
/>
</label>
<label class="is-block mb-4">
<span class="is-block mb-2">Email address</span>
<input
required
name="email"
type="email"
class="input"
placeholder="joe.bloggs@example.com"
/>
</label>
<div style="margin: auto;">
<script type="text/javascript" src="https://form.jotform.com/jsform/250083932725053"></script>
<label class="is-block mb-4">
<span class="is-block mb-2">Message</span>
<textarea
name="message"
class="textarea"
rows="3"
placeholder="Tell us what you're thinking about..."
></textarea>
</label>
<div class="mb-4">
<button type="submit" class="button is-link px-4">Contact Us</button>
</div>
<div>
<div class="is-size-7 has-text-right">
by
<a
href="https://herotofu.com/start"
class="has-text-dark"
target="_blank"
>HeroTofu</a
>
</div>
</div>
</form>
</div>
</div>
</div> -->
<!-- <section class="section ">
<div class="container ">
<h1 class="title has-text-centered">Contact Us</h1>
<form action="sendEmail.php" method="post">
<div class="field ">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" name="name" placeholder="Your Name" required>
</div>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" name="email" placeholder="Your Email" required>
</div>
</div>
<div class="field">
<label class="label">Phone</label>
<div class="control">
<input class="input" type="tel" name="phone" placeholder="Your Phone Number" required>
</div>
</div>
<div class="field">
<label class="label">Subject</label>
<div class="control">
<input class="input" type="text" name="subject" placeholder="Subject" required>
</div>
</div>
<div class="field">
<label class="label">Message</label>
<div class="control">
<textarea class="textarea" name="message" placeholder="Your Message" required></textarea>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-primary" type="submit">Send Message</button>
</div>
</div>
</form>
</div>
</section> -->
<div class="container theme-light padding">
</div>
<!-- <div class="container theme-light padding">
<div class="columns is-justify-content-center">
<div class="column is-6-tablet is-5-desktop is-4-widescreen is-3-fullh">
<form method="POST" action="sendEmail.php" class="box p-5">
@ -250,7 +160,7 @@
</form>
</div>
</div>
</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>

View File

@ -28,3 +28,8 @@ document.addEventListener('DOMContentLoaded', () => {
document.getElementById("year").innerHTML = "&nbsp" + date.getFullYear() + "&nbsp";
} );
copyDate();
document.addEventListener("load", function () {
// Your code goes here
document.querySelectorAll("formFooter").style.display = "none";
});

View File

@ -1,5 +1,5 @@
:root {
--bulma-primary-h: 197deg;
/* --bulma-primary-h: ; */
--bulma-primary-l: 47%;
--bulma-info-h: 175deg;
--bulma-info-s: 88%;
@ -15,8 +15,10 @@ html {
body {
font-family: "Autour One", serif;
color:rgb(54, 54, 54);
}
nav {
font-family: "Autour One", serif;
}

178
terms/index.html Normal file
View File

@ -0,0 +1,178 @@
<!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</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">
<style>
.terms-and-conditions {
margin-top: 2rem;
padding: 1.5rem;
background-color: #f9f9f9;
border-radius: 0.25rem;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
color: #333;
}
h1{
color: #333 !important;
}
.terms-and-conditions h3, h2 {
margin-bottom: 1rem;
color: #333;
}
.terms-and-conditions p {
margin-bottom: 1rem;
color: #666;
}
</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 is-tab is-active" href="../terms/index.html">
Terms
</a>
<!-- <div class="navbar-item "> -->
<a class="navbar-item" href="../gallery/index.html">
Gallery
</a>
<!-- <div class="navbar-dropdown"> -->
<a class="navbar-item" href="../contact/index.html">
Contact
</a>
</div>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
<<!-- Terms & Conditions Section -->
<section class="terms-and-conditions">
<div class="container">
<div class="content ">
<h1 class="has-text-centered">Terms & Conditions of Purchase Beach Party Balloons (BPB)</h1>
<!-- Term 1: Balloons and Care -->
<article class="column is-one-fourth">
<h3>Balloons and Care</h3>
<p>Balloons are novelty items and are not guaranteed to last beyond the time of purchase. We recommend purchasing a balloon bag to protect your balloon order.</p>
<p>Please do not leave balloons in the car on warm days or in places where the temperature fluctuates. The use of helium balloons for outdoor purposes is discouraged. BPB is not responsible for any loss, damage, tangling, windblown incidents, or balloons floating away due to weather conditions.</p>
</article>
<!-- Term 2: Weighting of Balloons -->
<article class="column is-one-fourth">
<h3>Weighting of Balloons</h3>
<p>All balloons leaving the store must be weighted. We strongly encourage you to keep the balloons weighted, especially when used outdoors.</p>
</article>
<!-- Term 3: Prohibition of Intentional Balloon Release -->
<article class="column is-one-fourth">
<h3>Prohibition of Intentional Balloon Release</h3>
<p>BPB does not sell balloons for intentional release. As members of PEBA (Pro Environment Balloon Alliance), we are committed to being an environmentally conscious and law-abiding balloon shop.</p>
</article>
<!-- Term 4: Balloon Decor with Base -->
<article class="column is-one-fourth">
<h3>Balloon Décor with Base</h3>
<p>Balloon decor items that come with a base, such as columns, "favorite" centerpieces, and arches, may require a deposit or strike fee. You are responsible for the safe return of these items.</p>
<p>Failure to return the items or their absence during retrieval may result in the loss of your deposit or being charged a replacement fee.</p>
</article>
<!-- Term 5: Delivery -->
<article class="column is-one-fourth">
<h3>Delivery</h3>
<p>Balloon orders for delivery require a minimum 2-hour delivery window. Smaller delivery windows cannot be guaranteed for on-time arrival, as we account for potential delays.</p>
<p>A minimum order and delivery fee may be required based on the date and location. Delivery is subject to availability.</p>
</article>
<!-- Term 6: Substitution of Products -->
<article class="column is-one-fourth">
<h3>Substitution of Products</h3>
<p>BPB reserves the right to provide a substitute product of equal or greater value if we are unable to fulfill the exact product ordered.</p>
</article>
<!-- Term 7: Weather-Related Substitution or Cancellation -->
<article class="column is-one-fourth">
<h3>Weather-Related Substitution or Cancellation</h3>
<p>BPB reserves the right to substitute or cancel an order in the event that weather conditions make delivery or setup of decor, such as a balloon arch, unsafe or impractical.</p>
</article>
<!-- Term 8: Liability -->
<article class="column is-one-fourth">
<h3>Liability</h3>
<p>BPB is not responsible for any damage to property, injuries caused by balloons, decor, or our employees or vehicles, including allergic reactions and choking incidents.</p>
<p>Children should be supervised around balloons.</p>
</article>
<!-- Term 9: Foil Balloons -->
<article class="column is-one-fourth">
<h3>Foil Balloons</h3>
<p>Foil balloons may appear deflated in cold weather. Helium condenses in cold temperatures, but the balloons should expand to their original size when brought to the inflation temperature.</p>
</article>
<!-- Term 10: Refunds and Replacements -->
<article class="column is-one-fourth">
<h3>Refunds and Replacements</h3>
<p>Purchases and down payments are nonrefundable. You can cancel your order within 5 days for a 75% store credit.</p>
<p>Once balloons leave the store or are delivered, BPB is not responsible for replacing any popped, damaged, or deflated balloons.</p>
<p>Balloons are fragile by nature, please handle with care and check your purchase for any defects before leaving the shop.</p>
</article>
</div>
</div>
</section>
<!-- <div style="max-width: 30%; margin: auto;">
<script type="text/javascript" src="https://form.jotform.com/jsform/250083932725053"></script>
</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="../script.js"></script>
</body>
</html>