update pixels

css/main.css

@@ -504,7 +504,7 @@ p {
 
 /* Custom styles for the donation tracker */
 .donation-tracker {
-  margin-top: 30px;
+
   padding: 20px;
   background-color: #1e1e1e;
   border-radius: 10px;
@@ -632,4 +632,72 @@ text-align: left;
 .bid-active span#current-bid {
   font-weight: bold;
   color: #4CAF50;
+}
+
+
+body {
+  background-color: #ff4444; /* Urgent red background */
+  color: white; /* White text */
+
+}
+.countdown-container {
+
+  align-items: center;
+  text-align: center;
+  padding: 20px;
+}
+.countdown-title {
+  font-size: 2.5rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+  animation: blink 1.5s linear infinite;
+}
+.countdown {
+  font-size: 4rem;
+  font-weight: bold;
+  background-color: #222;
+  padding: 15px 30px;
+  border-radius: 10px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+  letter-spacing: 3px;
+}
+.countdown span {
+  color: #ffcc00; /* Yellow for urgency */
+}
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+h1::before, h2::before, h3::before {
+  content: "Have you donated yet? ";
+  color: black; /* Optional: make the text red for emphasis */
+  font-weight: bold; /* Optional: make the text bold */
+  font-size: 3rem; /* Adjust the size to your needs */
+  display: block;
+  margin-bottom: 10px; /* Add space between the inserted text and the heading */
+}
+
+@keyframes shake {
+  0% { transform: translate(1px, 1px) rotate(0deg); }
+  10% { transform: translate(-1px, -2px) rotate(-1deg); }
+  20% { transform: translate(-3px, 0px) rotate(1deg); }
+  30% { transform: translate(3px, 2px) rotate(0deg); }
+  40% { transform: translate(1px, -1px) rotate(1deg); }
+  50% { transform: translate(-1px, 2px) rotate(-1deg); }
+  60% { transform: translate(-3px, 1px) rotate(0deg); }
+  70% { transform: translate(3px, 1px) rotate(-1deg); }
+  80% { transform: translate(-1px, -1px) rotate(1deg); }
+  90% { transform: translate(1px, 2px) rotate(0deg); }
+  100% { transform: translate(1px, -2px) rotate(-1deg); }
+}
+
+
+.shake {
+  animation: shake 0.5s ease-in-out; /* Shake animation applied dynamically */
 }

index.html

@@ -163,8 +163,20 @@ <h2>🔴Livestream going on now!</h2>
   <div class="row">
     <!-- Left Column: Donate Button and Progress Bar -->
     <div class="col-12 col-md-6 text-center">
-      <h2> LAST DAY TO DONATE!</h2>
-      <br>
+
+
+
+<div class="countdown-container">
+  <div class="countdown-title">Time Left to Donate</div>
+  <div class="countdown">
+    <span id="hours">00</span>h : 
+    <span id="minutes">00</span>m : 
+    <span id="seconds">00</span>s
+  </div>
+</div>
+
+
+
       <a href="https://www.giveforgoodlouisville.org/organization/Louisville-Makes-Games" class="donate-btn mt-4">Donate Now</a>
 
       <!-- Donation Tracker -->
@@ -402,8 +414,8 @@ <h4>Mechanical Keyboard RK61 White / red switches (Open Box)</h4>
         <img src="img/auction/thebestjstn-animal-support.jpg" alt="Original Art Print - Animal Support" class="img-fluid mb-2">
         <h4>Original Art Print - Animal Support</h4>
         <p>8.5"x11" framed art print</p>
-        <p>Starting Bid: $ <span id="auction-item-4-bid">5</span>
-          <span class="text-muted">(Retail: $25.00)</span>
+        <p>Current Bid: $ <span id="auction-item-4-bid">5</span>
+          <span class="text-muted">Jesse</span>
         </p>
         <a href="https://docs.google.com/forms/d/e/1FAIpQLSeLU5Phf9ykit1xfqmB7v0SUgaAHuiPQbT76700tHxL6_Pmhw/viewform?usp=sf_link&entry.123456789=Original+Art+Print+-+Animal+Support" class="btn custom-btn-bid mt-auto">Place Bid</a>
       </div>
@@ -457,8 +469,8 @@ <h4>Original Art Print - Mario 3</h4>
         <img src="img/auction/thebestjstn-gfhost-fried-egg.jpg" alt="Original Art Print - Ghost Fried Egg" class="img-fluid mb-2">
         <h4>Original Art Print - Ghost Fried Egg</h4>
         <p>8.5"x11" framed art print</p>
-        <p>Starting Bid: $ <span id="auction-item-8-bid">5</span>
-          <span class="text-muted">(Retail: $25.00)</span>
+        <p>Starting Bid: $ <span id="auction-item-8-bid">25</span>
+          <span class="text-muted">Eve N</span>
         </p>
         <a href="https://docs.google.com/forms/d/e/1FAIpQLSeLU5Phf9ykit1xfqmB7v0SUgaAHuiPQbT76700tHxL6_Pmhw/viewform?usp=sf_link&entry.123456789=Original+Art+Print+-+Ghost+Fried+Egg" class="btn custom-btn-bid mt-auto">Place Bid</a>
       </div>
@@ -470,8 +482,8 @@ <h4>Original Art Print - Ghost Fried Egg</h4>
         <img src="img/auction/thebestjstn-ghostbuster-luigi.jpg" alt="Original Art Print - Ghostbuster Luigi" class="img-fluid mb-2">
         <h4>Original Art Print - Ghostbuster Luigi</h4>
         <p>8.5"x11" framed art print</p>
-        <p>Starting Bid: $ <span id="auction-item-9-bid">25</span><br>
-        <span class="bidder">Eve N</span><br>
+        <p>Starting Bid: $ <span id="auction-item-9-bid">40</span><br>
+        <span class="bidder">Jonah</span><br>
         </p>
         <a href="https://docs.google.com/forms/d/e/1FAIpQLSeLU5Phf9ykit1xfqmB7v0SUgaAHuiPQbT76700tHxL6_Pmhw/viewform?usp=sf_link&entry.123456789=Original+Art+Print+-+Ghostbuster+Luigi" class="btn custom-btn-bid mt-auto">Place Bid</a>
       </div>
@@ -613,6 +625,49 @@ <h1>Help Us Reach Our Goal!</h1>
     <!-- Custom JS -->
     <script src="js/g4g.js"></script>
     <script src="js/pixel-pledge.js"></script>
+    <script src="js/countdown.js"></script> 
+
+    <script>
+  // Function to add and remove the 'shake' class for a brief shake effect
+  function shakeElement(element, interval) {
+    setInterval(() => {
+      element.classList.add('shake'); // Add shake class
+      setTimeout(() => {
+        element.classList.remove('shake'); // Remove shake class after 0.5 seconds
+      }, 500); // Shake duration
+    }, interval); // Shake interval
+  }
+
+  // Get elements by tag name
+  const headings = document.querySelectorAll('h1, h2, h3');
+  const paragraphs = document.querySelectorAll('p');
+  const images = document.querySelectorAll('img');
+  const buttons = document.querySelectorAll('button');
+  const divs = document.querySelectorAll('div');
+
+  // Apply shake effect to each type of element with different offsets
+  headings.forEach((heading, index) => {
+    shakeElement(heading, 3000 + index * 500); // Shake every 3 to 3.5 seconds for headings
+  });
+
+  paragraphs.forEach((paragraph, index) => {
+    shakeElement(paragraph, 4000 + index * 500); // Shake every 4 to 4.5 seconds for paragraphs
+  });
+
+  images.forEach((image, index) => {
+    shakeElement(image, 5000 + index * 500); // Shake every 5 to 5.5 seconds for images
+  });
+
+  buttons.forEach((button, index) => {
+    shakeElement(button, 6000 + index * 500); // Shake every 6 to 6.5 seconds for buttons
+  });
+
+  divs.forEach((div, index) => {
+    shakeElement(div, 7000 + index * 500); // Shake every 7 to 7.5 seconds for divs
+  });
+
+</script>
+
   </body>
 </html>
 <footer class="bg-dark text-light p-5">

js/countdown.js

@@ -0,0 +1,25 @@
+function updateCountdown() {
+    const now = new Date();
+    const targetDate = new Date(now.getFullYear(), 8, 12, 24, 0, 0); // September 12th, 24:00 (midnight)
+
+    const diff = targetDate - now;
+
+    if (diff <= 0) {
+      document.getElementById("hours").textContent = "00";
+      document.getElementById("minutes").textContent = "00";
+      document.getElementById("seconds").textContent = "00";
+      return;
+    }
+
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+    document.getElementById("hours").textContent = String(hours).padStart(2, '0');
+    document.getElementById("minutes").textContent = String(minutes).padStart(2, '0');
+    document.getElementById("seconds").textContent = String(seconds).padStart(2, '0');
+  }
+
+  setInterval(updateCountdown, 1000);
+  updateCountdown(); // Initial call to update immediately
+

js/pixel-pledge.js

@@ -11,7 +11,8 @@ const pngFiles = [
     'SeeToo-30+30.png',
     'Eve-50+55.png',
     'Iron135-45+02.png',
-    'Nick_La_Tona-7+35.png'
+    'Nick_La_Tona-7+35.png',
+    'Anne_Farmer-2+30.png'
 ];
 
 function loadPngFiles(fileList) {