From f167aebf08c3e132e12e683e96ea5feae94141cc Mon Sep 17 00:00:00 2001 From: Amamiya Miu Date: Wed, 22 Oct 2025 13:19:12 +0800 Subject: [PATCH] Showcase labs and demos with grouped deck cards --- assets/css/styles.css | 133 ++++++++++++++++- assets/js/main.js | 324 ++++++++++++++++++++++++++++++++++++++---- index.html | 2 +- 3 files changed, 425 insertions(+), 34 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 1b5f2d3..8d05db5 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -770,14 +770,139 @@ h3 { letter-spacing: 0.04em; } -.deck__footer { - margin-top: 1.6rem; +.deck { display: flex; + flex-direction: column; + gap: 1.1rem; +} + +.deck__header { + display: flex; + flex-wrap: wrap; + align-items: flex-start; justify-content: space-between; - align-items: center; gap: 0.75rem; +} + +.deck__title { + margin: 0; +} + +.deck__title a { + text-decoration: none; +} + +.deck__title a:hover, +.deck__title a:focus { + text-decoration: underline; +} + +.deck__status { + padding: 0.25rem 0.75rem; + border-radius: 999px; + background: rgba(140, 123, 255, 0.2); + color: var(--color-highlight); + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.04em; + white-space: nowrap; +} + +.deck__summary { + margin: 0; + color: var(--color-text-secondary); + font-size: 0.95rem; + line-height: 1.6; +} + +.deck__meta { + margin-top: 0.95rem; +} + +.deck__actions { + margin-top: 1rem; + display: flex; + flex-wrap: wrap; + gap: 0.75rem; +} + +.deck__link { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.45rem 0.95rem; + border-radius: 999px; + border: 1px solid rgba(140, 123, 255, 0.28); + background: rgba(69, 209, 255, 0.12); + color: var(--color-text); + font-weight: 600; font-size: 0.85rem; - color: var(--color-muted); + letter-spacing: 0.02em; + transition: border-color var(--transition), background var(--transition), transform var(--transition); +} + +.deck__link:hover, +.deck__link:focus { + text-decoration: none; + border-color: var(--color-highlight); + background: rgba(69, 209, 255, 0.18); + transform: translateY(-1px); +} + +.deck__link span:last-child { + font-size: 0.8rem; +} + +.deck-grid--compact .deck { + padding: 1.45rem; +} + +.deck--compact { + gap: 0.95rem; +} + +.deck--compact .deck__summary { + font-size: 0.9rem; +} + +.deck--compact .deck__meta { + margin-top: 0.75rem; +} + +.deck--compact .deck__actions { + margin-top: 0.85rem; +} + +.deck-clusters { + display: grid; + gap: clamp(2rem, 4vw, 3.5rem); +} + +.deck-cluster { + display: grid; + gap: clamp(1.4rem, 3vw, 2.2rem); +} + +.deck-cluster__header { + display: grid; + gap: 0.35rem; +} + +.deck-cluster__eyebrow { + font-size: 0.8rem; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--color-highlight); +} + +.deck-cluster__title { + font-size: clamp(1.4rem, 2.2vw, 1.8rem); +} + +.deck-cluster__description { + color: var(--color-text-secondary); + font-size: 0.95rem; + max-width: 62ch; } .inline-link { diff --git a/assets/js/main.js b/assets/js/main.js index 604fc24..207d762 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -61,17 +61,21 @@ const missionTracks = [ const labDecks = [ { id: 'atlas-console', + type: 'lab', + external: true, url: 'https://atlas.earthonline.systems', translations: { en: { title: 'Atlas Console', summary: 'A navigation layer for research, assets, and governance rituals with multiplayer spatial UI.', - tags: ['Spatial UI', 'Knowledge graph'] + tags: ['Spatial UI', 'Knowledge graph'], + cta: 'Visit console' }, zh: { title: 'Atlas 控制台', summary: '将研究、资产与治理仪式串联的导航层，配备多人空间界面。', - tags: ['空间界面', '知识图谱'] + tags: ['空间界面', '知识图谱'], + cta: '访问控制台' } }, status: { @@ -81,17 +85,21 @@ const labDecks = [ }, { id: 'helium-simulator', + type: 'lab', + external: true, url: 'https://helium.earthonline.systems', translations: { en: { title: 'Helium Simulator', summary: 'A WebGL engine orchestrating planetary telemetry and AI copilots for operations teams.', - tags: ['WebGL', 'AI copilot'] + tags: ['WebGL', 'AI copilot'], + cta: 'Launch simulator' }, zh: { title: 'Helium 模拟器', summary: '驱动行星遥测与 AI 协同体的 WebGL 引擎，服务操作团队。', - tags: ['WebGL', 'AI 协作'] + tags: ['WebGL', 'AI 协作'], + cta: '启动模拟器' } }, status: { @@ -101,17 +109,21 @@ const labDecks = [ }, { id: 'council-studio', + type: 'lab', + external: true, url: 'https://council.earthonline.systems', translations: { en: { title: 'Council Studio', summary: 'An AI-native governance studio that scripts rituals, scorecards, and shared decision records.', - tags: ['Governance', 'Narrative tools'] + tags: ['Governance', 'Narrative tools'], + cta: 'Enter studio' }, zh: { title: 'Council Studio', summary: '面向 AI 的治理工作室，编排仪式、记分卡与共享决策记录。', - tags: ['治理体系', '叙事工具'] + tags: ['治理体系', '叙事工具'], + cta: '进入工作室' } }, status: { @@ -121,6 +133,142 @@ const labDecks = [ } ]; +const demoDecks = [ + { + id: 'branch-prediction-lab', + type: 'demo', + external: true, + url: 'public/demo/branch-prediction/index.html', + translations: { + en: { + title: 'Branch Prediction Lab', + summary: 'Experiment with branch predictor strategies using live traces, rolling accuracy, and pipeline flush costs.', + tags: ['Microarchitecture', 'Visualization'], + cta: 'Launch demo' + }, + zh: { + title: '分支预测策略实验室', + summary: '通过交互式轨迹与统计面板体验分支预测策略，观察命中率与流水线冲刷成本。', + tags: ['微架构', '可视化'], + cta: '启动演示' + } + }, + status: { + en: 'Playable in browser', + zh: '浏览器演示' + } + }, + { + id: 'compute-god-validator', + type: 'demo', + external: true, + url: 'public/demo/compute-god-standard-model-validator/index.html', + translations: { + en: { + title: 'Compute-God Validator', + summary: 'Load the Standard Model registry in-browser and generate traceable validation reports across symmetries and constraints.', + tags: ['Physics', 'Field tools'], + cta: 'Run validator' + }, + zh: { + title: 'Compute-God 标准模型验证控制台', + summary: '在浏览器中载入标准模型登记表，对对称性与实验约束生成可追踪的验证报告。', + tags: ['物理', '场景工具'], + cta: '启动验证器' + } + }, + status: { + en: 'Interactive console', + zh: '交互式控制台' + } + }, + { + id: 'agi-asi-reaction', + type: 'demo', + external: true, + url: 'public/demo/agi-asi-reaction-chamber/index.html', + translations: { + en: { + title: 'AGI / ASI Reaction Chamber', + summary: 'Balance innovation and alignment by tuning feedback loops inside an evolving intelligence chamber visualization.', + tags: ['Systems dynamics', 'AI governance'], + cta: 'Enter chamber' + }, + zh: { + title: 'AGI / ASI 反应室', + summary: '调节反馈与监督参数，观察智能反应室在创新与对齐之间的动态。', + tags: ['系统动力学', 'AI 治理'], + cta: '进入反应室' + } + }, + status: { + en: 'Interactive field study', + zh: '交互式场域' + } + }, + { + id: 'ambient-sketch', + type: 'demo', + external: true, + url: 'public/demo/ambient-sketch/index.html', + translations: { + en: { + title: 'Ambient Music Sketch', + summary: 'Compose a gentle ambient loop with Web Audio controls for tempo, chords, and melodic phrasing.', + tags: ['Sound', 'Web Audio'], + cta: 'Play composition' + }, + zh: { + title: '环境乐随想', + summary: '使用 Web Audio 控制速度与和弦，生成一段为数字花园写下的环境乐循环。', + tags: ['声音', 'Web Audio'], + cta: '播放乐段' + } + }, + status: { + en: 'Audio playground', + zh: '音频体验' + } + } +]; + +const deckClusters = [ + { + id: 'production-labs', + variant: 'default', + decks: labDecks, + translations: { + en: { + eyebrow: 'Production fleet', + title: 'Operational lab consoles', + description: 'Interfaces shipping with live telemetry, active partners, and governance rituals.' + }, + zh: { + eyebrow: '生产舰队', + title: '运行中的实验室控制台', + description: '这些界面携带遥测、伙伴协作与治理仪式，持续在生产环境迭代。' + } + } + }, + { + id: 'demo-garden', + variant: 'compact', + decks: demoDecks, + translations: { + en: { + eyebrow: 'Demo garden', + title: 'Interactive research experiments', + description: 'Hand-picked prototypes exploring microarchitecture, physics field tools, and narrative soundscapes.' + }, + zh: { + eyebrow: '演示花园', + title: '交互式研究实验', + description: '精选展示微架构、物理工具与叙事声景的交互原型。' + } + } + } +]; + const signalLog = [ { id: 'research-2025', @@ -367,8 +515,9 @@ function renderHeroStats(lang) { const heroStatsElement = document.getElementById('hero-stats'); if (!heroStatsElement) return; const allianceCount = getFriendContent(lang).featuredAlliances.length; + const deckCount = deckClusters.reduce((total, cluster) => total + cluster.decks.length, 0); const context = { - decks: labDecks.length, + decks: deckCount, research: researchEntries.length, signals: signalLog.length, alliances: allianceCount @@ -431,42 +580,159 @@ function renderMission(lang) { }); } -function renderDecks(lang) { - const grid = document.getElementById('lab-grid'); - if (!grid) return; - grid.innerHTML = ''; - labDecks.forEach((deck) => { - const copy = resolveTranslation(deck.translations, lang); - const deckCard = document.createElement('article'); - deckCard.className = 'deck'; +function getDeckDefaultLabel(type, lang) { + const defaults = { + lab: { en: 'Visit lab', zh: '访问实验室' }, + demo: { en: 'Launch demo', zh: '启动 Demo' } + }; + const mapping = defaults[type] || defaults.lab; + return mapping?.[lang] || mapping?.[LANGUAGE_FALLBACK] || (lang === 'zh' ? '打开链接' : 'Open link'); +} - const title = document.createElement('h3'); - title.className = 'deck__title'; - const link = document.createElement('a'); - link.href = deck.url; - link.target = '_blank'; - link.rel = 'noopener'; - link.textContent = copy.title; - title.appendChild(link); +function createDeckCard(deck, lang, options = {}) { + const copy = resolveTranslation(deck.translations, lang); + const fallbackCopy = resolveTranslation(deck.translations, LANGUAGE_FALLBACK); + const card = document.createElement('article'); + card.className = 'deck'; + if (options.variant === 'compact') { + card.classList.add('deck--compact'); + } + + const header = document.createElement('div'); + header.className = 'deck__header'; + + const title = document.createElement('h3'); + title.className = 'deck__title'; + const titleLink = document.createElement('a'); + titleLink.href = deck.url; + if (deck.external !== false) { + titleLink.target = '_blank'; + titleLink.rel = 'noopener'; + } + titleLink.textContent = copy.title; + title.appendChild(titleLink); + header.appendChild(title); + + const statusText = deck.status?.[lang] || deck.status?.[LANGUAGE_FALLBACK]; + if (statusText) { + const status = document.createElement('span'); + status.className = 'deck__status'; + status.textContent = statusText; + header.appendChild(status); + } + card.appendChild(header); + + if (copy.summary) { const summary = document.createElement('p'); + summary.className = 'deck__summary'; summary.textContent = copy.summary; + card.appendChild(summary); + } + const tags = copy.tags?.length ? copy.tags : fallbackCopy?.tags; + if (tags?.length) { const meta = document.createElement('div'); meta.className = 'deck__meta'; - copy.tags?.forEach((tag) => { + tags.forEach((tag) => { const badge = document.createElement('span'); badge.className = 'tag'; badge.textContent = tag; meta.appendChild(badge); }); + card.appendChild(meta); + } + + const actions = []; + const defaultLabel = copy.cta || fallbackCopy?.cta || getDeckDefaultLabel(deck.type, lang); + if (deck.url) { + actions.push({ url: deck.url, label: defaultLabel, external: deck.external }); + } - const footer = document.createElement('div'); - footer.className = 'deck__footer'; - footer.innerHTML = `${deck.status?.[lang] || deck.status?.[LANGUAGE_FALLBACK] || ''}`; + if (Array.isArray(deck.links)) { + deck.links.forEach((link) => { + if (!link?.url) return; + const label = + link.translations?.[lang] || + link.translations?.[LANGUAGE_FALLBACK] || + link.label || + (lang === 'zh' ? '了解更多' : 'Learn more'); + actions.push({ url: link.url, label, external: link.external ?? deck.external }); + }); + } + + if (actions.length) { + const actionGroup = document.createElement('div'); + actionGroup.className = 'deck__actions'; + actions.forEach((action) => { + const anchor = document.createElement('a'); + anchor.className = 'deck__link'; + anchor.href = action.url; + if (action.external !== false) { + anchor.target = '_blank'; + anchor.rel = 'noopener'; + } + anchor.innerHTML = `${action.label}`; + actionGroup.appendChild(anchor); + }); + card.appendChild(actionGroup); + } + + return card; +} + +function renderDecks(lang) { + const grid = document.getElementById('lab-grid'); + if (!grid) return; + grid.innerHTML = ''; + grid.classList.add('deck-clusters'); + + deckClusters.forEach((cluster) => { + const clusterCopy = resolveTranslation(cluster.translations, lang); + const section = document.createElement('section'); + section.className = 'deck-cluster'; + + const header = document.createElement('div'); + header.className = 'deck-cluster__header'; + + if (clusterCopy?.eyebrow) { + const eyebrow = document.createElement('p'); + eyebrow.className = 'deck-cluster__eyebrow'; + eyebrow.textContent = clusterCopy.eyebrow; + header.appendChild(eyebrow); + } + + if (clusterCopy?.title) { + const title = document.createElement('h3'); + title.className = 'deck-cluster__title'; + title.textContent = clusterCopy.title; + header.appendChild(title); + } + + if (clusterCopy?.description) { + const description = document.createElement('p'); + description.className = 'deck-cluster__description'; + description.textContent = clusterCopy.description; + header.appendChild(description); + } + + if (header.children.length) { + section.appendChild(header); + } + + const clusterGrid = document.createElement('div'); + clusterGrid.className = 'deck-grid'; + if (cluster.variant === 'compact') { + clusterGrid.classList.add('deck-grid--compact'); + } + + cluster.decks.forEach((deck) => { + const card = createDeckCard(deck, lang, { variant: cluster.variant }); + clusterGrid.appendChild(card); + }); - deckCard.append(title, summary, meta, footer); - grid.appendChild(deckCard); + section.appendChild(clusterGrid); + grid.appendChild(section); }); } diff --git a/index.html b/index.html index c4883a6..88d5f03 100644 --- a/index.html +++ b/index.html @@ -96,7 +96,7 @@

Active laboratories shipping in production

We maintain a rotating fleet of experiments. Each deck links interface research with real usage and telemetry.

-
+