Dodocool.setup Welcome.html Info
.welcome-title font-size: 2rem; font-weight: 700; background: linear-gradient(135deg, #0f3b4f, #1c6c7c); background-clip: text; -webkit-background-clip: text; color: transparent; margin-bottom: 16px; letter-spacing: -0.3px;
.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;
.logo-area display: flex; align-items: center; gap: 14px;
.wifi-badge background: #1f2f3a; border-radius: 30px; padding: 4px 12px; color: #2dd4bf; font-family: monospace; font-weight: 500; font-size: 0.8rem; dodocool.setup welcome.html
@media (max-width: 720px) .welcome-content padding: 28px 24px; .welcome-title font-size: 1.6rem; .action-area flex-direction: column; align-items: stretch; text-align: center; .network-hint justify-content: center; .btn-start justify-content: center; .brand-header flex-direction: column; align-items: flex-start; </style> </head> <body>
// 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); );
.info-card p font-size: 0.9rem; color: #4b6a86; line-height: 1.5; </div> // Close modal and simulate "proceeding to
</style>
<div class="welcome-content"> <div class="welcome-title"> Welcome to dodocool setup </div> <div class="subhead"> Get your dodocool Wi-Fi extender / router up and running in minutes. Follow the simple steps below to configure your network. </div>
// 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); ); '#b91c1c' : '#0f2f3c'; toast
.wifi-badge letter-spacing: 0.3px;
// 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);
.info-card li margin: 8px 0;