From 6795887e0e955297d7d9c19ecdd2eb87e3e3a5d1 Mon Sep 17 00:00:00 2001
From: Dor-sketch <dor.pascal@mail.huji.ac.il>
Date: Fri, 28 Jun 2024 20:18:03 +0300
Subject: [PATCH] Add title and update instructions

---
 README.md           |  3 --
 docs/css/styles.css | 41 ++++++++++------------
 docs/index.html     | 61 +++++++++++++++++++++++++++-----
 docs/js/tutorial.js | 84 +++++++++++++++++++++++----------------------
 4 files changed, 113 insertions(+), 76 deletions(-)

diff --git a/README.md b/README.md
index 448d731..9c9ad27 100644
--- a/README.md
+++ b/README.md
@@ -324,6 +324,3 @@ Any contributions you make are greatly appreciated.
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-
-............5.3.3...84.12...59...8..........6.23...57...53.7....1.
-............5.3.3...84.12...59...8..........6.23...57...53.7....1.....9.....1...
\ No newline at end of file
diff --git a/docs/css/styles.css b/docs/css/styles.css
index 4aedfe2..7bcaaa2 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -129,16 +129,16 @@ footer {
     flex-direction: column;
     position: fixed;
 }
-/* Headings Styling */
+
+
+/* Updated h1 Styling */
 h1 {
-    font-size: 1.5rem;
     margin: 0;
-    padding: 0;
-    margin-top: 1rem;
-    color: var(--primary-color);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    transition: background-color 0.2s, box-shadow 0.2s;
+    font-size: 2rem;
+    color: var(--text-color);
+    text-align: left;
+    font-family: var(--font-stack);
+    /* Remove or adjust the left property as needed */
 }
 
 h2 {
@@ -360,18 +360,17 @@ label {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
+/* Adjusted .design-info CSS */
 .design-info {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    position: absolute; /* Added to position the element absolutely within its closest positioned ancestor */
-    top: 50%; /* Center vertically */
-    left: 50%; /* Center horizontally */
-    transform: translate(-50%, -50%); /* Adjust the element's position to be truly centered */
-    margin-top: 0; /* Reset margin-top as it's no longer needed */
-margin-left:1rem;
-text-align: center;}
+    display: block;
+    text-align: left;
+    position: absolute;
+    left: 0;
+    bottom: 4rem;
+    margin: 1rem;
+}
+
+
 .design-info p {
     margin-bottom: 0 !important;
     margin-block-start: 0rem;
@@ -521,12 +520,8 @@ color: #ffffff !important;
         gap: 0;
     }
     .design-info {
-        position: fixed;
         text-align: left;
-        bottom: 0rem;
-        margin-left: 1rem;
         font-size: 0.8rem;
-        padding-left: 2rem;
     }
 
 
diff --git a/docs/index.html b/docs/index.html
index 28cbc7a..8dde012 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -15,8 +15,9 @@
     <title>Snap & Solve: Turn Puzzle Images into Sudoku Answers</title>
     <meta name="author" content="Dor Pascal">
     <meta property="og:title" content="Snap & Solve: Turn Puzzle Images into Sudoku Answers" />
-    <meta property="og:image" content="https://dorpascal.com/AlphaSudokuGo/sudoku-solver.png" />
-    <meta property="og:description" content="Fastest Sudoku solver ever. Enter a board, click solve, and see the magic happen. Built by Dor." />
+    <meta property="og:image" content="https://dorpascal.com/AlphaSudokuGo/sudoku-solver.gif" />
+    <meta property="og:description"
+        content="Fastest Sudoku solver ever. Enter a board, click solve, and see the magic happen. Built by Dor." />
     <meta property="og:url" content="https://dorpascal.com/AlphaSudokuGo/" />
     <meta property="og:type" content="website" />
     <link rel="icon" href="./favicon.ico">
@@ -37,11 +38,7 @@
                 <i class="fas fa-camera icon-style"></i>
             </label>
         </div>
-        <div class="design-info">
-            <p>Built By Dor © <script>document.write(new Date().getFullYear());</script><br>
-                <a href="https://dorpascal.com">dorpascal.com</a>
-            </p>
-        </div>
+
         <div id="theme-toggle" class="theme-toggle">
             <div class="toggle-inner">
                 <div class="toggle-handle"></div>
@@ -58,8 +55,54 @@
         </section>
         <div id="sudoku-board" class="sudoku-board"></div>
         <div id="tutorial-popup" class="tutorial-popup">
-            <!-- Tutorial steps here -->
+            <div class="tutorial-step" data-step="1">
+                <p>👋 Welcome to the Sudoku Solver!</p>
+                <p>Let's get started.</p>
+                <button class="close-btn">❌ Close</button>
+                <button class="next-btn">➡️ Next</button>
+            </div>
+            <div class="tutorial-step" data-step="2" style="display:none;">
+                <p>How to use:</p>
+                <p>Enter the Sudoku board and click the play button to solve the puzzle.</p>
+                <button class="close-btn">❌ Close</button>
+                <button class="next-btn">➡️ Next</button>
+            </div>
+            <div class="tutorial-step" data-step="3" style="display:none;">
+                <p>📝 You can enter the Sudoku board in multiple ways:</p>
+                <ul style="list-style-type: none; padding: 0;">
+                    <li>📷 Take a picture or choose an image from your device.</li>
+                    <li>🖱️ Drag and drop an image.</li>
+                    <li>✍️ Enter the board as a text line in the input field.</li>
+                </ul>
+                <button class="close-btn">❌ Close</button>
+                <button class="next-btn">➡️ Next</button>
+            </div>
+            <div class="tutorial-step" data-step="4" style="display:none;">
+                <p>🖼️ If you upload an image, crop the Sudoku board and confirm for best results.</p>
+                <p>📝 You can also edit the board by clicking on the cells or using the input field.</p>
+                <button class="close-btn">❌ Close</button>
+                <button class="next-btn">➡️ Next</button>
+            </div>
+            <div class="tutorial-step" data-step="5" style="display:none;">
+                <p>🚀 Ready to solve the Sudoku puzzle?</p>
+                <p>Try to copy and paste the hardest Sudoku puzzle ever (according to <a
+                        href="https://www.telegraph.co.uk/news/science/science-news/9359579/Worlds-hardest-sudoku-can-you-crack-it.html"
+                        target="_blank">The Telegraph</a>).</p>
+                <span>53..7....6..195....98....6.8...6...34..8.3..17...2...6.6....28....419..5....8..79</span>
+                <button class="copy-btn" data-text="8..........36......7..9.2...5...7.......457.....1...3...1....68..85...1..9....4..">📋 Copy</button>
+                <br>
+                <br>
+                <button class="close-btn">✅ Finish</button>
+            </div>
         </div>
+    </div>
+         <div class="design-info">
+        <h1>Snap & Solve</h1>
+                <p>Built By Dor ©
+                    <script>document.write(new Date().getFullYear());</script><br>
+                    <a href="https://dorpascal.com">dorpascal.com</a>
+                </p>
+            </div>
     </main>
     <footer>
         <div class="cropping-actions" id="cropping-actions" style="display: none;">
@@ -207,4 +250,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/docs/js/tutorial.js b/docs/js/tutorial.js
index 0aefdd7..8ff0283 100644
--- a/docs/js/tutorial.js
+++ b/docs/js/tutorial.js
@@ -1,48 +1,50 @@
-  document.getElementById('help-btn').addEventListener('click', function () {
-            var tutorialPopup = document.getElementById('tutorial-popup');
-            tutorialPopup.style.display = 'block'; // Use block if flex doesn't work as expected
 
-            tutorialPopup.style.zIndex = '1000'; // Ensure it's above other content
 
-            showStep(1);
-        });
-
-        document.querySelectorAll('.next-btn').forEach(btn => {
-            btn.addEventListener('click', function () {
-                const currentStep = this.parentElement.getAttribute('data-step');
-                showStep(parseInt(currentStep) + 1);
-            });
-        });
+document.getElementById('help-btn').addEventListener('click', function () {
+    var tutorialPopup = document.getElementById('tutorial-popup');
+    tutorialPopup.style.display = 'block'; // Use block if flex doesn't work as expected
 
+    tutorialPopup.style.zIndex = '1000'; // Ensure it's above other content
 
-        document.querySelectorAll('.copy-btn').forEach(btn => {
-            btn.addEventListener('click', function () {
-                const text = this.getAttribute('data-text');
-                navigator.clipboard.writeText(text).then(() => {
-                    alert('Copied to clipboard');
-                });
-            });
-        });
+    showStep(1);
+});
 
-        function showStep(step) {
-            document.querySelectorAll('.tutorial-step').forEach(stepEl => {
-                stepEl.style.display = 'none';
-            });
-            document.querySelector(`.tutorial-step[data-step="${step}"]`).style.display = 'block';
-        }
-
-        // after the last step, hide the popup - even if clicking on the overlay or copying the text
-        document.getElementById('tutorial-popup').addEventListener('click', function (e) {
-            if (e.target === this) {
-                this.style.display = 'none';
-            }
-        });
+document.querySelectorAll('.next-btn').forEach(btn => {
+    btn.addEventListener('click', function () {
+        const currentStep = this.parentElement.getAttribute('data-step');
+        showStep(parseInt(currentStep) + 1);
+    });
+});
 
-        // if copied text from one of the examples, hide the popup and mark the #input-board as focused
-        document.querySelectorAll('.copy-btn').forEach(btn => {
-            btn.addEventListener('click', function () {
-                document.getElementById('tutorial-popup').style.display = 'none';
-                document.getElementById('input-board').setAttribute('placeholder', 'Paste the copied board here...');
 
-            });
-        });
\ No newline at end of file
+document.querySelectorAll('.copy-btn').forEach(btn => {
+    btn.addEventListener('click', function () {
+        const text = this.getAttribute('data-text');
+        navigator.clipboard.writeText(text).then(() => {
+            alert('Copied to clipboard');
+        });
+    });
+});
+
+function showStep(step) {
+    document.querySelectorAll('.tutorial-step').forEach(stepEl => {
+        stepEl.style.display = 'none';
+    });
+    document.querySelector(`.tutorial-step[data-step="${step}"]`).style.display = 'block';
+}
+
+// after the last step, hide the popup - even if clicking on the overlay or copying the text
+document.getElementById('tutorial-popup').addEventListener('click', function (e) {
+    if (e.target === this) {
+        this.style.display = 'none';
+    }
+});
+
+// if copied text from one of the examples, hide the popup and mark the #input-board as focused
+document.querySelectorAll('.copy-btn').forEach(btn => {
+    btn.addEventListener('click', function () {
+        document.getElementById('tutorial-popup').style.display = 'none';
+        document.getElementById('input-board').setAttribute('placeholder', 'Paste the copied board here...');
+
+    });
+});
\ No newline at end of file