Mobile WiFi Survey Tool
.mobile-survey-container {
position: relative;
width: 100%;
height: calc(100vh - 120px);
min-height: 400px;
background: #1a1a2e;
overflow: hidden;
touch-action: none;
}
/* Header */
.survey-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: #16213e;
color: #fff;
border-bottom: 1px solid #0f3460;
}
.survey-header h1 {
font-size: 18px;
margin: 0;
font-weight: 600;
}
.header-actions {
display: flex;
gap: 10px;
}
.header-btn {
background: #0f3460;
border: none;
color: #fff;
width: 40px;
height: 40px;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.header-btn:active {
background: #1a4a7a;
}
/* Canvas Area */
.canvas-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#surveyCanvas {
display: block;
background: #0f0f23;
}
/* Upload Overlay */
.upload-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(15, 15, 35, 0.95);
color: #fff;
z-index: 10;
}
.upload-overlay.hidden {
display: none;
}
.upload-icon {
font-size: 64px;
margin-bottom: 20px;
}
.upload-text {
font-size: 18px;
margin-bottom: 10px;
}
.upload-hint {
font-size: 14px;
color: #888;
margin-bottom: 20px;
}
.upload-btn {
background: #4361ee;
color: #fff;
border: none;
padding: 15px 30px;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
}
.upload-btn:active {
background: #3651de;
}
/* Floating Controls */
.floating-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
background: rgba(22, 33, 62, 0.95);
padding: 10px 15px;
border-radius: 25px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.floating-btn {
background: #0f3460;
border: none;
color: #fff;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.floating-btn:active {
background: #1a4a7a;
}
.floating-btn.active {
background: #4361ee;
}
.floating-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Status Bar */
.status-bar {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
}
.status-pill {
background: rgba(22, 33, 62, 0.9);
color: #fff;
padding: 8px 14px;
border-radius: 20px;
font-size: 12px;
pointer-events: auto;
}
.status-pill.warning {
background: rgba(255, 193, 7, 0.9);
color: #000;
}
/* Signal Selector Modal */
.signal-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 100;
align-items: flex-end;
justify-content: center;
}
.signal-modal-overlay.active {
display: flex;
}
.signal-modal {
background: #16213e;
width: 100%;
max-width: 500px;
border-radius: 20px 20px 0 0;
padding: 20px;
padding-bottom: max(20px, env(safe-area-inset-bottom));
color: #fff;
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.signal-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.signal-modal-header h3 {
margin: 0;
font-size: 18px;
}
.modal-close-btn {
background: none;
border: none;
color: #fff;
font-size: 28px;
cursor: pointer;
padding: 0;
line-height: 1;
}
/* WiFi Guide */
.wifi-guide {
background: #0f3460;
border-radius: 10px;
padding: 12px;
margin-bottom: 20px;
font-size: 13px;
display: flex;
align-items: center;
gap: 12px;
}
.wifi-guide-icon {
font-size: 32px;
}
.wifi-guide-text {
flex: 1;
}
.wifi-guide-text strong {
color: #4cc9f0;
}
/* Signal Buttons */
.signal-buttons {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 20px;
}
.signal-btn {
flex: 1;
aspect-ratio: 1;
max-width: 70px;
background: #0f3460;
border: 3px solid transparent;
border-radius: 12px;
color: #fff;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
transition: all 0.2s;
}
.signal-btn:active {
transform: scale(0.95);
}
.signal-btn.selected {
border-color: #4361ee;
background: #1a4a7a;
}
.signal-btn-icon {
font-size: 24px;
}
.signal-btn-label {
font-size: 11px;
font-weight: 600;
}
.signal-btn[data-signal="3"] .signal-btn-icon { color: #4ade80; }
.signal-btn[data-signal="2"] .signal-btn-icon { color: #a3e635; }
.signal-btn[data-signal="1"] .signal-btn-icon { color: #facc15; }
.signal-btn[data-signal="0"] .signal-btn-icon { color: #fb923c; }
.signal-btn[data-signal="-1"] .signal-btn-icon { color: #f87171; }
/* Point Label Input */
.label-input-group {
margin-bottom: 20px;
}
.label-input-group label {
display: block;
font-size: 13px;
color: #888;
margin-bottom: 8px;
}
.label-input {
width: 100%;
background: #0f3460;
border: 1px solid #1a4a7a;
border-radius: 10px;
padding: 12px 15px;
color: #fff;
font-size: 16px;
}
.label-input:focus {
outline: none;
border-color: #4361ee;
}
.label-input::placeholder {
color: #666;
}
/* Modal Actions */
.modal-actions {
display: flex;
gap: 10px;
}
.modal-btn {
flex: 1;
padding: 15px;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.modal-btn.cancel {
background: #0f3460;
color: #fff;
}
.modal-btn.save {
background: #4361ee;
color: #fff;
}
.modal-btn.save:disabled {
background: #333;
color: #666;
cursor: not-allowed;
}
/* Settings Panel */
.settings-panel {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 100;
align-items: center;
justify-content: center;
padding: 20px;
}
.settings-panel.active {
display: flex;
}
.settings-content {
background: #16213e;
width: 100%;
max-width: 400px;
border-radius: 15px;
padding: 20px;
color: #fff;
max-height: 80vh;
overflow-y: auto;
}
.settings-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #0f3460;
}
.settings-header h3 {
margin: 0;
font-size: 18px;
}
.settings-section {
margin-bottom: 20px;
}
.settings-section-title {
font-size: 14px;
color: #888;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.settings-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #0f3460;
}
.settings-row:last-child {
border-bottom: none;
}
.settings-label {
font-size: 14px;
}
.settings-value {
font-size: 14px;
color: #4cc9f0;
}
.settings-input {
background: #0f3460;
border: 1px solid #1a4a7a;
border-radius: 8px;
padding: 8px 12px;
color: #fff;
font-size: 14px;
width: 100px;
text-align: right;
}
.settings-select {
background: #0f3460;
border: 1px solid #1a4a7a;
border-radius: 8px;
padding: 8px 12px;
color: #fff;
font-size: 14px;
}
.settings-toggle {
position: relative;
width: 50px;
height: 28px;
background: #0f3460;
border-radius: 14px;
cursor: pointer;
transition: background 0.3s;
}
.settings-toggle.active {
background: #4361ee;
}
.settings-toggle::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
transition: transform 0.3s;
}
.settings-toggle.active::after {
transform: translateX(22px);
}
.settings-btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 10px;
font-size: 14px;
cursor: pointer;
margin-bottom: 10px;
}
.settings-btn.primary {
background: #4361ee;
color: #fff;
}
.settings-btn.secondary {
background: #0f3460;
color: #fff;
}
.settings-btn.danger {
background: #dc3545;
color: #fff;
}
/* Points List Panel */
.points-panel {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 280px;
max-width: 80vw;
background: #16213e;
z-index: 90;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
animation: slideIn 0.3s ease-out;
}
.points-panel.active {
display: flex;
flex-direction: column;
}
@keyframes slideIn {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.points-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-bottom: 1px solid #0f3460;
color: #fff;
}
.points-panel-header h3 {
margin: 0;
font-size: 16px;
}
.points-list {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.point-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: #0f3460;
border-radius: 8px;
margin-bottom: 8px;
color: #fff;
}
.point-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
}
.point-info {
flex: 1;
}
.point-label {
font-size: 14px;
font-weight: 500;
}
.point-signal {
font-size: 12px;
color: #888;
}
.point-delete {
background: none;
border: none;
color: #f87171;
font-size: 18px;
cursor: pointer;
padding: 5px;
}
.points-empty {
text-align: center;
color: #666;
padding: 30px;
font-size: 14px;
}
/* Legend */
.legend {
position: absolute;
bottom: 80px;
right: 10px;
background: rgba(22, 33, 62, 0.95);
padding: 10px;
border-radius: 10px;
font-size: 11px;
color: #fff;
}
.legend.hidden {
display: none;
}
.legend-title {
font-weight: 600;
margin-bottom: 6px;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
}
.legend-color {
width: 16px;
height: 10px;
border-radius: 2px;
}
/* Responsive adjustments */
@media (min-width: 768px) {
.signal-modal {
border-radius: 20px;
margin-bottom: 20px;
}
.signal-btn {
max-width: 80px;
}
}
/* Hide on desktop suggestion */
@media (min-width: 1024px) {
.mobile-survey-container::before {
content: 'This tool is optimized for mobile devices. For desktop surveys, use the full WiFi Survey Tool.';
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(67, 97, 238, 0.9);
color: #fff;
padding: 10px 20px;
border-radius: 8px;
font-size: 13px;
z-index: 5;
white-space: nowrap;
}
}
Sekcio de Kalibrado
Sekcio de Heatmap
Sekcio de Datumoj
Etaĝa Plano Sekcio
Punktoj Panelo
Fono por paneloj
Kapo
Kanvasa Areo
Signal-Selektilo Modala
Agorda Panelo
Poŝtelefona WiFi-Enketo
Alŝutu Overlay
Statusa Trinkejo
Legendo
Flosantaj Kontroloj
Agordoj
Skala Kalibrado
Konata Distanco
Unuo
Agordoj de Heatmap
Krada Rezolucio
Montru Legendon
Datumoj
Plano de etaĝo
Enketaj Punktoj
Ankoraŭ neniuj punktoj aldonitaj.
Frapu sur la mapon por aldoni enketpunktojn.
Frapu sur la mapon por aldoni enketpunktojn.