Implement system status indicators in api.js, config.js, index.html, …

…and style.css - Added status LED and text elements to index.html for visual feedback on system status. - Introduced new status management functions in api.js to update the system status (Online, Offline, Loading). - Enhanced CONFIG in config.js to define status types and their corresponding classes. - Updated style.css with styles for the new system status indicators, including responsive adjustments. - Improved overall user experience by providing real-time status updates.
mehmetkahya0 · Jan 14, 2025 · bb23e11 · bb23e11
1 parent 2d4a10b
commit bb23e11
Show file tree

Hide file tree

Showing 4 changed files with 214 additions and 11 deletions.
diff --git a/api.js b/api.js
@@ -22,7 +22,9 @@ const elements = {
     errorMessage: document.getElementById('error-message'),
     autoRefreshCheckbox: document.getElementById('auto-refresh'),
     refreshIntervalSelect: document.getElementById('refresh-interval'),
-    emailSearch: document.getElementById('email-search')
+    emailSearch: document.getElementById('email-search'),
+    statusLed: document.getElementById('status-led'), // **Added**
+    statusText: document.getElementById('status-text')  // **Added**
 };
 
 // Error handling
@@ -46,6 +48,43 @@ function setLoading(isLoading) {
     }
 }
 
+/**
+ * Updates the system status LED and text.
+ * @param {string} status - The status type (e.g., 'ONLINE', 'OFFLINE', 'LOADING').
+ */
+function updateSystemStatus(status) {
+    // Remove existing status classes
+    elements.statusLed.classList.remove('online', 'offline', 'loading');
+
+    // Add the new status class
+    elements.statusLed.classList.add(CONFIG.STATUS[status].class);
+
+    // Update the status text
+    elements.statusText.textContent = CONFIG.STATUS[status].text;
+}
+
+/**
+ * Shows the system as Online.
+ */
+function setOnline() {
+    updateSystemStatus('ONLINE');
+}
+
+/**
+ * Shows the system as Offline.
+ */
+function setOffline() {
+    updateSystemStatus('OFFLINE');
+}
+
+/**
+ * Shows the system as Loading.
+ */
+function setLoadingStatus() {
+    updateSystemStatus('LOADING');
+}
+
+
 // Get session ID
 async function getSession() {
     try {
@@ -60,6 +99,7 @@ async function getSession() {
         currentEmail = data.email_addr;
         setStoredSession(sessionId);
         setStoredEmail(currentEmail);
+        setOnline(); // **Set status to Online**
         return sessionId;
     } catch (error) {
         console.error('Error getting session:', error);

diff --git a/config.js b/config.js
@@ -15,10 +15,24 @@ const CONFIG = {
         'grr.la',
         'pokemail.net',
         'spam4.me'
-    ]
+    ],
+    STATUS: {
+        ONLINE: {
+            text: 'Online',
+            class: 'online'
+        },
+        OFFLINE: {
+            text: 'Offline',
+            class: 'offline'
+        },
+        LOADING: {
+            text: 'Loading',
+            class: 'loading'
+        }
+    }
 };
 
 // Prevent modification of config
 Object.freeze(CONFIG);
 
-export default CONFIG; 
+export default CONFIG;
diff --git a/index.html b/index.html
@@ -42,6 +42,10 @@
                  ╚═╝   ╚══════╝╚═╝     ╚═╝╚═╝         ╚═╝     ╚═╝╚═╝  ╚═╝╚═╝╚══════╝
             </pre>
         </div>
+        <div class="system-status">
+          <div id="status-led" class="status-led offline"></div>
+          <span id="status-text">Offline</span>
+        </div>
       </div>
     </header>
 
@@ -138,6 +142,11 @@
       alert("⚠️ This project is purely for educational purposes. We do not allow illegal things to be done with this project and we are not responsible for any incidents that may occur. This project uses mail.gw's API for creating temporary emails. Use it legally and responsibly ⚠️");
     }
   </script>
+
+  <script>
+    alert("Hello, If you see the failed to load message, please clicked the 'New Address' button multiple times. If you see the failed to load message again, please contact me on GitHub or LinkedIn. Thank you for using my project. ❤️. I'm still developing this project. ");
+  </script>
+
   <script src="config.js" type="module"></script>
   <script src="api.js" type="module"></script>
   <script src="theme.js" type="module"></script>

diff --git a/style.css b/style.css
@@ -55,8 +55,7 @@ body {
   flex-direction: column;
   gap: 2rem;
 }
-
-/* Header */
+/* **Header Styles** */
 header {
   text-align: center;
   padding: 2rem;
@@ -67,15 +66,109 @@ header {
   overflow: hidden;
 }
 
+/* **Header Content Styles** */
+.header-content {
+    display: flex;
+    flex-direction: column; /* Stack children vertically */
+    align-items: center;    /* Center horizontally */
+    justify-content: center; /* Center vertically */
+    padding: 2rem 0;        /* Add some vertical padding */
+    position: relative;     /* Establish a positioning context */
+}
+
+/* **ASCII Art Styles** */
 .ascii-art {
-  color: white;
-  font-size: 0.7rem;
-  line-height: 1.2;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  position: relative;
-  z-index: 1;
+    color: white;
+    font-size: 0.7rem;
+    line-height: 1.2;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    text-align: center;      /* Center the text within the container */
+    font-weight: bold;
+    padding: 1rem;           /* Add some padding around the ASCII art */
+    border-radius: 0.5rem;   /* Optional: Round the corners */
+    max-width: 100%;         /* Ensure it doesn't overflow */
+    word-wrap: break-word;   /* Handle long lines gracefully */
+    font-family: 'Courier New', Courier, monospace; /* Ensure monospace font */
+    transition: transform 0.3s ease; /* Optional: Add transition */
+}
+
+.ascii-art:hover {
+    transform: scale(1.05); /* Optional: Add hover effect */
+}
+
+/* **System Status Styles** */
+.system-status {
+    display: flex;
+    align-items: center;
+    margin-top: 1rem;        /* Space between ASCII art and status */
+}
+
+/* **Status LED Styles** */
+.status-led {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    margin-right: 8px;
+    background-color: gray; /* Default color */
+    transition: background-color 0.3s ease;
+}
+
+.status-led.online {
+    background-color: #34D399; /* Green */
+}
+
+.status-led.offline {
+    background-color: #F87171; /* Red */
+}
+
+.status-led.loading {
+    background-color: #FCD34D; /* Yellow */
+}
+
+#status-text {
+    font-size: 14px;
+    color: #374151; /* Text color */
+}
+
+
+.email-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.email-modal-content {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    width: 80%;
+    max-width: 600px;
+    position: relative;
 }
 
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+/* **Responsive Adjustments** */
+@media (max-width: 768px) {
+    .ascii-art {
+        font-size: 0.6rem; /* Adjust font size for smaller screens */
+    }
+}
 /* Theme Switch */
 .theme-switch {
   position: absolute;
@@ -465,6 +558,17 @@ footer {
   .app-container {
     padding: 1rem;
   }
+
+  .ascii-art {
+    font-size: 0.5rem;
+    padding: 0;
+    text-align: left;
+    position: relative;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+  }
+
 
   .email-controls {
     grid-template-columns: 1fr;
@@ -731,3 +835,39 @@ button:hover .fa-wand-magic-sparkles {
   filter: brightness(1.2);
   transform: rotate(-10deg) scale(1.1);
 }
+
+
+@media (max-width: 400px) {
+  .ascii-art {
+    font-size: 0.3rem !important;
+
+  }
+
+  .status-led {
+    width: 10px;
+    height: 10px;
+    font-weight: bolder;
+  }
+
+  .header-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 0 !important;
+    font-weight: bolder;
+    width: 100%;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    left: 0;
+    right: 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-weight: bolder;
+    font-size: 0.8rem;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+  }
+}