Widget:EsoServerStatus

<!DOCTYPE html> <html lang="ru"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Статус серверов ESO</title>
   <style>
       .server-list {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           gap: 12px;
           padding: 15px;
       }

       .server-item {
           display: flex;
           align-items: center;
           gap: 8px;
       }

       .server-item.up {
       	padding: var( --space-xxs ) var( --space-xs );

border-radius: var( --border-radius-base ); background-color: var( --color-surface-2 ); color: var( --color-emphasized ); font-size: var( --font-size-small ); font-weight: var( --font-weight-medium ); line-height: 1; letter-spacing: 0.025em;

       .server-name {
           font-weight: bold;
           font-size: 14px;
           white-space: nowrap;
           color: #fff;
           font-family: Arial, sans-serif;
       }

       .status-indicator {
           width: 10px;
           height: 10px;
           border-radius: 50%;
           background: #e74c3c;
           animation: pulse 2s infinite;
           flex-shrink: 0;
       }

       .status-indicator.up {
           background: #2ecc71;
           animation: none;
       }

       @keyframes pulse {
           0% { opacity: 1; }
           50% { opacity: 0.5; }
           100% { opacity: 1; }
       }

       @media (max-width: 768px) {
           .server-list {
               gap: 8px;
               padding: 10px;
           }
           
           .server-item {
               padding: 8px 12px;
           }
           
           .server-name {
               font-size: 12px;
           }
           
           .status-indicator {
               width: 8px;
               height: 8px;
           }
       }

       @media (max-width: 480px) {
           .server-list {
               gap: 10px;
           }
       }
   </style>

</head> <body>

           Загрузка статуса серверов...

   <script>
       const serverNames = {
           'eso_eu': 'PC-EU',
           'eso_na': 'PC-NA',
           'eso_ps4_eu': 'PS4-EU',
           'eso_ps4_us': 'PS4-US',
           'eso_xbox_eu': 'Xbox EU',
           'eso_xbox_us': 'Xbox US',
           'eso_pts': 'PTS'
       };

       async function loadServerStatus() {
           const serverList = document.getElementById('serverList');
           
           try {
               const response = await fetch('https://eso-wiki.ru/api.php?action=server-status&format=json');
               
               if (!response.ok) throw new Error('Ошибка сети');
               
               const data = await response.json();
               if (data.error) throw new Error(data.error);
               
               const serverStatus = data['server-status'];
               let html = ;
               
               Object.entries(serverNames).forEach(([key, name]) => {
                   const status = serverStatus[key];
                   const isUp = status === 'UP';
                   
                   html += `

                           
                           ${name}

                   `;
               });
               
               serverList.innerHTML = html;
               
           } catch (error) {
               serverList.innerHTML = `

                       ❌ Ошибка загрузки

               `;
           }
       }

       document.addEventListener('DOMContentLoaded', loadServerStatus);
       setInterval(loadServerStatus, 60 * 1000);
   </script>

</body> </html>