Ermek_aubakirov/pole-planner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v6: fullscreen map to bottom

Browse Source
This commit is contained in:
Dauren777 2026-06-19 06:21:20 +00:00
parent baedd56a1c
commit 08a02c6fda
1 changed files with 30 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
index.html
View File

@ -9,45 +9,43 @@
:root{--ink:#0F1218;--cyan:#00E5FF}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;color:var(--ink);background:#F2F4F7}
.header{background:var(--ink);padding:8px 12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.header h1{font-size:15px;font-weight:700;color:#fff;white-space:nowrap}
.controls{display:flex;gap:4px;flex-wrap:wrap}
.controls button{padding:4px 8px;border:none;border-radius:4px;font-weight:600;cursor:pointer;font-size:11px;white-space:nowrap}
.header{background:var(--ink);padding:4px 8px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.header h1{font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.controls{display:flex;gap:2px;flex-wrap:wrap}
.controls button{padding:3px 6px;border:none;border-radius:3px;font-weight:600;cursor:pointer;font-size:10px;white-space:nowrap}
.btn-primary{background:#00E5FF;color:#0F1218}
.btn-secondary{background:#4CAF50;color:#fff}
.btn-warning{background:#FF9800;color:#fff}
.btn-danger{background:#ff5252;color:#fff}
.btn-export{background:#4caf50;color:#fff}
.btn-active{background:#fff!important;color:#0F1218!important;box-shadow:0 0 0 2px var(--cyan)}
.loc-panel{background:#222;padding:4px 12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;border-bottom:1px solid #333}
.loc-panel{background:#222;padding:2px 8px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:10px;border-bottom:1px solid #333}
.loc-panel label{color:#9aa3b2}
.loc-panel select{padding:2px 6px;border:1px solid #555;border-radius:3px;background:#333;color:#fff;font-size:11px;max-width:160px}
.loc-panel input{padding:2px 6px;border:1px solid #555;border-radius:3px;background:#333;color:#fff;font-size:11px;width:140px}
.loc-panel button{padding:2px 10px;border:none;border-radius:3px;background:var(--cyan);color:var(--ink);font-weight:600;cursor:pointer;font-size:11px}
#map{height:calc(100vh - 208px);min-height:350px}
.settings{background:#1a1a1a;padding:4px 12px;display:flex;gap:8px;align-items:center;font-size:11px;color:#9aa3b2;flex-wrap:wrap;border-bottom:1px solid #333}
.settings label{display:flex;align-items:center;gap:4px}
.settings input{width:42px;padding:2px 4px;border:1px solid #555;border-radius:3px;background:#222;color:#fff;font-size:11px;text-align:center}
.settings .mode-info{margin-left:auto;font-size:10px;color:#888}
.sidebar{position:absolute;top:54px;right:8px;width:340px;max-height:calc(100vh - 64px);background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15);overflow:hidden;z-index:1000;display:flex;flex-direction:column;font-size:12px}
.sidebar-header{padding:6px 10px;background:#F2F4F7;font-weight:700;font-size:11px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}
.sidebar table{width:100%;border-collapse:collapse;font-size:11px}
.sidebar th{background:var(--ink);color:#fff;padding:3px 5px;text-align:left;position:sticky;top:0;font-size:10px}
.sidebar td{padding:3px 5px;border-bottom:1px solid #F2F4F7;font-size:10px}
.sidebar td.num{text-align:center;font-weight:700;color:#00E5FF;font-size:11px}
.sidebar td.dist{text-align:right;font-family:monospace;font-size:10px}
.sidebar-footer{padding:5px 10px;background:#F2F4F7;font-size:10px;font-weight:600;border-top:1px solid #ddd}
.pole-label{background:#0F1218;color:#00E5FF;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;border:2px solid #00E5FF;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.entrance-label{background:#FF9800;color:#fff;border-radius:3px;padding:1px 5px;font-size:9px;font-weight:700;border:2px solid #FF9800;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mode-badge{position:absolute;top:54px;left:8px;background:#00E5FF;color:#0F1218;padding:3px 8px;border-radius:4px;font-weight:700;font-size:10px;z-index:1000;pointer-events:none}
.legend{position:absolute;bottom:12px;left:8px;background:#fff;padding:5px 8px;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:1000;font-size:10px;line-height:1.5}
.legend span{display:flex;align-items:center;gap:5px}
.toast{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);background:#0F1218;color:#fff;padding:5px 12px;border-radius:4px;font-size:10px;z-index:9999;opacity:0;transition:opacity .3s}
.toast.show{opacity:1}
.auto-panel{position:absolute;top:54px;left:8px;background:#fff;padding:6px 10px;border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,.15);z-index:1000;font-size:11px;max-width:260px;display:none}
.auto-panel button{padding:3px 8px;border:none;border-radius:3px;font-weight:600;cursor:pointer;font-size:10px;margin-top:4px}
.auto-panel .tag{display:inline-block;background:#00E5FF;color:#0F1218;padding:1px 6px;border-radius:3px;font-size:9px;margin:1px}
@media(max-width:700px){.sidebar{width:100%;right:0;top:auto;bottom:0;max-height:30vh;border-radius:8px 8px 0 0}#map{height:45vh}}
.loc-panel select{padding:1px 4px;border:1px solid #555;border-radius:3px;background:#333;color:#fff;font-size:10px;max-width:120px}
.loc-panel input{padding:1px 4px;border:1px solid #555;border-radius:3px;background:#333;color:#fff;font-size:10px;width:100px}
.loc-panel button{padding:1px 6px;border:none;border-radius:3px;background:var(--cyan);color:var(--ink);font-weight:600;cursor:pointer;font-size:10px}
#map{height:calc(100vh - 72px);min-height:350px}
.settings{background:#1a1a1a;padding:2px 8px;display:flex;gap:4px;align-items:center;font-size:10px;color:#9aa3b2;flex-wrap:wrap;border-bottom:none}
.settings label{display:flex;align-items:center;gap:2px}
.settings input{width:32px;padding:1px 3px;border:1px solid #555;border-radius:2px;background:#222;color:#fff;font-size:10px;text-align:center}
.settings .mode-info{margin-left:auto;font-size:9px;color:#888}
.sidebar{position:absolute;top:34px;right:6px;width:300px;max-height:calc(100vh - 44px);background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15);overflow:hidden;z-index:1000;display:flex;flex-direction:column;font-size:11px;transition:max-height .2s;border:1px solid rgba(0,0,0,.08)}
.sidebar-header{padding:4px 8px;background:#F2F4F7;font-weight:700;font-size:10px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none}
.sidebar table{width:100%;border-collapse:collapse;font-size:10px}
.sidebar th{background:var(--ink);color:#fff;padding:2px 4px;text-align:left;position:sticky;top:0;font-size:9px}
.sidebar td{padding:2px 4px;border-bottom:1px solid #F2F4F7;font-size:9px}
.sidebar td.num{text-align:center;font-weight:700;color:#00E5FF;font-size:10px}
.sidebar td.dist{text-align:right;font-family:monospace;font-size:9px}
.sidebar-footer{padding:3px 8px;background:#F2F4F7;font-size:9px;font-weight:600;border-top:1px solid #ddd}
.pole-label{background:#0F1218;color:#00E5FF;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:9px;border:2px solid #00E5FF;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.entrance-label{background:#FF9800;color:#fff;border-radius:3px;padding:1px 4px;font-size:8px;font-weight:700;border:2px solid #FF9800;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mode-badge{position:absolute;top:34px;left:6px;background:#00E5FF;color:#0F1218;padding:2px 6px;border-radius:3px;font-weight:700;font-size:9px;z-index:1000;pointer-events:none}
.legend{position:absolute;bottom:6px;left:6px;background:rgba(255,255,255,.9);padding:3px 6px;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,.1);z-index:1000;font-size:9px;line-height:1.4}
.legend span{display:flex;align-items:center;gap:3px}
.auto-panel{position:absolute;top:34px;left:6px;background:#fff;padding:4px 8px;border-radius:5px;box-shadow:0 2px 12px rgba(0,0,0,.15);z-index:1000;font-size:10px;max-width:240px;display:none}
.auto-panel button{padding:2px 6px;border:none;border-radius:3px;font-weight:600;cursor:pointer;font-size:9px;margin-top:3px}
.auto-panel .tag{display:inline-block;background:#00E5FF;color:#0F1218;padding:1px 5px;border-radius:2px;font-size:8px;margin:1px}
@media(max-width:700px){.sidebar{width:100%;right:0;top:auto;bottom:0;max-height:25vh;border-radius:6px 6px 0 0;font-size:10px}#map{height:calc(100vh - 72px)}.legend{bottom:auto;top:34px}.header h1{font-size:12px}}
</style>
</head>
<body>