< ?php
session_start();
if (!isset($_SESSION['user'])) {
header("Location: https://glink.zip/");
}
?>
< html id = "html-tag" class = "py-[0%] my-[0%]" >
< head class = "py-0 my-0 h-0" >
< title > Link Creator - 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" >
< / head >
< body class = "w-full my-[0%] py-[5%] px-[10%] h-fit bg-gray-300 dark:bg-black" >
< ?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';?>
< h1 id = "head" class = "ml-4 mb-4 text-5xl font-narrow dark:text-success dark:brightness-125" > Create a GLink!< / h1 >
<!-- <p class="ml - 4 font - fingerpaint">Hello There!</p> -->
< div id = "root" class = "w-full h-full" >
< div id = "formspace" class = "flex flex-wrap flex-row w-full bg-white dark:bg-black rounded-lg shadow-lg shadow-black/50" >
< form id = "form" class = "lg:w-1/2 sm:w-full justify-center" method = "POST" action = "result.php" onsubmit = "return validate()" >
< div class = "flex flex-wrap" >
< label for = "URL" class = "text-2xl ml-4 font-rubik self-center dark:text-[#ffff59] dark:brightness-125" > URL< / label >
< span class = "mandatory font-rubik self-center text-2xl" > *< / span >
< span class = "font-rubik self-center m-1 text-2xl dark:text-[#ffff59] dark:brightness-125" > :< / span >
< input type = "text" name = "url" id = "URL" placeholder = "https://example.com" required class = "m-4 p-4 input input-bordered border-2 border-[#761eff] focus:outline-[#761eff]/50 focus:border-[#761eff] dark:focus:border-success dark:border-success dark:focus:outline-success dark:brightness-125 dark:bg-transparent dark:text-white max-w-sm w-full rounded-lg focus-within:ring-none focus:shadow-lg focus:shadow-black/50 text-center text-lg text-black font-bold" >
< / div >
< div class = "flex flex-wrap" >
< label for = "labels" class = "text-2xl ml-4 font-rubik self-center dark:text-[#ffff59] dark:brightness-125" > GLink< / label >
< span class = "mandatory font-rubik text-2xl self-center" > *< / span >
< span class = "font-rubik self-center m-1 text-2xl dark:text-[#ffff59] dark:brightness-125" > :< / span >
< label for = "GLink" id = "labels" class = " ml-2 glink text-center text-xl self-center dark:text-[#ffff59] dark:brightness-125" > glink.zip/< / label >
< input type = "text" name = "glink" id = "GLink" class = "m-4 glink p-2 max-w-sm rounded-lg input input-bordered border-2 border-[#761eff] focus:outline-[#761eff]/50 focus:border-[#761eff] dark:focus:border-success dark:border-success dark:focus:outline-success dark:brightness-125 dark:bg-transparent dark:text-white focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold" placeholder = "exampleWebsite" >
< / div >
< label for = "restricted" class = "ml-4 self-center text-2xl font-rubik dark:text-[#ffff59] dark:brightness-125" > 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 = "radius" id = "radius_label" class = "ml-4 font-rubik text-2xl self-center dark:text-[#ffff59] dark:brightness-125" > 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 dark:text-[#ffff59] dark:brightness-125 " > :< / span >
< input type = "number" name = "radius" id = "radius" class = "m-4 text-lg pr-8 w-auto rounded-lg input input-bordered border-2 border-[#761eff] focus:outline-[#761eff]/50 focus:border-[#761eff] dark:focus:border-success dark:border-success dark:focus:outline-success dark:brightness-125 dark:bg-transparent dark:text-white invalid:text-gray-400 font-bold" >
< / input >
< / 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 = "mt-4 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 >
< div class = "lg:w-1/2 sm:w-full mt-4 dark:text-white" >
< ul class = "list-decimal text-left flex flex-col flex-wrap text-lg mx-8 mb-8" >
< li class = "mb-3" > Enter the URL< / li >
< li class = "mb-3" > Enter the GLink - a keyword used to identify your URL. This is optional, and if left blank, a random GLink will be generated for you.< / li >
< li class = "mb-3" > The GLink that you enter will be appended to the URL, like so: glink.zip/example< / li >
< li class = "mb-3" > If you don't want to geo-restrict it, you're good to go! Skip to step 6.< / li >
< li class = "mb-3" > If you want to geo-restrict the link, select the checkbox, and provide a radius to use as a 'containment zone'. Only those individuals who are within that radius from your current location will be able to access the Glink.< / li >
< li > Click 'Zip it!' to generate your custom URL.< / li >
< / ul >
< / div >
< / div >
<!-- <p id="footer" class="object - none object - bottom">Insert Footer Here</p> -->
< script src = "index.js" > < / script >
< / div >
< / body >
< / html >
