Redesign Nuggets upload portal: single episode submission form; v2.0.5
- Replace two-tab file picker with a combined form: episode name, passage, description, and audio file in one submit - Server now generates an Episode Info text file (name, host, passage, description, timestamp) and uploads it to /Episode Info/ automatically, while the audio goes to /Episode Upload/ - Drop zone changes color when a valid file is selected (green border) - Success shows submitted episode name and filename in the session log Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed
1 parent
afdc00114a
commit
6a03813914
3 files changed
+288
-249
No files matched your search
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "siteforge",
|
||||
"private": true,
|
||||
"version": "2.0.4",
|
||||
"version": "2.0.5",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -184,7 +184,7 @@ export function register(app) {
|
||||
res.json({ ok: true })
|
||||
})
|
||||
|
||||
// ── File upload ───────────────────────────────────────────────────────
|
||||
// ── Episode upload (audio file + metadata) ───────────────────────────
|
||||
|
||||
app.post('/api/nuggets-upload/upload', requireHostAuth, upload.single('file'), async (req, res) => {
|
||||
if (!req.file) {
|
||||
@@ -192,10 +192,19 @@ export function register(app) {
|
||||
return
|
||||
}
|
||||
|
||||
const targetDir = req.body?.targetDir === 'info' ? SEAFILE_EPISODE_INFO_DIR : SEAFILE_EPISODE_UPLOAD_DIR
|
||||
const session = getHostSession(req)
|
||||
const episodeName = typeof req.body?.episodeName === 'string' ? req.body.episodeName.trim() : ''
|
||||
const passage = typeof req.body?.passage === 'string' ? req.body.passage.trim() : ''
|
||||
const description = typeof req.body?.description === 'string' ? req.body.description.trim() : ''
|
||||
const originalName = req.file.originalname || req.file.filename
|
||||
const tempPath = req.file.path
|
||||
|
||||
if (!episodeName || !passage) {
|
||||
await unlink(tempPath).catch(() => {})
|
||||
res.status(400).json({ message: 'Episode name and passage are required.' })
|
||||
return
|
||||
}
|
||||
|
||||
if (!seafileConfigured()) {
|
||||
await unlink(tempPath).catch(() => {})
|
||||
res.status(503).json({ message: 'Seafile is not configured on this server. Contact the admin.' })
|
||||
@@ -206,14 +215,33 @@ export function register(app) {
|
||||
const { readFile: rf } = await import('node:fs/promises')
|
||||
const fileBuffer = await rf(tempPath)
|
||||
|
||||
const uploadLink = await getSeafileUploadLink(targetDir)
|
||||
await uploadToSeafile(uploadLink, fileBuffer, originalName, targetDir)
|
||||
|
||||
// Upload audio to /Episode Upload/
|
||||
const audioLink = await getSeafileUploadLink(SEAFILE_EPISODE_UPLOAD_DIR)
|
||||
await uploadToSeafile(audioLink, fileBuffer, originalName, SEAFILE_EPISODE_UPLOAD_DIR)
|
||||
await unlink(tempPath).catch(() => {})
|
||||
|
||||
const session = getHostSession(req)
|
||||
console.log(`[nuggets-upload] ${session?.hostName ?? 'unknown'} uploaded "${originalName}" to ${targetDir}`)
|
||||
res.json({ ok: true, filename: originalName, dir: targetDir })
|
||||
// Build and upload info file to /Episode Info/
|
||||
const now = new Date()
|
||||
const dateStr = now.toISOString().slice(0, 10)
|
||||
const infoContent = [
|
||||
`Episode: ${episodeName}`,
|
||||
`Host: ${session?.hostName ?? 'Unknown'}`,
|
||||
`Passage: ${passage}`,
|
||||
`Audio File: ${originalName}`,
|
||||
`Submitted: ${now.toUTCString()}`,
|
||||
'',
|
||||
'Description:',
|
||||
description || '(none)',
|
||||
].join('\n')
|
||||
|
||||
const safeEpName = episodeName.replace(/[^a-z0-9 _-]/gi, '').trim().replace(/\s+/g, '-').slice(0, 60)
|
||||
const infoFilename = `${dateStr}-${safeEpName}-info.txt`
|
||||
const infoBuffer = Buffer.from(infoContent, 'utf8')
|
||||
const infoLink = await getSeafileUploadLink(SEAFILE_EPISODE_INFO_DIR)
|
||||
await uploadToSeafile(infoLink, infoBuffer, infoFilename, SEAFILE_EPISODE_INFO_DIR)
|
||||
|
||||
console.log(`[nuggets-upload] ${session?.hostName ?? 'unknown'} uploaded "${episodeName}" (${originalName})`)
|
||||
res.json({ ok: true, episodeName, filename: originalName, infoFile: infoFilename })
|
||||
} catch (err) {
|
||||
await unlink(tempPath).catch(() => {})
|
||||
console.error('[nuggets-upload] upload error:', err.message)
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
|
||||
type UploadTarget = 'upload' | 'info'
|
||||
|
||||
interface UploadRecord {
|
||||
interface SubmittedEpisode {
|
||||
episodeName: string
|
||||
filename: string
|
||||
dir: string
|
||||
at: string
|
||||
}
|
||||
|
||||
@@ -19,14 +17,17 @@ export function NuggetsHostPortal() {
|
||||
const [loginError, setLoginError] = useState('')
|
||||
const [loggingIn, setLoggingIn] = useState(false)
|
||||
|
||||
const [target, setTarget] = useState<UploadTarget>('upload')
|
||||
const [episodeName, setEpisodeName] = useState('')
|
||||
const [passage, setPassage] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [dragging, setDragging] = useState(false)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [uploadError, setUploadError] = useState('')
|
||||
const [uploads, setUploads] = useState<UploadRecord[]>([])
|
||||
const [submitted, setSubmitted] = useState<SubmittedEpisode[]>([])
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const dropRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/nuggets-upload/me')
|
||||
@@ -50,10 +51,7 @@ export function NuggetsHostPortal() {
|
||||
body: JSON.stringify({ username, password }),
|
||||
})
|
||||
const d = await r.json()
|
||||
if (!r.ok) {
|
||||
setLoginError(d.message ?? 'Login failed.')
|
||||
return
|
||||
}
|
||||
if (!r.ok) { setLoginError(d.message ?? 'Login failed.'); return }
|
||||
setHostName(d.hostName)
|
||||
setAuthenticated(true)
|
||||
} finally {
|
||||
@@ -67,25 +65,53 @@ export function NuggetsHostPortal() {
|
||||
setHostName('')
|
||||
setUsername('')
|
||||
setPassword('')
|
||||
setUploads([])
|
||||
setSubmitted([])
|
||||
resetForm()
|
||||
}
|
||||
|
||||
async function uploadFile(file: File) {
|
||||
function resetForm() {
|
||||
setEpisodeName('')
|
||||
setPassage('')
|
||||
setDescription('')
|
||||
setFile(null)
|
||||
setUploadError('')
|
||||
setProgress(0)
|
||||
}
|
||||
|
||||
function handleDrop(e: React.DragEvent) {
|
||||
e.preventDefault()
|
||||
setDragging(false)
|
||||
const dropped = e.dataTransfer.files[0]
|
||||
if (dropped) setFile(dropped)
|
||||
}
|
||||
|
||||
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const picked = e.target.files?.[0]
|
||||
if (picked) setFile(picked)
|
||||
e.target.value = ''
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!file) { setUploadError('Please select an audio file to upload.'); return }
|
||||
if (uploading) return
|
||||
|
||||
setUploadError('')
|
||||
setUploading(true)
|
||||
setProgress(0)
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('targetDir', target)
|
||||
formData.append('episodeName', episodeName)
|
||||
formData.append('passage', passage)
|
||||
formData.append('description', description)
|
||||
|
||||
return new Promise<void>((resolve) => {
|
||||
await new Promise<void>(resolve => {
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.open('POST', '/api/nuggets-upload/upload')
|
||||
|
||||
xhr.upload.addEventListener('progress', e => {
|
||||
if (e.lengthComputable) setProgress(Math.round((e.loaded / e.total) * 100))
|
||||
xhr.upload.addEventListener('progress', ev => {
|
||||
if (ev.lengthComputable) setProgress(Math.round((ev.loaded / ev.total) * 100))
|
||||
})
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
@@ -93,15 +119,14 @@ export function NuggetsHostPortal() {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
const d = JSON.parse(xhr.responseText)
|
||||
setUploads(prev => [{ filename: d.filename, dir: d.dir, at: new Date().toLocaleTimeString() }, ...prev])
|
||||
setProgress(100)
|
||||
setSubmitted(prev => [{ episodeName: d.episodeName, filename: d.filename, at: new Date().toLocaleTimeString() }, ...prev])
|
||||
resetForm()
|
||||
} catch {
|
||||
setUploadError('Upload succeeded but response was unexpected.')
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const d = JSON.parse(xhr.responseText)
|
||||
setUploadError(d.message ?? 'Upload failed.')
|
||||
setUploadError(JSON.parse(xhr.responseText).message ?? 'Upload failed.')
|
||||
} catch {
|
||||
setUploadError('Upload failed.')
|
||||
}
|
||||
@@ -119,24 +144,11 @@ export function NuggetsHostPortal() {
|
||||
})
|
||||
}
|
||||
|
||||
function handleDrop(e: React.DragEvent) {
|
||||
e.preventDefault()
|
||||
setDragging(false)
|
||||
const file = e.dataTransfer.files[0]
|
||||
if (file) uploadFile(file)
|
||||
}
|
||||
|
||||
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0]
|
||||
if (file) uploadFile(file)
|
||||
e.target.value = ''
|
||||
}
|
||||
|
||||
if (checking) {
|
||||
return (
|
||||
<div style={styles.page}>
|
||||
<div style={styles.card}>
|
||||
<p style={{ color: 'var(--color-muted, #888)', textAlign: 'center' }}>Loading…</p>
|
||||
<div style={s.page}>
|
||||
<div style={s.card}>
|
||||
<p style={{ color: '#888', textAlign: 'center', margin: 0 }}>Loading…</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -144,44 +156,27 @@ export function NuggetsHostPortal() {
|
||||
|
||||
if (!authenticated) {
|
||||
return (
|
||||
<div style={styles.page}>
|
||||
<div style={styles.card}>
|
||||
<div style={styles.logo}>
|
||||
<span style={styles.logoEmoji}>🎙️</span>
|
||||
<span style={styles.logoTitle}>Nuggets</span>
|
||||
<div style={s.page}>
|
||||
<div style={s.card}>
|
||||
<div style={s.logoRow}>
|
||||
<span style={s.logoEmoji}>🎙️</span>
|
||||
<span style={s.logoTitle}>Nuggets</span>
|
||||
</div>
|
||||
<h1 style={styles.heading}>Host Upload Portal</h1>
|
||||
<p style={styles.subheading}>Sign in to upload your episode files to Seafile.</p>
|
||||
|
||||
<form onSubmit={handleLogin} style={styles.form}>
|
||||
<div style={styles.field}>
|
||||
<label style={styles.label} htmlFor="hp-username">Username</label>
|
||||
<input
|
||||
id="hp-username"
|
||||
style={styles.input}
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
disabled={loggingIn}
|
||||
required
|
||||
/>
|
||||
<h1 style={s.heading}>Host Upload Portal</h1>
|
||||
<p style={s.subText}>Sign in with your host credentials to submit an episode.</p>
|
||||
<form onSubmit={handleLogin} style={s.form}>
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="hp-u">Username</label>
|
||||
<input id="hp-u" style={s.input} type="text" autoComplete="username"
|
||||
value={username} onChange={e => setUsername(e.target.value)} disabled={loggingIn} required />
|
||||
</div>
|
||||
<div style={styles.field}>
|
||||
<label style={styles.label} htmlFor="hp-password">Password</label>
|
||||
<input
|
||||
id="hp-password"
|
||||
style={styles.input}
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
disabled={loggingIn}
|
||||
required
|
||||
/>
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="hp-p">Password</label>
|
||||
<input id="hp-p" style={s.input} type="password" autoComplete="current-password"
|
||||
value={password} onChange={e => setPassword(e.target.value)} disabled={loggingIn} required />
|
||||
</div>
|
||||
{loginError && <p style={styles.errorMsg}>{loginError}</p>}
|
||||
<button style={styles.btnPrimary} type="submit" disabled={loggingIn}>
|
||||
{loginError && <p style={s.errorMsg}>{loginError}</p>}
|
||||
<button style={s.btnPrimary} type="submit" disabled={loggingIn}>
|
||||
{loggingIn ? 'Signing in…' : 'Sign In'}
|
||||
</button>
|
||||
</form>
|
||||
@@ -190,98 +185,140 @@ export function NuggetsHostPortal() {
|
||||
)
|
||||
}
|
||||
|
||||
const targetLabel = target === 'upload' ? 'Episode Upload' : 'Episode Info'
|
||||
const acceptTypes = target === 'upload'
|
||||
? '.mp3,.wav,.m4a,.aac,.flac,.ogg,.mp4,.mov'
|
||||
: '*'
|
||||
|
||||
return (
|
||||
<div style={styles.page}>
|
||||
<div style={{ ...styles.card, maxWidth: 640 }}>
|
||||
<div style={styles.headerRow}>
|
||||
<div style={styles.logo}>
|
||||
<span style={styles.logoEmoji}>🎙️</span>
|
||||
<span style={styles.logoTitle}>Nuggets Upload Portal</span>
|
||||
<div style={s.page}>
|
||||
<div style={{ ...s.card, maxWidth: 560 }}>
|
||||
{/* Header */}
|
||||
<div style={s.header}>
|
||||
<div style={s.logoRow}>
|
||||
<span style={s.logoEmoji}>🎙️</span>
|
||||
<span style={s.logoTitle}>Nuggets Upload Portal</span>
|
||||
</div>
|
||||
<div style={styles.headerRight}>
|
||||
<span style={styles.welcomeText}>Hi, {hostName}</span>
|
||||
<button style={styles.btnGhost} onClick={handleLogout}>Sign out</button>
|
||||
<div style={s.headerRight}>
|
||||
<span style={s.welcomeText}>{hostName}</span>
|
||||
<button style={s.btnGhost} onClick={handleLogout}>Sign out</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!seafileConfigured && (
|
||||
<div style={styles.warningBanner}>
|
||||
Seafile is not configured yet. Contact the admin to set up the connection.
|
||||
<div style={s.warning}>
|
||||
Seafile is not configured yet — contact the admin before uploading.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={styles.targetRow}>
|
||||
<button
|
||||
style={target === 'upload' ? styles.tabActive : styles.tab}
|
||||
onClick={() => { setTarget('upload'); setUploadError('') }}
|
||||
>
|
||||
🎵 Episode Upload
|
||||
</button>
|
||||
<button
|
||||
style={target === 'info' ? styles.tabActive : styles.tab}
|
||||
onClick={() => { setTarget('info'); setUploadError('') }}
|
||||
>
|
||||
📄 Episode Info
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} style={s.form}>
|
||||
{/* Episode Name */}
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="ep-name">Episode Name <span style={s.req}>*</span></label>
|
||||
<input
|
||||
id="ep-name"
|
||||
style={s.input}
|
||||
type="text"
|
||||
placeholder="e.g. The Grace of God in Romans 5"
|
||||
value={episodeName}
|
||||
onChange={e => setEpisodeName(e.target.value)}
|
||||
disabled={uploading}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p style={styles.targetHint}>
|
||||
{target === 'upload'
|
||||
? 'Upload your finished audio file (MP3, WAV, M4A, etc.).'
|
||||
: 'Upload show notes, outlines, scripts, or any supporting document.'}
|
||||
</p>
|
||||
{/* Passage */}
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="ep-passage">Passage <span style={s.req}>*</span></label>
|
||||
<input
|
||||
id="ep-passage"
|
||||
style={s.input}
|
||||
type="text"
|
||||
placeholder="e.g. Romans 5:1-11"
|
||||
value={passage}
|
||||
onChange={e => setPassage(e.target.value)}
|
||||
disabled={uploading}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={dropRef}
|
||||
style={{
|
||||
...styles.dropZone,
|
||||
...(dragging ? styles.dropZoneActive : {}),
|
||||
...(uploading ? styles.dropZoneDisabled : {}),
|
||||
}}
|
||||
onDragOver={e => { e.preventDefault(); setDragging(true) }}
|
||||
onDragLeave={() => setDragging(false)}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => !uploading && fileInputRef.current?.click()}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept={acceptTypes}
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
{uploading ? (
|
||||
<div style={styles.progressWrap}>
|
||||
<p style={styles.dropLabel}>Uploading to {targetLabel}…</p>
|
||||
<div style={styles.progressBar}>
|
||||
<div style={{ ...styles.progressFill, width: `${progress}%` }} />
|
||||
{/* Description */}
|
||||
<div style={s.field}>
|
||||
<label style={s.label} htmlFor="ep-desc">Description</label>
|
||||
<textarea
|
||||
id="ep-desc"
|
||||
style={{ ...s.input, resize: 'vertical', minHeight: 80 }}
|
||||
placeholder="A short summary of what this episode covers…"
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
disabled={uploading}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Audio File */}
|
||||
<div style={s.field}>
|
||||
<label style={s.label}>Audio File <span style={s.req}>*</span></label>
|
||||
<div
|
||||
style={{
|
||||
...s.dropZone,
|
||||
...(dragging ? s.dropZoneActive : {}),
|
||||
...(uploading ? s.dropZoneDisabled : {}),
|
||||
...(file ? s.dropZoneHasFile : {}),
|
||||
}}
|
||||
onDragOver={e => { e.preventDefault(); if (!uploading) setDragging(true) }}
|
||||
onDragLeave={() => setDragging(false)}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => !uploading && fileInputRef.current?.click()}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".mp3,.wav,.m4a,.aac,.flac,.ogg,.mp4,.mov"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
{file ? (
|
||||
<div style={s.fileInfo}>
|
||||
<span style={s.fileIcon}>🎵</span>
|
||||
<div>
|
||||
<p style={s.fileName}>{file.name}</p>
|
||||
<p style={s.fileSize}>{(file.size / (1024 * 1024)).toFixed(1)} MB — click to change</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<span style={s.dropIcon}>{dragging ? '📂' : '⬆️'}</span>
|
||||
<p style={s.dropLabel}>{dragging ? 'Drop to select' : 'Drop audio file here, or click to browse'}</p>
|
||||
<p style={s.dropSub}>MP3, WAV, M4A, FLAC, etc.</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress */}
|
||||
{uploading && (
|
||||
<div style={s.progressWrap}>
|
||||
<div style={s.progressBar}>
|
||||
<div style={{ ...s.progressFill, width: `${progress}%` }} />
|
||||
</div>
|
||||
<p style={styles.progressPct}>{progress}%</p>
|
||||
<p style={s.progressLabel}>Uploading… {progress}%</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<span style={styles.dropIcon}>{dragging ? '📂' : '⬆️'}</span>
|
||||
<p style={styles.dropLabel}>{dragging ? 'Drop to upload' : 'Drop a file here, or click to browse'}</p>
|
||||
<p style={styles.dropSub}>→ {targetLabel}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{uploadError && <p style={styles.errorMsg}>{uploadError}</p>}
|
||||
{uploadError && <p style={s.errorMsg}>{uploadError}</p>}
|
||||
|
||||
{uploads.length > 0 && (
|
||||
<div style={styles.uploadList}>
|
||||
<p style={styles.uploadListTitle}>Uploaded this session</p>
|
||||
{uploads.map((u, i) => (
|
||||
<div key={i} style={styles.uploadRow}>
|
||||
<span style={styles.uploadCheck}>✓</span>
|
||||
<span style={styles.uploadName}>{u.filename}</span>
|
||||
<span style={styles.uploadMeta}>{u.dir} · {u.at}</span>
|
||||
<button style={{ ...s.btnPrimary, marginTop: 4 }} type="submit" disabled={uploading || !seafileConfigured}>
|
||||
{uploading ? 'Uploading…' : 'Submit Episode'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Submitted this session */}
|
||||
{submitted.length > 0 && (
|
||||
<div style={s.submittedList}>
|
||||
<p style={s.submittedTitle}>Submitted this session</p>
|
||||
{submitted.map((ep, i) => (
|
||||
<div key={i} style={s.submittedRow}>
|
||||
<span style={s.checkMark}>✓</span>
|
||||
<div>
|
||||
<p style={s.submittedEp}>{ep.episodeName}</p>
|
||||
<p style={s.submittedMeta}>{ep.filename} · {ep.at}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -292,7 +329,7 @@ export function NuggetsHostPortal() {
|
||||
}
|
||||
|
||||
// ── Styles ────────────────────────────────────────────────────────────────
|
||||
const styles: Record<string, React.CSSProperties> = {
|
||||
const s: Record<string, React.CSSProperties> = {
|
||||
page: {
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
@@ -305,45 +342,17 @@ const styles: Record<string, React.CSSProperties> = {
|
||||
background: 'var(--color-surface, #fff)',
|
||||
border: '1px solid var(--color-border, #e5e0d5)',
|
||||
borderRadius: 16,
|
||||
padding: '2.5rem 2rem',
|
||||
padding: '2.25rem 2rem',
|
||||
width: '100%',
|
||||
maxWidth: 420,
|
||||
boxShadow: '0 4px 24px rgba(0,0,0,0.06)',
|
||||
},
|
||||
logo: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginBottom: 16,
|
||||
},
|
||||
logoEmoji: { fontSize: '1.6rem' },
|
||||
logoTitle: { fontWeight: 700, fontSize: '1.05rem', letterSpacing: '-0.01em' },
|
||||
heading: { fontSize: '1.45rem', fontWeight: 700, margin: '0 0 6px' },
|
||||
subheading: { color: 'var(--color-muted, #888)', fontSize: '0.9rem', margin: '0 0 1.5rem' },
|
||||
form: { display: 'flex', flexDirection: 'column', gap: 16 },
|
||||
field: { display: 'flex', flexDirection: 'column', gap: 5 },
|
||||
label: { fontSize: '0.85rem', fontWeight: 600 },
|
||||
input: {
|
||||
padding: '0.55rem 0.75rem',
|
||||
border: '1px solid var(--color-border, #e5e0d5)',
|
||||
borderRadius: 8,
|
||||
fontSize: '0.95rem',
|
||||
background: 'var(--color-input-bg, #faf9f7)',
|
||||
outline: 'none',
|
||||
},
|
||||
errorMsg: { color: '#c0392b', fontSize: '0.85rem', margin: '2px 0' },
|
||||
btnPrimary: {
|
||||
background: '#c8a96e',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: 8,
|
||||
padding: '0.65rem 1rem',
|
||||
fontWeight: 700,
|
||||
fontSize: '0.95rem',
|
||||
cursor: 'pointer',
|
||||
marginTop: 4,
|
||||
},
|
||||
headerRow: {
|
||||
logoRow: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 },
|
||||
logoEmoji: { fontSize: '1.5rem' },
|
||||
logoTitle: { fontWeight: 700, fontSize: '1rem' },
|
||||
heading: { fontSize: '1.4rem', fontWeight: 700, margin: '0 0 6px' },
|
||||
subText: { color: '#888', fontSize: '0.88rem', margin: '0 0 1.4rem' },
|
||||
header: {
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
@@ -351,89 +360,91 @@ const styles: Record<string, React.CSSProperties> = {
|
||||
gap: 12,
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
headerRight: { display: 'flex', alignItems: 'center', gap: 10 },
|
||||
welcomeText: { fontSize: '0.85rem', color: 'var(--color-muted, #888)' },
|
||||
headerRight: { display: 'flex', alignItems: 'center', gap: 10, paddingTop: 2 },
|
||||
welcomeText: { fontSize: '0.85rem', color: '#888', fontWeight: 500 },
|
||||
btnGhost: {
|
||||
background: 'none',
|
||||
border: '1px solid var(--color-border, #e5e0d5)',
|
||||
borderRadius: 6,
|
||||
padding: '0.3rem 0.6rem',
|
||||
padding: '0.3rem 0.65rem',
|
||||
fontSize: '0.8rem',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
warningBanner: {
|
||||
warning: {
|
||||
background: '#fff8e1',
|
||||
border: '1px solid #ffe082',
|
||||
borderRadius: 8,
|
||||
padding: '0.65rem 0.9rem',
|
||||
fontSize: '0.85rem',
|
||||
padding: '0.6rem 0.85rem',
|
||||
fontSize: '0.84rem',
|
||||
marginBottom: 16,
|
||||
color: '#7a5f00',
|
||||
},
|
||||
targetRow: { display: 'flex', gap: 8, marginBottom: 10 },
|
||||
tab: {
|
||||
flex: 1,
|
||||
background: 'var(--color-surface-alt, #f7f5f0)',
|
||||
form: { display: 'flex', flexDirection: 'column', gap: 14 },
|
||||
field: { display: 'flex', flexDirection: 'column', gap: 5 },
|
||||
label: { fontSize: '0.85rem', fontWeight: 600 },
|
||||
req: { color: '#c0392b' },
|
||||
input: {
|
||||
padding: '0.55rem 0.75rem',
|
||||
border: '1px solid var(--color-border, #e5e0d5)',
|
||||
borderRadius: 8,
|
||||
padding: '0.5rem',
|
||||
fontSize: '0.85rem',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 500,
|
||||
fontSize: '0.93rem',
|
||||
background: 'var(--color-input-bg, #faf9f7)',
|
||||
outline: 'none',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
fontFamily: 'inherit',
|
||||
},
|
||||
tabActive: {
|
||||
flex: 1,
|
||||
background: '#c8a96e',
|
||||
border: '1px solid #c8a96e',
|
||||
borderRadius: 8,
|
||||
padding: '0.5rem',
|
||||
fontSize: '0.85rem',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 700,
|
||||
color: '#fff',
|
||||
},
|
||||
targetHint: { fontSize: '0.82rem', color: 'var(--color-muted, #888)', margin: '0 0 14px' },
|
||||
dropZone: {
|
||||
border: '2px dashed var(--color-border, #e5e0d5)',
|
||||
borderRadius: 12,
|
||||
padding: '2.5rem 1.5rem',
|
||||
border: '2px dashed var(--color-border, #ddd8cc)',
|
||||
borderRadius: 10,
|
||||
padding: '1.4rem 1rem',
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
transition: 'border-color 0.15s, background 0.15s',
|
||||
userSelect: 'none',
|
||||
},
|
||||
dropZoneActive: {
|
||||
borderColor: '#c8a96e',
|
||||
background: 'rgba(200,169,110,0.06)',
|
||||
},
|
||||
dropZoneDisabled: { cursor: 'default', opacity: 0.7 },
|
||||
dropIcon: { fontSize: '2rem', display: 'block', marginBottom: 8 },
|
||||
dropLabel: { fontWeight: 600, margin: '0 0 4px', fontSize: '0.95rem' },
|
||||
dropSub: { color: 'var(--color-muted, #888)', fontSize: '0.82rem', margin: 0 },
|
||||
progressWrap: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 },
|
||||
progressBar: {
|
||||
width: '100%',
|
||||
height: 8,
|
||||
background: '#e5e0d5',
|
||||
borderRadius: 4,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressFill: {
|
||||
height: '100%',
|
||||
dropZoneActive: { borderColor: '#c8a96e', background: 'rgba(200,169,110,0.06)' },
|
||||
dropZoneDisabled: { cursor: 'default', opacity: 0.65 },
|
||||
dropZoneHasFile: { borderColor: '#27ae60', background: 'rgba(39,174,96,0.04)' },
|
||||
dropIcon: { fontSize: '1.8rem', display: 'block', marginBottom: 6 },
|
||||
dropLabel: { fontWeight: 600, margin: '0 0 3px', fontSize: '0.9rem' },
|
||||
dropSub: { color: '#888', fontSize: '0.8rem', margin: 0 },
|
||||
fileInfo: { display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left' },
|
||||
fileIcon: { fontSize: '1.8rem', flexShrink: 0 },
|
||||
fileName: { fontWeight: 600, fontSize: '0.88rem', margin: '0 0 2px', wordBreak: 'break-all' },
|
||||
fileSize: { color: '#888', fontSize: '0.78rem', margin: 0 },
|
||||
progressWrap: { display: 'flex', flexDirection: 'column', gap: 5 },
|
||||
progressBar: { height: 7, background: '#e5e0d5', borderRadius: 4, overflow: 'hidden' },
|
||||
progressFill: { height: '100%', background: '#c8a96e', borderRadius: 4, transition: 'width 0.2s' },
|
||||
progressLabel: { fontSize: '0.82rem', color: '#888', margin: 0, textAlign: 'center' },
|
||||
errorMsg: { color: '#c0392b', fontSize: '0.84rem', margin: '2px 0' },
|
||||
btnPrimary: {
|
||||
background: '#c8a96e',
|
||||
borderRadius: 4,
|
||||
transition: 'width 0.2s',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: 8,
|
||||
padding: '0.7rem 1rem',
|
||||
fontWeight: 700,
|
||||
fontSize: '0.95rem',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
},
|
||||
progressPct: { fontSize: '0.85rem', color: 'var(--color-muted, #888)', margin: 0 },
|
||||
uploadList: {
|
||||
submittedList: {
|
||||
marginTop: 20,
|
||||
border: '1px solid var(--color-border, #e5e0d5)',
|
||||
borderRadius: 10,
|
||||
padding: '0.75rem 1rem',
|
||||
},
|
||||
uploadListTitle: { fontWeight: 600, fontSize: '0.82rem', color: 'var(--color-muted, #888)', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.04em' },
|
||||
uploadRow: { display: 'flex', alignItems: 'baseline', gap: 8, padding: '4px 0', flexWrap: 'wrap' },
|
||||
uploadCheck: { color: '#27ae60', fontWeight: 700 },
|
||||
uploadName: { fontSize: '0.9rem', fontWeight: 500, wordBreak: 'break-all' },
|
||||
uploadMeta: { fontSize: '0.78rem', color: 'var(--color-muted, #888)', whiteSpace: 'nowrap' },
|
||||
submittedTitle: {
|
||||
fontWeight: 600,
|
||||
fontSize: '0.78rem',
|
||||
color: '#888',
|
||||
margin: '0 0 8px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
},
|
||||
submittedRow: { display: 'flex', alignItems: 'flex-start', gap: 10, padding: '5px 0' },
|
||||
checkMark: { color: '#27ae60', fontWeight: 700, flexShrink: 0 },
|
||||
submittedEp: { fontWeight: 600, fontSize: '0.88rem', margin: '0 0 2px' },
|
||||
submittedMeta: { color: '#888', fontSize: '0.78rem', margin: 0 },
|
||||
}
|
||||
Reference in new issue
Block a user