feat(frontend): Frontend completed

src/frontend/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

src/frontend/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

src/frontend/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

src/frontend/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "frontend",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@fontsource/fira-mono": "^4.5.10",
+    "@neoconfetti/svelte": "^1.0.0",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@tailwindcss/typography": "^0.5.10",
+    "autoprefixer": "^10.4.16",
+    "daisyui": "^4.4.20",
+    "postcss": "^8.4.32",
+    "postcss-load-config": "^5.0.2",
+    "svelte": "^4.2.7",
+    "tailwindcss": "^3.3.6",
+    "vite": "^5.0.3"
+  },
+  "type": "module",
+  "dependencies": {
+    "svelte-preprocess": "^5.1.3"
+  }
+}

src/frontend/postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer,
+  ],
+};
+
+module.exports = config;

src/frontend/src/app.pcss

@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/frontend/src/routes/+error.svelte

@@ -0,0 +1,29 @@
+<div class="flex">
+  <div class="hero min-h-screen">
+    <div class="hero-content text-center">
+      <div class="bg-base-200 p-16 max-w-lg rounded-md">
+        <h1 class="text-5xl font-bold">There was an error.</h1>
+        <div class="py-6 join">
+          <a
+            class="btn btn-primary btn-ghost btn-outline rounded-l-none"
+            href="/">Home</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <footer
+    class="footer footer-center p-4 bg-base-300 text-base-content bottom-0 fixed"
+  >
+    <aside class="text-2xl">
+      <p>
+        <a
+          href="https://github.com/TheOnlyWayUp"
+          class="underline"
+          target="_blank">TheOnlyWayUp</a
+        > © 2023
+      </p>
+    </aside>
+  </footer>
+</div>

src/frontend/src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+  import "../app.pcss";
+</script>
+
+<slot />

src/frontend/src/routes/+page.js

@@ -0,0 +1,3 @@
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

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

@@ -0,0 +1,42 @@
+<script>
+  export let prerender = true;
+
+  let story_id = "";
+</script>
+
+<div class="flex">
+  <div class="hero min-h-screen">
+    <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="py-6 join">
+          <input
+            type="number"
+            placeholder="Story ID"
+            class="input input-ghost 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-disabled={!story_id}
+            href={`/download/${story_id}`}>Download</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <footer
+    class="footer footer-center p-4 bg-base-300 text-base-content bottom-0 fixed"
+  >
+    <aside class="text-2xl">
+      <p>
+        <a
+          href="https://github.com/TheOnlyWayUp"
+          class="underline"
+          target="_blank">TheOnlyWayUp</a
+        > © 2023
+      </p>
+    </aside>
+  </footer>
+</div>

src/frontend/static/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/frontend/svelte.config.js

@@ -0,0 +1,16 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import adapter from "@sveltejs/adapter-static";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter({ strict: false }),
+  },
+
+  preprocess: [vitePreprocess({})],
+};
+
+export default config;

src/frontend/tailwind.config.cjs

@@ -0,0 +1,15 @@
+const daisyui = require("daisyui");
+const typography = require("@tailwindcss/typography");
+
+/** @type {import('tailwindcss').Config}*/
+const config = {
+  content: ["./src/**/*.{html,js,svelte,ts}"],
+
+  theme: {
+    extend: {},
+  },
+
+  plugins: [typography, daisyui],
+};
+
+module.exports = config;

src/frontend/vite.config.js

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});