From bb23e11decd3f8b43227c141cb6ae43e866eb126 Mon Sep 17 00:00:00 2001 From: Mehmet Kahya Date: Tue, 14 Jan 2025 23:25:45 +0300 Subject: [PATCH] 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. --- api.js | 42 ++++++++++++++- config.js | 18 ++++++- index.html | 9 ++++ style.css | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 214 insertions(+), 11 deletions(-) diff --git a/api.js b/api.js index 49376fa..a194869 100644 --- 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 index 5d2508a..496673d 100644 --- 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; \ No newline at end of file +export default CONFIG; \ No newline at end of file diff --git a/index.html b/index.html index 6c8a053..d3bf9fb 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,10 @@ ╚═╝ ╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝╚══════╝ +
+
+ Offline +
@@ -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 ⚠️"); } + + + diff --git a/style.css b/style.css index 463f83b..3923342 100644 --- 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; + } +}