Cloned2Preserve
/
bookmarks-separator
mirror of https://github.com/AAAC290992/bookmarks-separator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

init

This commit is contained in:
AAAC290992 2023-01-10 12:59:30 -06:00 committed by GitHub
parent e03d6d0f2d
commit c872d67aed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 71 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="flex justify-center justify-items-center flex-col h-full"> <html lang="en" class="flex justify-between items-center flex-col h-full">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -12,77 +12,78 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
</head> </head>
<body class="flex justify-center items-center flex-col h-full bg-gray-100 dark:bg-gray-900"> <body class="flex justify-between items-center flex-col h-full bg-gray-100 dark:bg-gray-900">
<div class="container mx-auto mb-10"> <main class="flex justify-center items-center flex-col h-max sm:h-full w-11/12 sm:max-w-md py-10">
<h1 class="text-4xl font-semibold text-center dark:text-white">Bookmarks Separator</h1> <div class="mb-10">
<p class="mt-3 text-lg leading-8 text-gray-600 dark:text-gray-500 text-center">Workaround for the missing bookmark separators in Chrome</p> <h1 class="text-4xl font-semibold text-center dark:text-white">Bookmarks Separator</h1>
</div> <p class="mt-3 text-lg leading-8 text-gray-600 dark:text-gray-500 text-center">Workaround for the missing bookmark separators in Chrome</p>
<div class="container mx-auto"> </div>
<div class="max-w-md mx-auto bg-white dark:bg-slate-800 overflow-hidden rounded-lg shadow"> <div class="">
<div id="icon" class="bg-white p-6 pb-5 pt-8"> <div class="bg-white dark:bg-slate-800 overflow-hidden rounded-lg shadow">
<div class="text-center text-sm"> <div id="icon" class="bg-white p-6 pb-5 pt-8">
<div> <div class="text-center text-sm">
<div class="flex flex-row justify-center items-stretch max-w-max mx-auto cursor-not-allowed"> <div>
<div class="w-6 grow bg-gray-200 dark:bg-gray-800"> <div class="flex flex-row justify-center items-stretch max-w-max mx-auto cursor-not-allowed">
<div class="h-full w-full rounded-br-xl bg-white"></div> <div class="w-6 grow bg-gray-800">
</div> <div class="h-full w-full rounded-br-xl bg-white"></div>
<div class="flex flex-row justify-center items-center max-w-max mx-auto p-2 rounded-t-xl bg-gray-200 dark:bg-gray-800">
<div>
<a href="" title="Drag me!" class="block w-9 h-9 cursor-grab p-2 shadow-lg hover:shadow-md rounded-md overflow-hidden transition-all bg-white">
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
<line x1="8" x2="8" y1="0" y2="16" stroke="red" stroke-width="2" />
</svg>
</a>
</div> </div>
<div class="text-gray-900 dark:text-white text-lg max-h-max leading-none ml-4 grow-0 w-12 overflow-hidden whitespace-nowrap"> <div class="flex flex-row justify-center items-center max-w-max mx-auto p-2 rounded-t-xl bg-gray-800">
Bookmarks Separator <div>
<a href="" title="Drag me!" class="block w-9 h-9 cursor-grab p-2 shadow-lg hover:shadow-md rounded-md overflow-hidden transition-all bg-white">
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'></svg>
</a>
</div>
<div class="text-white text-lg max-h-max leading-none ml-4 grow-0 w-12 overflow-hidden whitespace-nowrap">
Bookmarks Separator
</div>
<div class="pl-4 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="12" class="fill-white mt-px"><path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"/></svg>
</div>
</div> </div>
<div class="pl-4 pr-2"> <div class="w-6 grow bg-gray-800">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="12" class="fill-gray-900 dark:fill-white mt-px"><path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"/></svg> <div class="h-full w-full rounded-bl-xl bg-white"></div>
</div> </div>
</div> </div>
<div class="w-6 grow bg-gray-200 dark:bg-gray-800">
<div class="h-full w-full rounded-bl-xl bg-white"></div>
</div>
</div> </div>
</div> <div>
<div> <p class="mt-5 text-xs leading-5 text-gray-500 text-center">
<p class="mt-5 text-xs leading-5 text-gray-500 text-center"> <span class="font-semibold text-gray-800">Instructions:</span> Generate your separator and drag the icon to your bookmarks. Click <span class="italic">'Reset'</span> for transparent separator.
<span class="font-semibold text-gray-800">Instructions:</span> Generate your separator and drag the icon to your bookmark. Click <span class="italic">'Reset'</span> for transparent separator. </p>
</p>
</div>
</div>
</div>
<div id="form" class="border-t border-gray-200">
<form action="" method="GET">
<div class="bg-white p-6">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6">
<label for="orientation" class="block text-sm font-medium text-gray-700">Orientation</label>
<select name="orientation" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
<option value="vertical">Vertical</option>
<option value="horizontal">Horizontal</option>
</select>
</div>
<div class="col-span-6">
<label for="width" class="block text-sm font-medium text-gray-700">Bar width</label>
<input type="number" name="width" min="0" max="16" placeholder="0-16" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
</div>
<div class="col-span-6">
<label for="color" class="block text-sm font-medium text-gray-700">Bar color</label>
<input type="text" name="color" placeholder="css colors: hex, red" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
</div>
</div> </div>
</div> </div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6"> </div>
<button type="submit" class="inline-flex w-full justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">Generate</button> <div id="form" class="border-t border-gray-200">
<button onclick="window.location.replace(location.pathname);return false;" class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Reset</button> <form action="" method="GET">
</div> <div class="bg-white p-6">
</form> <div class="grid grid-cols-6 gap-6">
</div> <div class="col-span-6">
</div> <label for="style" class="block text-sm font-medium text-gray-700">Style</label>
</div> <select name="style" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
<footer class="absolute bottom-0 w-full"> <option value="vertical">Vertical Bar</option>
<option value="horizontal">Horizontal Bar</option>
<option value="circle">Circle</option>
</select>
</div>
<div class="col-span-6">
<label for="width" class="block text-sm font-medium text-gray-700">Size</label>
<input type="number" name="width" min="0" max="16" placeholder="0-16" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
</div>
<div class="col-span-6">
<label for="color" class="block text-sm font-medium text-gray-700">Color</label>
<input type="text" name="color" placeholder="HEX, RGB(A), CSS Color Names" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="submit" class="inline-flex w-full justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">Generate</button>
<button onclick="window.location.replace(location.pathname);return false;" class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Reset</button>
</div>
</form>
</div>
</div>
</div>
</main>
<footer class="">
<div class="p-6"> <div class="p-6">
<p class="text-center text-xs text-gray-500">Version 1.0 made by <a href="https://github.com/AAAC290992" target="_blank" class="font-semibold text-gray-600 hover:underline">@AAAC290992</a> (on <a href="https://github.com/AAAC290992/bookmarks-separator/" target="_blank" class="font-semibold text-gray-600 hover:underline">GitHub</a>)</p> <p class="text-center text-xs text-gray-500">Version 1.0 made by <a href="https://github.com/AAAC290992" target="_blank" class="font-semibold text-gray-600 hover:underline">@AAAC290992</a> (on <a href="https://github.com/AAAC290992/bookmarks-separator/" target="_blank" class="font-semibold text-gray-600 hover:underline">GitHub</a>)</p>
</div> </div>
@ -93,13 +94,15 @@
r = document.querySelector('form'), r = document.querySelector('form'),
f = document.querySelector('link[rel="icon"]'), f = document.querySelector('link[rel="icon"]'),
p = new URLSearchParams(window.location.search), p = new URLSearchParams(window.location.search),
o = p.get('orientation'), o = p.get('style'),
c = p.get('color'), c = p.get('color'),
w = p.get('width'), w = p.get('width'),
s = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><line ${ o === 'vertical' ? 'x1="8" x2="8" y1="0" y2="16"' : 'x1="0" x2="16" y1="8" y2="8"' } stroke="${c}" stroke-width="${w}"/></svg>`; l = `<line ${ o === 'vertical' ? 'x1="8" x2="8" y1="0" y2="16"' : 'x1="0" x2="16" y1="8" y2="8"' } stroke="${c}" stroke-width="${w}"/>`,
v = `<circle cx="8" cy="8" r="${w/2}" fill="${c}"/>`,
s = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">${ o === 'circle' ? v : l }</svg>`;
a.innerHTML = s; a.innerHTML = s;
f.href = `data:image/svg+xml,${encodeURIComponent(s)}`; f.href = `data:image/svg+xml,${encodeURIComponent(s)}`;
r.orientation.value = o || 'vertical'; r.style.value = o || 'vertical';
r.width.value = w; r.width.value = w;
r.color.value = c; r.color.value = c;
})(); })();