Add license file

LICENSE

@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) 2026 ettore.dreucci
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 
+associated documentation files (the "Software"), to deal in the Software without restriction, including 
+without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
+copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the 
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial 
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 
+LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO 
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE 
+USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -2,12 +2,14 @@
 
 # Lagomare Gates
 
-A web-based gate access management and control system. Authorized users can remotely open physical car and pedestrian gates via a mobile-friendly PWA. An admin dashboard provides full management of gates, access codes, and users.
+A web-based gate access management and control system. Authorized users can remotely open physical gates via a mobile-friendly PWA. An admin dashboard provides full management of gates, access codes, and users.
 
 ## Features
 
-- **Keypass authentication** — users authenticate with an access code; each keypass can have a per-gate allowlist and an optional expiration date
+- **Keypass authentication** — users authenticate with an access code; each keypass can have a per-gate allowlist, an optional expiration date, and an optional time/day-of-week schedule
-- **Remote gate control** — integrates with [AVConnect](https://www.avconnect.it) to trigger gate macros
+- **Keypass schedules** — restrict a keypass to specific days of the week and/or a time window (e.g. Monday–Friday 08:00–18:00, server local time)
+- **Remote gate control** — integrates with [AVConnect](https://www.avconnect.it) and [Shelly Cloud](https://shelly.cloud) to trigger gate macros/relays
+- **Gate icons** — each gate can be assigned any UTF-8 character or emoji as its icon, displayed on the user app button and keypass selector
 - **Role-based admin panel** — two roles (`admin`, `manager`) with different permission levels
 - **Two-factor authentication (TOTP)** — admins can enable app-based 2FA (Google Authenticator, Authy, etc.) on their account
 - **Access audit log** — every open attempt is logged with timestamp, keypass, gate, IP, and result; filterable and paginated
@@ -26,7 +28,7 @@ A web-based gate access management and control system. Authorized users can remo
 | Auth | JWT (HS256) + bcrypt |
 | 2FA | TOTP (RFC 6238) via pyotp |
 | Credential storage | Fernet symmetric encryption |
-| Gate integration | AVConnect HTTP API |
+| Gate integration | AVConnect HTTP API / Shelly Cloud API |
 | Notifications | Telegram Bot API |
 | QR generation | qrcode + Pillow |
 | Frontend | Vanilla JS PWA |
@@ -51,8 +53,9 @@ src/
 │   ├── stats.py          # Access log / statistics (paginated, filtered)
 │   └── telegram.py       # Telegram notification configuration
 ├── services/
-│   ├── avconnect.py      # AVConnect session management and macro execution
+│   ├── avconnect.py      # AVConnect API client
 │   ├── gates.py          # Gate open orchestration
+|   |── shelly.py         # Shelly Cloud API client
 │   └── telegram.py       # Telegram Bot API client
 └── static/               # Frontend PWA (index.html, admin.html, JS, CSS)
 data/
@@ -91,7 +94,7 @@ data/
 |---|---|---|
 | GET | `/api/admin/keypasses` | List all keypasses |
 | POST | `/api/admin/keypasses` | Create a keypass |
-| PATCH | `/api/admin/keypasses/{kp_id}` | Update a keypass |
+| PATCH | `/api/admin/keypasses/{kp_id}` | Update a keypass (description, expiry, gates, schedule) |
 | DELETE | `/api/admin/keypasses/{kp_id}` | Revoke a keypass |
 | GET | `/api/admin/keypasses/{kp_id}/qr` | Download QR code PNG for a keypass |
 
@@ -111,8 +114,10 @@ data/
 
 | Method | Endpoint | Description |
 |---|---|---|
-| GET | `/api/admin/credentials` | View stored credentials |
+| GET | `/api/admin/credentials/avconnect` | View stored AVConnect credentials |
-| PUT | `/api/admin/credentials` | Create or update credentials |
+| PUT | `/api/admin/credentials/avconnect` | Create or update AVConnect credentials |
+| GET | `/api/admin/credentials/shelly` | View stored Shelly Cloud credentials |
+| PUT | `/api/admin/credentials/shelly` | Create or update Shelly Cloud credentials |
 | GET | `/api/admin/credentials/mock` | Get mock mode status |
 | PUT | `/api/admin/credentials/mock` | Enable or disable mock mode |
 
@@ -217,14 +222,41 @@ The application is then available at:
 
 ## AVConnect Integration
 
-Gates are controlled through the AVConnect platform. Each gate is mapped to an AVConnect *macro ID*. When a gate open request is received, the service:
+Gates are controlled through one of two supported API providers.
+
+### AVConnect
+
+Each gate is mapped to an AVConnect *macro ID*. When a gate open request is received, the service:
 
 1. Authenticates with AVConnect using the stored credentials (session is cached in the database)
 2. Executes the configured macro for the gate
 
 Credentials (password) are stored encrypted in the database using Fernet symmetric encryption derived from `SECRET_KEY`.
 
-**Mock mode** — when enabled via the admin dashboard, gate open requests always succeed without contacting AVConnect. Useful for testing.
+### Shelly Cloud
+
+Each gate is mapped to a Shelly *device ID*. The service calls the Shelly Cloud API with the stored auth key to activate the device's relay.
+
+The Shelly server URI and auth key are stored encrypted. Configure them under **Admin → Credentials → Shelly Cloud**.
+
+**Mock mode** — when enabled via the admin dashboard, gate open requests always succeed without contacting any external API. Useful for testing.
+
+## Keypass Schedules
+
+In addition to an expiry date and a per-gate allowlist, each keypass can be restricted to a configurable time window:
+
+- **Days of the week** — select any combination of Mon–Sun. If no day is checked the restriction applies on any day.
+- **Time window** — a `From` / `To` time in 24-hour format (server local time). Both values must be provided together.
+
+When a keypass with a schedule is used outside its allowed window the API returns **HTTP 403** (`Keypass is not valid today` / `Keypass is not valid at this time`) and the gate will not open. The restriction is enforced in `require_keypass` in `src/core/dependencies.py`.
+
+The schedule is stored as a JSON object in the `schedule` column of the `keypasses` table:
+
+```json
+{ "days": [0, 1, 2, 3, 4], "time_start": "08:00", "time_end": "18:00" }
+```
+
+`days` uses Python's `weekday()` convention: 0 = Monday, 6 = Sunday. Any absent key is treated as unrestricted (e.g. omitting `days` means any day is allowed).
 
 ## Keypass QR Codes
 

src/core/database.py

@@ -2,7 +2,7 @@ import os
 from datetime import datetime
 from typing import Optional
 
-from sqlalchemy import Boolean, Double, String, Text, create_engine
+from sqlalchemy import Boolean, Double, String, Text, create_engine, text
 from sqlalchemy.orm import DeclarativeBase, Mapped, mapped_column, sessionmaker
 
 from core.config import DATA_DIR, DATABASE_URL
@@ -20,12 +20,14 @@ class GateDB(Base):
 
     id: Mapped[int] = mapped_column(primary_key=True, autoincrement=True)
     name: Mapped[str] = mapped_column(String, nullable=False)
-    gate_type: Mapped[str] = mapped_column(String, nullable=False)        # 'car' | 'pedestrian'
+    gate_icon: Mapped[str] = mapped_column(String, nullable=False, default="🚪")  # any UTF-8 character/emoji
-    avconnect_macro_id: Mapped[str] = mapped_column(String, nullable=False)  # AVConnect macro ID
+    api_provider: Mapped[str] = mapped_column(String, nullable=False, default="avconnect")  # 'avconnect' | 'shelly'
-    status: Mapped[str] = mapped_column(String, default="enabled")        # 'enabled' | 'disabled'
+    avconnect_macro_id: Mapped[Optional[str]] = mapped_column(String, nullable=True)  # AVConnect macro ID
-    group_name: Mapped[Optional[str]] = mapped_column(String, nullable=True)  # display group label
+    shelly_device_id: Mapped[Optional[str]] = mapped_column(String, nullable=True)    # Shelly Cloud device ID
-    lat: Mapped[Optional[float]] = mapped_column(Double, nullable=True)    # WGS-84 latitude
+    status: Mapped[str] = mapped_column(String, default="enabled")              # 'enabled' | 'disabled'
-    lon: Mapped[Optional[float]] = mapped_column(Double, nullable=True)    # WGS-84 longitude
+    group_name: Mapped[Optional[str]] = mapped_column(String, nullable=True)    # display group label
+    lat: Mapped[Optional[float]] = mapped_column(Double, nullable=True)          # WGS-84 latitude
+    lon: Mapped[Optional[float]] = mapped_column(Double, nullable=True)          # WGS-84 longitude
 
 
 class ApiCredential(Base):
@@ -38,6 +40,14 @@ class ApiCredential(Base):
     mock_avconnect: Mapped[bool] = mapped_column(Boolean, default=False)
 
 
+class ShellyCredential(Base):
+    __tablename__ = "shelly_credentials"
+
+    id: Mapped[int] = mapped_column(primary_key=True, autoincrement=True)
+    server_uri: Mapped[str] = mapped_column(String, nullable=False)       # e.g. https://shelly-3.eu.shelly.cloud
+    auth_key_enc: Mapped[str] = mapped_column(String, nullable=False)     # Fernet-encrypted auth key
+
+
 class Keypass(Base):
     __tablename__ = "keypasses"
 
@@ -49,6 +59,7 @@ class Keypass(Base):
     revoked: Mapped[bool] = mapped_column(Boolean, default=False)
     revoked_at: Mapped[Optional[datetime]] = mapped_column(nullable=True)
     allowed_gates: Mapped[Optional[str]] = mapped_column(Text, nullable=True)  # JSON list of gate IDs; NULL = all gates
+    schedule: Mapped[Optional[str]] = mapped_column(Text, nullable=True)       # JSON schedule rule; NULL = always allowed
 
 
 class GateAccessLog(Base):

src/core/dependencies.py

@@ -1,3 +1,4 @@
+import json
 from datetime import datetime
 from typing import Optional
 
@@ -48,4 +49,19 @@ def require_keypass(
         raise HTTPException(status.HTTP_401_UNAUTHORIZED, "Keypass has been revoked")
     if kp.expires_at is not None and kp.expires_at < utcnow():
         raise HTTPException(status.HTTP_401_UNAUTHORIZED, "Keypass has expired")
+    if kp.schedule:
+        try:
+            sched = json.loads(kp.schedule)
+        except (ValueError, TypeError):
+            sched = {}
+        now_local = datetime.now()
+        allowed_days = sched.get("days")
+        if allowed_days is not None and now_local.weekday() not in allowed_days:
+            raise HTTPException(status.HTTP_403_FORBIDDEN, "Keypass not currently allowed")
+        time_start = sched.get("time_start")
+        time_end = sched.get("time_end")
+        if time_start and time_end:
+            now_hhmm = now_local.strftime("%H:%M")
+            if now_hhmm < time_start or now_hhmm > time_end:
+                raise HTTPException(status.HTTP_403_FORBIDDEN, "Keypass not currently allowed")
     return kp

src/core/schemas.py

@@ -32,6 +32,13 @@ class AdminLoginResponse(BaseModel):
 
 # ── Keypasses ─────────────────────────────────────────────────────────────────
 
+class ScheduleRule(BaseModel):
+    """Optional time/day-of-week restriction for a keypass."""
+    days: Optional[list[int]] = None       # 0=Mon..6=Sun; None/absent = any day
+    time_start: Optional[str] = None       # "HH:MM" 24-hour server local time
+    time_end: Optional[str] = None         # "HH:MM" 24-hour server local time
+
+
 class KeypassCreate(BaseModel):
     description: str
     expires_at: Optional[datetime] = None   # None = never expires
@@ -40,12 +47,14 @@ class KeypassCreate(BaseModel):
     # Auto-generation options (ignored when `code` is supplied manually)
     length: int = 12                        # 6–32
     charset: str = "alphanumeric"           # "alphanumeric" | "alpha" | "numeric" | "passphrase"
+    schedule: Optional[ScheduleRule] = None  # None = always allowed
 
 
 class KeypassPatch(BaseModel):
     description: Optional[str] = None
     expires_at: Optional[datetime] = None   # None = never expires
     gate_ids: Optional[list[int]] = None    # None = keep unchanged; [] = all gates
+    schedule: Optional[ScheduleRule] = None  # absent = keep unchanged; null = clear
 
 
 class KeypassResponse(BaseModel):
@@ -58,9 +67,16 @@ class KeypassResponse(BaseModel):
     revoked: bool
     revoked_at: Optional[datetime] = None
     allowed_gate_ids: list[int]             # empty = all gates
+    schedule: Optional[ScheduleRule] = None
 
 
 def keypass_to_response(kp: Keypass) -> KeypassResponse:
+    sched: Optional[ScheduleRule] = None
+    if kp.schedule:
+        try:
+            sched = ScheduleRule(**json.loads(kp.schedule))
+        except Exception:
+            pass
     return KeypassResponse(
         id=kp.id,
         code=kp.code,
@@ -70,6 +86,7 @@ def keypass_to_response(kp: Keypass) -> KeypassResponse:
         revoked=kp.revoked,
         revoked_at=kp.revoked_at,
         allowed_gate_ids=json.loads(kp.allowed_gates) if kp.allowed_gates else [],
+        schedule=sched,
     )
 
 
@@ -80,8 +97,10 @@ class GateResponse(BaseModel):
     model_config = ConfigDict(from_attributes=True)
     id: int
     name: str
-    gate_type: str
+    gate_icon: str
-    avconnect_macro_id: str
+    api_provider: str
+    avconnect_macro_id: Optional[str] = None
+    shelly_device_id: Optional[str] = None
     status: str
     group_name: Optional[str] = None
     lat: Optional[float] = None
@@ -93,7 +112,7 @@ class GatePublicResponse(BaseModel):
     model_config = ConfigDict(from_attributes=True)
     id: int
     name: str
-    gate_type: str
+    gate_icon: str
     group_name: Optional[str] = None
     lat: Optional[float] = None
     lon: Optional[float] = None
@@ -101,15 +120,17 @@ class GatePublicResponse(BaseModel):
 
 class GateCreate(BaseModel):
     name: str
-    gate_type: str   # 'car' | 'pedestrian'
+    gate_icon: str = "🚪"          # any UTF-8 character/emoji
-    avconnect_macro_id: str
+    api_provider: str = "avconnect"   # 'avconnect' | 'shelly'
+    avconnect_macro_id: Optional[str] = None
+    shelly_device_id: Optional[str] = None
     status: str = "enabled"
     group_name: Optional[str] = None
     lat: Optional[float] = None
     lon: Optional[float] = None
 
 
-# ── AVConnect Credentials ─────────────────────────────────────────────────────
+# ── API Credentials ──────────────────────────────────────────────────────────
 
 class CredentialRead(BaseModel):
     id: int
@@ -121,6 +142,16 @@ class CredentialUpsert(BaseModel):
     password: str
 
 
+class ShellyCredentialRead(BaseModel):
+    id: int
+    server_uri: str
+
+
+class ShellyCredentialUpsert(BaseModel):
+    server_uri: str
+    auth_key: str
+
+
 # ── Admin users ───────────────────────────────────────────────────────────────
 
 class AdminUserResponse(BaseModel):

src/main.py

@@ -1,3 +1,4 @@
+import hashlib
 import logging
 import logging.handlers
 import os
@@ -36,6 +37,10 @@ if LOG_FILE:
         )
         _file_handler.setFormatter(_log_fmt)
         logging.getLogger().addHandler(_file_handler)
+        # Uvicorn sets propagate=False on its loggers by default; override so
+        # records bubble up to the root logger and reach our file handler.
+        for _uvicorn_logger_name in ("uvicorn", "uvicorn.access", "uvicorn.error"):
+            logging.getLogger(_uvicorn_logger_name).propagate = True
     except OSError as _e:
         logging.getLogger(__name__).warning(
             "Cannot open log file %r — file logging disabled: %s", LOG_FILE, _e
@@ -55,6 +60,16 @@ from routers.credentials import router as credentials_router
 from routers.admins import router as admins_router
 from routers.stats import router as stats_router
 from routers.telegram import router as telegram_router
+from routers.logs import router as logs_router
+
+# ── Cache-bust hash (SHA-1 of all static file contents) ──────────────────────
+def _static_hash(static_dir: str) -> str:
+    h = hashlib.sha1()
+    for root, _, files in sorted(os.walk(static_dir)):
+        for name in sorted(files):
+            with open(os.path.join(root, name), "rb") as f:
+                h.update(f.read())
+    return h.hexdigest()[:8]
 
 # ── App ───────────────────────────────────────────────────────────────────────
 @asynccontextmanager
@@ -88,7 +103,10 @@ async def _security_headers(request: Request, call_next) -> Response:
     response.headers["X-Frame-Options"] = "DENY"
     response.headers["Referrer-Policy"] = "strict-origin-when-cross-origin"
     response.headers["Content-Security-Policy"] = (
-        "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';"
+        "default-src 'self';"
+        " script-src 'self';"
+        " style-src 'self' 'unsafe-inline';"
+        " font-src 'self';"
         " img-src 'self' data: blob: https://*.tile.openstreetmap.org;"
         " connect-src 'self' https://*.tile.openstreetmap.org"
     )
@@ -102,6 +120,7 @@ app.include_router(credentials_router)
 app.include_router(admins_router)
 app.include_router(stats_router)
 app.include_router(telegram_router)
+app.include_router(logs_router)
 
 
 @app.get("/api/site-config", include_in_schema=False)
@@ -132,10 +151,10 @@ async def _serve_admin() -> FileResponse:
 
 
 @app.get("/sw.js", include_in_schema=False)
-async def _serve_sw() -> FileResponse:
+async def _serve_sw() -> Response:
-    return FileResponse(
+    sw_path = os.path.join(_STATIC_DIR, "sw.js")
-        os.path.join(_STATIC_DIR, "sw.js"), media_type="application/javascript"
+    content = open(sw_path, encoding="utf-8").read().replace("__STATIC_HASH__", _static_hash(os.path.join(os.path.dirname(os.path.abspath(__file__)), "static")))
-    )
+    return Response(content=content, media_type="application/javascript")
 
 
 @app.get("/manifest.json", include_in_schema=False)

src/routers/__init__.py

@@ -1 +0,0 @@
-# routers package

src/routers/credentials.py

@@ -5,22 +5,25 @@ from pydantic import BaseModel
 from sqlalchemy.orm import Session
 
 from core.auth import encrypt_secret
-from core.database import ApiCredential, get_db
+from core.database import ApiCredential, ShellyCredential, get_db
 from core.dependencies import require_admin
-from core.schemas import CredentialRead, CredentialUpsert
+from core.schemas import CredentialRead, CredentialUpsert, ShellyCredentialRead, ShellyCredentialUpsert
 from services.avconnect import AVConnectAPI
+from services.shelly import ShellyCloudAPI
 
 router = APIRouter(prefix="/api/admin/credentials", tags=["admin-credentials"])
 
 
-@router.get("", response_model=list[CredentialRead])
+# ── AVConnect credentials ─────────────────────────────────────────────────────
+
+@router.get("/avconnect", response_model=list[CredentialRead])
 async def list_credentials(
     db: Session = Depends(get_db), _: dict = Depends(require_admin)
 ):
     return [CredentialRead(id=c.id, username=c.username) for c in db.query(ApiCredential).all()]
 
 
-@router.put("", response_model=CredentialRead)
+@router.put("/avconnect", response_model=CredentialRead)
 async def upsert_credential(
     req: CredentialUpsert,
     db: Session = Depends(get_db),
@@ -37,7 +40,7 @@ async def upsert_credential(
     if cred:
         cred.username = req.username
         cred.password_enc = encrypt_secret(req.password)
-        cred.session_id = session_id  # reuse the session obtained during validation
+        cred.session_id = session_id
     else:
         cred = ApiCredential(
             username=req.username,
@@ -50,7 +53,47 @@ async def upsert_credential(
     return CredentialRead(id=cred.id, username=cred.username)
 
 
-# ── Mock AVConnect setting ─────────────────────────────────────────────────────
+# ── Shelly Cloud credentials ──────────────────────────────────────────────────
+
+@router.get("/shelly", response_model=Optional[ShellyCredentialRead])
+async def get_shelly_credential(
+    db: Session = Depends(get_db), _: dict = Depends(require_admin)
+):
+    cred: Optional[ShellyCredential] = db.query(ShellyCredential).first()
+    if not cred:
+        return None
+    return ShellyCredentialRead(id=cred.id, server_uri=cred.server_uri)
+
+
+@router.put("/shelly", response_model=ShellyCredentialRead)
+async def upsert_shelly_credential(
+    req: ShellyCredentialUpsert,
+    db: Session = Depends(get_db),
+    _: dict = Depends(require_admin),
+):
+    try:
+        ok = ShellyCloudAPI(req.server_uri, req.auth_key).validate_credentials()
+    except Exception as exc:
+        raise HTTPException(502, f"Could not reach Shelly Cloud: {exc}")
+    if not ok:
+        raise HTTPException(422, "Shelly Cloud rejected these credentials")
+
+    cred: Optional[ShellyCredential] = db.query(ShellyCredential).first()
+    if cred:
+        cred.server_uri = req.server_uri
+        cred.auth_key_enc = encrypt_secret(req.auth_key)
+    else:
+        cred = ShellyCredential(
+            server_uri=req.server_uri,
+            auth_key_enc=encrypt_secret(req.auth_key),
+        )
+        db.add(cred)
+    db.commit()
+    db.refresh(cred)
+    return ShellyCredentialRead(id=cred.id, server_uri=cred.server_uri)
+
+
+# ── Mock mode setting ─────────────────────────────────────────────────────────
 
 class MockSettingResponse(BaseModel):
     enabled: bool
@@ -76,7 +119,6 @@ async def set_mock_setting(
 ):
     cred: Optional[ApiCredential] = db.query(ApiCredential).first()
     if not cred:
-        from fastapi import HTTPException
         raise HTTPException(503, "AVConnect credentials not configured")
     cred.mock_avconnect = req.enabled
     db.commit()

src/routers/gates.py

@@ -8,7 +8,7 @@ from sqlalchemy.orm import Session
 
 from core.auth import decrypt_secret
 from core.config import utcnow
-from core.database import ApiCredential, GateAccessLog, GateDB, Keypass, TelegramConfig, get_db
+from core.database import ApiCredential, GateAccessLog, GateDB, Keypass, ShellyCredential, TelegramConfig, get_db
 from core.dependencies import require_admin, require_manager, require_keypass
 from core.schemas import GateCreate, GatePublicResponse, GateResponse
 from services.gates import call_open_gate
@@ -35,6 +35,49 @@ def _notify(db: Session, gate_name: str, opened_by: str, ip: str | None) -> None
     ).start()
 
 
+def _validate_gate_create(req: GateCreate) -> None:
+    if not req.gate_icon:
+        raise HTTPException(400, "gate_icon must not be empty")
+    if req.api_provider not in ("avconnect", "shelly"):
+        raise HTTPException(400, "api_provider must be 'avconnect' or 'shelly'")
+    if req.api_provider == "avconnect" and not req.avconnect_macro_id:
+        raise HTTPException(400, "avconnect_macro_id is required for AVConnect gates")
+    if req.api_provider == "shelly" and not req.shelly_device_id:
+        raise HTTPException(400, "shelly_device_id is required for Shelly gates")
+
+
+def _do_open_gate(
+    gate_db: GateDB,
+    db: Session,
+    mock: bool,
+) -> tuple[bool, Optional[str], Optional[str]]:
+    """Dispatch the gate-open call to the appropriate API provider."""
+    if gate_db.api_provider == "shelly":
+        shelly_cred: Optional[ShellyCredential] = db.query(ShellyCredential).first()
+        if not shelly_cred:
+            raise HTTPException(503, "Shelly credentials not configured")
+        return call_open_gate(
+            api_provider="shelly",
+            shelly_device_id=gate_db.shelly_device_id,
+            shelly_server_uri=shelly_cred.server_uri,
+            shelly_auth_key=decrypt_secret(shelly_cred.auth_key_enc),
+            mock=mock,
+        )
+
+    # AVConnect (default)
+    av_cred: Optional[ApiCredential] = db.query(ApiCredential).first()
+    if not av_cred:
+        raise HTTPException(503, "AVConnect credentials not configured")
+    return call_open_gate(
+        api_provider="avconnect",
+        avconnect_macro_id=gate_db.avconnect_macro_id,
+        avconnect_username=av_cred.username,
+        avconnect_password=decrypt_secret(av_cred.password_enc),
+        avconnect_session_id=av_cred.session_id,
+        mock=mock,
+    )
+
+
 # ── Admin: gate CRUD ──────────────────────────────────────────────────────────
 
 @router.get("/api/admin/gates", response_model=list[GateResponse])
@@ -50,8 +93,7 @@ async def create_gate(
     db: Session = Depends(get_db),
     _: dict = Depends(require_admin),
 ):
-    if req.gate_type not in ("car", "pedestrian"):
+    _validate_gate_create(req)
-        raise HTTPException(400, "gate_type must be 'car' or 'pedestrian'")
     gate = GateDB(**req.model_dump())
     db.add(gate)
     db.commit()
@@ -66,6 +108,7 @@ async def update_gate(
     db: Session = Depends(get_db),
     _: dict = Depends(require_admin),
 ):
+    _validate_gate_create(req)
     gate: Optional[GateDB] = db.query(GateDB).filter(GateDB.id == gate_id).first()
     if not gate:
         raise HTTPException(404, "Gate not found")
@@ -102,21 +145,14 @@ async def admin_open_gate(
     if gate_db.status != "enabled":
         raise HTTPException(409, "Gate is disabled")
 
-    cred_db: Optional[ApiCredential] = db.query(ApiCredential).first()
+    # Determine mock mode from AVConnect credential record (applies to all providers)
-    if not cred_db:
+    av_cred: Optional[ApiCredential] = db.query(ApiCredential).first()
-        raise HTTPException(503, "AVConnect credentials not configured")
+    mock = bool(av_cred.mock_avconnect) if av_cred else False
 
     ip = request.client.host if request.client else None
     ua = request.headers.get("User-Agent")
 
-    mock = bool(cred_db.mock_avconnect)
+    success, error_msg, new_sid = _do_open_gate(gate_db, db, mock)
-    success, error_msg, new_sid = call_open_gate(
-        gate_db.avconnect_macro_id,
-        cred_db.username,
-        decrypt_secret(cred_db.password_enc),
-        cred_db.session_id,
-        mock=mock,
-    )
 
     db.add(GateAccessLog(
         timestamp=utcnow(),
@@ -130,8 +166,8 @@ async def admin_open_gate(
         error=error_msg,
     ))
 
-    if new_sid and new_sid != cred_db.session_id:
+    if new_sid and av_cred and new_sid != av_cred.session_id:
-        cred_db.session_id = new_sid
+        av_cred.session_id = new_sid
     db.commit()
 
     if not success:
@@ -169,25 +205,17 @@ async def open_gate(
     if not gate_db:
         raise HTTPException(404, "Gate not found or disabled")
 
-    cred_db: Optional[ApiCredential] = db.query(ApiCredential).first()
-    if not cred_db:
-        raise HTTPException(503, "AVConnect credentials not configured")
-
-    ip = request.client.host if request.client else None
-    ua = request.headers.get("User-Agent")
-
     allowed = json.loads(_kp.allowed_gates) if _kp.allowed_gates else None
     if allowed is not None and gate_id not in allowed:
         raise HTTPException(403, "This keypass does not have access to this gate")
 
-    mock = bool(cred_db.mock_avconnect)
+    av_cred: Optional[ApiCredential] = db.query(ApiCredential).first()
-    success, error_msg, new_sid = call_open_gate(
+    mock = bool(av_cred.mock_avconnect) if av_cred else False
-        gate_db.avconnect_macro_id,
+
-        cred_db.username,
+    ip = request.client.host if request.client else None
-        decrypt_secret(cred_db.password_enc),
+    ua = request.headers.get("User-Agent")
-        cred_db.session_id,
+
-        mock=mock,
+    success, error_msg, new_sid = _do_open_gate(gate_db, db, mock)
-    )
 
     db.add(GateAccessLog(
         timestamp=utcnow(),
@@ -201,8 +229,8 @@ async def open_gate(
         error=error_msg,
     ))
 
-    if new_sid and new_sid != cred_db.session_id:
+    if new_sid and av_cred and new_sid != av_cred.session_id:
-        cred_db.session_id = new_sid
+        av_cred.session_id = new_sid
     db.commit()
 
     if not success:
@@ -210,5 +238,5 @@ async def open_gate(
         raise HTTPException(502, error_msg or "Gate operation failed")
 
     logger.info("Gate opened by keypass: gate_id=%d gate=%r keypass=%r ip=%r", gate_db.id, gate_db.name, f"{_kp.description} ({_kp.code})", ip)
-    _notify(db, gate_db.name, f"{_kp.description} ({_kp.code})", ip)
+    _notify(db, gate_db.name, f"{_kp.description}", ip)
     return {"success": True, "gate": gate_db.name}

src/routers/keypasses.py

@@ -16,6 +16,16 @@ from core.schemas import KeypassCreate, KeypassPatch, KeypassResponse, keypass_t
 
 router = APIRouter(prefix="/api/admin/keypasses", tags=["admin-keypasses"])
 
+
+def _serialize_schedule(s) -> Optional[str]:
+    """Serialize a ScheduleRule to a JSON string, or None if effectively empty."""
+    if s is None:
+        return None
+    d = s.model_dump(exclude_none=True)
+    if "days" in d and not d["days"]:
+        del d["days"]
+    return json.dumps(d) if d else None
+
 # ── Word list for passphrase mode ─────────────────────────────────────────────
 _WORDS = [
     "apple", "beach", "brick", "brush", "cabin", "calm", "cedar", "chain",
@@ -102,6 +112,7 @@ async def create_keypass(
         expires_at=req.expires_at,
         revoked=False,
         allowed_gates=json.dumps(req.gate_ids) if req.gate_ids else None,
+        schedule=_serialize_schedule(req.schedule),
     )
     db.add(kp)
     db.commit()
@@ -126,6 +137,8 @@ async def update_keypass(
     kp.expires_at = req.expires_at
     if req.gate_ids is not None:
         kp.allowed_gates = json.dumps(req.gate_ids) if req.gate_ids else None
+    if "schedule" in req.model_fields_set:
+        kp.schedule = _serialize_schedule(req.schedule)
     db.commit()
     db.refresh(kp)
     return keypass_to_response(kp)

src/routers/logs.py

@@ -0,0 +1,81 @@
+import os
+from typing import Optional
+
+from fastapi import APIRouter, Depends, HTTPException, Query, status
+from pydantic import BaseModel
+
+from core.config import LOG_FILE
+from core.dependencies import require_admin
+
+router = APIRouter(prefix="/api/admin/logs", tags=["admin-logs"])
+
+_LEVEL_ORDER = {"DEBUG": 0, "INFO": 1, "WARNING": 2, "ERROR": 3, "CRITICAL": 4}
+
+
+class LogsResponse(BaseModel):
+    lines: list[str]
+    log_file: Optional[str]
+    total_returned: int
+
+
+def _read_tail(path: str, n: int) -> list[str]:
+    """Return the last *n* lines from *path* using a memory-efficient seek."""
+    size = os.path.getsize(path)
+    if size == 0:
+        return []
+    # Read in chunks from the end
+    chunk = 1 << 14  # 16 KB
+    lines: list[bytes] = []
+    with open(path, "rb") as fh:
+        pos = size
+        while len(lines) <= n and pos > 0:
+            pos = max(pos - chunk, 0)
+            fh.seek(pos)
+            data = fh.read(min(chunk, size - pos))
+            lines = data.split(b"\n") + lines
+            # If we have more lines than needed, trim from the front
+            if len(lines) > n + 1:
+                lines = lines[-(n + 1):]
+    # Drop empty last element caused by trailing newline
+    result = [ln.decode("utf-8", errors="replace") for ln in lines if ln]
+    return result[-n:] if len(result) > n else result
+
+
+@router.get("", response_model=LogsResponse)
+async def get_logs(
+    _: dict = Depends(require_admin),
+    lines: int = Query(200, ge=1, le=2000, description="Number of lines to return (tail)"),
+    level: Optional[str] = Query(None, description="Minimum log level: DEBUG, INFO, WARNING, ERROR, CRITICAL"),
+):
+    if not LOG_FILE:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail="Log file not configured (LOG_FILE env variable is not set).",
+        )
+    if not os.path.isfile(LOG_FILE):
+        return LogsResponse(lines=[], log_file=LOG_FILE, total_returned=0)
+
+    raw = _read_tail(LOG_FILE, lines)
+
+    if level:
+        level_upper = level.upper()
+        if level_upper not in _LEVEL_ORDER:
+            raise HTTPException(
+                status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
+                detail=f"Invalid level '{level}'. Must be one of: {', '.join(_LEVEL_ORDER)}.",
+            )
+        min_order = _LEVEL_ORDER[level_upper]
+        filtered: list[str] = []
+        for line in raw:
+            for lvl, order in _LEVEL_ORDER.items():
+                if lvl in line and order >= min_order:
+                    filtered.append(line)
+                    break
+            else:
+                # Lines that don't match any known level keyword are included
+                # only when filtering at DEBUG (include everything)
+                if min_order == 0:
+                    filtered.append(line)
+        raw = filtered
+
+    return LogsResponse(lines=raw, log_file=LOG_FILE, total_returned=len(raw))

src/services/__init__.py

@@ -1,7 +0,0 @@
-from .avconnect import AVConnectAPI
-from .gates import call_open_gate
-
-__all__ = [
-    "AVConnectAPI",
-    "call_open_gate",
-]

src/services/gates.py

@@ -1,21 +1,37 @@
 from typing import Optional
 
 from .avconnect import AVConnectAPI
+from .shelly import ShellyCloudAPI
 
 
 def call_open_gate(
-    macro_id: str,
+    api_provider: str,
-    username: str,
+    avconnect_macro_id: Optional[str] = None,
-    password: str,
+    avconnect_username: Optional[str] = None,
-    session_id: Optional[str] = None,
+    avconnect_password: Optional[str] = None,
+    avconnect_session_id: Optional[str] = None,
+    shelly_device_id: Optional[str] = None,
+    shelly_server_uri: Optional[str] = None,
+    shelly_auth_key: Optional[str] = None,
     mock: bool = False,
 ) -> tuple[bool, Optional[str], Optional[str]]:
-    """Attempt to open a gate. Returns (success, error_msg, new_session_id)."""
+    """Attempt to open a gate. Returns (success, error_msg, new_avconnect_session_id)."""
     if mock:
         return True, None, None
+
+    if api_provider == "shelly":
+        try:
+            assert shelly_server_uri and shelly_auth_key and shelly_device_id
+            ShellyCloudAPI(shelly_server_uri, shelly_auth_key).open_gate(shelly_device_id)
+            return True, None, None
+        except Exception as e:
+            return False, str(e), None
+
+    # Default: AVConnect
     try:
-        api = AVConnectAPI(username, password, session_id)
+        assert avconnect_username and avconnect_password and avconnect_macro_id
-        ok, new_sid = api.exec_gate_macro(macro_id)
+        api = AVConnectAPI(avconnect_username, avconnect_password, avconnect_session_id)
+        ok, new_sid = api.exec_gate_macro(avconnect_macro_id)
         if not ok:
             return False, "Gate did not confirm open", new_sid
         return True, None, new_sid

src/services/shelly.py

@@ -0,0 +1,59 @@
+import logging
+
+import requests
+
+logger = logging.getLogger(__name__)
+
+
+class ShellyCloudAPI:
+    """Shelly Cloud Control API v2 client.
+
+    *server_uri* — base URL of your Shelly Cloud server
+    (e.g. ``https://shelly-3.eu.shelly.cloud``).
+    *auth_key* — long-lived API key generated in the Shelly Cloud portal.
+
+    Reference: https://shelly-api-docs.shelly.cloud/cloud-control-api/communication-v2
+    """
+
+    def __init__(self, server_uri: str, auth_key: str):
+        self._server_uri = server_uri.rstrip("/")
+        self._auth_key = auth_key
+
+    def open_gate(self, device_id: str, channel: int = 0) -> None:
+        """Send a switch-on command to the device via the v2 API.
+
+        Raises on HTTP errors or API-level errors.
+        """
+        url = f"{self._server_uri}/v2/devices/api/set/switch"
+        params = {"auth_key": self._auth_key}
+        payload = {"id": device_id, "channel": channel, "on": True}
+        logger.debug("Shelly v2 open_gate: device_id=%s channel=%d", device_id, channel)
+        response = requests.post(url, params=params, json=payload, timeout=10)
+        if not response.ok:
+            # v2 error body: {"error": "...", "data": {"messages": [...]}}
+            try:
+                body = response.json()
+                error_str = body.get("error", response.text)
+                messages = body.get("data", {}).get("messages", [])
+                detail = f"{error_str}: {'; '.join(messages)}" if messages else error_str
+            except Exception:
+                detail = response.text
+            raise Exception(f"Shelly Cloud API error ({response.status_code}): {detail}")
+
+    def validate_credentials(self) -> bool:
+        """Validate the auth key by issuing a v2 get-state probe.
+
+        Any response other than 401 (Unauthorized) is treated as valid auth.
+        Raises on unexpected network errors.
+        """
+        url = f"{self._server_uri}/v2/devices/api/get"
+        params = {"auth_key": self._auth_key}
+        # Send a single dummy id; the server will return an empty/not-found result
+        # but will authenticate the key first. A 401 means the key is invalid.
+        payload = {"ids": ["validate"]}
+        response = requests.post(url, params=params, json=payload, timeout=10)
+        if response.status_code == 401:
+            logger.warning("Shelly credentials validation failed: 401 Unauthorized")
+            return False
+        logger.debug("Shelly credentials valid (status=%d)", response.status_code)
+        return True

src/static/add-to-homescreen/add-to-homescreen.min.css

@@ -0,0 +1,823 @@
+@import url(roboto.css);
+.adhs-container {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0);
+  z-index: 999999;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
+  font-family: "Roboto", sans-serif;
+  color: #212121;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+.adhs-container.visible {
+  background-color: rgba(0, 0, 0, 0.9);
+  opacity: 1;
+}
+
+.adhs-container .adhs-modal {
+  background-color: #f5f5f5;
+  border-radius: 7px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  left: 50%;
+  margin: auto;
+  max-width: 400px;
+  padding: 49px 19px 32px 19px;
+  position: absolute;
+  transition: opacity 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  line-height: normal;
+  top: 40%;
+  transform: translateY(-50%) translateX(-50%);
+  width: 90%;
+}
+
+@keyframes adhs-bounce-modal {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(-50%) translateX(-50%);
+  }
+
+  40% {
+    transform: translateY(-40%) translateX(-50%);
+  }
+
+  60% {
+    transform: translateY(-55%) translateX(-50%);
+  }
+}
+
+.adhs-container.visible .adhs-modal {
+  opacity: 1;
+  animation: adhs-bounce-modal 0.5s;
+}
+
+.adhs-container .adhs-logo {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  height: 80px;
+  width: 80px;
+  top: -45px;
+  z-index: 1000000;
+}
+
+.adhs-container .adhs-logo img {
+  width: 80px;
+  height: 80px;
+  border-radius: 12px;
+}
+
+.adhs-container .adhs-modal .adhs-title {
+  font-size: 27px;
+  font-weight: 700;
+  padding: 0px 0px 18px 0px;
+  text-align: justify;
+  word-spacing: -0.1em;
+}
+
+.adhs-container .adhs-modal .adhs-error-title {
+  font-size: 24px;
+  font-weight: 700;
+  margin: 5px 10px 15px 10px;
+  text-align: justify;
+}
+
+.adhs-container .adhs-modal .adhs-error-body {
+  font-size: 20px;
+  margin: 0px 10px 20px 10px;
+  text-align: justify;
+}
+
+.adhs-container .adhs-modal .adhs-error-copy-link-button {
+  background-color: white;
+  border: 1px solid;
+  border-radius: 4px;
+  font-size: 19px;
+  padding: 5px;
+}
+
+.adhs-container .adhs-modal .adhs-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.adhs-container .adhs-modal .adhs-list .adhs-emphasis {
+  font-weight: 700;
+  font-size: 20px;
+}
+
+.adhs-container .adhs-modal .adhs-list .adhs-your-app-icon {
+  height: 40px;
+  margin: 0px 5px -13px 5px;
+  border-radius: 6px;
+}
+
+.adhs-container .adhs-modal .adhs-list .adhs-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  justify-content: flex-start;
+  margin: 0px 0px 10px 0px;
+}
+
+.adhs-container .adhs-modal .adhs-list .adhs-list-item .adhs-number-container {
+  flex-direction: column;
+  display: flex;
+  /* margin: 0px 5px 0px 0px; */
+}
+
+.adhs-container.adhs-desktop
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-number-container {
+  margin: 0px 5px 0px 0px;
+}
+
+.adhs-container.adhs-mobile
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-number-container {
+  margin: 5px 5px 0px 0px;
+}
+
+.adhs-container .adhs-modal .adhs-list .adhs-list-item .adhs-circle {
+  font-size: 30px;
+  height: 32px;
+  width: 32px;
+  border-radius: 100px;
+  background-color: #000000;
+}
+
+.adhs-container .adhs-modal .adhs-list .adhs-list-item .adhs-number {
+  padding: 6px 0px 0px 11px;
+  color: white;
+  font-size: 17px;
+  font-weight: 100;
+}
+
+[dir="rtl"]
+  .adhs-container
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-number {
+  padding: 6px 11px 0px 11px;
+}
+
+.adhs-container .adhs-modal .adhs-list .adhs-list-item .adhs-instruction {
+  font-size: 19px;
+  line-height: 27px;
+  padding: 0px 5px 0px 5px;
+  /* text-align: justify; */
+}
+
+.adhs-container.adhs-mobile
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-instruction:has(.adhs-list-button) {
+  padding-top: 5px;
+}
+
+.adhs-container .adhs-modal .adhs-list .adhs-list-item .adhs-list-button {
+  display: inline-block;
+  /* border: 0.5px solid lightgrey; */
+  border-radius: 4px;
+  box-shadow: 1px 1px 2px gray;
+  margin-right: 3px;
+  padding: 2px 8px;
+  white-space: nowrap;
+}
+
+.adhs-container
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-list-button:has(.adhs-list-button-image-only) {
+  display: inline-block;
+  padding: 1px 8px;
+}
+
+.adhs-container
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-list-button
+  .adhs-list-button-text {
+  display: inline;
+  font-size: 16px;
+  position: relative;
+  top: -1px;
+}
+
+.adhs-container
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-list-button
+  .adhs-list-button-image-only {
+  display: inline;
+  position: relative;
+  left: 0px;
+  top: 3px;
+}
+
+.adhs-container
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-list-button
+  .adhs-list-button-image-left {
+  display: inline;
+  position: relative;
+  margin: 0 5px 0 0;
+  top: 2px;
+}
+
+.adhs-container
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-list-button
+  .adhs-list-button-image-right {
+  display: inline;
+  position: relative;
+  margin: 0 0 0 5px;
+  top: 2px;
+}
+
+/* IOS Safari */
+.adhs-container.adhs-ios.adhs-safari
+  .adhs-modal
+  .adhs-list
+  .adhs-ios-safari-sharing-api-button {
+  height: 35px;
+  margin: 0px 5px -7px 5px;
+  box-shadow: 1px 1px 2px gray;
+  border-radius: 4px;
+  background-color: #ffffff;
+}
+
+.adhs-container.adhs-ios.adhs-safari
+  .adhs-modal
+  .adhs-list
+  .adhs-ios-safari-add-to-home-screen-button {
+  height: 33px;
+  margin: 0px 5px -7px 5px;
+  box-shadow: 1px 1px 2px gray;
+  border-radius: 4px;
+  background-color: #ffffff;
+}
+
+@keyframes adhs-ios-safari-bouncing-arrow-animation {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-30px);
+  }
+
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes adhs-ios-ipad-safari-bouncing-arrow-animation {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0) rotate(180deg);
+  }
+
+  40% {
+    transform: translateY(30px) rotate(180deg);
+  }
+
+  60% {
+    transform: translateY(15px) rotate(180deg);
+  }
+}
+
+@media (orientation: landscape) {
+  .adhs-container .adhs-bouncing-arrow {
+    display: none;
+  }
+}
+
+.adhs-container.adhs-ios.adhs-safari
+  .adhs-ios-safari-bouncing-arrow-container
+  img {
+  height: 60px;
+  position: absolute;
+  top: calc(100dvh - 60px);
+  bottom: unset;
+  left: 0;
+  right: 0;
+  margin: auto;
+  animation: adhs-ios-safari-bouncing-arrow-animation 2s infinite;
+}
+
+.adhs-container.adhs-ios.adhs-safari.adhs-ios26
+  .adhs-ios-safari-bouncing-arrow-container
+  img {
+  height: 60px;
+  position: absolute;
+  top: calc(100dvh - 60px);
+  bottom: unset;
+  left: unset;
+  right: 7%;
+  margin: 0px 0px;
+  animation: adhs-ios-safari-bouncing-arrow-animation 2s infinite;
+}
+
+.adhs-container.adhs-ios.adhs-safari
+  .adhs-ios-ipad-safari-bouncing-arrow-container
+  img {
+  height: 60px;
+  position: absolute;
+  top: 0;
+  bottom: unset;
+  left: unset;
+  right: 11%; 
+  margin: 0px 0px;
+  animation: adhs-ios-ipad-safari-bouncing-arrow-animation 2s infinite;
+}
+
+.adhs-container.adhs-ios.adhs-safari.adhs-ios26
+  .adhs-ios-ipad-safari-bouncing-arrow-container
+  img {
+  height: 60px;
+  position: absolute;
+  top: 0;
+  bottom: unset;
+  left: unset;
+  right: 9%; 
+  margin: 0px 0px;
+  animation: adhs-ios-ipad-safari-bouncing-arrow-animation 2s infinite;
+}
+
+/* IOS Chrome */
+@keyframes adhs-ios-chrome-bouncing-arrow-animation {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(20px);
+  }
+
+  60% {
+    transform: translateY(5px);
+  }
+}
+
+.adhs-container.adhs-ios.adhs-chrome
+  .adhs-modal
+  .adhs-list
+  .adhs-ios-chrome-more-button {
+  height: 35px;
+  margin: 0px 5px -7px 5px;
+  box-shadow: 1px 1px 2px gray;
+  border-radius: 4px;
+  background-color: #ffffff;
+}
+
+.adhs-container.adhs-ios.adhs-chrome
+  .adhs-ios-chrome-bouncing-arrow-container
+  img {
+  height: 40px;
+  position: absolute;
+  top: 0;
+  right: 18px;
+  animation: adhs-ios-chrome-bouncing-arrow-animation 1.5s infinite;
+}
+
+.adhs-container.adhs-ios.adhs-chrome
+  .adhs-modal
+  .adhs-list
+  .adhs-ios-chrome-add-to-home-screen-button {
+  height: 35px;
+  margin: 0px 5px -7px 5px;
+  box-shadow: 1px 1px 2px gray;
+  border-radius: 4px;
+  background-color: #ffffff;
+}
+
+/* Android Chrome */
+@keyframes adhs-android-chrome-bouncing-arrow-animation {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(20px);
+  }
+
+  60% {
+    transform: translateY(5px);
+  }
+}
+
+.adhs-container.adhs-android.adhs-chrome
+  .adhs-android-chrome-bouncing-arrow-container
+  img {
+  height: 40px;
+  position: absolute;
+  top: 0;
+  right: 15px;
+  animation: adhs-android-chrome-bouncing-arrow-animation 1.5s infinite;
+}
+
+@keyframes adhs-android-edge-portrait-bouncing-arrow-animation {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-20px);
+  }
+
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes adhs-android-edge-landscape-bouncing-arrow-animation {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(20px);
+  }
+
+  60% {
+    transform: translateY(5px);
+  }
+}
+
+.adhs-container.adhs-android.adhs-edge
+  .adhs-android-edge-bouncing-arrow-container
+  img {
+  position: absolute;
+  height: 40px;
+  top: calc(100dvh - 60px);
+  right: 25px;
+  animation: adhs-android-edge-portrait-bouncing-arrow-animation 1.5s infinite;
+}
+
+@media (orientation: landscape) {
+  .adhs-container.adhs-android.adhs-edge
+  .adhs-android-edge-bouncing-arrow-container
+  img {
+    position: absolute;
+    height: 40px;
+    top: 20px;
+    right: 33px;
+    animation: adhs-android-edge-landscape-bouncing-arrow-animation 1.5s infinite;
+  }
+}
+
+.adhs-container.adhs-android.adhs-chrome
+  .adhs-modal
+  .adhs-list
+  .adhs-android-chrome-more-button {
+  height: 30px;
+  background: white;
+  margin: 0px 5px -7px 5px;
+  box-shadow: 1px 1px 2px gray;
+  border-radius: 4px;
+}
+
+.adhs-container.adhs-android.adhs-chrome
+  .adhs-modal
+  .adhs-list
+  .adhs-android-chrome-add-to-homescreen-button {
+  height: 30px;
+  background: white;
+  margin: 0px 5px -9px 5px;
+  box-shadow: 1px 1px 2px gray;
+  border-radius: 4px;
+  padding: 0px 7px 0px 4px;
+}
+
+.adhs-container.adhs-android.adhs-chrome
+  .adhs-modal
+  .adhs-list
+  .adhs-android-chrome-install-app {
+  height: 30px;
+  background: white;
+  margin: 10px 5px -10px 5px;
+  box-shadow: 1px 1px 2px gray;
+  border-radius: 4px;
+  padding: 0px;
+}
+
+.adhs-container.adhs-android.adhs-chrome
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-instruction {
+  line-height: 34px;
+}
+
+/* In-App System Browser */
+.adhs-container.adhs-inappbrowser-openinsystembrowser .adhs-modal .adhs-title {
+  padding: 0px 0px 9px 0px;
+}
+
+.adhs-container.adhs-inappbrowser-openinsystembrowser
+  .adhs-modal
+  .adhs-list
+  .adhs-emphasis {
+  padding: 6px 8px;
+  border-radius: 5px;
+  margin: 0px 0px 0px 5px;
+  box-shadow: 1px 1px 2px gray;
+  background: white;
+  width: fit-content;
+  font-weight: 500;
+}
+
+.adhs-container.adhs-inappbrowser-openinsystembrowser
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item {
+  margin: 6px 0px 9px 0px;
+}
+
+.adhs-container.adhs-inappbrowser-openinsystembrowser
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-instruction {
+  padding: 0px 0px 2px 9px;
+  line-height: 42px;
+}
+
+@keyframes adhs-inappbrowser-openinsystembrowser-bouncing-arrow-animation {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(20px);
+  }
+
+  60% {
+    transform: translateY(5px);
+  }
+}
+
+.adhs-container.adhs-inappbrowser-openinsystembrowser
+  .adhs-inappbrowser-openinsystembrowser-bouncing-arrow-container
+  img {
+  height: 40px;
+  position: absolute;
+  top: 0;
+  right: 6px;
+  animation: adhs-inappbrowser-openinsystembrowser-bouncing-arrow-animation 1.5s
+    infinite;
+}
+
+.adhs-container.adhs-inappbrowser-openinsystembrowser
+  .adhs-modal
+  .adhs-list
+  .adhs-more-button {
+  height: 35px;
+  background: white;
+  margin: 0px 5px -11px 5px;
+  box-shadow: 1px 1px 2px gray;
+  border-radius: 4px;
+}
+
+/* In-App Safari Browser */
+.adhs-container.adhs-inappbrowser-openinsafari .adhs-modal .adhs-title {
+  padding: 0px 0px 9px 0px;
+}
+
+.adhs-container.adhs-inappbrowser-openinsafari
+  .adhs-modal
+  .adhs-list
+  .adhs-emphasis {
+  padding: 6px 8px;
+  border-radius: 5px;
+  margin: 0px 0px 0px 5px;
+  box-shadow: 1px 1px 2px gray;
+  background: white;
+  width: fit-content;
+  font-weight: 500;
+}
+
+.adhs-container.adhs-inappbrowser-openinsafari
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item {
+  margin: 6px 0px 9px 0px;
+}
+
+.adhs-container.adhs-inappbrowser-openinsafari
+  .adhs-modal
+  .adhs-list
+  .adhs-list-item
+  .adhs-instruction {
+  padding: 0px 0px 0px 9px;
+  line-height: 34px;
+  margin: 4px 0px 0px 0px;
+}
+
+@keyframes adhs-inappbrowser-openinsafari-bouncing-arrow-animation {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-20px);
+  }
+
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+.adhs-container.adhs-inappbrowser-openinsafari
+  .adhs-inappbrowser-openinsafari-bouncing-arrow-container
+  img {
+  height: 40px;
+  position: absolute;
+  top: calc(100dvh - 40px);
+  right: 15px;
+  animation: adhs-inappbrowser-openinsafari-bouncing-arrow-animation 1.5s
+    infinite;
+}
+
+.adhs-container.adhs-inappbrowser-openinsafari
+  .adhs-modal
+  .adhs-list
+  .adhs-more-button {
+  height: 35px;
+  background: white;
+  margin: 0px 5px -11px 5px;
+  box-shadow: 1px 1px 2px gray;
+  border-radius: 4px;
+}
+
+.adhs-container.adhs-desktop .adhs-modal {
+  background-color: #f5f5f5;
+  border-radius: 7px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  padding: 45px 45px 28px 40px;
+  margin: auto;
+  max-width: 400px;
+}
+
+.adhs-container .adhs-modal .adhs-install-app {
+  /* font-size: 22px; */
+  font-weight: 600;
+  text-align: center;
+  /* margin: 0px 0px 0px 0px; */
+  padding: 0px;
+}
+
+.adhs-container.adhs-desktop .adhs-modal .adhs-install-app {
+  font-size: 22px;
+  margin: 0px 0px 0px 0px;
+}
+
+.adhs-container.adhs-mobile .adhs-modal .adhs-install-app {
+  font-size: 23px;
+  margin: -2px 0px 0px 0px;
+}
+
+.adhs-container .adhs-modal .adhs-app-name {
+  /* font-size: 22px; */
+  font-weight: 600;
+  margin: 5px auto 1px auto;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.adhs-container.adhs-desktop .adhs-modal .adhs-app-name {
+  font-size: 22px;
+  margin: 0px auto 1px auto;
+}
+
+.adhs-container.adhs-mobile .adhs-modal .adhs-app-name {
+  font-size: 23px;
+  margin: 0px auto 18px auto;
+}
+
+.adhs-container .adhs-modal .adhs-app-url {
+  font-size: 13px;
+  font-weight: 300;
+  margin: 0 auto 24px auto;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.adhs-container.adhs-desktop-chrome .adhs-modal .adhs-app-url {
+  margin-bottom: 18px;
+}
+
+.adhs-container.adhs-desktop-safari .adhs-modal .adhs-app-url {
+  margin-bottom: 24px;
+}
+
+.adhs-container.adhs-mobile .adhs-modal .adhs-app-url {
+  margin: 0 auto 20px auto;
+}
+.adhs-container .adhs-modal .adhs-blurb {
+  font-size: 13px;
+  font-weight: 400;
+  margin: 0px 0px 14px 0px;
+}
+
+.adhs-container.adhs-mobile .adhs-modal .adhs-blurb {
+  font-size: 15px;
+  margin: 13px 0px 5px 0px;
+}
+
+.adhs-container.adhs-desktop-chrome .adhs-modal .adhs-blurb {
+  margin-top: 0px;
+}
+
+.adhs-container.adhs-desktop-safari .adhs-modal .adhs-blurb {
+  margin-top: 12px;
+}
+
+.adhs-container .adhs-modal .adhs-button-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-top: 11px;
+}
+.adhs-container .adhs-modal .adhs-button {
+  background-color: #1d64f0;
+  color: white;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 400;
+  border: none;
+  padding: 10px 33px;
+  border-radius: 9px;
+}
+
+.adhs-container.adhs-desktop-safari
+  .adhs-desktop-safari-bouncing-arrow-container
+  img {
+  height: 40px;
+  position: absolute;
+  top: 0;
+  right: 88px;
+  animation: adhs-ios-chrome-bouncing-arrow-animation 1.5s infinite;
+}
+

src/static/add-to-homescreen/assets/img/android-chrome-add-to-home-screen-button-2.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>add_to_home_screen</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Rounded" transform="translate(-783.000000, -1705.000000)">
+            <g id="Device" transform="translate(100.000000, 1650.000000)">
+                <g id="-Round-/-Device-/-add_to_home_screen" transform="translate(680.000000, 54.000000)">
+                    <g transform="translate(0.000000, 0.000000)">
+                        <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
+                        <path d="M18,1.01 L8,1 C6.9,1 6,1.9 6,3 L6,6 C6,6.55 6.45,7 7,7 C7.55,7 8,6.55 8,6 L8,5 L18,5 L18,19 L8,19 L8,18 C8,17.45 7.55,17 7,17 C6.45,17 6,17.45 6,18 L6,21 C6,22.1 6.9,23 8,23 L18,23 C19.1,23 20,22.1 20,21 L20,3 C20,1.9 19.1,1.01 18,1.01 Z M11,15 C11.55,15 12,14.55 12,14 L12,9 C12,8.45 11.55,8 11,8 L6,8 C5.45,8 5,8.45 5,9 C5,9.55 5.45,10 6,10 L8.59,10 L3.7,14.89 C3.31,15.28 3.31,15.91 3.7,16.3 C4.09,16.69 4.72,16.69 5.11,16.3 L10,11.41 L10,14 C10,14.55 10.45,15 11,15 Z" id="🔹Icon-Color" fill="#1D1D1D"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/add-to-homescreen/assets/img/android-chrome-bouncing-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="82" height="115" viewBox="0 0 82 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.4071 2.12778C43.2691 -0.0300287 39.7868 -0.0461506 37.629 2.09177L2.46551 36.9311C0.307703 39.0691 0.291581 42.5514 2.4295 44.7092C4.56741 46.867 8.04978 46.8832 10.2076 44.7452L41.464 13.7769L72.4323 45.0333C74.5702 47.1911 78.0526 47.2072 80.2104 45.0693C82.3682 42.9314 82.3843 39.449 80.2464 37.2912L45.4071 2.12778ZM46.4999 114.025L46.9999 6.02428L36.0001 5.97335L35.5001 113.975L46.4999 114.025Z" fill="#3478F6"/>
+</svg>

src/static/add-to-homescreen/assets/img/android-chrome-more-button-2.svg

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="19" r="2" fill="black"/>
+<circle cx="11" cy="3" r="2" fill="black"/>
+<circle cx="11" cy="11" r="2" fill="black"/>
+</svg>

src/static/add-to-homescreen/assets/img/android-edge-add-to-home-screen-button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11M13.75 2A2.25 2.25 0 0 1 16 4.25v6.924a6.5 6.5 0 0 0-1.5.558V4.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v15.5c0 .414.336.75.75.75l5.483.001a6.5 6.5 0 0 0 1.077 1.5L6.25 22A2.25 2.25 0 0 1 4 19.75V4.25A2.25 2.25 0 0 1 6.25 2zm3.75 12l-.09.007a.5.5 0 0 0-.402.402L17 14.5V17h-2.502l-.09.008a.5.5 0 0 0-.402.402l-.008.09l.008.09a.5.5 0 0 0 .402.402l.09.008H17v2.503l.008.09a.5.5 0 0 0 .402.402l.09.008l.09-.008a.5.5 0 0 0 .402-.402l.008-.09V18l2.504.001l.09-.008a.5.5 0 0 0 .402-.402l.008-.09l-.008-.09a.5.5 0 0 0-.403-.402l-.09-.008H18v-2.5l-.008-.09a.5.5 0 0 0-.402-.403zm-8.751 3.504L11 17.499c0 .517.06 1.02.174 1.5l-2.423.005a.75.75 0 0 1-.002-1.5"/></svg>

src/static/add-to-homescreen/assets/img/android-edge-more-button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>

src/static/add-to-homescreen/assets/img/desktop-safari-bouncing-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="82" height="115" viewBox="0 0 82 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.4071 2.12778C43.2691 -0.0300287 39.7868 -0.0461506 37.629 2.09177L2.46551 36.9311C0.307703 39.0691 0.291581 42.5514 2.4295 44.7092C4.56741 46.867 8.04978 46.8832 10.2076 44.7452L41.464 13.7769L72.4323 45.0333C74.5702 47.1911 78.0526 47.2072 80.2104 45.0693C82.3682 42.9314 82.3843 39.449 80.2464 37.2912L45.4071 2.12778ZM46.4999 114.025L46.9999 6.02428L36.0001 5.97335L35.5001 113.975L46.4999 114.025Z" fill="#3478F6"/>
+</svg>

src/static/add-to-homescreen/assets/img/desktop-safari-dock.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="22.33" height="16.4975" rx="1.5" stroke="black"/>
+<line x1="1.16626" y1="4.16602" x2="22.1633" y2="4.16602" stroke="black"/>
+<rect x="3.49951" y="11.665" width="16.331" height="3.4995" rx="1" fill="black"/>
+</svg>

src/static/add-to-homescreen/assets/img/desktop-safari-menu.svg

@@ -0,0 +1,10 @@
+<svg width="17" height="22" viewBox="0 0 17 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_377_20)">
+<path d="M2.862 21.708H14.094C15.066 21.708 15.768 21.492 16.254 21.006C16.74 20.52 16.956 19.818 16.956 18.9V8.856C16.956 7.938 16.74 7.236 16.254 6.75C15.768 6.264 15.066 6.048 14.094 6.048H11.34V7.236H14.094C14.634 7.236 15.066 7.398 15.336 7.668C15.606 7.938 15.768 8.37 15.768 8.964V18.792C15.768 19.332 15.606 19.764 15.336 20.088C15.066 20.412 14.634 20.52 14.094 20.52H2.916C2.376 20.52 1.944 20.358 1.674 20.088C1.404 19.818 1.242 19.386 1.242 18.792V8.91C1.242 8.37 1.404 7.938 1.674 7.614C1.944 7.29 2.376 7.182 2.916 7.182H5.67V5.994H2.862C1.89 5.994 1.188 6.21 0.702 6.696C0.216 7.182 0 7.938 0 8.856V18.846C0 19.764 0.216 20.52 0.702 20.952C1.188 21.384 1.944 21.708 2.862 21.708ZM8.478 14.202C8.64 14.202 8.802 14.148 8.91 14.04C9.018 13.932 9.072 13.77 9.072 13.608V3.078L9.018 1.674L9.882 2.592L11.556 4.32C11.664 4.428 11.826 4.482 11.988 4.482C12.15 4.482 12.258 4.428 12.366 4.32C12.474 4.212 12.528 4.104 12.528 3.942C12.528 3.78 12.474 3.672 12.366 3.564L8.91 0.216C8.856 0.162 8.748 0.108 8.694 0.054C8.64 0 8.586 0 8.478 0C8.424 0 8.316 0 8.262 0.054C8.208 0.108 8.1 0.162 8.046 0.216L4.644 3.564C4.482 3.672 4.428 3.78 4.428 3.942C4.428 4.104 4.482 4.212 4.59 4.32C4.698 4.428 4.806 4.482 4.968 4.482C5.13 4.482 5.292 4.428 5.4 4.32L7.074 2.592L7.938 1.674L7.884 3.078V13.608C7.884 13.77 7.938 13.878 8.046 14.04C8.154 14.202 8.316 14.202 8.478 14.202Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_377_20">
+<rect width="17" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/static/add-to-homescreen/assets/img/generic-more-button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M207.858-432Q188-432 174-446.142q-14-14.141-14-34Q160-500 174.142-514q14.141-14 34-14Q228-528 242-513.858q14 14.141 14 34Q256-460 241.858-446q-14.141 14-34 14Zm272 0Q460-432 446-446.142q-14-14.141-14-34Q432-500 446.142-514q14.141-14 34-14Q500-528 514-513.858q14 14.141 14 34Q528-460 513.858-446q-14.141 14-34 14Zm272 0Q732-432 718-446.142q-14-14.141-14-34Q704-500 718.142-514q14.141-14 34-14Q772-528 786-513.858q14 14.141 14 34Q800-460 785.858-446q-14.141 14-34 14Z"/></svg>

src/static/add-to-homescreen/assets/img/generic-vertical-down-bouncing-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="82" height="114" viewBox="0 0 82 114" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.3609 111.891C39.5088 114.039 42.9912 114.039 45.1391 111.891L80.1409 76.8891C82.2888 74.7412 82.2888 71.2588 80.1409 69.1109C77.993 66.963 74.5106 66.963 72.3627 69.1109L41.25 100.224L10.1373 69.1109C7.98942 66.963 4.50701 66.963 2.35913 69.1109C0.211243 71.2588 0.211243 74.7412 2.35913 76.8891L37.3609 111.891ZM35.75 -0.000549316L35.75 108.002H46.75L46.75 -0.000549316L35.75 -0.000549316Z" fill="#3478F6"/>
+</svg>

src/static/add-to-homescreen/assets/img/generic-vertical-up-bouncing-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="82" height="115" viewBox="0 0 82 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.4071 2.12778C43.2691 -0.0300287 39.7868 -0.0461506 37.629 2.09177L2.46551 36.9311C0.307703 39.0691 0.291581 42.5514 2.4295 44.7092C4.56741 46.867 8.04978 46.8832 10.2076 44.7452L41.464 13.7769L72.4323 45.0333C74.5702 47.1911 78.0526 47.2072 80.2104 45.0693C82.3682 42.9314 82.3843 39.449 80.2464 37.2912L45.4071 2.12778ZM46.4999 114.025L46.9999 6.02428L36.0001 5.97335L35.5001 113.975L46.4999 114.025Z" fill="#3478F6"/>
+</svg>

src/static/add-to-homescreen/assets/img/ios-chrome-bouncing-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="82" height="115" viewBox="0 0 82 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.4071 2.12778C43.2691 -0.0300287 39.7868 -0.0461506 37.629 2.09177L2.46551 36.9311C0.307703 39.0691 0.291581 42.5514 2.4295 44.7092C4.56741 46.867 8.04978 46.8832 10.2076 44.7452L41.464 13.7769L72.4323 45.0333C74.5702 47.1911 78.0526 47.2072 80.2104 45.0693C82.3682 42.9314 82.3843 39.449 80.2464 37.2912L45.4071 2.12778ZM46.4999 114.025L46.9999 6.02428L36.0001 5.97335L35.5001 113.975L46.4999 114.025Z" fill="#3478F6"/>
+</svg>

src/static/add-to-homescreen/assets/img/ios-chrome-more-button-2.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_539_19)">
+<path d="M1.5 22C1.1 22 0.75 21.85 0.45 21.55C0.15 21.25 0 20.9 0 20.5V7.775C0 7.375 0.15 7.025 0.45 6.725C0.75 6.425 1.1 6.275 1.5 6.275H5.725V7.775H1.5V20.5H14.5V7.775H10.225V6.275H14.5C14.9 6.275 15.25 6.425 15.55 6.725C15.85 7.025 16 7.375 16 7.775V20.5C16 20.9 15.85 21.25 15.55 21.55C15.25 21.85 14.9 22 14.5 22H1.5ZM7.225 14.325V2.9L5.025 5.1L3.95 4.025L7.975 0L12 4.025L10.925 5.1L8.725 2.9V14.325H7.225Z" fill="#3A3838"/>
+</g>
+<defs>
+<clipPath id="clip0_539_19">
+<rect width="16" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/static/add-to-homescreen/assets/img/ios-safari-add-to-home-screen-button-2.svg

@@ -0,0 +1,12 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_538_4)">
+<path d="M16.984 13.2512C16.983 13.7444 16.885 14.2325 16.696 14.6878C16.506 15.1431 16.229 15.5566 15.88 15.9047C15.532 16.2528 15.118 16.5287 14.662 16.7166C14.207 16.9046 13.719 17.0009 13.226 17L3.74401 16.9834C2.74901 16.9817 1.796 16.5844 1.094 15.8789C0.392002 15.1734 -0.00199242 14.2175 7.57729e-06 13.2216L0.016014 3.74879C0.017014 3.25563 0.115008 2.76747 0.304008 2.31218C0.494008 1.8569 0.771003 1.44339 1.12 1.09529C1.468 0.747176 1.88201 0.471286 2.33801 0.283356C2.79301 0.0954257 3.28101 -0.000854289 3.77401 5.71079e-06L13.256 0.0165758C14.251 0.0183158 15.204 0.415636 15.906 1.12113C16.608 1.82661 17.002 2.78247 17 3.77844L16.984 13.2512ZM15.759 3.95072C15.759 3.59929 15.691 3.25117 15.557 2.92625C15.423 2.60133 15.227 2.30597 14.979 2.05703C14.731 1.80809 14.437 1.61045 14.113 1.47539C13.789 1.34034 13.442 1.27051 13.091 1.26989L3.924 1.25387C3.573 1.25325 3.22501 1.32186 2.90101 1.45578C2.57601 1.5897 2.28101 1.78631 2.03201 2.03438C1.78401 2.28244 1.586 2.57712 1.452 2.90156C1.317 3.22601 1.24701 3.57389 1.24601 3.92532L1.23101 12.9839C1.23001 13.3353 1.29801 13.6834 1.43201 14.0083C1.56601 14.3333 1.762 14.6286 2.01 14.8776C2.258 15.1265 2.55201 15.3241 2.87601 15.4592C3.20001 15.5943 3.54801 15.6641 3.89901 15.6647L13.065 15.6807C13.416 15.6813 13.764 15.6127 14.089 15.4788C14.413 15.3449 14.708 15.1483 14.957 14.9002C15.205 14.6522 15.403 14.3575 15.538 14.033C15.672 13.7086 15.742 13.3607 15.743 13.0093L15.759 3.95072Z" fill="black"/>
+<path d="M12.1893 8.01892H5.13272C4.77843 8.01892 4.49121 8.30613 4.49121 8.66043V8.66043C4.49121 9.01473 4.77843 9.30194 5.13272 9.30194H12.1893C12.5436 9.30194 12.8308 9.01473 12.8308 8.66043C12.8308 8.30613 12.5436 8.01892 12.1893 8.01892Z" fill="black"/>
+<path d="M9.30176 12.1887V5.13211C9.30176 4.77781 9.01454 4.4906 8.66025 4.4906H8.66025C8.30595 4.4906 8.01874 4.77781 8.01874 5.13211V12.1887C8.01874 12.543 8.30595 12.8302 8.66025 12.8302C9.01454 12.8302 9.30176 12.543 9.30176 12.1887Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_538_4">
+<rect width="17" height="17" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/static/add-to-homescreen/assets/img/ios-safari-bouncing-arrow.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="33" height="33" viewBox="233.5 233.5 33 33" xml:space="preserve">
+<desc>Created with Fabric.js 5.3.0</desc>
+<defs>
+</defs>
+<g transform="matrix(0.05 0 0 0.05 250 250)" id="SxIUNrmYlm-UtiEj48uHt"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,122,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-480, 480)" d="M 480 -160 L 160 -480 L 202 -522 L 450 -274 L 450 -800 L 510 -800 L 510 -274 L 758 -522 L 800 -480 L 480 -160 Z" stroke-linecap="round" />
+</g>
+</svg>

src/static/add-to-homescreen/assets/img/ios-safari-ios26-more-grey-button.svg

@@ -0,0 +1 @@
+<svg width="22" xmlns="http://www.w3.org/2000/svg" height="22" id="screenshot-deae4d7e-8911-807f-8006-d1a9de3c1165" viewBox="0 0 22 22" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-deae4d7e-8911-807f-8006-d1a9de3c1165"><defs><clipPath id="frame-clip-deae4d7e-8911-807f-8006-d1a9de3c1165-render-1" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="0" y="0" width="22" height="22" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(#frame-clip-deae4d7e-8911-807f-8006-d1a9de3c1165-render-1)" fill="none"><g class="fills" id="fills-deae4d7e-8911-807f-8006-d1a9de3c1165"><rect rx="0" ry="0" x="0" y="0" width="22" height="22" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-deae4d7e-8911-807f-8006-d1a99b14a6fe"><g class="fills" id="fills-deae4d7e-8911-807f-8006-d1a99b14a6fe"><ellipse cx="11" cy="11" rx="11" ry="11" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(225, 223, 222); fill-opacity: 1;"/></g></g><g id="shape-deae4d7e-8911-807f-8006-d1aa4e1dc3bb"><g class="fills" id="fills-deae4d7e-8911-807f-8006-d1aa4e1dc3bb"><ellipse cx="14" cy="11" rx="1" ry="1" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(0, 0, 0); fill-opacity: 1;"/></g></g><g id="shape-529e0883-3585-806e-8006-d33b61f8d93b"><g class="fills" id="fills-529e0883-3585-806e-8006-d33b61f8d93b"><ellipse cx="11" cy="11" rx="1" ry="1" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(0, 0, 0); fill-opacity: 1;"/></g></g><g id="shape-529e0883-3585-806e-8006-d33b658407f5"><g class="fills" id="fills-529e0883-3585-806e-8006-d33b658407f5"><ellipse cx="8" cy="11" rx="1" ry="1" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(0, 0, 0); fill-opacity: 1;"/></g></g></g></g></g></g></g></g></svg>

src/static/add-to-homescreen/assets/img/ios-safari-ios26-more-white-button.svg

@@ -0,0 +1 @@
+<svg width="22" xmlns="http://www.w3.org/2000/svg" height="22" id="screenshot-deae4d7e-8911-807f-8006-d1ab0933fe5c" viewBox="0 0 22 22" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-deae4d7e-8911-807f-8006-d1ab0933fe5c"><defs><clipPath id="frame-clip-deae4d7e-8911-807f-8006-d1ab0933fe5c-render-1" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="0" y="0" width="22" height="22" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(#frame-clip-deae4d7e-8911-807f-8006-d1ab0933fe5c-render-1)" fill="none"><g class="fills" id="fills-deae4d7e-8911-807f-8006-d1ab0933fe5c"><rect rx="0" ry="0" x="0" y="0" width="22" height="22" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-deae4d7e-8911-807f-8006-d1ab0933fe5d"><g class="fills" id="fills-deae4d7e-8911-807f-8006-d1ab0933fe5d"><ellipse cx="11" cy="11" rx="11" ry="11" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(252, 252, 252); fill-opacity: 1;"/></g></g><g id="shape-deae4d7e-8911-807f-8006-d1ab0933fe5e"><g class="fills" id="fills-deae4d7e-8911-807f-8006-d1ab0933fe5e"><ellipse cx="15" cy="11" rx="1" ry="1" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(0, 0, 0); fill-opacity: 1;"/></g></g><g id="shape-529e0883-3585-806e-8006-d33ad86e6a89"><g class="fills" id="fills-529e0883-3585-806e-8006-d33ad86e6a89"><ellipse cx="11" cy="11" rx="1" ry="1" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(0, 0, 0); fill-opacity: 1;"/></g></g><g id="shape-529e0883-3585-806e-8006-d33adbcd1201"><g class="fills" id="fills-529e0883-3585-806e-8006-d33adbcd1201"><ellipse cx="7" cy="11" rx="1" ry="1" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(0, 0, 0); fill-opacity: 1;"/></g></g></g></g></g></g></g></g></svg>

src/static/add-to-homescreen/assets/img/ios-safari-ios26-share-button.svg

@@ -0,0 +1 @@
+<svg width="17" xmlns="http://www.w3.org/2000/svg" height="22" id="screenshot-deae4d7e-8911-807f-8006-d1a8485085de" viewBox="0 0 17 22" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-deae4d7e-8911-807f-8006-d1a8485085de" width="17" height="22" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-deae4d7e-8911-807f-8006-d1a848516fae" style="display: none;"><g class="fills" id="fills-deae4d7e-8911-807f-8006-d1a848516fae"><rect width="17" height="22" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: none;" ry="0" fill="none" rx="0" y="0"/></g></g><g id="shape-deae4d7e-8911-807f-8006-d1a848521481"><g class="fills" id="fills-deae4d7e-8911-807f-8006-d1a848521481"><path d="M2.768157958984375,21.20001220703125L13.631805419921875,21.20001220703125C14.571990966796875,21.20001220703125,15.251007080078125,20.9910888671875,15.72100830078125,20.52099609375C16.19110107421875,20.0509033203125,16.399993896484375,19.37188720703125,16.399993896484375,18.484130859375L16.399993896484375,8.7694091796875C16.399993896484375,7.8814697265625,16.19110107421875,7.2025146484375,15.72100830078125,6.73248291015625C15.251007080078125,6.26239013671875,14.571990966796875,6.053466796875,13.631805419921875,6.053466796875L10.96820068359375,6.053466796875L10.96820068359375,7.2025146484375L13.631805419921875,7.2025146484375C14.154098510742188,7.2025146484375,14.571990966796875,7.35919189453125,14.833099365234375,7.620361328125C15.09429931640625,7.8814697265625,15.251007080078125,8.29931640625,15.251007080078125,8.87384033203125L15.251007080078125,18.37957763671875C15.251007080078125,18.90191650390625,15.09429931640625,19.3197021484375,14.833099365234375,19.63311767578125C14.571990966796875,19.94647216796875,14.154098510742188,20.0509033203125,13.631805419921875,20.0509033203125L2.82037353515625,20.0509033203125C2.298095703125,20.0509033203125,1.8802490234375,19.89422607421875,1.619110107421875,19.63311767578125C1.3579559326171875,19.37188720703125,1.201263427734375,18.9541015625,1.201263427734375,18.37957763671875L1.201263427734375,8.8216552734375C1.201263427734375,8.29931640625,1.3579559326171875,7.8814697265625,1.619110107421875,7.568115234375C1.8802490234375,7.2547607421875,2.298095703125,7.1502685546875,2.82037353515625,7.1502685546875L5.4840850830078125,7.1502685546875L5.4840850830078125,6.001220703125L2.768157958984375,6.001220703125C1.828033447265625,6.001220703125,1.1490478515625,6.21014404296875,0.678985595703125,6.68023681640625C0.20892333984375,7.1502685546875,0,7.8814697265625,0,8.7694091796875L0,18.43182373046875C0,19.3197021484375,0.20892333984375,20.0509033203125,0.678985595703125,20.46881103515625C1.1490478515625,20.8865966796875,1.8802490234375,21.20001220703125,2.768157958984375,21.20001220703125ZM8.199996948242188,13.94012451171875C8.356689453125,13.94012451171875,8.513381958007812,13.88787841796875,8.617828369140625,13.78338623046875C8.7222900390625,13.67901611328125,8.774520874023438,13.52227783203125,8.774520874023438,13.3656005859375L8.774520874023438,3.18084716796875L8.7222900390625,1.8228759765625L9.557952880859375,2.7108154296875L11.177093505859375,4.38214111328125C11.281494140625,4.486572265625,11.438201904296875,4.538818359375,11.594894409179688,4.538818359375C11.751602172851562,4.538818359375,11.856094360351562,4.486572265625,11.960494995117188,4.38214111328125C12.06500244140625,4.2777099609375,12.117202758789062,4.1732177734375,12.117202758789062,4.01654052734375C12.117202758789062,3.85986328125,12.06500244140625,3.75537109375,11.960494995117188,3.65093994140625L8.617828369140625,0.4127197265625C8.565597534179688,0.3604736328125,8.461151123046875,0.3082275390625,8.408920288085938,0.25604248046875C8.356689453125,0.20379638671875,8.304458618164062,0.20379638671875,8.199996948242188,0.20379638671875C8.14776611328125,0.20379638671875,8.043304443359375,0.20379638671875,7.9910888671875,0.25604248046875C7.9388427734375,0.3082275390625,7.834381103515625,0.3604736328125,7.78216552734375,0.4127197265625L4.491729736328125,3.65093994140625C4.33502197265625,3.75537109375,4.282806396484375,3.85986328125,4.282806396484375,4.01654052734375C4.282806396484375,4.1732177734375,4.33502197265625,4.2777099609375,4.439483642578125,4.38214111328125C4.5439453125,4.486572265625,4.648406982421875,4.538818359375,4.8050994873046875,4.538818359375C4.9617767333984375,4.538818359375,5.11846923828125,4.486572265625,5.222930908203125,4.38214111328125L6.842041015625,2.7108154296875L7.677703857421875,1.8228759765625L7.62548828125,3.18084716796875L7.62548828125,13.3656005859375C7.62548828125,13.52227783203125,7.677703857421875,13.626708984375,7.78216552734375,13.78338623046875C7.886627197265625,13.94012451171875,8.043304443359375,13.94012451171875,8.199996948242188,13.94012451171875Z" style="fill: rgb(0, 0, 0); fill-opacity: 1;"/></g></g></g></svg>

src/static/add-to-homescreen/assets/img/ios-safari-sharing-api-button-2.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="22" viewBox="0 0 17 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.76815 21.2H13.6318C14.572 21.2 15.251 20.9911 15.721 20.521C16.1911 20.0509 16.4 19.3719 16.4 18.4841V8.7694C16.4 7.8815 16.1911 7.20252 15.721 6.73246C15.251 6.26239 14.572 6.05348 13.6318 6.05348H10.9682V7.20252H13.6318C14.1541 7.20252 14.572 7.35921 14.8331 7.62036C15.0943 7.8815 15.251 8.29934 15.251 8.87386V18.3796C15.251 18.9019 15.0943 19.3197 14.8331 19.6331C14.572 19.9465 14.1541 20.0509 13.6318 20.0509H2.82038C2.29809 20.0509 1.88025 19.8942 1.61911 19.6331C1.35796 19.3719 1.20127 18.9541 1.20127 18.3796V8.82163C1.20127 8.29934 1.35796 7.8815 1.61911 7.56813C1.88025 7.25475 2.29809 7.15029 2.82038 7.15029H5.48408V6.00125H2.76815C1.82803 6.00125 1.14904 6.21017 0.678981 6.68023C0.208917 7.15029 0 7.8815 0 8.7694V18.4318C0 19.3197 0.208917 20.0509 0.678981 20.4688C1.14904 20.8866 1.88025 21.2 2.76815 21.2ZM8.2 13.9401C8.35669 13.9401 8.51338 13.8879 8.61783 13.7834C8.72229 13.679 8.77452 13.5223 8.77452 13.3656V3.18087L8.72229 1.8229L9.55796 2.7108L11.1771 4.38214C11.2815 4.4866 11.4382 4.53883 11.5949 4.53883C11.7516 4.53883 11.8561 4.4866 11.9605 4.38214C12.065 4.27768 12.1172 4.17322 12.1172 4.01654C12.1172 3.85985 12.065 3.75539 11.9605 3.65093L8.61783 0.412714C8.5656 0.360484 8.46115 0.308255 8.40892 0.256026C8.35669 0.203796 8.30446 0.203796 8.2 0.203796C8.14777 0.203796 8.04331 0.203796 7.99108 0.256026C7.93885 0.308255 7.83439 0.360484 7.78217 0.412714L4.49172 3.65093C4.33503 3.75539 4.2828 3.85985 4.2828 4.01654C4.2828 4.17322 4.33503 4.27768 4.43949 4.38214C4.54395 4.4866 4.64841 4.53883 4.8051 4.53883C4.96178 4.53883 5.11847 4.4866 5.22293 4.38214L6.84204 2.7108L7.67771 1.8229L7.62548 3.18087V13.3656C7.62548 13.5223 7.67771 13.6267 7.78217 13.7834C7.88662 13.9401 8.04331 13.9401 8.2 13.9401Z" fill="#007AFF"/>
+</svg>

src/static/add-to-homescreen/roboto.css

@@ -0,0 +1,270 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* math */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2) format('woff2');
+  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2) format('woff2');
+  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* math */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2) format('woff2');
+  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2) format('woff2');
+  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* math */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2) format('woff2');
+  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2) format('woff2');
+  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/static/admin.html

@@ -78,6 +78,20 @@
       margin-bottom: 1rem;
     }
     .section-header h3 { font-size: 1rem; font-weight: 700; }
+
+    /* ── Gate icon picker ───────────────────────────────────────────────── */
+    .icon-opt {
+      background: var(--surface);
+      border: 1.5px solid var(--border);
+      border-radius: .4rem;
+      cursor: pointer;
+      font-size: 1.3rem;
+      line-height: 1;
+      padding: .3rem .45rem;
+      transition: border-color .12s, background .12s;
+    }
+    .icon-opt:hover { border-color: var(--primary); }
+    .icon-opt.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); }
   </style>
 </head>
 <body>
@@ -122,9 +136,10 @@
     <nav class="tabs">
       <button class="tab-btn active" data-tab="keypasses">Keypasses</button>
       <button class="tab-btn" data-tab="gates">Gates</button>
-      <button class="tab-btn admin-only" data-tab="credentials">AVConnect Credentials</button>
       <button class="tab-btn" data-tab="stats">Statistics</button>
+      <button class="tab-btn admin-only" data-tab="logs">Logs</button>
       <button class="tab-btn admin-only" data-tab="admins">Admins</button>
+      <button class="tab-btn admin-only" data-tab="credentials">API Credentials</button>
       <button class="tab-btn admin-only" data-tab="telegram">Notifications</button>
     </nav>
 
@@ -144,6 +159,7 @@
                 <th>Description</th>
                 <th>Gates</th>
                 <th>Expires</th>
+                <th>Schedule</th>
                 <th>Status</th>
                 <th></th>
               </tr>
@@ -166,8 +182,9 @@
                 <th>ID</th>
                 <th>Name</th>
                 <th>Group</th>
-                <th>Type</th>
+                <th>Icon</th>
-                <th>AVConnect Macro ID</th>
+                <th>Provider</th>
+                <th>Device / Macro ID</th>
                 <th>Status</th>
                 <th></th>
               </tr>
@@ -179,7 +196,10 @@
 
       <!-- ── Credentials pane ───────────────────────────────────────────── -->
       <div id="tab-credentials" class="tab-pane">
-        <h3 style="margin-bottom:1rem">AVConnect Credentials</h3>
+        <h3 style="margin-bottom:1rem">API Credentials</h3>
+
+        <!-- AVConnect -->
+        <h4 style="margin:0 0 .75rem">AVConnect</h4>
         <div class="card" style="max-width:440px">
           <form id="credentials-form">
             <div class="field">
@@ -195,14 +215,34 @@
             <button type="submit" class="btn btn-primary">Save</button>
           </form>
         </div>
+
+        <!-- Shelly Cloud -->
+        <h4 style="margin:1.5rem 0 .75rem">Shelly Cloud</h4>
+        <div class="card" style="max-width:440px">
+          <form id="shelly-credentials-form">
+            <div class="field">
+              <label for="shelly-server-uri">Server URI</label>
+              <input id="shelly-server-uri" type="url" autocomplete="off"
+                     placeholder="e.g. https://shelly-3.eu.shelly.cloud" />
+            </div>
+            <div class="field">
+              <label for="shelly-auth-key">Auth Key</label>
+              <input id="shelly-auth-key" type="password" autocomplete="new-password"
+                     placeholder="Leave empty to keep current" />
+            </div>
+            <p id="shelly-cred-error" class="error-msg hidden"></p>
+            <button type="submit" class="btn btn-primary">Save</button>
+          </form>
+        </div>
+
         <h3 style="margin:1.5rem 0 1rem">Mock Mode</h3>
         <div class="card" style="max-width:440px">
           <p style="color:var(--text-muted);font-size:.9rem;margin-bottom:1rem">
-            When enabled, gate open requests always succeed without contacting AVConnect.
+            When enabled, gate open requests always succeed without contacting any API.
           </p>
           <label style="display:flex;align-items:center;gap:.75rem;cursor:pointer;margin:0">
             <input type="checkbox" id="mock-toggle" style="width:1.1rem;height:1.1rem;flex-shrink:0;cursor:pointer" />
-            <span style="font-weight:600">Enable mock AVConnect</span>
+            <span style="font-weight:600">Enable mock mode</span>
           </label>
         </div>
       </div>
@@ -329,6 +369,54 @@
         </div>
       </div>
 
+      <!-- ── Logs pane ──────────────────────────────────────────────────── -->
+      <div id="tab-logs" class="tab-pane">
+        <div class="section-header">
+          <h3>Application Logs</h3>
+          <div style="display:flex;gap:.5rem;align-items:center">
+            <label style="display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--text-muted);cursor:pointer">
+              <input type="checkbox" id="logs-autorefresh" style="width:1rem;height:1rem;cursor:pointer" />
+              Auto-refresh
+            </label>
+            <button id="btn-refresh-logs" class="btn btn-ghost" style="font-size:.85rem;padding:.5rem 1rem">↻ Refresh</button>
+          </div>
+        </div>
+
+        <!-- Filter bar -->
+        <div style="display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;align-items:flex-end">
+          <div style="display:flex;flex-direction:column;gap:.3rem">
+            <label style="font-size:.8rem;font-weight:600;color:var(--text-muted)">Min level</label>
+            <select id="logs-level" style="width:130px">
+              <option value="">All</option>
+              <option value="DEBUG">DEBUG</option>
+              <option value="INFO" selected>INFO</option>
+              <option value="WARNING">WARNING</option>
+              <option value="ERROR">ERROR</option>
+              <option value="CRITICAL">CRITICAL</option>
+            </select>
+          </div>
+          <div style="display:flex;flex-direction:column;gap:.3rem">
+            <label style="font-size:.8rem;font-weight:600;color:var(--text-muted)">Lines (tail)</label>
+            <input id="logs-lines" type="number" value="200" min="10" max="2000"
+                   style="width:90px" />
+          </div>
+          <div style="display:flex;flex-direction:column;gap:.3rem">
+            <label style="font-size:.8rem;font-weight:600;color:var(--text-muted)">Filter text</label>
+            <input id="logs-search" type="text" placeholder="e.g. ERROR or keypass…"
+                   style="width:200px" autocomplete="off" />
+          </div>
+        </div>
+
+        <div id="logs-no-file" class="hidden" style="color:var(--text-muted);font-size:.9rem;padding:1rem 0">
+          Log file not configured — set the <code>LOG_FILE</code> environment variable to enable file logging.
+        </div>
+        <div class="card" style="padding:0;overflow:hidden">
+          <pre id="logs-output"
+               style="margin:0;padding:1rem;font-size:.78rem;line-height:1.55;overflow-x:auto;overflow-y:auto;max-height:60vh;white-space:pre-wrap;word-break:break-all;background:var(--surface);color:var(--text)"></pre>
+        </div>
+        <div style="margin-top:.5rem;font-size:.8rem;color:var(--text-muted)" id="logs-meta"></div>
+      </div>
+
     </div><!-- /.tab-content -->
   </div><!-- /#admin-view -->
 
@@ -381,6 +469,38 @@
             <div id="kp-gate-checks" style="display:flex;flex-direction:column;gap:.3rem"></div>
           </div>
         </div>
+        <div class="field">
+          <label style="margin-bottom:.5rem">Access schedule</label>
+          <label style="display:flex;align-items:center;gap:.75rem;cursor:pointer;color:var(--text);margin-bottom:.4rem">
+            <input type="checkbox" id="kp-no-schedule" checked style="width:1rem;height:1rem;flex-shrink:0" />
+            <span style="font-size:.9rem">Always accessible (no restriction)</span>
+          </label>
+          <div id="kp-schedule-wrap" style="display:none;flex-direction:column;gap:.75rem;padding:.75rem;background:var(--surface2);border-radius:8px;border:1px solid var(--border)">
+            <div>
+              <div style="font-size:.8rem;font-weight:600;color:var(--text-muted);margin-bottom:.4rem">Allowed days <span style="font-weight:400">(leave all unchecked for any day)</span></div>
+              <div style="display:flex;flex-wrap:wrap;gap:.4rem">
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-day" value="0" style="width:.9rem;height:.9rem" /> Mon</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-day" value="1" style="width:.9rem;height:.9rem" /> Tue</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-day" value="2" style="width:.9rem;height:.9rem" /> Wed</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-day" value="3" style="width:.9rem;height:.9rem" /> Thu</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-day" value="4" style="width:.9rem;height:.9rem" /> Fri</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-day" value="5" style="width:.9rem;height:.9rem" /> Sat</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-day" value="6" style="width:.9rem;height:.9rem" /> Sun</label>
+              </div>
+            </div>
+            <div style="display:flex;gap:.75rem;align-items:flex-end">
+              <div style="display:flex;flex-direction:column;gap:.3rem">
+                <label for="kp-time-start" style="font-size:.8rem;font-weight:600;color:var(--text-muted)">From</label>
+                <input id="kp-time-start" type="time" style="width:auto;font-size:.9rem" />
+              </div>
+              <div style="display:flex;flex-direction:column;gap:.3rem">
+                <label for="kp-time-end" style="font-size:.8rem;font-weight:600;color:var(--text-muted)">To</label>
+                <input id="kp-time-end" type="time" style="width:auto;font-size:.9rem" />
+              </div>
+              <span style="font-size:.8rem;color:var(--text-muted);padding-bottom:.35rem">(server local time)</span>
+            </div>
+          </div>
+        </div>
         <p id="kp-error" class="error-msg hidden"></p>
         <div class="modal-actions">
           <button type="button" id="kp-cancel" class="btn btn-ghost">Cancel</button>
@@ -418,6 +538,38 @@
             <div id="kp-edit-gate-checks" style="display:flex;flex-direction:column;gap:.3rem"></div>
           </div>
         </div>
+        <div class="field">
+          <label style="margin-bottom:.5rem">Access schedule</label>
+          <label style="display:flex;align-items:center;gap:.75rem;cursor:pointer;color:var(--text);margin-bottom:.4rem">
+            <input type="checkbox" id="kp-edit-no-schedule" checked style="width:1rem;height:1rem;flex-shrink:0" />
+            <span style="font-size:.9rem">Always accessible (no restriction)</span>
+          </label>
+          <div id="kp-edit-schedule-wrap" style="display:none;flex-direction:column;gap:.75rem;padding:.75rem;background:var(--surface2);border-radius:8px;border:1px solid var(--border)">
+            <div>
+              <div style="font-size:.8rem;font-weight:600;color:var(--text-muted);margin-bottom:.4rem">Allowed days <span style="font-weight:400">(leave all unchecked for any day)</span></div>
+              <div style="display:flex;flex-wrap:wrap;gap:.4rem">
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-edit-day" value="0" style="width:.9rem;height:.9rem" /> Mon</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-edit-day" value="1" style="width:.9rem;height:.9rem" /> Tue</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-edit-day" value="2" style="width:.9rem;height:.9rem" /> Wed</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-edit-day" value="3" style="width:.9rem;height:.9rem" /> Thu</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-edit-day" value="4" style="width:.9rem;height:.9rem" /> Fri</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-edit-day" value="5" style="width:.9rem;height:.9rem" /> Sat</label>
+                <label style="display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.88rem;padding:.25rem .5rem;background:var(--surface);border-radius:4px;border:1px solid var(--border)"><input type="checkbox" name="kp-edit-day" value="6" style="width:.9rem;height:.9rem" /> Sun</label>
+              </div>
+            </div>
+            <div style="display:flex;gap:.75rem;align-items:flex-end">
+              <div style="display:flex;flex-direction:column;gap:.3rem">
+                <label for="kp-edit-time-start" style="font-size:.8rem;font-weight:600;color:var(--text-muted)">From</label>
+                <input id="kp-edit-time-start" type="time" style="width:auto;font-size:.9rem" />
+              </div>
+              <div style="display:flex;flex-direction:column;gap:.3rem">
+                <label for="kp-edit-time-end" style="font-size:.8rem;font-weight:600;color:var(--text-muted)">To</label>
+                <input id="kp-edit-time-end" type="time" style="width:auto;font-size:.9rem" />
+              </div>
+              <span style="font-size:.8rem;color:var(--text-muted);padding-bottom:.35rem">(server local time)</span>
+            </div>
+          </div>
+        </div>
         <p id="kp-edit-error" class="error-msg hidden"></p>
         <div class="modal-actions">
           <button type="button" id="kp-edit-cancel" class="btn btn-ghost">Cancel</button>
@@ -443,15 +595,47 @@
           <datalist id="gate-group-list"></datalist>
         </div>
         <div class="field">
-          <label for="gate-type">Type</label>
+          <label>Icon</label>
-          <select id="gate-type">
+          <div style="display:flex;flex-direction:column;gap:.5rem">
-            <option value="car">Car</option>
+            <div style="display:flex;flex-wrap:wrap;gap:.35rem" id="gate-icon-grid">
-            <option value="pedestrian">Pedestrian</option>
+              <button type="button" class="icon-opt" data-icon="🚘">🚘</button>
-          </select>
+              <button type="button" class="icon-opt" data-icon="🚗">🚗</button>
+              <button type="button" class="icon-opt" data-icon="🚙">🚙</button>
+              <button type="button" class="icon-opt" data-icon="🚕">🚕</button>
+              <button type="button" class="icon-opt" data-icon="🚌">🚌</button>
+              <button type="button" class="icon-opt" data-icon="🚛">🚛</button>
+              <button type="button" class="icon-opt" data-icon="🚲">🚲</button>
+              <button type="button" class="icon-opt" data-icon="🏍️">🏍️</button>
+              <button type="button" class="icon-opt" data-icon="🚶">🚶</button>
+              <button type="button" class="icon-opt" data-icon="🧍">🧍</button>
+              <button type="button" class="icon-opt" data-icon="🚪">🚪</button>
+              <button type="button" class="icon-opt" data-icon="⛩️">⛩️</button>
+              <button type="button" class="icon-opt" data-icon="🏠">🏠</button>
+              <button type="button" class="icon-opt" data-icon="🏢">🏢</button>
+              <button type="button" class="icon-opt" data-icon="🔒">🔒</button>
+              <button type="button" class="icon-opt" data-icon="🔑">🔑</button>
+            </div>
+            <div style="display:flex;align-items:center;gap:.6rem">
+              <span id="gate-icon-preview" style="font-size:1.6rem;line-height:1;min-width:2rem;text-align:center">🚪</span>
+              <input id="gate-icon-input" type="text" placeholder="Type or paste any character…"
+                style="flex:1" maxlength="4" autocomplete="off" />
+            </div>
+          </div>
         </div>
         <div class="field">
+          <label for="gate-api-provider">API Provider</label>
+          <select id="gate-api-provider">
+            <option value="avconnect">AVConnect</option>
+            <option value="shelly">Shelly Cloud</option>
+          </select>
+        </div>
+        <div class="field" id="gate-avconnect-field">
           <label for="gate-avconnect-macro-id">AVConnect Macro ID</label>
-          <input id="gate-avconnect-macro-id" type="text" placeholder="e.g. 42" required />
+          <input id="gate-avconnect-macro-id" type="text" placeholder="e.g. 42" />
+        </div>
+        <div class="field" id="gate-shelly-field" style="display:none">
+          <label for="gate-shelly-device-id">Shelly Device ID</label>
+          <input id="gate-shelly-device-id" type="text" placeholder="e.g. ab12cd34ef56" />
         </div>
         <div class="field">
           <label for="gate-status">Status</label>

src/static/admin.js

@@ -132,12 +132,20 @@ function showToast(msg, isError = false) {
 }
 
 // ── Keypasses ─────────────────────────────────────────────────────────────────
+const _DAY_SHORT = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
+function formatSchedule(sched) {
+  if (!sched) return null;
+  const parts = [];
+  if (sched.days && sched.days.length > 0) parts.push(sched.days.map(d => _DAY_SHORT[d]).join(" "));
+  if (sched.time_start && sched.time_end) parts.push(`${sched.time_start}–${sched.time_end}`);
+  return parts.length ? parts.join(" · ") : null;
+}
 async function loadKeypasses() {
   const rows = await api("GET", "/api/admin/keypasses");
   const tbody = document.getElementById("keypasses-body");
   tbody.innerHTML = "";
   if (!rows.length) {
-    tbody.innerHTML = '<tr><td colspan="5" style="color:var(--text-muted);text-align:center;padding:2rem">No keypasses yet</td></tr>';
+    tbody.innerHTML = '<tr><td colspan="7" style="color:var(--text-muted);text-align:center;padding:2rem">No keypasses yet</td></tr>';
     return;
   }
   for (const kp of rows) {
@@ -156,18 +164,24 @@ async function loadKeypasses() {
       ? `<span style="white-space:nowrap">${fmtDate(kp.expires_at)}</span>`
       : '<span style="color:var(--text-muted)">Never</span>';
 
+    const schedText = formatSchedule(kp.schedule);
+    const schedCell = schedText
+      ? `<span style="font-size:.85em;white-space:nowrap">${esc(schedText)}</span>`
+      : '<span style="color:var(--text-muted)">Always</span>';
+
     const tr = document.createElement("tr");
     tr.innerHTML = `
       <td><code style="font-size:.95em;letter-spacing:.06em">${esc(kp.code)}</code></td>
       <td>${esc(kp.description)}</td>
       <td>${gatesCell}</td>
       <td>${expiresCell}</td>
+      <td>${schedCell}</td>
       <td>${badge}</td>
       <td><div style="display:flex;gap:.5rem;justify-content:flex-end;white-space:nowrap">
         ${!kp.revoked && expMs >= now ? `<button class="btn btn-ghost" style="font-size:.8rem;padding:.35rem .9rem"
           data-qr-kp-id="${kp.id}" data-qr-kp-desc="${esc(kp.description)}">QR</button>` : ""}
       ${!kp.revoked ? `<button class="btn btn-ghost" style="font-size:.8rem;padding:.35rem .9rem"
-          data-edit-kp='${JSON.stringify({id:kp.id, description:kp.description, expires_at:kp.expires_at, allowed_gate_ids:kp.allowed_gate_ids})}'>Edit</button>` : ""}
+          data-edit-kp='${JSON.stringify({id:kp.id, description:kp.description, expires_at:kp.expires_at, allowed_gate_ids:kp.allowed_gate_ids, schedule:kp.schedule})}'>Edit</button>` : ""}
         ${!kp.revoked && expMs >= now ? `<button class="btn btn-danger" style="font-size:.8rem;padding:.35rem .9rem"
           data-kp-id="${kp.id}">Revoke</button>` : ""}
       </div></td>`;
@@ -203,13 +217,24 @@ async function loadKeypasses() {
         const lbl = document.createElement("label");
         lbl.style.cssText = "display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.5rem .75rem;background:var(--surface2);border-radius:6px;border:1px solid var(--border);margin:0";
         const checked = allowedIds && allowedIds.includes(g.id) ? "checked" : "";
-        lbl.innerHTML = `<input type="checkbox" name="kp-edit-gate" value="${g.id}" ${checked} style="width:1rem;height:1rem;flex-shrink:0" /> <span>${esc(g.name)}</span> <span style="color:var(--text-muted);font-size:.85em;margin-left:auto">${g.gate_type === 'car' ? '🚘 Car' : '🚶 Pedestrian'}</span>`;
+        lbl.innerHTML = `<input type="checkbox" name="kp-edit-gate" value="${g.id}" ${checked} style="width:1rem;height:1rem;flex-shrink:0" /> <span>${esc(g.name)}</span> <span style="color:var(--text-muted);font-size:.85em;margin-left:auto">${g.gate_icon || ''}</span>`;
         checksContainer.appendChild(lbl);
       }
       const allGatesCb = document.getElementById("kp-edit-all-gates");
       allGatesCb.checked = !allowedIds;
       checksContainer.style.display = allowedIds ? "flex" : "none";
       document.getElementById("kp-edit-error").classList.add("hidden");
+      // Schedule
+      const sched = kp.schedule;
+      const noSchedCb = document.getElementById("kp-edit-no-schedule");
+      const schedWrap = document.getElementById("kp-edit-schedule-wrap");
+      noSchedCb.checked = !sched;
+      schedWrap.style.display = sched ? "flex" : "none";
+      document.querySelectorAll('input[name="kp-edit-day"]').forEach(cb => {
+        cb.checked = sched && sched.days ? sched.days.includes(parseInt(cb.value)) : false;
+      });
+      document.getElementById("kp-edit-time-start").value = (sched && sched.time_start) || "";
+      document.getElementById("kp-edit-time-end").value = (sched && sched.time_end) || "";
       document.getElementById("kp-edit-modal").classList.remove("hidden");
     });
   });
@@ -281,12 +306,18 @@ document.getElementById("btn-new-keypass").addEventListener("click", () => {
   for (const g of _allGates) {
     const lbl = document.createElement("label");
     lbl.style.cssText = "display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.5rem .75rem;background:var(--surface2);border-radius:6px;border:1px solid var(--border);margin:0";
-    lbl.innerHTML = `<input type="checkbox" name="kp-gate" value="${g.id}" style="width:1rem;height:1rem;flex-shrink:0" /> <span>${esc(g.name)}</span> <span style="color:var(--text-muted);font-size:.85em;margin-left:auto">${g.gate_type === 'car' ? '🚘 Car' : '🚶 Pedestrian'}</span>`;
+    lbl.innerHTML = `<input type="checkbox" name="kp-gate" value="${g.id}" style="width:1rem;height:1rem;flex-shrink:0" /> <span>${esc(g.name)}</span> <span style="color:var(--text-muted);font-size:.85em;margin-left:auto">${g.gate_icon || ''}</span>`;
     checksContainer.appendChild(lbl);
   }
   // Reset All gates checkbox
   document.getElementById("kp-all-gates").checked = true;
   checksContainer.style.display = "none";
+  // Reset schedule
+  document.getElementById("kp-no-schedule").checked = true;
+  document.getElementById("kp-schedule-wrap").style.display = "none";
+  document.querySelectorAll('input[name="kp-day"]').forEach(cb => cb.checked = false);
+  document.getElementById("kp-time-start").value = "";
+  document.getElementById("kp-time-end").value = "";
   document.getElementById("kp-error").classList.add("hidden");
   document.getElementById("keypass-modal").classList.remove("hidden");
 });
@@ -310,6 +341,11 @@ document.getElementById("kp-never-expires").addEventListener("change", e => {
   kpExpInput.style.opacity = e.target.checked ? ".4" : "";
 });
 
+// Schedule toggle
+document.getElementById("kp-no-schedule").addEventListener("change", e => {
+  document.getElementById("kp-schedule-wrap").style.display = e.target.checked ? "none" : "flex";
+});
+
 // All gates toggle
 document.getElementById("kp-all-gates").addEventListener("change", e => {
   const checksContainer = document.getElementById("kp-gate-checks");
@@ -337,6 +373,9 @@ document.getElementById("kp-edit-never").addEventListener("change", e => {
   expInput.disabled = e.target.checked;
   expInput.style.opacity = e.target.checked ? ".4" : "";
 });
+document.getElementById("kp-edit-no-schedule").addEventListener("change", e => {
+  document.getElementById("kp-edit-schedule-wrap").style.display = e.target.checked ? "none" : "flex";
+});
 document.getElementById("kp-edit-all-gates").addEventListener("change", e => {
   const checksContainer = document.getElementById("kp-edit-gate-checks");
   if (e.target.checked) {
@@ -368,10 +407,22 @@ document.getElementById("kp-edit-form").addEventListener("submit", async e => {
   const expires_at = never ? null : new Date(document.getElementById("kp-edit-expires").value).toISOString();
   const allGates = document.getElementById("kp-edit-all-gates").checked;
   const gate_ids = allGates ? [] : Array.from(document.querySelectorAll('input[name="kp-edit-gate"]:checked')).map(cb => parseInt(cb.value));
+  const noEditSched = document.getElementById("kp-edit-no-schedule").checked;
+  let schedule = null;
+  if (!noEditSched) {
+    const days = Array.from(document.querySelectorAll('input[name="kp-edit-day"]:checked')).map(cb => parseInt(cb.value));
+    const time_start = document.getElementById("kp-edit-time-start").value || undefined;
+    const time_end = document.getElementById("kp-edit-time-end").value || undefined;
+    schedule = {};
+    if (days.length) schedule.days = days;
+    if (time_start) schedule.time_start = time_start;
+    if (time_end) schedule.time_end = time_end;
+    if (!Object.keys(schedule).length) schedule = null;
+  }
   const errEl = document.getElementById("kp-edit-error");
   errEl.classList.add("hidden");
   try {
-    await api("PATCH", `/api/admin/keypasses/${id}`, { description, expires_at, gate_ids });
+    await api("PATCH", `/api/admin/keypasses/${id}`, { description, expires_at, gate_ids, schedule });
     document.getElementById("kp-edit-modal").classList.add("hidden");
     showToast("Keypass updated");
     loadKeypasses();
@@ -390,10 +441,22 @@ document.getElementById("keypass-form").addEventListener("submit", async e => {
   const expires_at = neverExpires ? null : new Date(document.getElementById("kp-expires").value).toISOString();
   const allGates = document.getElementById("kp-all-gates").checked;
   const gate_ids = allGates ? [] : Array.from(document.querySelectorAll('input[name="kp-gate"]:checked')).map(cb => parseInt(cb.value));
+  const noSched = document.getElementById("kp-no-schedule").checked;
+  let schedule = null;
+  if (!noSched) {
+    const days = Array.from(document.querySelectorAll('input[name="kp-day"]:checked')).map(cb => parseInt(cb.value));
+    const time_start = document.getElementById("kp-time-start").value || undefined;
+    const time_end = document.getElementById("kp-time-end").value || undefined;
+    schedule = {};
+    if (days.length) schedule.days = days;
+    if (time_start) schedule.time_start = time_start;
+    if (time_end) schedule.time_end = time_end;
+    if (!Object.keys(schedule).length) schedule = null;
+  }
   const errEl = document.getElementById("kp-error");
   errEl.classList.add("hidden");
   try {
-    await api("POST", "/api/admin/keypasses", { description: desc, expires_at, gate_ids, code, charset, length });
+    await api("POST", "/api/admin/keypasses", { description: desc, expires_at, gate_ids, code, charset, length, schedule });
     document.getElementById("keypass-modal").classList.add("hidden");
     showToast("Keypass created");
     loadKeypasses();
@@ -429,13 +492,16 @@ async function loadGates() {
     const badge = g.status === "enabled"
       ? '<span class="badge badge-green">Enabled</span>'
       : '<span class="badge badge-muted">Disabled</span>';
+    const providerLabel = g.api_provider === 'shelly' ? 'Shelly' : 'AVConnect';
+    const deviceId = g.api_provider === 'shelly' ? (g.shelly_device_id || '') : (g.avconnect_macro_id || '');
     const tr = document.createElement("tr");
     tr.innerHTML = `
       <td>${g.id}</td>
       <td>${esc(g.name)}</td>
-      <td>${g.group_name ? esc(g.group_name) : '<span style="color:var(--text-muted)">—</span>'}</td>
+      <td>${g.group_name ? esc(g.group_name) : '<span style="color:var(--text-muted)">\u2014</span>'}</td>
-      <td>${g.gate_type === "car" ? "🚘 Car" : "🚶 Pedestrian"}</td>
+      <td>${g.gate_icon || ''}</td>
-      <td><code style="font-size:.85em">${esc(g.avconnect_macro_id)}</code></td>
+      <td><span style="font-size:.85em">${esc(providerLabel)}</span></td>
+      <td><code style="font-size:.85em">${esc(deviceId)}</code></td>
       <td>${badge}</td>
       <td><div style="text-align:right;white-space:nowrap;display:flex;gap:.5rem;justify-content:flex-end">
         ${g.status === 'enabled' ? `<button class="btn btn-primary" style="font-size:.8rem;padding:.35rem .9rem"
@@ -475,13 +541,40 @@ async function loadGates() {
   });
 }
 
+function _setGateIcon(icon) {
+  document.getElementById("gate-icon-input").value = icon;
+  document.getElementById("gate-icon-preview").textContent = icon;
+  document.querySelectorAll("#gate-icon-grid .icon-opt").forEach(btn => {
+    btn.classList.toggle("selected", btn.dataset.icon === icon);
+  });
+}
+
+// Icon grid clicks + manual input sync
+document.getElementById("gate-icon-grid").addEventListener("click", e => {
+  const btn = e.target.closest(".icon-opt");
+  if (btn) _setGateIcon(btn.dataset.icon);
+});
+document.getElementById("gate-icon-input").addEventListener("input", e => {
+  const val = [...e.target.value].slice(0, 2).join(""); // keep at most one composed char
+  if (val) {
+    document.getElementById("gate-icon-preview").textContent = val;
+    document.querySelectorAll("#gate-icon-grid .icon-opt").forEach(btn => {
+      btn.classList.toggle("selected", btn.dataset.icon === val);
+    });
+  }
+});
+
 function openGateModal(gate = null) {
   document.getElementById("gate-modal-title").textContent = gate ? "Edit Gate" : "Add Gate";
   document.getElementById("gate-edit-id").value = gate ? gate.id : "";
   document.getElementById("gate-name").value = gate ? gate.name : "";
   document.getElementById("gate-group-name").value = gate ? (gate.group_name || "") : "";
-  document.getElementById("gate-type").value = gate ? gate.gate_type : "car";
+  _setGateIcon(gate ? (gate.gate_icon || "🚪") : "🚪");
-  document.getElementById("gate-avconnect-macro-id").value = gate ? gate.avconnect_macro_id : "";
+  const provider = gate ? (gate.api_provider || "avconnect") : "avconnect";
+  document.getElementById("gate-api-provider").value = provider;
+  document.getElementById("gate-avconnect-macro-id").value = gate ? (gate.avconnect_macro_id || "") : "";
+  document.getElementById("gate-shelly-device-id").value = gate ? (gate.shelly_device_id || "") : "";
+  _updateGateProviderFields(provider);
   document.getElementById("gate-status").value = gate ? gate.status : "enabled";
   document.getElementById("gate-lat").value = (gate && gate.lat != null) ? gate.lat : "";
   document.getElementById("gate-lon").value = (gate && gate.lon != null) ? gate.lon : "";
@@ -498,17 +591,41 @@ function openGateModal(gate = null) {
   document.getElementById("gate-modal").classList.remove("hidden");
 }
 
+function _updateGateProviderFields(provider) {
+  const avField = document.getElementById("gate-avconnect-field");
+  const shellyField = document.getElementById("gate-shelly-field");
+  const avInput = document.getElementById("gate-avconnect-macro-id");
+  const shellyInput = document.getElementById("gate-shelly-device-id");
+  if (provider === "shelly") {
+    avField.style.display = "none";
+    shellyField.style.display = "";
+    avInput.required = false;
+    shellyInput.required = true;
+  } else {
+    avField.style.display = "";
+    shellyField.style.display = "none";
+    avInput.required = true;
+    shellyInput.required = false;
+  }
+}
+
 document.getElementById("btn-new-gate").addEventListener("click", () => openGateModal());
 document.getElementById("gate-cancel").addEventListener("click", () => {
   document.getElementById("gate-modal").classList.add("hidden");
 });
+document.getElementById("gate-api-provider").addEventListener("change", e => {
+  _updateGateProviderFields(e.target.value);
+});
 document.getElementById("gate-form").addEventListener("submit", async e => {
   e.preventDefault();
   const editId = document.getElementById("gate-edit-id").value;
+  const provider = document.getElementById("gate-api-provider").value;
   const payload = {
     name: document.getElementById("gate-name").value.trim(),
-    gate_type: document.getElementById("gate-type").value,
+    gate_icon: document.getElementById("gate-icon-input").value.trim() || "\uD83D\uDEAA",
-    avconnect_macro_id: document.getElementById("gate-avconnect-macro-id").value.trim(),
+    api_provider: provider,
+    avconnect_macro_id: provider === "avconnect" ? document.getElementById("gate-avconnect-macro-id").value.trim() : null,
+    shelly_device_id: provider === "shelly" ? document.getElementById("gate-shelly-device-id").value.trim() : null,
     status: document.getElementById("gate-status").value,
     group_name: document.getElementById("gate-group-name").value.trim() || null,
     lat: document.getElementById("gate-lat").value !== "" ? parseFloat(document.getElementById("gate-lat").value) : null,
@@ -534,11 +651,17 @@ document.getElementById("gate-form").addEventListener("submit", async e => {
 // ── Credentials ───────────────────────────────────────────────────────────────
 async function loadCredentials() {
   try {
-    const list = await api("GET", "/api/admin/credentials");
+    const list = await api("GET", "/api/admin/credentials/avconnect");
     if (list.length) {
       document.getElementById("cred-username").value = list[0].username;
     }
   } catch { /* no creds yet */ }
+  try {
+    const shelly = await api("GET", "/api/admin/credentials/shelly");
+    if (shelly) {
+      document.getElementById("shelly-server-uri").value = shelly.server_uri;
+    }
+  } catch { /* no shelly creds yet */ }
   try {
     const { enabled } = await api("GET", "/api/admin/credentials/mock");
     document.getElementById("mock-toggle").checked = enabled;
@@ -567,9 +690,30 @@ document.getElementById("credentials-form").addEventListener("submit", async e =
     return;
   }
   try {
-    await api("PUT", "/api/admin/credentials", { username, password });
+    await api("PUT", "/api/admin/credentials/avconnect", { username, password });
     document.getElementById("cred-password").value = "";
-    showToast("Credentials saved");
+    showToast("AVConnect credentials saved");
+  } catch (e) {
+    errEl.textContent = e.message;
+    errEl.classList.remove("hidden");
+  }
+});
+
+document.getElementById("shelly-credentials-form").addEventListener("submit", async e => {
+  e.preventDefault();
+  const server_uri = document.getElementById("shelly-server-uri").value.trim();
+  const auth_key = document.getElementById("shelly-auth-key").value;
+  const errEl = document.getElementById("shelly-cred-error");
+  errEl.classList.add("hidden");
+  if (!auth_key) {
+    errEl.textContent = "Auth key is required.";
+    errEl.classList.remove("hidden");
+    return;
+  }
+  try {
+    await api("PUT", "/api/admin/credentials/shelly", { server_uri, auth_key });
+    document.getElementById("shelly-auth-key").value = "";
+    showToast("Shelly Cloud credentials saved");
   } catch (e) {
     errEl.textContent = e.message;
     errEl.classList.remove("hidden");
@@ -872,6 +1016,102 @@ document.getElementById("btn-tg-test").addEventListener("click", async () => {
   }
 });
 
+// ── Logs ──────────────────────────────────────────────────────────────────────
+let _logsAutoRefreshTimer = null;
+
+const _LEVEL_COLOR = {
+  DEBUG:    "color:var(--text-muted)",
+  INFO:     "color:var(--text)",
+  WARNING:  "color:#d97706",
+  ERROR:    "color:#ef4444",
+  CRITICAL: "color:#ef4444;font-weight:700",
+};
+
+function _colorLogLine(line) {
+  const escaped = esc(line);
+  for (const [lvl, style] of Object.entries(_LEVEL_COLOR)) {
+    if (line.includes(lvl)) {
+      return `<span style="${style}">${escaped}</span>`;
+    }
+  }
+  return escaped;
+}
+
+async function loadLogs() {
+  const level = document.getElementById("logs-level").value;
+  const lines = parseInt(document.getElementById("logs-lines").value, 10) || 200;
+  const search = document.getElementById("logs-search").value.trim().toLowerCase();
+  const pre = document.getElementById("logs-output");
+  const noFile = document.getElementById("logs-no-file");
+  const meta = document.getElementById("logs-meta");
+
+  const params = new URLSearchParams({ lines });
+  if (level) params.set("level", level);
+
+  try {
+    const data = await api("GET", `/api/admin/logs?${params}`);
+    noFile.classList.add("hidden");
+    pre.parentElement.style.display = "";
+
+    let rows = data.lines;
+    if (search) {
+      rows = rows.filter(l => l.toLowerCase().includes(search));
+    }
+
+    if (!rows.length) {
+      pre.innerHTML = '<span style="color:var(--text-muted)">No log entries match the current filters.</span>';
+    } else {
+      pre.innerHTML = rows.map(_colorLogLine).join("\n");
+      // Scroll to bottom so the latest entries are visible
+      pre.scrollTop = pre.scrollHeight;
+    }
+
+    const ts = new Date().toLocaleTimeString();
+    meta.textContent = `${rows.length} line${rows.length !== 1 ? "s" : ""} shown${data.log_file ? ` · ${data.log_file}` : ""} · last refreshed ${ts}`;
+  } catch (err) {
+    if (err.message && err.message.includes("not configured")) {
+      noFile.classList.remove("hidden");
+      pre.parentElement.style.display = "none";
+      meta.textContent = "";
+    } else {
+      showToast(err.message, true);
+    }
+  }
+}
+
+function _startLogsAutoRefresh() {
+  _stopLogsAutoRefresh();
+  _logsAutoRefreshTimer = setInterval(loadLogs, 5000);
+}
+
+function _stopLogsAutoRefresh() {
+  if (_logsAutoRefreshTimer !== null) {
+    clearInterval(_logsAutoRefreshTimer);
+    _logsAutoRefreshTimer = null;
+  }
+}
+
+document.getElementById("btn-refresh-logs").addEventListener("click", loadLogs);
+
+document.getElementById("logs-autorefresh").addEventListener("change", e => {
+  if (e.target.checked) _startLogsAutoRefresh();
+  else _stopLogsAutoRefresh();
+});
+
+// Stop auto-refresh when leaving the logs tab; restart when entering it
+document.querySelectorAll(".tab-btn").forEach(btn => {
+  btn.addEventListener("click", () => {
+    if (btn.dataset.tab === "logs") {
+      if (document.getElementById("logs-autorefresh").checked) {
+        _startLogsAutoRefresh();
+      }
+      loadLogs();
+    } else {
+      _stopLogsAutoRefresh();
+    }
+  });
+});
+
 // ── Load all data ─────────────────────────────────────────────────────────────
 function loadAllData() {
   const isAdmin = _tokenPayload().scope === "admin";

src/static/app.js

@@ -118,7 +118,6 @@ async function updateMap(gates) {
     const popup = L.popup().setContent(
       `<div style="min-width:140px">
         <strong>${gate.name}</strong><br>
-        <em style="font-size:.85em;color:#666">${gate.gate_type === "car" ? "Car gate" : "Pedestrian gate"}</em><br>
         <a href="https://www.google.com/maps/dir/?api=1&destination=${gate.lat},${gate.lon}"
            target="_blank" rel="noopener"
            style="display:inline-block;margin-top:.5em;font-size:.85em;text-decoration:underline">
@@ -126,7 +125,7 @@ async function updateMap(gates) {
         </a>
       </div>`
     );
-    const marker = L.marker([gate.lat, gate.lon], { icon: _gateIcon(gate.gate_type) })
+    const marker = L.marker([gate.lat, gate.lon], { icon: _gateIcon() })
       .bindPopup(popup)
       .addTo(_map);
     _mapMarkers.push(marker);
@@ -189,9 +188,9 @@ function renderGates(gates) {
     groupGrid.className = "gate-group-grid";
 
     for (const gate of groups.get(key)) {
-      const icon = gate.gate_type === "car" ? "🚘" : "🚶";
+      const icon = gate.gate_icon || '🚪';
       const btn = document.createElement("button");
-      btn.className = `gate-btn ${gate.gate_type}`;
+      btn.className = "gate-btn";
       btn.dataset.gateId = gate.id;
       btn.innerHTML = `<span class="icon">${icon}</span><span>${gate.name}</span>`;
       btn.addEventListener("click", () => handleOpenGate(btn, gate));
@@ -343,33 +342,43 @@ if ("serviceWorker" in navigator) {
   navigator.serviceWorker.register("/sw.js").catch(() => {});
 }
 
-// ── PWA install banner ────────────────────────────────────────────────────────
+// ── Add to Home Screen ────────────────────────────────────────────────────────
+const _isInstalled = window.matchMedia("(display-mode: standalone)").matches || !!navigator.standalone;
+const _installAppBtn = document.getElementById("install-app-btn");
+const _installBanner = document.getElementById("install-banner");
 const INSTALL_DISMISSED_KEY = "lg_install_dismissed";
-let _deferredInstallPrompt = null;
 
-window.addEventListener("beforeinstallprompt", (e) => {
+if (_isInstalled) {
-  e.preventDefault();
+  // Already installed — hide both
-  if (sessionStorage.getItem(INSTALL_DISMISSED_KEY)) return;
+  _installAppBtn.style.display = "none";
-  _deferredInstallPrompt = e;
+} else if (typeof window.AddToHomeScreen === "function") {
-  document.getElementById("install-banner").classList.remove("hidden");
+  const _addToHomeScreenInstance = window.AddToHomeScreen({
-});
+    appName: "Lagomare Gates",
+    appIconUrl: "/static/images/mobile_icon.png",
+    assetUrl: "/static/add-to-homescreen/assets/img/",
+    maxModalDisplayCount: -1,
+    displayOptions: { showMobile: true, showDesktop: true },
+    allowClose: true,
+    showArrow: true,
+  });
 
-document.getElementById("install-btn").addEventListener("click", async () => {
+  // Header button — always triggers the library UI
-  const banner = document.getElementById("install-banner");
+  _installAppBtn.addEventListener("click", () => {
-  banner.classList.add("hidden");
+    _addToHomeScreenInstance.show("en");
-  if (!_deferredInstallPrompt) return;
+  });
-  _deferredInstallPrompt.prompt();
-  await _deferredInstallPrompt.userChoice;
-  _deferredInstallPrompt = null;
-});
 
-document.getElementById("install-dismiss").addEventListener("click", () => {
+  // Auto-show banner once per session
-  document.getElementById("install-banner").classList.add("hidden");
+  if (!sessionStorage.getItem(INSTALL_DISMISSED_KEY)) {
-  sessionStorage.setItem(INSTALL_DISMISSED_KEY, "1");
+    _installBanner.classList.remove("hidden");
-  _deferredInstallPrompt = null;
+  }
-});
 
-window.addEventListener("appinstalled", () => {
+  document.getElementById("install-btn").addEventListener("click", () => {
-  document.getElementById("install-banner").classList.add("hidden");
+    _installBanner.classList.add("hidden");
-  _deferredInstallPrompt = null;
+    _addToHomeScreenInstance.show("en");
-});
+  });
+
+  document.getElementById("install-dismiss").addEventListener("click", () => {
+    _installBanner.classList.add("hidden");
+    sessionStorage.setItem(INSTALL_DISMISSED_KEY, "1");
+  });
+}

src/static/images/add_to_home_screen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 1.01L8 1c-1.1 0-2 .9-2 2v3h2V5h10v14H8v-1H6v3c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM10 15h2V8H5v2h3.59L3 15.59 4.41 17 10 11.41z"/></svg>

src/static/index.html

@@ -11,7 +11,8 @@
   <link rel="icon" type="image/svg+xml" href="/static/images/logo.svg" />
   <link rel="apple-touch-icon" href="/static/images/mobile_icon.png" />
   <link rel="stylesheet" href="/static/style.css" />
-  <link rel="stylesheet" href="/static/leaflet.css" />
+  <link rel="stylesheet" href="/static/leaflet/leaflet.css" />
+  <link rel="stylesheet" href="/static/add-to-homescreen/add-to-homescreen.min.css" />
 
   <style>
     /* ── Login view ──────────────────────────────────────────────────────── */
@@ -148,6 +149,9 @@
         <div class="app-header h2">Lagomare Gates</div>
       </div>
       <div style="display:flex;align-items:center;gap:.5rem">
+        <button id="install-app-btn" class="btn btn-primary" style="padding:.4rem .6rem;line-height:0" aria-label="Add to Home Screen" title="Add to Home Screen">
+          <img src="/static/images/add_to_home_screen.svg" alt="" style="width:22px;height:22px;display:block;filter:invert(1)" />
+        </button>
         <button id="map-btn" class="btn btn-ghost hidden" style="padding:.4rem .6rem;line-height:0" aria-label="Show map">
           <img src="/static/images/map.svg" alt="Map" style="width:22px;height:22px;filter:invert(1)" />
         </button>
@@ -184,7 +188,7 @@
     </div>
   </div>
 
-  <!-- ── PWA install banner ──────────────────────────────────────────────── -->
+  <!-- ── PWA install banner ─────────────────────────────────────────────────────── -->
   <div id="install-banner" class="install-banner hidden" role="banner" aria-label="Install app">
     <div class="install-banner-body">
       <img src="/static/images/logo.svg" alt="" class="install-banner-icon" />
@@ -199,7 +203,8 @@
     </div>
   </div>
 
-  <script src="/static/leaflet.js"></script>
+  <script src="/static/leaflet/leaflet.js"></script>
+  <script src="/static/add-to-homescreen/add-to-homescreen.min.js"></script>
   <script src="/static/app.js"></script>
 </body>
 </html>

src/static/manifest.json

@@ -13,7 +13,29 @@
       "src": "/static/images/mobile_icon.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "/static/images/mobile_icon.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/static/images/screenshot-mobile.png",
+      "sizes": "390x844",
+      "type": "image/png",
+      "form_factor": "narrow",
+      "label": "Lagomare Gates login screen"
+    },
+    {
+      "src": "/static/images/screenshot-wide.png",
+      "sizes": "1280x800",
+      "type": "image/png",
+      "form_factor": "wide",
+      "label": "Lagomare Gates login screen"
     }
   ],
   "lang": "en"

src/static/style.css

@@ -105,8 +105,7 @@ label {
   overflow: hidden;
 }
 .gate-btn .icon { font-size: 1.8rem; line-height: 1; }
-.gate-btn.car         { background: var(--primary);  color: #fff; }
+.gate-btn         { background: var(--primary);  color: #fff; }
-.gate-btn.pedestrian  { background: var(--green);    color: #fff; }
 .gate-btn:not(:disabled):active { transform: scale(.94); }
 .gate-btn:disabled { opacity: .55; cursor: not-allowed; }
 
@@ -189,8 +188,7 @@ tr:last-child td { border-bottom: none; }
 
 /* ── Error text ────────────────────────────────────────────────────────────── */
 .error-msg { color: var(--red); font-size: .85rem; margin-top: .5rem; }
-
+/* ── PWA install banner ──────────────────────────────────────────────── */
-/* ── PWA install banner ────────────────────────────────────────────────────── */
 .install-banner {
   position: fixed;
   bottom: 1rem;
@@ -252,4 +250,4 @@ tr:last-child td { border-bottom: none; }
 @keyframes banner-in {
   from { opacity: 0; transform: translateX(-50%) translateY(1rem); }
   to   { opacity: 1; transform: translateX(-50%) translateY(0); }
-}
+}

src/static/sw.js

@@ -1,5 +1,5 @@
 /* Service worker - Lagomare Gates */
-const CACHE = "lagomare-gates-v1";
+const CACHE = "lagomare-gates-__STATIC_HASH__";
 const PRECACHE = ["/static/style.css", "/static/app.js", "/static/images/logo.svg", "/static/images/mobile_icon.png", "/manifest.json"];
 
 self.addEventListener("install", event => {