Renamed home.html to index.html
parent
0896c3e571
commit
6fd6026be2
@ -1,76 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Home</title>
|
||||
<link rel="stylesheet" href="output.css">
|
||||
</head>
|
||||
<body class="mx-[10%]">
|
||||
<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>
|
||||
@ -1,80 +1,76 @@
|
||||
<html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="bg-white">
|
||||
<head>
|
||||
<title>GLink</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="output.css">
|
||||
<title>Home</title>
|
||||
<link rel="stylesheet" href="output.css">
|
||||
</head>
|
||||
<body class="bg-gray-50 mx-[10%]">
|
||||
<h1 class="ml-4 text-5xl font-narrow">Link Shortener</h1>
|
||||
<p class="ml-4 font-fingerpaint">Hello There!</p>
|
||||
<body class="mx-[10%] bg-white">
|
||||
<main class="m-10 h-auto w-auto dark:bg-white">
|
||||
|
||||
<?php
|
||||
// The reason this works (i.e. I can use PHP in a .html file)
|
||||
// is because I have configured my .htaccess file to treat every file
|
||||
// ending in .html, as if it contains embedded PHP.
|
||||
// However, this is a strain on resources as it means _every_ HTML
|
||||
// file will be parsed for PHP code, even if it doesn't contain any.
|
||||
// An alternative to doing this, is to use the .php file extension for
|
||||
// any HTML file that has embedded PHP code, and the .html extension
|
||||
// for static HTML files.
|
||||
?>
|
||||
<?php include 'header.php'; ?>
|
||||
|
||||
<?php include 'header.php'; ?>
|
||||
|
||||
<div id="root">
|
||||
<form id="form" method="GET" action="result.php" onsubmit="return validate()">
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<label for="URL" class="text-2xl ml-4 font-rubik self-center">URL</label>
|
||||
<span class="mandatory font-rubik self-center text-2xl">*</span>
|
||||
<span class="font-rubik self-center m-1 text-2xl">:</span>
|
||||
<div class="p-0.5 m-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:caret-gray-600 focus-within:p-[3.2px]">
|
||||
<input type="text" name="url" id="URL" placeholder="https://example.com" required class="p-2 w-full rounded-lg focus:outline-none focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold">
|
||||
</div>
|
||||
<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="flex flex-wrap">
|
||||
<label for="labels" class="text-2xl ml-4 font-rubik self-center">GLink</label>
|
||||
<span class="mandatory font-rubik text-2xl self-center">*</span>
|
||||
<span class="font-rubik self-center m-1 text-2xl">:</span>
|
||||
<label for="GLink" id="labels" class=" ml-2 glink text-center text-xl self-center">glink.zip/</label>
|
||||
<div class="p-0.5 ml-2 mr-4 my-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:caret-gray-600 focus-within:p-[3.2px]">
|
||||
<input type="text" name="glink" id="GLink" class="glink p-2 w-full rounded-lg focus:outline-none focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold" placeholder="exampleWebsite">
|
||||
</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 shortened URLs for private, secure access.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label for="restricted" class="ml-4 self-center text-2xl font-rubik">Geo-restricted? : </label><input type="checkbox" name="restricted" id="restricted" class="ml-2 mr-4 my-4 text-center font-rubik ease-soft rounded-1.4 w-6 h-6 cursor-pointer checked:accent-blue-700 shadow-lg shadow-black/50 peer"><span id="loadingText" class="font-rubik self-center text-center text-xl" style="position: relative; left: 20px;"></span>
|
||||
|
||||
<span class="flex flex-wrap invisible peer-checked:visible" id="js-enabled">
|
||||
<label for="radiusSelect" id="radius_label" class="ml-4 font-rubik text-2xl self-center">Radius</label><span id="mandatory-radius" class="mandatory font-rubik text-2xl self-center">*</span><span class="font-rubik self-center m-1 text-2xl">:</span>
|
||||
<div class="p-0.5 ml-2 mr-4 my-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:p-[3.2px]">
|
||||
<select name="radius" id="radius" class="cursor-pointer text-lg p-2 w-full rounded-lg focus:outline-none invalid:text-gray-400 font-bold">
|
||||
<option value="" selected disabled hidden>Choose a radius for your geo link</option>
|
||||
<option value="5">5 mi</option>
|
||||
<option value="10">10 mi</option>
|
||||
<option value="15">15 mi</option>
|
||||
<option value="20">20 mi</option>
|
||||
</select>
|
||||
</div>
|
||||
</span>
|
||||
<noscript>
|
||||
<style>
|
||||
#js-enabled {display: none;}
|
||||
</style>
|
||||
</noscript>
|
||||
<span role="alert" class="m-4 font-rubik" id="error" aria-hidden="true">Invalid entry</span>
|
||||
<input type="submit" id="button" value="Zip It!" class="scale-125 brightness-125 ml-20 font-rubik bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 hover:shadow-lg hover:shadow-black/50 transition hover:-translate-y-1 hover:scale-150 duration-600 ease-in-out rounded-full cursor-pointer">
|
||||
<input type="hidden" name="latitude" id="latitude">
|
||||
<input type="hidden" name="longitude" id="longitude">
|
||||
|
||||
</form>
|
||||
<hr>
|
||||
<img src="./cat.gif">
|
||||
<p id="footer" class="object-none object-bottom">Insert Footer Here</p>
|
||||
<script src="./index.js"></script>
|
||||
|
||||
</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 link, or a geo-restricted one.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center h-full lg:w-1/3 w-full">
|
||||
<img src="step2.png" 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, then no additional configuration is needed.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center h-full lg:w-1/3 w-full">
|
||||
<img src="step3.png" 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 location co-ordinates will be used to determine access.
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue