src/popup.html - develop - groupmol/s21crx

src/popup.html
165 строк4 KB
groupmol
v2.1
17 фев 2026, 15:25
17 фев 2026, 15:251ee4528
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 300px;
      padding: 9px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 14px;
    }
    h1 {
      font-size: 16px;
      margin: 0 0 15px 0;
      color: #333;
    }
    .status {
      padding: 8px 12px;
      border-radius: 6px;
      margin-bottom: 12px;
      font-size: 13px;
    }
    .status.ok {
      background: #d4edda;
      color: #155724;
    }
    .status.error {
      background: #f8d7da;
      color: #721c24;
    }
    .warning {
      background: #fff3cd;
      color: #856404;
      padding: 10px;
      border-radius: 6px;
      margin-bottom: 12px;
      font-size: 12px;
      display: none;
    }
    button {
      width: 100%;
      padding: 10px;
      margin: 5px 0;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      transition: background 0.2s;
    }
    .btn-primary {
      background: #007bff;
      color: white;
    }
    .btn-primary:hover {
      background: #0056b3;
    }
    .btn-secondary {
      background: #b3abcd;
      color: #ffffff;
    }
    .btn-secondary:hover {
      background: #8162a5;
    }
    .btn-success {
      background: #28a745;
      color: white;
    }
    .btn-success:hover {
      background: #1e7e34;
    }
    
    /* 🔔 Единый блок для настроек интервала */
    .settings-block {
      background: #f8f9fa;
      border: 1px solid #dee2e6;
      border-radius: 6px;
      padding: 10px;
      margin: 12px 0;
    }
    .settings-block .form-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .settings-block label {
      margin: 0;
      font-size: 13px;
      color: #666;
    }
    .settings-block input[type="number"] {
      flex: 0 0 40px;
      padding: 8px;
      border: 1px solid #ced4da;
      border-radius: 4px;
      font-size: 13px;
    }
    .settings-block .btn-success {
      flex: 1;
      margin: 0;
      padding: 8px 12px;
    }
    
    .info {
      background: #e7f3ff;
      padding: 10px;
      border-radius: 6px;
      font-size: 13px;
      color: #004085;
    }

    .count-info {
      margin-top: 8px;
      padding: 8px;
      background: rgb(181 230 230);
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      background-color: rgba(96, 187, 187, 1);
      background-image: radial-gradient(circle, rgba(96, 187, 187, 1) 0%, rgba(255, 255, 255, 1) 100%);
    }

    a {
      color: #007bff;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>🔔 platform.21-school.ru Монитор</h1>
  
  <div id="notificationsWarning" class="warning">
    🔕 Уведомления браузера отключены!<br>
    <a href="#" id="howToEnable">Разрешите уведомления для расширения в настройках</a>
  </div>

  <button id="openSite" class="btn-primary">🌐 Открыть сайт</button>
  
  <div id="connectionStatus" class="status">Проверка подключения...</div>
  <div id="countInfo" class="count-info">Счётчик: —</div>
  
  <div class="settings-block">
    <div class="form-row">
      <label for="interval">Интервал 🔔 (мин):</label>
      <input type="number" id="interval" min="1" max="60" value="3">
      <button id="save" class="btn-success">Сохранить</button>
    </div>
  </div>
  
  <button id="test" class="btn-secondary">🔔 Тест уведомления</button>
  
  <div class="info">
    <strong>🔔 Уведомления не приходят?</strong><br><br>
    <strong>Переустановка расширения</strong><br>
    1. Удали расширение в <a href="#" id="howToEnable2">browser://extensions/</a><br>
    2. Перезагрузи браузер<br>
    3. Установи заново через «Загрузить распакованное расширение»<br>
    4. При первом уведомлении разреши его в системном запросе
  </div>
  
  <script src="popup.js"></script>
</body>
</html>