Skip to content

adapte frontend #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BretRen wants to merge 3 commits into
base: main
Choose a base branch
from
Open

adapte frontend #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b8ac88b
adapte frontend
BretRen Sep 2, 2026
4f7591c
use div instead use button tags
BretRen Sep 2, 2026
c3d45eb
make sure it dont have XSS bug
BretRen Sep 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions website/pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
allowBuilds:
esbuild: true
sharp: true
workerd: true
onlyBuiltDependencies:
- '@tailwindcss/oxide'
- esbuild
Expand Down
6 changes: 3 additions & 3 deletions website/src/lib/components/CharacterCreateModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,8 @@
}
</script>

<dialog bind:this={dialogRef} onclose={() => (open = false)} class="modal">
<div class="modal-box flex flex-col gap-4">
<dialog bind:this={dialogRef} onclose={() => (open = false)} class="modal modal-bottom sm:modal-middle">
<div class="modal-box flex max-h-[90vh] flex-col gap-4 overflow-y-auto p-5 sm:p-6">
<h3 class="text-lg font-bold">Create a new character</h3>
<div class="flex flex-col gap-4">
<label class="form-control w-full">
Expand Down Expand Up @@ -109,7 +109,7 @@
/>
</label>

<div class="form-control w-full max-w-xs">
<div class="form-control w-full">
<label class="label" for="file-upload">
<span class="label-text">Your Character Pictures (Option)</span>
</label>
Expand Down
2 changes: 1 addition & 1 deletion website/src/lib/components/ui/TagInput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
}
</script>

<div class="flex w-full max-w-sm flex-col">
<div class="flex w-full flex-col">
<div class="label"><span class="label-text font-medium">{title}</span></div>

<input
Expand Down
60 changes: 54 additions & 6 deletions website/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,14 @@
class="navbar mx-auto max-w-7xl border-b border-base-200 bg-base-100 px-4 shadow-sm md:px-8"
>
<div class="flex-1">
<a href="/" class="text-xl font-bold tracking-tight transition-colors hover:text-primary">
Pdnode CP Website <div class="badge badge-soft">v0.5.1</div>
<a href="/" class="flex items-center gap-2 text-lg font-bold tracking-tight transition-colors hover:text-primary sm:text-xl">
<span>Pdnode CP<span class="hidden sm:inline"> Website</span></span>
<div class="badge badge-soft text-xs">v0.5.1</div>
</a>
</div>
<div class="flex-none gap-4">

<!-- 摌青端导θˆͺ（md 及δ»₯δΈŠοΌ‰ -->
<div class="hidden flex-none items-center gap-4 md:flex">
<a href="/about" class="btn text-base-content/80 btn-ghost btn-sm">About</a>

{#if user}
Expand All @@ -44,12 +47,12 @@
<div
class="flex w-10 items-center justify-center rounded-full bg-primary text-primary-content"
>
<span class="text-lg leading-none font-bold">
<span class="text-lg font-bold leading-none">
{user.name?.trim().at(0) ?? '?'}
</span>
</div>
</button>
<ul class="dropdown-content menu z-1 mt-3 w-52 menu-sm rounded-box bg-base-300 p-2 shadow flex flex-col gap-2">
<ul class="dropdown-content menu z-50 mt-3 flex w-52 flex-col gap-2 rounded-box bg-base-300 p-2 shadow menu-sm">
<li>
<button
onclick={() => {
Expand All @@ -66,8 +69,53 @@
</div>
{:else}
<a href="/register" class="btn btn-outline btn-sm">Register</a>
<a href="/login" class="btn btn-sm btn-primary">Login</a>
<a href="/login" class="btn btn-primary btn-sm">Login</a>
{/if}
</div>

<!-- 移动端导θˆͺ（< mdοΌ‰ -->
<div class="flex flex-none items-center gap-2 md:hidden">
{#if user}
<div class="placeholder avatar">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-bold text-primary-content">
{user.name?.trim().at(0) ?? '?'}
</div>
</div>
{/if}

<div class="dropdown dropdown-end">
<button tabindex="0" class="btn btn-circle btn-ghost btn-sm" aria-label="Open menu">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<ul class="dropdown-content menu z-50 mt-3 w-56 rounded-box bg-base-200 p-3 shadow-xl">
{#if user}
<li class="menu-title px-2 py-1 text-xs opacity-60">
Account: {user.name || user.email}
</li>
<li><a href="/explore">Explore</a></li>
<li><a href="/create">Create CP</a></li>
<li><a href="/mystuff">My Stuff</a></li>
<li><a href="/about">About</a></li>
<div class="divider my-1"></div>
<li>
<button
onclick={() => {
pb.authStore.clear()
window.location.reload()
}}
class="text-error"
>Logout</button>
</li>
{:else}
<li><a href="/about">About</a></li>
<div class="divider my-1"></div>
<li class="mb-1"><a href="/login" class="btn btn-primary btn-sm text-primary-content">Login</a></li>
<li><a href="/register" class="btn btn-outline btn-sm">Register</a></li>
{/if}
</ul>
</div>
</div>
</header>

Expand Down
16 changes: 8 additions & 8 deletions website/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
<div class="hero py-20 px-6 bg-base-100 items-start md:items-center">
<div class="hero py-12 sm:py-20 px-4 sm:px-6 bg-base-100 items-start md:items-center">
<div class="hero-content text-left max-w-4xl p-0">
<div>
<h1 class="text-3xl md:text-5xl font-bold tracking-tight mb-6">Welcome to Pdnode CP Website</h1>
<p class="text-xl md:text-2xl text-base-content/70 mb-4">
<h1 class="text-2xl sm:text-3xl md:text-5xl font-bold tracking-tight mb-4 sm:mb-6">Welcome to Pdnode CP Website</h1>
<p class="text-base sm:text-xl md:text-2xl text-base-content/70 mb-4">
You can share and recommend your couples & ships on the website. Like and comment on other ships and discuss.
</p>
<p class="text-lg font-medium mb-8">Want see more? Login or register now!</p>
<p class="text-base sm:text-lg font-medium mb-6 sm:mb-8">Want see more? Login or register now!</p>
</div>
</div>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 px-6 pb-12 max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 px-4 sm:px-6 pb-12 max-w-6xl mx-auto">
<a href="https://chat.p67.click/#narrow/channel/4-Announcement/topic/cp/near/70575" target="_blank" class="card bg-base-100 border border-base-200 hover:border-primary hover:shadow-xl transition-all">
<div class="card-body p-8">
<div class="card-body p-6 sm:p-8">
<h3 class="card-title text-xl group-hover:text-primary">Feel free to post your own CP</h3>
<p class="text-base-content/70 mt-2">We welcome everyone to post their own pairings, but some basic requirements need to be met.</p>
</div>
</a>

<a href="https://chat.p67.click/" target="_blank" class="card bg-base-100 border border-base-200 hover:border-primary hover:shadow-xl transition-all">
<div class="card-body p-8">
<div class="card-body p-6 sm:p-8">
<h3 class="card-title text-xl">Pdnode Team Chat</h3>
<p class="text-base-content/70 mt-2">Join our Team Chat and we guarantee to answer your questions within 24 hours.</p>
</div>
</a>

<a href="/about" class="card bg-base-100 border border-base-200 hover:border-primary hover:shadow-xl transition-all">
<div class="card-body p-8">
<div class="card-body p-6 sm:p-8">
<h3 class="card-title text-xl">Want to know more?</h3>
<p class="text-base-content/70 mt-2">Learn more about this website.</p>
</div>
Expand Down
12 changes: 6 additions & 6 deletions website/src/routes/about/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<div class="py-16 px-6 max-w-6xl mx-auto">
<div class="py-10 sm:py-16 px-4 sm:px-6 max-w-6xl mx-auto">
<!-- ε€΄ιƒ¨δ»‹η»εŒΊεŸŸ -->
<div class="text-center md:text-left mb-16 max-w-3xl">
<h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-6">
<div class="text-center md:text-left mb-10 sm:mb-16 max-w-3xl">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-4 sm:mb-6">
About Pdnode CP Website
</h1>
<p class="text-lg md:text-xl text-base-content/80 mb-4">
<p class="text-base sm:text-lg md:text-xl text-base-content/80 mb-4">
This website was developed, published, and supported by the Pdnode team, primarily allowing users to post their favorite CPs.
</p>
<p class="text-base text-base-content/60 mb-8">
<p class="text-sm sm:text-base text-base-content/60 mb-6 sm:mb-8">
This project was proposed on March 30, 2026.
</p>

<h2 class="text-2xl font-semibold mt-12 border-b border-base-200 pb-4 inline-block md:block">
<h2 class="text-xl sm:text-2xl font-semibold mt-8 sm:mt-12 border-b border-base-200 pb-4 inline-block md:block">
Below you can see our Developer List
</h2>
</div>
Expand Down
44 changes: 23 additions & 21 deletions website/src/routes/characters/[id]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,61 +21,63 @@
}
});
</script>
<div class="mx-auto max-w-6xl px-4 py-10">
<div class="mx-auto max-w-6xl px-4 py-6 sm:py-10">
{#if isLoading}
<div class="flex h-96 items-center justify-center">
<span class="loading loading-spinner loading-lg text-primary"></span>
</div>
{:else if error}
<div class="alert alert-error">{error}</div>
{:else}
<div class="flex flex-col gap-10 lg:flex-row">
<div class="flex flex-col gap-6 md:gap-10 lg:flex-row">
<div class="lg:w-1/3">
<div class="sticky top-24 overflow-hidden rounded-3xl border border-base-200 bg-base-100 shadow-2xl">
<figure class="aspect-3/4">
<div class="overflow-hidden rounded-2xl border border-base-200 bg-base-100 shadow-xl sm:rounded-3xl sm:shadow-2xl lg:sticky lg:top-24">
<figure class="max-h-80 sm:max-h-96 lg:max-h-none aspect-square lg:aspect-3/4 bg-base-300">
<img
src={pb.files.getURL(char, char.images?.[0])}
alt={char.name}
class="h-full w-full object-cover object-top"
/>
</figure>
<div class="p-6">
<h1 class="text-3xl font-black">{char.name}</h1>
<p class="text-sm opacity-60 mt-1">Origin: {char.origin}</p>
<div class="p-4 sm:p-6">
<h1 class="break-words text-2xl font-black sm:text-3xl">{char.name}</h1>
{#if char.origin}
<p class="mt-1 break-all text-sm opacity-60">Origin: {char.origin}</p>
{/if}
</div>
</div>
</div>

<div class="flex-1">
<div class="stats stats-vertical w-full bg-base-100 shadow-lg md:stats-horizontal border border-base-200">
<div class="stat">
<div class="stat-title text-xs uppercase font-bold tracking-widest">Creator</div>
<div class="stat-value text-xl">{char.expand?.owner?.name ?? 'Unknown'}</div>
<div class="stats stats-horizontal w-full border border-base-200 bg-base-100 shadow-md sm:shadow-lg">
<div class="stat p-4 sm:p-6">
<div class="stat-title text-xs font-bold uppercase tracking-wider">Creator</div>
<div class="stat-value truncate text-base sm:text-xl">{char.expand?.owner?.name ?? 'Unknown'}</div>
</div>
<div class="stat">
<div class="stat-title text-xs uppercase font-bold tracking-widest">Created At</div>
<div class="stat-value text-xl">{new Date(char.created).toLocaleDateString()}</div>
<div class="stat p-4 sm:p-6">
<div class="stat-title text-xs font-bold uppercase tracking-wider">Created At</div>
<div class="stat-value text-base sm:text-xl">{new Date(char.created).toLocaleDateString()}</div>
</div>
</div>

<div class="mt-8 rounded-3xl bg-base-100 p-8 border border-base-200">
<h2 class="mb-4 text-xl font-bold border-b pb-2">Description</h2>
<div class="prose max-w-none text-base-content/80 leading-relaxed">
<div class="mt-6 rounded-2xl border border-base-200 bg-base-100 p-5 sm:mt-8 sm:rounded-3xl sm:p-8">
<h2 class="mb-3 border-b border-base-200 pb-2 text-lg font-bold sm:mb-4 sm:text-xl">Description</h2>
<div class="prose max-w-none break-words text-sm leading-relaxed text-base-content/80 sm:text-base">
{char.description}
</div>
</div>

{#if char.tag_names}
<div class="mt-6 flex flex-wrap gap-2">
{#each [].concat(char.tag_names || []) as tag}
<span class="badge badge-lg badge-outline">{tag}</span>
<span class="badge badge-outline">{tag}</span>
{/each}
</div>
{/if}

<div class="mt-12">
<h3 class="mb-6 text-xl font-bold">Participated CPs</h3>
<p class="text-sm opacity-50 italic">Feature coming soon...</p>
<div class="mt-8 sm:mt-12">
<h3 class="mb-4 text-lg font-bold sm:mb-6 sm:text-xl">Participated CPs</h3>
<p class="text-sm italic opacity-50">Feature coming soon...</p>
</div>
</div>
</div>
Expand Down
69 changes: 43 additions & 26 deletions website/src/routes/cps/[id]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,14 @@
selectedImg = pb.files.getURL(cp, img);
galleryModal.showModal();
}

function isSafeHttpUrl(url?: string): boolean {
if (!url) return false;
return /^https?:\/\//i.test(url.trim());
}
</script>

<div class="mx-auto max-w-5xl px-4 py-10">
<div class="mx-auto max-w-5xl px-4 py-6 sm:py-10">
{#if isLoading}
<div class="flex h-64 items-center justify-center">
<span class="loading loading-lg loading-spinner text-primary"></span>
Expand All @@ -45,11 +50,11 @@
<a href="/explore" class="btn btn-sm">Back to Explore</a>
</div>
{:else}
<div class="mb-10 text-center">
<h1 class="text-5xl font-black tracking-tighter text-primary italic">
<div class="mb-8 text-center sm:mb-10">
<h1 class="break-words text-3xl font-black italic tracking-tighter text-primary sm:text-4xl md:text-5xl">
{cp.name}
</h1>
<div class="mt-4 flex justify-center gap-2">
<div class="mt-4 flex flex-wrap justify-center gap-2">
{#each [].concat(cp.tag_names || []) as tag}
{#if tag}
<span class="badge badge-outline">{tag}</span>
Expand All @@ -58,34 +63,46 @@
</div>
</div>

<div class="flex flex-col items-center justify-center gap-8 md:flex-row">
<div class="flex flex-col items-center justify-center gap-6 md:flex-row md:gap-8">
{#each cp.expand?.characters || [] as char}
<button class="card w-full max-w-sm border border-base-200 bg-base-100 shadow-xl cursor-pointer transition-all active:scale-95 hover:bg-base-300" onclick={() => goto(`/characters/${char.id}`)}>
<figure class="h-64">
{#if char.images?.[0]}
<img
src={pb.files.getURL(char, char.images?.[0])}
alt={char.name}
class="h-full w-full object-cover object-top"
/>
{:else}
<p>{char.name}</p>
<div class="card w-full max-w-sm border border-base-200 bg-base-100 shadow-xl transition-all hover:bg-base-200/50">
<a href="/characters/{char.id}" class="block overflow-hidden rounded-t-2xl">
<figure class="h-48 bg-base-300 sm:h-64">
{#if char.images?.[0]}
<img
src={pb.files.getURL(char, char.images?.[0])}
alt={char.name}
class="h-full w-full object-cover object-top transition-transform hover:scale-105"
/>
{:else}
<p>{char.name}</p>
{/if}
</figure>
</a>
<div class="card-body p-4 sm:p-6">
<h3 class="card-title text-xl sm:text-2xl break-words">
<a href="/characters/{char.id}" class="transition-colors hover:text-primary">{char.name}</a>
</h3>
{#if char.origin}
{#if isSafeHttpUrl(char.origin)}
<a class="text-sm opacity-70 link break-all" href="{char.origin}" target="_blank" rel="noopener noreferrer">{char.origin}</a>
{:else}
<span class="text-sm opacity-70 break-all">{char.origin}</span>
{/if}
{/if}
</figure>
<div class="card-body">
<h3 class="card-title text-2xl">{char.name}</h3>
<a class="text-sm opacity-70 link" href="{char.origin}" target="_blank" rel="noopener noreferrer">{char.origin}</a>
</div>
</button>
</div>
{/each}
</div>

<div class="mt-16 rounded-3xl bg-base-200 p-8 shadow-inner">
<h2 class="mb-6 text-2xl font-bold">Description</h2>
<div class="prose max-w-none text-lg leading-relaxed">
<div class="mt-10 rounded-2xl bg-base-200 p-5 shadow-inner sm:p-8 md:mt-16 md:rounded-3xl">
<h2 class="mb-4 text-xl font-bold sm:mb-6 sm:text-2xl">Description</h2>
<div class="prose max-w-none break-words text-base leading-relaxed sm:text-lg">
{cp.description}
</div>

<div class="divider my-4"></div>

<p class="text-sm text-base-content/60">
Author:
<span class="font-medium text-base-content">
Expand All @@ -94,9 +111,9 @@
</p>
</div>

<div class="mt-16">
<h3 class="mb-6 text-xl font-bold">Gallery</h3>
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
<div class="mt-10 md:mt-16">
<h3 class="mb-4 text-xl font-bold sm:mb-6">Gallery</h3>
<div class="grid grid-cols-2 gap-3 sm:gap-4 md:grid-cols-4">
{#each cp.images as img}
<button
type="button"
Expand Down
Loading