feat(index): Rewrite
- Add Umami Events - Add responsivity (mobile friendly) - Add FeedbackFish (thanks @SSouper)
This commit is contained in:
TheOnlyWayUp
@@ -2,77 +2,162 @@
|
||||
let story_id = "";
|
||||
</script>
|
||||
|
||||
<div class="flex">
|
||||
<div class="hero min-h-screen bg-gradient-to-r from-cyan-900 to-amber-100">
|
||||
<div class="hero-content text-center">
|
||||
<div class="bg-slate-100 p-16 max-w-3xl rounded-lg outline">
|
||||
<div>
|
||||
<div class="hero min-h-screen bg-base-200">
|
||||
<div class="hero-content flex-col lg:flex-row-reverse">
|
||||
<div class="text-center lg:text-left lg:p-10">
|
||||
<h1
|
||||
class="font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r to-pink-600 via-yellow-600 from-red-800"
|
||||
class="font-extrabold text-transparent text-5xl bg-clip-text bg-gradient-to-r to-pink-600 via-yellow-600 from-red-700"
|
||||
>
|
||||
Wattpad Downloader
|
||||
</h1>
|
||||
<div class="space-x-10 mt-10 mb-5">
|
||||
<a
|
||||
href="https://rambhat.la"
|
||||
target="_blank"
|
||||
class=" bg-[#8dbef2] btn text-xl"
|
||||
data-umami-event="My Work">My Work</a
|
||||
>
|
||||
<!-- Thanks https://cssf1.com/snippet/create-a-neon-effect-with-tailwindcss -->
|
||||
<a
|
||||
href="https://liberapay.com/TheOnlyWayUp/"
|
||||
target="_blank"
|
||||
class=" bg-[#8dbef2] btn text-2xl shadow-[0_0_2px_#fff,inset_0_0_2px_#fff,0_0_5px_#08f,0_0_1px_#08f,0_0_30px_#08f]"
|
||||
data-umami-event="Donate">Donate</a
|
||||
>
|
||||
<a
|
||||
href="https://discord.gg/P9RHC4KCwd"
|
||||
target="_blank"
|
||||
class=" bg-[#8dbef2] btn text-xl"
|
||||
data-umami-event="Discord">Discord</a
|
||||
>
|
||||
</div>
|
||||
<div class="py-6 join">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Story ID"
|
||||
class="input input-secondary w-full max-w-xs rounded-r-none"
|
||||
bind:value={story_id}
|
||||
/>
|
||||
<a
|
||||
class="btn btn-info rounded-l-none"
|
||||
class:btn-disabled={!story_id}
|
||||
href={`/download/${story_id}`}
|
||||
data-umami-event="Download">Download</a
|
||||
>
|
||||
</div>
|
||||
<p class="py-6">
|
||||
Download your favourite books as EPUBs with a single click!
|
||||
</p>
|
||||
</div>
|
||||
<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
|
||||
<form class="card-body">
|
||||
<div class="form-control">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Story ID"
|
||||
class="input input-bordered"
|
||||
bind:value={story_id}
|
||||
required
|
||||
name="story_id"
|
||||
/>
|
||||
<label class="label" for="story_id">
|
||||
<button
|
||||
class="label-text link"
|
||||
onclick="StoryIDTutorialModal.showModal()"
|
||||
data-umami-event="HowToStoryID">How to get a Story ID</button
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control mt-6">
|
||||
<a
|
||||
class="btn btn-primary rounded-l-none"
|
||||
class:btn-disabled={!story_id}
|
||||
href={`/download/${story_id}`}
|
||||
data-umami-event="Download"
|
||||
download
|
||||
onclick="AfterDownloadModal.showModal()">Download</a
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<button data-feedback-fish class="link pb-2" data-umami-event="Feedback"
|
||||
>Feedback</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer footer-center p-4 bg-primary-content bottom-0 fixed">
|
||||
<aside class="text-2xl space-y-2 text-white">
|
||||
<p class="text-xl">
|
||||
You can support me by <a
|
||||
href="https://github.com/TheOnlyWayUp"
|
||||
class="underline"
|
||||
target="_blank">following</a
|
||||
<!-- Open the modal using ID.showModal() method -->
|
||||
|
||||
<dialog id="StoryIDTutorialModal" class="modal">
|
||||
<div class="modal-box">
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
||||
>✕</button
|
||||
>
|
||||
</form>
|
||||
<h3 class="font-bold text-lg">Downloading a Story</h3>
|
||||
<ol class="list list-disc list-inside py-4 space-y-2">
|
||||
<li>
|
||||
Open the Story URL (For example, <span
|
||||
class="font-mono bg-slate-100 p-1"
|
||||
>wattpad.com/story/237369078-wattpad-books-presents</span
|
||||
>)
|
||||
</li>
|
||||
<li>
|
||||
Copy the numbers after the <span class="font-mono bg-slate-100 p-1"
|
||||
>/</span
|
||||
>
|
||||
or
|
||||
<a
|
||||
href="https://github.com/TheOnlyWayUp/WattpadDownloader"
|
||||
class="underline"
|
||||
target="_blank">starring the repository</a
|
||||
>. Thanks!
|
||||
(In the example, that'd be,
|
||||
<span class="font-mono bg-slate-100 p-1"
|
||||
>wattpad.com/story/<span class="bg-amber-200 p-1">237369078</span
|
||||
>-wattpad-books-presents</span
|
||||
>)
|
||||
</li>
|
||||
<li>Paste the Story ID and hit Download!</li>
|
||||
</ol>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<dialog id="AfterDownloadModal" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Wait!</h3>
|
||||
<div class="py-4 space-y-2">
|
||||
<p class="text-xl">
|
||||
Hi, thanks for using my site! If you found it useful, please consider <a
|
||||
href="https://liberapay.com/TheOnlyWayUp/"
|
||||
target="_blank"
|
||||
class="link"
|
||||
data-umami-event="Donate">donating</a
|
||||
> to keep this project alive.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
href="https://github.com/TheOnlyWayUp"
|
||||
class="underline"
|
||||
target="_blank">TheOnlyWayUp</a
|
||||
>
|
||||
© 2023
|
||||
You can also join us on <a
|
||||
href="https://discord.gg/P9RHC4KCwd"
|
||||
target="_blank"
|
||||
class="link"
|
||||
data-umami-event="Discord">discord</a
|
||||
>, where we discuss updates and features.
|
||||
</p>
|
||||
</aside>
|
||||
</footer>
|
||||
</div>
|
||||
<p class="text-lg">
|
||||
Please take a look at <a
|
||||
href="https://rambhat.la"
|
||||
class="link"
|
||||
data-umami-event="My Work">my work</a
|
||||
>!
|
||||
</p>
|
||||
</div>
|
||||
<div class="pt-2">
|
||||
<form method="dialog">
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn w-full btn-sm btn-ghost">Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<footer
|
||||
class="footer footer-center p-4 bg-base-300 text-base-content bottom-0 fixed"
|
||||
>
|
||||
<aside>
|
||||
<div class="grid grid-cols-3 max-w-lg w-full">
|
||||
<a
|
||||
href="https://liberapay.com/TheOnlyWayUp/"
|
||||
target="_blank"
|
||||
class="link"
|
||||
data-umami-event="Footer Donate">Donate</a
|
||||
>
|
||||
<a
|
||||
href="https://rambhat.la"
|
||||
target="_blank"
|
||||
class="link"
|
||||
data-umami-event="Footer AboutMe">About Me</a
|
||||
>
|
||||
<a
|
||||
href="https://discord.gg/P9RHC4KCwd"
|
||||
target="_blank"
|
||||
class="link"
|
||||
data-umami-event="Footer Discord">Discord</a
|
||||
>
|
||||
</div>
|
||||
<p>
|
||||
Copyright © 2024 - All rights reserved by <a
|
||||
href="https://rambhat.la"
|
||||
class="link"
|
||||
target="_blank"
|
||||
data-umami-event="CopyrightHolder">Dhanush R</a
|
||||
>
|
||||
</p>
|
||||
</aside>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user