From 503ccfd96743fcbf90e4e07d8c72838043a92308 Mon Sep 17 00:00:00 2001
From: TheOnlyWayUp <thedarkdraconian@gmail.com>
Date: Thu, 11 Apr 2024 14:40:21 +0000
Subject: [PATCH] feat(index): Rewrite

- Add Umami Events
- Add responsivity (mobile friendly)
- Add FeedbackFish (thanks @SSouper)
---
 src/frontend/src/routes/+page.svelte | 209 +++++++++++++++++++--------
 1 file changed, 147 insertions(+), 62 deletions(-)

diff --git a/src/frontend/src/routes/+page.svelte b/src/frontend/src/routes/+page.svelte
index 3abb449..602e77b 100644
--- a/src/frontend/src/routes/+page.svelte
+++ b/src/frontend/src/routes/+page.svelte
@@ -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>