fixed annoucement issue #7

devstygian · devstygian · commit dabd6cf5704e · 2025-11-13T19:39:28.000+08:00
diff --git a/assets/css/home.css b/assets/css/home.css
@@ -419,64 +419,4 @@ main{padding-top:72px}
   }
   .hero-inner{padding:32px 20px}
   .logo img{width:48px;height:48px}
-}
-
-/* Login modal styles */
-.modal{
-  /* works for both fallback overlay (div) and native <dialog> element */
-  position:fixed;
-  inset:0;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  background:rgba(2,6,23,0.45);
-  opacity:0;
-  pointer-events:none;
-  transition:opacity 220ms ease;
-  z-index:1200;
-}
-.modal.open,
-.modal[open]{
-  /* [open] is the attribute set on <dialog> when shown */
-  opacity:1;
-  pointer-events:auto;
-}
-.modal-dialog{
-  position:relative;
-  background:var(--card);
-  border-radius:12px;
-  padding:22px;
-  width:100%;
-  max-width:420px;
-  box-shadow:0 20px 40px rgba(2,6,23,0.18);
-  transform:translateY(0);
-}
-.modal {
-  /* Remove default dialog chrome when using <dialog> in supporting browsers */
-  background: rgba(2,6,23,0.45);
-}
-dialog.modal{
-  border: none;
-  padding: 0;
-  background: transparent;
-}
-.modal h3{margin:0 0 12px}
-.modal .modal-close{
-  position:absolute;
-  top:10px;
-  right:10px;
-  background:transparent;
-  border:0;
-  font-size:22px;
-  line-height:1;
-  cursor:pointer;
-}
-.login-form label{display:block;margin-bottom:12px;font-size:14px;color:var(--muted)}
-.login-form input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #E6E9EE;font-size:14px;margin-top:6px;background:#fff}
-.login-form .form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
-.btn-secondary{background:transparent;border:1px solid #E6E9EF;padding:10px 14px;border-radius:8px}
-
-.login-form a {
-  text-decoration: none !important;
-  color: inherit;
-}
+}
diff --git a/assets/js/home.js b/assets/js/home.js
@@ -17,48 +17,3 @@ function toggleAboutDescription() {
     }
   }
 
-  // Carousel functionality
-function initCarousel() {
-  const carousel = document.querySelector('.carousel');
-  if (!carousel) return;
-
-  const slides = carousel.querySelectorAll('.carousel-slide');
-  const dots = carousel.querySelectorAll('.dot');
-  let currentSlide = 0;
-  let autoplayInterval;
-
-  function showSlide(index) {
-    slides.forEach(slide => {
-      slide.classList.remove('active');
-      slide.style.transform = '';
-    });
-    dots.forEach(dot => {
-      dot.classList.remove('active');
-      dot.setAttribute('aria-selected', 'false');
-    });
-
-    slides[index].classList.add('active');
-    dots[index].classList.add('active');
-    dots[index].setAttribute('aria-selected', 'true');
-    currentSlide = index;
-  }
-
-  function nextSlide() {
-    showSlide((currentSlide + 1) % slides.length);
-  }
-
-  function prevSlide() {
-    showSlide((currentSlide - 1 + slides.length) % slides.length);
-  }
-
-  function startAutoplay() {
-    stopAutoplay();
-    autoplayInterval = setInterval(nextSlide, 5000); // Change slide every 5 seconds
-  }
-
-  function stopAutoplay() {
-    if (autoplayInterval) {
-      clearInterval(autoplayInterval);
-    }
-  }
-}
diff --git a/home.php b/home.php
@@ -5,12 +5,10 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>Saklaw</title>
-
-  <!-- Google Font -->
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
   <script src="https://kit.fontawesome.com/f02a36f28e.js" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="./assets/css/home.css">
-   <script src="../Saklaw/assets/js/home.js"></script>
+  <script src="../Saklaw/assets/js/home.js"></script>
 </head>
 <body>
   <header class="site-header">
@@ -113,7 +111,7 @@
         <h2 class="section-title">Announcements</h2>
         <div class="carousel">
           <div class="carousel-inner">
-            <a class="carousel-slide">
+            <a class="carousel-slide active">
               <h4>Barangay Clean-Up Drive</h4>
               <p>Our scheduled clean-up drive will be on September 20. Join us at 7:00 AM at the community center.</p>
               <time datetime="2025-09-20">Sep 20, 2025</time>
@@ -140,6 +138,25 @@
         </div>
       </div>
     </section>
+    <<script>
+      const slides = document.querySelectorAll('.carousel-slide');
+      const dots = document.querySelectorAll('.dot');
+      let current = 0;
+
+      function showSlide(index) {
+        slides.forEach((slide, i) => slide.classList.toggle('active', i === index));
+        dots.forEach((dot, i) => dot.classList.toggle('active', i === index));
+        current = index;
+      }
+
+      // Auto-rotate every 5 seconds
+      setInterval(() => {
+        showSlide((current + 1) % slides.length);
+      }, 5000);
+
+      // Dot click navigation
+      dots.forEach((dot, i) => dot.addEventListener('click', () => showSlide(i)));
+    </script>
 
 <!--About-->
     <section id="about" class="section about-section">
@@ -188,21 +205,7 @@
         </div>
       </div>
     </section>
-  </main>
-
-<!-- Google AdSense -->
-  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6318920818085530"
-      crossorigin="anonymous"></script>
-  <!-- first-ads -->
-  <ins class="adsbygoogle"
-      style="display:block"
-      data-ad-client="ca-pub-6318920818085530"
-      data-ad-slot="4856050510"
-      data-ad-format="auto"
-      data-full-width-responsive="true"></ins>
-  <script>
-      (adsbygoogle = window.adsbygoogle || []).push({});
-  </script>
+  </main>   
 
   <footer class="site-footer">
     <div class="wrap footer-inner">
