From b60e1044e177558927999ee75892b1ae961f14a4 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Thu, 20 Feb 2025 00:07:26 -0500
Subject: [PATCH] add back to top button on all pages

---
 about/index.html                     |  2 ++
 contact/index.html                   |  2 ++
 faq/index.html                       |  1 +
 gallery/centerpiece/index.html       |  2 ++
 gallery/centerpiece/updateGallery.sh |  2 ++
 gallery/classic/index.html           |  9 +++++++++
 gallery/classic/updateGallery.sh     |  2 ++
 gallery/index.html                   |  1 +
 gallery/organic/index.html           | 10 ++++++++++
 gallery/organic/updateGallery.sh     |  3 +++
 gallery/sculpture/index.html         | 11 ++++++++++-
 gallery/sculpture/updateGallery.sh   |  4 +++-
 index.html                           |  1 +
 script.js                            | 19 +++++++++++++++++++
 style.css                            | 20 ++++++++++++++++++++
 terms/index.html                     |  1 +
 16 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/about/index.html b/about/index.html
index e3ae7d8..4c8232a 100644
--- a/about/index.html
+++ b/about/index.html
@@ -91,6 +91,8 @@
         </div>
       </nav>
  
+        <button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button> 
+
      <div class="container is-justify-content-center padding">
       <img src="../assets/pics/classic/ceiling.jpg" alt="balloon ceiling fill" >
     </div>
diff --git a/contact/index.html b/contact/index.html
index d047754..c9238da 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -90,6 +90,8 @@
           </div>
         </div>
       </nav>
+             <button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button> 
+
 
 
     <iframe style="border:none;width:100%; height: 600px;" id="contact-us-q7uycv" src="https://forms.beachpartyballoons.com/forms/contact-us-q7uycv"></iframe><script type="text/javascript" onload="initEmbed('contact-us-q7uycv')" src="https://forms.beachpartyballoons.com/widgets/iframe.min.js"></script>
diff --git a/faq/index.html b/faq/index.html
index b8bf2a5..91e971f 100644
--- a/faq/index.html
+++ b/faq/index.html
@@ -95,6 +95,7 @@
           </div>
         </div>
       </nav>
+       <button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button> 
 
     <section class="section theme-light">
         <div class="container">
diff --git a/gallery/centerpiece/index.html b/gallery/centerpiece/index.html
index 2b24ea4..bf79a59 100644
--- a/gallery/centerpiece/index.html
+++ b/gallery/centerpiece/index.html
@@ -95,6 +95,8 @@
             </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>
diff --git a/gallery/centerpiece/updateGallery.sh b/gallery/centerpiece/updateGallery.sh
index db45c0d..f2873e0 100755
--- a/gallery/centerpiece/updateGallery.sh
+++ b/gallery/centerpiece/updateGallery.sh
@@ -110,6 +110,8 @@ cat > "$OUTPUT_FILE" <<EOL
             </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>
diff --git a/gallery/classic/index.html b/gallery/classic/index.html
index 799cdda..c41d4af 100644
--- a/gallery/classic/index.html
+++ b/gallery/classic/index.html
@@ -76,6 +76,13 @@
             <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">
@@ -88,6 +95,8 @@
             </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>
diff --git a/gallery/classic/updateGallery.sh b/gallery/classic/updateGallery.sh
index c420d41..af4102c 100755
--- a/gallery/classic/updateGallery.sh
+++ b/gallery/classic/updateGallery.sh
@@ -110,6 +110,8 @@ cat > "$OUTPUT_FILE" <<EOL
             </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>
diff --git a/gallery/index.html b/gallery/index.html
index 20bfa04..6ec8eb8 100644
--- a/gallery/index.html
+++ b/gallery/index.html
@@ -69,6 +69,7 @@
           </div>
         </div>
       </nav>
+       <button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button> 
 
 <div class="columns is-desktop">
   <div class="column">
diff --git a/gallery/organic/index.html b/gallery/organic/index.html
index d148430..9900069 100644
--- a/gallery/organic/index.html
+++ b/gallery/organic/index.html
@@ -76,6 +76,13 @@
             <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">
@@ -88,12 +95,15 @@
             </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>
diff --git a/gallery/organic/updateGallery.sh b/gallery/organic/updateGallery.sh
index d1812fa..f547f29 100755
--- a/gallery/organic/updateGallery.sh
+++ b/gallery/organic/updateGallery.sh
@@ -110,12 +110,15 @@ cat > "$OUTPUT_FILE" <<EOL
             </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>
diff --git a/gallery/sculpture/index.html b/gallery/sculpture/index.html
index 451fc34..c20079e 100644
--- a/gallery/sculpture/index.html
+++ b/gallery/sculpture/index.html
@@ -76,6 +76,13 @@
             <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">
@@ -88,6 +95,8 @@
             </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>
@@ -96,7 +105,7 @@
 </nav>
     <section class="section">
         <div class="container">
-            <h1 class="title has-text-centered has-text-dark">Sculptures and Themes<</h1>
+            <h1 class="title has-text-centered has-text-dark">Sculptures and Themes</h1>
             <div class="gallery">
             </div>
         </div>
diff --git a/gallery/sculpture/updateGallery.sh b/gallery/sculpture/updateGallery.sh
index cd9e79e..f2f8552 100755
--- a/gallery/sculpture/updateGallery.sh
+++ b/gallery/sculpture/updateGallery.sh
@@ -110,6 +110,8 @@ cat > "$OUTPUT_FILE" <<EOL
             </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>
@@ -118,7 +120,7 @@ cat > "$OUTPUT_FILE" <<EOL
 </nav>
     <section class="section">
         <div class="container">
-            <h1 class="title has-text-centered has-text-dark">Sculptures and Themes<</h1>
+            <h1 class="title has-text-centered has-text-dark">Sculptures and Themes</h1>
             <div class="gallery">
 EOL
 
diff --git a/index.html b/index.html
index 08631cd..3db49f7 100644
--- a/index.html
+++ b/index.html
@@ -66,6 +66,7 @@
           </div>
         </div>
       </nav>
+       <button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button> 
       <!-- <div>
         <img class="image is-16by9" id="heroImg"
         src="assets/pics/classic/hero.jpg"
diff --git a/script.js b/script.js
index 988dbd2..961ce2b 100644
--- a/script.js
+++ b/script.js
@@ -154,3 +154,22 @@ document.querySelector(".lightbox .close").addEventListener("click", function(ev
 });
 
 
+// Get the button:
+let mybutton = document.getElementById("top");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+
+// When the user clicks on the button, scroll to the top of the document
+function topFunction() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+} 
\ No newline at end of file
diff --git a/style.css b/style.css
index d042561..6a3d879 100644
--- a/style.css
+++ b/style.css
@@ -99,4 +99,24 @@ form{
     font-family: "Autour One", serif; /* font-family: "Playwrite AU SA", serif; */
     color:#363636;
 
+}
+
+#top {
+  display: none; /* Hidden by default */
+  position: fixed; /* Fixed/sticky position */
+  bottom: 20px; /* Place the button at the bottom of the page */
+  right: 30px; /* Place the button 30px from the right */
+  z-index: 99; /* Make sure it does not overlap */
+  border: none; /* Remove borders */
+  outline: none; /* Remove outline */
+  background-color: #d1fff8; /* Set a background color */
+  cursor: pointer; /* Add a mouse pointer on hover */
+  padding: 15px; /* Some padding */
+  border-radius: 10px; /* Rounded corners */
+  font-size: 18px; /* Increase font size */
+  border:solid 1px #363636;
+}
+
+#top:hover {
+  background-color: #aedad3; /* Add a dark-grey background on hover */
 }
\ No newline at end of file
diff --git a/terms/index.html b/terms/index.html
index f3eceba..af4d743 100644
--- a/terms/index.html
+++ b/terms/index.html
@@ -96,6 +96,7 @@ h1{
           </div>
         </div>
       </nav>
+       <button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button> 
 
 <!-- Terms & Conditions Section -->
 <section class="terms-and-conditions">