<!DOCTYPE html> <html id="html-tag" lang="en" class="py-[0%] my-[0%]"> <head class="py-0 my-0 h-0"> <meta charset="UTF-8"> <title>My Links</title> <link rel="stylesheet" href="css/output.css"> </head> <body class="w-full my-[0%] py-[0%] px-[10%] min-h-screen bg-gray-300 dark:bg-black"> <main class="h-auto w-auto py-[5%]"> <!-- Navbar start --> <div class="navbar dark:from-gray-800 dark:to-gray-800 rounded-lg bg-gradient-to-r from-rose-400 via-blue-400 to-emerald-400 shadow-xl shadow-black/50 z-[4] sticky top-0 mb-10"> <div class="flex-1 lg:ml-4 ml-2 my-2"> <!--Hamburger menu--> <div class="lg:hidden" > <ul class="menu menu-horizontal px-1"> <label class="group btn btn-circle bg-transparent dark:bg-gray-800 swap swap-rotate border-emerald-300"> <input type="checkbox" class="opacity-0 w-full h-full "/> <svg class="swap-off fill-emerald-300 group-hover:fill-black dark:fill-emerald-400 dark:group-hover:fill-white brightness-125" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"/></svg> <div class="dropdown dropdown-open swap-on"> <svg class="fill-emerald-300 group-hover:fill-black dark:fill-emerald-400 dark:group-hover:fill-white brightness-125" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"/></svg> <ul tabindex="0" class="menu dropdown-content z-[1] p-2 shadow bg-green-100 dark:bg-gray-800 rounded-box w-36 mt-4"> <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Create</a></li> <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Signup</a></li> <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Login</a></li> </ul> </div> </label> </ul> </div> <!-- Hamburger Menu ended --> <div class="flex lg:justify-start lg:items-start justify-center items-center lg:w-auto w-full"> <a class="btn btn-ghost normal-case text-xl text-emerald-400 brightness-125"><img src="images/GLink-Logo-alt.svg" class="h-full "></a> </div> <div class="w-full justify-center items-center lg:flex hidden"> <a class="btn btn-outline dark:btn-success dark:bg-transparent border-yellow-300 text-yellow-300 hover:bg-yellow-400 hover:border-none hover:text-black brightness-125 lg:text-xl text-sm" href="/">Create</a> </div> </div> <div class="justify-center items-center lg:flex mr-10 my-2"> <a class="btn btn-outline dark:btn-success dark:text-success dark:bg-transparent border-yellow-300 text-yellow-300 hover:bg-yellow-400 hover:border-none hover:text-black brightness-125 lg:text-xl text-sm mr-8 lg:flex hidden" href="signup.html">Sign up</a> <label class="swap swap-rotate"> <!-- this hidden checkbox controls the state --> <input type="checkbox" id="theme-switcher" class="h-full w-full hidden" onclick="changeMode()"/> <!-- sun icon --> <svg id="sun" class="swap-on fill-yellow-500 w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41Z" fill="yellow"/> <path d="M12,6.5A5.5,5.5,0,1,0,17.5,12A5.51,5.51,0,0,0,12,6.5Z" fill="yellow" /></svg> <!-- moon icon --> <svg id="moon" class="swap-off fill-white w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" fill="white"/></svg> </label> <script> // window.onload = function(){ // if (document.getElementById("html-tag").contains("dark")) { // console.log("dark"); // document.getElementById("sun").classList.add("swap-active"); // } else { // console.log("light"); // document.getElementById("moon").classList.add("swap-active"); // } // } window.addEventListener('load', function(){ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.getElementById("theme-switcher").checked = true; console.log("prefers dark"); changeMode(); } else { document.getElementById("theme-switcher").checked = false; console.log("prefers light"); changeMode(); } }); window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change',({ matches }) => { if (matches) { console.log("change to dark mode!"); document.getElementById("theme-switcher").checked = true; changeMode(); } else { console.log("change to light mode!"); document.getElementById("theme-switcher").checked = false; changeMode(); } }); function changeMode() { let html_tag = document.getElementById("html-tag") let box = document.getElementById("theme-switcher"); if (box.checked) { if (!html_tag.classList.contains("dark")) { html_tag.classList.add("dark"); } } if (!box.checked) { if (html_tag.classList.contains("dark")) { html_tag.classList.remove("dark"); } } } </script> </div> <div class="flex-none my-2 mr-2"> <div class="dropdown dropdown-end"> <label tabindex="0" class="btn btn-ghost btn-circle avatar border border-2 border-gray-800 dark:border-emerald-500 brightness-125 hover:border-none hover:ring-2 hover:ring-gray-800 dark:hover:ring-emerald-400 focus:ring-2 focus:ring-gray-800 dark:focus:ring-emerald-400"> <div class="w-10 rounded-full cursor-pointer "> <div class="w-full h-full bg-yellow-200 rounded-full flex justify-center items-center"><h1 class="self-center text-xl font-bold font-serif">B</h1></div> </div> </label> <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-green-100 dark:bg-gray-800 rounded-box w-36"> <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 font-bold uppercase dark:hover:text-white" href="links.html">My Links</a></li> <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 font-bold uppercase dark:hover:text-white">Logout</a></li> </ul> </div> </div> </div> <!-- Navbar end --> <!-- Table start --> <div class="overflow-x-auto "> <table class="table text-gray-800 brightness-125 italic my-4 bg-green-100 dark:bg-gray-800"> <!-- head --> <thead> <tr class="text-gray-800 dark:text-gray-50 brightness-125 text-xl font-bold text-center border-none"> <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 border-none" > <th class="dark:bg-transparent dark:text-white">1</th> <td><input type="text" class="dark:bg-transparent dark:text-white 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="dark:bg-transparent dark:text-white 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"> <svg width="24" height="24" class="bi bi-pencil dark:fill-blue-500 fill-[#0304f7]" 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 border-none"> <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 border-none" > <th class="dark:bg-transparent dark:text-white">2</th> <td><input type="text" class="dark:bg-transparent dark:text-white 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="dark:bg-transparent dark:text-white 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" > <svg width="24" class="bi bi-pencil dark:fill-blue-500 fill-[#0304f7]" height="24" 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 border-none"> <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 border-none" > <th class="dark:bg-transparent dark:text-white">3</th> <td><input type="text" class="dark:bg-transparent dark:text-white 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="dark:bg-transparent dark:text-white 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"> <svg class="dark:fill-blue-500 fill-[#0304f7]" width="24" height="24" 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 border-none"> <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>