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.
443 lines
28 KiB
HTML
443 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html id="html-tag" lang="en" class="py-[0%] my-[0%]"> <!--html-tag facilitates dark mode and light mode -->
|
|
<head class="py-0 my-0 h-0">
|
|
<meta charset="UTF-8" />
|
|
<title>Home</title>
|
|
<link rel="stylesheet" href="css/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%]">
|
|
<!-- previous navbar start-->
|
|
<div class="hidden">
|
|
<!-- <nav class="flex items-center opacity-100 lg:justify-between sm:justify-center flex-wrap bg-gray-500 dark:bg-gray-500 p-6 shadow-lg shadow-black/50 sticky top-4 opacity-100 mb-24"> <!–dark:bg-black–>-->
|
|
<!-- <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 id="menu-options" class="bg-gray-500 w-full lg:block flex-grow lg:flex lg:items-center lg:w-auto hidden mr-4">-->
|
|
<!-- <div class="text-sm lg:flex-grow lg:flex">-->
|
|
<!-- <a 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 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-->
|
|
<!-- </a>-->
|
|
<!-- <a 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-->
|
|
<!-- </a>-->
|
|
<!-- <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)-->
|
|
<!-- </a>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <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">-->
|
|
<!-- signup-->
|
|
<!-- </a>-->
|
|
<!-- </div>-->
|
|
<!-- <div>-->
|
|
<!-- <a href="<%= loc %>" 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">-->
|
|
<!-- <%= tagline %>-->
|
|
<!-- </a>-->
|
|
<!-- </div>-->
|
|
<!-- </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="group relative cursor-pointer py-2">–>-->
|
|
<!--<!– <div class="w-44 flex items-center justify-between space-x-5 bg-white px-4 bg-gradient-to-tl from-purple-700 to-pink-500 rounded-lg group group-hover:from-purple-500 group-hover:to-pink-500">–>-->
|
|
<!--<!– <a class="menu-hover my-2 py-2 text-base font-medium text-white lg:mx-4 font-bold uppercase group-hover:scale-105 transition-transform" onClick="">–>-->
|
|
<!--<!– Profile–>-->
|
|
<!--<!– </a>–>-->
|
|
<!--<!– <span class="group-hover:hidden">–>-->
|
|
<!--<!– <svg–>-->
|
|
<!--<!– fill="none"–>-->
|
|
<!--<!– viewBox="0 0 24 24"–>-->
|
|
<!--<!– stroke-width="1.5"–>-->
|
|
<!--<!– stroke="white"–>-->
|
|
<!--<!– class="h-6 w-6"–>-->
|
|
<!--<!– >–>-->
|
|
<!--<!– <path–>-->
|
|
<!--<!– stroke-linecap="round"–>-->
|
|
<!--<!– stroke-linejoin="round"–>-->
|
|
<!--<!– d="M19.5 8.25l-7.5 7.5l-7.5-7.5"–>-->
|
|
<!--<!– />–>-->
|
|
<!--<!– </svg>–>-->
|
|
<!--<!– </span>–>-->
|
|
<!--<!– <span class="invisible group-hover:visible">–>-->
|
|
<!--<!– <svg–>-->
|
|
<!--<!– fill="none"–>-->
|
|
<!--<!– viewBox="0 0 24 24"–>-->
|
|
<!--<!– stroke-width="1.5"–>-->
|
|
<!--<!– stroke="white"–>-->
|
|
<!--<!– class="h-6 w-6"–>-->
|
|
<!--<!– >–>-->
|
|
<!--<!– <path–>-->
|
|
<!--<!– stroke-linecap="round"–>-->
|
|
<!--<!– stroke-linejoin="round"–>-->
|
|
<!--<!– d="M19.5 15.25l-7.5 -7.5l-7.5 7.5"–>-->
|
|
<!--<!– />–>-->
|
|
<!--<!– </svg>–>-->
|
|
<!--<!– </span>–>-->
|
|
<!--<!– </div>–>-->
|
|
<!--<!– <div–>-->
|
|
<!--<!– class="invisible absolute z-50 flex w-full flex-col bg-gray-100 py-1 px-4 divide-y-1 divide-gray-300 text-gray-800 shadow-xl group-hover:visible"–>-->
|
|
<!--<!– onClick=""–>-->
|
|
<!--<!– >–>-->
|
|
<!--<!– <a–>-->
|
|
<!--<!– class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2"–>-->
|
|
<!--<!– >A</a–>-->
|
|
<!--<!– >–>-->
|
|
<!--<!– <a–>-->
|
|
<!--<!– class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2"–>-->
|
|
<!--<!– >B</a–>-->
|
|
<!--<!– >–>-->
|
|
<!--<!– <a–>-->
|
|
<!--<!– class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2"–>-->
|
|
<!--<!– >C</a>–>-->
|
|
<!--<!– <a–>-->
|
|
<!--<!– class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2"–>-->
|
|
<!--<!– >D</a>–>-->
|
|
<!--<!– </div>–>-->
|
|
<!--<!– </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>-->
|
|
</div>
|
|
<!-- previous navbar end-->
|
|
<!-- New navbar start-->
|
|
<div class="navbar dark:from-gray-800 dark:to-gray-800 rounded-lg bg-gradient-to-r from-rose-400 via-blue-400 to-emerald-400 shadow-xl shadow-black/50 z-[4] sticky top-0 mb-10">
|
|
<div class="flex-1 lg:ml-4 ml-2 my-2">
|
|
<!--Hamburger menu-->
|
|
<div class="lg:hidden" >
|
|
<ul class="menu menu-horizontal px-1">
|
|
<label class="group btn btn-circle bg-transparent dark:bg-gray-800 swap swap-rotate border-emerald-300">
|
|
<input type="checkbox" class="opacity-0 w-full h-full "/>
|
|
<svg class="swap-off fill-emerald-300 group-hover:fill-black dark:fill-emerald-400 dark:group-hover:fill-white brightness-125" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"/></svg>
|
|
<div class="dropdown dropdown-open swap-on">
|
|
<svg class="fill-emerald-300 group-hover:fill-black dark:fill-emerald-400 dark:group-hover:fill-white brightness-125" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"/></svg>
|
|
<ul tabindex="0" class="menu dropdown-content z-[1] p-2 shadow bg-green-100 dark:bg-gray-800 rounded-box w-36 mt-4">
|
|
<li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Create</a></li>
|
|
<li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Signup</a></li>
|
|
<li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Login</a></li>
|
|
</ul>
|
|
</div>
|
|
</label>
|
|
</ul>
|
|
</div>
|
|
<!-- Hamburger Menu ended -->
|
|
|
|
<div class="flex lg:justify-start lg:items-start justify-center items-center lg:w-auto w-full">
|
|
<a class="btn btn-ghost normal-case text-xl text-emerald-400 brightness-125"><img src="images/GLink-Logo-alt.svg" class="h-full "></a>
|
|
</div>
|
|
<div class="w-full justify-center items-center lg:flex hidden">
|
|
<a class="btn btn-outline dark:btn-success dark:bg-transparent border-yellow-300 text-yellow-300 hover:bg-yellow-400 hover:border-none hover:text-black brightness-125 lg:text-xl text-sm" href="/">Create</a>
|
|
</div>
|
|
</div>
|
|
<div class="justify-center items-center lg:flex mr-10 my-2">
|
|
<a class="btn btn-outline dark:btn-success dark:text-success dark:bg-transparent border-yellow-300 text-yellow-300 hover:bg-yellow-400 hover:border-none hover:text-black brightness-125 lg:text-xl text-sm mr-8 lg:flex hidden" href="signup.html">Sign up</a>
|
|
<label class="swap swap-rotate">
|
|
|
|
<!-- this hidden checkbox controls the state -->
|
|
<input type="checkbox" id="theme-switcher" class="h-full w-full hidden" onclick="changeMode()"/>
|
|
|
|
<!-- sun icon -->
|
|
<svg id="sun" class="swap-on fill-yellow-500 w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41Z" fill="yellow"/>
|
|
<path d="M12,6.5A5.5,5.5,0,1,0,17.5,12A5.51,5.51,0,0,0,12,6.5Z" fill="yellow" /></svg>
|
|
|
|
<!-- moon icon -->
|
|
<svg id="moon" class="swap-off fill-white w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" fill="white"/></svg>
|
|
|
|
</label>
|
|
<script>
|
|
// window.onload = function(){
|
|
// if (document.getElementById("html-tag").contains("dark")) {
|
|
// console.log("dark");
|
|
// document.getElementById("sun").classList.add("swap-active");
|
|
// } else {
|
|
// console.log("light");
|
|
// document.getElementById("moon").classList.add("swap-active");
|
|
// }
|
|
// }
|
|
window.addEventListener('load', function(){
|
|
if (window.matchMedia &&
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.getElementById("theme-switcher").checked = true;
|
|
console.log("prefers dark");
|
|
changeMode();
|
|
} else {
|
|
document.getElementById("theme-switcher").checked = false;
|
|
console.log("prefers light");
|
|
changeMode();
|
|
}
|
|
});
|
|
window.matchMedia('(prefers-color-scheme: dark)')
|
|
.addEventListener('change',({ matches }) => {
|
|
if (matches) {
|
|
console.log("change to dark mode!");
|
|
document.getElementById("theme-switcher").checked = true;
|
|
changeMode();
|
|
} else {
|
|
console.log("change to light mode!");
|
|
document.getElementById("theme-switcher").checked = false;
|
|
changeMode();
|
|
}
|
|
});
|
|
|
|
function changeMode() {
|
|
let html_tag = document.getElementById("html-tag")
|
|
let box = document.getElementById("theme-switcher");
|
|
if (box.checked) {
|
|
if (!html_tag.classList.contains("dark")) {
|
|
html_tag.classList.add("dark");
|
|
}
|
|
}
|
|
if (!box.checked) {
|
|
if (html_tag.classList.contains("dark")) {
|
|
html_tag.classList.remove("dark");
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
|
|
<div class="flex-none my-2 mr-2">
|
|
|
|
<div class="dropdown dropdown-end">
|
|
<label tabindex="0" class="btn btn-ghost btn-circle avatar border border-2 border-gray-800 dark:border-emerald-500 brightness-125 hover:border-none hover:ring-2 hover:ring-gray-800 dark:hover:ring-emerald-400 focus:ring-2 focus:ring-gray-800 dark:focus:ring-emerald-400">
|
|
<div class="w-10 rounded-full cursor-pointer ">
|
|
<div class="w-full h-full bg-yellow-200 rounded-full flex justify-center items-center"><h1 class="self-center text-xl font-bold font-serif">B</h1></div>
|
|
</div>
|
|
</label>
|
|
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-green-100 dark:bg-gray-800 rounded-box w-36">
|
|
<li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 font-bold uppercase dark:hover:text-white" href="links.html">My Links</a></li>
|
|
<li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 font-bold uppercase dark:hover:text-white">Logout</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Navbar ended -->
|
|
<!-- Old hero start -->
|
|
<div class="hidden">
|
|
<!-- <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 mb-24">-->
|
|
<!-- <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 m-5 text-center">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>-->
|
|
<!-- Insert description or whatever ...-->
|
|
<!-- </p>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!--<!– <img class="w-auto flex-grow-0 h-96 w-96" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGpfMagCsgrJkELG_GOjtxqssEPXd-3vr2PmPdaB-0Y5Rp-bv1VOouyoXmG2QxZWHpdYI&usqp=CAU">–>-->
|
|
<!-- <div class="relative items-center w-auto h-auto sm:w-full flex-grow-0">-->
|
|
<!-- <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">-->
|
|
<!-- <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="absolute inset-y-0 left-0 flex items-center w-full pl-10 pointer-events-none">-->
|
|
<!-- <div type="search" id="default-search" class="block w-full p-2 pl-6 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500">-->
|
|
<!-- <div class="typewriter bg-transparent w-fit h-auto justify-center items-center mx-auto">-->
|
|
<!-- <h1 class="text-2xl text-center overflow-x-hidden border-r border-r-2 border-r-orange-600 whitespace-nowrap m-auto tracking-wider "></h1>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <style>-->
|
|
<!-- .typewriter h1{-->
|
|
<!-- background: transparent;-->
|
|
<!-- overflow: hidden; /* Ensures the content is not revealed until the animation */-->
|
|
<!-- border-right: .15em solid orange; /* The typwriter cursor */-->
|
|
<!-- white-space: nowrap; /* Keeps the content on a single line */-->
|
|
<!-- margin: auto; /* Gives that scrolling effect as the typing happens */-->
|
|
<!-- letter-spacing: .15em; /* Adjust as needed */-->
|
|
<!-- content: "";-->
|
|
<!-- animation:-->
|
|
<!-- typing 9s steps(40, start) 0s infinite,-->
|
|
<!-- blink-caret .95s step-end 0s infinite;-->
|
|
<!-- }-->
|
|
|
|
<!-- /* The typing effect */-->
|
|
<!-- @keyframes typing {-->
|
|
<!-- 0% { width: 0}-->
|
|
<!-- 30% { width: 100% }-->
|
|
<!-- 40% { width: 100% }-->
|
|
<!-- 55% { width: 0 }-->
|
|
<!-- 65% { width: 0}-->
|
|
<!-- 95% {width: 100%}-->
|
|
<!-- 100% {width: 100%}-->
|
|
<!-- }-->
|
|
|
|
<!-- /* The typewriter cursor effect */-->
|
|
<!-- @keyframes blink-caret {-->
|
|
<!-- from, to { border-color: transparent }-->
|
|
<!-- 50% { border-color: orange; }-->
|
|
<!-- }-->
|
|
<!-- .typewriter h1::after {-->
|
|
<!-- animation: change 9s steps(40, start) 0s infinite;-->
|
|
<!-- }-->
|
|
<!-- @keyframes change {-->
|
|
<!-- 0% {content: "netflix.com"}-->
|
|
<!-- 60% {content: "netflix.com"}-->
|
|
<!-- 65% {content: "glink.com/video"}-->
|
|
<!-- 100% {content: "glink.com/video"}-->
|
|
<!-- }-->
|
|
<!-- </style>-->
|
|
|
|
<!-- </div>-->
|
|
</div>
|
|
<!-- Old hero end -->
|
|
<!-- New hero start -->
|
|
<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">
|
|
<!-- <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">-->
|
|
<!-- <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>-->
|
|
<!-- </div>-->
|
|
<div class="absolute inset-y-0 left-0 flex items-center w-full lg:pl-10 pointer-events-none">
|
|
<div type="search" id="default-search" class="block w-full p-2 pl-6 text-sm text-gray-900 ring-4 border-none ring-[#C2B100] shadow-lg shadow-emerald-400/50 rounded-lg bg-gray-50">
|
|
<div class="typewriter bg-transparent w-fit h-auto justify-center items-center mx-auto">
|
|
<h1 class="text-2xl text-center overflow-x-hidden border-r border-r-2 border-r-orange-600 whitespace-nowrap m-auto tracking-wider "></h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.typewriter h1{
|
|
background: transparent;
|
|
overflow: hidden; /* Ensures the content is not revealed until the animation */
|
|
border-right: .15em solid orange; /* The typwriter cursor */
|
|
white-space: nowrap; /* Keeps the content on a single line */
|
|
margin: auto; /* Gives that scrolling effect as the typing happens */
|
|
letter-spacing: .15em; /* Adjust as needed */
|
|
content: "";
|
|
animation:
|
|
typing 9s steps(40, start) 0s infinite,
|
|
blink-caret .95s step-end 0s infinite;
|
|
}
|
|
|
|
/* The typing effect */
|
|
@keyframes typing {
|
|
0% { width: 0}
|
|
30% { width: 100% }
|
|
40% { width: 100% }
|
|
55% { width: 0 }
|
|
65% { width: 0}
|
|
95% {width: 100%}
|
|
100% {width: 100%}
|
|
}
|
|
|
|
/* The typewriter cursor effect */
|
|
@keyframes blink-caret {
|
|
from, to { border-color: transparent }
|
|
50% { border-color: orange; }
|
|
}
|
|
.typewriter h1::after {
|
|
animation: change 9s steps(40, start) 0s infinite;
|
|
}
|
|
@keyframes change {
|
|
0% {content: "netflix.com"}
|
|
60% {content: "netflix.com"}
|
|
65% {content: "glink.com/video"}
|
|
100% {content: "glink.com/video"}
|
|
}
|
|
</style>
|
|
|
|
<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">
|
|
<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>
|
|
</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">
|
|
<img src="images/step1.png" alt="pic2" class="h-[241.32px] w-[340px] 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">
|
|
<img src="images/step2.png" alt="pic2" class="h-[241.32px] w-[340px] 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 flex-grow flex-shrink-0">
|
|
<img src="images/step3.png" alt="pic2" class="h-[241.32px] w-[340px] 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 items-center justify-center rounded-lg shadow-lg shadow-gray-800">
|
|
<div class=" h-auto mt-8 text-4xl md:text-5xl lg:text-6xl flex flex-wrap w-full justify-end pr-16">
|
|
<h1 class="font-serif font-bold underline">
|
|
Why GLink?
|
|
</h1>
|
|
</div>
|
|
<div class="py-8 max-w-lg sm:flex-grow-0 flex pr-16 flex-wrap self-end justify-end ">
|
|
<p class="text-lg md:text-xl lg:text-2xl text-right">
|
|
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>
|
|
<!-- Why end -->
|
|
</main>
|
|
|
|
|
|
<!-- <div class="typewriter bg-white w-fit justify-center items-center mb-10 mx-auto">-->
|
|
<!-- <h1 class="text-4xl text-center overflow-x-hidden border-r border-r-2 border-r-orange-600 whitespace-nowrap m-auto tracking-wider "></h1>-->
|
|
<!-- </div>-->
|
|
|
|
</body>
|
|
</html> |