pick gemini
· 1 year ago
30d55e258ba929c229d4b9590e176935861d9b98
Parent:
e7a30bbbb
2 files changed +0 −668
- art-of-war-sun-tzu-claude.html +0 −668
- art-of-war-sun-tzu-gemini.html => art-of-war-sun-tzu.html +0 −0
Diff
--- a/art-of-war-sun-tzu-claude.html +++ /dev/null @@ -1,668 +0,0 @@ -<!DOCTYPE html> -<!-- saved from url=(0057)file:///C:/Users/veksl/Downloads/bamboo_reader%20(2).html --> -<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Bamboo Slip Reader - Dual Mode</title> - <style> - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - - body { - background: - radial-gradient(circle at 20% 50%, rgba(76, 44, 26, 0.3) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(139, 90, 43, 0.2) 0%, transparent 50%), - radial-gradient(circle at 40% 80%, rgba(61, 37, 26, 0.3) 0%, transparent 50%), - linear-gradient(135deg, #2c1810 0%, #4a2c1a 50%, #3d251a 100%); - font-family: 'Georgia', serif; - overflow: hidden; - height: 100vh; - padding: 20px; - } - - .reader-container { - display: flex; - height: calc(100vh - 40px); - perspective: 1200px; - justify-content: center; - align-items: flex-start; - transition: all 1.2s cubic-bezier(0.4, 0.0, 0.2, 1); - transform-style: preserve-3d; - overflow: hidden; - } - - .reader-container.transitioning { - transform: rotateY(90deg); - } - - /* Vertical Mode (Chinese) */ - .vertical-mode .bamboo-strip { - width: 80px; - height: 600px; - margin: 0 1px; - flex-direction: column; - } - - .vertical-mode .strip-content { - writing-mode: vertical-rl; - text-orientation: upright; - font-size: 12px; - line-height: 1.4; - padding: 40px 8px; - letter-spacing: 2px; - width: 100%; - height: 100%; - } - - .vertical-mode .title-strip { - width: 100px; - } - - .vertical-mode .title-strip .strip-content { - font-size: 16px; - font-weight: bold; - } - - /* Horizontal Mode (English) */ - .horizontal-mode { - flex-direction: column; - gap: 4px; - overflow-y: auto; - overflow-x: hidden; - padding: 20px; - } - - .horizontal-mode .bamboo-strip { - width: min(95vw, 1200px); - height: auto; - min-height: 50px; - margin: 2px 0; - flex-shrink: 0; - } - - .horizontal-mode .strip-content { - writing-mode: horizontal-tb; - text-orientation: mixed; - font-size: 15px; - line-height: 1.5; - padding: 12px 20px; - letter-spacing: 0.3px; - width: 100%; - height: auto; - display: block; - text-align: left; - word-wrap: break-word; - hyphens: auto; - } - - .horizontal-mode .title-strip { - width: min(95vw, 1200px); - height: auto; - min-height: 70px; - } - - .horizontal-mode .title-strip .strip-content { - font-size: 20px; - font-weight: bold; - text-align: center; - padding: 15px 20px; - } - - /* Base Bamboo Strip Styles */ - .bamboo-strip { - background: - linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%), - linear-gradient(45deg, - #d4a574 0%, #c19653 25%, #d4a574 50%, #b8954d 75%, #d4a574 100%); - position: relative; - transform-style: preserve-3d; - transition: all 0.4s ease; - cursor: pointer; - border-radius: 4px; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.2), - inset 0 0 20px rgba(0,0,0,0.1), - 0 4px 12px rgba(0,0,0,0.3), - 0 1px 3px rgba(0,0,0,0.2); - } - - .bamboo-strip::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: repeating-linear-gradient(90deg, - transparent 0px, - rgba(139, 85, 47, 0.1) 1px, - transparent 2px, - transparent 12px - ); - border-radius: 3px; - } - - .horizontal-mode .bamboo-strip::before { - background: repeating-linear-gradient(0deg, - transparent 0px, - rgba(139, 85, 47, 0.06) 1px, - transparent 2px, - transparent 20px - ); - } - - .bamboo-strip::after { - content: ''; - position: absolute; - background: linear-gradient( - rgba(101, 67, 33, 0.15) 20%, - rgba(101, 67, 33, 0.08) 50%, - rgba(101, 67, 33, 0.15) 80% - ); - } - - .vertical-mode .bamboo-strip::after { - top: 10%; - left: 50%; - transform: translateX(-50%); - width: 2px; - height: 80%; - } - - .horizontal-mode .bamboo-strip::after { - left: 15px; - top: 50%; - transform: translateY(-50%); - height: 2px; - width: calc(100% - 30px); - } - - .strip-content { - position: absolute; - top: 0; - left: 0; - color: #2c1810; - font-weight: 600; - text-align: center; - transition: all 0.4s ease; - } - - .bamboo-strip:hover { - transform: scale(1.03) translateZ(10px); - z-index: 5; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.3), - inset 0 0 25px rgba(0,0,0,0.15), - 0 8px 20px rgba(0,0,0,0.4), - 0 2px 6px rgba(0,0,0,0.3); - } - - .bamboo-strip.selected { - transform: scale(1.08) translateZ(20px); - z-index: 10; - background: - linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%), - linear-gradient(45deg, - #e6c080 0%, #d4a574 25%, #e6c080 50%, #c9a366 75%, #e6c080 100%); - box-shadow: - inset 0 2px 0 rgba(255,255,255,0.4), - inset 0 0 30px rgba(255,204,102,0.2), - 0 12px 25px rgba(0,0,0,0.5), - 0 4px 10px rgba(0,0,0,0.3); - } - - .bamboo-strip.selected .strip-content { - color: #1a0f08; - font-weight: bold; - } - - .title-strip { - background: - linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%), - linear-gradient(45deg, - #e6c080 0%, #d4a574 25%, #e6c080 50%, #c9a366 75%, #e6c080 100%); - box-shadow: - inset 0 2px 0 rgba(255,255,255,0.3), - inset 0 0 25px rgba(255,204,102,0.1), - 0 6px 15px rgba(0,0,0,0.4), - 0 2px 5px rgba(0,0,0,0.2); - } - - .title-strip .strip-content { - color: #8b2635; - } - - .binding-cord { - position: absolute; - background: linear-gradient(to bottom, - #8b5a2b 0%, - #654021 50%, - #8b5a2b 100% - ); - border-radius: 2px; - z-index: 10; - box-shadow: 1px 1px 3px rgba(0,0,0,0.4); - transition: all 1.2s ease; - } - - .vertical-mode .binding-cord { - width: 4px; - height: 600px; - } - - .horizontal-mode .binding-cord { - height: 4px; - width: 800px; - } - - .controls { - position: fixed; - bottom: 20px; - left: 50%; - transform: translateX(-50%); - display: flex; - gap: 15px; - z-index: 100; - } - - .control-btn { - padding: 10px 20px; - background: rgba(212, 165, 116, 0.9); - border: 2px solid #8b5a2b; - border-radius: 8px; - color: #2c1810; - font-weight: bold; - cursor: pointer; - transition: all 0.3s ease; - } - - .control-btn:hover { - background: rgba(230, 192, 128, 1); - transform: translateY(-2px); - } - - .control-btn.active { - background: rgba(139, 38, 53, 0.9); - color: #e6c080; - border-color: #8b2635; - } - - .chapter-indicator { - position: fixed; - top: 20px; - right: 20px; - background: rgba(212, 165, 116, 0.9); - padding: 10px 15px; - border-radius: 8px; - color: #2c1810; - font-weight: bold; - border: 2px solid #8b5a2b; - } - - .mode-toggle { - position: fixed; - top: 20px; - left: 20px; - background: rgba(212, 165, 116, 0.9); - padding: 12px 18px; - border-radius: 8px; - color: #2c1810; - font-weight: bold; - border: 3px solid #8b5a2b; - cursor: pointer; - transition: all 0.3s ease; - font-size: 14px; - z-index: 1000; - user-select: none; - } - - .mode-toggle:hover { - background: rgba(230, 192, 128, 1); - transform: translateY(-2px); - border-color: #654021; - } - - .mode-toggle:active { - transform: translateY(0px); - background: rgba(200, 150, 100, 1); - } - - .loading-indicator { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: rgba(212, 165, 116, 0.95); - padding: 20px 30px; - border-radius: 12px; - color: #2c1810; - font-weight: bold; - border: 3px solid #8b5a2b; - z-index: 2000; - box-shadow: 0 8px 25px rgba(0,0,0,0.4); - } - - .error-message { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: rgba(139, 38, 53, 0.95); - padding: 20px 30px; - border-radius: 12px; - color: #e6c080; - font-weight: bold; - border: 3px solid #8b2635; - z-index: 2000; - box-shadow: 0 8px 25px rgba(0,0,0,0.4); - } - - @keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - .bamboo-strip { - animation: fadeInUp 0.6s ease-out forwards; - } - - .bamboo-strip:nth-child(even) { - animation-delay: 0.1s; - } - - .bamboo-strip:nth-child(3n) { - animation-delay: 0.2s; - } - </style> -</head> -<body> - <div class="loading-indicator" id="loadingIndicator" style="display: none;">Loading Chinese version...</div> - - <div class="mode-toggle" onclick="toggleMode()" id="modeToggle" style="display: block;"> - ä¸æ–‡ ⟷ English - </div> - - <div class="reader-container horizontal-mode" id="readerContainer"><div class="bamboo-strip title-strip" style="transform: rotateX(-0.349693deg) rotateZ(0.303864deg);"><div class="strip-content">IV. Tactical Dispositions</div></div><div class="bamboo-strip" data-index="0" style="transform: rotateX(-0.0496933deg) rotateZ(0.303864deg);"><div class="strip-content">1. Sun Tzu said: The good fighters of old first put themselves beyond the possibility of defeat, and then waited for an opportunity of defeating the enemy.</div></div><div class="bamboo-strip" data-index="1" style="transform: rotateX(0.250307deg) rotateZ(0.303864deg);"><div class="strip-content">2. To secure ourselves against defeat lies in our own hands, but the opportunity of defeating the enemy is provided by the enemy himself.</div></div><div class="bamboo-strip" data-index="2" style="transform: rotateX(0.550307deg) rotateZ(0.303864deg);"><div class="strip-content">3. Thus the good fighter is able to secure himself against defeat, but cannot make certain of defeating the enemy.</div></div><div class="bamboo-strip" data-index="3" style="transform: rotateX(0.850307deg) rotateZ(0.303864deg);"><div class="strip-content">4. Hence the saying: One may know how to conquer without being able to do it.</div></div><div class="bamboo-strip" data-index="4" style="transform: rotateX(1.15031deg) rotateZ(0.303864deg);"><div class="strip-content">5. Security against defeat implies defensive tactics; ability to defeat the enemy means taking the offensive.</div></div><div class="bamboo-strip" data-index="5" style="transform: rotateX(1.45031deg) rotateZ(0.303864deg);"><div class="strip-content">6. Standing on the defensive indicates insufficient strength; attacking, a superabundance of strength.</div></div><div class="bamboo-strip" data-index="6" style="transform: rotateX(1.75031deg) rotateZ(0.303864deg);"><div class="strip-content">7. The general who is skilled in defense hides in the most secret recesses of the earth; he who is skilled in attack flashes forth from the topmost heights of heaven. Thus on the one hand we have ability to protect ourselves; on the other, a victory that is complete.</div></div><div class="bamboo-strip" data-index="7" style="transform: rotateX(2.05031deg) rotateZ(0.303864deg);"><div class="strip-content">8. To see victory only when it is within the ken of the common herd is not the acme of excellence.</div></div><div class="bamboo-strip" data-index="8" style="transform: rotateX(2.35031deg) rotateZ(0.303864deg);"><div class="strip-content">9. Neither is it the acme of excellence if you fight and conquer and the whole Empire says, "Well done!"</div></div><div class="bamboo-strip" data-index="9" style="transform: rotateX(2.65031deg) rotateZ(0.303864deg);"><div class="strip-content">10. To lift an autumn hair is no sign of great strength; to see the sun and moon is no sign of sharp sight; to hear the noise of thunder is no sign of a quick ear.</div></div><div class="bamboo-strip" data-index="10" style="transform: rotateX(2.95031deg) rotateZ(0.303864deg);"><div class="strip-content">11. What the ancients called a clever fighter is one who not only wins, but excels in winning with ease.</div></div><div class="bamboo-strip" data-index="11" style="transform: rotateX(3.25031deg) rotateZ(0.303864deg);"><div class="strip-content">12. Hence his victories bring him neither reputation for wisdom nor credit for courage.</div></div><div class="bamboo-strip" data-index="12" style="transform: rotateX(3.55031deg) rotateZ(0.303864deg);"><div class="strip-content">13. He wins his battles by making no mistakes. Making no mistakes is what establishes the certainty of victory, for it means conquering an enemy that is already defeated.</div></div><div class="bamboo-strip" data-index="13" style="transform: rotateX(3.85031deg) rotateZ(0.303864deg);"><div class="strip-content">14. Hence the skillful fighter puts himself into a position which makes defeat impossible, and does not miss the moment for defeating the enemy.</div></div><div class="bamboo-strip" data-index="14" style="transform: rotateX(4.15031deg) rotateZ(0.303864deg);"><div class="strip-content">15. Thus it is that in war the victorious strategist only seeks battle after the victory has been won, whereas he who is destined to defeat first fights and afterwards looks for victory.</div></div><div class="bamboo-strip" data-index="15" style="transform: rotateX(4.45031deg) rotateZ(0.303864deg);"><div class="strip-content">16. The consummate leader cultivates the moral law, and strictly adheres to method and discipline; thus it is in his power to control success.</div></div><div class="bamboo-strip" data-index="16" style="transform: rotateX(4.75031deg) rotateZ(0.303864deg);"><div class="strip-content">17. In respect of military method, we have, firstly, Measurement; secondly, Estimation of quantity; thirdly, Calculation; fourthly, Balancing of chances; fifthly, Victory.</div></div><div class="bamboo-strip" data-index="17" style="transform: rotateX(5.05031deg) rotateZ(0.303864deg);"><div class="strip-content">18. Measurement owes its existence to Earth; Estimation of quantity to Measurement; Calculation to Estimation of quantity; Balancing of chances to Calculation; and Victory to Balancing of chances.</div></div><div class="bamboo-strip" data-index="18" style="transform: rotateX(5.35031deg) rotateZ(0.303864deg);"><div class="strip-content">19. A victorious army opposed to a routed one, is as a pound's weight placed in the scale against a single grain.</div></div><div class="bamboo-strip" data-index="19" style="transform: rotateX(5.65031deg) rotateZ(0.303864deg);"><div class="strip-content">20. The onrush of a conquering force is like the bursting of pent-up waters into a chasm a thousand fathoms deep.</div></div><div class="binding-cord" style="top: 100px; left: 50px;"></div><div class="binding-cord" style="top: 250px; left: 50px;"></div><div class="binding-cord" style="top: 400px; left: 50px;"></div><div class="binding-cord" style="top: 550px; left: 50px;"></div><div class="binding-cord" style="top: 700px; left: 50px;"></div><div class="binding-cord" style="top: 850px; left: 50px;"></div><div class="binding-cord" style="top: 1000px; left: 50px;"></div></div> - - <div class="controls"> - <button class="control-btn" onclick="previousChapter()">â—€ Previous</button> - <button class="control-btn" onclick="resetView()">Reset View</button> - <button class="control-btn" onclick="nextChapter()">Next â–¶</button> - </div> - - <div class="chapter-indicator" id="chapterIndicator">Chapter 4: IV. Tactical Dispositions</div> - - <script> - let chapters = { - chinese: [], - english: [] - }; - let currentChapter = 0; - let selectedStrip = -1; - let isChineseMode = true; - let isTransitioning = false; - let isLoaded = false; - - // Fetch book content from JSON URLs - async function loadBookContent() { - const loadingEl = document.getElementById('loadingIndicator'); - const modeToggle = document.getElementById('modeToggle'); - - try { - loadingEl.textContent = 'Loading English version...'; - const englishResponse = await fetch('https://cheatsheets.davidveksler.com/art-of-war-sun-tzu-english.json'); - if (!englishResponse.ok) throw new Error('Failed to load English content'); - const englishData = await englishResponse.json(); - - loadingEl.textContent = 'Loading Chinese version...'; - const chineseResponse = await fetch('https://cheatsheets.davidveksler.com/art-of-war-sun-tzu-chinese.json'); - if (!chineseResponse.ok) throw new Error('Failed to load Chinese content'); - const chineseData = await chineseResponse.json(); - - // Process and structure the data - chapters.english = processBookData(englishData); - chapters.chinese = processBookData(chineseData); - - loadingEl.style.display = 'none'; - modeToggle.style.display = 'block'; - isLoaded = true; - - createBambooStrips(); - } catch (error) { - console.error('Error loading book content:', error); - loadingEl.innerHTML = ` - <div class="error-message"> - Failed to load The Art of War content.<br> - Please check your internet connection and try again. - </div> - `; - } - } - - // Process JSON data into chapter format - function processBookData(data) { - // Handle the specific structure from your JSON files - if (data.chapters && Array.isArray(data.chapters)) { - return data.chapters.map(chapter => ({ - title: chapter.title || `Chapter ${chapter.roman_numeral || ''}`, - content: chapter.paragraphs || [] - })); - } - - // Fallback for other structures - if (Array.isArray(data)) { - return data.map((chapter, index) => ({ - title: chapter.title || chapter.name || `Chapter ${index + 1}`, - content: chapter.paragraphs || chapter.content || - (chapter.text || chapter.verses || [chapter.content]).filter(Boolean) - })); - } - - // Handle nested content - if (data.content) { - return processBookData(data.content); - } - - // Fallback structure - return Object.keys(data).map(key => ({ - title: key, - content: Array.isArray(data[key]) ? data[key] : [data[key]] - })); - } - - function getCurrentChapters() { - return isChineseMode ? chapters.chinese : chapters.english; - } - - function createBambooStrips() { - if (!isLoaded) return; - - const container = document.getElementById('readerContainer'); - container.innerHTML = ''; - - const currentChapters = getCurrentChapters(); - if (!currentChapters || currentChapters.length === 0) return; - - const chapter = currentChapters[currentChapter]; - if (!chapter) return; - - // Create title strip - const titleStrip = document.createElement('div'); - titleStrip.className = 'bamboo-strip title-strip'; - titleStrip.innerHTML = `<div class="strip-content">${chapter.title}</div>`; - container.appendChild(titleStrip); - - // Create content strips - if (chapter.content && Array.isArray(chapter.content)) { - chapter.content.forEach((text, index) => { - if (text && text.trim()) { // Only create strips for non-empty content - const strip = document.createElement('div'); - strip.className = 'bamboo-strip'; - strip.setAttribute('data-index', index); - strip.innerHTML = `<div class="strip-content">${text}</div>`; - - strip.addEventListener('click', () => selectStrip(index)); - container.appendChild(strip); - } - }); - } - - // Add binding cords - const contentLength = chapter.content ? chapter.content.filter(text => text && text.trim()).length : 0; - if (isChineseMode) { - // Vertical binding cords - for (let i = 0; i < Math.ceil(contentLength / 4); i++) { - const cord = document.createElement('div'); - cord.className = 'binding-cord'; - cord.style.left = `${120 + i * 320}px`; - cord.style.top = '50px'; - container.appendChild(cord); - } - } else { - // Horizontal binding cords - for (let i = 0; i < Math.ceil(contentLength / 3); i++) { - const cord = document.createElement('div'); - cord.className = 'binding-cord'; - cord.style.top = `${100 + i * 150}px`; - cord.style.left = '50px'; - container.appendChild(cord); - } - } - - document.getElementById('chapterIndicator').textContent = - `Chapter ${currentChapter + 1}: ${chapter.title}`; - } - - function toggleMode() { - if (isTransitioning || !isLoaded) return; - - isTransitioning = true; - const container = document.getElementById('readerContainer'); - - // Start rotation - container.classList.add('transitioning'); - - setTimeout(() => { - // Switch mode at halfway point - isChineseMode = !isChineseMode; - container.className = `reader-container ${isChineseMode ? 'vertical-mode' : 'horizontal-mode'}`; - selectedStrip = -1; - createBambooStrips(); - }, 600); - - setTimeout(() => { - // Complete rotation - container.classList.remove('transitioning'); - isTransitioning = false; - }, 1200); - } - - function selectStrip(index) { - if (!isLoaded) return; - - document.querySelectorAll('.bamboo-strip').forEach(strip => { - strip.classList.remove('selected'); - }); - - if (selectedStrip === index) { - selectedStrip = -1; - return; - } - - selectedStrip = index; - const strip = document.querySelector(`[data-index="${index}"]`); - if (strip) { - strip.classList.add('selected'); - } - } - - function nextChapter() { - if (!isLoaded) return; - - const currentChapters = getCurrentChapters(); - if (currentChapter < currentChapters.length - 1) { - currentChapter++; - selectedStrip = -1; - createBambooStrips(); - } - } - - function previousChapter() { - if (!isLoaded) return; - - if (currentChapter > 0) { - currentChapter--; - selectedStrip = -1; - createBambooStrips(); - } - } - - function resetView() { - if (!isLoaded) return; - - selectedStrip = -1; - document.querySelectorAll('.bamboo-strip').forEach(strip => { - strip.classList.remove('selected'); - }); - } - - // Keyboard navigation - document.addEventListener('keydown', (e) => { - if (isTransitioning || !isLoaded) return; - - switch(e.key) { - case 'ArrowLeft': - previousChapter(); - break; - case 'ArrowRight': - nextChapter(); - break; - case 'Escape': - resetView(); - break; - case ' ': - e.preventDefault(); - toggleMode(); - break; - } - }); - - // Initialize - Load content from JSON URLs - loadBookContent(); - - // Add explicit event listener as backup - document.getElementById('modeToggle').addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - toggleMode(); - }); - - // Subtle parallax effect - document.addEventListener('mousemove', (e) => { - if (isTransitioning || !isLoaded) return; - - const strips = document.querySelectorAll('.bamboo-strip:not(.selected)'); - const mouseX = (e.clientX / window.innerWidth - 0.5) * 2; - const mouseY = (e.clientY / window.innerHeight - 0.5) * 2; - - strips.forEach((strip, index) => { - const offset = index * 0.3; - if (isChineseMode) { - strip.style.transform = `rotateY(${mouseX * 1 + offset}deg) rotateX(${mouseY * 0.5}deg)`; - } else { - strip.style.transform = `rotateX(${mouseY * 1 + offset}deg) rotateZ(${mouseX * 0.5}deg)`; - } - }); - }); - </script> - -</body></html> \ No newline at end of file