commit 10208766b1a9d46f580fff9c0921a736b8011669
Author: root <root@hub.scroll.pub> Date: 2024-12-27 06:43:36 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..ac64d7a --- /dev/null +++ b/body.html @@ -0,0 +1,42 @@ +<header> + <h1>Sudoku Tricks</h1> + <p>Master Sudoku with live playing tricks and strategies</p> +</header> + +<main> + <section id="intro"> + <h2>Welcome to Sudoku Tricks</h2> + <p>Improve your Sudoku skills with our interactive guide. Learn essential techniques and watch live examples to solve puzzles faster and more efficiently.</p> + </section> + + <section id="tricks"> + <h2>Live Sudoku Tricks</h2> + <div class="trick-container"> + <div class="trick" id="single-candidate"> + <h3>Single Candidate</h3> + <p>Find cells with only one possible number.</p> + <button onclick="showExample('single-candidate')">Show Example</button> + </div> + <div class="trick" id="naked-pair"> + <h3>Naked Pair</h3> + <p>Identify pairs of numbers that eliminate possibilities in other cells.</p> + <button onclick="showExample('naked-pair')">Show Example</button> + </div> + <div class="trick" id="hidden-single"> + <h3>Hidden Single</h3> + <p>Discover numbers that can only fit in one cell within a row, column, or box.</p> + <button onclick="showExample('hidden-single')">Show Example</button> + </div> + </div> + </section> + + <section id="example"> + <h2>Live Example</h2> + <div id="example-board"></div> + <p id="example-description"></p> + </section> +</main> + +<footer> + <p>Practice makes perfect. Keep solving!</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..0733297 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://sudokutricks.scroll.pub +metaTags +editButton /edit.html +title Sudoku Tricks - Improve Your Sudoku Skills +style.css +body.html +script.js \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..3f8026d --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# sudokutricks.scroll.pub +Website generated by DeepSeek from prompt: Create a site to help me improve in sudoku by showing live playing tricks. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..22a446b --- /dev/null +++ b/script.js @@ -0,0 +1,47 @@ +function showExample(trickId) { + const exampleBoard = document.getElementById('example-board'); + const exampleDescription = document.getElementById('example-description'); + exampleBoard.innerHTML = ''; + let description = ''; + + switch (trickId) { + case 'single-candidate': + description = 'This example shows how to identify cells with only one possible number.'; + // Example grid for single candidate + for (let i = 0; i < 81; i++) { + const cell = document.createElement('div'); + if (i === 40) { + cell.textContent = '5'; + cell.style.backgroundColor = '#d4edda'; + } + exampleBoard.appendChild(cell); + } + break; + case 'naked-pair': + description = 'This example demonstrates how to find and use naked pairs to eliminate possibilities.'; + // Example grid for naked pair + for (let i = 0; i < 81; i++) { + const cell = document.createElement('div'); + if (i === 10 || i === 11) { + cell.textContent = '2 3'; + cell.style.backgroundColor = '#d4edda'; + } + exampleBoard.appendChild(cell); + } + break; + case 'hidden-single': + description = 'This example illustrates how to find hidden singles in rows, columns, or boxes.'; + // Example grid for hidden single + for (let i = 0; i < 81; i++) { + const cell = document.createElement('div'); + if (i === 60) { + cell.textContent = '7'; + cell.style.backgroundColor = '#d4edda'; + } + exampleBoard.appendChild(cell); + } + break; + } + + exampleDescription.textContent = description; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d42c63d --- /dev/null +++ b/style.css @@ -0,0 +1,116 @@ +body { + font-family: 'Arial', sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + background-color: #f4f4f4; + color: #333; +} + +header { + background-color: #4CAF50; + color: white; + padding: 20px 0; + text-align: center; +} + +header h1 { + margin: 0; + font-size: 2.5em; +} + +header p { + margin: 5px 0 0; + font-size: 1.2em; +} + +main { + padding: 20px; +} + +section { + margin-bottom: 40px; +} + +h2 { + color: #4CAF50; + font-size: 2em; + margin-bottom: 10px; +} + +.trick-container { + display: flex; + flex-wrap: wrap; + gap: 20px; +} + +.trick { + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + flex: 1 1 calc(33.333% - 40px); + text-align: center; +} + +.trick h3 { + margin-top: 0; + color: #4CAF50; +} + +.trick p { + font-size: 0.9em; + color: #666; +} + +.trick button { + background-color: #4CAF50; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + margin-top: 10px; +} + +.trick button:hover { + background-color: #45a049; +} + +#example-board { + display: grid; + grid-template-columns: repeat(9, 1fr); + gap: 5px; + margin: 20px auto; + max-width: 450px; +} + +#example-board div { + background-color: white; + border: 1px solid #ccc; + display: flex; + align-items: center; + justify-content: center; + height: 50px; + font-size: 1.2em; +} + +#example-description { + text-align: center; + font-size: 1.1em; + color: #666; +} + +footer { + background-color: #333; + color: white; + text-align: center; + padding: 10px 0; + margin-top: 40px; +} + +@media (max-width: 768px) { + .trick { + flex: 1 1 100%; + } +} \ No newline at end of file