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

fix(frontend): Refer to Wattpad as WP

Browse Source
This commit is contained in:
TheOnlyWayUp
2025-05-27 13:14:53 +00:00
parent 1a56d648f6
commit 2f4ec46100
2 changed files with 33 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/src/app.html
+7 -7
View File
@@ -5,30 +5,30 @@
<link rel="icon" href="%sveltekit.assets%/favicon.svg" /> <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Wattpad Downloader</title> <title>WP Downloader</title>
<meta name="title" content="Wattpad Downloader" /> <meta name="title" content="WP Downloader" />
<meta <meta
name="description" name="description"
content="Read your way, download Wattpad Books as PDFs or EPUBs in seconds. Have an Ad-Free experience with Unlimited Offline Reading. Try it now!" content="Read your way, download WP Books as PDFs or EPUBs in seconds. Have an Ad-Free experience with Unlimited Offline Reading. Try it now!"
/> />
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://wpd.rambhat.la/" /> <meta property="og:url" content="https://wpd.rambhat.la/" />
<meta property="og:title" content="Wattpad Downloader" /> <meta property="og:title" content="WP Downloader" />
<meta <meta
property="og:description" property="og:description"
content="Read your way, download Wattpad Books as PDFs or EPUBs in seconds. Have an Ad-Free experience with Unlimited Offline Reading. Try it now!" content="Read your way, download WP Books as PDFs or EPUBs in seconds. Have an Ad-Free experience with Unlimited Offline Reading. Try it now!"
/> />
<meta property="og:image" content="https://wpd.rambhat.la/embed.png" /> <meta property="og:image" content="https://wpd.rambhat.la/embed.png" />
<!-- Twitter --> <!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://wpd.rambhat.la/" /> <meta property="twitter:url" content="https://wpd.rambhat.la/" />
<meta property="twitter:title" content="Wattpad Downloader" /> <meta property="twitter:title" content="WP Downloader" />
<meta <meta
property="twitter:description" property="twitter:description"
content="Read your way, download Wattpad Books as PDFs or EPUBs in seconds. Have an Ad-Free experience with Unlimited Offline Reading. Try it now!" content="Read your way, download WP Books as PDFs or EPUBs in seconds. Have an Ad-Free experience with Unlimited Offline Reading. Try it now!"
/> />
<meta property="twitter:image" content="https://wpd.rambhat.la/embed.png" /> <meta property="twitter:image" content="https://wpd.rambhat.la/embed.png" />
src/frontend/src/routes/+page.svelte
+26 -41
View File
@@ -6,7 +6,7 @@
let afterDownloadPage = $state(false); let afterDownloadPage = $state(false);
let credentials = $state({ let credentials = $state({
username: "", username: "",
password: "", password: ""
}); });
let downloadId = $state(""); let downloadId = $state("");
/** @type {"story" | "part" | ""} */ /** @type {"story" | "part" | ""} */
@@ -14,8 +14,7 @@
let inputUrl = $state(""); let inputUrl = $state("");
let buttonDisabled = $derived( let buttonDisabled = $derived(
!inputUrl || !inputUrl || (isPaidStory && !(credentials.username && credentials.password))
(isPaidStory && !(credentials.username && credentials.password)),
); );
let url = $derived( let url = $derived(
@@ -27,7 +26,7 @@
? `&username=${encodeURIComponent(credentials.username)}&password=${encodeURIComponent(credentials.password)}` ? `&username=${encodeURIComponent(credentials.username)}&password=${encodeURIComponent(credentials.password)}`
: "") + : "") +
`&mode=${mode}` + `&mode=${mode}` +
(downloadAsPdf ? "&format=pdf" : "&format=epub"), (downloadAsPdf ? "&format=pdf" : "&format=epub")
); );
/** @type {HTMLDialogElement} */ /** @type {HTMLDialogElement} */
@@ -74,13 +73,13 @@
// https://wattpad.com/story/237369078-wattpad-books-presents // https://wattpad.com/story/237369078-wattpad-books-presents
mode = "story"; mode = "story";
setInputAsValid( setInputAsValid(
input.split("-", 1)[0].split("?", 1)[0].split("/story/")[1], // removes tracking fields and title input.split("-", 1)[0].split("?", 1)[0].split("/story/")[1] // removes tracking fields and title
); );
} else if (input.includes("/stories/")) { } else if (input.includes("/stories/")) {
// https://www.wattpad.com/api/v3/stories/237369078?fields=... // https://www.wattpad.com/api/v3/stories/237369078?fields=...
mode = "story"; mode = "story";
setInputAsValid( setInputAsValid(
input.split("?", 1)[0].split("/stories/")[1], // removes params input.split("?", 1)[0].split("/stories/")[1] // removes params
); );
} else { } else {
// https://www.wattpad.com/939051741-wattpad-books-presents-the-qb-bad-boy-and-me // https://www.wattpad.com/939051741-wattpad-books-presents-the-qb-bad-boy-and-me
@@ -102,18 +101,16 @@
<div> <div>
<div class="hero min-h-screen"> <div class="hero min-h-screen">
<div <div
class="hero-content flex-col rounded bg-base-100/50 py-32 shadow-sm lg:flex-row-reverse lg:p-16" class="hero-content bg-base-100/50 flex-col rounded py-32 shadow-sm lg:flex-row-reverse lg:p-16"
> >
{#if !afterDownloadPage} {#if !afterDownloadPage}
<div class="text-center lg:p-10 lg:text-left"> <div class="text-center lg:p-10 lg:text-left">
<h1 <h1
class="bg-gradient-to-r from-red-700 via-yellow-600 to-pink-600 bg-clip-text text-5xl font-extrabold text-transparent" class="bg-gradient-to-r from-red-700 via-yellow-600 to-pink-600 bg-clip-text text-5xl font-extrabold text-transparent"
>Wattpad Downloader</h1
>
<div
role="alert"
class="alert mt-10 max-w-md break-words bg-green-200"
> >
WP Downloader
</h1>
<div role="alert" class="alert mt-10 max-w-md break-words bg-green-200">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -129,11 +126,11 @@
</svg> </svg>
<div> <div>
<p> <p>
Donators get access to <span class="font-semibold" Donators get access to <span class="font-semibold">high-speed PDF Downloads</span>
>high-speed PDF Downloads</span
>
</p> </p>
<a href="https://buymeacoffee.com/theonlywayup" class="link" target="_blank">Donate now</a> <a href="https://buymeacoffee.com/theonlywayup" class="link" target="_blank"
>Donate now</a
>
</div> </div>
</div> </div>
<!-- <div role="alert" class="alert bg-cyan-300 mt-5"> <!-- <div role="alert" class="alert bg-cyan-300 mt-5">
@@ -152,10 +149,9 @@
</svg> </svg>
<span class="text-lg">Please Donate</span> <span class="text-lg">Please Donate</span>
</div> --> </div> -->
<p class="max-w-md pt-6 text-lg" <p class="max-w-md pt-6 text-lg">
>Download your favourite books with a single click. Have a great new Download your favourite books with a single click. Have a great new year!
year!</p </p>
>
<ul class="list list-inside pt-4 text-xl"> <ul class="list list-inside pt-4 text-xl">
<!-- TODO: 'max-lg: hidden' to hide on screen sizes smaller than lg. I'll do this when I figure out how to make this show up _below_ the card on smaller screen sizes. --> <!-- TODO: 'max-lg: hidden' to hide on screen sizes smaller than lg. I'll do this when I figure out how to make this show up _below_ the card on smaller screen sizes. -->
<!-- <li>12/24 - ⚡ Super-fast Downloads!</li> <!-- <li>12/24 - ⚡ Super-fast Downloads!</li>
@@ -177,7 +173,7 @@
<li>06/24 - 🖼️ Image Downloading!</li> <li>06/24 - 🖼️ Image Downloading!</li>
</ul> </ul>
</div> </div>
<div class="card w-full max-w-sm shrink-0 bg-base-100 shadow-2xl"> <div class="card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl">
<form class="card-body"> <form class="card-body">
<div class="form-control"> <div class="form-control">
<input <input
@@ -203,16 +199,13 @@
<button <button
class="link label-text font-semibold" class="link label-text font-semibold"
onclick={() => storyURLTutorialModal.showModal()} onclick={() => storyURLTutorialModal.showModal()}
data-umami-event="StoryURLTutorialModal Open" data-umami-event="StoryURLTutorialModal Open">How to get a Story URL</button
>How to get a Story URL</button
> >
{/if} {/if}
</label> </label>
<label class="label cursor-pointer"> <label class="label cursor-pointer">
<span class="label-text" <span class="label-text">This is a Paid Story, and I've purchased it</span>
>This is a Paid Story, and I've purchased it</span
>
<input <input
type="checkbox" type="checkbox"
class="checkbox-warning checkbox shadow-md" class="checkbox-warning checkbox shadow-md"
@@ -267,9 +260,7 @@
</label> --> </label> -->
<label class="label cursor-pointer"> <label class="label cursor-pointer">
<span class="label-text" <span class="label-text">Include Images (<strong>Slower Download</strong>)</span>
>Include Images (<strong>Slower Download</strong>)</span
>
<input <input
type="checkbox" type="checkbox"
class="checkbox-warning checkbox shadow-md" class="checkbox-warning checkbox shadow-md"
@@ -294,7 +285,7 @@
target="_blank" target="_blank"
class="link" class="link"
data-umami-event="Star">starring the project</a data-umami-event="Star">starring the project</a
> to support WattpadDownloader. > to support WPDownloader.
</p> </p>
<p class="pt-2 text-lg"> <p class="pt-2 text-lg">
You can also join us on <a You can also join us on <a
@@ -309,8 +300,7 @@
<a <a
href="https://buymeacoffee.com/theonlywayup" href="https://buymeacoffee.com/theonlywayup"
target="_blank" target="_blank"
class="btn btn-lg mt-10 bg-cyan-200 hover:bg-green-200" class="btn btn-lg mt-10 bg-cyan-200 hover:bg-green-200">Buy me a Coffee! 🍵</a
>Buy me a Coffee! 🍵</a
> >
<button <button
onclick={() => { onclick={() => {
@@ -329,15 +319,11 @@
<dialog class="modal" bind:this={storyURLTutorialModal}> <dialog class="modal" bind:this={storyURLTutorialModal}>
<div class="modal-box"> <div class="modal-box">
<form method="dialog"> <form method="dialog">
<button class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2" <button class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2">✕</button>
>✕</button
>
</form> </form>
<h3 class="text-lg font-bold">Finding the Story URL</h3> <h3 class="text-lg font-bold">Finding the Story URL</h3>
<ol class="list list-inside list-disc space-y-4 py-4"> <ol class="list list-inside list-disc space-y-4 py-4">
<li> <li>Copy the URL from the Website, or hit share and copy the URL on the App.</li>
Copy the URL from the Website, or hit share and copy the URL on the App.
</li>
<li> <li>
For example, For example,
<span class="bg-slate-100 p-1 font-mono" <span class="bg-slate-100 p-1 font-mono"
@@ -346,9 +332,8 @@
>. >.
</li> </li>
<li> <li>
<span class="bg-slate-100 p-1 font-mono" <span class="bg-slate-100 p-1 font-mono">https://www.wattpad.com/939103774-given</span> is okay
>https://www.wattpad.com/939103774-given</span too.
> is okay too.
</li> </li>
<li>Paste the URL and hit Download!</li> <li>Paste the URL and hit Download!</li>
</ol> </ol>