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;
}
}
Kalibreerimise osa
Heatmap jaotis
Andmejaotis
Korruseplaani osa
Punktide paneel
Paneelide taust
Päis
Lõuendi ala
Signaali valija modaal
Seadete paneel
Mobiilse WiFi uuring
Üleslaadimise ülekate
Olekuriba
Legend
Ujuvad juhtnupud
Seaded
Skaala kalibreerimine
Teadaolev kaugus
Üksus
Soojuskaardi sätted
Võrgu eraldusvõime
Näita legendi
Andmed
Korruse plaan
Küsitluspunktid
Punkte pole veel lisatud.
Uuringupunktide lisamiseks puudutage kaarti.
Uuringupunktide lisamiseks puudutage kaarti.