|
|
| <!DOCTYPE html> |
| <html lang="zh"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>璇璣圖 | Xuanji Tu Poetry Explorer</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| <custom-navbar></custom-navbar> |
| |
| <div class="container"> |
| <header> |
| <h1>璇璣圖 Xuanji Tu</h1> |
| <h2 class="subtitle">Picture of the Turning Sphere</h2> |
| <p class="description">Explore Su Hui's 4th century masterpiece - a 29×29 character grid containing thousands of readable poems in multiple directions</p> |
| </header> |
|
|
| <div class="legend"> |
| <div class="legend-item"> |
| <div class="legend-color" style="background-color: #ffe8e0;"></div> |
| <strong style="color: var(--color-red);">Red</strong> |
| <p>Main paths</p> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background-color: #e0ecf5;"></div> |
| <strong style="color: var(--color-blue);">Blue</strong> |
| <p>Secondary paths</p> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background-color: #e0f0e8;"></div> |
| <strong style="color: var(--color-green);">Green</strong> |
| <p>Tertiary paths</p> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background-color: #f5ecd0;"></div> |
| <strong style="color: var(--color-yellow);">Yellow</strong> |
| <p>Structural</p> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background-color: #e8e8e8;"></div> |
| <strong style="color: var(--color-black);">Black</strong> |
| <p>Connectors</p> |
| </div> |
| </div> |
|
|
| <div class="main-content"> |
| <div class="grid-container"> |
| <div id="poem-grid"></div> |
| <div class="info-text"> |
| <strong>📖 How to Read:</strong> The poem can be read horizontally, vertically, diagonally, in spirals, and many other patterns. Each reading path reveals different 4, 6, or 8-line poems. Click characters to explore their meanings and build your own poem sequences. |
| </div> |
| </div> |
|
|
| <div class="sidebar"> |
| <div class="info-panel"> |
| <h3>Character Details</h3> |
| <div class="char-display"> |
| <div id="selected-char" class="char-large">心</div> |
| </div> |
| <div class="info-row"> |
| <div class="label">Pinyin</div> |
| <div class="value" id="pinyin">xīn</div> |
| </div> |
| <div class="info-row"> |
| <div class="label">Position</div> |
| <div class="value" id="position">Center</div> |
| </div> |
| <div class="info-row"> |
| <div class="label">Meaning</div> |
| <div class="value" id="meaning">Heart; Mind; Core essence</div> |
| </div> |
| <div class="controls"> |
| <button class="btn btn-secondary" id="toggle-chinese">繁體</button> |
| <button class="btn btn-secondary" id="toggle-center">Center Heart</button> |
| </div> |
| </div> |
|
|
| <div class="info-panel"> |
| <h3>Reading Methods</h3> |
| <div class="reading-methods"> |
| <div class="reading-badge">↔ Horizontal</div> |
| <div class="reading-badge">↕ Vertical</div> |
| <div class="reading-badge">↘ Diagonal (\\)</div> |
| <div class="reading-badge">↙ Diagonal (/)</div> |
| <div class="reading-badge">◯ Circular (CW)</div> |
| <div class="reading-badge">◯ Circular (CCW)</div> |
| <div class="reading-badge">◈ Spiral Out</div> |
| <div class="reading-badge">◈ Spiral In</div> |
| <div class="reading-badge">⬖ Layered</div> |
| <div class="reading-badge">✕ Complex Paths</div> |
| </div> |
| </div> |
|
|
| <div class="info-panel"> |
| <h3>Statistics</h3> |
| <div class="stats"> |
| <div class="stat"> |
| <div class="stat-number">841</div> |
| <div class="stat-label">Total Characters</div> |
| </div> |
| <div class="stat"> |
| <div class="stat-number">3000+</div> |
| <div class="stat-label">Readable Poems</div> |
| </div> |
| <div class="stat"> |
| <div class="stat-number">29×29</div> |
| <div class="stat-label">Grid Size</div> |
| </div> |
| <div class="stat"> |
| <div class="stat-number" id="char-count">0</div> |
| <div class="stat-label">Selected</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="poem-section"> |
| <h2>Build Your Poem</h2> |
| <p>Click characters in the grid to compose your own poem sequences.</p> |
| <div id="constructed-poem" class="empty-poem">Select characters to build your own poem</div> |
| <div style="display: flex; gap: 10px; margin-top: 15px;"> |
| <button class="btn btn-primary" id="clear-poem">Clear Poem</button> |
| <button class="btn btn-primary" id="analyze-poem">Analyze Composition</button> |
| <button class="btn btn-secondary" id="copy-poem">Copy to Clipboard</button> |
| </div> |
| </div> |
|
|
| <div class="info-panel" style="margin-top: 20px;"> |
| <h3>About Su Hui & Xuanji Tu</h3> |
| <p style="margin-bottom: 15px;"> |
| Su Hui (蘇蕙) was a brilliant 4th-century Chinese poet during the Sixteen Kingdoms period. According to legend, she created this extraordinary work to win back her husband Dou Tao after he took a concubine and was transferred to a remote desert post. When he received the poem and read it, he was so moved that he immediately abandoned his concubine and returned to Su Hui. |
| </p> |
| <p style="margin-bottom: 15px;"> |
| The <strong>Xuanji Tu</strong> (Picture of the Turning Sphere) is a 29×29 grid of 841 characters. Su Hui's original was embroidered or woven in five colors on silk. The genius of the work lies in its multi-directional readability: the same grid can be read horizontally, vertically, and diagonally in multiple directions, revealing thousands of distinct rhyming poems of various lengths. |
| </p> |
| <p> |
| The central character 心 (xīn, "heart/mind") is the emotional and structural center of the entire composition, representing the heart from which all poems emanate and to which all paths lead. |
| </p> |
| </div> |
| </div> |
| <custom-footer></custom-footer> |
|
|
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
