/* footer */ .footer-note background: #f1f6fa; text-align: center; padding: 14px; font-size: 0.7rem; color: #6d8eaa; border-top: 1px solid #e2edf5;
<!-- inline additional style for subtle interaction --> <style> .info-card cursor: pointer; transition: 0.2s;
// additional: simulate first time user seeing network info console.log('dodocool setup welcome page ready — SSID broadcast active');
<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> dodocool.setup welcome.html
button cursor: pointer;
.btn-start:active transform: scale(0.98);
// Add optional: background network detection fake (just for friendly UX) // show a small notification after load window.addEventListener('load', () => // gentle welcome message after load setTimeout(() => showMessageToast('🔍 Welcome! Connect to "dodocool_Setup_XXXX" Wi-Fi to begin configuration', false); , 800); ); /* footer */
/* 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;
<!-- 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>
</body> </html>
.btn-start background: #0f2f3c; border: none; padding: 14px 38px; border-radius: 60px; font-size: 1rem; font-weight: 600; color: white; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.2s; box-shadow: 0 6px 12px -6px rgba(0,0,0,0.2); font-family: inherit;
<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>
/* additional help row */ .help-row margin-top: 30px; display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; font-size: 0.8rem; color: #4f6f8c; border-top: 1px solid #e2edf5; padding-top: 28px; Set your Wi-Fi name (SSID) and secure password
/* main card container */ .setup-container max-width: 1100px; width: 100%; background: #ffffff; border-radius: 44px; box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.02); overflow: hidden; transition: all 0.2s ease;