How do I build a dark theme UI with CSS custom properties?

Define in :root: { --bg: #05070f; --card: #0d111c; --text: #e0e0e0; --accent: #00e7ff; --border: #1e2a3e; }. Use them: background: var(--bg); color: var(--text); border-color: var(--border). For glow: box-shadow: 0 10px 30px rgba(0,231,255,0.4). Toggle light/dark by redefining variables in [data-theme='light']. Full system in the Flow Demo source code.

What JavaScript techniques does the Flow Demo teach?

The Coodeverse Flow Demo teaches: event delegation with e.target.closest(), dynamic tooltip positioning with e.clientX and e.clientY, Math.sin floating animation with setInterval, CSS class toggling for show/hide, setTimeout auto-hide, and CSS custom properties dark theme system. All in one pure HTML CSS JS file with no frameworks.

How do I make a CSS gradient text effect?

CSS gradient text: (1) background: linear-gradient(90deg, #ffffff, #00e7ff). (2) -webkit-background-clip: text; background-clip: text. (3) -webkit-text-fill-color: transparent; color: transparent. Works on any element — h1, span, div. The Flow Demo logo uses this exact technique for the white-to-cyan gradient text.

Free Interactive Flow App Demo HTML CSS JS 2025 | Task Manager UI Glassmorphism Dark Theme

Q: How do I create a floating tooltip on click in JavaScript?

To create a floating click tooltip: (1) Add data-info attribute to clickable elements. (2) Listen on parent with event delegation: parent.addEventListener('click', e => { const el = e.target.closest('.task-item'); if (el) { ... } }). (3) Get text: const info = el.getAttribute('data-info'). (4) Position: tooltip.style.top = (e.clientY - 120) + 'px'; tooltip.style.left = (e.clientX - 140) + 'px'. (5) Show: tooltip.classList.add('show'). (6) Auto-hide: setTimeout(() => tooltip.classList.remove('show'), 3000). The Coodeverse Flow Demo is a complete free example.

Q: How do I create a CSS glassmorphism card effect?

To create glassmorphism: (1) background: rgba(0, 231, 255, 0.12). (2) backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px). (3) border: 1px solid rgba(0, 231, 255, 0.3). (4) border-radius: 16px. Requires a colorful background behind the element for the blur effect to be visible. The Coodeverse Flow Demo floating tooltip uses this exact glassmorphism technique.

Q: How do I create a floating animation with Math.sin in JavaScript?

Math.sin floating animation: setInterval(() => { elements.forEach(el => { el.style.transform = 'translateY(' + (Math.sin(Date.now() / 1000) * 4) + 'px)'; }); }, 50). Math.sin oscillates -1 to +1, multiplied by 4 gives 4px float range. Divide Date.now() by 1000 for a 1-second cycle. For CSS-only (more performant): @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

Q: How do I create a browser frame mockup in HTML CSS?

Browser mockup: (1) Container: border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,231,255,0.15). (2) Browser bar: background:#111; display:flex; align-items:center; gap:10px. (3) Traffic dots: .dot { width:12px; height:12px; border-radius:50%; } with red #ff5f56, yellow #ffbd2e, green #27c93f. (4) URL span in monospace. The Flow Demo uses this pattern for its professional app mockup.

Q: Is the Flow Interactive Demo completely free?

Yes! The Coodeverse Flow Interactive Demo is 100% free — no registration, email, or payment needed. Download the full ZIP with HTML, CSS, and JavaScript source code. Licensed under CC BY 4.0 for personal and commercial use. Keep attribution to Coodeverse.

Full Source Code

Pure HTML + CSS + Vanilla JavaScript — no frameworks. Teaches event delegation, dynamic tooltip positioning, glassmorphism backdrop-filter, Math.sin floating animation, CSS custom properties dark theme, and gradient text. Perfect for portfolios and interviews.

HTML

CSS

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Flow — Interactive Demo | Coodeverse</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root { --bg:#05070f; --card:#0d111c; --text:#e0e0e0; --accent:#00e7ff; --border:#1e2a3e; }
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; }
    header { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; background:linear-gradient(to bottom,#05070f,#0a0f1f); }
    .logo { font-size:3.5rem; font-weight:800; background:linear-gradient(90deg,#fff,var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:1rem; }
    h1 { font-size:3.8rem; font-weight:700; margin:1rem 0; }
    .subtitle { font-size:1.4rem; max-width:680px; opacity:0.9; margin:1.5rem auto; }
    .demo-container { margin:4rem auto; width:90%; max-width:1100px; background:#000; border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,231,255,0.15); border:1px solid var(--border); }
    .browser-bar { background:#111; padding:12px 20px; display:flex; align-items:center; gap:10px; font-family:monospace; color:#888; }
    .dot { width:12px; height:12px; border-radius:50%; }
    .red { background:#ff5f56; } .yellow { background:#ffbd2e; } .green { background:#27c93f; }
    .demo-screen { height:620px; background:#0f172a; position:relative; overflow:hidden; cursor:pointer; }
    .task-item { position:absolute; background:var(--card); padding:16px 20px; border-radius:12px; width:320px; border-left:4px solid var(--accent); transition:all 0.3s; box-shadow:0 4px 15px rgba(0,0,0,0.3); }
    .task-item:hover { box-shadow:0 20px 40px rgba(0,231,255,0.2); border-left-color:#fff; }
    .task-title { font-weight:600; font-size:1.1rem; margin-bottom:6px; }
    .task-desc { font-size:0.9rem; opacity:0.8; }
    .floating-ui { position:absolute; background:rgba(0,231,255,0.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:16px 24px; border-radius:16px; border:1px solid rgba(0,231,255,0.3); opacity:0; transition:all 0.4s; pointer-events:none; font-size:1rem; max-width:280px; color:var(--text); }
    .floating-ui.show { opacity:1; }
    .cta { margin:4rem 0; }
    .btn { padding:18px 44px; font-size:1.3rem; font-weight:600; background:var(--accent); color:#000; border:none; border-radius:50px; cursor:pointer; transition:all 0.3s; box-shadow:0 10px 30px rgba(0,231,255,0.4); }
    .btn:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,231,255,0.6); }
    footer { text-align:center; padding:3rem; color:#666; font-size:0.95rem; }
    @media (max-width:768px) { h1 { font-size:2.8rem; } .demo-screen { height:500px; } .task-item { width:280px; } }
  </style>
</head>
<body>
  <header>
    <div class="logo">Flow</div>
    <h1>See It In Action</h1>
    <p class="subtitle">Click any task below — explore cards, see smart suggestions, and feel how fast it works.</p>
    <div class="demo-container">
      <div class="browser-bar">
        <div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div>
        <span>flow.app/dashboard</span>
      </div>
      <div class="demo-screen" id="demo">
        <div class="task-item" style="top:80px;left:60px;" data-info="Drag & drop to reorder tasks instantly"><div class="task-title">Finish onboarding flow</div><div class="task-desc">Due today • High priority</div></div>
        <div class="task-item" style="top:200px;left:420px;" data-info="AI suggests the best time based on your energy levels"><div class="task-title">Write blog post</div><div class="task-desc">Suggested: Tomorrow 10AM</div></div>
        <div class="task-item" style="top:320px;left:100px;" data-info="One-click reschedule with smart suggestions"><div class="task-title">Team standup</div><div class="task-desc">Daily at 9:30AM • Recurring</div></div>
        <div class="task-item" style="top:100px;right:80px;" data-info="Natural language input — just type like you think"><div class="task-title">Call with Sarah</div><div class="task-desc">Added 5 seconds ago via voice</div></div>
        <div class="floating-ui" id="tooltip">Click any task to see how it works</div>
      </div>
    </div>
    <div class="cta"><button class="btn" onclick="alert('Welcome aboard! You\'re on the early access list 🚀')">Get Early Access</button></div>
    <p style="opacity:0.7;margin-top:2rem;">No signup needed • Instant demo • Works on mobile too</p>
  </header>
  <footer>© 2025 Flow • Built for people who get things done.</footer>
  <script>
    const demo=document.getElementById('demo'),tooltip=document.getElementById('tooltip');
    demo.addEventListener('click',e=>{
      const task=e.target.closest('.task-item');
      if(task){tooltip.textContent=task.getAttribute('data-info');tooltip.style.top=(e.clientY-120)+'px';tooltip.style.left=(e.clientX-140)+'px';tooltip.classList.add('show');setTimeout(()=>tooltip.classList.remove('show'),3000);}
    });
    setInterval(()=>{document.querySelectorAll('.task-item').forEach(t=>{t.style.transform='translateY('+(Math.sin(Date.now()/1000)*4)+'px)';});},50);
  </script>
</body>
</html>

/* Coodeverse – Flow Demo CSS | CC BY 4.0 | https://coodeverse.com */
:root { --bg:#05070f; --card:#0d111c; --text:#e0e0e0; --accent:#00e7ff; --border:#1e2a3e; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; }
header { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; background:linear-gradient(to bottom,#05070f,#0a0f1f); }
.logo { font-size:3.5rem; font-weight:800; background:linear-gradient(90deg,#fff,var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:1rem; }
h1 { font-size:3.8rem; font-weight:700; margin:1rem 0; }
.subtitle { font-size:1.4rem; max-width:680px; opacity:0.9; margin:1.5rem auto; }
.demo-container { margin:4rem auto; width:90%; max-width:1100px; background:#000; border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,231,255,0.15); border:1px solid var(--border); }
.browser-bar { background:#111; padding:12px 20px; display:flex; align-items:center; gap:10px; font-family:monospace; color:#888; }
.dot { width:12px; height:12px; border-radius:50%; }
.red { background:#ff5f56; } .yellow { background:#ffbd2e; } .green { background:#27c93f; }
.demo-screen { height:620px; background:#0f172a; position:relative; overflow:hidden; cursor:pointer; }
.task-item { position:absolute; background:var(--card); padding:16px 20px; border-radius:12px; width:320px; border-left:4px solid var(--accent); transition:all 0.3s; box-shadow:0 4px 15px rgba(0,0,0,0.3); }
.task-item:hover { box-shadow:0 20px 40px rgba(0,231,255,0.2); border-left-color:#fff; }
.task-title { font-weight:600; font-size:1.1rem; margin-bottom:6px; }
.task-desc { font-size:0.9rem; opacity:0.8; }
/* Glassmorphism Tooltip */
.floating-ui { position:absolute; background:rgba(0,231,255,0.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:16px 24px; border-radius:16px; border:1px solid rgba(0,231,255,0.3); opacity:0; transition:all 0.4s; pointer-events:none; font-size:1rem; max-width:280px; }
.floating-ui.show { opacity:1; }
.cta { margin:4rem 0; }
.btn { padding:18px 44px; font-size:1.3rem; font-weight:600; background:var(--accent); color:#000; border:none; border-radius:50px; cursor:pointer; transition:all 0.3s; box-shadow:0 10px 30px rgba(0,231,255,0.4); }
.btn:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,231,255,0.6); }
footer { text-align:center; padding:3rem; color:#666; font-size:0.95rem; }
@media (max-width:768px) { h1 { font-size:2.8rem; } .demo-screen { height:500px; } .task-item { width:280px; } }

// Coodeverse – Flow Demo JS | CC BY 4.0 | https://coodeverse.com

const demo    = document.getElementById('demo');
const tooltip = document.getElementById('tooltip');

// Event Delegation click tooltip
demo.addEventListener('click', (e) => {
  const task = e.target.closest('.task-item');
  if (task) {
    tooltip.textContent   = task.getAttribute('data-info');
    tooltip.style.top     = (e.clientY - 120) + 'px';
    tooltip.style.left    = (e.clientX - 140) + 'px';
    tooltip.classList.add('show');
    setTimeout(() => tooltip.classList.remove('show'), 3000);
  }
});

// Math.sin synchronized floating animation
setInterval(() => {
  document.querySelectorAll('.task-item').forEach(t => {
    t.style.transform = `translateY(${Math.sin(Date.now() / 1000) * 4}px)`;
  });
}, 50);

Frequently Asked Questions

How do I create a floating tooltip on click in JavaScript?

Use event delegation: (1) parent.addEventListener('click', e => { const el = e.target.closest('.task-item'); if (el) { ... } }). (2) Get text: el.getAttribute('data-info'). (3) Position: tooltip.style.top = (e.clientY - 120) + 'px'. (4) Show: tooltip.classList.add('show'). (5) Auto-hide: setTimeout(() => tooltip.classList.remove('show'), 3000).

How do I create a CSS glassmorphism card effect?

Glassmorphism requires: (1) background: rgba(0, 231, 255, 0.12). (2) backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px). (3) border: 1px solid rgba(0, 231, 255, 0.3). (4) border-radius: 16px. Requires a colorful background behind the element. The Flow Demo tooltip uses this exact technique.

How do I create a floating animation with Math.sin in JavaScript?

setInterval(() => { elements.forEach(el => { el.style.transform = 'translateY(' + (Math.sin(Date.now() / 1000) * 4) + 'px)'; }); }, 50)

. Math.sin oscillates -1 to +1 → multiplied by 4 = 4px float range. CSS-only alternative: @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

How do I build a dark theme with CSS custom properties?

Define: :root { --bg:#05070f; --card:#0d111c; --text:#e0e0e0; --accent:#00e7ff; }. Use: background:var(--bg); color:var(--text). Glow: box-shadow:0 10px 30px rgba(0,231,255,0.4). Light/dark toggle: redefine variables in [data-theme='light'].

How do I create a browser frame mockup in HTML CSS?

Container: border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,231,255,0.15). Bar: background:#111; display:flex; align-items:center; gap:10px. Traffic dots: .dot { width:12px; height:12px; border-radius:50%; } with red #ff5f56, yellow #ffbd2e, green #27c93f. Add URL span in monospace. Instantly makes portfolios look professional.

Is the Flow Interactive Demo completely free?

Yes! 100% free — no registration or payment needed. Download full ZIP. Licensed CC BY 4.0 for personal and commercial use. Keep attribution to Coodeverse.

Flow Interactive App Demo

CSS & JavaScript Techniques Inside

Live Preview

Full Source Code

Frequently Asked Questions

Download your free interactive demo project today