Add English/German i18n for frontend
This commit is contained in:
@@ -9,52 +9,59 @@
|
||||
<meta name="app-base" content="">
|
||||
</head>
|
||||
<body class="page">
|
||||
<div class="lang-switch">
|
||||
<label for="language-select" data-i18n="lang.label">Language</label>
|
||||
<select id="language-select">
|
||||
<option value="en" data-i18n="lang.en">English</option>
|
||||
<option value="de" data-i18n="lang.de">Deutsch</option>
|
||||
</select>
|
||||
</div>
|
||||
<section class="card hidden" id="auth-card">
|
||||
<div class="stack horizontal">
|
||||
<button class="ghost active" data-auth-tab="login" type="button">Log in</button>
|
||||
<button class="ghost" data-auth-tab="register" type="button">Register</button>
|
||||
<button class="ghost active" data-auth-tab="login" type="button" data-i18n="auth.loginTab">Log in</button>
|
||||
<button class="ghost" data-auth-tab="register" type="button" data-i18n="auth.registerTab">Register</button>
|
||||
</div>
|
||||
<form id="login-form" class="stack auth-form" data-mode="login">
|
||||
<label class="stack">
|
||||
<span class="label">Username</span>
|
||||
<span class="label" data-i18n="auth.username">Username</span>
|
||||
<input id="login-username" name="username" maxlength="64" autocomplete="username" required />
|
||||
</label>
|
||||
<label class="stack">
|
||||
<span class="label">Password</span>
|
||||
<span class="label" data-i18n="auth.password">Password</span>
|
||||
<input id="login-password" name="password" type="password" autocomplete="current-password" required />
|
||||
</label>
|
||||
<button type="submit">Log in</button>
|
||||
<button type="submit" data-i18n="auth.loginSubmit">Log in</button>
|
||||
</form>
|
||||
<form id="register-form" class="stack auth-form hidden" data-mode="register">
|
||||
<label class="stack">
|
||||
<span class="label">Username</span>
|
||||
<span class="label" data-i18n="auth.username">Username</span>
|
||||
<input id="register-username" name="username" maxlength="64" autocomplete="username" required />
|
||||
</label>
|
||||
<label class="stack">
|
||||
<span class="label">Password</span>
|
||||
<span class="label" data-i18n="auth.password">Password</span>
|
||||
<input id="register-password" name="password" type="password" autocomplete="new-password" required />
|
||||
</label>
|
||||
<label class="stack">
|
||||
<span class="label">Display name (shows to group)</span>
|
||||
<span class="label" data-i18n="auth.displayName">Display name (shows to group)</span>
|
||||
<input id="register-displayName" name="displayName" maxlength="64" required />
|
||||
</label>
|
||||
<label class="stack">
|
||||
<span class="label">Admin key (optional)</span>
|
||||
<span class="label" data-i18n="auth.adminKey">Admin key (optional)</span>
|
||||
<input id="register-adminkey" name="adminKey" type="password" maxlength="128" />
|
||||
</label>
|
||||
<button type="submit">Create account</button>
|
||||
<button type="submit" data-i18n="auth.registerSubmit">Create account</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="status-bar">
|
||||
<div class="status-left">
|
||||
<span id="welcome-text">Welcome!</span>
|
||||
<a id="logout" href="#" class="link inline-link">Logout</a>
|
||||
<span id="welcome-text" data-i18n="auth.welcome">Welcome!</span>
|
||||
<a id="logout" href="#" class="link inline-link" data-i18n="auth.logout">Logout</a>
|
||||
</div>
|
||||
<div class="status-right">
|
||||
<span class="status-dot"></span>
|
||||
<span id="phase-pill">Loading…</span>
|
||||
<span id="phase-pill" data-i18n="phase.loading">Loading…</span>
|
||||
<span class="counts" id="counts">—</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,90 +71,90 @@
|
||||
<section id="actions-card">
|
||||
<div id="suggest-view" class="phase-view hidden">
|
||||
<div class="card">
|
||||
<h2>Suggest (up to 5)</h2>
|
||||
<p class="hint">Only you can see your suggestions until Reveal.</p>
|
||||
<h2 data-i18n="suggest.title">Suggest (up to 5)</h2>
|
||||
<p class="hint" data-i18n="suggest.hint">Only you can see your suggestions until Reveal.</p>
|
||||
<form id="suggest-form" class="stack">
|
||||
<label class="stack">
|
||||
<span class="label">Game name *</span>
|
||||
<span class="label" data-i18n="form.gameName">Game name *</span>
|
||||
<input name="name" required maxlength="100" />
|
||||
</label>
|
||||
<label class="stack">
|
||||
<span class="label">Genre</span>
|
||||
<span class="label" data-i18n="form.genre">Genre</span>
|
||||
<input name="genre" maxlength="50" />
|
||||
</label>
|
||||
<label class="stack">
|
||||
<span class="label">Description</span>
|
||||
<span class="label" data-i18n="form.description">Description</span>
|
||||
<textarea name="description" maxlength="500"></textarea>
|
||||
</label>
|
||||
<div class="stack">
|
||||
<span class="label">Players</span>
|
||||
<span class="label" data-i18n="form.players">Players</span>
|
||||
<div class="stack horizontal">
|
||||
<label class="stack">
|
||||
<span class="label">Min</span>
|
||||
<span class="label" data-i18n="form.min">Min</span>
|
||||
<input name="minPlayers" type="number" min="1" max="32" inputmode="numeric" />
|
||||
</label>
|
||||
<label class="stack">
|
||||
<span class="label">Max</span>
|
||||
<span class="label" data-i18n="form.max">Max</span>
|
||||
<input name="maxPlayers" type="number" min="1" max="32" inputmode="numeric" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<label class="stack">
|
||||
<span class="label">Screenshot URL</span>
|
||||
<span class="label" data-i18n="form.screenshot">Screenshot URL</span>
|
||||
<input name="screenshotUrl" maxlength="2048" />
|
||||
</label>
|
||||
<label class="stack">
|
||||
<span class="label">YouTube URL</span>
|
||||
<span class="label" data-i18n="form.youtube">YouTube URL</span>
|
||||
<input name="youtubeUrl" maxlength="2048" />
|
||||
</label>
|
||||
<label class="stack">
|
||||
<span class="label">Game website URL</span>
|
||||
<span class="label" data-i18n="form.gameUrl">Game website URL</span>
|
||||
<input name="gameUrl" maxlength="2048" />
|
||||
</label>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit" data-i18n="form.submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card subcard">
|
||||
<h3>Your suggestions</h3>
|
||||
<h3 data-i18n="section.mySuggestions">Your suggestions</h3>
|
||||
<div id="my-suggestions" class="card-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="reveal-view" class="phase-view hidden">
|
||||
<h2>All Suggestions</h2>
|
||||
<h2 data-i18n="section.allSuggestions">All Suggestions</h2>
|
||||
<div id="all-suggestions" class="card-grid"></div>
|
||||
</div>
|
||||
|
||||
<div id="vote-view" class="phase-view hidden">
|
||||
<h2>Vote 0–10</h2>
|
||||
<h2 data-i18n="section.vote">Vote 0–10</h2>
|
||||
<div id="vote-list" class="card-grid"></div>
|
||||
</div>
|
||||
|
||||
<div id="results-view" class="phase-view hidden">
|
||||
<h2>Results</h2>
|
||||
<h2 data-i18n="section.results">Results</h2>
|
||||
<div id="results-list" class="card-grid results-grid"></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<button id="admin-toggle" class="admin-toggle" title="Admin tools">•••</button>
|
||||
<button id="admin-toggle" class="admin-toggle" title="Admin tools" data-i18n="admin.tools" data-i18n-attr="title">•••</button>
|
||||
<section class="card admin-panel hidden" id="admin-card">
|
||||
<div class="panel-header">
|
||||
<h3>Admin</h3>
|
||||
<h3 data-i18n="admin.title">Admin</h3>
|
||||
<button id="admin-close" class="ghost">✕</button>
|
||||
</div>
|
||||
<div class="stack horizontal">
|
||||
<select id="phase-select">
|
||||
<option>Suggest</option>
|
||||
<option>Reveal</option>
|
||||
<option>Vote</option>
|
||||
<option>Results</option>
|
||||
<option value="Suggest" data-i18n="phase.suggest">Suggest</option>
|
||||
<option value="Reveal" data-i18n="phase.reveal">Reveal</option>
|
||||
<option value="Vote" data-i18n="phase.vote">Vote</option>
|
||||
<option value="Results" data-i18n="phase.results">Results</option>
|
||||
</select>
|
||||
<button id="set-phase">Set phase</button>
|
||||
<button id="set-phase" data-i18n="admin.setPhase">Set phase</button>
|
||||
</div>
|
||||
<div class="stack horizontal">
|
||||
<button id="reset" class="danger">Reset (keep players)</button>
|
||||
<button id="factory-reset" class="danger">Factory reset</button>
|
||||
<button id="reset" class="danger" data-i18n="admin.reset">Reset (keep players)</button>
|
||||
<button id="factory-reset" class="danger" data-i18n="admin.factoryReset">Factory reset</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user