Страница: меню-окошко в шапке, свой экран «О приложении»

apk-webview/app/src/main/assets/index.html

@@ -55,6 +55,44 @@
   .fullbtn:hover{border-color:var(--accent2)}
   .fullbtn .chev{float:right;transition:.2s;color:var(--muted)}
   .fullbtn.open .chev{transform:rotate(180deg)}
+  .fulltitle{display:none;margin:0;padding:14px 12px 2px;font-size:16px;font-weight:700}
+
+  /* строка заголовка: стрелка назад слева, меню справа, название ровно по центру */
+  .headwrap{position:relative}
+  .headrow{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px}
+  .headrow h1{text-align:center;margin:0;min-width:0}
+  .iconbtn{display:none;background:var(--card2);border:1px solid var(--line);
+           color:var(--txt);border-radius:10px;width:38px;height:38px;
+           font-size:22px;line-height:1;font-family:inherit;cursor:pointer;
+           align-items:center;justify-content:center;padding:0}
+  body.app .iconbtn,body.about .iconbtn{display:inline-flex}
+  /* на главном экране стрелки нет, но место под неё оставляем, иначе съедет центр */
+  body.app .iconbtn.back{visibility:hidden}
+  /* троеточие в круглой кнопке приподнято: рамка остаётся на одной линии с названием */
+  #navMenu{padding-bottom:7px}
+  .iconbtn:active{border-color:var(--accent2)}
+
+  /* выпадающее окошко: висит поверх содержимого, прижато к кнопке меню */
+  .menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;
+        width:min(260px,100%);background:var(--card);border:1px solid var(--line);
+        border-radius:14px;overflow:hidden;margin:0;
+        box-shadow:0 18px 44px rgba(0,0,0,.6)}
+  .menu[hidden]{display:none}
+  .menuitem{display:block;width:100%;text-align:left;padding:13px 14px;border:0;
+            background:transparent;color:var(--txt);font-size:15px;font-weight:600;
+            font-family:inherit;cursor:pointer}
+  .menuitem:hover{background:var(--card2)}
+
+  /* экран «О приложении» */
+  .aboutcard{display:none;background:var(--card);border:1px solid var(--line);
+         border-radius:14px;padding:16px;margin-bottom:10px}
+  body.about .aboutcard{display:block}
+  body.about .pickers,body.about .where,body.about .dir,
+  body.about #fullTable,body.about .fullbtn{display:none}
+  .aboutcard h2{margin:0 0 4px;font-size:17px}
+  .aboutcard .ver{color:var(--muted);font-size:14px;margin-bottom:12px}
+  .aboutcard p{margin:0 0 10px;font-size:14px;line-height:1.5}
+  .aboutcard p.muted{color:var(--muted);font-size:13px}
 
   .tablecard{background:var(--card);border:1px solid var(--line);border-radius:14px;
              overflow:hidden;display:none;margin-bottom:8px}
@@ -85,7 +123,17 @@
 <body>
 <div class="wrap">
   <header>
-    <h1>Автобус №127</h1>
+    <div class="headwrap">
+      <div class="headrow">
+        <button class="iconbtn back" id="navBack" aria-label="Назад">‹</button>
+        <h1>Автобус №127</h1>
+        <button class="iconbtn" id="navMenu" aria-label="Меню">⋮</button>
+      </div>
+
+      <nav class="menu" id="menuBox" hidden>
+        <button class="menuitem" id="mAbout">О приложении</button>
+      </nav>
+    </div>
     <div class="sub">Кандалакша — Полярные Зори — Зашеек</div>
     <div class="clock" id="clock">--:--:-- <small>МСК</small></div>
     <div class="day" id="dayBadge"></div>
@@ -103,6 +151,7 @@
 
   <button class="fullbtn" id="fullBtn">Полное расписание <span class="chev">▾</span></button>
   <section class="tablecard" id="fullTable">
+    <h2 class="fulltitle">Полное расписание</h2>
     <div class="days" id="dayPick">
       <button data-day="weekday"  class="active">Будни</button>
       <button data-day="saturday">Суббота</button>
@@ -117,6 +166,18 @@
     <div id="tableBody"></div>
   </section>
 
+  <section class="aboutcard" id="aboutBox">
+    <h2>О приложении</h2>
+    <div class="ver" id="aboutVer"></div>
+    <p>Расписание автобуса №127 по маршруту Кандалакша — Полярные Зори — Зашеек.</p>
+    <p>Ближайшие рейсы считаются по московскому времени и обновляются каждые 30 секунд.
+       Полное расписание раскрывается прямо на этом экране — кнопкой под списком рейсов,
+       с переключением между буднями, субботой и воскресеньем.</p>
+    <p class="muted">Расписание действует с 30.09.2020. Время московское (МСК).</p>
+    <p class="muted">Пуш-уведомления приходят через RuStore Push — для этого нужен
+       установленный и авторизованный RuStore на устройстве.</p>
+  </section>
+
   <footer>Расписание действует с 30.09.2020 · время московское (МСК)</footer>
 </div>
 
@@ -346,6 +407,35 @@ document.getElementById("fullBtn").addEventListener("click",()=>{
   b.classList.toggle("open", !open);
 });
 
+// Режим показа задаётся якорью в адресе:
+//   (пусто) — браузер;
+//   #app    — главный экран приложения;
+//   #about  — окно «О приложении».
+// В приложении (не в браузере) страница дёргает нативный код через объект Bus.
+const MODE = location.hash.replace("#","") || "web";
+const NATIVE = MODE !== "web" && typeof Bus !== "undefined";
+
+document.body.classList.add(MODE);
+if (MODE === "about" && NATIVE) {
+  // версию берём из приложения, чтобы не расходилась со сборкой
+  const v = document.getElementById("aboutVer");
+  if (Bus.version && Bus.version()) v.textContent = "Версия " + Bus.version();
+}
+
+if (NATIVE) {
+  const menuBox = document.getElementById("menuBox");
+  const closeMenu = () => { menuBox.hidden = true; };
+  document.getElementById("navMenu").addEventListener("click",e=>{
+    e.stopPropagation();
+    menuBox.hidden = !menuBox.hidden;
+  });
+  document.getElementById("navBack").addEventListener("click",()=>Bus.goBack());
+  document.getElementById("mAbout").addEventListener("click",()=>Bus.openAbout());
+  document.addEventListener("click",e=>{
+    if (!e.target.closest(".menu") && !e.target.closest("#navMenu")) closeMenu();
+  });
+}
+
 let activeDay = todayKey();   // по умолчанию — реальный день недели
 selectDay(activeDay);
 tickClock(); renderDay(); render();