<div class="setup-grid"> <div class="info-card"> <div class="card-icon">📶</div> <h3>1. Connect to device</h3> <p>Use your phone, tablet or computer to join the dodocool Wi-Fi network:</p> <ul> <li><strong>SSID:</strong> dodocool_Setup_XXXX</li> <li><strong>Password:</strong> (none) or "dodocool123"*</li> </ul> <p style="font-size:0.75rem; margin-top:8px;">*Check label on your device</p> </div> <div class="info-card"> <div class="card-icon">🌐</div> <h3>2. Configure settings</h3> <p>Open this page again or follow guided wizard. Set your Wi-Fi name (SSID) and secure password for extended network.</p> <ul> <li>✔ Select your home Wi-Fi</li> <li>✔ Extend or route mode</li> </ul> </div> <div class="info-card"> <div class="card-icon">🔒</div> <h3>3. Secure & finish</h3> <p>Create admin credentials to manage dodocool device. Final step — reboot and enjoy strong Wi-Fi everywhere.</p> <ul> <li>🔐 WPA2/WPA3 encryption</li> <li>⚡ LED indicators guide</li> </ul> </div> </div>
// If user clicks outside modal, also close window.addEventListener('click', (e) => if (e.target === modal) modal.style.display = 'none'; showMessageToast('Setup wizard closed — click "Start Setup" anytime', false); );
.btn-start:hover background: #1c4e63; transform: scale(1.02); box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.25);
// 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); ); dodocool.setup welcome.html
.modal-icon font-size: 3rem; margin-bottom: 12px;
// 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); );
.modal-card h3 font-size: 1.6rem; margin-bottom: 12px; color: #0b2b3b; Set your Wi-Fi name (SSID) and secure password
.logo-text p font-size: 0.8rem; color: #9fc3d4; margin-top: 4px; font-weight: 400;
/* 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;
.logo-text h1 font-size: 1.8rem; font-weight: 600; letter-spacing: -0.3px; color: white; line-height: 1.2; showMessageToast('🔌 Connecting to dodocool admin panel
// additional: simulate first time user seeing network info console.log('dodocool setup welcome page ready — SSID broadcast active');
/* header with dodocool branding */ .brand-header background: #0b2b3b; padding: 24px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;