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;
}
}
بخش کالیبراسیون
بخش نقشه حرارتی
بخش داده ها
بخش پلان طبقه
پانل امتیاز
پس زمینه برای پانل ها
سربرگ
منطقه بوم
مدال انتخابگر سیگنال
پنل تنظیمات
بررسی وای فای موبایل
آپلود همپوشانی
نوار وضعیت
افسانه
کنترل شناور
تنظیمات
کالیبراسیون مقیاس
فاصله شناخته شده
واحد
تنظیمات نقشه حرارتی
وضوح شبکه
نمایش افسانه
داده ها
پلان طبقه
نقاط نظرسنجی
هنوز امتیازی اضافه نشده است
برای افزودن نقاط نظرسنجی روی نقشه ضربه بزنید.
برای افزودن نقاط نظرسنجی روی نقشه ضربه بزنید.