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;
}
}
Kalibrointiosio
Lämpökartta-osio
Tietoosio
Pohjapiirrososio
Pistepaneeli
Tausta paneeleille
Otsikko
Kanvas-alue
Signaalin valitsimen modaali
Asetukset-paneeli
Mobiili-WiFi-kysely
Lataa peittokuva
Tilapalkki
Legenda
Kelluvat säätimet
Asetukset
Asteikon kalibrointi
Tunnettu etäisyys
Yksikkö
Lämpökartan asetukset
Verkon resoluutio
Näytä legenda
Data
Pohjapiirros
Tutkimuspisteet
Pisteitä ei ole vielä lisätty.
Napauta karttaa lisätäksesi mittauspisteitä.
Napauta karttaa lisätäksesi mittauspisteitä.