ga/buhapp-telegram
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add mobile emulator mode for desktop testing

Browse Source 
- 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 2026-08-20 17:54:45 +00:00
parent 897fc4cd31
commit ffbc917a5d
3 changed files with 93 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
public/css/app.css
View File

@ -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; }

3
public/index.html
View File

@ -11,7 +11,10 @@
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<button id="mode-toggle" title="Переключить режим">📱 Мобильный</button>
<div id="mobile-frame">
<div id="app"></div>
</div>
<nav id="tabbar">
<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>

32
public/js/app.js
View File

@ -1,8 +1,30 @@
// Main app controller
const App = {
consentGiven: false,
isMobileMode: false,
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
document.querySelectorAll('.tab').forEach(btn => {
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() {
document.getElementById('app').innerHTML = `
<div class="view">