diff --git a/ai/tasks/done/TASK-039-community-clans-section-on-landing.md b/ai/tasks/done/TASK-039-community-clans-section-on-landing.md new file mode 100644 index 0000000..5de1b5b --- /dev/null +++ b/ai/tasks/done/TASK-039-community-clans-section-on-landing.md @@ -0,0 +1,62 @@ +# TASK-039-community-clans-section-on-landing + +## Goal +Añadir una nueva sección en la página principal para mostrar clanes/comunidades aliadas o relacionadas, con sus logos y un enlace hacia sus respectivos Discords. + +## Context +Además de los servidores y del histórico, se quiere que la home tenga una sección específica de clanes donde puedan verse logos representativos y un link hacia cada Discord. Esta sección debe integrarse en la landing sin romper su simplicidad ni convertirse en un directorio desordenado. + +## Steps +1. Revisar la landing actual y decidir una ubicación razonable para la nueva sección de clanes. +2. Diseñar una sección clara y visualmente coherente con el resto de la home. +3. Preparar una estructura de datos simple y mantenible para los clanes mostrados, por ejemplo: + - nombre + - logo + - enlace Discord + - descripción breve opcional +4. Implementar la sección mostrando al menos: + - logo de cada clan + - nombre + - botón o link claro hacia su Discord +5. Mantener la solución suficientemente flexible para añadir o quitar clanes más adelante sin reescribir la sección completa. +6. Asegurar que la sección funciona bien en escritorio y móvil. +7. No incrustar widgets completos de Discord salvo que ya estén expresamente aprobados; en esta task basta con enlaces claros al servidor Discord. +8. Mantener la landing limpia y visualmente consistente. +9. Al completar la implementación: + - dejar el repositorio consistente + - hacer commit + - hacer push al remoto si el entorno lo permite + +## Files to Read First +- AGENTS.md +- frontend/index.html +- frontend/assets/css/styles.css +- frontend/assets/js/main.js +- ai/repo-context.md + +## Expected Files to Modify +- frontend/index.html +- frontend/assets/css/styles.css +- frontend/assets/js/main.js +- opcionalmente un archivo de datos/config simple en frontend si mejora claridad, por ejemplo: + - frontend/assets/js/community-clans.js +- opcionalmente assets de logos si se dejan preparados o referenciados correctamente + +## Constraints +- No romper la landing actual. +- No recargar la home con demasiada información. +- No depender de páginas externas como iframes para esta sección. +- No introducir frameworks nuevos. +- No hacer cambios destructivos. +- Mantener el trabajo centrado en una sección limpia, visual y fácil de mantener. + +## Validation +- Existe una nueva sección de clanes en la página principal. +- Cada clan mostrado tiene logo y enlace claro a su Discord. +- La sección es coherente con el estilo de la landing. +- La estructura permite mantener y ampliar la lista de clanes razonablemente. +- Los cambios quedan committeados y se hace push al remoto si el entorno lo permite. + +## Change Budget +- Preferir menos de 5 archivos modificados o creados. +- Preferir menos de 240 líneas cambiadas. diff --git a/frontend/assets/css/styles.css b/frontend/assets/css/styles.css index 3fcd0ef..8fcb7f7 100644 --- a/frontend/assets/css/styles.css +++ b/frontend/assets/css/styles.css @@ -743,6 +743,94 @@ h2 { text-align: center; } +.clans-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); + gap: 20px; +} + +.clan-card { + position: relative; + overflow: hidden; + display: grid; + gap: 18px; + padding: 22px; + border: 1px solid rgba(159, 168, 141, 0.18); + border-radius: 22px; + background: + linear-gradient(180deg, rgba(28, 34, 25, 0.94), rgba(15, 18, 13, 0.98)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.03), + var(--shadow-soft); +} + +.clan-card::before { + content: ""; + position: absolute; + inset: 0 0 auto; + height: 1px; + background: linear-gradient(90deg, rgba(210, 182, 118, 0.4), transparent 68%); + pointer-events: none; +} + +.clan-card__brand { + display: grid; + grid-template-columns: minmax(92px, 112px) minmax(0, 1fr); + align-items: center; + gap: 18px; +} + +.clan-card__logo { + min-height: 92px; + padding: 12px; + display: grid; + place-items: center; + border: 1px dashed rgba(183, 201, 125, 0.3); + border-radius: 18px; + background: linear-gradient(180deg, rgba(19, 24, 16, 0.82), rgba(10, 13, 9, 0.66)); +} + +.clan-card__logo img { + width: auto; + height: auto; + max-width: 100%; + max-height: 84px; + object-fit: contain; +} + +.clan-card__copy { + display: grid; + gap: 8px; +} + +.clan-card__eyebrow { + margin: 0; + color: var(--accent-warm); + font-size: 0.68rem; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.clan-card__copy h3, +.clan-card__copy p { + margin: 0; +} + +.clan-card__copy h3 { + font-size: 1.08rem; + line-height: 1.4; +} + +.clan-card__copy p:last-child { + color: var(--text-soft); + line-height: 1.65; +} + +.clan-card__link { + width: fit-content; + min-width: 180px; +} + @media (max-width: 1120px) { .hero__brand { grid-template-columns: 1fr; @@ -766,7 +854,8 @@ h2 { @media (max-width: 760px) { .servers-grid, - .servers-grid--section { + .servers-grid--section, + .clans-grid { grid-template-columns: 1fr; } } @@ -853,6 +942,15 @@ h2 { grid-template-columns: 1fr; } + .clan-card__brand { + grid-template-columns: 1fr; + justify-items: start; + } + + .clan-card__link { + width: 100%; + } + .panel::before { left: 16px; } diff --git a/frontend/assets/js/main.js b/frontend/assets/js/main.js index 23f4a2a..e3c4189 100644 --- a/frontend/assets/js/main.js +++ b/frontend/assets/js/main.js @@ -4,6 +4,18 @@ const SERVER_HISTORY_URLS = Object.freeze({ "comunidad-hispana-01": "https://scoreboard.comunidadhll.es/games", "comunidad-hispana-02": "https://scoreboard.comunidadhll.es:5443/games", }); +const COMMUNITY_CLANS = Object.freeze([ + { + name: "Comunidad Hispana HLL Vietnam", + badge: "Comunidad anfitriona", + description: + "Punto principal de reunion para escuadras, anuncios y acceso directo al Discord del proyecto.", + logoSrc: "./assets/img/logo.png", + logoAlt: "Logo de Comunidad Hispana HLL Vietnam", + discordUrl: "https://discord.com/invite/PedEqZ2Xsa", + discordLabel: "Abrir Discord", + }, +]); document.addEventListener("DOMContentLoaded", () => { console.info("HLL Vietnam frontend ready"); @@ -19,9 +31,11 @@ document.addEventListener("DOMContentLoaded", () => { const serversTitle = document.getElementById("servers-title"); const serversList = document.getElementById("servers-list"); const serversBadge = document.getElementById("servers-badge"); + const communityClansList = document.getElementById("community-clans-list"); updateBackendStatus(statusNode, "Backend comprobando", "status-chip--idle"); setServersDataState(serversBadge, { timestampLabel: "" }); + hydrateCommunityClans(communityClansList); let serverRefreshInFlight = false; const refreshServers = async () => { @@ -227,6 +241,45 @@ function renderServerAction(server) { `; } +function hydrateCommunityClans(listNode) { + if (!listNode) { + return; + } + + listNode.innerHTML = COMMUNITY_CLANS.map((clan) => renderCommunityClanCard(clan)).join(""); +} + +function renderCommunityClanCard(clan) { + return ` +
+
+ +
+

${escapeHtml(clan.badge)}

+

${escapeHtml(clan.name)}

+

${escapeHtml(clan.description)}

+
+
+ + ${escapeHtml(clan.discordLabel)} + +
+ `; +} + function renderQuickFacts(items) { return `
diff --git a/frontend/index.html b/frontend/index.html index 7710dcb..28c7e1d 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -164,6 +164,50 @@
+ +
+
+
+

Clanes y comunidades

+

Red de comunidad

+
+

+ Espacio para mantener visibles las comunidades y clanes con los que + compartimos actividad, eventos o coordinacion en Discord. +

+
+
+
+ +
+

Comunidad anfitriona

+

Comunidad Hispana HLL Vietnam

+

+ Punto principal de reunion para escuadras, anuncios y acceso + directo al Discord del proyecto. +

+
+
+ + Abrir Discord + +
+
+
+