From 2197fb364e79b184241658edc0c828f66e8dbdf6 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 3 Dec 2025 03:16:59 +0000 Subject: [PATCH] Add skill detail page with full skill text at each level - Create skill-detail.html that dynamically loads skill data from URL parameter - Display complete skill information including all level descriptions - Show trigger/effect for reactions, passive effects for passive skills - Display character and class sources for each skill - Update skills.html to make skill cards clickable links to detail page - Add hover effect with "Click to view full details" prompt --- docs/skill-detail.html | 782 +++++++++++++++++++++++++++++++++++++++++ docs/skills.html | 20 +- 2 files changed, 800 insertions(+), 2 deletions(-) create mode 100644 docs/skill-detail.html diff --git a/docs/skill-detail.html b/docs/skill-detail.html new file mode 100644 index 0000000..b89ad42 --- /dev/null +++ b/docs/skill-detail.html @@ -0,0 +1,782 @@ + + + + + + Skill Detail - Core Space First Born + + + + +
+

Core Space First Born

+

Skill Detail

+
+ +
+ Home › Skills Reference › Skill +
+ +
+

Loading skill data...

+
+ + + + + + diff --git a/docs/skills.html b/docs/skills.html index 218862d..17563fe 100644 --- a/docs/skills.html +++ b/docs/skills.html @@ -22,6 +22,9 @@ display: flex; gap: 12px; align-items: flex-start; + cursor: pointer; + text-decoration: none; + color: inherit; } .skill-card:hover { @@ -30,6 +33,18 @@ box-shadow: 0 5px 15px rgba(83, 168, 182, 0.3); } + .skill-card .view-detail { + font-size: 0.75em; + color: #53a8b6; + margin-top: 8px; + opacity: 0; + transition: opacity 0.3s; + } + + .skill-card:hover .view-detail { + opacity: 1; + } + .skill-icon { width: 48px; height: 48px; @@ -402,7 +417,7 @@

Error loading skills data

const typeLabel = getSkillTypeLabel(skill); const sourcesHTML = getSourcesHTML(skill.id); - html += `
`; + html += ``; html += `
`; html += ` ${skill.name}`; html += `
`; @@ -410,8 +425,9 @@

Error loading skills data

html += `
${skill.name}${typeLabel}
`; html += `
${summary}
`; html += sourcesHTML; + html += `
Click to view full details →
`; html += `
`; - html += ``; + html += ``; }); html += '';