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;
}
}
Bagian Kalibrasi
Bagian Peta Panas
Bagian Data
Bagian Denah Lantai
Panel Poin
Latar belakang untuk panel
Tajuk
Area Kanvas
Modal Pemilih Sinyal
Panel Pengaturan
Survei WiFi Seluler
Unggah Hamparan
Bilah Status
Legenda
Kontrol Mengambang
Pengaturan
Kalibrasi Skala
Jarak yang Diketahui
Satuan
Pengaturan Peta Panas
Resolusi Jaringan
Tampilkan Legenda
Data
Denah Lantai
Poin Survei
Belum ada poin yang ditambahkan.
Ketuk pada peta untuk menambahkan titik survei.
Ketuk pada peta untuk menambahkan titik survei.