Add headers/footers, htaccess.

PixelsetDev · Jun 11, 2024 · 69c1367 · 69c1367
1 parent d627d07
commit 69c1367
Show file tree

Hide file tree

Showing 10 changed files with 255 additions and 7 deletions.
diff --git a/.htaccess b/.htaccess
@@ -0,0 +1,3 @@
+RewriteEngine On
+RewriteCond %{REQUEST_URI}  !(\.png|\.jpg|\.webp|\.gif|\.jpeg|\.zip|\.css|\.svg|\.js|\.pdf)$
+RewriteRule (.*) index.php [QSA,L]
diff --git a/Assets/CSS/Dev.css b/Assets/CSS/Dev.css
@@ -4,12 +4,24 @@
 @tailwind components;
 @tailwind utilities;
 
+header:not(.nobg) { @apply bg-amber-500; }
 header {
-    @apply bg-yellow-500 text-white text-center font-black;
+    @apply text-white text-center font-black;
     @apply lg:py-24 md:py-16 sm:py-8 py-4;
     @apply lg:px-16 md:px-8 sm:px-4 px-2;
 }
 
+nav {
+    @apply flex space-x-4 py-2;
+    @apply lg:px-16 md:px-8 sm:px-4 px-2;
+}
+
+footer {
+    @apply text-center txt-xs;
+    @apply lg:py-8 md:py-6 sm:py-4 py-2;
+    @apply lg:px-16 md:px-8 sm:px-4 px-2;
+}
+
 main {
     @apply lg:py-24 md:py-16 sm:py-8 py-4;
     @apply lg:px-16 md:px-8 sm:px-6 px-4;
@@ -40,6 +52,6 @@ label { @apply txt-xs; }
     @apply lg:px-6 md:px-5 sm:px-4 px-3;
 }
 
-.card-yellow { @apply card bg-yellow-500 hover:bg-yellow-400 text-white font-bold; }
+.card-yellow { @apply card bg-amber-500 hover:bg-amber-400 text-white font-bold; }
 
 .req { @apply text-red-500; }
diff --git a/Assets/CSS/Dist.css b/Assets/CSS/Dist.css
@@ -556,22 +556,65 @@ video {
   --tw-contain-style:  ;
 }
 
+.static{
+  position: static;
+}
+
+.fixed{
+  position: fixed;
+}
+
+.absolute{
+  position: absolute;
+}
+
+.relative{
+  position: relative;
+}
+
 .col-span-1{
   grid-column: span 1 / span 1;
 }
 
+.table{
+  display: table;
+}
+
 .grid{
   display: grid;
 }
 
+.contents{
+  display: contents;
+}
+
 .hidden{
   display: none;
 }
 
+.flex-grow{
+  flex-grow: 1;
+}
+
 .gap-4{
   gap: 1rem;
 }
 
+.truncate{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rounded{
+  border-radius: 0.25rem;
+}
+
+.bg-red-500{
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .text-center{
   text-align: center;
 }
@@ -581,13 +624,37 @@ video {
   line-height: 1rem;
 }
 
+.font-black{
+  font-weight: 900;
+}
+
+.uppercase{
+  text-transform: uppercase;
+}
+
+.lowercase{
+  text-transform: lowercase;
+}
+
 .italic{
   font-style: italic;
 }
 
-header{
+.invert{
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.filter{
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+header:not(.nobg){
   --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
+}
+
+header{
   text-align: center;
   font-weight: 900;
   --tw-text-opacity: 1;
@@ -643,6 +710,123 @@ header{
   }
 }
 
+nav{
+  display: flex;
+}
+
+nav > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+nav{
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+@media (min-width: 640px){
+  nav{
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+@media (min-width: 768px){
+  nav{
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1024px){
+  nav{
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+
+footer{
+  text-align: center;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@media (min-width: 640px){
+  footer{
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 768px){
+  footer{
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px){
+  footer{
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
+
+footer{
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+@media (min-width: 640px){
+  footer{
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
+@media (min-width: 768px){
+  footer{
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px){
+  footer{
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}
+
+footer{
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+@media (min-width: 640px){
+  footer{
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+@media (min-width: 768px){
+  footer{
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1024px){
+  footer{
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+
 main{
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1081,7 +1265,7 @@ label{
 
 .card-yellow{
   --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
   font-weight: 700;
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1144,7 +1328,7 @@ label{
 
 .card-yellow:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+  background-color: rgb(251 191 36 / var(--tw-bg-opacity));
 }
 
 .req{

diff --git a/Views/404.php b/Views/404.php
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Page not Found - <?= WEBSITE_NAME; ?></title>
+        <link rel="stylesheet" href="/Assets/CSS/Font.css" type="text/css">
+        <link rel="stylesheet" href="/Assets/CSS/Dist.css" type="text/css">
+    </head>
+    <body>
+        <?php require_once __DIR__ . "/Include/Nav.php"; ?>
+
+        <header class="bg-red-500 nobg">
+            <h1>Page not Found</h1>
+        </header>
+
+        <main>
+            <p class="text-center">
+                The requested page or resource could not be found.
+            </p>
+        </main>
+
+        <?php require_once __DIR__ . "/Include/Footer.php"; ?>
+    </body>
+</html>
diff --git a/Views/Homepage.php b/Views/Homepage.php
@@ -6,9 +6,12 @@
         <link rel="stylesheet" href="/Assets/CSS/Dist.css" type="text/css">
     </head>
     <body>
+        <?php require_once __DIR__ . "/Include/Nav.php"; ?>
+
         <header>
             <h1><?= WEBSITE_NAME; ?></h1>
         </header>
+
         <main>
             <p class="text-center">
                 Welcome to <?= WEBSITE_NAME; ?>'s HR Portal. Please select an option below to get started.
@@ -29,5 +32,7 @@
                 <?= file_get_contents(__DIR__ . '/../Content/Text/ABOUT.txt'); ?>
             </p>
         </main>
+
+        <?php require_once __DIR__ . "/Include/Footer.php"; ?>
     </body>
 </html>
diff --git a/Views/Include/Footer.php b/Views/Include/Footer.php
@@ -0,0 +1,3 @@
+<footer>
+    &copy; 2024 - <?= date("Y"); ?> <?= WEBSITE_NAME; ?> - Powered by PeopleHive
+</footer>
diff --git a/Views/Include/Nav.php b/Views/Include/Nav.php
@@ -0,0 +1,6 @@
+<nav>
+    <p class="font-black flex-grow"><?= WEBSITE_NAME; ?></p>
+    <a href="/jobs">Jobs</a>
+    <a href="/login">Login</a>
+    <a href="/register">Register</a>
+</nav>
diff --git a/Views/Login.php b/Views/Login.php
@@ -6,9 +6,12 @@
         <link rel="stylesheet" href="/Assets/CSS/Dist.css" type="text/css">
     </head>
     <body>
+        <?php require_once __DIR__ . "/Include/Nav.php"; ?>
+
         <header>
             <h1>Login</h1>
         </header>
+
         <main>
             <form action="/auth/login" method="POST" class="grid gap-4">
                 <div class="grid">
@@ -24,5 +27,7 @@
                 <input type="submit" value="Login">
             </form>
         </main>
+
+        <?php require_once __DIR__ . "/Include/Footer.php"; ?>
     </body>
 </html>
diff --git a/Views/Register.php b/Views/Register.php
@@ -6,9 +6,12 @@
         <link rel="stylesheet" href="/Assets/CSS/Dist.css" type="text/css">
     </head>
     <body>
+        <?php require_once __DIR__ . "/Include/Nav.php"; ?>
+
         <header>
             <h1>Register</h1>
         </header>
+
         <main>
             <form action="/auth/register" method="POST" class="grid gap-4">
                 <h3>Your information</h3>
@@ -104,5 +107,7 @@
                 <input type="submit" value="Login">
             </form>
         </main>
+
+        <?php require_once __DIR__ . "/Include/Footer.php"; ?>
     </body>
 </html>