From ad05afbb836da782a7f1793491b9909fb8b074b4 Mon Sep 17 00:00:00 2001
From: Michael Maurakis <michael.maurakis@gmail.com>
Date: Mon, 20 Jan 2025 01:10:03 -0600
Subject: [PATCH] Added settings side panel. Working on open in new tab.

---
 index.html | 101 +++++++++++++++++-------
 styles.css | 219 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 293 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index 7bf0766..5aa870c 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,6 @@
         </div>
         <div class="header-buttons">
             <div class="social-buttons">
-                <button id="helpButton">❓</button>
                 <button id="donateButton">💝</button>
                 <button id="githubButton">
                     <svg viewBox="0 0 24 24" width="24" height="24">
@@ -41,20 +40,56 @@
                 </button>
             </div>
             <div class="app-controls">
-                <div class="theme-toggle">
-                    <button id="darkModeToggle">🌙</button>
-                </div>
+                <button id="settingsButton">
+                    <svg viewBox="0 0 24 24" width="24" height="24">
+                        <path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
+                    </svg>
+                </button>
                 <button id="fumbleButton">Fumble!</button>
             </div>
         </div>
     </header>
     
-    <div id="helpModal" class="modal">
-        <div class="modal-content">
-            <span class="close-button">&times;</span>
-            <h2>Disclaimer</h2>
-            <p>FumbleAround uses Wiby.me's search engine to provide random web pages. We are not responsible for the content that appears. Use at your own discretion.</p>
-            <p>This project is a homage to the classic StumbleUpon, reimagined for the modern web.</p>
+    <div id="settingsPanel" class="settings-panel">
+        <div class="settings-content">
+            <div class="settings-header">
+                <h2>Settings</h2>
+                <button class="close-settings">×</button>
+            </div>
+            <div class="settings-section">
+                <h3>Display</h3>
+                <div class="setting-item">
+                    <label>Dark Mode</label>
+                    <button id="darkModeToggle">🌙</button>
+                </div>
+            </div>
+            <div class="settings-section">
+                <h3>Actions</h3>
+                <div class="setting-item">
+                    <button id="openInNewWindow" class="settings-button">Open in New Window</button>
+                </div>
+            </div>
+            <div class="settings-section">
+                <h3>About</h3>
+                <div class="setting-item about-section">
+                    <div class="about-content">
+                        <div class="about-logo">
+                            <img src="./Assets/smily.png" alt="FumbleAround Logo">
+                            <h4>FumbleAround</h4>
+                        </div>
+                        <div class="about-text">
+                            <p>Discover the hidden gems of the internet, powered by Wiby.me's search engine.</p>
+                            <div class="disclaimer">
+                                <h5>Disclaimer</h5>
+                                <p>We are not responsible for the content that appears. Use at your own discretion.</p>
+                            </div>
+                            <div class="tribute">
+                                <p>A homage to the classic StumbleUpon, reimagined for the modern web.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -93,6 +128,7 @@
         let lastFumbleTime = 0;
         const cooldownPeriod = 5000; // 5 seconds cooldown
         let cooldownTimer = null;
+        let currentPageUrl = null; // Add this to store the current URL
 
         const fumble = () => {
             const currentTime = Date.now();
@@ -132,20 +168,23 @@
             
             // Wait for the page to load then focus
             frame.onload = () => {
-                // Check if we landed on a blocked/error page
                 try {
+                    // Store the actual URL after redirect
+                    currentPageUrl = frame.contentWindow.location.href;
+                    
                     const title = frame.contentWindow.document.title.toLowerCase();
                     if (title.includes('blocked') || 
                         title.includes('error') || 
                         title.includes('refused') ||
                         title.includes('cannot') ||
                         title.includes('denied')) {
-                        // Try again if we hit an error page
+                        currentPageUrl = null; // Reset if we hit an error
                         fumble();
                         return;
                     }
                 } catch (e) {
-                    // Can't access title due to CORS - assume page is OK
+                    // Can't access due to CORS
+                    currentPageUrl = null;
                 }
                 
                 frame.focus();
@@ -191,17 +230,25 @@
             window.open('https://wiby.me/donate/', '_blank');
         });
 
-        // Add help button click handler
-        const modal = document.getElementById('helpModal');
-        const helpButton = document.getElementById('helpButton');
-        const closeButton = document.querySelector('.close-button');
-
-        helpButton.addEventListener('click', () => {
-            modal.classList.add('show');
+        // Add settings button click handler
+        const settingsPanel = document.getElementById('settingsPanel');
+        const settingsButton = document.getElementById('settingsButton');
+        const closeSettings = document.querySelector('.close-settings');
+        
+        settingsButton.addEventListener('click', () => {
+            settingsPanel.classList.add('show');
+        });
+        
+        closeSettings.addEventListener('click', () => {
+            settingsPanel.classList.remove('show');
         });
 
-        closeButton.addEventListener('click', () => {
-            modal.classList.remove('show');
+        // Update the open in new window handler
+        document.getElementById('openInNewWindow').addEventListener('click', () => {
+            if (currentPageUrl) {
+                window.open(currentPageUrl, '_blank');
+                settingsPanel.classList.remove('show');
+            }
         });
 
         // Update warning modal close handler
@@ -217,8 +264,8 @@
 
         // Remove the click-outside-to-close functionality for warning modal
         window.addEventListener('click', (event) => {
-            if (event.target === modal) { // Only for help modal
-                modal.classList.remove('show');
+            if (event.target === warningModal) { // Only for warning modal
+                warningModal.classList.remove('show');
             }
         });
 
@@ -283,15 +330,15 @@
         if ('DeviceMotionEvent' in window) {
             // Add a button to request permission on iOS
             if (typeof DeviceMotionEvent.requestPermission === 'function') {
-                const modal = document.getElementById('helpModal');
-                const modalContent = modal.querySelector('.modal-content');
+                const settingsPanel = document.getElementById('settingsPanel');
+                const settingsContent = settingsPanel.querySelector('.settings-content');
                 
                 const permissionButton = document.createElement('button');
                 permissionButton.textContent = 'Enable Shake to Fumble';
                 permissionButton.className = 'permission-button';
                 permissionButton.addEventListener('click', initShakeDetection);
                 
-                modalContent.appendChild(permissionButton);
+                settingsContent.appendChild(permissionButton);
             } else {
                 // Automatically start for non-iOS devices
                 initShakeDetection();
diff --git a/styles.css b/styles.css
index 5e7d2b2..f7355e0 100644
--- a/styles.css
+++ b/styles.css
@@ -507,4 +507,223 @@ button {
 
 .dark-mode .warning-close-btn:not(:disabled):hover {
     background-color: #ff7c5c;
+}
+
+.settings-panel {
+    position: fixed;
+    top: 0;
+    right: -400px;
+    width: 400px;
+    height: 100vh;
+    background-color: #ffffff;
+    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+    transition: right 0.3s ease;
+    z-index: 2000;
+    overflow-y: auto;
+}
+
+.dark-mode .settings-panel {
+    background-color: #1a1a1a;
+    color: #ffffff;
+}
+
+.settings-panel.show {
+    right: 0;
+}
+
+.settings-content {
+    padding: 20px;
+}
+
+.settings-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+}
+
+.dark-mode .settings-header {
+    border-bottom-color: #333;
+}
+
+.close-settings {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #666;
+    padding: 5px;
+}
+
+.dark-mode .close-settings {
+    color: #999;
+}
+
+.settings-section {
+    margin-bottom: 30px;
+}
+
+.settings-section h3 {
+    margin-bottom: 15px;
+    color: #ff4500;
+}
+
+.dark-mode .settings-section h3 {
+    color: #ff6b4a;
+}
+
+.setting-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    padding: 10px;
+    background: #f5f5f5;
+    border-radius: 8px;
+}
+
+.dark-mode .setting-item {
+    background: #2a2a2a;
+}
+
+.settings-button {
+    width: 100%;
+    padding: 10px;
+    background-color: #ff4500;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.dark-mode .settings-button {
+    background-color: #ff6b4a;
+}
+
+.settings-button:hover {
+    background-color: #ff5722;
+}
+
+@media (max-width: 768px) {
+    .settings-panel {
+        width: 100%;
+        right: -100%;
+    }
+}
+
+#settingsButton {
+    padding: 8px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s;
+}
+
+#settingsButton svg {
+    width: 24px;
+    height: 24px;
+    color: #333;
+    transition: color 0.3s ease, transform 0.3s ease;
+}
+
+.dark-mode #settingsButton svg {
+    color: #fff;
+}
+
+#settingsButton:hover svg {
+    transform: rotate(30deg);
+}
+
+#settingsButton:active svg {
+    transform: rotate(180deg);
+}
+
+@media (hover: none) {
+    #settingsButton:hover svg {
+        transform: none;
+    }
+}
+
+.about-section {
+    flex-direction: column;
+    padding: 20px;
+}
+
+.about-content {
+    width: 100%;
+    text-align: center;
+}
+
+.about-logo {
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+.about-logo img {
+    width: 64px;
+    height: 64px;
+    border-radius: 12px;
+}
+
+.about-logo h4 {
+    font-size: 1.2em;
+    margin: 0;
+    color: #ff4500;
+}
+
+.dark-mode .about-logo h4 {
+    color: #ff6b4a;
+}
+
+.about-text {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.about-text p {
+    margin: 0;
+    line-height: 1.5;
+}
+
+.disclaimer {
+    background: rgba(255, 69, 0, 0.1);
+    padding: 15px;
+    border-radius: 8px;
+    margin: 10px 0;
+}
+
+.dark-mode .disclaimer {
+    background: rgba(255, 107, 74, 0.1);
+}
+
+.disclaimer h5 {
+    color: #ff4500;
+    margin: 0 0 10px 0;
+    font-size: 1em;
+}
+
+.dark-mode .disclaimer h5 {
+    color: #ff6b4a;
+}
+
+.tribute {
+    font-style: italic;
+    opacity: 0.8;
+    padding-top: 10px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.dark-mode .tribute {
+    border-top-color: rgba(255, 255, 255, 0.1);
 } 
\ No newline at end of file