diff --git a/index.html b/index.html index 6c0ae6e..4805d39 100644 --- a/index.html +++ b/index.html @@ -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}}