SiskelDev/WattpadDownloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): Add after-download page

Browse Source
This commit is contained in:
TheOnlyWayUp
2024-06-25 17:57:20 +00:00
parent 0802dca6a6
commit 55cfca27b1
1 changed files with 89 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/src/routes/+page.svelte
+89 -97
View File
@@ -1,6 +1,7 @@
<script> <script>
let story_id = ""; let story_id = "";
let download_images = false; let download_images = false;
let after_download_page = false;
</script> </script>
<div> <div>
@@ -8,66 +9,97 @@
<div <div
class="hero-content flex-col lg:flex-row-reverse glass p-16 rounded shadow-sm" class="hero-content flex-col lg:flex-row-reverse glass p-16 rounded shadow-sm"
> >
<div class="text-center lg:text-left lg:p-10"> {#if !after_download_page}
<h1 <div class="text-center lg:text-left lg:p-10">
class="font-extrabold text-transparent text-5xl bg-clip-text bg-gradient-to-r to-pink-600 via-yellow-600 from-red-700" <h1
> 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> Wattpad Downloader
<p class="pt-6 text-lg"> </h1>
Download your favourite books with a single click! <p class="pt-6 text-lg">
</p> Download your favourite books with a single click!
<ul class="pt-4 list list-inside text-xl"> </p>
<li>06/24 - 🎉 Image Downloading!</li> <ul class="pt-4 list list-inside text-xl">
</ul> <li>06/24 - 🎉 Image Downloading!</li>
</div> </ul>
<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100"> </div>
<form class="card-body"> <div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
<div class="form-control"> <form class="card-body">
<input <div class="form-control">
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="StoryIDTutorialModal Open"
>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}${download_images ? "?download_images=true" : ""}`}
data-umami-event="Download"
download
onclick="AfterDownloadModal.showModal()">Download</a
>
<label class="cursor-pointer label">
<span class="label-text"
>Include Images (<strong>Slower Download</strong>)</span
>
<input <input
type="checkbox" type="number"
class="checkbox checkbox-warning shadow-md" placeholder="Story ID"
bind:checked={download_images} class="input input-bordered"
bind:value={story_id}
required
name="story_id"
/> />
</label> <label class="label" for="story_id">
</div> <button
</form> class="label-text link"
onclick="StoryIDTutorialModal.showModal()"
data-umami-event="StoryIDTutorialModal Open"
>How to get a Story ID</button
>
</label>
</div>
<button data-feedback-fish class="link pb-4" data-umami-event="Feedback" <div class="form-control mt-6">
>Feedback</button <a
> class="btn btn-primary rounded-l-none"
</div> class:btn-disabled={!story_id}
data-umami-event="Download"
href={`/download/${story_id}${download_images ? "?download_images=true" : ""}`}
download
on:click={() => (after_download_page = true)}>Download</a
>
<label class="cursor-pointer label">
<span class="label-text"
>Include Images (<strong>Slower Download</strong>)</span
>
<input
type="checkbox"
class="checkbox checkbox-warning shadow-md"
bind:checked={download_images}
/>
</label>
</div>
</form>
<button
data-feedback-fish
class="link pb-4"
data-umami-event="Feedback">Feedback</button
>
</div>
{:else}
<div class="text-center max-w-4xl">
<h1 class="font-bold text-3xl">
Your download has <span
class="text-transparent bg-clip-text bg-gradient-to-r to-pink-600 via-yellow-600 from-red-700"
>Started</span
>
</h1>
<div class="py-4 space-y-2">
<p class="text-2xl">
If you found this site useful, please consider <a
href="https://github.com/TheOnlyWayUp/WattpadDownloader"
target="_blank"
class="link"
data-umami-event="Star">starring the project</a
> to support WattpadDownloader.
</p>
<p class="text-lg pt-2">
You can also join us on <a
href="https://discord.gg/P9RHC4KCwd"
target="_blank"
class="link"
data-umami-event="Discord">discord</a
>, where we release features early and discuss updates.
</p>
</div>
</div>
{/if}
</div> </div>
</div> </div>
</div> </div>
@@ -107,46 +139,6 @@
</form> </form>
</dialog> </dialog>
<dialog id="AfterDownloadModal" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Your download has started</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://github.com/TheOnlyWayUp/WattpadDownloader"
target="_blank"
class="link"
data-umami-event="Star">starring the project</a
> to support WattpadDownloader.
</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 release features early and discuss updates.
</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"
data-umami-event="AfterDownloadModal Close">Close</button
>
</form>
</div>
</div>
</dialog>
<footer <footer
class="footer footer-center p-4 bg-base-300 text-base-content bottom-0 fixed" class="footer footer-center p-4 bg-base-300 text-base-content bottom-0 fixed"
> >