aravind/glink-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Theme set and detachment from top fixed

Browse Source
This commit is contained in:
Aravind142857
2023-07-18 02:52:57 -05:00
parent d1c6aeb6cd
commit 37bed7697b
8 changed files with 671 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
public/home.html
View File

@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en" class="bg-black">
<head>
<meta charset="UTF-8">
<html id="html-tag" lang="en" class="py-[0%] my-[0%]">
<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="mx-[10%]">
<main class="m-10 h-auto w-auto ">
<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"> &lt;!&ndash;dark:bg-black&ndash;&gt;-->
@@ -134,7 +134,7 @@
</div>
<!-- previous navbar end-->
<!-- New navbar start-->
<div class="navbar bg-base-100 rounded-lg shadow-xl shadow-black/50 z-[4] sticky top-0 mb-10">
<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" >
@@ -159,19 +159,58 @@
<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 btn-success brightness-125 lg:text-xl text-sm" href="/">Create</a>
<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 hidden">
<a class="btn btn-outline btn-success brightness-125 lg:text-xl text-sm" href="signup.html">Signup</a>
<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" 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");
// }
// }
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">
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost btn-circle avatar border border-2 border-emerald-500 brightness-125 hover:border-none hover:ring-2 hover:ring-emerald-400 focus:ring-2 focus:ring-emerald-400">
<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-white rounded-full text-center"></div>
<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-base-100 rounded-box w-36">
@@ -253,14 +292,14 @@
</div>
<!-- Old hero end -->
<!-- New hero start -->
<div class="hero py-16 h-auto bg-primary rounded-lg my-8 shadow-lg shadow-primary">
<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-emerald-400 shadow-lg shadow-emerald-400/50 rounded-lg bg-gray-50">
<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>
@@ -309,31 +348,33 @@
</style>
<div>
<h1 class="text-5xl font-bold text-emerald-400">Create and share geo-restricted links</h1>
<p class="py-6 text-gray-300">GLinkZip enables you to generate and distribute geo-restricted URLs for private, secure access.</p>
<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-xl hover:shadow-lg hover:shadow-emerald-400/50">Get Started</button>
<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 -->
<div class="flex lg:flex-col flex-col w-full mb-24 bg-primary rounded-lg shadow-lg shadow-primary">
<!-- 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 brightness-125">
<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="bg-black flex-grow m-5 w-full rounded">
<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="" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
<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>
@@ -342,7 +383,7 @@
</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="" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
<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>
@@ -352,16 +393,21 @@
</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">
<!-- 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="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">
<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>