Initial Commit

webcrawlersdev · Oct 9, 2023 · 4eba3d6 · 4eba3d6
1 parent b8093b8
commit 4eba3d6
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 119 deletions.
diff --git a/.htaccess b/.htaccess
@@ -1 +1,2 @@
-ErrorDocument 404 /lgu/404.php
+ErrorDocument 404 http://localhost/lgu
+ErrorDocument 403 http://localhost/lgu
diff --git a/css/main.css b/css/main.css
@@ -213,8 +213,8 @@ nav {
 footer {
     box-shadow: 0 0 5em rgba(0, 0, 0, .10);
     background: var(--background-color);
-    padding-left: 15%;
-    padding-right: 15%;
+    padding-left: 7%;
+    padding-right: 7%;
     padding-top: 5%;
     padding-bottom: 2%;
 }
@@ -494,31 +494,46 @@ input[type=date]:focus::-webkit-datetime-edit {
     transform: scaleY(0);
     transform-origin: top;
     transition: all 0.3s ease-in-out;
-  }
+}
 
-  .dropdown>.btn.show+.dropdown-menu {
+.dropdown>.btn.show+.dropdown-menu {
     display: inherit;
-    transform: scaleY(1);        
-  }
+    transform: scaleY(1);
+}
+
+@media only screen and (max-device-width: 480px) {
 
-  @media only screen and (max-device-width: 480px) {
-
     .navbar-brand {
-        float:none !important;
+        float: none !important;
     }
+
     .img-responsive {
-        margin:0 auto !important;
-        display:block !important;
+        margin: 0 auto !important;
+        display: block !important;
     }
 }
 
 @media (min-width:535px) {
 
-div.dropdown-multicol2{
-    width: 30em;
-  }
-  div.dropdown-multicol2>div.dropdown-col{
-    display:inline-block;
-    width: 32%;
-  }
+    div.dropdown-multicol2 {
+        width: 30em;
+    }
+
+    div.dropdown-multicol2>div.dropdown-col {
+        display: inline-block;
+        width: 32%;
+    }
+}
+
+.form-check-input {
+    margin-top: 0px;
+}
+
+.form-switch .form-check-input {
+    width: 2.5em;
+}
+
+div label {
+    margin-top: 0px;
+    margin-left: 10px;
 }
diff --git a/include/footer.php b/include/footer.php
@@ -1,7 +1,7 @@
-<footer class="mt-auto">
+<footer class="mt-5">
   <div class="container">
     <div class="row footer-row">
-      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-xs-12">
+      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
         <h5>Digital Barangay</h5>
         <p>Republic of the Philippines</p>
         <ul class="nav flex-column">
@@ -16,7 +16,7 @@
           </li>
         </ul>
       </div>
-      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-xs-12">
+      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
         <!-- HEADS UP 
 
         Most of the government sites are hosted in .gov.ph domain including local government units.
@@ -36,7 +36,7 @@
           </li>
         </ul>
       </div>
-      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-xs-12">
+      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
         <h5>Government Link</h5>
         <ul class="nav flex-column">
           <li class="nav-item">
@@ -62,6 +62,10 @@
           </li>
         </ul>
       </div>
+      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
+        <div class="form-check form-switch" id="themeswitch">
+        </div>
+      </div>
     </div>
     <br>
     <a href="#" class="px-1" target="_blank">

diff --git a/include/nav.php b/include/nav.php
@@ -1,10 +1,12 @@
 <nav class="autohide navbar navbar-expand-lg fixed-top scrolled-up scrolled-up-tr">
     <div class="container-fluid">
-  
+
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation" id="qwe111">
             <span class="navbar-toggler-icon" id="qwe"></span>
         </button>
-        <a class="navbar-brand " href="#"><img class="img-responsive" id="toplink" width="60"></a>
+        <a class="navbar-brand " href="#">
+            <img class="img-responsive" id="toplink" width="60">
+        </a>
         <div class="collapse navbar-collapse" id="navbarText">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item">
@@ -15,66 +17,43 @@
                 </li>
                 <li class="nav-item dropdown">
                     <a class="nav-link btn dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                       Module
+                        Module
                     </a>
                     <div class="dropdown-menu dropdown-multicol2" aria-labelledby="dropdownMenuButton">
-    <div class="dropdown-col">
-      <a class="dropdown-item" href="#">Module 1</a>
-      <a class="dropdown-item" href="#">Module 2</a>
-      <a class="dropdown-item" href="#">Module 3</a>
-      <a class="dropdown-item" href="#">Module 4</a>
-      <a class="dropdown-item" href="#">Module 5</a>
-      <a class="dropdown-item" href="#">Module 6</a>
-    </div>
-    <div class="dropdown-col">
-    <a class="dropdown-item" href="#">Module 7</a>
-      <a class="dropdown-item" href="#">Module 8</a>
-      <a class="dropdown-item" href="#">Module 9</a>
-      <a class="dropdown-item" href="#">Module 10</a>
-      <a class="dropdown-item" href="#">Module 11</a>
-      <a class="dropdown-item" href="#">Module 12</a>
-    </div>
-    <div class="dropdown-col">
-    <a class="dropdown-item" href="#">Module 13</a>
-      <a class="dropdown-item" href="#">Module 14</a>
-      <a class="dropdown-item" href="#">Module 15</a>
-      <a class="dropdown-item" href="#">Module 16</a>
-      <a class="dropdown-item" href="#">Module 17</a>
-      <a class="dropdown-item" href="#">Module 18</a>
-    </div>
-    <div class="dropdown-col">
-    <a class="dropdown-item" href="#">Module 19</a>
-    </div>
-  </div>
-                    <!--
-                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                        <a class="dropdown-item" href="#">Module 1</a>
-                        <a class="dropdown-item" href="#">Module 2</a>
-                        <a class="dropdown-item" href="#">Module 3</a>
-                        <a class="dropdown-item" href="#">Module 4</a>
-                        <a class="dropdown-item" href="#">Module 5</a>
-                        <a class="dropdown-item" href="#">Module 6</a>
-                        <a class="dropdown-item" href="#">Module 7</a>
-                        <a class="dropdown-item" href="#">Module 8</a>
-                        <a class="dropdown-item" href="#">Module 9</a>
-                        <a class="dropdown-item" href="#">Module 10</a>
-                        <a class="dropdown-item" href="#">Module 11</a>
-                        <a class="dropdown-item" href="#">Module 12</a>
-                        <a class="dropdown-item" href="#">Module 13</a>
-                        <a class="dropdown-item" href="#">Module 14</a>
-                        <a class="dropdown-item" href="#">Module 15</a>
-                        <a class="dropdown-item" href="#">Module 16</a>
-                        <a class="dropdown-item" href="#">Module 17</a>
-                        <a class="dropdown-item" href="#">Module 18</a>
-                        <a class="dropdown-item" href="#">Module 19</a>
-                    </ul>
--->
+                        <div class="dropdown-col">
+                            <a class="dropdown-item" href="#">Module 1</a>
+                            <a class="dropdown-item" href="#">Module 2</a>
+                            <a class="dropdown-item" href="#">Module 3</a>
+                            <a class="dropdown-item" href="#">Module 4</a>
+                            <a class="dropdown-item" href="#">Module 5</a>
+                            <a class="dropdown-item" href="#">Module 6</a>
+                        </div>
+                        <div class="dropdown-col">
+                            <a class="dropdown-item" href="#">Module 7</a>
+                            <a class="dropdown-item" href="#">Module 8</a>
+                            <a class="dropdown-item" href="#">Module 9</a>
+                            <a class="dropdown-item" href="#">Module 10</a>
+                            <a class="dropdown-item" href="#">Module 11</a>
+                            <a class="dropdown-item" href="#">Module 12</a>
+                        </div>
+                        <div class="dropdown-col">
+                            <a class="dropdown-item" href="#">Module 13</a>
+                            <a class="dropdown-item" href="#">Module 14</a>
+                            <a class="dropdown-item" href="#">Module 15</a>
+                            <a class="dropdown-item" href="#">Module 16</a>
+                            <a class="dropdown-item" href="#">Module 17</a>
+                            <a class="dropdown-item" href="#">Module 18</a>
+                        </div>
+                        <div class="dropdown-col">
+                            <a class="dropdown-item" href="#">Module 19</a>
+                        </div>
+                    </div>
                 </li>
             </ul>
         </div>
         <div>
-            <ul class="nav navbar-nav" id="rightSide" style="flex-direction: row;">
-               
+            <ul class="nav navbar-nav" style="flex-direction: row;">
+
                 <li class="nav-item">
                     <a class="nav-link" href="#">
                         <span class="text sec px-2">Search</span>

diff --git a/index.php b/index.php
@@ -23,23 +23,22 @@
     <div class="card mb-3">
       <div class="row g-0">
         <div class="col-md-4" id="mobile">
-          <img class="rounded mx-auto d-block img-fluid"
+          <img class="rounded mx-auto d-block img-fluid shadow"
             src="images/cover.png">
         </div>
         <div class="col-md-8">
           <div class="card-body">
-            <h5 style="color: #4285f4;">Quezon City</h5>
+            <h5 style="color: #4285f4;">Welcome to</h5>
             <h1 class="card-title"><strong>Digital Barangay</strong></h1>
             <p class="card-text sub-title">
               A proposed Local Government Unit Management<br>System Project</p>
               <br>
-              <button type="button" class="btn btn-primary" >Learn more</button>
-            <a class="accnt px-3"> Procurement
-            </a>
+              <button type="button" class="btn btn-primary shadow">Learn more</button>
+            <a class="accnt px-3">Procurement</a>
           </div>
         </div>
         <div class="col-md-4" id="desktop">
-          <img class="rounded mx-auto d-block img-fluid"
+          <img class="rounded mx-auto d-block img-fluid shadow"
             src="images/cover.png">
         </div>
       </div>
@@ -48,11 +47,7 @@
   </header>
 
     <main class="text-center">
-        This is a test
 
-        <h1 style="font-family: Maven Pro;">This is a maven pro font</h1>
-        <h1 style="font-family: Source Code Pro;">This is a source code pro font</h1>
-        <p>A paragraph</p>
 
     </main>
 

diff --git a/js/main.js b/js/main.js
@@ -74,28 +74,6 @@ window.addEventListener("DOMContentLoaded", () => {
     }
 });
 
-/*
-* THEME CONTROLS
-*/
-var light = '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>';
-var dark = '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>';
-
-
-let secondNavBar = document.getElementById("rightSide");
-let navItem = document.createElement("li");
-navItem.setAttribute("class", "nav-item");
-let navLink = document.createElement("a");
-navLink.setAttribute("class", "nav-link");
-navLink.setAttribute("href", "#theme");
-
-let spanText = document.createElement("span");
-spanText.setAttribute("class", "text");
-spanText.setAttribute("id", "theme");
-spanText.innerHTML = light;
-navLink.append(spanText);
-
-navItem.append(navLink);
-secondNavBar.append(navItem);
 
 const queryString = window.location.search
 const urlParams = new URLSearchParams(queryString);
@@ -105,16 +83,36 @@ if (rdr != null) {
     window.location.href = rdr + "?utm_source=" + btoa(window.location);
 }
 
+/*
+* THEME CONTROLS
+*/
+
+let themeswitch = document.getElementById("themeswitch");
+let input = document.createElement("input");
+input.setAttribute("class", "form-check-input");
+input.setAttribute("type", "checkbox");
+input.setAttribute("role", "switch");
+input.setAttribute("id", "theme");
+themeswitch.append(input);
+let label = document.createElement("label");
+label.setAttribute("class", "form-check-label");
+label.setAttribute("for", "theme");
+label.setAttribute("id", "themelabel");
+themeswitch.append(label);
+
 const currentTheme = localStorage.getItem("theme");
-if (currentTheme == "dark" && !window.matchMedia("(prefers-color-scheme: dark)").matches) {
+if (currentTheme == "dark" || window.matchMedia("(prefers-color-scheme: dark)").matches) {
   document.body.classList.toggle("dark-mode");
-  spanText.innerHTML = light;
+  label.innerHTML = "Dark Theme";
+  input.setAttribute("checked", null);
 } else if (currentTheme == "light") {
   document.body.classList.toggle("light-mode");
-  spanText.innerHTML = dark;
+  label.innerHTML = "Light Theme";
+} else {
+    alert(currentTheme)
 }
 
-spanText.addEventListener("click", function() {
+input.addEventListener("click", function() {
   if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
     document.body.classList.toggle("light-mode");
     var theme = document.body.classList.contains("light-mode") ? "light" : "dark";
@@ -123,11 +121,9 @@ spanText.addEventListener("click", function() {
     var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";
   }
   if (theme == "dark") {
-    spanText.innerHTML = light;
-    spanText.title = "Switch to light mode";
+    label.innerHTML = "Dark Theme";
   } else {
-    spanText.innerHTML = dark;
-    spanText.title = "Switch to dark mode";
+    label.innerHTML = "Light Theme";
   }
   localStorage.setItem("theme", theme);
 });