Update: Timeout 5m, Interval 15m, Basic Auth (Klaster1!)

server.js

@@ -10,6 +10,23 @@ const port = process.env.PORT || 3000;
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 
+// Basic Auth
+app.use((req, res, next) => {
+    // Default user 'admin' since only password was specified
+    const user = 'admin';
+    const pass = 'Klaster1!';
+
+    const b64auth = (req.headers.authorization || '').split(' ')[1] || '';
+    const [login, password] = Buffer.from(b64auth, 'base64').toString().split(':');
+
+    if (login && password && login === user && password === pass) {
+        return next();
+    }
+
+    res.set('WWW-Authenticate', 'Basic realm="Monitor Stron"');
+    res.status(401).send('Dostęp zabroniony. Wymagane logowanie.');
+});
+
 const DATA_DIR = process.env.DATA_DIR || path.join(__dirname, 'data');
 const WEBSITES_FILE = path.join(DATA_DIR, 'websites.json');
 let storageMode = process.env.DATABASE_URL ? 'db' : 'file';
@@ -24,7 +41,7 @@ const pool = storageMode === 'db'
 let websites = [];
 
 let statuses = {};
-const CHECK_INTERVAL = 60000; // 1 minute
+const CHECK_INTERVAL = 900000; // 15 minutes
 const SMTP_HOST = process.env.SMTP_HOST || 'smtp-relay.brevo.com';
 const SMTP_PORT = parseInt(process.env.SMTP_PORT || '587', 10);
 const SMTP_SECURE = process.env.SMTP_SECURE === 'true' || SMTP_PORT === 465;
@@ -395,10 +412,10 @@ async function loadWebsites() {
 async function checkWebsite(site) {
     try {
         const start = Date.now();
-        const response = await axios.get(site.url, { timeout: 30000 });
+        const response = await axios.get(site.url, { timeout: 300000 }); // 5 minutes
         const duration = Date.now() - start;
         const newStatus = response.status === 200 ? 'UP' : 'DOWN';
-        
+
         updateStatus(site, newStatus, response.status, duration, null);
     } catch (error) {
         const status = error.code === 'ECONNABORTED' ? 'TIMEOUT' : 'DOWN';
@@ -410,17 +427,17 @@ async function checkWebsite(site) {
 function updateStatus(site, newStatus, statusCode, duration, errorMsg) {
     const now = new Date();
     const prevStatus = statuses[site.url];
-    
-    let statusChangedAt = now;
-    if (prevStatus && prevStatus.status === newStatus) {
-        statusChangedAt = prevStatus.statusChangedAt;
-    }
-
-    statuses[site.url] = {
-        name: site.name,
-        url: site.url,
-        status: newStatus,
-        statusCode: statusCode,
+
+    let statusChangedAt = now;
+    if (prevStatus && prevStatus.status === newStatus) {
+        statusChangedAt = prevStatus.statusChangedAt;
+    }
+
+    statuses[site.url] = {
+        name: site.name,
+        url: site.url,
+        status: newStatus,
+        statusCode: statusCode,
         responseTime: duration,
         lastChecked: now,
         statusChangedAt: statusChangedAt,
@@ -434,23 +451,23 @@ function updateStatus(site, newStatus, statusCode, duration, errorMsg) {
         });
     }
 }
-
+
 async function checkAllWebsites() {
     console.log('Checking websites...');
     await loadWebsites();
     await Promise.all(websites.map(site => checkWebsite(site)));
     console.log('Check complete.');
 }
-
+
 // API endpoint to add a new website
 app.post('/api/sites', async (req, res) => {
     const { url } = req.body;
     if (!url) {
         return res.status(400).json({ error: 'URL is required' });
-    }
-
-    // Basic URL validation
-    let validUrl = url;
+    }
+
+    // Basic URL validation
+    let validUrl = url;
     if (!validUrl.startsWith('http')) {
         validUrl = 'https://' + validUrl;
     }
@@ -476,7 +493,7 @@ app.post('/api/sites', async (req, res) => {
 
         // Initial check for the new site
         checkWebsite(newSite);
-        
+
         res.json({ success: true, site: newSite });
     } catch (err) {
         console.error('Error saving website:', err);
@@ -563,66 +580,66 @@ async function start() {
 }
 
 start();
-
-function formatDuration(ms) {
-    const seconds = Math.floor((ms / 1000) % 60);
-    const minutes = Math.floor((ms / (1000 * 60)) % 60);
-    const hours = Math.floor((ms / (1000 * 60 * 60)) % 24);
-    const days = Math.floor(ms / (1000 * 60 * 60 * 24));
-
-    const parts = [];
-    if (days > 0) parts.push(`${days}d`);
-    if (hours > 0) parts.push(`${hours}h`);
-    if (minutes > 0) parts.push(`${minutes} min`);
-    if (seconds > 0) parts.push(`${seconds} sec`);
-    
-    return parts.length > 0 ? parts.join(', ') : '0 sec';
-}
-
-app.get('/', (req, res) => {
-    let html = `
-    <!DOCTYPE html>
-    <html lang="pl">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Monitor Stron</title>
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
-        <style>
-            :root {
-                --bg-color: #1a1e23;
-                --card-bg: #22262b;
-                --text-primary: #ecf0f1;
-                --text-secondary: #95a5a6;
-                --success-color: #2ecc71;
-                --danger-color: #e74c3c;
-                --warning-color: #f1c40f;
-                --border-color: #2c3e50;
-                --input-bg: #2c3e50;
-            }
-            body { 
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-                background-color: var(--bg-color); 
-                color: var(--text-primary); 
-                margin: 0; 
-                padding: 40px 20px;
-            }
-            .container { max-width: 900px; margin: 0 auto; }
-            
-            h1 { text-align: center; margin-bottom: 30px; font-weight: 300; letter-spacing: 1px; }
-            
-            .controls {
-                display: flex;
-                gap: 15px;
-                margin-bottom: 20px;
-                flex-wrap: wrap;
-            }
-            
-            .search-box {
-                flex: 1;
-                position: relative;
-            }
-            
+
+function formatDuration(ms) {
+    const seconds = Math.floor((ms / 1000) % 60);
+    const minutes = Math.floor((ms / (1000 * 60)) % 60);
+    const hours = Math.floor((ms / (1000 * 60 * 60)) % 24);
+    const days = Math.floor(ms / (1000 * 60 * 60 * 24));
+
+    const parts = [];
+    if (days > 0) parts.push(`${days}d`);
+    if (hours > 0) parts.push(`${hours}h`);
+    if (minutes > 0) parts.push(`${minutes} min`);
+    if (seconds > 0) parts.push(`${seconds} sec`);
+
+    return parts.length > 0 ? parts.join(', ') : '0 sec';
+}
+
+app.get('/', (req, res) => {
+    let html = `
+    <!DOCTYPE html>
+    <html lang="pl">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Monitor Stron</title>
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+        <style>
+            :root {
+                --bg-color: #1a1e23;
+                --card-bg: #22262b;
+                --text-primary: #ecf0f1;
+                --text-secondary: #95a5a6;
+                --success-color: #2ecc71;
+                --danger-color: #e74c3c;
+                --warning-color: #f1c40f;
+                --border-color: #2c3e50;
+                --input-bg: #2c3e50;
+            }
+            body { 
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+                background-color: var(--bg-color); 
+                color: var(--text-primary); 
+                margin: 0; 
+                padding: 40px 20px;
+            }
+            .container { max-width: 900px; margin: 0 auto; }
+            
+            h1 { text-align: center; margin-bottom: 30px; font-weight: 300; letter-spacing: 1px; }
+            
+            .controls {
+                display: flex;
+                gap: 15px;
+                margin-bottom: 20px;
+                flex-wrap: wrap;
+            }
+            
+            .search-box {
+                flex: 1;
+                position: relative;
+            }
+            
             .add-box {
                 flex: 1;
                 display: flex;
@@ -645,184 +662,184 @@ app.get('/', (req, res) => {
             .btn-status:hover {
                 background-color: #2980b9;
             }
-            
-            input {
-                width: 100%;
-                padding: 12px 15px;
-                border-radius: 8px;
-                border: 1px solid var(--border-color);
-                background-color: var(--input-bg);
-                color: var(--text-primary);
-                font-size: 14px;
-                box-sizing: border-box;
-            }
-            
-            input:focus {
-                outline: none;
-                border-color: var(--success-color);
-            }
-            
-            .btn-add {
-                padding: 0 20px;
-                background-color: var(--success-color);
-                color: white;
-                border: none;
-                border-radius: 8px;
-                cursor: pointer;
-                font-weight: 600;
-                transition: background 0.2s;
-                white-space: nowrap;
-            }
-            
-            .btn-add:hover { background-color: #27ae60; }
-            
-            .monitor-list {
-                display: flex;
-                flex-direction: column;
-                gap: 15px;
-            }
-            
-            .monitor-card {
-                background-color: var(--card-bg);
-                border: 1px solid var(--border-color);
-                border-radius: 8px;
-                padding: 15px 20px;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                transition: transform 0.2s;
-            }
-            
-            .monitor-card:hover {
-                transform: translateY(-2px);
-                border-color: #34495e;
-            }
-            
-            .card-left {
-                display: flex;
-                align-items: center;
-                gap: 15px;
-            }
-            
-            .status-icon {
-                font-size: 24px;
-            }
-            .status-up { color: var(--success-color); }
-            .status-down { color: var(--danger-color); }
-            
-            .site-details {
-                display: flex;
-                flex-direction: column;
-            }
-            
-            .site-name {
-                font-size: 16px;
-                font-weight: 600;
-                color: var(--text-primary);
-                text-decoration: none;
-                margin-bottom: 4px;
-            }
-            
-            .site-name:hover { text-decoration: underline; }
-            
-            .site-meta {
-                font-size: 12px;
-                color: var(--text-secondary);
-                display: flex;
-                align-items: center;
-                gap: 8px;
-            }
-            
-            .badge {
-                background: #2c3e50;
-                padding: 2px 6px;
-                border-radius: 4px;
-                font-weight: 600;
-                font-size: 10px;
-                letter-spacing: 0.5px;
-            }
-            
-            .card-right {
-                color: var(--text-secondary);
-                font-size: 14px;
-            }
-            
-            .refresh-btn {
-                position: fixed;
-                bottom: 30px;
-                right: 30px;
-                background: var(--success-color);
-                color: white;
-                border: none;
-                border-radius: 50%;
-                width: 50px;
-                height: 50px;
-                cursor: pointer;
-                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-                font-size: 20px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                transition: background 0.3s;
-            }
-            .refresh-btn:hover { background-color: #27ae60; }
-
-            /* Dropdown Menu Styles */
-            .menu-container {
-                position: relative;
-                display: inline-block;
-            }
-            
-            .menu-btn {
-                background: none;
-                border: none;
-                color: var(--text-secondary);
-                cursor: pointer;
-                padding: 5px;
-                font-size: 16px;
-            }
-            
-            .menu-btn:hover { color: var(--text-primary); }
-            
-            .dropdown-content {
-                display: none;
-                position: absolute;
-                right: 0;
-                top: 100%;
-                background-color: var(--card-bg);
-                min-width: 120px;
-                box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-                z-index: 1;
-                border: 1px solid var(--border-color);
-                border-radius: 4px;
-            }
-            
-            .dropdown-content button {
-                color: var(--text-primary);
-                padding: 10px 16px;
-                text-decoration: none;
-                display: block;
-                width: 100%;
-                text-align: left;
-                background: none;
-                border: none;
-                cursor: pointer;
-                font-size: 14px;
-            }
-            
-            .dropdown-content button:hover {
-                background-color: #34495e;
-            }
-            
-            .show-menu { display: block; }
-
-        </style>
-        <meta http-equiv="refresh" content="30">
-    </head>
-    <body>
-        <div class="container">
-            <h1>Monitor Statusu Stron (${websites.length})</h1>
-            
+            
+            input {
+                width: 100%;
+                padding: 12px 15px;
+                border-radius: 8px;
+                border: 1px solid var(--border-color);
+                background-color: var(--input-bg);
+                color: var(--text-primary);
+                font-size: 14px;
+                box-sizing: border-box;
+            }
+            
+            input:focus {
+                outline: none;
+                border-color: var(--success-color);
+            }
+            
+            .btn-add {
+                padding: 0 20px;
+                background-color: var(--success-color);
+                color: white;
+                border: none;
+                border-radius: 8px;
+                cursor: pointer;
+                font-weight: 600;
+                transition: background 0.2s;
+                white-space: nowrap;
+            }
+            
+            .btn-add:hover { background-color: #27ae60; }
+            
+            .monitor-list {
+                display: flex;
+                flex-direction: column;
+                gap: 15px;
+            }
+            
+            .monitor-card {
+                background-color: var(--card-bg);
+                border: 1px solid var(--border-color);
+                border-radius: 8px;
+                padding: 15px 20px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                transition: transform 0.2s;
+            }
+            
+            .monitor-card:hover {
+                transform: translateY(-2px);
+                border-color: #34495e;
+            }
+            
+            .card-left {
+                display: flex;
+                align-items: center;
+                gap: 15px;
+            }
+            
+            .status-icon {
+                font-size: 24px;
+            }
+            .status-up { color: var(--success-color); }
+            .status-down { color: var(--danger-color); }
+            
+            .site-details {
+                display: flex;
+                flex-direction: column;
+            }
+            
+            .site-name {
+                font-size: 16px;
+                font-weight: 600;
+                color: var(--text-primary);
+                text-decoration: none;
+                margin-bottom: 4px;
+            }
+            
+            .site-name:hover { text-decoration: underline; }
+            
+            .site-meta {
+                font-size: 12px;
+                color: var(--text-secondary);
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+            
+            .badge {
+                background: #2c3e50;
+                padding: 2px 6px;
+                border-radius: 4px;
+                font-weight: 600;
+                font-size: 10px;
+                letter-spacing: 0.5px;
+            }
+            
+            .card-right {
+                color: var(--text-secondary);
+                font-size: 14px;
+            }
+            
+            .refresh-btn {
+                position: fixed;
+                bottom: 30px;
+                right: 30px;
+                background: var(--success-color);
+                color: white;
+                border: none;
+                border-radius: 50%;
+                width: 50px;
+                height: 50px;
+                cursor: pointer;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                font-size: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: background 0.3s;
+            }
+            .refresh-btn:hover { background-color: #27ae60; }
+
+            /* Dropdown Menu Styles */
+            .menu-container {
+                position: relative;
+                display: inline-block;
+            }
+            
+            .menu-btn {
+                background: none;
+                border: none;
+                color: var(--text-secondary);
+                cursor: pointer;
+                padding: 5px;
+                font-size: 16px;
+            }
+            
+            .menu-btn:hover { color: var(--text-primary); }
+            
+            .dropdown-content {
+                display: none;
+                position: absolute;
+                right: 0;
+                top: 100%;
+                background-color: var(--card-bg);
+                min-width: 120px;
+                box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+                z-index: 1;
+                border: 1px solid var(--border-color);
+                border-radius: 4px;
+            }
+            
+            .dropdown-content button {
+                color: var(--text-primary);
+                padding: 10px 16px;
+                text-decoration: none;
+                display: block;
+                width: 100%;
+                text-align: left;
+                background: none;
+                border: none;
+                cursor: pointer;
+                font-size: 14px;
+            }
+            
+            .dropdown-content button:hover {
+                background-color: #34495e;
+            }
+            
+            .show-menu { display: block; }
+
+        </style>
+        <meta http-equiv="refresh" content="30">
+    </head>
+    <body>
+        <div class="container">
+            <h1>Monitor Statusu Stron (${websites.length})</h1>
+            
             <div class="controls">
                 <div class="search-box">
                     <input type="text" id="searchInput" placeholder="Szukaj domeny...">
@@ -833,163 +850,163 @@ app.get('/', (req, res) => {
                 </div>
                 <button class="btn-status" onclick="sendStatusEmail()">Wyślij status mailem</button>
             </div>
-
-            <div class="monitor-list" id="monitorList">
-    `;
-
-    // Reverse websites to show newest first, or keep order? Let's keep order from JSON.
-    for (const site of websites) {
-        const status = statuses[site.url];
-        let cardHtml = '';
-        
-        if (!status) {
-            // Pending state
-            cardHtml = `
-            <div class="monitor-card" data-name="${site.name}">
-                <div class="card-left">
-                    <i class="fas fa-circle-notch fa-spin status-icon" style="color: #95a5a6;"></i>
-                    <div class="site-details">
-                        <a href="${site.url}" target="_blank" class="site-name">${site.name}</a>
-                        <div class="site-meta">
-                            <span class="badge">HTTP</span>
-                            <span>Oczekiwanie...</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="card-right">
-                    <div class="menu-container">
-                        <button class="menu-btn" onclick="toggleMenu('${site.url}')"><i class="fas fa-ellipsis-h"></i></button>
-                        <div id="menu-${btoa(site.url)}" class="dropdown-content">
-                            <button onclick="deleteWebsite('${site.url}')"><i class="fas fa-trash-alt" style="margin-right:8px;color:#e74c3c"></i> Usuń</button>
-                        </div>
-                    </div>
-                </div>
-            </div>`;
-        } else {
-            const isUp = status.status === 'UP';
-            const iconClass = isUp ? 'fa-arrow-circle-up status-up' : 'fa-exclamation-circle status-down';
-            const statusLabel = isUp ? 'Up' : (status.error ? 'Down' : 'Issue');
-            const duration = formatDuration(new Date() - new Date(status.statusChangedAt));
-            
-            cardHtml = `
-            <div class="monitor-card" data-name="${status.name}">
-                <div class="card-left">
-                    <i class="fas ${iconClass} status-icon"></i>
-                    <div class="site-details">
-                        <a href="${status.url}" target="_blank" class="site-name">${status.name}</a>
-                        <div class="site-meta">
-                            <span class="badge">HTTP</span>
-                            <span style="color: ${isUp ? '#2ecc71' : '#e74c3c'}">${statusLabel}</span>
-                            <span>${duration}</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="card-right">
-                    <span title="Response Time">${status.responseTime}ms</span>
-                    <span style="margin: 0 10px; color: #34495e;">|</span>
-                    <div class="menu-container">
-                        <button class="menu-btn" onclick="toggleMenu('${status.url}')"><i class="fas fa-ellipsis-h"></i></button>
-                        <div id="menu-${btoa(status.url)}" class="dropdown-content">
-                            <button onclick="deleteWebsite('${status.url}')"><i class="fas fa-trash-alt" style="margin-right:8px;color:#e74c3c"></i> Usuń</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            `;
-        }
-        html += cardHtml;
-    }
-
-    html += `
-            </div>
-        </div>
-        <button class="refresh-btn" onclick="location.reload()"><i class="fas fa-sync-alt"></i></button>
-
-        <script>
-            // Search Functionality
-            document.getElementById('searchInput').addEventListener('keyup', function() {
-                const searchValue = this.value.toLowerCase();
-                const cards = document.querySelectorAll('.monitor-card');
-                
-                cards.forEach(card => {
-                    const siteName = card.getAttribute('data-name').toLowerCase();
-                    if (siteName.includes(searchValue)) {
-                        card.style.display = 'flex';
-                    } else {
-                        card.style.display = 'none';
-                    }
-                });
-            });
-
-            // Add Website Functionality
-            async function addWebsite() {
-                const urlInput = document.getElementById('addUrlInput');
-                const url = urlInput.value.trim();
-                
-                if (!url) return alert('Wprowadź URL');
-                
-                try {
-                    const response = await fetch('/api/sites', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ url })
-                    });
-                    
-                    const data = await response.json();
-                    
-                    if (response.ok) {
-                        urlInput.value = '';
-                        location.reload(); // Reload to show new site
-                    } else {
-                        alert(data.error || 'Błąd dodawania strony');
-                    }
-                } catch (error) {
-                    console.error('Error:', error);
-                    alert('Wystąpił błąd podczas dodawania strony');
-                }
-            }
-
-            // Menu Functionality
-            function toggleMenu(url) {
-                const menuId = 'menu-' + btoa(url);
-                const menu = document.getElementById(menuId);
-                
-                // Close all other menus
-                document.querySelectorAll('.dropdown-content').forEach(m => {
-                    if (m.id !== menuId) m.classList.remove('show-menu');
-                });
-                
-                menu.classList.toggle('show-menu');
-            }
-
-            // Close menu when clicking outside
-            window.onclick = function(event) {
-                if (!event.target.matches('.menu-btn') && !event.target.matches('.menu-btn i')) {
-                    document.querySelectorAll('.dropdown-content').forEach(m => {
-                        m.classList.remove('show-menu');
-                    });
-                }
-            }
-
+
+            <div class="monitor-list" id="monitorList">
+    `;
+
+    // Reverse websites to show newest first, or keep order? Let's keep order from JSON.
+    for (const site of websites) {
+        const status = statuses[site.url];
+        let cardHtml = '';
+
+        if (!status) {
+            // Pending state
+            cardHtml = `
+            <div class="monitor-card" data-name="${site.name}">
+                <div class="card-left">
+                    <i class="fas fa-circle-notch fa-spin status-icon" style="color: #95a5a6;"></i>
+                    <div class="site-details">
+                        <a href="${site.url}" target="_blank" class="site-name">${site.name}</a>
+                        <div class="site-meta">
+                            <span class="badge">HTTP</span>
+                            <span>Oczekiwanie...</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-right">
+                    <div class="menu-container">
+                        <button class="menu-btn" onclick="toggleMenu('${site.url}')"><i class="fas fa-ellipsis-h"></i></button>
+                        <div id="menu-${btoa(site.url)}" class="dropdown-content">
+                            <button onclick="deleteWebsite('${site.url}')"><i class="fas fa-trash-alt" style="margin-right:8px;color:#e74c3c"></i> Usuń</button>
+                        </div>
+                    </div>
+                </div>
+            </div>`;
+        } else {
+            const isUp = status.status === 'UP';
+            const iconClass = isUp ? 'fa-arrow-circle-up status-up' : 'fa-exclamation-circle status-down';
+            const statusLabel = isUp ? 'Up' : (status.error ? 'Down' : 'Issue');
+            const duration = formatDuration(new Date() - new Date(status.statusChangedAt));
+
+            cardHtml = `
+            <div class="monitor-card" data-name="${status.name}">
+                <div class="card-left">
+                    <i class="fas ${iconClass} status-icon"></i>
+                    <div class="site-details">
+                        <a href="${status.url}" target="_blank" class="site-name">${status.name}</a>
+                        <div class="site-meta">
+                            <span class="badge">HTTP</span>
+                            <span style="color: ${isUp ? '#2ecc71' : '#e74c3c'}">${statusLabel}</span>
+                            <span>${duration}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-right">
+                    <span title="Response Time">${status.responseTime}ms</span>
+                    <span style="margin: 0 10px; color: #34495e;">|</span>
+                    <div class="menu-container">
+                        <button class="menu-btn" onclick="toggleMenu('${status.url}')"><i class="fas fa-ellipsis-h"></i></button>
+                        <div id="menu-${btoa(status.url)}" class="dropdown-content">
+                            <button onclick="deleteWebsite('${status.url}')"><i class="fas fa-trash-alt" style="margin-right:8px;color:#e74c3c"></i> Usuń</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            `;
+        }
+        html += cardHtml;
+    }
+
+    html += `
+            </div>
+        </div>
+        <button class="refresh-btn" onclick="location.reload()"><i class="fas fa-sync-alt"></i></button>
+
+        <script>
+            // Search Functionality
+            document.getElementById('searchInput').addEventListener('keyup', function() {
+                const searchValue = this.value.toLowerCase();
+                const cards = document.querySelectorAll('.monitor-card');
+                
+                cards.forEach(card => {
+                    const siteName = card.getAttribute('data-name').toLowerCase();
+                    if (siteName.includes(searchValue)) {
+                        card.style.display = 'flex';
+                    } else {
+                        card.style.display = 'none';
+                    }
+                });
+            });
+
+            // Add Website Functionality
+            async function addWebsite() {
+                const urlInput = document.getElementById('addUrlInput');
+                const url = urlInput.value.trim();
+                
+                if (!url) return alert('Wprowadź URL');
+                
+                try {
+                    const response = await fetch('/api/sites', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ url })
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (response.ok) {
+                        urlInput.value = '';
+                        location.reload(); // Reload to show new site
+                    } else {
+                        alert(data.error || 'Błąd dodawania strony');
+                    }
+                } catch (error) {
+                    console.error('Error:', error);
+                    alert('Wystąpił błąd podczas dodawania strony');
+                }
+            }
+
+            // Menu Functionality
+            function toggleMenu(url) {
+                const menuId = 'menu-' + btoa(url);
+                const menu = document.getElementById(menuId);
+                
+                // Close all other menus
+                document.querySelectorAll('.dropdown-content').forEach(m => {
+                    if (m.id !== menuId) m.classList.remove('show-menu');
+                });
+                
+                menu.classList.toggle('show-menu');
+            }
+
+            // Close menu when clicking outside
+            window.onclick = function(event) {
+                if (!event.target.matches('.menu-btn') && !event.target.matches('.menu-btn i')) {
+                    document.querySelectorAll('.dropdown-content').forEach(m => {
+                        m.classList.remove('show-menu');
+                    });
+                }
+            }
+
             // Delete Website Functionality
             async function deleteWebsite(url) {
                 if (!confirm('Czy na pewno chcesz usunąć tę stronę z monitorowania?')) return;
 
                 try {
-                    const response = await fetch('/api/sites', {
-                        method: 'DELETE',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ url })
-                    });
-                    
-                    const data = await response.json();
-                    
-                    if (response.ok) {
-                        location.reload(); // Reload to update list
-                    } else {
-                        alert(data.error || 'Błąd usuwania strony');
-                    }
-                } catch (error) {
+                    const response = await fetch('/api/sites', {
+                        method: 'DELETE',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ url })
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (response.ok) {
+                        location.reload(); // Reload to update list
+                    } else {
+                        alert(data.error || 'Błąd usuwania strony');
+                    }
+                } catch (error) {
                     console.error('Error:', error);
                     alert('Wystąpił błąd podczas usuwania strony');
                 }