855 lines
24 KiB
HTML
855 lines
24 KiB
HTML
<!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>
|