Created a separate file for the dashboard
parent
e23845d012
commit
17e8afac8a
@ -0,0 +1,349 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Dashboard</title>
|
||||||
|
<link rel="stylesheet" href="output.css">
|
||||||
|
</head>
|
||||||
|
<body class="mx-[10%]">
|
||||||
|
<main class="m-10 h-auto w-auto ">
|
||||||
|
<!-- Navbar start -->
|
||||||
|
<div class="navbar bg-gray-800 rounded-lg 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="btn btn-circle swap swap-rotate ">
|
||||||
|
<input type="checkbox" class="opacity-0 w-full h-full "/>
|
||||||
|
<svg class="swap-off fill-emerald-400 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-400 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-base-100 rounded-box w-36 mt-4">
|
||||||
|
<li><a class="text-emerald-400 brightness-125">Create</a></li>
|
||||||
|
<li><a class="text-emerald-400 brightness-125">Signup</a></li>
|
||||||
|
<li><a class="text-emerald-400 brightness-125">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="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="form.html">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>
|
||||||
|
</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">
|
||||||
|
<div class="w-10 rounded-full cursor-pointer ">
|
||||||
|
<div class="w-full h-full bg-white rounded-full text-center"></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">
|
||||||
|
<li><a>My Links</a></li>
|
||||||
|
<li><a>Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Navbar end -->
|
||||||
|
<!-- Table start -->
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="table text-emerald-400 brightness-125 italic my-4">
|
||||||
|
<!-- head -->
|
||||||
|
<thead>
|
||||||
|
<tr class="text-emerald-400 brightness-125 text-xl font-bold 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="input input-bordered input-success glink_str text-center italic border-none rounded-lg focus:shadow-lg" readonly value="Link 1"></td>
|
||||||
|
<td><input type="text" class="input input-bordered input-success 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>
|
||||||
|
<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-black 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 2 -->
|
||||||
|
<tbody>
|
||||||
|
<tr class="data_row text-center" >
|
||||||
|
<th>2</th>
|
||||||
|
<td><input type="text" class="input input-bordered input-success glink_str text-center italic border-none rounded-lg focus:shadow-lg" readonly value="Link 1"></td>
|
||||||
|
<td><input type="text" class="input input-bordered input-success 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>
|
||||||
|
<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-black 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="input input-bordered input-success glink_str text-center italic border-none rounded-lg focus:shadow-lg" readonly value="Link 1"></td>
|
||||||
|
<td><input type="text" class="input input-bordered input-success 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>
|
||||||
|
<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-black 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-emerald-400", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-emerald-400", "focus:shadow-lg");
|
||||||
|
url.classList.add("outline-none", "ring-4", "ring-emerald-400", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-emerald-400", "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-emerald-400", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-emerald-400", "focus:shadow-lg");
|
||||||
|
url.classList.remove("outline-none", "ring-4", "ring-emerald-400", "shadow-lg", "focus:outline-none", "focus:ring-4", "focus:ring-emerald-400", "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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<!-- Table end -->
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue