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

Set theme for links.html, navbar to links.html, default theme from browser, fixed theme-button disparity

Browse Source
nodejs
Aravind142857 1 year ago
parent 37bed7697b
commit b6fb117ec3
3 changed files with 342 additions and 87 deletions
Show Stats Download Patch File Download Diff File

170
public/css/output.css
Unescape Escape View File

@ -926,6 +926,12 @@ html {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity)); background-color: hsl(var(--b2) / var(--tw-bg-opacity));
} }
.table-zebra tr.hover:hover,
.table-zebra tr.hover:nth-child(even):hover {
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
}
} }
.btn { .btn {
@ -3142,6 +3148,10 @@ html {
min-height: 100%; min-height: 100%;
} }
.min-h-screen {
min-height: 100vh;
}
.w-10 { .w-10 {
width: 2.5rem; width: 2.5rem;
} }
@ -3530,6 +3540,11 @@ html {
border-color: rgb(31 41 55 / var(--tw-border-opacity)); border-color: rgb(31 41 55 / var(--tw-border-opacity));
} }
.border-emerald-300 {
--tw-border-opacity: 1;
border-color: rgb(110 231 183 / var(--tw-border-opacity));
}
.border-b-green-500 { .border-b-green-500 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-bottom-color: rgb(34 197 94 / var(--tw-border-opacity)); border-bottom-color: rgb(34 197 94 / var(--tw-border-opacity));
@ -3669,6 +3684,61 @@ html {
background-color: rgb(254 240 138 / var(--tw-bg-opacity)); background-color: rgb(254 240 138 / var(--tw-bg-opacity));
} }
.bg-primary {
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
}
.bg-purple-300 {
--tw-bg-opacity: 1;
background-color: rgb(216 180 254 / var(--tw-bg-opacity));
}
.bg-fuchsia-300 {
--tw-bg-opacity: 1;
background-color: rgb(240 171 252 / var(--tw-bg-opacity));
}
.bg-rose-300 {
--tw-bg-opacity: 1;
background-color: rgb(253 164 175 / var(--tw-bg-opacity));
}
.bg-rose-700 {
--tw-bg-opacity: 1;
background-color: rgb(190 18 60 / var(--tw-bg-opacity));
}
.bg-rose-500 {
--tw-bg-opacity: 1;
background-color: rgb(244 63 94 / var(--tw-bg-opacity));
}
.bg-rose-400 {
--tw-bg-opacity: 1;
background-color: rgb(251 113 133 / var(--tw-bg-opacity));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-yellow-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 249 195 / var(--tw-bg-opacity));
}
.bg-green-100 {
--tw-bg-opacity: 1;
background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}
.bg-yellow-700 {
--tw-bg-opacity: 1;
background-color: rgb(161 98 7 / var(--tw-bg-opacity));
}
.bg-gradient-to-r { .bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops)); background-image: linear-gradient(to right, var(--tw-gradient-stops));
} }
@ -3805,6 +3875,26 @@ html {
fill: #eab308; fill: #eab308;
} }
.fill-emerald-600 {
fill: #059669;
}
.fill-emerald-300 {
fill: #6ee7b7;
}
.fill-blue-300 {
fill: #93c5fd;
}
.fill-blue-500 {
fill: #3b82f6;
}
.fill-\[\#0304f7\] {
fill: #0304f7;
}
.stroke-black { .stroke-black {
stroke: #000; stroke: #000;
} }
@ -3968,6 +4058,10 @@ html {
padding-right: 4rem; padding-right: 4rem;
} }
.pr-2 {
padding-right: 0.5rem;
}
.text-left { .text-left {
text-align: left; text-align: left;
} }
@ -4210,6 +4304,16 @@ html {
color: rgb(253 224 71 / var(--tw-text-opacity)); color: rgb(253 224 71 / var(--tw-text-opacity));
} }
.text-emerald-600 {
--tw-text-opacity: 1;
color: rgb(5 150 105 / var(--tw-text-opacity));
}
.text-emerald-700 {
--tw-text-opacity: 1;
color: rgb(4 120 87 / var(--tw-text-opacity));
}
.underline { .underline {
text-decoration-line: underline; text-decoration-line: underline;
} }
@ -4436,6 +4540,20 @@ input.valid {
color: red; color: red;
} }
@media (hover:hover) {
.table :is(.dark .dark\:hover)tr:hover,
.table :is(.dark .dark\:hover)tr:nth-child(even):hover {
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
}
.table-zebra :is(.dark .dark\:hover)tr:hover,
.table-zebra :is(.dark .dark\:hover)tr:nth-child(even):hover {
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
}
}
@media (hover: hover) { @media (hover: hover) {
:is(.dark .dark\:btn-success):hover { :is(.dark .dark\:btn-success):hover {
--tw-border-opacity: 1; --tw-border-opacity: 1;
@ -4730,6 +4848,10 @@ input.valid {
--tw-gradient-to: #60a5fa var(--tw-gradient-to-position); --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
} }
.hover\:fill-black:hover {
fill: #000;
}
.hover\:text-black:hover { .hover\:text-black:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity)); color: rgb(0 0 0 / var(--tw-text-opacity));
@ -4914,6 +5036,19 @@ input.valid {
--tw-gradient-to: #ec4899 var(--tw-gradient-to-position); --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
} }
.group:hover .group-hover\:fill-black {
fill: #000;
}
.group:hover .group-hover\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.group:focus .group-focus\:fill-black {
fill: #000;
}
.peer:checked ~ .peer-checked\:visible { .peer:checked ~ .peer-checked\:visible {
visibility: visible; visibility: visible;
} }
@ -4976,6 +5111,14 @@ input.valid {
--tw-gradient-to: #1f2937 var(--tw-gradient-to-position); --tw-gradient-to: #1f2937 var(--tw-gradient-to-position);
} }
:is(.dark .dark\:fill-emerald-400) {
fill: #34d399;
}
:is(.dark .dark\:fill-blue-500) {
fill: #3b82f6;
}
:is(.dark .dark\:text-\[\#BF991D\]) { :is(.dark .dark\:text-\[\#BF991D\]) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(191 153 29 / var(--tw-text-opacity)); color: rgb(191 153 29 / var(--tw-text-opacity));
@ -5006,6 +5149,16 @@ input.valid {
color: hsl(var(--su) / var(--tw-text-opacity)); color: hsl(var(--su) / var(--tw-text-opacity));
} }
:is(.dark .dark\:text-emerald-400) {
--tw-text-opacity: 1;
color: rgb(52 211 153 / var(--tw-text-opacity));
}
:is(.dark .dark\:text-gray-50) {
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity));
}
:is(.dark .dark\:hover\:border-none:hover) { :is(.dark .dark\:hover\:border-none:hover) {
border-style: none; border-style: none;
} }
@ -5024,11 +5177,20 @@ input.valid {
background-color: rgb(229 231 235 / 0.8); background-color: rgb(229 231 235 / 0.8);
} }
:is(.dark .dark\:hover\:fill-black:hover) {
fill: #000;
}
:is(.dark .dark\:hover\:text-slate-700:hover) { :is(.dark .dark\:hover\:text-slate-700:hover) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(51 65 85 / var(--tw-text-opacity)); color: rgb(51 65 85 / var(--tw-text-opacity));
} }
:is(.dark .dark\:hover\:text-white:hover) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
:is(.dark .dark\:hover\:shadow-\[\#C2B100\]\/50:hover) { :is(.dark .dark\:hover\:shadow-\[\#C2B100\]\/50:hover) {
--tw-shadow-color: rgb(194 177 0 / 0.5); --tw-shadow-color: rgb(194 177 0 / 0.5);
--tw-shadow: var(--tw-shadow-colored); --tw-shadow: var(--tw-shadow-colored);
@ -5044,6 +5206,14 @@ input.valid {
--tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity)); --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity));
} }
:is(.dark .group:hover .dark\:group-hover\:fill-black) {
fill: #000;
}
:is(.dark .group:hover .dark\:group-hover\:fill-white) {
fill: #fff;
}
@media (min-width: 640px) { @media (min-width: 640px) {
.sm\:mx-auto { .sm\:mx-auto {
margin-left: auto; margin-left: auto;

52
public/home.html
Unescape Escape View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html id="html-tag" lang="en" class="py-[0%] my-[0%]"> <html id="html-tag" lang="en" class="py-[0%] my-[0%]"> <!--html-tag facilitates dark mode and light mode -->
<head class="py-0 my-0 h-0"> <head class="py-0 my-0 h-0">
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Home</title> <title>Home</title>
@ -139,15 +139,15 @@
<!--Hamburger menu--> <!--Hamburger menu-->
<div class="lg:hidden" > <div class="lg:hidden" >
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">
<label class="btn btn-circle swap swap-rotate "> <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 "/> <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> <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"> <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> <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-base-100 rounded-box w-36 mt-4"> <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-400 brightness-125">Create</a></li> <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Create</a></li>
<li><a class="text-emerald-400 brightness-125">Signup</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-400 brightness-125">Login</a></li> <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Login</a></li>
</ul> </ul>
</div> </div>
</label> </label>
@ -162,8 +162,8 @@
<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> <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> </div>
<div class="justify-center items-center lg:flex mr-10 my-2 hidden"> <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" href="signup.html">Sign up</a> <a class="btn btn-outline dark:btn-success dark:text-success dark:bg-transparent border-yellow-300 text-yellow-300 hover:bg-yellow-400 hover:border-none hover:text-black brightness-125 lg:text-xl text-sm mr-8 lg:flex hidden" href="signup.html">Sign up</a>
<label class="swap swap-rotate"> <label class="swap swap-rotate">
<!-- this hidden checkbox controls the state --> <!-- this hidden checkbox controls the state -->
@ -187,6 +187,30 @@
// document.getElementById("moon").classList.add("swap-active"); // 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() { function changeMode() {
let html_tag = document.getElementById("html-tag") let html_tag = document.getElementById("html-tag")
@ -205,7 +229,7 @@
</script> </script>
</div> </div>
<div class="flex-none my-2"> <div class="flex-none my-2 mr-2">
<div class="dropdown dropdown-end"> <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"> <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">
@ -213,9 +237,9 @@
<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 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> </div>
</label> </label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-36"> <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 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" href="links.html">My Links</a></li>
<li><a>Logout</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> </ul>
</div> </div>
</div> </div>

207
public/links.html
Unescape Escape View File

@ -1,67 +1,130 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="bg-black"> <html id="html-tag" lang="en" class="py-[0%] my-[0%]">
<head> <head class="py-0 my-0 h-0">
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>My Links</title> <title>My Links</title>
<link rel="stylesheet" href="css/output.css"> <link rel="stylesheet" href="css/output.css">
</head> </head>
<body class="mx-[10%]"> <body class="w-full my-[0%] py-[0%] px-[10%] min-h-screen bg-gray-300 dark:bg-black">
<main class="m-10 h-auto w-auto "> <main class="h-auto w-auto py-[5%]">
<!-- Navbar start --> <!-- Navbar start -->
<div class="navbar bg-gray-800 rounded-lg shadow-xl shadow-black/50 z-[4] sticky top-0 mb-10"> <div class="navbar dark:from-gray-800 dark:to-gray-800 rounded-lg bg-gradient-to-r from-rose-400 via-blue-400 to-emerald-400 shadow-xl shadow-black/50 z-[4] sticky top-0 mb-10">
<div class="flex-1 lg:ml-4 ml-2 my-2"> <div class="flex-1 lg:ml-4 ml-2 my-2">
<!--Hamburger menu--> <!--Hamburger menu-->
<div class="lg:hidden" > <div class="lg:hidden" >
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">
<label class="btn btn-circle swap swap-rotate "> <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 "/> <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> <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"> <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> <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-base-100 rounded-box w-36 mt-4"> <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-400 brightness-125">Create</a></li> <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Create</a></li>
<li><a class="text-emerald-400 brightness-125">Signup</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-400 brightness-125">Login</a></li> <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Login</a></li>
</ul> </ul>
</div>
</label>
</ul>
</div> </div>
</label> <!-- Hamburger Menu ended -->
</ul>
</div>
<!-- Hamburger Menu ended -->
<div class="flex lg:justify-start lg:items-start justify-center items-center lg:w-auto w-full"> <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> <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>
<div class="w-full justify-center items-center lg:flex hidden"> <div class="w-full justify-center items-center lg:flex hidden">
<a class="btn btn-outline btn-success brightness-125 lg:text-xl text-sm" href="/">Create</a> <a class="btn btn-outline dark:btn-success dark:bg-transparent border-yellow-300 text-yellow-300 hover:bg-yellow-400 hover:border-none hover:text-black brightness-125 lg:text-xl text-sm" href="/">Create</a>
</div> </div>
</div> </div>
<div class="justify-center items-center lg:flex mr-10 my-2 hidden"> <div class="justify-center items-center lg:flex mr-10 my-2">
<a class="btn btn-outline btn-success brightness-125 lg:text-xl text-sm" href="signup.html">Signup</a> <a class="btn btn-outline dark:btn-success dark:text-success dark:bg-transparent border-yellow-300 text-yellow-300 hover:bg-yellow-400 hover:border-none hover:text-black brightness-125 lg:text-xl text-sm mr-8 lg:flex hidden" href="signup.html">Sign up</a>
</div> <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>
<div class="flex-none my-2"> </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();
}
});
<div class="dropdown dropdown-end"> function changeMode() {
<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"> let html_tag = document.getElementById("html-tag")
<div class="w-10 rounded-full cursor-pointer "> let box = document.getElementById("theme-switcher");
<div class="w-full h-full bg-white rounded-full text-center"></div> if (box.checked) {
</div> if (!html_tag.classList.contains("dark")) {
</label> html_tag.classList.add("dark");
<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> if (!box.checked) {
</ul> if (html_tag.classList.contains("dark")) {
</div> 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> </div>
</div>
<!-- Navbar end --> <!-- Navbar end -->
<!-- Table start --> <!-- Table start -->
<div class="overflow-x-auto"> <div class="overflow-x-auto ">
<table class="table text-emerald-400 brightness-125 italic my-4"> <table class="table text-gray-800 brightness-125 italic my-4 bg-green-100 dark:bg-gray-800">
<!-- head --> <!-- head -->
<thead> <thead>
<tr class="text-emerald-400 brightness-125 text-xl font-bold text-center"> <tr class="text-gray-800 dark:text-gray-50 brightness-125 text-xl font-bold text-center border-none">
<th></th> <th></th>
<th>gLink</th> <th>gLink</th>
<th>URL</th> <th>URL</th>
@ -71,16 +134,15 @@
</thead> </thead>
<tbody> <tbody>
<!-- row 1 --> <!-- row 1 -->
<tr class="data_row text-center" > <tr class="data_row text-center border-none" >
<th>1</th> <th class="dark:bg-transparent dark:text-white">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="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="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><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> <td>
<button class="edit_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0" onclick = " "> <button class="edit_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0">
<svg width="24" <svg width="24"
height="24" height="24"
fill="blue" class="bi bi-pencil dark:fill-blue-500 fill-[#0304f7]"
class="bi bi-pencil"
viewBox="0 0 16 16"> 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"/> <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> </svg></button>
@ -128,7 +190,7 @@
</button> </button>
</td> </td>
</tr> </tr>
<tr class="notification_row text-center w-full hidden"> <tr class="notification_row text-center w-full hidden border-none">
<td colspan="5"><div class="alert alert-error text-lg"> <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> <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> <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>
@ -138,16 +200,15 @@
</tbody> </tbody>
<!-- row 2 --> <!-- row 2 -->
<tbody> <tbody>
<tr class="data_row text-center" > <tr class="data_row text-center border-none" >
<th>2</th> <th class="dark:bg-transparent dark:text-white">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="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="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><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> <td>
<button class="edit_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0" onclick = " "> <button class="edit_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0" >
<svg width="24" <svg width="24"
class="bi bi-pencil dark:fill-blue-500 fill-[#0304f7]"
height="24" height="24"
fill="blue"
class="bi bi-pencil"
viewBox="0 0 16 16"> 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"/> <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> </svg></button>
@ -195,7 +256,7 @@
</button> </button>
</td> </td>
</tr> </tr>
<tr class="notification_row text-center w-full hidden"> <tr class="notification_row text-center w-full hidden border-none">
<td colspan="5"><div class="alert alert-error text-lg"> <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> <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> <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>
@ -205,15 +266,15 @@
</tbody> </tbody>
<!-- row 3 --> <!-- row 3 -->
<tbody> <tbody>
<tr class="data_row text-center" > <tr class="data_row text-center border-none" >
<th>3</th> <th class="dark:bg-transparent dark:text-white">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="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="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><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> <td>
<button class="edit_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0" onclick = " "> <button class="edit_btn btn bg-transparent hover:bg-transparent border-none p-0 m-0">
<svg width="24" <svg class="dark:fill-blue-500 fill-[#0304f7]"
width="24"
height="24" height="24"
fill="blue"
class="bi bi-pencil" class="bi bi-pencil"
viewBox="0 0 16 16"> 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"/> <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"/>
@ -262,7 +323,7 @@
</button> </button>
</td> </td>
</tr> </tr>
<tr class="notification_row text-center w-full hidden"> <tr class="notification_row text-center w-full hidden border-none">
<td colspan="5"><div class="alert alert-error text-lg"> <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> <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> <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>

Write Preview
Loading…
Cancel
Save