fix(frontend): Update styles

2023-12-29 03:44:46 +00:00
parent 289bd6be4f
commit 8dfdf52d2c
4 changed files with 44 additions and 11 deletions
@@ -0,0 +1,11 @@
+WattpadDownloader
+---
+Straightforward, Extendable WebApp to download Wattpad Books as EPUB Files.
+
+Stars ⭐ are appreciated. Thanks
+
+---
+
+<div align="center">
+    <p>TheOnlyWayUp © 2023</p>
+</div>
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="nord">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
@@ -5,19 +5,23 @@
 </script>

 <div class="flex">
-  <div class="hero min-h-screen">
+  <div class="hero min-h-screen bg-slate-600">
    <div class="hero-content text-center">
-      <div class="bg-base-200 p-16 max-w-lg rounded-md">
-        <h1 class="text-5xl font-bold">Wattpad Downloader</h1>
+      <div class="bg-slate-100 p-16 max-w-3xl rounded-lg outline">
+        <h1
+          class="font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r to-pink-600 via-yellow-600 from-red-800"
+        >
+          Wattpad Downloader
+        </h1>
        <div class="py-6 join">
          <input
            type="number"
            placeholder="Story ID"
-            class="input input-ghost input-secondary w-full max-w-xs rounded-r-none"
+            class="input input-secondary w-full max-w-xs rounded-r-none"
            bind:value={story_id}
          />
          <a
-            class="btn btn-primary btn-ghost btn-outline rounded-l-none"
+            class="btn btn-info rounded-l-none"
            class:btn-disabled={!story_id}
            href={`/download/${story_id}`}>Download</a
          >
@@ -26,16 +30,28 @@
    </div>
  </div>

-  <footer
-    class="footer footer-center p-4 bg-base-300 text-base-content bottom-0 fixed"
-  >
-    <aside class="text-2xl">
+  <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>
        <a
          href="https://github.com/TheOnlyWayUp"
          class="underline"
          target="_blank">TheOnlyWayUp</a
-        > © 2023
+        >
+        © 2023
      </p>
    </aside>
  </footer>
@@ -10,6 +10,12 @@ const config = {
  },

  plugins: [typography, daisyui],
+
+  daisyui: {
+    themes: [
+      "nord"
+    ],
+  },
 };

 module.exports = config;