feat(frontend): Add after-download page

src/frontend/src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script>
   let story_id = "";
   let download_images = false;
+  let after_download_page = false;
 </script>
 
 <div>
@@ -8,6 +9,7 @@
     <div
       class="hero-content flex-col lg:flex-row-reverse glass p-16 rounded shadow-sm"
     >
+      {#if !after_download_page}
         <div class="text-center lg:text-left lg:p-10">
           <h1
             class="font-extrabold text-transparent text-5xl bg-clip-text bg-gradient-to-r to-pink-600 via-yellow-600 from-red-700"
@@ -46,10 +48,10 @@
               <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"
+                href={`/download/${story_id}${download_images ? "?download_images=true" : ""}`}
                 download
-              onclick="AfterDownloadModal.showModal()">Download</a
+                on:click={() => (after_download_page = true)}>Download</a
               >
               <label class="cursor-pointer label">
                 <span class="label-text"
@@ -64,10 +66,40 @@
             </div>
           </form>
 
-        <button data-feedback-fish class="link pb-4" data-umami-event="Feedback"
-          >Feedback</button
+          <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>
@@ -107,46 +139,6 @@
   </form>
 </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
   class="footer footer-center p-4 bg-base-300 text-base-content bottom-0 fixed"
 >