RSK World - Coming Soon Page | Countdown Timer, Email Signup, Theme Toggle | RSK World

Countdown Timer Email Signup Theme & FAQ Progress & Social Bootstrap 5

Coming Soon Page is a modern landing template with countdown timer, email signup, and config-driven content. Includes: config.js for launch date, site name, tagline, theme, social links, FAQ, progress steps, signup API; countdown with flip animation; notify-me form with validation (demo or API); dark/light theme with localStorage and system preference; FAQ accordion and social links from config; progress section (We're building); about.html with author info; PWA manifest; particles and animations; skip link and reduced-motion support. Files: index.html, about.html, styles.css, animations.css, script.js, config.js, utils.js, manifest.json. By rskworld.in.

If you find this Coming Soon Page project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Coming Soon Page

Countdown Timer & Branding

Configurable launch date in config.js (e.g. 2026-12-31); script.js updates countdown every second with days, hours, minutes, seconds; flip animation on value change. Brand title and tagline from CONFIG.site; footer year and author from config.

script.js: TARGET_DATE from CONFIG.launchDate; updateCountdown() with pad(), flip() for visual tick.
config.js: launchDate (ISO string), site.name, site.tagline, site.author, site.year.
index.html: countdown section with #days, #hours, #minutes, #seconds; brand #brandTitle, #brandTagline.
animations.css: stagger for countdown items; styles.css: flip keyframes for .countdown-value.flip.

Project Structure & Files

Root: index.html (main coming soon), about.html (about + theme toggle). CSS: styles.css (theme variables, layout, countdown, signup, progress, FAQ, social), animations.css (stagger, pulse, shine, glow, reduced-motion). JS: config.js (single source), utils.js (debounce, formatDate, storage, prefersReducedMotion, escapeHtml), script.js (countdown, theme, particles, progress, FAQ, social, signup). manifest.json for PWA.

index.html – brand, countdown, progress, signup form, FAQ list, social nav, footer; skip link, theme toggle.
styles.css – :root and [data-theme="light"] variables; countdown, signup, progress-step, faq-item, social-link.
script.js – countdown interval, theme (localStorage coming-soon-theme), CONFIG.progress/faq/social injection, signup submit.
config.js – launchDate, site, theme, social[], faq[], progress{}, signup{ apiUrl, demoMode }; Object.freeze.
README.md and LINES.txt – setup, config options, line counts. By rskworld.in.

Theme Toggle & Email Signup

Dark/light theme: data-theme on html; CSS variables in :root and [data-theme="light"]; toggle button with sun/moon icons; choice saved in localStorage (coming-soon-theme); respects CONFIG.theme and prefers-color-scheme when system. Signup: email input + Notify Me; validateEmail(); demo mode shows success after 800ms; with apiUrl sends POST JSON { email } to CONFIG.signup.apiUrl.

Theme: getStoredTheme(), getSystemTheme(), getEffectiveTheme(), applyTheme(), cycleTheme(); same key on about.html.
Signup: showError/showSuccess/clearFeedback; demoMode or !apiUrl → setTimeout success; else fetch(apiUrl, POST).
styles.css: --color-bg, --color-primary, --color-text, overlay-gradient, particle-color for both themes.
Form validation: required, regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/; invalid-feedback, valid-feedback.

FAQ, Progress & Social Links

FAQ: CONFIG.faq array; script builds accordion with button + hidden answer; aria-expanded, aria-controls. Progress: CONFIG.progress.enabled, steps[], currentStepIndex; renders .progress-step with .active and .done. Social: CONFIG.social; only items with href; icons by id (globe, envelope, phone, github, twitter, linkedin).

FAQ: faqList filled from CONFIG.faq; click toggles div.style.display and aria-expanded.
Progress: progressSteps from CONFIG.progress.steps; currentStepIndex sets active; previous get done (green).
Social: socialSection; icons object with SVG strings; a.social-link per item when href non-empty.
Sections hidden via style.display when config empty or no social hrefs.

Animations & Accessibility

animations.css: animate-stagger for countdown items, pulse-soft for CTA, shine on countdown cards, glowBreathe on brand icon; all disabled in @media (prefers-reduced-motion). styles.css: fadeIn, slideUp, flip; skip-link :focus top; theme-toggle and social-link focus-visible; aria-live on countdown, ARIA on FAQ.

Skip link: .skip-link top -100px, :focus top 1rem; href="#main-content".
Reduced motion: animation-duration 0.01ms, transition 0.01ms, scroll-behavior auto.
Particles: 20 .particle divs in #particles; random left/top/delay/duration; --particle-color.
Utils: prefersReducedMotion(), escapeHtml() for safe injection.

What You Get

Static HTML/CSS/JS: index.html, about.html, styles.css, animations.css, script.js, config.js, utils.js, manifest.json, README.md, LINES.txt. No build step. Open index.html or serve folder. Technologies: HTML5, Bootstrap 5, Vanilla JS. © 2026 RSK World.

Complete source – all files ready to copy; edit config.js for launch date, site, theme, social, FAQ, progress, signup.
No build step – open index.html in browser or serve folder; no bundler required.
README with setup, config options, feature list – theme in localStorage, signup demo or API.
Technologies: HTML5, Bootstrap 5, Outfit font, Vanilla JS – modern browsers. © 2026 RSK World.

Usage

Open index.html to view the coming soon page. Edit config.js: launchDate, site name/tagline, theme (dark|light|system), social links, FAQ, progress steps, signup apiUrl/demoMode. Theme choice is saved in localStorage. Use about.html for author info and theme toggle.

index.html – countdown, signup, FAQ, progress, social; all content from config.js.
config.js – change launchDate, site, theme, social[], faq[], progress{}, signup{}; freeze prevents mutation.
Live Demo – points to ./index.html when file exists; View Files to browser.php.
Author: Molla Samser | rskworld.in – Coming Soon template; contact for customization.

Project Features

Countdown timer with flip animation; email signup with validation (demo or API); dark/light theme with persistence; FAQ accordion from config; social and contact links; progress "We're building" steps; particles and gradients; PWA manifest; skip link and reduced-motion; Bootstrap 5, vanilla JS, config-driven.

Countdown, signup, theme – core landing page behavior; config-driven branding and sections.
FAQ, progress, social – optional sections built from CONFIG; hide by empty config or empty href.
Animations and a11y – stagger, pulse, shine, glow; skip link, ARIA, focus-visible, reduced-motion.
Bootstrap 5, responsive – mobile-first; breakpoint 576px; Outfit font.

Credits & Acknowledgments

Coming Soon Page by RSK World. Modern landing template with countdown, email signup, theme toggle, and config-driven content for learning front-end landing pages.

Coming Soon Page – countdown timer, email signup, theme, FAQ, progress, social. Free for learning and use.
RSK World – Project creator and platform for UI/UX demos.
Author: Molla Samser (Founder - RSK World). Website: https://rskworld.in. Email: help@rskworld.in | Phone: +91 93305 39277. Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Third-party credits: Bootstrap – CSS/JS framework; Google Fonts – Outfit.
© 2026 RSK World. Coming Soon Page for educational and commercial use.

Support & Contact

For Coming Soon Page customization or integration help, please contact us.

Email: help@rskworld.in – for Coming Soon Page customization or general questions.
Phone: +91 93305 39277 – support and custom landing page features.
Website: RSKWORLD.in – more UI/UX projects by RSK World.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Author: Molla Samser (Founder, RSK World) – creator of Coming Soon Page.
README and config.js – features, file structure, and setup.
Technical Support – help with countdown, signup API, or theme.
Feature Requests Welcome – suggest new landing page modules.