Skip to content

feat: add Digital Marketing Analytics Center example #14636

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SAPTARSHI-coder merged 1 commit into from
Jun 20, 2026
Merged

feat: add Digital Marketing Analytics Center example #14636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions submissions/examples/digital-marketing-analytics-center/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Digital Marketing Analytics Center

## Overview
Build a marketing performance dashboard.

This project implements the Phase 110 requirements for the EaseMotion CSS catalog, demonstrating advanced UI development using modern CSS techniques without external UI frameworks.

## Features Included
- **Campaign overview**: Built with glassmorphism and CSS grid/flexbox.
- **Traffic analytics**: Built with glassmorphism and CSS grid/flexbox.
- **Conversion metrics**: Built with glassmorphism and CSS grid/flexbox.
- **KPI widgets**: Built with glassmorphism and CSS grid/flexbox.
- **Responsive cards**: Built with glassmorphism and CSS grid/flexbox.

## Architecture
- **Pure CSS**: No preprocessors or Tailwind used.
- **Interactivity**: Utilizes CSS pseudo-classes (`:hover`, `:checked`) for interactivity, avoiding JavaScript where possible.
- **Animations**: Custom keyframes for charts, loaders, and state transitions.
- **Variables**: Fully themeable using CSS custom properties.

## Setup
Simply open `demo.html` in any modern browser to view the interactive dashboard.
256 changes: 256 additions & 0 deletions submissions/examples/digital-marketing-analytics-center/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Marketing Analytics Center</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>

<!-- Modal Interactivity Hack -->
<input type="checkbox" id="config-modal" class="modal-trigger">
<div class="modal-overlay">
<div class="modal-content glass">
<label for="config-modal" class="modal-close">&times;</label>
<h3 style="margin-bottom: 15px;">Dashboard Configuration</h3>
<p style="color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 20px;">
Adjust operational rules and bounds for Digital Marketing Analytics Center. Changes propagate dynamically.
</p>
<form style="display: flex; flex-direction: column; gap: 15px;">
<div>
<label style="display: block; margin-bottom: 5px; font-size: 0.85rem; color: var(--text-secondary);">Threshold Limit</label>
<input type="range" min="0" max="100" value="75" style="width: 100%;">
</div>
<div>
<label style="display: block; margin-bottom: 5px; font-size: 0.85rem; color: var(--text-secondary);">Refresh Interval (ms)</label>
<input type="text" value="2500" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border-glass); background: rgba(0,0,0,0.2); color: white;">
</div>
<label for="config-modal" style="background: var(--primary); text-align: center; color: white; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: 600;">Save & Apply Settings</label>
</form>
</div>
</div>

<div class="app-container">
<!-- Sidebar component -->
<aside class="sidebar" id="navigation-sidebar">
<div class="brand">
<div class="brand-dot"></div>
<span>Console</span>
</div>
<ul class="nav-links">
<li class="nav-link active"><a href="#dashboard">Overview</a></li>
<li class="nav-link"><a href="#modules">Components</a></li>
<li class="nav-link"><a href="#analytics">Deep Analytics</a></li>
<li class="nav-link"><a href="#settings">Settings</a></li>
</ul>
<div class="sidebar-footer" style="padding-top: 20px; border-top: 1px solid var(--border-glass); text-align: center;">
<label for="config-modal" style="background: rgba(255,255,255,0.05); border: 1px solid var(--border-glass); padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; display: inline-block; width: 100%;">Config Panel</label>
</div>
</aside>

<!-- Main Content -->
<main class="main-content">
<!-- Section 1: Top Navigation Banner -->
<header class="header" id="header-section">
<div>
<h1 style="font-size: 1.75rem; font-weight: 700;">Digital Marketing Analytics Center</h1>
<p style="color: var(--text-secondary); font-size: 0.9rem;">Build a marketing performance dashboard.</p>
</div>
<div class="user-profile">
<div style="text-align: right;">
<p style="font-weight: 600; font-size: 0.95rem;">Admin User</p>
<p style="color: var(--success); font-size: 0.8rem; font-weight: 600;">System Online</p>
</div>
<div class="avatar" style="background-color: var(--primary);"></div>
</div>
</header>

<!-- Section 2: Global Telemetry Stats -->
<section class="stats-grid" id="telemetry-stats">
<div class="stat-card glass">
<p style="color: var(--text-secondary); font-size: 0.85rem;">Overall Status</p>
<div class="stat-value">99.94%</div>
<span class="stat-change change-up">&#8593; +0.02%</span>
</div>
<div class="stat-card glass">
<p style="color: var(--text-secondary); font-size: 0.85rem;">Active Modules</p>
<div class="stat-value">5 / 5</div>
<span class="stat-change change-up">&#8594; Optimizing</span>
</div>
<div class="stat-card glass">
<p style="color: var(--text-secondary); font-size: 0.85rem;">Performance Score</p>
<div class="stat-value">A+</div>
<span class="stat-change change-up">&#8593; Optimal</span>
</div>
<div class="stat-card glass">
<p style="color: var(--text-secondary); font-size: 0.85rem;">Weekly Growth</p>
<div class="stat-value">+14.2%</div>
<span class="stat-change change-up">&#8593; +2%</span>
</div>
</section>

<!-- Section 3: Tabs Control -->
<section class="tabs-container" id="tabs-section" style="margin-bottom: 24px;">
<div class="tabs">
<button class="tab-btn active">Live Dashboard</button>
<button class="tab-btn">Analytical Reports</button>
<button class="tab-btn">System Settings</button>
</div>
</section>

<!-- Section 4: Module Grid (Bento Grid) -->
<section class="bento-grid" id="modules-bento">
<!-- Bento Card 1: Principal Monitor Graph -->
<div class="bento-card bento-large glass" id="monitor-card">
<div>
<span class="status-badge status-active">Live stream</span>
<h3 style="margin-top: 15px;">Campaign overview</h3>
<p style="color: var(--text-secondary); font-size: 0.9rem;">Visualizing activity dynamics over time.</p>
</div>
<div class="chart-container">
<svg class="chart-svg" viewBox="0 0 500 200">
<defs>
<linearGradient id="gradient-fill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="var(--primary)" stop-opacity="0.3"/>
<stop offset="100%" stop-color="var(--primary)" stop-opacity="0"/>
</linearGradient>
</defs>
<line class="grid-line" x1="0" y1="50" x2="500" y2="50" />
<line class="grid-line" x1="0" y1="100" x2="500" y2="100" />
<line class="grid-line" x1="0" y1="150" x2="500" y2="150" />
<path class="chart-area" d="M 0,200 L 0,150 Q 100,50 200,120 T 400,30 T 500,80 L 500,200 Z" />
<path class="chart-line" d="M 0,150 Q 100,50 200,120 T 400,30 T 500,80" />
</svg>
</div>
</div>

<!-- Bento Card 2: Interactive Metric Meter (Widget) -->
<div class="bento-card glass" id="meter-card">
<div>
<h3 style="margin-bottom: 10px;">Traffic analytics</h3>
<p style="color: var(--text-secondary); font-size: 0.9rem;">Completion efficiency index.</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 20px 0;">
<svg width="120" height="120" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="var(--border-glass)" stroke-width="8" fill="none"/>
<circle cx="50" cy="50" r="40" stroke="var(--secondary)" stroke-width="8" fill="none"
stroke-dasharray="251" stroke-dashoffset="62" stroke-linecap="round"/>
<text x="50" y="55" text-anchor="middle" fill="white" font-size="16" font-weight="700">75%</text>
</svg>
</div>
<div style="font-size: 0.85rem; color: var(--text-secondary); text-align: center;">Optimal progress reported.</div>
</div>

<!-- Bento Card 3: Alert Feeds / Logs (Widget 2) -->
<div class="bento-card glass" id="logs-card">
<div>
<h3 style="margin-bottom: 10px;">Conversion metrics</h3>
<p style="color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;">Recent events feed</p>
</div>
<div style="display: flex; flex-direction: column; gap: 10px; height: 160px; overflow-y: auto;">
<div style="font-size: 0.8rem; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 6px; border-left: 3px solid var(--success);">
<span style="color: var(--text-muted);">[12:15:32]</span> Connection established securely.
</div>
<div style="font-size: 0.8rem; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 6px; border-left: 3px solid var(--primary);">
<span style="color: var(--text-muted);">[12:16:01]</span> Data synchronization completed.
</div>
<div style="font-size: 0.8rem; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 6px; border-left: 3px solid var(--warning);">
<span style="color: var(--text-muted);">[12:17:45]</span> Report generation triggered.
</div>
</div>
</div>

<!-- Bento Card 4: Platform Modules (Bento Spans remaining modules) -->
<div class="bento-card bento-large glass" id="modules-list-card">
<div>
<h3 style="margin-bottom: 10px;">System Components</h3>
<p style="color: var(--text-secondary); font-size: 0.9rem;">Status of required sub-modules</p>
</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px;">

<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass); border-radius: 8px;">
<span style="font-weight: 500; font-size: 0.9rem;">Campaign overview</span>
<span class="status-badge status-active">Active</span>
</div>

<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass); border-radius: 8px;">
<span style="font-weight: 500; font-size: 0.9rem;">Traffic analytics</span>
<span class="status-badge status-active">Active</span>
</div>

<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass); border-radius: 8px;">
<span style="font-weight: 500; font-size: 0.9rem;">Conversion metrics</span>
<span class="status-badge status-active">Active</span>
</div>

<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass); border-radius: 8px;">
<span style="font-weight: 500; font-size: 0.9rem;">KPI widgets</span>
<span class="status-badge status-active">Active</span>
</div>

<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass); border-radius: 8px;">
<span style="font-weight: 500; font-size: 0.9rem;">Responsive cards</span>
<span class="status-badge status-active">Active</span>
</div>

</div>
</div>
</section>

<!-- Section 5: Dynamic List View (Custom table) -->
<section class="table-section glass" style="padding: 24px; margin-bottom: 32px;" id="data-registry">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<div>
<h3 style="font-size: 1.2rem;">Detailed Logs</h3>
<p style="color: var(--text-secondary); font-size: 0.85rem;">Recent operations executed by the system.</p>
</div>
<button style="padding: 8px 16px; background: var(--primary); border: none; border-radius: 6px; color: white; font-weight: 600; cursor: pointer;">Export CSV</button>
</div>
<div class="table-wrapper">
<table class="custom-table">
<thead>
<tr>
<th>Resource ID</th>
<th>Status</th>
<th>Timestamp</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>RES-10492</td>
<td><span class="status-badge status-active">Processed</span></td>
<td>2026-06-20 12:15:32</td>
<td style="color: var(--primary); cursor: pointer;">View Details</td>
</tr>
<tr>
<td>RES-10491</td>
<td><span class="status-badge status-pending">Queued</span></td>
<td>2026-06-20 12:12:05</td>
<td style="color: var(--primary); cursor: pointer;">View Details</td>
</tr>
<tr>
<td>RES-10490</td>
<td><span class="status-badge status-alert">Failed</span></td>
<td>2026-06-20 12:08:44</td>
<td style="color: var(--primary); cursor: pointer;">View Details</td>
</tr>
<tr>
<td>RES-10489</td>
<td><span class="status-badge status-active">Processed</span></td>
<td>2026-06-20 11:55:10</td>
<td style="color: var(--primary); cursor: pointer;">View Details</td>
</tr>
</tbody>
</table>
</div>
</section>

</main>
</div>
</body>
</html>
Loading
Loading