383 lines
16 KiB
HTML
383 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
id="viewport"
|
|
name="viewport"
|
|
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
|
/>
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta
|
|
name="apple-mobile-web-app-status-bar-style"
|
|
content="black-translucent"
|
|
/>
|
|
<meta name="theme-color" content="#D2B48C" />
|
|
|
|
<title>AnthoLume - Reader</title>
|
|
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<link rel="stylesheet" href="/assets/style.css" />
|
|
|
|
<!-- Libraries -->
|
|
<script src="/assets/lib/jszip.min.js"></script>
|
|
<script src="/assets/lib/epub.min.js"></script>
|
|
<script src="/assets/lib/no-sleep.min.js"></script>
|
|
<script src="/assets/lib/idb-keyval.min.js"></script>
|
|
|
|
<!-- Reader -->
|
|
<script src="/assets/common.js"></script>
|
|
<script src="/assets/index.js"></script>
|
|
<script src="/assets/reader/index.js"></script>
|
|
|
|
<style>
|
|
/* ----------------------------- */
|
|
/* -------- PWA Styling -------- */
|
|
/* ----------------------------- */
|
|
html,
|
|
body {
|
|
overscroll-behavior-y: none;
|
|
margin: 0px;
|
|
}
|
|
|
|
html {
|
|
min-height: calc(100% + env(safe-area-inset-top));
|
|
}
|
|
|
|
#viewer {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
/* For Webkit-based browsers (Chrome, Safari and Opera) */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* For IE, Edge and Firefox */
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
#bottom-bar {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
#top-bar {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
#top-bar:not(.top-0) {
|
|
top: calc((8em + env(safe-area-inset-top)) * -1);
|
|
}
|
|
|
|
select:invalid {
|
|
color: gray;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 dark:bg-gray-800">
|
|
<main class="relative overflow-hidden h-[100dvh]">
|
|
<div
|
|
id="top-bar"
|
|
class="transition-all duration-200 absolute z-10 bg-gray-100 dark:bg-gray-800 w-full px-2"
|
|
>
|
|
<div class="w-full h-32 flex items-center justify-around relative">
|
|
<div class="text-gray-500 absolute top-6 left-4 flex flex-col gap-4">
|
|
<a href="#">
|
|
<svg
|
|
width="32"
|
|
height="32"
|
|
class="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 7.28595 22 4.92893 20.5355 3.46447ZM14.0303 8.46967C14.3232 8.76256 14.3232 9.23744 14.0303 9.53033L11.5607 12L14.0303 14.4697C14.3232 14.7626 14.3232 15.2374 14.0303 15.5303C13.7374 15.8232 13.2626 15.8232 12.9697 15.5303L9.96967 12.5303C9.82902 12.3897 9.75 12.1989 9.75 12C9.75 11.8011 9.82902 11.6103 9.96967 11.4697L12.9697 8.46967C13.2626 8.17678 13.7374 8.17678 14.0303 8.46967Z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<svg
|
|
width="32"
|
|
height="32"
|
|
class="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100 close-top-bar"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22ZM8.96965 8.96967C9.26254 8.67678 9.73742 8.67678 10.0303 8.96967L12 10.9394L13.9696 8.96969C14.2625 8.6768 14.7374 8.6768 15.0303 8.96969C15.3232 9.26258 15.3232 9.73746 15.0303 10.0303L13.0606 12L15.0303 13.9697C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73744 15.3232 9.26256 15.3232 8.96967 15.0303C8.67678 14.7374 8.67678 14.2626 8.96967 13.9697L10.9393 12L8.96965 10.0303C8.67676 9.73744 8.67676 9.26256 8.96965 8.96967Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex gap-10 h-full p-4 pl-14 rounded">
|
|
<div class="h-full my-auto relative">
|
|
<a href="#">
|
|
<img
|
|
class="rounded object-cover h-full"
|
|
src="/assets/images/no-cover.jpg"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div class="flex gap-7 justify-around dark:text-white text-sm">
|
|
<div class="flex flex-col gap-4">
|
|
<div class="inline-flex shrink-0 items-center">
|
|
<div>
|
|
<p class="text-gray-400">Title</p>
|
|
<p
|
|
class="font-medium whitespace-nowrap text-ellipsis overflow-hidden max-w-[50dvw]"
|
|
>
|
|
"N/A"
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="inline-flex shrink-0 items-center">
|
|
<div>
|
|
<p class="text-gray-400">Author</p>
|
|
<p
|
|
class="font-medium whitespace-nowrap text-ellipsis overflow-hidden max-w-[50dvw]"
|
|
>
|
|
"N/A"
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="bottom-bar"
|
|
class="-bottom-28 transition-all duration-200 absolute z-10 bg-gray-100 dark:bg-gray-800 items-center flex w-full overflow-y-scroll snap-x snap-mandatory no-scrollbar"
|
|
>
|
|
<div
|
|
class="items-center flex flex-col w-screen h-full flex-none snap-center p-2"
|
|
>
|
|
<div
|
|
class="flex flex-wrap gap-2 justify-around w-full dark:text-white pb-2"
|
|
>
|
|
<div class="flex justify-center gap-2 w-full md:w-fit">
|
|
<p class="text-gray-400 text-xs">Chapter:</p>
|
|
<p id="chapter-name-status" class="text-xs">N/A</p>
|
|
</div>
|
|
<div class="inline-flex gap-2">
|
|
<p class="text-gray-400 text-xs">Chapter Pages:</p>
|
|
<p id="chapter-status" class="text-xs">N/A</p>
|
|
</div>
|
|
<div class="inline-flex gap-2">
|
|
<p class="text-gray-400 text-xs">Progress:</p>
|
|
<p id="progress-status" class="text-xs">N/A</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-[90%] h-2 rounded border border-gray-500">
|
|
<div
|
|
id="progress-bar-status"
|
|
class="w-0 bg-green-200 h-full rounded-l"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="items-center flex flex-col w-screen h-full flex-none snap-center p-2"
|
|
>
|
|
<p class="text-gray-400">Theme</p>
|
|
<div class="flex justify-around w-full gap-4 p-2 text-sm">
|
|
<div
|
|
class="color-scheme cursor-pointer rounded border border-white bg-[#fff] text-[#000] grow text-center"
|
|
>
|
|
light
|
|
</div>
|
|
<div
|
|
class="color-scheme cursor-pointer rounded border border-white bg-[#d2b48c] text-[#333] grow text-center"
|
|
>
|
|
tan
|
|
</div>
|
|
<div
|
|
class="color-scheme cursor-pointer rounded border border-white bg-[#1f2937] text-[#fff] grow text-center"
|
|
>
|
|
blue
|
|
</div>
|
|
<div
|
|
class="color-scheme cursor-pointer rounded border border-white bg-[#232323] text-[#fff] grow text-center"
|
|
>
|
|
gray
|
|
</div>
|
|
<div
|
|
class="color-scheme cursor-pointer rounded border border-white bg-[#000] text-[#ccc] grow text-center"
|
|
>
|
|
black
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="items-center flex flex-col w-screen h-full flex-none snap-center p-2"
|
|
>
|
|
<p class="text-gray-400">Font</p>
|
|
<div class="flex justify-around w-full gap-4 p-2 text-sm">
|
|
<div
|
|
class="font-family cursor-pointer rounded border border-white grow text-center dark:text-white"
|
|
>
|
|
Serif
|
|
</div>
|
|
<div
|
|
class="font-family cursor-pointer rounded border border-white grow text-center dark:text-white"
|
|
>
|
|
Open Sans
|
|
</div>
|
|
<div
|
|
class="font-family cursor-pointer rounded border border-white grow text-center dark:text-white"
|
|
>
|
|
Arbutus Slab
|
|
</div>
|
|
<div
|
|
class="font-family cursor-pointer rounded border border-white grow text-center dark:text-white"
|
|
>
|
|
Lato
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="items-center flex flex-col w-screen h-full flex-none snap-center p-2"
|
|
>
|
|
<p class="text-gray-400">Font Size</p>
|
|
<div class="flex justify-around w-full gap-4 p-2 text-sm">
|
|
<div
|
|
class="font-size cursor-pointer rounded border border-white grow text-center dark:text-white"
|
|
>
|
|
-
|
|
</div>
|
|
<div
|
|
class="font-size cursor-pointer rounded border border-white grow text-center dark:text-white"
|
|
>
|
|
+
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="viewer" class="w-full h-full"></div>
|
|
</main>
|
|
|
|
<!-- Device Selector -->
|
|
<div
|
|
id="device-selector"
|
|
class="hidden absolute top-0 left-0 w-full h-full z-50"
|
|
>
|
|
<div
|
|
class="fixed top-0 left-0 bg-black opacity-50 w-screen h-screen"
|
|
></div>
|
|
<div
|
|
class="relative flex flex-col gap-4 p-4 max-h-[95%] w-5/6 md:w-1/2 bg-white dark:bg-gray-800 overflow-scroll -translate-x-2/4 -translate-y-2/4 top-1/2 left-1/2 overflow-hidden shadow rounded"
|
|
>
|
|
<div class="text-center flex flex-col gap-2">
|
|
<h3 class="text-lg font-bold leading-6 dark:text-gray-300">
|
|
Select Device
|
|
</h3>
|
|
|
|
<p class="text-xs text-gray-500 text-center">
|
|
This device appears to be new! Please either assume an existing
|
|
device, or create a new one.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
|
|
>
|
|
<div class="flex gap-4 flex-col">
|
|
<div class="flex relative min-w-[12em]">
|
|
<span
|
|
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
|
|
>
|
|
<svg
|
|
width="15"
|
|
height="15"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M5.65517 2.22732C5.2225 2.34037 4.9438 2.50021 4.72718 2.71244C4.42179 3.01165 4.22268 3.43172 4.11382 4.225C4.00176 5.04159 4 6.12387 4 7.67568V16.2442C4.38867 15.9781 4.82674 15.7756 5.29899 15.6517C5.41296 15.6217 5.53103 15.5983 5.65517 15.5799V2.22732Z"
|
|
/>
|
|
<path
|
|
d="M7.31034 15.5135C7.32206 15.5135 7.33382 15.5135 7.34563 15.5135L20 15.5135V7.67568C20 6.12387 19.9982 5.04159 19.8862 4.22499C19.7773 3.43172 19.5782 3.01165 19.2728 2.71244C18.9674 2.41324 18.5387 2.21816 17.729 2.11151C16.8955 2.00172 15.7908 2 14.2069 2H9.7931C8.79138 2 7.98133 2.00069 7.31034 2.02897V15.5135Z"
|
|
/>
|
|
<path
|
|
d="M7.47341 17.1351C6.39395 17.1351 6.01657 17.1421 5.72738 17.218C4.93365 17.4264 4.30088 18.0044 4.02952 18.7558C4.0463 19.1382 4.07259 19.4746 4.11382 19.775C4.22268 20.5683 4.42179 20.9884 4.72718 21.2876C5.03258 21.5868 5.46135 21.7818 6.27103 21.8885C7.10452 21.9983 8.2092 22 9.7931 22H14.2069C15.7908 22 16.8955 21.9983 17.729 21.8885C18.5387 21.7818 18.9674 21.5868 19.2728 21.2876C19.5782 20.9884 19.7773 20.5683 19.8862 19.775C19.9776 19.1088 19.9956 18.2657 19.9991 17.1351H7.47341Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<select
|
|
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
|
|
id="source"
|
|
name="source"
|
|
required
|
|
>
|
|
<option value="" disabled selected hidden>
|
|
Select Existing Device
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
class="px-10 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2"
|
|
>
|
|
<span class="w-full">Assume Device</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
|
|
>
|
|
<div class="flex gap-4 flex-col">
|
|
<div class="flex flex-col w-full grow">
|
|
<div class="flex relative">
|
|
<span
|
|
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
|
|
>
|
|
<svg
|
|
width="15"
|
|
height="15"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M5.65517 2.22732C5.2225 2.34037 4.9438 2.50021 4.72718 2.71244C4.42179 3.01165 4.22268 3.43172 4.11382 4.225C4.00176 5.04159 4 6.12387 4 7.67568V16.2442C4.38867 15.9781 4.82674 15.7756 5.29899 15.6517C5.41296 15.6217 5.53103 15.5983 5.65517 15.5799V2.22732Z"
|
|
/>
|
|
<path
|
|
d="M7.31034 15.5135C7.32206 15.5135 7.33382 15.5135 7.34563 15.5135L20 15.5135V7.67568C20 6.12387 19.9982 5.04159 19.8862 4.22499C19.7773 3.43172 19.5782 3.01165 19.2728 2.71244C18.9674 2.41324 18.5387 2.21816 17.729 2.11151C16.8955 2.00172 15.7908 2 14.2069 2H9.7931C8.79138 2 7.98133 2.00069 7.31034 2.02897V15.5135Z"
|
|
/>
|
|
<path
|
|
d="M7.47341 17.1351C6.39395 17.1351 6.01657 17.1421 5.72738 17.218C4.93365 17.4264 4.30088 18.0044 4.02952 18.7558C4.0463 19.1382 4.07259 19.4746 4.11382 19.775C4.22268 20.5683 4.42179 20.9884 4.72718 21.2876C5.03258 21.5868 5.46135 21.7818 6.27103 21.8885C7.10452 21.9983 8.2092 22 9.7931 22H14.2069C15.7908 22 16.8955 21.9983 17.729 21.8885C18.5387 21.7818 18.9674 21.5868 19.2728 21.2876C19.5782 20.9884 19.7773 20.5683 19.8862 19.775C19.9776 19.1088 19.9956 18.2657 19.9991 17.1351H7.47341Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
|
|
placeholder="New Device Name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="px-10 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2"
|
|
>
|
|
<span class="w-full">Create Device</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|