You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
4.5 KiB
HTML
89 lines
4.5 KiB
HTML
<?php
|
|
session_start();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html id="html-tag" lang="en" class="py-[0%] my-[0%]">
|
|
<head class="py-0 my-0 h-0">
|
|
<meta charset="UTF-8">
|
|
<title>GLink - A Geo-Restricted Link Shortener</title>
|
|
<link rel="stylesheet" href="output.css">
|
|
</head>
|
|
<body class="w-full my-[0%] py-[0%] px-[10%] h-full bg-gray-300 dark:bg-black">
|
|
|
|
<main class="h-auto w-auto py-[5%]">
|
|
<?php include 'header.php'; ?>
|
|
|
|
<div class="hero py-16 h-auto bg-[#5EDC70] dark:bg-gray-800 dark:brightness-60 brightness-125 rounded-lg my-8 shadow-lg shadow-gray-800">
|
|
<div class="hero-content flex-col-reverse lg:flex-row-reverse">
|
|
<div class="relative items-center w-auto h-auto sm:w-full flex-grow-0 mt-8 lg:mt-0 justify-center mx-auto">
|
|
<video autoplay class="p-2 rounded-lg bg-yellow-500">
|
|
<source src="homepagevideo.mp4" type="video/mp4">
|
|
</video>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<h1 class="text-5xl font-bold text-[#C21EC0] dark:text-[#BF991D] brightness-125 font-serif tracking-wider leading-tight pl-8">Create and share geo-restricted links</h1>
|
|
<p class="py-6 text-black dark:text-gray-300 pl-8 text-lg">GLinkZip enables you to generate and distribute geo-restricted URLs for private, secure access.</p>
|
|
<div class="flex justify-center items-center">
|
|
<a href="<?php if(!isset($_SESSION['user'])) { echo("signup.html"); } else { echo("form.html"); }?>"><button class="btn btn-success text-black bg-[#C21EC0] border-[#5A1475] border-4 hover:bg-[#C21EC0] hover:border-[#C21EC0] hover:border-none hover:shadow-black/50 dark:bg-[#BF991D] dark:border-black dark:border-4 dark:hover:bg-[#C2B100] dark:hover:border-black dark:hover:border-none text-xl hover:shadow-lg dark:hover:shadow-[#C2B100]/50">Get Started</button></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- New hero end -->
|
|
<!-- 3 column start -->
|
|
|
|
<div class="flex lg:flex-col flex-col w-full mb-24 bg-[#761ffe] brightness-125 dark:brightness-60 dark:bg-gray-800 rounded-lg shadow-lg shadow-gray-800">
|
|
<div class="w-full my-12 justify-center items-center flex">
|
|
<p class="text-4xl md:text-5xl lg:text-6xl text-emerald-400 font-bold font-serif brightness-125">
|
|
How it works
|
|
</p>
|
|
</div>
|
|
<div class="flex lg:flex-row flex-col items-start h-auto w-auto mx-5 mb-5">
|
|
<div class="flex flex-col items-center h-full lg:w-1/3 w-full pt-0 px-4">
|
|
<img src="step1.png" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
|
|
<h1 class="text-5xl text-success">
|
|
Step 1
|
|
</h1>
|
|
<p class="py-6 text-gray-300">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 pt-0 px-4">
|
|
<img src="step2.png" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
|
|
<h1 class="text-5xl text-success">
|
|
Step 2
|
|
</h1>
|
|
<p class="py-6 text-gray-300">
|
|
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 pt-0 px-4 flex-grow flex-shrink-0">
|
|
<img src="step3.png" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
|
|
<h1 class="text-5xl text-success ">
|
|
Step 3
|
|
</h1>
|
|
<p class="py-6 text-gray-300">
|
|
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>
|
|
<!-- 3 column end -->
|
|
<!-- why start -->
|
|
<div class="w-full flex bg-[#eab30e] flex-col justify-center rounded-lg shadow-lg shadow-gray-800">
|
|
<div class=" h-auto mt-8 text-4xl md:text-5xl lg:text-6xl w-full pl-8">
|
|
<h1 class="font-serif font-bold underline">
|
|
Why GLink?
|
|
</h1>
|
|
</div>
|
|
<div class="py-8 sm:flex-grow-0 flex pl-8 flex-wrap ">
|
|
<p class="text-2xl md:text-2xl lg:text-3xl ">
|
|
If you're looking to create a <b>shortened URL</b> for a <u>signup form</u>, an <u>event invitation</u>, or <u>anything else</u>, then this service is for you!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Why end -->
|
|
</main>
|
|
</body>
|
|
</html>
|