Merge pull request #2 from pythonicrahul/Added-feature-for-auto-start…

…-and-modal Added feature for auto start and modal
pythonicrahul · Feb 23, 2024 · e200fa6 · e200fa6
2 parents 5cdd79f + 90a33c8
commit e200fa6
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 7 deletions.
diff --git a/main.js b/main.js
@@ -26,6 +26,7 @@ const createWindow = () => {
         width: 500,
         height: 350,
         autoHideMenuBar: true,
+        resizable: false,
         webPreferences: {
             nodeIntegration: true,
             contextIsolation: false,
@@ -43,6 +44,25 @@ const createWindow = () => {
 app.whenReady().then(() => {
     createWindow();
 
+    // Add auto-start functionality
+    const appName = "20-20-20-refresh";
+
+    // Add the application name to the Windows Registry entry
+    const appExePath = app.getPath('exe');
+    const regCommand = `REG ADD HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Run /v ${appName} /t REG_SZ /d "${appExePath}" /f`;
+
+    require('child_process').exec(regCommand, (error, stdout, stderr) => {
+        if (error) {
+            console.error(`Error adding Registry entry: ${error.message}`);
+            return;
+        }
+        if (stderr) {
+            console.error(`Error: ${stderr}`);
+            return;
+        }
+        console.log(`Registry entry added successfully: ${stdout}`);
+    });
+
     app.on('activate', function () {
         if (BrowserWindow.getAllWindows().length === 0) createWindow();
     });

diff --git a/media/20-20-20-modal.jpg b/media/20-20-20-modal.jpg
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
         ]
       }
     ],
-    "extraResources": ["./media/bubble.wav"],
+    "extraResources": ["./media/bubble.wav", "./media/20-20-20-modal.jpg"],
     "appId": "com.rahulsjain.eye-care",
     "win": {
       "target": [

diff --git a/renderer.js b/renderer.js
@@ -5,6 +5,8 @@ const stopBtn = document.getElementById('stopBtn');
 const resetBtn = document.getElementById('resetBtn');
 const timerMinutes = document.getElementById('timerMinutes');
 const timerSeconds = document.getElementById('timerSeconds');
+const modal = document.getElementById('myModal');
+const dontShowAgainCheckbox = document.getElementById('dontShowAgain');
 
 startBtn.addEventListener('click', () => {
     ipcRenderer.send('startApp');
@@ -27,3 +29,32 @@ ipcRenderer.on('updateTimer', (event, minutes, seconds) => {
     timerMinutes.textContent = minutes < 10 ? '0' + minutes : minutes;
     timerSeconds.textContent = seconds < 10 ? '0' + seconds : seconds;
 });
+
+const showModal = () => {
+    modal.style.display = 'block';
+};
+
+const closeModal = () => {
+    modal.style.display = 'none';
+};
+
+window.onload = () => { 
+    const shouldShowModal = !localStorage.getItem('hideModal');
+    if (shouldShowModal) {
+        showModal();
+    }
+};
+
+// Close the modal when the user clicks on the close button
+modal.querySelector('.close').addEventListener('click', () => {
+    closeModal();
+});
+
+// Save user preference when the checkbox is clicked
+dontShowAgainCheckbox.addEventListener('change', () => {
+    if (dontShowAgainCheckbox.checked) {
+        localStorage.setItem('hideModal', 'true');
+    } else {
+        localStorage.removeItem('hideModal');
+    }
+});
diff --git a/ui/main.html b/ui/main.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>20-20-20 Rule Reminder</title>
     <style>
@@ -52,21 +53,25 @@
             border-radius: 5px;
             outline: none;
             transition: background-color 0.3s ease;
-            background-color: #0078d4; /* Windows blue */
+            background-color: #0078d4;
+            /* Windows blue */
             color: #fff;
         }
 
         .btn:hover {
-            background-color: #005a9e; /* Darker shade of blue */
+            background-color: #005a9e;
+            /* Darker shade of blue */
         }
 
         #startBtn {
-            background-color: #28a745; /* Green */
+            background-color: #28a745;
+            /* Green */
             color: #fff;
         }
 
         #stopBtn {
-            background-color: #e72c48; /* Red */
+            background-color: #e72c48;
+            /* Red */
             color: #fff;
         }
 
@@ -78,10 +83,74 @@
         .btn:hover {
             filter: brightness(90%);
         }
+
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0, 0, 0, 0.4);
+        }
+
+        .modal-content {
+            background-color: #fefefe;
+            margin: 0 auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 100%;
+            height: 100%;
+            border-radius: 0; /* Remove border radius */
+            position: relative;
+            box-sizing: border-box; /* Ensure padding is included in width */
+            overflow-y: hidden; /* Hide vertical scrollbar */
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .close {
+            color: #aaa;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .close:hover,
+        .close:focus {
+            color: black;
+            text-decoration: none;
+        }
+
+        /* Make image responsive */
+        .modal-content img {
+            max-width: 100%;
+            max-height: 100%;
+        }
     </style>
 </head>
+
 <body>
+
     <div class="container">
+
+        <div id="myModal" class="modal">
+            <div class="modal-content">
+                <span class="close">&times;</span>
+                <img src="../media/20-20-20-modal.jpg" alt="Image">
+                <label>
+                    <input type="checkbox" id="dontShowAgain"> Don't show this again
+                </label>
+            </div>
+        </div>
+
         <h1>20-20-20 Rule Reminder</h1>
         <div id="timerContainer">
             <span id="timerMinutes">20</span>
@@ -92,7 +161,9 @@ <h1>20-20-20 Rule Reminder</h1>
         <button id="stopBtn" class="btn" style="display: none;">Stop</button>
         <button id="resetBtn" class="btn">Reset</button>
     </div>
-    
+
     <script src="../renderer.js"></script>
+
 </body>
-</html>
+
+</html>