From b406c5a2f9c0d9e32ae6cc2d966b124d91cea454 Mon Sep 17 00:00:00 2001
From: Seyed <mohammadjavadsabagh@gmail.com>
Date: Sun, 15 Sep 2024 10:40:20 +0330
Subject: [PATCH] feat: Add toggle switch for theme change at the top of the
 page

- Implemented a toggle switch at the top of the page for switching between dark and light themes.
- Positioned the toggle switch above the main header ("Modern Configuration Profile Generator").
- Enhanced the toggle design to be more prominent and visually appealing with larger size, center alignment, and background effects.
- Updated CSS for better styling, including transitions, shadows, and colors for both themes.
- Updated JavaScript to handle theme switching effectively.
---
 index.html | 285 +++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 245 insertions(+), 40 deletions(-)

diff --git a/index.html b/index.html
index 10da542..4e003d9 100644
--- a/index.html
+++ b/index.html
@@ -7,65 +7,74 @@
   
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
   <style>
+    /* Default theme (Dark) */
     body {
         font-family: 'Poppins', sans-serif;
-        background: linear-gradient(135deg, #6E85B7, #B2C8DF);
-        color: #333;
+        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+        color: #e0e0e0;
         margin: 0;
         padding: 0;
         display: flex;
         flex-direction: column;
         min-height: 100vh;
     }
+
     .content {
-        flex: 1; /* این بخش محتوای اصلی را در وسط قرار می‌دهد */
+        flex: 1; 
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 20px;
     }
+
     .container {
         max-width: 600px;
         padding: 30px;
-        background-color: #ffffff;
+        background-color: #121212;
         border-radius: 16px;
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
     }
+
     h1 {
         text-align: center;
         margin-bottom: 20px;
-        color: #333;
+        color: #ffffff;
         font-weight: 700;
         font-size: 24px;
     }
+
     label {
         font-weight: 600;
         margin-bottom: 8px;
         display: block;
-        color: #555;
+        color: #cccccc;
     }
+
     .form-text {
-        color: #777;
+        color: #aaaaaa;
         margin-top: 5px;
         font-size: 14px;
     }
+
     input, select, textarea {
         border-radius: 8px;
         padding: 12px;
         font-size: 15px;
         margin-bottom: 20px;
-        border: 1px solid #ddd;
-        background-color: #f9f9f9;
-        width: 100%;
+        border: 1px solid #333;
+        background-color: #1f1f1f;
+        color: #e0e0e0;
         transition: border-color 0.3s;
     }
+
     input:focus, select:focus, textarea:focus {
-        border-color: #6E85B7;
+        border-color: #8ab4f8;
         outline: none;
     }
+
     button {
-        background-color: #6E85B7;
-        color: #fff;
+        background-color: #333;
+        color: #ffffff;
         border-radius: 8px;
         padding: 14px;
         border: none;
@@ -75,45 +84,52 @@
         width: 100%;
         transition: background-color 0.3s ease;
     }
+
     button:hover {
-        background-color: #4A6FA5;
+        background-color: #555;
     }
+
     footer {
         width: 100%;
         padding: 20px;
-        border-top: 5px solid #6E85B7;
+        border-top: 5px solid #8ab4f8;
         border-radius: 0 0 16px 16px;
-        box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.05);
+        box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.2);
         text-align: center;
-        background-color: #ffffff;
+        background-color: #121212;
+        color: #e0e0e0;
     }
+
     .support {
         display: flex;
         flex-direction: column;
         align-items: center;
-        background-color: #fff8e1;
+        background-color: #1f1f1f;
         padding: 20px;
         border-radius: 12px;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-        color: #333;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        color: #e0e0e0;
         max-width: 500px;
         margin: 0 auto;
-        border: 1px solid #ffd700;
+        border: 1px solid #444;
     }
+
     .support h4 {
         font-weight: 700;
-        color: #333;
+        color: #ffffff;
         margin-bottom: 10px;
     }
+
     .support p {
         margin: 0;
         font-size: 14px;
-        color: #555;
+        color: #cccccc;
     }
+
     .support a {
         text-decoration: none;
-        color: #fff;
-        background-color: #ffdd57;
+        color: #121212;
+        background-color: #8ab4f8;
         padding: 10px 20px;
         border-radius: 8px;
         font-weight: 600;
@@ -121,21 +137,183 @@
         display: flex;
         align-items: center;
     }
+
     .support a:hover {
-        background-color: #ffc107;
+        background-color: #a6c8ff;
     }
+
     .coffee-icon {
         font-size: 24px;
         margin-right: 8px;
     }
-  </style>
+
+    .alert {
+        background-color: #1f1f1f;
+        color: #e0e0e0;
+        border: 1px solid #444;
+    }
+
+    /* Light theme styles */
+    body.light-theme {
+        background: #ffffff;
+        color: #000000;
+    }
+
+    body.light-theme .container {
+        background-color: #ffffff;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
+    }
+
+    body.light-theme h1, 
+    body.light-theme label, 
+    body.light-theme .support h4 {
+        color: #000000;
+    }
+
+    body.light-theme .form-text, 
+    body.light-theme .support p {
+        color: #333333;
+    }
+
+    body.light-theme input, 
+    body.light-theme select, 
+    body.light-theme textarea {
+        background-color: #ffffff;
+        color: #000000;
+        border-color: #cccccc;
+    }
+
+    body.light-theme input:focus, 
+    body.light-theme select:focus, 
+    body.light-theme textarea:focus {
+        border-color: #6E85B7;
+        outline: none;
+    }
+
+    body.light-theme button {
+        background-color: #6E85B7;
+        color: #ffffff;
+    }
+
+    body.light-theme button:hover {
+        background-color: #4A6FA5;
+    }
+
+    body.light-theme .alert {
+        background-color: #ffffff;
+        color: #000000;
+        border: 1px solid #dddddd;
+    }
+
+    body.light-theme footer {
+        background-color: #ffffff;
+        color: #000000;
+    }
+
+    body.light-theme .support {
+        background-color: #ffffff;
+        border: 1px solid #e0e0e0;
+    }
+
+    body.light-theme .support a {
+        background-color: #6E85B7;
+        color: #ffffff;
+    }
+
+    body.light-theme .support a:hover {
+        background-color: #4A6FA5;
+    }
+
+
+
+
+    .theme-toggle-container {
+        display: flex;
+        align-items: center;
+        justify-content: center; 
+        padding: 10px 0; 
+        margin-bottom: 20px; 
+        background-color: rgba(0, 0, 0, 0.05); 
+        border-bottom: 1px solid #ddd; 
+    }
+
+    /* Styling for the toggle switch */
+    .theme-switch {
+        position: relative;
+        display: inline-block;
+        width: 80px; 
+        height: 40px; 
+        margin-right: 15px; 
+    }
+
+    .theme-switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #ccc;
+        transition: .4s;
+        border-radius: 34px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
+    }
+
+    .slider:before {
+        position: absolute;
+        content: "";
+        height: 30px; 
+        width: 30px; 
+        left: 5px;
+        bottom: 5px;
+        background-color: white;
+        transition: .4s;
+        border-radius: 50%;
+    }
+
+    input:checked + .slider {
+        background-color: #6E85B7; 
+    }
+
+    input:checked + .slider:before {
+        transform: translateX(40px);
+    }
+
+    /* Text label for the toggle */
+    .theme-label {
+        color: #333;
+        font-size: 18px; 
+        font-weight: 700; 
+    }
+
+    body.light-theme .theme-label {
+        color: #000000;
+    }
+</style>
+
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
 </head>
 <body>
-    <div class="content">
+
+     <!-- Toggle switch for theme at the top -->
+     <div class="theme-toggle-container">
+        <label class="theme-switch">
+            <input type="checkbox" id="theme-toggle">
+            <span class="slider"></span>
+        </label>
+        <span class="theme-label">Dark Mode</span>
+    </div>
+
+    <div class="content"></div>
         <div class="container">
             <h1>Modern Configuration Profile Generator</h1>
             <form id="config-form">
@@ -152,24 +330,51 @@ <h1>Modern Configuration Profile Generator</h1>
               </div>
               <button type="submit">Generate Configuration Profile</button>
             </form>
-        </div>
-    </div>
 
-    <footer>
-        <div class="support">
-          <h4 class="alert-heading">SUPPORT :</h4>
-          <p> 💞️ If you like my work, consider buying me a coffee:</p>
-          <a href="https://www.buymeacoffee.com/YourLink" target="_blank">
-            <span class="coffee-icon">☕</span> Buy Me a Coffee
-          </a>
-          <p>Bitcoin: bc1q3230gkphdk5qzsxtj079mz5w35svwrpwq6wh8c</p>
+           
+        
+
+            <!-- Existing alert content -->
+            <div class="alert mt-3" role="alert">
+              <h4 class="alert-heading carrier">Signal Booster:</h4>
+              <p>A signal booster, also known as a repeater, is a device that amplifies a wireless signal. It can be used to improve the signal strength and coverage in areas where the signal is weak or obstructed.</p>
+              
+              <h4 class="alert-heading apn">APN:</h4>
+              <p>APN (Access Point Name) is a gateway between a cellular network and the public internet. It is used to set up a data connection on a mobile device, and different carriers may have different APN settings.</p>
+              
+              <h4 class="alert-heading proxy">Proxy:</h4>
+              <p>A proxy server is an intermediary between a client and a server. It can be used to provide anonymity, filter content, or cache data to improve performance.</p>
+              
+              <h4 class="alert-heading dns">DNS:</h4>
+              <p>DNS (Domain Name System) is a system that translates domain names into IP addresses. It can be used to block or redirect access to certain websites, or to improve the performance of a network.</p>
+
+              <h4 class="alert-heading supporting"> SUPPORT حمایت </h4>
+              <p> 💞️ Feel free to support my endeavors through donations at:</p>
+              <p>Bitcoin: bc1q3230gkphdk5qzsxtj079mz5w35svwrpwq6wh8c</p>
+              <p>Follow Me on Github & X : @AiGptCode</p>
+            </div>
         </div>
-      </footer>
+    </div>
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
 
   <script>
+const themeToggle = document.getElementById('theme-toggle');
+    const body = document.body;
+
+    themeToggle.addEventListener('change', () => {
+        if (themeToggle.checked) {
+            body.classList.add('light-theme');
+            document.querySelector('.theme-label').textContent = 'Light Mode';
+        } else {
+            body.classList.remove('light-theme');
+            document.querySelector('.theme-label').textContent = 'Dark Mode';
+        }
+    });
+
+
+
     const configForm = document.getElementById('config-form');
 
     function generateUniqueUUID() {