1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Jigsaw Riddle</title> 7 <link rel="stylesheet" href="jigsaw.css"> 8
8<script> 9 const savedTheme = localStorage.getItem('jigsaw_theme') || 'dark'; 10 document.documentElement.setAttribute('data-theme', savedTheme); 11 if (savedTheme === 'system') { 12 const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches; 13 document.documentElement.setAttribute('data-theme', prefersLight ? 'light' : 'dark'); 14 } 15 </script>
15 16</head> 17<body> 18 19 <div id="error-banner"></div> 20 21 <div class="top-bar"> 22 <div class="nav-icons" id="btn-hamburger">â°</div> 23 <div class="puzzle-header-info"> 24 <h2 id="puzzle-title" style="margin-bottom: 2px;">Jigsaw Riddle</h2> 25 <div id="hud-question" style="font-size: 0.85em; color: var(--text-muted); font-style: italic; max-width: 800px; margin: 0 auto; line-height: 1.3; padding: 2px 10px;"></div> 26 </div> 27 <div class="nav-icons" id="btn-gear">âï¸</div> 28 </div> 29 30 <div id="hamburger-menu" class="dropdown-menu"> 31 <span class="btn-close-menu" style="position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: #aaa; transition: color 0.2s;" title="Close Menu">×</span> 32 <h3 class="games-menu-header">Wordsmith Games</h3> 33 34 <div class="menu-item"> 35 <span class="game-link" style="color: #d9534f; cursor: default;">𧩠Jigsaw Riddle</span> 36 </div> 37 38 <div class="menu-item" style="margin-top: 15px;"> 39 <label><strong>ð Archive</strong></label> 40 <div class="calendar-header" style="margin-top: 10px;"> 41 <span id="cal-prev" class="calendar-nav">â</span> 42 <span id="cal-month-year">Month Year</span> 43 <span id="cal-next" class="calendar-nav">â¶</span> 44 </div> 45 <div class="calendar-grid"> 46 <div class="calendar-day-header">S</div><div class="calendar-day-header">M</div><div class="calendar-day-header">T</div><div class="calendar-day-header">W</div><div class="calendar-day-header">T</div><div class="calendar-day-header">F</div><div class="calendar-day-header">S</div> 47 </div> 48 <div id="calendar-body" class="calendar-grid"></div> 49 </div> 50 51 <div class="menu-item" style="margin-top: 15px;"> 52 <a href="https://wordsmith.org/langitude" class="game-link">ð Langitude</a> 53 </div> 54 55 <hr style="border: 0; border-top: 1px solid var(--menu-border); margin: 15px 0;"> 56 <button id="custom-save-btn" class="custom-btn">Save Game</button> 57 <button id="custom-restore-btn" class="custom-btn">Restore Game</button> 58 </div> 59 60 <div id="gear-menu" class="dropdown-menu"> 61 <span class="btn-close-menu" style="position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: #aaa; transition: color 0.2s;" title="Close Menu">×</span> 62 <div class="menu-item"> 63 <label><strong>Number of pieces:</strong></label><br> 64 <select id="custom-pieces" class="piece-dropdown"> 65 <option value="6">6 pieces</option> 66 <option value="12">12 pieces</option> 67 <option value="25" selected>25 pieces</option> 68 <option value="50">50 pieces</option> 69 <option value="100">100 pieces</option> 70 <option value="250">250 pieces</option> 71 <option value="500">500 pieces</option> 72 </select> 73 <button id="custom-apply-pieces" class="custom-btn">Restart Puzzle</button> 74 <button id="btn-shuffle" class="custom-btn">Shuffle Pieces</button> 75 </div> 76 <hr style="border: 0; border-top: 1px solid var(--menu-border); margin: 15px 0;"> 77 78 <div class="menu-item"><label><input type="checkbox" id="custom-rotation"> Enable Rotation</label></div> 79 <div class="menu-item"><label><input type="checkbox" id="custom-sound" checked> Enable Sounds</label></div> 80 <div class="menu-item"><label><input type="checkbox" id="custom-ghost"> Show Ghost Image</label></div> 81 <div class="menu-item"><label><input type="checkbox" id="custom-timer-toggle"> Show Timer</label></div> 82 83 <div class="menu-item" style="margin-top: 15px;"> 84 <label><strong>Theme:</strong></label><br> 85 <select id="theme-select" class="piece-dropdown"> 86 <option value="dark">Dark Mode (Default)</option> 87 <option value="light">White</option> 88 <option value="system">System</option> 89 </select> 90 </div> 91 </div> 92 93 <div id="puzzle-wrapper"> 94 <div id="forPuzzle"></div> 95 <div id="puzzle-timer" title="Click to pause/resume">00:00</div> 96 97 <div id="puzzle-toolbar"> 98 <button id="btn-edges" class="toolbar-btn" title="Show edge pieces only"> 99 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg> 100 </button> 101 <button id="btn-show-image" class="toolbar-btn" title="View reference image"> 102 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg> 103 </button> 104 <button id="btn-help" class="toolbar-btn" title="Help"> 105 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
105<line x1="12" y1="17" x2="12.01" y2="17"></line></svg> 106 </button> 107 </div> 108 109 <button id="btn-fullscreen">⤢</button> 110 <img id="ghost-image" src="" alt=""> 111 112 <div id="image-modal"> 113 <span class="btn-close-popup">â</span> 114 <img id="full-image-preview" src="" alt="Reference Image"> 115 </div> 116 117 <div id="help-modal" class="popup-modal"> 118 <span class="btn-close-popup">â</span> 119 <h3>Hints</h3> 120 <ul style="text-align: left;"> 121 <li>Tap/click on the <svg style="width: 16px; height: 16px; vertical-align: middle;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg> icon to show only the edge pieces.</li> 122 <li>Increase or decrease the size of pieces by zooming in with mouse wheel or fingers.</li> 123 <li>Pan the board by dragging on an empty space.</li> 124 <li>Click or tap on a piece to rotate (if rotation is enabled).</li> 125 <li>Click on the timer to pause or to resume (if timer is enabled).</li> 126 </ul> 127 </div> 128 129 <div id="puzzle-qa-container" class="popup-modal"> 130 <span class="btn-close-popup">â</span> 131 <h2 class="success-heading">ð Solved!</h2> 132 133 <div id="post-answer-content" style="display: none;"> 134 <p id="puzzle-answer"></p> 135 <hr style="border: 0; border-top: 1px solid var(--menu-border); margin: 8px 0;"> 136 137 <div class="puzzle-stats"> 138 Solved in <strong id="stat-time">0:00</strong>. <strong id="stat-streak">0</strong>-day streak.<br> 139 Next puzzle in: <strong id="countdown-time">--h --m</strong> 140 </div> 141 142 <p id="puzzle-come-back">Come back tomorrow for a fresh puzzle or try the archives.</p> 143 <p class="feedback-link">Send feedback and comments to <a href="mailto:[email protected]">[email protected]</a>.</p> 144 145 <hr style="border: 0; border-top: 1px solid var(--menu-border); margin: 8px 0;"> 146 <p id="puzzle-attribution-bottom" class="attribution-bottom"></p> 147 </div> 148 </div> 149 150 <div id="start-overlay"> 151 <div class="intro-card"> 152 <h1>Jigsaw Riddle</h1> 153 <h2 id="start-overlay-title"></h2> 154 <p>A language and literature themed jigsaw puzzle. Ponder the riddle as you piece the image together!</p> 155 <button id="btn-start-game">Start</button> 156 </div> 157 </div> 158 </div> 159 160 <div id="phantom-basement"> 161 <div id="menu"></div><div id="controls"></div> 162 <button id="default"></button><button id="load"></button> 163 <input type="checkbox" id="enablerot"><label id="enablerotlabel"></label> 164 <select id="shape"><option value="1"></option><option value="2"></option><option value="3"></option><option value="4"></option></select> 165 <input type="number" id="nbpieces" value="25"> 166 <select id="drawmode"><option value="1"></option></select> 167 <button id="start"></button><button id="stop"></button> 168 <button id="helpstorage"></button><button id="save"></button> 169 <button id="restore"></button><button id="helpfile"></button> 170 <button id="fsave"></button><button id="frestore"></button> 171 <button id="help"></button><input type="text" id="saveas"><span id="saveext"></span> 172 </div> 173 174
174<script src="script.js"></script>
174 175
175<script src="puzzle-controller.js"></script>
175 176 177</body> 178</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.