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 = "";
|
let story_id = "";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex">
|
<div>
|
||||||
<div class="hero min-h-screen bg-gradient-to-r from-cyan-900 to-amber-100">
|
<div class="hero min-h-screen bg-base-200">
|
||||||
<div class="hero-content text-center">
|
<div class="hero-content flex-col lg:flex-row-reverse">
|
||||||
<div class="bg-slate-100 p-16 max-w-3xl rounded-lg outline">
|
<div class="text-center lg:text-left lg:p-10">
|
||||||
<h1
|
<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
|
Wattpad Downloader
|
||||||
</h1>
|
</h1>
|
||||||
<div class="space-x-10 mt-10 mb-5">
|
<p class="py-6">
|
||||||
<a
|
Download your favourite books as EPUBs with a single click!
|
||||||
href="https://rambhat.la"
|
</p>
|
||||||
target="_blank"
|
</div>
|
||||||
class=" bg-[#8dbef2] btn text-xl"
|
<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
|
||||||
data-umami-event="My Work">My Work</a
|
<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
|
||||||
>
|
>
|
||||||
<!-- Thanks https://cssf1.com/snippet/create-a-neon-effect-with-tailwindcss -->
|
</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>
|
||||||
|
|
||||||
|
<!-- 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
|
||||||
|
>
|
||||||
|
(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>
|
||||||
|
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>
|
||||||
|
<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
|
<a
|
||||||
href="https://liberapay.com/TheOnlyWayUp/"
|
href="https://liberapay.com/TheOnlyWayUp/"
|
||||||
target="_blank"
|
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]"
|
class="link"
|
||||||
data-umami-event="Donate">Donate</a
|
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
|
<a
|
||||||
href="https://discord.gg/P9RHC4KCwd"
|
href="https://discord.gg/P9RHC4KCwd"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class=" bg-[#8dbef2] btn text-xl"
|
class="link"
|
||||||
data-umami-event="Discord">Discord</a
|
data-umami-event="Footer Discord">Discord</a
|
||||||
>
|
>
|
||||||
</div>
|
</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>
|
|
||||||
</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
|
|
||||||
>
|
|
||||||
or
|
|
||||||
<a
|
|
||||||
href="https://github.com/TheOnlyWayUp/WattpadDownloader"
|
|
||||||
class="underline"
|
|
||||||
target="_blank">starring the repository</a
|
|
||||||
>. Thanks!
|
|
||||||
</p>
|
|
||||||
<p>
|
<p>
|
||||||
<a
|
Copyright © 2024 - All rights reserved by <a
|
||||||
href="https://github.com/TheOnlyWayUp"
|
href="https://rambhat.la"
|
||||||
class="underline"
|
class="link"
|
||||||
target="_blank">TheOnlyWayUp</a
|
target="_blank"
|
||||||
|
data-umami-event="CopyrightHolder">Dhanush R</a
|
||||||
>
|
>
|
||||||
© 2023
|
|
||||||
</p>
|
</p>
|
||||||
</aside>
|
</aside>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user