From ffbc917a5d2f2e48e6c38550889933c528eefd14 Mon Sep 17 00:00:00 2001 From: root Date: Thu, 20 Aug 2026 17:54:45 +0000 Subject: [PATCH] Add mobile emulator mode for desktop testing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 390px-wide frame on desktop, mimics mobile Telegram - Toggle button (top-right): 'Mobile' / 'Fullscreen' - Auto-detects screen width, remembers choice in localStorage - Real mobile (≤768px) uses native layout --- public/css/app.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++ public/index.html | 5 +++- public/js/app.js | 32 ++++++++++++++++++++++++++ 3 files changed, 93 insertions(+), 1 deletion(-) diff --git a/public/css/app.css b/public/css/app.css index 768853a..14ace5b 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -235,4 +235,61 @@ label { font-size: 13px; color: var(--text-dim); margin-bottom: 4px; display: bl .rating-big { font-size: 36px; font-weight: 700; } +/* Mobile emulator — на десктопе показываем как на мобиле */ +body.mobile-mode { + display: flex; + justify-content: center; + align-items: flex-start; + min-height: 100vh; + background: #1a1a1f; +} + +body.mobile-mode #mobile-frame { + width: 390px; + max-width: 100vw; + height: 100vh; + background: var(--bg); + position: relative; + overflow: hidden; + box-shadow: 0 0 40px rgba(0,0,0,0.4); + display: flex; + flex-direction: column; +} + +body.mobile-mode #app { + height: calc(100vh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); + flex: 1; +} + +body.mobile-mode #tabbar { + position: relative; + width: 390px; + max-width: 100vw; +} + +@media (max-width: 600px) { + body.mobile-mode #mobile-frame, + body.mobile-mode #tabbar { + width: 100vw; + } +} + +#mode-toggle { + position: fixed; + top: 12px; + right: 12px; + z-index: 1000; + background: var(--bg-elev); + border: 1px solid var(--border); + color: var(--text); + border-radius: 999px; + padding: 6px 12px; + font-size: 12px; + cursor: pointer; + box-shadow: 0 2px 8px rgba(0,0,0,0.2); +} +#mode-toggle:hover { background: var(--primary); color: var(--text-inverse); } + +body:not(.mobile-mode) #mode-toggle { display: none; } + .privacy-note { font-size: 12px; color: var(--text-dim); margin-top: 4px; } \ No newline at end of file diff --git a/public/index.html b/public/index.html index a14d766..5d87eaf 100644 --- a/public/index.html +++ b/public/index.html @@ -11,7 +11,10 @@ -
+ +
+
+