Add templates/acheivments/achievement_sample2_input.html
This commit is contained in:
parent
a02c3a059c
commit
6a49256399
854
templates/acheivments/achievement_sample2_input.html
Normal file
854
templates/acheivments/achievement_sample2_input.html
Normal file
@ -0,0 +1,854 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>ETA – Create Achievement</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
:root {
|
||||
--eta-bg: #020314;
|
||||
--eta-panel: rgba(15, 23, 42, 0.92);
|
||||
--eta-glass: rgba(15, 23, 42, 0.78);
|
||||
--eta-border: rgba(148, 163, 184, 0.6);
|
||||
--eta-gold: #facc15;
|
||||
--eta-gold-soft: rgba(250, 204, 21, 0.18);
|
||||
--eta-text: #e5e7eb;
|
||||
--eta-muted: #9ca3af;
|
||||
--eta-danger: #f97373;
|
||||
--eta-radius: 18px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at top, #111827 0, #020314 55%, #000 100%);
|
||||
color: var(--eta-text);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding: 24px 12px 32px;
|
||||
}
|
||||
|
||||
.eta-wrap {
|
||||
width: 100%;
|
||||
max-width: 1240px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.eta-wrap {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.eta-panel {
|
||||
border-radius: var(--eta-radius);
|
||||
background: var(--eta-glass);
|
||||
border: 1px solid var(--eta-border);
|
||||
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
|
||||
backdrop-filter: blur(16px);
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
.eta-panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.eta-panel-title {
|
||||
font-size: 0.86rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-panel-subtitle {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.eta-tag {
|
||||
font-size: 0.74rem;
|
||||
padding: 3px 9px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--eta-border);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.eta-field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.eta-field-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.eta-label {
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--eta-muted);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.eta-label span.hint {
|
||||
font-size: 0.7rem;
|
||||
color: var(--eta-muted);
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.eta-input,
|
||||
.eta-select,
|
||||
.eta-textarea {
|
||||
width: 100%;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(55, 65, 81, 1);
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
color: var(--eta-text);
|
||||
padding: 7px 11px;
|
||||
font-size: 0.86rem;
|
||||
outline: none;
|
||||
transition: border-color 0.14s ease-out, box-shadow 0.14s ease-out, background 0.14s ease-out;
|
||||
}
|
||||
|
||||
.eta-textarea {
|
||||
border-radius: 14px;
|
||||
min-height: 72px;
|
||||
resize: vertical;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.eta-input:focus,
|
||||
.eta-select:focus,
|
||||
.eta-textarea:focus {
|
||||
border-color: var(--eta-gold);
|
||||
box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.5);
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
}
|
||||
|
||||
.eta-input::placeholder,
|
||||
.eta-textarea::placeholder {
|
||||
color: rgba(148, 163, 184, 0.7);
|
||||
}
|
||||
|
||||
.eta-input[readonly] {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.eta-pill-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.eta-pill {
|
||||
font-size: 0.74rem;
|
||||
padding: 4px 9px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(55, 65, 81, 1);
|
||||
cursor: pointer;
|
||||
background: rgba(15, 23, 42, 0.92);
|
||||
}
|
||||
|
||||
.eta-pill.is-active {
|
||||
border-color: var(--eta-gold);
|
||||
background: var(--eta-gold-soft);
|
||||
color: var(--eta-gold);
|
||||
}
|
||||
|
||||
.eta-medal-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.eta-medal-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 9px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(55, 65, 81, 1);
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.eta-medal-input span.badge {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.eta-medal-gold span.badge {
|
||||
background: linear-gradient(135deg, #facc15, #f97316);
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.eta-medal-silver span.badge {
|
||||
background: linear-gradient(135deg, #e5e7eb, #9ca3af);
|
||||
color: #020617;
|
||||
}
|
||||
|
||||
.eta-medal-bronze span.badge {
|
||||
background: linear-gradient(135deg, #f97316, #b45309);
|
||||
color: #020617;
|
||||
}
|
||||
|
||||
.eta-medal-input input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: var(--eta-text);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.eta-medal-input input::-webkit-outer-spin-button,
|
||||
.eta-medal-input input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.eta-medal-input input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.eta-athletes-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.eta-athlete-row {
|
||||
display: grid;
|
||||
grid-template-columns: 0.3fr 0.7fr 0.6fr;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.eta-athlete-row {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.eta-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.74rem;
|
||||
border: 1px solid rgba(55, 65, 81, 1);
|
||||
}
|
||||
|
||||
.eta-chip-btn {
|
||||
cursor: pointer;
|
||||
background: rgba(15, 23, 42, 0.96);
|
||||
}
|
||||
|
||||
.eta-chip-btn:hover {
|
||||
border-color: var(--eta-danger);
|
||||
color: var(--eta-danger);
|
||||
}
|
||||
|
||||
.eta-footer-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.eta-note {
|
||||
font-size: 0.75rem;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-btn-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.eta-btn {
|
||||
border-radius: 999px;
|
||||
font-size: 0.82rem;
|
||||
padding: 7px 14px;
|
||||
border: 1px solid var(--eta-border);
|
||||
background: rgba(15, 23, 42, 0.96);
|
||||
color: var(--eta-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.eta-btn-primary {
|
||||
background: linear-gradient(135deg, var(--eta-gold), #fb923c);
|
||||
border-color: transparent;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.eta-btn-primary:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.eta-preview-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 22px;
|
||||
padding: 14px 16px;
|
||||
background:
|
||||
radial-gradient(circle at top left, #111827, #020617 50%, #020314 100%);
|
||||
border: 1px solid rgba(75, 85, 99, 0.8);
|
||||
color: var(--eta-text);
|
||||
min-height: 140px;
|
||||
}
|
||||
|
||||
.eta-preview-glow {
|
||||
position: absolute;
|
||||
inset: -40%;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(250, 204, 21, 0.2), transparent 55%),
|
||||
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.18), transparent 55%);
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.eta-preview-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.eta-preview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.eta-preview-eyebrow {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-preview-medals {
|
||||
font-size: 0.8rem;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(250, 204, 21, 0.9);
|
||||
background: var(--eta-gold-soft);
|
||||
color: var(--eta-gold);
|
||||
}
|
||||
|
||||
.eta-preview-title {
|
||||
margin: 0 0 3px;
|
||||
font-size: 1.02rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.eta-preview-meta {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-preview-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.eta-preview-avatars {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.eta-preview-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid #020617;
|
||||
background: conic-gradient(from 200deg, #fb923c, #f97316, #e11d48, #fb923c);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: #020617;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.eta-preview-avatar:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.eta-preview-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--eta-gold);
|
||||
}
|
||||
|
||||
.eta-preview-cta span.icon {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="eta-wrap">
|
||||
<section class="eta-panel">
|
||||
<header class="eta-panel-header">
|
||||
<div>
|
||||
<div class="eta-panel-title">New achievement</div>
|
||||
<div class="eta-panel-subtitle">Create spotlight card</div>
|
||||
</div>
|
||||
<span class="eta-tag">Creator Mode</span>
|
||||
</header>
|
||||
|
||||
<form id="eta-form" autocomplete="off">
|
||||
<div class="eta-field-group">
|
||||
<label class="eta-label">
|
||||
Title
|
||||
<span class="hint">e.g. Thailand Open Championships</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="eta-input"
|
||||
id="eta-title"
|
||||
placeholder="Achievement title"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="eta-field-row">
|
||||
<div class="eta-field-group">
|
||||
<label class="eta-label">
|
||||
Location
|
||||
<span class="hint">City, Country</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="eta-input"
|
||||
id="eta-location"
|
||||
placeholder="Bangkok, Thailand"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="eta-field-group">
|
||||
<label class="eta-label">
|
||||
Date label
|
||||
<span class="hint">Shown under title</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="eta-input"
|
||||
id="eta-date-label"
|
||||
placeholder="November 2023"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eta-field-row">
|
||||
<div class="eta-field-group">
|
||||
<label class="eta-label">
|
||||
Type
|
||||
<span class="hint">Ribbon on card</span>
|
||||
</label>
|
||||
<div class="eta-pill-row" id="eta-type-pills">
|
||||
<button type="button" class="eta-pill is-active" data-value="International">International</button>
|
||||
<button type="button" class="eta-pill" data-value="National">National</button>
|
||||
<button type="button" class="eta-pill" data-value="Regional">Regional</button>
|
||||
</div>
|
||||
<input type="hidden" id="eta-type" value="International" />
|
||||
</div>
|
||||
<div class="eta-field-group">
|
||||
<label class="eta-label">
|
||||
Category
|
||||
<span class="hint">G2, Ranking event, etc.</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="eta-input"
|
||||
id="eta-category"
|
||||
placeholder="World Taekwondo G2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eta-field-group">
|
||||
<label class="eta-label">
|
||||
Cover image URL
|
||||
<span class="hint">Used in spotlight art</span>
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
class="eta-input"
|
||||
id="eta-image"
|
||||
placeholder="https://example.com/eta-thailand.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="eta-field-group">
|
||||
<label class="eta-label">
|
||||
Medals
|
||||
<span class="hint">Numbers only</span>
|
||||
</label>
|
||||
<div class="eta-medal-row">
|
||||
<div class="eta-medal-input eta-medal-gold">
|
||||
<span class="badge">🥇</span>
|
||||
<input type="number" min="0" id="eta-gold" placeholder="0" />
|
||||
</div>
|
||||
<div class="eta-medal-input eta-medal-silver">
|
||||
<span class="badge">🥈</span>
|
||||
<input type="number" min="0" id="eta-silver" placeholder="0" />
|
||||
</div>
|
||||
<div class="eta-medal-input eta-medal-bronze">
|
||||
<span class="badge">🥉</span>
|
||||
<input type="number" min="0" id="eta-bronze" placeholder="0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eta-field-row">
|
||||
<div class="eta-field-group">
|
||||
<label class="eta-label">
|
||||
Total bouts
|
||||
<span class="hint">Optional</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
class="eta-input"
|
||||
id="eta-bouts"
|
||||
placeholder="6"
|
||||
/>
|
||||
</div>
|
||||
<div class="eta-field-group">
|
||||
<label class="eta-label">
|
||||
Wins
|
||||
<span class="hint">Optional</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
class="eta-input"
|
||||
id="eta-wins"
|
||||
placeholder="4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eta-field-group">
|
||||
<label class="eta-label">
|
||||
Short story
|
||||
<span class="hint">Used in spotlight narrative</span>
|
||||
</label>
|
||||
<textarea
|
||||
class="eta-textarea"
|
||||
id="eta-story"
|
||||
placeholder="Describe how ETA performed, key fights, and why this achievement matters."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="eta-field-group">
|
||||
<label class="eta-label">
|
||||
Athletes
|
||||
<span class="hint">Max 4 for card avatars</span>
|
||||
</label>
|
||||
|
||||
<div class="eta-athletes-list" id="eta-athletes-list">
|
||||
<div class="eta-athlete-row">
|
||||
<input
|
||||
type="text"
|
||||
class="eta-input"
|
||||
id="eta-athlete-name-1"
|
||||
placeholder="Name (Hanan)"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="eta-input"
|
||||
id="eta-athlete-role-1"
|
||||
placeholder="Role / Category"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="eta-input"
|
||||
id="eta-athlete-result-1"
|
||||
placeholder="Result (Gold, Silver...)"
|
||||
/>
|
||||
</div>
|
||||
<div class="eta-athlete-row">
|
||||
<input
|
||||
type="text"
|
||||
class="eta-input"
|
||||
id="eta-athlete-name-2"
|
||||
placeholder="Name"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="eta-input"
|
||||
id="eta-athlete-role-2"
|
||||
placeholder="Role / Category"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="eta-input"
|
||||
id="eta-athlete-result-2"
|
||||
placeholder="Result"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eta-footer-row">
|
||||
<div class="eta-note">Initials are used for the card avatars.</div>
|
||||
<div class="eta-btn-row">
|
||||
<button type="button" class="eta-btn eta-chip-btn" id="eta-add-athlete">+ Add athlete</button>
|
||||
<button type="button" class="eta-btn eta-chip-btn" id="eta-clear-athletes">Clear all</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eta-footer-row">
|
||||
<div class="eta-note">All changes preview live on the card on the right.</div>
|
||||
<div class="eta-btn-row">
|
||||
<button type="button" class="eta-btn">Reset</button>
|
||||
<button type="submit" class="eta-btn eta-btn-primary">Save achievement</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="eta-panel">
|
||||
<header class="eta-panel-header">
|
||||
<div>
|
||||
<div class="eta-panel-title">Live preview</div>
|
||||
<div class="eta-panel-subtitle">Grid card output</div>
|
||||
</div>
|
||||
<span class="eta-tag">ETA Spotlight</span>
|
||||
</header>
|
||||
|
||||
<article class="eta-preview-card">
|
||||
<div class="eta-preview-glow"></div>
|
||||
<div class="eta-preview-inner">
|
||||
<div class="eta-preview-header">
|
||||
<span class="eta-preview-eyebrow" id="preview-type">International</span>
|
||||
<span class="eta-preview-medals" id="preview-medals">🥇 0 · 🥈 0 · 🥉 0</span>
|
||||
</div>
|
||||
<h3 class="eta-preview-title" id="preview-title">Achievement title</h3>
|
||||
<p class="eta-preview-meta" id="preview-meta">Location • Date label</p>
|
||||
|
||||
<div class="eta-preview-footer">
|
||||
<div class="eta-preview-avatars" id="preview-avatars">
|
||||
<!-- dynamic avatars -->
|
||||
</div>
|
||||
<div class="eta-preview-cta">
|
||||
<span>Open spotlight</span>
|
||||
<span class="icon">↗</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const typePills = document.querySelectorAll("#eta-type-pills .eta-pill");
|
||||
const typeHidden = document.getElementById("eta-type");
|
||||
|
||||
typePills.forEach((pill) => {
|
||||
pill.addEventListener("click", () => {
|
||||
typePills.forEach((p) => p.classList.remove("is-active"));
|
||||
pill.classList.add("is-active");
|
||||
typeHidden.value = pill.dataset.value;
|
||||
document.getElementById("preview-type").textContent = pill.dataset.value;
|
||||
});
|
||||
});
|
||||
|
||||
const titleInput = document.getElementById("eta-title");
|
||||
const locationInput = document.getElementById("eta-location");
|
||||
const dateLabelInput = document.getElementById("eta-date-label");
|
||||
const goldInput = document.getElementById("eta-gold");
|
||||
const silverInput = document.getElementById("eta-silver");
|
||||
const bronzeInput = document.getElementById("eta-bronze");
|
||||
|
||||
function updatePreviewText() {
|
||||
const title = titleInput.value.trim() || "Achievement title";
|
||||
const location = locationInput.value.trim() || "Location";
|
||||
const dateLabel = dateLabelInput.value.trim() || "Date label";
|
||||
|
||||
document.getElementById("preview-title").textContent = title;
|
||||
document.getElementById("preview-meta").textContent = location + " • " + dateLabel;
|
||||
}
|
||||
|
||||
function updatePreviewMedals() {
|
||||
const g = Number(goldInput.value || 0);
|
||||
const s = Number(silverInput.value || 0);
|
||||
const b = Number(bronzeInput.value || 0);
|
||||
document.getElementById("preview-medals").textContent =
|
||||
"🥇 " + g + " · 🥈 " + s + " · 🥉 " + b;
|
||||
}
|
||||
|
||||
[titleInput, locationInput, dateLabelInput].forEach((el) => {
|
||||
el.addEventListener("input", updatePreviewText);
|
||||
});
|
||||
[goldInput, silverInput, bronzeInput].forEach((el) => {
|
||||
el.addEventListener("input", updatePreviewMedals);
|
||||
});
|
||||
|
||||
const athletesList = document.getElementById("eta-athletes-list");
|
||||
const addAthleteBtn = document.getElementById("eta-add-athlete");
|
||||
const clearAthletesBtn = document.getElementById("eta-clear-athletes");
|
||||
const previewAvatars = document.getElementById("preview-avatars");
|
||||
|
||||
function rebuildAthleteRowsCount() {
|
||||
const rows = athletesList.querySelectorAll(".eta-athlete-row");
|
||||
return rows.length;
|
||||
}
|
||||
|
||||
addAthleteBtn.addEventListener("click", () => {
|
||||
const count = rebuildAthleteRowsCount();
|
||||
if (count >= 4) return;
|
||||
|
||||
const idx = count + 1;
|
||||
const row = document.createElement("div");
|
||||
row.className = "eta-athlete-row";
|
||||
row.innerHTML = `
|
||||
<input type="text" class="eta-input" id="eta-athlete-name-${idx}" placeholder="Name" />
|
||||
<input type="text" class="eta-input" id="eta-athlete-role-${idx}" placeholder="Role / Category" />
|
||||
<input type="text" class="eta-input" id="eta-athlete-result-${idx}" placeholder="Result" />
|
||||
`;
|
||||
athletesList.appendChild(row);
|
||||
wireAthleteInputs();
|
||||
updatePreviewAvatars();
|
||||
});
|
||||
|
||||
clearAthletesBtn.addEventListener("click", () => {
|
||||
athletesList.innerHTML = "";
|
||||
for (let i = 1; i <= 2; i++) {
|
||||
const row = document.createElement("div");
|
||||
row.className = "eta-athlete-row";
|
||||
row.innerHTML = `
|
||||
<input type="text" class="eta-input" id="eta-athlete-name-${i}" placeholder="Name" />
|
||||
<input type="text" class="eta-input" id="eta-athlete-role-${i}" placeholder="Role / Category" />
|
||||
<input type="text" class="eta-input" id="eta-athlete-result-${i}" placeholder="Result" />
|
||||
`;
|
||||
athletesList.appendChild(row);
|
||||
}
|
||||
wireAthleteInputs();
|
||||
updatePreviewAvatars();
|
||||
});
|
||||
|
||||
function getAthleteNames() {
|
||||
const rows = athletesList.querySelectorAll(".eta-athlete-row");
|
||||
const names = [];
|
||||
rows.forEach((row) => {
|
||||
const input = row.querySelector("input[id^='eta-athlete-name']");
|
||||
if (!input) return;
|
||||
const val = input.value.trim();
|
||||
if (val) names.push(val);
|
||||
});
|
||||
return names.slice(0, 4);
|
||||
}
|
||||
|
||||
function initialsFromName(name) {
|
||||
const parts = name.trim().split(/\s+/);
|
||||
if (parts.length === 1) return parts[0][0]?.toUpperCase() || "?";
|
||||
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
|
||||
}
|
||||
|
||||
function updatePreviewAvatars() {
|
||||
const names = getAthleteNames();
|
||||
previewAvatars.innerHTML = "";
|
||||
names.forEach((name) => {
|
||||
const span = document.createElement("span");
|
||||
span.className = "eta-preview-avatar";
|
||||
span.textContent = initialsFromName(name);
|
||||
previewAvatars.appendChild(span);
|
||||
});
|
||||
}
|
||||
|
||||
function wireAthleteInputs() {
|
||||
const inputs = athletesList.querySelectorAll("input[id^='eta-athlete-name']");
|
||||
inputs.forEach((input) => {
|
||||
input.removeEventListener("input", updatePreviewAvatars);
|
||||
input.addEventListener("input", updatePreviewAvatars);
|
||||
});
|
||||
}
|
||||
|
||||
wireAthleteInputs();
|
||||
updatePreviewText();
|
||||
updatePreviewMedals();
|
||||
updatePreviewAvatars();
|
||||
|
||||
const form = document.getElementById("eta-form");
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
const payload = {
|
||||
title: titleInput.value.trim(),
|
||||
location: locationInput.value.trim(),
|
||||
date_label: dateLabelInput.value.trim(),
|
||||
type: typeHidden.value,
|
||||
category: document.getElementById("eta-category").value.trim(),
|
||||
image_url: document.getElementById("eta-image").value.trim(),
|
||||
medals: {
|
||||
gold: Number(goldInput.value || 0),
|
||||
silver: Number(silverInput.value || 0),
|
||||
bronze: Number(bronzeInput.value || 0),
|
||||
},
|
||||
bouts: Number(document.getElementById("eta-bouts").value || 0),
|
||||
wins: Number(document.getElementById("eta-wins").value || 0),
|
||||
story: document.getElementById("eta-story").value.trim(),
|
||||
athletes: [],
|
||||
};
|
||||
|
||||
const rows = athletesList.querySelectorAll(".eta-athlete-row");
|
||||
rows.forEach((row) => {
|
||||
const name = row.querySelector("input[id^='eta-athlete-name']").value.trim();
|
||||
const role = row.querySelector("input[id^='eta-athlete-role']").value.trim();
|
||||
const result = row.querySelector("input[id^='eta-athlete-result']").value.trim();
|
||||
if (name || role || result) {
|
||||
payload.athletes.push({ name, role, result });
|
||||
}
|
||||
});
|
||||
|
||||
console.log("Achievement payload:", payload);
|
||||
alert("This is where you POST to your Laravel route.\nCheck console for payload.");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user