add og image
· 1 year ago
07e75fa74180073a92cb06f0c92943fafe2e229e
Parent:
ea423e476
2 files changed +26 −30
- art-of-war-sun-tzu.html +26 −30
- images/art-of-war-sun-tzu.png binary
Diff
--- a/art-of-war-sun-tzu.html +++ b/art-of-war-sun-tzu.html @@ -1,10 +1,11 @@ <!DOCTYPE html> + <html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Art of War - Dual View Reader</title> - <style> +<head> +<meta charset="utf-8"/> +<meta content="width=device-width, initial-scale=1.0" name="viewport"/><link href="https://cheatsheets.davidveksler.com/art-of-war-sun-tzu.html" rel="canonical"/> +<title>Art of War - Dual View Reader</title> +<style> @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap"); * { @@ -345,34 +346,29 @@ animation-delay: 1.5s; /* Fade in last */ } </style> - </head> - <body> - <div class="header-title" id="mainBookTitle">孫子兵法 / The Art of War</div> - <div class="subtitle" id="mainBookAuthor">Dual Language Reader Concept</div> - - <div id="chapter-menu-bar"> - <!-- Chapter buttons will be injected here by JavaScript --> - </div> - - <div class="reader-frame" id="readerFrame"> <!-- Added ID for easier selection --> - <div id="chinese-view-container" class="view-container active-view"> - <div class="loading-message">Loading Chinese Content...</div> - </div> - <div id="english-view-container" class="view-container hidden-view"> - <div class="loading-message">Loading English Content...</div> - </div> - </div> - - <button id="toggleViewButton" class="toggle-button" disabled>Switch Language</button> - <div class="instructions">Chinese view: Use mouse wheel or touchpad to scroll horizontally.</div> - - <footer> +<meta content="images/art-of-war-sun-tzu.png" property="og:image"/><meta content="images/art-of-war-sun-tzu.png" name="twitter:image"/></head> +<body> +<div class="header-title" id="mainBookTitle">孫子兵法 / The Art of War</div> +<div class="subtitle" id="mainBookAuthor">Dual Language Reader Concept</div> +<div id="chapter-menu-bar"> +<!-- Chapter buttons will be injected here by JavaScript --> +</div> +<div class="reader-frame" id="readerFrame"> <!-- Added ID for easier selection --> +<div class="view-container active-view" id="chinese-view-container"> +<div class="loading-message">Loading Chinese Content...</div> +</div> +<div class="view-container hidden-view" id="english-view-container"> +<div class="loading-message">Loading English Content...</div> +</div> +</div> +<button class="toggle-button" disabled="" id="toggleViewButton">Switch Language</button> +<div class="instructions">Chinese view: Use mouse wheel or touchpad to scroll horizontally.</div> +<footer> This reader is inspired by the ancient Chinese writing medium of bamboo slips (簡牘, jiǎndú). These long, narrow strips of bamboo or wood, tied together with string, formed the primary "books" and documents before the widespread adoption of paper. The vertical orientation of text in the Chinese view and the segmented appearance of the content aim to evoke this historical form. </footer> - - <script> +<script> const chineseViewContainer = document.getElementById("chinese-view-container"); const englishViewContainer = document.getElementById("english-view-container"); const toggleButton = document.getElementById("toggleViewButton"); @@ -585,5 +581,5 @@ document.addEventListener("DOMContentLoaded", loadContent); </script> - </body> +</body> </html> \ No newline at end of file Binary files /dev/null and b/images/art-of-war-sun-tzu.png differ