180 lines
6.0 KiB
HTML
180 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=0.90, 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="#F3F4F6"
|
|
media="(prefers-color-scheme: light)"
|
|
/>
|
|
<meta
|
|
name="theme-color"
|
|
content="#1F2937"
|
|
media="(prefers-color-scheme: dark)"
|
|
/>
|
|
|
|
<title>Book Manager - Offline</title>
|
|
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<link rel="stylesheet" href="/assets/style.css" />
|
|
|
|
<script src="/assets/lib/idb-keyval.js"></script>
|
|
<script src="/assets/lib/sw-helper.js"></script>
|
|
<script src="/assets/index.js"></script>
|
|
<script src="/assets/offline/index.js"></script>
|
|
|
|
<style>
|
|
/* ----------------------------- */
|
|
/* -------- PWA Styling -------- */
|
|
/* ----------------------------- */
|
|
html,
|
|
body {
|
|
overscroll-behavior-y: none;
|
|
margin: 0px;
|
|
}
|
|
|
|
html {
|
|
height: calc(100% + env(safe-area-inset-bottom));
|
|
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
|
|
env(safe-area-inset-left);
|
|
}
|
|
|
|
main {
|
|
height: calc(100dvh - 4rem - env(safe-area-inset-top));
|
|
}
|
|
|
|
#container {
|
|
padding-bottom: calc(5em + env(safe-area-inset-bottom) * 2);
|
|
}
|
|
|
|
/* No Scrollbar - IE, Edge, Firefox */
|
|
* {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* No Scrollbar - WebKit */
|
|
*::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.css-button:checked + div {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.css-button + div {
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.css-button:checked + div + label {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 dark:bg-gray-800">
|
|
<div class="flex items-center justify-between w-full h-16">
|
|
<h1 class="text-xl font-bold dark:text-white px-6 lg:ml-48">
|
|
Offline Documents
|
|
</h1>
|
|
</div>
|
|
|
|
<main class="relative overflow-hidden">
|
|
<div
|
|
id="container"
|
|
class="h-[100dvh] px-4 overflow-auto md:px-6 lg:mx-48"
|
|
>
|
|
<div
|
|
id="online"
|
|
class="rounded text-white bg-white dark:bg-gray-700 text-center p-3 mb-4"
|
|
>
|
|
You're Online:
|
|
<a
|
|
href="/"
|
|
class="p-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
|
|
>Go Home</a
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
id="loading"
|
|
class="rounded text-white bg-white dark:bg-gray-700 text-center p-3 mb-4"
|
|
>
|
|
Loading...
|
|
</div>
|
|
|
|
<div
|
|
id="items"
|
|
class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
|
|
></div>
|
|
|
|
<div
|
|
class="fixed bottom-6 right-6 rounded-full flex items-center justify-center"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
id="add-file-button"
|
|
class="hidden css-button"
|
|
/>
|
|
<div
|
|
class="rounded p-4 bg-gray-800 dark:bg-gray-200 text-white dark:text-black w-72 text-sm flex flex-col gap-2"
|
|
>
|
|
<div class="flex flex-col gap-2">
|
|
<input
|
|
type="file"
|
|
accept=".epub"
|
|
id="document_file"
|
|
name="document_file"
|
|
/>
|
|
<button
|
|
class="font-medium px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
|
|
>
|
|
Add File
|
|
</button>
|
|
</div>
|
|
<label for="add-file-button">
|
|
<div
|
|
class="w-full text-center cursor-pointer font-medium mt-2 px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
|
|
>
|
|
Cancel
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<label
|
|
class="w-16 h-16 bg-gray-800 dark:bg-gray-200 rounded-full flex items-center justify-center opacity-30 hover:opacity-100 transition-all duration-200 cursor-pointer"
|
|
for="add-file-button"
|
|
>
|
|
<svg
|
|
width="34"
|
|
height="34"
|
|
class="text-gray-200 dark:text-gray-600"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M12 15.75C12.4142 15.75 12.75 15.4142 12.75 15V4.02744L14.4306 5.98809C14.7001 6.30259 15.1736 6.33901 15.4881 6.06944C15.8026 5.79988 15.839 5.3264 15.5694 5.01191L12.5694 1.51191C12.427 1.34567 12.2189 1.25 12 1.25C11.7811 1.25 11.573 1.34567 11.4306 1.51191L8.43056 5.01191C8.16099 5.3264 8.19741 5.79988 8.51191 6.06944C8.8264 6.33901 9.29988 6.30259 9.56944 5.98809L11.25 4.02744L11.25 15C11.25 15.4142 11.5858 15.75 12 15.75Z"
|
|
/>
|
|
<path
|
|
d="M16 9C15.2978 9 14.9467 9 14.6945 9.16851C14.5853 9.24148 14.4915 9.33525 14.4186 9.44446C14.25 9.69667 14.25 10.0478 14.25 10.75L14.25 15C14.25 16.2426 13.2427 17.25 12 17.25C10.7574 17.25 9.75004 16.2426 9.75004 15L9.75004 10.75C9.75004 10.0478 9.75004 9.69664 9.58149 9.4444C9.50854 9.33523 9.41481 9.2415 9.30564 9.16855C9.05341 9 8.70227 9 8 9C5.17157 9 3.75736 9 2.87868 9.87868C2 10.7574 2 12.1714 2 14.9998V15.9998C2 18.8282 2 20.2424 2.87868 21.1211C3.75736 21.9998 5.17157 21.9998 8 21.9998H16C18.8284 21.9998 20.2426 21.9998 21.1213 21.1211C22 20.2424 22 18.8282 22 15.9998V14.9998C22 12.1714 22 10.7574 21.1213 9.87868C20.2426 9 18.8284 9 16 9Z"
|
|
/>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|