Expand data-driven character pages for full crew

docs/README.md

@@ -17,6 +17,15 @@ Core Space Quick Reference
 └── tables.html            - Quick reference tables
 ```
 
+### 🔧 Character Page Generation
+
+- `data/corespace-data.json` – Shared character/class/skill dataset
+- `templates/character-page.html` – HTML scaffold used for every respec page
+- `docs/js/character-page.js` – Client-side renderer that builds the page from data
+- `generate_character_pages.py` – Script that emits `docs/character-<id>.html` for each character in the dataset
+
+Run `./generate_character_pages.py` after updating the JSON data to regenerate all character pages automatically.
+
 ## 🎯 Design Philosophy
 
 **Hub & Spoke Architecture:**

docs/character-page.css

@@ -0,0 +1,256 @@
+/* Shared styles for data-driven character respec pages */
+.character-page .character-header {
+    background: linear-gradient(135deg, rgba(83, 168, 182, 0.2), rgba(233, 69, 96, 0.15));
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+.character-page .character-header h2 {
+    margin: 0 0 10px 0;
+    color: #e94560;
+}
+
+.character-page .character-description {
+    color: #ccc;
+    margin-bottom: 15px;
+}
+
+.character-page .base-stats {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    font-size: 1.05em;
+}
+
+.character-page .stat {
+    background: rgba(83, 168, 182, 0.2);
+    padding: 8px 12px;
+    border-radius: 5px;
+}
+
+.character-page .inherent-skills {
+    margin-top: 15px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.skill-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(83, 168, 182, 0.15);
+    border: 1px solid rgba(83, 168, 182, 0.4);
+    color: #53a8b6;
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 0.85em;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+}
+
+.skill-badge .badge-label {
+    font-weight: 600;
+}
+
+.skill-badge.inherent {
+    background: rgba(46, 204, 113, 0.15);
+    border-color: rgba(46, 204, 113, 0.5);
+    color: #2ecc71;
+}
+
+.skill-badge.class-source {
+    background: rgba(155, 89, 182, 0.15);
+    border-color: rgba(155, 89, 182, 0.4);
+    color: #9b59b6;
+}
+
+.skill-badge.max-level {
+    background: rgba(243, 156, 18, 0.15);
+    border-color: rgba(243, 156, 18, 0.4);
+    color: #f39c12;
+}
+
+.character-page .skill-controls {
+    background: rgba(83, 168, 182, 0.1);
+    padding: 12px;
+    border-radius: 6px;
+    margin-bottom: 15px;
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.class-selector {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 220px;
+}
+
+.class-selector label {
+    font-weight: 600;
+    color: #53a8b6;
+    font-size: 0.9em;
+}
+
+.class-selector select {
+    padding: 6px 10px;
+    border-radius: 6px;
+    border: 2px solid #53a8b6;
+    background: rgba(0, 0, 0, 0.2);
+    color: #eee;
+    font-size: 0.95em;
+    cursor: pointer;
+    min-height: 36px;
+}
+
+.class-selector select option {
+    background: #1a1a2e;
+    color: #eee;
+}
+
+.skill-controls .info-box {
+    flex: 1 1 260px;
+    margin: 0;
+}
+
+.reset-btn {
+    background: rgba(231, 76, 60, 0.3);
+    border: 2px solid #e74c3c;
+    color: #e74c3c;
+    padding: 6px 14px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 0.85em;
+    transition: all 0.25s ease;
+}
+
+.reset-btn:hover {
+    background: rgba(231, 76, 60, 0.5);
+}
+
+.skill-select {
+    background: rgba(255, 255, 255, 0.08);
+    border: 2px solid #53a8b6;
+    color: #eee;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 0.9em;
+    cursor: pointer;
+    margin-bottom: 8px;
+}
+
+.skill-select option {
+    background: #1a1a2e;
+    color: #eee;
+}
+
+.action-card.not-learned {
+    opacity: 0.35;
+    filter: grayscale(0.8);
+}
+
+.action-card.not-learned .action-card-title {
+    text-decoration: line-through;
+}
+
+.skill-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 10px;
+}
+
+.skill-meta .skill-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.skill-meta .skill-note {
+    font-size: 0.8em;
+    color: #bbb;
+}
+
+.skill-level {
+    padding: 8px 12px;
+    margin: 5px 0;
+    border-radius: 4px;
+    border-left: 4px solid;
+}
+
+.skill-level[data-level="1"] {
+    border-left-color: #2ecc71;
+    background: rgba(46, 204, 113, 0.1);
+}
+
+.skill-level[data-level="2"] {
+    border-left-color: #f39c12;
+    background: rgba(243, 156, 18, 0.1);
+}
+
+.skill-level[data-level="3"] {
+    border-left-color: #e74c3c;
+    background: rgba(231, 76, 60, 0.1);
+}
+
+.skill-level[data-level="passive"] {
+    border-left-color: #9b59b6;
+    background: rgba(155, 89, 182, 0.12);
+}
+
+.skill-level.hidden {
+    display: none;
+}
+
+.level-label {
+    font-weight: 700;
+    margin-right: 8px;
+}
+
+.level-label[data-level="1"] { color: #2ecc71; }
+.level-label[data-level="2"] { color: #f39c12; }
+.level-label[data-level="3"] { color: #e74c3c; }
+.level-label[data-level="passive"] { color: #9b59b6; }
+
+.skill-trigger {
+    font-size: 0.85em;
+    font-style: italic;
+    margin-bottom: 4px;
+    color: #f1c40f;
+}
+
+.empty-state {
+    color: #888;
+    font-style: italic;
+}
+
+#error-panel {
+    display: none;
+    margin: 20px 0;
+    background: rgba(231, 76, 60, 0.15);
+    border: 2px solid rgba(231, 76, 60, 0.45);
+    border-radius: 6px;
+    padding: 15px;
+    color: #e74c3c;
+}
+
+@media print {
+    .breadcrumb,
+    .back-btn,
+    .skill-controls,
+    .skill-select,
+    .reset-btn,
+    #class-summary,
+    #class-description,
+    #class-select {
+        display: none !important;
+    }
+
+    .action-card.not-learned {
+        display: none;
+    }
+}