.wifi-badge letter-spacing: 0.3px;
.logo-text h1 font-size: 1.8rem; font-weight: 600; letter-spacing: -0.3px; color: white; line-height: 1.2;
// Help guide link: shows basic instructions in a toast (or could expand) helpGuideLink.addEventListener('click', (e) => e.preventDefault(); showMessageToast('📘 Setup guide: 1) Connect to dodocool Wi-Fi. 2) Visit dodocool.setup or 192.168.10.1. 3) Follow the web wizard. For detailed PDF manual visit dodocool.com/support', false); );
/* action area */ .action-area background: #f4f8fe; border-radius: 28px; padding: 28px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; dodocool.setup welcome.html
.btn-start:active transform: scale(0.98);
<!-- Modal dialog for setup simulation --> <div id="setupModal" class="modal"> <div class="modal-card"> <div class="modal-icon">⚙️✨</div> <h3>dodocool setup wizard</h3> <p>You are about to configure your dodocool device.<br><strong>Simulation mode:</strong> In a real scenario, you'd be redirected to the admin panel (192.168.10.1) to personalize your Wi-Fi and security settings.</p> <p style="background:#eef2fa; border-radius: 32px; padding: 12px; font-size:0.85rem;">🔧 Next: Choose your home network → Set extended SSID → Create password → Apply & reboot</p> <button class="close-modal" id="closeModalBtn">Got it, continue setup →</button> </div> </div>
// Reset hint interactive resetHintSpan.style.cursor = 'pointer'; resetHintSpan.addEventListener('click', () => showMessageToast('🔄 Factory reset: With device powered on, press and hold Reset button for 10 seconds until LED flashes. Then reconfigure.', false); ); For detailed PDF manual visit dodocool
// Close modal and simulate "proceeding to real configuration" closeModalBtn.addEventListener('click', () => modal.style.display = 'none'; // Simulate redirection to configuration dashboard (conceptual) // Since this is a demo welcome page, we show friendly info and network reminder. showMessageToast('🔌 Connecting to dodocool admin panel... (demo) In actual device, you’d access 192.168.10.1', false); // Additional visual feedback setTimeout(() => showMessageToast('✅ Tip: Make sure you are connected to dodocool_Setup_XXXX network', false); , 1200); );
a, .help-item span, #resetHint transition: opacity 0.1s;
// Extra: user can also click anywhere on the info-cards to show more tips? optional interactive const cards = document.querySelectorAll('.info-card'); cards.forEach((card, idx) => card.addEventListener('click', () => if (idx === 0) showMessageToast('📡 SSID example: dodocool_Setup_5G or dodocool_Setup_2G. No password needed for initial setup.', false); else if (idx === 1) showMessageToast('🌐 During configuration, choose "Extender Mode" to boost existing Wi-Fi, or "Router Mode" for new network.', false); else if (idx === 2) showMessageToast('🔒 We strongly recommend WPA2-PSK + strong password. Admin panel default: admin/admin (change it!)', false); ); ); (demo) In actual device, you’d access 192
.close-modal background: #0f2f3c; border: none; padding: 12px 28px; border-radius: 40px; color: white; font-weight: 600; cursor: pointer; font-size: 0.9rem;
#resetHint:hover text-decoration: underline; opacity: 0.8; cursor: pointer;
// additional: simulate first time user seeing network info console.log('dodocool setup welcome page ready — SSID broadcast active');
// Helper function to show a temporary snackbar-style alert (non-intrusive) function showMessageToast(message, isError = false) // create simple floating notification let toast = document.createElement('div'); toast.innerText = message; toast.style.position = 'fixed'; toast.style.bottom = '30px'; toast.style.left = '50%'; toast.style.transform = 'translateX(-50%)'; toast.style.backgroundColor = isError ? '#b91c1c' : '#0f2f3c'; toast.style.color = 'white'; toast.style.padding = '12px 24px'; toast.style.borderRadius = '60px'; toast.style.fontSize = '0.85rem'; toast.style.fontWeight = '500'; toast.style.zIndex = '1100'; toast.style.boxShadow = '0 8px 20px rgba(0,0,0,0.2)'; toast.style.backdropFilter = 'blur(4px)'; toast.style.fontFamily = "'Inter', sans-serif"; toast.style.pointerEvents = 'none'; document.body.appendChild(toast); setTimeout(() => toast.style.opacity = '0'; setTimeout(() => toast.remove(), 300); , 2800);