// 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);
.wifi-badge background: #1f2f3a; border-radius: 30px; padding: 4px 12px; color: #2dd4bf; font-family: monospace; font-weight: 500; font-size: 0.8rem;
.help-item display: flex; align-items: center; gap: 8px;
.info-card flex: 1; min-width: 230px; background: #f9fbfd; border-radius: 28px; padding: 24px 22px; transition: all 0.2s; border: 1px solid #e6edf4; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.05); dodocool.setup welcome.html
/* main content */ .welcome-content padding: 44px 40px 40px 40px;
.info-card li margin: 8px 0;
<!-- 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> // Helper function to show a temporary snackbar-style
/* modal (setup simulation) */ .modal display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); align-items: center; justify-content: center; z-index: 1000; font-family: 'Inter', sans-serif;
faqLink.addEventListener('click', (e) => e.preventDefault(); showMessageToast('💡 FAQ: Can’t see dodocool network? Power cycle & press reset. Forgot password? Reset device. Need WPS? Press WPS button. Visit dodocool.com/faq', false); );
.setup-grid display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 42px; Forgot password
// 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); );
<div class="help-row"> <div class="help-item">📘 <a href="#" style="color:#2c7a6e; text-decoration:none;" id="helpGuideLink">Setup guide</a></div> <div class="help-item">💡 <a href="#" style="color:#2c7a6e; text-decoration:none;" id="faqLink">FAQs & troubleshooting</a></div> <div class="help-item">📞 Support: 1-888-DODOCOOL</div> <div class="help-item">🔧 <span id="resetHint">Factory reset: hold reset 10s</span></div> </div> </div> <div class="footer-note"> © dodocool · version 2.4.0 · This setup portal works best with Chrome, Safari, or Edge. Ensure your device is connected to dodocool Wi-Fi before proceeding. </div> </div>
</style>
.logo-icon background: #2dd4bf; width: 44px; height: 44px; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #0b2b3b; box-shadow: 0 4px 10px rgba(0,0,0,0.1);