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.

640 lines
37 KiB
HTML

<!DOCTYPE html>
<html lang="en" class="bg-white">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/output.css">
</head>
<body class="mx-[10%] bg-white">
<main class="m-10 h-auto w-auto dark:bg-white">
<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">
<a href="#head" 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 href="#head" 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 href="#head" 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 class="overflow-x-auto">
<table class="table text-amber-950 italic my-4">
<!-- head -->
<thead>
<tr class="text-amber-950 text-center">
<th></th>
<th>gLink</th>
<th>URL</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr class="data_row text-center" >
<th>1</th>
<td><input type="text" class="glink_str text-center italic border-none rounded-lg focus:shadow-lg" readonly value="Link 1"></td>
<td><input type="text" class="url_str italic text-center border-none rounded-lg focus:shadow-lg" readonly value="https://www.example.com"></td>
<td>
<button class="edit_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0" onclick = " ">
<svg width="24"
height="24"
fill="blue"
class="bi bi-pencil"
viewBox="0 0 16 16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
</svg></button>
<button class="save_btn btn mx-8 bg-transparent hover:bg-transparent border-none p-0 m-0 hidden">
<div class="inline-block rotate-45 h-[24px] w-[12px] border-b-4 border-b-green-500 border-r-green-500 border-r-4 hover:border-b-green-300 hover:border-r-green-300"></div>
</button>
<button class="cancel_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0 hidden">
<div class="w-[24px] h-[24px] before:absolute before:content-[' '] before:h-[32px] before:w-[2px] before:bg-red-600 before:rotate-45 after:absolute after:content-[' '] after:h-[32px] after:w-[2px] after:bg-red-600 after:-rotate-45 hover:before:bg-red-400 hover:after:bg-red-400"></div>
</button></td>
<!-- <script>-->
<!-- // var url_value = document.getElementById("url1").value;-->
<!-- // var glink_value = document.getElementById("link1").value;-->
<!-- // function toggle1() {-->
<!-- // let txt = document.getElementById("link1");-->
<!-- // let url = document.getElementById("url1");-->
<!-- // let edit = document.getElementById("edit-icon");-->
<!-- // let save = document.getElementById("save-icon");-->
<!-- // let cancel = document.getElementById("cancel-icon");-->
<!-- // if (txt.readOnly) {-->
<!-- // url_value = url.value;-->
<!-- // glink_value = txt.value;-->
<!-- // txt.readOnly = false;-->
<!-- // url.readOnly = false;-->
<!-- // txt.classList.add("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");-->
<!-- // url.classList.add("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");-->
<!-- // edit.classList.add("hidden");-->
<!-- // save.classList.remove("hidden");-->
<!-- // cancel.classList.remove("hidden");-->
<!-- // txt.focus();-->
<!-- // } else {-->
<!-- // txt.readOnly = true;-->
<!-- // url.readOnly = true;-->
<!-- // txt.classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");-->
<!-- // url.classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");-->
<!-- // edit.classList.remove("hidden");-->
<!-- // save.classList.add("hidden");-->
<!-- // cancel.classList.add("hidden");-->
<!-- // }-->
<!-- // }-->
<!-- // function cancel1() {-->
<!-- // document.getElementById("link1").value = glink_value;-->
<!-- // document.getElementById("url1").value = url_value;-->
<!-- // document.getElementById("link1").classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");-->
<!-- // document.getElementById("url1").classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");-->
<!-- // document.getElementById("edit-icon").classList.remove("hidden");-->
<!-- // document.getElementById("save-icon").classList.add("hidden");-->
<!-- // document.getElementById("cancel-icon").classList.add("hidden");-->
<!-- // }-->
<!-- </script>-->
<!--currentColor-->
<td>
<button class="delete_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="red" x="0px" y="0px" viewBox="0 0 25 24.8" width="25" height="24" xml:space="preserve" class= "group icon-trashcan ct-delete" data-ember-action="" data-ember-action-1015="1015">
<g class="trashcan-open invisible group-hover:visible">
<path d="M18.7,24.4H5.9L4.9,7h14.9L18.7,24.4z M7.6,22.6H17l0.8-13.7h-11L7.6,22.6z"></path>
<polygon points="13.6,10.3 13.1,21.2 14.9,21.2 15.4,10.3 "></polygon>
<polygon points="11.5,21.2 11,10.3 9.2,10.3 9.7,21.2 "></polygon>
<path d="M19.1,0.7l-4.7,0.9l-0.8-1.4L8.2,1.3L8,3l-4.7,1l0.2,4.7l17.3-3.5L19.1,0.7z
M8.8,1.9l4.4 -1.0 l0.5,0.8
L8.7,2.8z
M5.2,6.4l0-1L18,2.8l0.3,0.9L5.2,6.4z"></path>
</g>
<g class="trashcan-closed group-hover:invisible">
<path d="M6.8,8.8h11L17,22.6
H7.6L6.8,8.8z
M4.9,7l1,17.4h12.8
l1-17.4
H4.9z"></path>
<polygon points="13.6,10.3 13.1,21.2 14.9,21.2 15.4,10.3 "></polygon>
<polygon points="11.5,21.2 11,10.3 9.2,10.3 9.7,21.2 "></polygon>
<path d="M20.4,4h-4.8l-0.5-1.6
H9.5L9,4
H4.2
L3.5,8.6h17.6
L20.4,4z
M9.9,3.2h4.8
L14.9,3.9h-5.2z
M5.6,6.7l0.2-1 h13l0.2,1
H5.6z"></path>
</g>
</svg>
</button>
</td>
</tr>
<tr class="notification_row text-center w-full hidden">
<td colspan="5"><div class="alert alert-error text-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>You have just deleted a row. Press <button class="undo_btn btn bg-transparent m-0 p-0 h-fit hover:bg-transparent border-none"><kbd class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">undo</kbd></button> to undo the action</span>
<button class="close_btn btn bg-transparent hover:bg-transparent broder-none p-0 m-0 "><svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-8 w-8" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></button>
</div></td>
</tr>
</tbody>
<!--<script>
// function delete1() {
// let row = document.getElementById("row1");
// let notification = document.getElementById("notification1");
// row.classList.add("hidden");
// notification.classList.remove("hidden");
// setTimeout(function(){
// notification.classList.add("hidden");
// }, 4000);
// }
// function close1() {
// let notification = document.getElementById("notification1");
// notification.classList.add("hidden");
// }
// function undo1() {
// let row = document.getElementById("row1");
// let notification = document.getElementById("notification1");
// row.classList.remove("hidden");
// notification.classList.add("hidden");
// }
</script>-->
<!-- row 2 -->
<tbody>
<tr class="data_row text-center">
<th>2</th>
<td><input type="text" class="glink_str text-center italic border-none focus:outline-none focus:ring-4 rounded-lg focus:ring-blue-500/50 focus:shadow-lg"id="link2" readonly value="Link 1"></td>
<td><input type="text" class="url_str italic text-center border-none focus:outline-none focus:ring-4 rounded-lg focus:ring-blue-500/50 focus:shadow-lg"id="url2" readonly value="https://www.example.com"></td>
<td><button class="edit_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0"><!--onclick="toggle1()-->
<svg width="24"
height="24"
fill="blue"
class="bi bi-pencil"
viewBox="0 0 16 16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
</svg></button>
<button class="save_btn btn mx-8 bg-transparent hover:bg-transparent border-none p-0 m-0 hidden">
<div class="inline-block rotate-45 h-[24px] w-[12px] border-b-4 border-b-green-500 border-r-green-500 border-r-4 hover:border-b-green-300 hover:border-r-green-300"></div>
</button>
<button class="cancel_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0 hidden">
<div class="w-[24px] h-[24px] before:absolute before:content-[' '] before:h-[32px] before:w-[2px] before:bg-red-600 before:rotate-45 after:absolute after:content-[' '] after:h-[32px] after:w-[2px] after:bg-red-600 after:-rotate-45 hover:before:bg-red-400 hover:after:bg-red-400"></div>
</button></td></td>
<td>
<button class="delete_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="red" x="0px" y="0px" viewBox="0 0 25 24.8" width="25" height="24" xml:space="preserve" class= "group icon-trashcan ct-delete" data-ember-action="" data-ember-action-1015="1015">
<g class="trashcan-open invisible group-hover:visible">
<path d="M18.7,24.4H5.9L4.9,7h14.9L18.7,24.4z M7.6,22.6H17l0.8-13.7h-11L7.6,22.6z"></path>
<polygon points="13.6,10.3 13.1,21.2 14.9,21.2 15.4,10.3 "></polygon>
<polygon points="11.5,21.2 11,10.3 9.2,10.3 9.7,21.2 "></polygon>
<path d="M19.1,0.7l-4.7,0.9l-0.8-1.4L8.2,1.3L8,3l-4.7,1l0.2,4.7l17.3-3.5L19.1,0.7z
M8.8,1.9l4.4 -1.0 l0.5,0.8
L8.7,2.8z
M5.2,6.4l0-1L18,2.8l0.3,0.9L5.2,6.4z"></path>
</g>
<g class="trashcan-closed group-hover:invisible">
<path d="M6.8,8.8h11L17,22.6
H7.6L6.8,8.8z
M4.9,7l1,17.4h12.8
l1-17.4
H4.9z"></path>
<polygon points="13.6,10.3 13.1,21.2 14.9,21.2 15.4,10.3 "></polygon>
<polygon points="11.5,21.2 11,10.3 9.2,10.3 9.7,21.2 "></polygon>
<path d="M20.4,4h-4.8l-0.5-1.6
H9.5L9,4
H4.2
L3.5,8.6h17.6
L20.4,4z
M9.9,3.2h4.8
L14.9,3.9h-5.2z
M5.6,6.7l0.2-1 h13l0.2,1
H5.6z"></path>
</g>
</svg>
</button>
</td>
</tr>
<tr class="notification_row text-center w-full hidden">
<td colspan="5"><div class="alert alert-error text-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>You have just deleted a row. Press <button class="undo_btn btn bg-transparent m-0 p-0 h-fit hover:bg-transparent border-none"><kbd class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">undo</kbd></button> to undo the action</span>
<button class="close_btn btn bg-transparent hover:bg-transparent broder-none p-0 m-0 "><svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-8 w-8" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></button>
</div></td>
</tr>
</tbody>
<!-- row 3 -->
<tbody>
<tr class="data_row text-center">
<th>3</th>
<td><input type="text" class="glink_str text-center italic border-none focus:outline-none focus:ring-4 rounded-lg focus:ring-blue-500/50 focus:shadow-lg"id="link3" readonly value="Link 1"></td>
<td><input type="text" class="url_str italic text-center border-none focus:outline-none focus:ring-4 rounded-lg focus:ring-blue-500/50 focus:shadow-lg"id="url3" readonly value="https://www.example.com"></td>
<td><button class="edit_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0"><!--onclick="toggle1()-->
<svg width="24"
height="24"
fill="blue"
class="bi bi-pencil"
viewBox="0 0 16 16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
</svg></button>
<button class="save_btn btn mx-8 bg-transparent hover:bg-transparent border-none p-0 m-0 hidden">
<div class="inline-block rotate-45 h-[24px] w-[12px] border-b-4 border-b-green-500 border-r-green-500 border-r-4 hover:border-b-green-300 hover:border-r-green-300"></div>
</button>
<button class="cancel_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0 hidden" >
<div class="w-[24px] h-[24px] before:absolute before:content-[' '] before:h-[32px] before:w-[2px] before:bg-red-600 before:rotate-45 after:absolute after:content-[' '] after:h-[32px] after:w-[2px] after:bg-red-600 after:-rotate-45 hover:before:bg-red-400 hover:after:bg-red-400"></div>
</button></td></td>
<td>
<button class="delete_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="red" x="0px" y="0px" viewBox="0 0 25 24.8" width="25" height="24" xml:space="preserve" class= "group icon-trashcan ct-delete" data-ember-action="" data-ember-action-1015="1015">
<g class="trashcan-open invisible group-hover:visible">
<path d="M18.7,24.4H5.9L4.9,7h14.9L18.7,24.4z M7.6,22.6H17l0.8-13.7h-11L7.6,22.6z"></path>
<polygon points="13.6,10.3 13.1,21.2 14.9,21.2 15.4,10.3 "></polygon>
<polygon points="11.5,21.2 11,10.3 9.2,10.3 9.7,21.2 "></polygon>
<path d="M19.1,0.7l-4.7,0.9l-0.8-1.4L8.2,1.3L8,3l-4.7,1l0.2,4.7l17.3-3.5L19.1,0.7z
M8.8,1.9l4.4 -1.0 l0.5,0.8
L8.7,2.8z
M5.2,6.4l0-1L18,2.8l0.3,0.9L5.2,6.4z"></path>
</g>
<g class="trashcan-closed group-hover:invisible">
<path d="M6.8,8.8h11L17,22.6
H7.6L6.8,8.8z
M4.9,7l1,17.4h12.8
l1-17.4
H4.9z"></path>
<polygon points="13.6,10.3 13.1,21.2 14.9,21.2 15.4,10.3 "></polygon>
<polygon points="11.5,21.2 11,10.3 9.2,10.3 9.7,21.2 "></polygon>
<path d="M20.4,4h-4.8l-0.5-1.6
H9.5L9,4
H4.2
L3.5,8.6h17.6
L20.4,4z
M9.9,3.2h4.8
L14.9,3.9h-5.2z
M5.6,6.7l0.2-1 h13l0.2,1
H5.6z"></path>
</g>
</svg>
</button>
</td>
</tr>
<tr class="notification_row text-center w-full hidden">
<td colspan="5"><div class="alert alert-error text-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>You have just deleted a row. Press <button class="undo_btn btn bg-transparent m-0 p-0 h-fit hover:bg-transparent border-none"><kbd class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">undo</kbd></button> to undo the action</span>
<button class="close_btn btn bg-transparent hover:bg-transparent broder-none p-0 m-0 "><svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-8 w-8" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></button>
</div></td>
</tr>
</tbody>
<script>
let allButtons = document.getElementsByClassName('btn');
for (let btn of allButtons) {
var url_value;
var glink_value;
btn.addEventListener('click', () => {
if (btn.classList.contains("close_btn")) {
let notificationRow = btn.parentElement.parentElement.parentElement;
notificationRow.classList.add("hidden");
} else if (btn.classList.contains("undo_btn")) {
let notificationRow = btn.parentElement.parentElement.parentElement.parentElement;
let row = notificationRow.parentElement.getElementsByClassName("data_row")[0];
row.classList.remove("hidden");
notificationRow.classList.add("hidden");
}
else {
var clickedElement = btn;
var clickedRow = clickedElement.parentElement.parentElement;
let txt = clickedRow.getElementsByClassName("glink_str")[0];
let url = clickedRow.getElementsByClassName("url_str")[0];
let edit = clickedRow.getElementsByClassName("edit_btn")[0];
let save = clickedRow.getElementsByClassName("save_btn")[0];
let cancel = clickedRow.getElementsByClassName("cancel_btn")[0];
if (btn.classList.contains("edit_btn") || btn.classList.contains("save_btn")) {
if (txt.readOnly) {
url_value = url.value;
glink_value = txt.value;
txt.readOnly = false;
url.readOnly = false;
txt.classList.add("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
url.classList.add("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
edit.classList.add("hidden");
save.classList.remove("hidden");
cancel.classList.remove("hidden");
txt.focus();
} else {
txt.readOnly = true;
url.readOnly = true;
txt.classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
url.classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
edit.classList.remove("hidden");
save.classList.add("hidden");
cancel.classList.add("hidden");
}
}
if (btn.classList.contains("cancel_btn")) {
txt.value = glink_value;
url.value = url_value;
txt.readOnly = true;
url.readOnly = true;
txt.classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
url.classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
edit.classList.remove("hidden");
save.classList.add("hidden");
cancel.classList.add("hidden");
}
if (btn.classList.contains("delete_btn")) {
let row = clickedRow;
let notification = row.parentElement.getElementsByClassName("notification_row")[0];
row.classList.add("hidden");
notification.classList.remove("hidden");
setTimeout(function () {
notification.classList.add("hidden");
}, 4000);
}
}
});
}
// function toggle(event) {
// var clickedElement = event.target;
// var clickedRow = clickedElement.parentElement.parentElement.parentElement;
// console.log(clickedRow);
// console.log(clickedElement.parentElement);
// console.log(clickedElement);
// clickedRow.classList.add("hidden");
// let txt = document.getElementById("link1");
// let url = document.getElementById("url1");
// let edit = document.getElementById("edit-icon");
// let save = document.getElementById("save-icon");
// let cancel = document.getElementById("cancel-icon");
// if (txt.readOnly) {
// url_value = url.value;
// glink_value = txt.value;
// txt.readOnly = false;
// url.readOnly = false;
// txt.classList.add("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
// url.classList.add("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
// edit.classList.add("hidden");
// save.classList.remove("hidden");
// cancel.classList.remove("hidden");
// txt.focus();
// } else {
// txt.readOnly = true;
// url.readOnly = true;
// txt.classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
// url.classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
// edit.classList.remove("hidden");
// save.classList.add("hidden");
// cancel.classList.add("hidden");
// }
// }
// function cancel1() {
// document.getElementById("link1").value = glink_value;
// document.getElementById("url1").value = url_value;
// document.getElementById("link1").classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
// document.getElementById("url1").classList.remove("outline-none", "ring-4", "ring-blue-500/50", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-blue-500/50", "focus:shadow-lg");
// document.getElementById("edit-icon").classList.remove("hidden");
// document.getElementById("save-icon").classList.add("hidden");
// document.getElementById("cancel-icon").classList.add("hidden");
// }
</script>
</table>
</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 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 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="" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
<p class="text-xl">
Step 1
</p>
</div>
<div class="flex flex-col items-center h-full lg:w-1/3 w-full">
<img src="" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
<p class="text-xl">
Step 2
</p>
</div>
<div class="flex flex-col items-center h-full lg:w-1/3 w-full">
<img src="" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
<p class="text-xl">
Step 3
</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 GLink?
</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>
<!-- <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>