Add mobile emulator mode for desktop testing
- 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
This commit is contained in:
root
parent
897fc4cd31
commit
ffbc917a5d
@ -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; }
|
.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; }
|
.privacy-note { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
|
||||||
@ -11,7 +11,10 @@
|
|||||||
<link rel="stylesheet" href="/css/app.css">
|
<link rel="stylesheet" href="/css/app.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<button id="mode-toggle" title="Переключить режим">📱 Мобильный</button>
|
||||||
|
<div id="mobile-frame">
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
</div>
|
||||||
<nav id="tabbar">
|
<nav id="tabbar">
|
||||||
<button class="tab" data-view="map">
|
<button class="tab" data-view="map">
|
||||||
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
|
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
|
||||||
|
|||||||
@ -1,8 +1,30 @@
|
|||||||
// Main app controller
|
// Main app controller
|
||||||
const App = {
|
const App = {
|
||||||
consentGiven: false,
|
consentGiven: false,
|
||||||
|
isMobileMode: false,
|
||||||
|
|
||||||
async init() {
|
async init() {
|
||||||
|
// Определяем: десктоп — стартуем в mobile-mode для удобства разработки
|
||||||
|
const isTouch = ('ontouchstart' in window) || navigator.maxTouchPoints > 0;
|
||||||
|
const smallScreen = window.innerWidth <= 768;
|
||||||
|
const savedMode = localStorage.getItem('buhapp.mode');
|
||||||
|
if (savedMode === 'desktop') {
|
||||||
|
this.isMobileMode = false;
|
||||||
|
} else if (savedMode === 'mobile') {
|
||||||
|
this.isMobileMode = true;
|
||||||
|
} else {
|
||||||
|
// авто: если экран узкий — нативный мобильный, иначе мобильный-эмулятор
|
||||||
|
this.isMobileMode = !smallScreen;
|
||||||
|
}
|
||||||
|
this.applyMode();
|
||||||
|
|
||||||
|
document.getElementById('mode-toggle').onclick = () => {
|
||||||
|
this.isMobileMode = !this.isMobileMode;
|
||||||
|
localStorage.setItem('buhapp.mode', this.isMobileMode ? 'mobile' : 'desktop');
|
||||||
|
this.applyMode();
|
||||||
|
location.reload();
|
||||||
|
};
|
||||||
|
|
||||||
// bind tabbar
|
// bind tabbar
|
||||||
document.querySelectorAll('.tab').forEach(btn => {
|
document.querySelectorAll('.tab').forEach(btn => {
|
||||||
btn.onclick = () => this.showView(btn.dataset.view);
|
btn.onclick = () => this.showView(btn.dataset.view);
|
||||||
@ -118,6 +140,16 @@ const App = {
|
|||||||
`;
|
`;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
applyMode() {
|
||||||
|
if (this.isMobileMode) {
|
||||||
|
document.body.classList.add('mobile-mode');
|
||||||
|
document.getElementById('mode-toggle').textContent = '🖥️ На весь экран';
|
||||||
|
} else {
|
||||||
|
document.body.classList.remove('mobile-mode');
|
||||||
|
document.getElementById('mode-toggle').textContent = '📱 Мобильный';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
showEmailLogin() {
|
showEmailLogin() {
|
||||||
document.getElementById('app').innerHTML = `
|
document.getElementById('app').innerHTML = `
|
||||||
<div class="view">
|
<div class="view">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user