Matiss/xarticleaudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: add mobile navigation menu

Browse Source
This commit is contained in:
Codex
2026-02-18 14:47:39 +00:00
parent 67e896dacb
commit 710624ca78
1 changed files with 54 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/pages.js
View File

@@ -45,17 +45,31 @@ function nav({ authenticated, userId }) {
? `<div class="flex items-center gap-2"><span class="badge badge-outline">@${escapeHtml(userId)}</span><form method="POST" action="/auth/logout"><button class="btn btn-xs btn-ghost">Log out</button></form></div>`
: `<a class="btn btn-sm btn-primary" href="/login">Get started</a>`;
return `<header class="navbar bg-slate-900/70 border border-slate-700 rounded-2xl backdrop-blur mb-6 md:mb-8">
const menuItems = `
<li><a href="/#how">How it works</a></li>
<li><a href="/#pricing">Pricing</a></li>
<li><a href="/app">Dashboard</a></li>
`;
return `<div class="navbar bg-base-100 shadow-sm rounded-box mb-6 md:mb-8">
<div class="navbar-start">
<a href="/" class="font-semibold tracking-tight">XArtAudio</a>
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<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 12h8m-8 6h16" /> </svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
${menuItems}
</ul>
</div>
<a href="/" class="btn btn-ghost text-xl font-bold tracking-tight">XArtAudio</a>
</div>
<div class="navbar-center hidden sm:flex">
<a href="/#how" class="btn btn-ghost btn-sm">How it works</a>
<a href="/#pricing" class="btn btn-ghost btn-sm">Pricing</a>
<a href="/app" class="btn btn-ghost btn-sm">Dashboard</a>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
${menuItems}
</ul>
</div>
<div class="navbar-end">${right}</div>
</header>`;
</div>`;
}
function renderLandingPage({ authenticated, userId }) {
@@ -120,15 +134,41 @@ function renderLoginPage({ returnTo = "/app", error = null }) {
<section class="card bg-slate-900/80 border border-slate-700 shadow-xl">
<div class="card-body">
<h1 class="text-2xl font-bold">Sign in</h1>
<p class="text-sm text-slate-300">Dev sign-in powered by Better Auth. Enter a username to create a session.</p>
<p class="text-sm text-slate-300">Use your email account or continue with X.</p>
${errorBlock}
<form method="POST" action="/auth/dev-login" class="space-y-3">
<form method="POST" action="/auth/x" class="mb-4">
<input type="hidden" name="returnTo" value="${escapeHtml(returnTo)}" />
<button class="btn btn-accent w-full">Continue with X</button>
</form>
<div class="divider text-xs uppercase text-slate-400">Email</div>
<form method="POST" action="/auth/email/sign-in" class="space-y-3">
<input type="hidden" name="returnTo" value="${escapeHtml(returnTo)}" />
<label class="form-control w-full">
<span class="label-text text-slate-200 mb-1">Username</span>
<input name="userId" required minlength="2" maxlength="40" class="input input-bordered w-full bg-slate-950" placeholder="matiss" />
<span class="label-text text-slate-200 mb-1">Email</span>
<input name="email" type="email" required class="input input-bordered w-full bg-slate-950" placeholder="you@domain.com" />
</label>
<button class="btn btn-primary w-full">Continue</button>
<label class="form-control w-full">
<span class="label-text text-slate-200 mb-1">Password</span>
<input name="password" type="password" required minlength="8" maxlength="128" class="input input-bordered w-full bg-slate-950" placeholder="••••••••" />
</label>
<button class="btn btn-primary w-full">Sign in with email</button>
</form>
<div class="divider text-xs uppercase text-slate-400">Create account</div>
<form method="POST" action="/auth/email/sign-up" class="space-y-3">
<input type="hidden" name="returnTo" value="${escapeHtml(returnTo)}" />
<label class="form-control w-full">
<span class="label-text text-slate-200 mb-1">Name</span>
<input name="name" required minlength="2" maxlength="80" class="input input-bordered w-full bg-slate-950" placeholder="Matiss" />
</label>
<label class="form-control w-full">
<span class="label-text text-slate-200 mb-1">Email</span>
<input name="email" type="email" required class="input input-bordered w-full bg-slate-950" placeholder="you@domain.com" />
</label>
<label class="form-control w-full">
<span class="label-text text-slate-200 mb-1">Password</span>
<input name="password" type="password" required minlength="8" maxlength="128" class="input input-bordered w-full bg-slate-950" placeholder="••••••••" />
</label>
<button class="btn btn-outline w-full">Create account</button>
</form>
</div>
</section>
@@ -219,8 +259,8 @@ function renderAudioPage({ audio, accessDecision, userId, playbackUrl = null })
<div class="text-xs text-slate-400">Duration ~ ${audio.durationSec}s • Asset ${escapeHtml(audio.id)}</div>
${action}
${accessDecision.allowed
? `<div class="mockup-code mt-3"><pre><code>${escapeHtml(playbackUrl || `stream://${audio.storageKey}`)}</code></pre></div>`
: ""}
? `<div class="mockup-code mt-3"><pre><code>${escapeHtml(playbackUrl || `stream://${audio.storageKey}`)}</code></pre></div>`
: ""}
</div>
</section>
`,