test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rivixal</title>
    <link rel="stylesheet" href="styles/styles.css">
    <link rel="stylesheet" href="styles/mattle_styles.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="styles/fonts.css">
</head>
<body>
<header>
  <div class="header-container">
    <div class="logo">
      <img src="system/images/logo.svg" alt="Rivixal">
    </div>
  <nav>
    <ul>
      <li><a href="index.html" class="active"><i class='bx bxs-home'></i> Тест</a></li>
    </ul>
  </nav>
    </div>
</header>

  <div class="appstore-banner" style="--bg-image: url('https://cdn1.ozone.ru/s3/multimedia-t/6465976829.jpg');" data-nav-theme="dark">
  <div class="banner-top">
    <div class="banner-overlay"></div>
    <div class="badge">Сегодня: <span id="date"></span></div>
  </div>

  <div class="banner-bottom">
    <div>
    <div class="special-event">
        <strong>Случайный факт:</strong>
        <div class="fact-text" id="random-fact">Загрузка факта...</div>
    </div>
      <h1 class="title">Тестовый титул</h1>
      <p class="subtitle">Тестовый текст!</p>
    </div>

    <div class="app-info">
    <!--<img src="https://i.imgur.com/SOfLe1M.png" alt="App Icon" class="app-icon">-->
      <div class="app-text">
        <div class="app-name">Название</div>
        <div class="app-desc">Описание</div>
      </div>
      <button class="get-btn">Кнопка</button>
    </div>
  </div>
</div>

    <div class="projects-container" data-nav-theme="light">
        <div class="project-card web-projects">
            <div class="project-icon">
                <i class='bx bx-globe'></i>
            </div>
            <h3>Блок 1</h3>
            <p>Текст</p>
            <button class="project-btn">Баннер_кнопка1</button>
        </div>
        
        <div class="project-card desktop-projects">
            <div class="project-icon">
                <i class='bx bx-desktop'></i>
            </div>
            <h3>Блок 2</h3>
            <p>Текст</p>
            <button class="project-btn">Баннер_кнопка1ы</button>
        </div>
    </div>

  <main>
    <div class="test-container">
  <h1>Тест диалогов Edge+ / iOS style</h1>
  <div class="test-buttons">
    <button class="test-open-btn" onclick="showDialog('dialog-sheet')">Bottom Sheet</button>
    <button class="test-open-btn" onclick="showDialog('dialog-alert')">Alert</button>
    <button class="test-open-btn" onclick="showDialog('dialog-passcode')">Passcode</button>
    <button class="test-open-btn" onclick="showDialog('dialog-actions')">Actions list</button>
    <button class="test-open-btn" onclick="showDialog('dialog-compact')">Compact info</button>
  </div>
</div>

<!-- ============ 1. Bottom Sheet ============ -->
<div
  class="dialog dialog--sheet"
  id="dialog-sheet"
  onclick="onDialogBackdropClick(event, 'dialog-sheet')"
>
  <div class="dialog-content">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
      <span style="font-size:18px;font-weight:600;">Отправка идентификаторов устройств</span>
      <span class="close" onclick="closeDialog('dialog-sheet')">&times;</span>
    </div>
    <p style="font-size:14px;color:#6b6b6f;">
      Чтобы поделиться EID и IMEI, отсканируйте штрихкоды или удерживайте устройство возле считывателя.
    </p>

    <div class="dialog-actions" style="margin-top:20px;justify-content:flex-start;">
      <button class="dialog-btn">Поделиться</button>
      <button class="dialog-btn dialog-btn-secondary" onclick="closeDialog('dialog-sheet')">Отменить</button>
    </div>
  </div>
</div>

<!-- ============ 2. Alert ============ -->
<div
  class="dialog dialog--alert"
  id="dialog-alert"
  onclick="onDialogBackdropClick(event, 'dialog-alert')"
>
  <div class="dialog-content">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;">
      <span style="font-size:18px;font-weight:600;">Удалить приложение «Chrome»?</span>
      <span class="close" onclick="closeDialog('dialog-alert')">&times;</span>
    </div>

    <p style="font-size:14px;color:#6b6b6f;margin-bottom:18px;">
      Удаление этого приложения также приведёт к удалению его данных.
    </p>

    <div class="dialog-actions" style="justify-content:center;">
      <button class="dialog-btn dialog-btn-secondary" onclick="closeDialog('dialog-alert')">Отменить</button>
      <button class="dialog-btn" style="color:#ff3b30;" onclick="closeDialog('dialog-alert')">Удалить</button>
    </div>
  </div>
</div>

<!-- ============ 3. Passcode ============ -->
<div
  class="dialog dialog--passcode"
  id="dialog-passcode"
  onclick="onDialogBackdropClick(event, 'dialog-passcode')"
>
  <div class="dialog-content">
    <div style="display:flex;justify-content:flex-end;">
      <span class="close" onclick="closeDialog('dialog-passcode')">&times;</span>
    </div>

    <div style="text-align:center;margin-top:10px;">
      <div style="font-size:40px;margin-bottom:18px;color:#007aff;">🔒</div>
      <div class="dialog-title">Введите код-пароль</div>
      <div class="dialog-subtitle">
        Введите код-пароль, используемый для разблокировки этого устройства.
      </div>

      <div style="display:flex;justify-content:center;gap:14px;margin-top:18px;">
        <div style="width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;"></div>
        <div style="width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;"></div>
        <div style="width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;"></div>
        <div style="width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;"></div>
      </div>

      <div class="dialog-actions" style="justify-content:center;margin-top:26px;">
        <button class="dialog-btn dialog-btn-secondary" onclick="closeDialog('dialog-passcode')">Отменить</button>
      </div>
    </div>
  </div>
</div>

<!-- ============ 4. Actions list (settings) ============ -->
<div
  class="dialog dialog--actions"
  id="dialog-actions"
  onclick="onDialogBackdropClick(event, 'dialog-actions')"
>
  <div class="dialog-content">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
      <span style="font-size:17px;font-weight:600;">Сбросить настройки</span>
      <span class="close" onclick="closeDialog('dialog-actions')">&times;</span>
    </div>

    <div class="dialog-actions-list">
      <button class="dialog-actions-item">Сбросить все настройки</button>
      <button class="dialog-actions-item">Сбросить настройки сети</button>
      <button class="dialog-actions-item">Сбросить словарь клавиатуры</button>
      <button class="dialog-actions-item">Сбросить настройки «Домой»</button>
      <button class="dialog-actions-item">Сбросить геонастройки</button>
      <button class="dialog-actions-item" style="margin-top:4px;background:rgba(242,242,245,0.98);"
              onclick="closeDialog('dialog-actions')">
        Отменить
      </button>
    </div>
  </div>
</div>

<!-- ============ 5. Compact info ============ -->
<div
  class="dialog dialog--compact"
  id="dialog-compact"
  onclick="onDialogBackdropClick(event, 'dialog-compact')"
>
  <div class="dialog-content">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;">
      <span style="font-size:17px;font-weight:600;">Поделиться в режиме «Для чтения»</span>
      <span class="close" onclick="closeDialog('dialog-compact')">&times;</span>
    </div>

    <p style="font-size:14px;color:#6b6b6f;margin-bottom:16px;">
      Режим «Для чтения» передаёт только необходимые для проверки данные и скрывает лишнюю информацию.
    </p>

    <div class="dialog-actions" style="justify-content:flex-end;">
      <button class="dialog-btn dialog-btn-secondary" onclick="closeDialog('dialog-compact')">Отменить</button>
      <button class="dialog-btn" onclick="closeDialog('dialog-compact')">Поделиться</button>
    </div>
  </div>
</div>
  </main>
<div class="bottom-nav-wrapper">
  <div class="bottom-nav">
    <ul class="mobile-nav">
      <li><a href="index.html" class="active"><i class='bx bxs-home'></i><span>Тест</span></a></li>
    </ul>
  </div>
</div>


 <script src="system/scripts/dialog.js"></script>
 <script src="system/scripts/sunlight.js"></script>
 <script src="system/scripts/flashing.js"></script>
 <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
 <script src="system/scripts/mainbagde.js"></script>
 <script src="system/scripts/getDateforBadge.js"></script>
 <script src="system/scripts/getFactsforSpecialEvent.js"></script>
</body>
</html>