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
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> |