Started working on text for home page

header.php

@@ -1,45 +1,97 @@
 <?php
 session_start();
 ?>
-<nav class="flex items-center justify-between flex-wrap bg-gray-500 p-6 shadow-lg shadow-black/50 sticky top-0"> <!--dark:bg-black-->
+<nav class="flex items-center lg:justify-between sm:justify-center flex-wrap bg-gray-500 p-6 shadow-lg shadow-black/50 sticky top-4 opacity-100 mb-24"> <!--dark:bg-black-->
-    <div class="flex items-center flex-shrink-0 text-white mr-6">
+      <div class="block lg:hidden cursor-pointer flex:none mr-4" id="HamburgerInactive">
+        <button id="btn" class="flex flex-col items-center px-3 py-[0.4375rem] border rounded text-teal-200 border-teal-400">
+          <span class="block h-0.5 w-5 mb-1 origin-center rounded-full bg-teal-200"></span>
+          <span class="block h-0.5 w-5 mb-1 origin-center rounded-full bg-teal-200"></span>
+          <span class="block h-0.5 w-5 origin-center rounded-full bg-teal-200"></span>
+        </button>
+      </div>
+      <div id="HamburgerActive" class="hidden lg:hidden flex:none cursor-pointer mr-4 block">
+        <button class="space-y-2 px-3 py-2 border rounded text-teal-200 border-teal-400" >
+          <span class="block h-0.5 w-5 origin-center rounded-full bg-teal-200 translate-y-1.5 rotate-45"></span>
+          <span class="block h-0.5 w-5 origin-center rounded-full bg-teal-200 -translate-y-1 -rotate-45"></span>
+          <span class="hidden h-0.5 w-5 origin-center rounded-full bg-white"></span>
+        </button>
+      </div>
+      <div class="flex items-center flex-shrink-0 text-white mr-6 w-full lg:w-auto flex-1 lg:flex-none justify-center">
         <svg id="logo" class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
         <span class="font-semibold text-xl tracking-tight">G-Link</span>
-    </div>
+      </div>
-    <div class="block lg:hidden">
+      <div id="menu-options" class="bg-gray-500 w-full lg:block flex-grow lg:flex lg:items-center lg:w-auto hidden mr-4">
-        <button id="hamburger-menu" class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
-            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
-        </button>
-    </div>
-    <div id="menu-options" class="w-full lg:block flex-grow lg:flex lg:items-center lg:w-auto hidden">
         <div class="text-sm lg:flex-grow">
-            <a href="#head" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-black mr-4 hover:bg-gray-200 hover:border hover:border-gray-200 hover:rounded text-teal-200 py-1 px-3">
+          <a href="#head" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-black mr-4 hover:bg-gray-200 hover:border hover:border-gray-200 hover:rounded text-teal-200 py-1 px-3">
-                A
+            A
-            </a>
+          </a>
-            <a href="#head" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-black mr-4 hover:bg-gray-200 hover:border hover:border-gray-200 hover:rounded text-teal-200 py-1 px-3">
+          <a href="#head" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-black mr-4 hover:bg-gray-200 hover:border hover:border-gray-200 hover:rounded text-teal-200 py-1 px-3">
-                B
+            B
-            </a>
+          </a>
-            <a href="#head" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-black mr-4 hover:bg-gray-200 hover:border hover:border-gray-200 hover:rounded text-teal-200 py-1 px-3">
+          <a href="#head" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-black mr-4 hover:bg-gray-200 hover:border hover:border-gray-200 hover:rounded text-teal-200 py-1 px-3">
-                C
+            C
-            </a>
+          </a>
-            <a href="/index.html" class="block mt-4 lg:inline-block lg:mt-0 bg-blue-600 brightness-125 border border-blue-500 rounded text-teal-200 hover:text-black py-1 px-3">
+          <a href="/" class="block mt-4 lg:inline-block lg:mt-0 bg-blue-600 brightness-125 border border-blue-500 rounded text-teal-200 hover:text-black py-1 px-3">
-                Products (Form)
+            Products (Form)
-            </a>
+          </a>
         </div>
-        <div>
-	    <?php if (isset($_SESSION['user'])) { ?>
-		        <a href="logout.php" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
-                		Log Out
-		        </a>
-	    <?php } ?>
-        </div>
-    </div>
-    <script>
-        menu = document.querySelector("#hamburger-menu");
-        options = document.querySelector("#menu-options");
-        menu.addEventListener("click", () => {
-            options.classList.toggle("hidden");
-        })
 
-    </script>
+	<?php if (!isset($_SESSION['user'])) { ?>
+        <div>
+          <a href="signup.html" class="inline-block <%= signup %> text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0 mr-4">
+            Sign up
+          </a>
+        </div>
+	<?php } ?>
+
+        <?php if (!isset($_SESSION['user'])) { ?>
+        <div>
+          <a href="login.html" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
+            Log in
+          </a>
+        </div>
+	<?php } else {?>
+        <div>
+          <a href="logout.php" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
+            Log out
+          </a>
+        </div>
+	<?php } ?>
+
+      </div>
+      <div class="w-9 h-9 rounded-full bg-emerald-800 cursor-pointer outline outline-offset-2 outline-4 outline-white hover:bg-emerald-700">
+        <button class="w-full h-full bg-white rounded-full" id="dropdownDefaultButton" data-dropdown-toggle="dropdown">
+
+        </button>
+      </div>
+      <div class="relative">
+        <button dropdown-trigger aria-expanded="false" type="button" class="inline-block px-6 py-3 mr-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl from-purple-700 to-pink-500 leading-pro text-sm ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 hover:scale-102 active:opacity-85 hover:shadow-soft-xs">Dropdown</button>
+        <p class="hidden transform-dropdown-show"></p>
+        <ul dropdown-menu class="z-10 text-sm lg:shadow-soft-3xl duration-250 before:duration-350 before:font-awesome before:ease-soft min-w-44 before:text-5.5 transform-dropdown pointer-events-none absolute left-auto top-1/2 m-0 -mr-4 mt-2 list-none rounded-lg border-0 border-solid border-transparent bg-white bg-clip-padding px-0 py-2 text-left text-slate-500 opacity-0 transition-all before:absolute before:right-7 before:left-auto before:top-0 before:z-40 before:text-white before:transition-all before:content-['\f0d8']">
+          <li>
+            <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Action</a>
+          </li>
+          <li>
+            <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Another action</a>
+          </li>
+          <li>
+            <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Something else here</a>
+          </li>
+        </ul>
+      </div>
+      <script>
+        let active = document.getElementById("HamburgerActive");
+        let inactive = document.getElementById("HamburgerInactive");
+        let options = document.querySelector("#menu-options");
+        active.addEventListener("click", ()=>{
+          active.classList.add("hidden");
+          inactive.classList.remove("hidden");
+          options.classList.toggle("hidden");
+        })
+        inactive.addEventListener("mouseup", ()=>{
+          inactive.classList.add("hidden");
+          active.classList.remove("hidden");
+          options.classList.toggle("hidden");
+        });
+      </script>
 </nav>

home.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Home</title>
+  <link rel="stylesheet" href="output.css">
+</head>
+<body style="margin-left: 192px; margin-right: 192px;">
+  <main class="m-10 h-auto w-auto">
+
+	<?php include 'header.php';?>
+
+    <div class="flex lg:flex-row flex-col w-full mb-24 justify-center items-center">
+      <div class="h-96 lg:w-auto sm:w-full flex flex-col flex-grow">
+        <div class="w-full flex items-center justify-center mb-6 border-8 border-black">
+          <h1 class="text-4xl md:text-5xl lg:text-6xl">Create and share geo-restricted links</h1>
+        </div>
+        <div class="h-72 w-full flex items-center justify-center text-2xl border-8 border-black">
+          <p>
+            GLinkZip enables you to generate and distribute geo-restricted URLs for private, secure access.
+          </p>
+        </div>
+      </div>
+      <video autoplay>
+	<source src="homepagevideo.mp4" type="video/mp4">
+      </video>
+    </div>
+    <div class="flex lg:flex-col h-auto flex-col w-full mb-24 border-8 border-black">
+      <div class="w-full justify-center items-center flex border-8 border-black">
+        <p class="text-4xl md:text-5xl lg:text-6xl">
+          How it works
+        </p>
+      </div>
+      <div class="flex lg:flex-row flex-col justify-between items-center h-auto w-auto mx-5 mb-5">
+        <div class="flex flex-col items-center h-full lg:w-1/3 w-full">
+          <img src="step1.png" alt="Picture of link creation" class="bg-black flex-grow m-5 w-full rounded">
+          <p class="text-xl">
+            Step 1
+          </p>
+	  <p class="text-xl">
+		Create the GLink. You can either create a regular shortened URL, or a geo-restricted one, in which case you can restrict it to a specific radius around your current location.
+	  </p>
+        </div>
+        <div class="flex flex-col items-center h-full lg:w-1/3 w-full">
+          <img src="" alt="Picture of link distribution" class="bg-black flex-grow m-5 w-full rounded">
+          <p class="text-xl">
+            Step 2
+          </p>
+	  <p class="text-xl">
+		Distribute the GLink. If you created a regular link i.e. with no restrictions, then the service works similar to other link shorteners, like TinyURL or Bitly.
+	  </p>
+        </div>
+        <div class="flex flex-col items-center h-full lg:w-1/3 w-full">
+          <img src="" alt="Picture of link access (authorized and unauthorized)" class="bg-black flex-grow m-5 w-full rounded">
+          <p class="text-xl">
+            Step 3
+          </p>
+	  <p class="text-xl">
+		If the link is geo-restricted, then anyone who accesses it will have to provide their location co-ordinates for authorization.
+	  </p>
+        </div>
+      </div>
+    </div>
+    <div class="w-full border-8 border-black flex flex-col items-center justify-center">
+      <div class="border-4 border-black w-auto h-auto mt-8 text-4xl md:text-5xl lg:text-6xl flex flex-wrap">
+        Why?
+      </div>
+      <div class="border-4 border-black h-auto mt-4 lg:mx-8 max-w-md sm:flex-grow-0 mb-4 ">
+        <p class="text-lg md:text-xl lg:text-2xl">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab delectus dolor, dolorem dolorum et facilis, illum ipsam, natus nobis nulla quam repellat saepe! Aperiam doloremque harum laudantium repellendus tempora!
+        </p>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

login.html

@@ -12,7 +12,7 @@
 </div>
 
 <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-    <form class="space-y-6" action="login.php" method="GET"> <!--Change to php-->
+    <form class="space-y-6" action="login.php" method="GET">
         <div>
             <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
             <div class="mt-2">