<!DOCTYPE html>
<html>
<head>
<title>Metrics and dashboard template</title>
</head>
<body>

<div class="insight-app" id="insightApp">
  <header class="topbar">
    <div class="brand">
      <span class="brand-mark">◈</span>
      <span>pulse<span class="brand-light">metrics</span></span>
    </div>
    <div class="top-actions">
      <span class="demo-label">DEMO DATA</span>
      <button id="themeButton" class="icon-button" type="button" aria-label="Toggle dark mode">☾</button>
    </div>
  </header>

<main class="dashboard">
    <div class="page-heading">
      <div>
        <div class="eyebrow">ANALYTICS OVERVIEW</div>
        <h1>Performance dashboard<span class="heading-dot">.</span></h1>
        <p>A clearer picture of how your business is performing.</p>
      </div>
      <div class="period-control" aria-label="Reporting period">
        <button class="period-btn" data-period="7" type="button">7 days</button>
        <button class="period-btn active" data-period="30" type="button">30 days</button>
        <button class="period-btn" data-period="90" type="button">90 days</button>
      </div>
    </div>

<section class="kpi-grid" aria-label="Key metrics">
      <article class="kpi-card">
        <div class="kpi-top"><span>Total revenue</span><span class="kpi-icon blue">↗</span></div>
        <div class="kpi-value" id="revenueKpi">$128,450</div>
        <div class="kpi-foot"><span class="positive" id="revenueChange">+12.8%</span> vs previous period</div>
      </article>
      <article class="kpi-card">
        <div class="kpi-top"><span>Active users</span><span class="kpi-icon purple">♙</span></div>
        <div class="kpi-value" id="usersKpi">24,892</div>
        <div class="kpi-foot"><span class="positive" id="usersChange">+8.2%</span> vs previous period</div>
      </article>
      <article class="kpi-card">
        <div class="kpi-top"><span>Conversion rate</span><span class="kpi-icon orange">◎</span></div>
        <div class="kpi-value" id="conversionKpi">4.86%</div>
        <div class="kpi-foot"><span class="positive" id="conversionChange">+1.4%</span> vs previous period</div>
      </article>
      <article class="kpi-card">
        <div class="kpi-top"><span>Avg. order value</span><span class="kpi-icon green">$</span></div>
        <div class="kpi-value" id="orderKpi">$84.20</div>
        <div class="kpi-foot"><span class="positive" id="orderChange">+3.6%</span> vs previous period</div>
      </article>
    </section>

<section class="chart-grid">
      <article class="panel revenue-panel">
        <div class="panel-heading">
          <div><h2>Revenue overview</h2><p>Revenue performance over time</p></div>
          <span class="panel-tag">USD</span>
        </div>
        <div class="revenue-summary">
          <strong id="chartRevenue">$128,450</strong>
          <span class="positive" id="chartGrowth">↗ 12.8%</span>
        </div>
        <div class="chart-container tall"><canvas id="revenueChart" aria-label="Revenue trend chart" role="img"></canvas></div>
      </article>

<article class="panel source-panel">
        <div class="panel-heading">
          <div><h2>Traffic sources</h2><p>Where your visitors come from</p></div>
          <span class="panel-tag">SHARE</span>
        </div>
        <div class="donut-wrap">
          <div class="chart-container donut"><canvas id="sourceChart" aria-label="Traffic sources doughnut chart" role="img"></canvas></div>
          <div class="donut-center"><strong>100%</strong><small>Traffic</small></div>
        </div>
        <div class="source-legend" id="sourceLegend"></div>
      </article>

<article class="panel activity-panel">
        <div class="panel-heading">
          <div><h2>Weekly activity</h2><p>Visitors by device type</p></div>
          <div class="chart-legend"><span><i class="legend-dot desktop"></i>Desktop</span><span><i class="legend-dot mobile"></i>Mobile</span></div>
        </div>
        <div class="chart-container medium"><canvas id="activityChart" aria-label="Weekly device activity bar chart" role="img"></canvas></div>
      </article>

<article class="panel insights-panel">
        <div class="panel-heading">
          <div><h2>Highlights</h2><p>What the numbers are telling us</p></div>
        </div>
        <div class="insight-item">
          <span class="insight-symbol blue">↗</span>
          <div><strong>Revenue is trending upward</strong><p id="revenueInsight">Growth compared with the previous period.</p></div>
        </div>
        <div class="insight-item">
          <span class="insight-symbol purple">◎</span>
          <div><strong>Organic search leads</strong><p>Search accounts for 42% of total visits.</p></div>
        </div>
        <div class="insight-item">
          <span class="insight-symbol orange">▥</span>
          <div><strong>Mobile engagement matters</strong><p>Mobile traffic is a significant part of the audience.</p></div>
        </div>
        <div class="insight-bottom">Illustrative insights based on sample data.</div>
      </article>
    </section>

<footer class="dashboard-footer">
      <span>PulseMetrics — Interactive dashboard concept</span>
      <span>Built with HTML, CSS, JavaScript &amp; Chart.js</span>
    </footer>
  </main>
</div>

</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
}

.insight-app {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #1c2435;
  --muted: #8b94a6;
  --border: #e9edf3;
  --accent: #5665e8;
  --green: #129c70;
  --track: #f1f3f8;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background .2s, color .2s;
}

.insight-app.dark {
  --bg: #111722;
  --surface: #1b2432;
  --text: #edf1fa;
  --muted: #a4b0c4;
  --border: #303c4d;
  --accent: #94a0ff;
  --green: #66d8ab;
  --track: #273345;
}

button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px max(24px, calc((100% - 1250px)/2));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -1px;
}

.brand-mark { font-size: 29px; color: var(--accent); }
.brand-light { font-weight: 400; }

.top-actions { display: flex; align-items: center; gap: 18px; }

.demo-label {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 800;
}

.icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
}

.dashboard { max-width: 1300px; margin: auto; padding: 38px 24px 22px; }

.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 30px;
}

.eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.page-heading h1 {
  margin: 10px 0;
  font-size: clamp(26px, 3vw, 37px);
  font-weight: 800;
  letter-spacing: -1.6px;
}

.heading-dot { color: var(--accent); }
.page-heading p, .panel-heading p { color: var(--muted); margin: 0; font-size: 13px; }

.period-control {
  display: flex;
  padding: 5px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}

.period-btn {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.period-btn.active { background: var(--accent); color: #fff; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.kpi-card, .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 15px;
}

.kpi-card { padding: 23px; min-width: 0; }

.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-top > span:first-child { color: var(--muted); font-size: 12px; font-weight: 600; }

.kpi-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  font-size: 19px;
  font-weight: 700;
}

.blue { color: #5d75ec; background: #e9edff; }
.purple { color: #9465e8; background: #f2eaff; }
.orange { color: #e49a3d; background: #fff2df; }
.green { color: #23a987; background: #def8ed; }

.kpi-value {
  margin: 18px 0 10px;
  font-size: clamp(23px, 2.5vw, 30px);
  font-weight: 800;
  letter-spacing: -1px;
}

.kpi-foot { color: var(--muted); font-size: 11px; }
.positive { color: var(--green); font-weight: 800; }

.chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: 20px;
}

.panel { padding: 25px; min-width: 0; }

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 24px;
}

.panel-heading h2 { margin: 0 0 7px; font-size: 16px; letter-spacing: -.3px; }

.panel-tag {
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--track);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.revenue-summary { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.revenue-summary strong { font-size: 29px; letter-spacing: -1px; }
.revenue-summary .positive { font-size: 12px; }

.chart-container { position: relative; width: 100%; }
.chart-container.tall { height: 275px; }
.chart-container.medium { height: 260px; }
.chart-container.donut { height: 210px; }

.donut-wrap { position: relative; }
.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.donut-center strong { font-size: 27px; }
.donut-center small { color: var(--muted); font-size: 11px; }

.source-legend { display: grid; gap: 13px; margin-top: 23px; }
.source-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.source-name { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.source-dot, .legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.source-row strong { font-size: 12px; }

.chart-legend { display: flex; gap: 12px; color: var(--muted); font-size: 11px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.desktop { background: #6372e9; }
.mobile { background: #b7bfff; }

.insight-item { display: flex; gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--border); }
.insight-symbol { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 11px; font-size: 20px; }
.insight-item strong { display: block; margin-bottom: 5px; font-size: 12px; }
.insight-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.insight-bottom { color: var(--muted); font-size: 11px; margin-top: 21px; }

.dashboard-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 950px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 580px) {
  .dashboard { padding: 25px 13px; }
  .topbar { padding: 14px; }
  .page-heading { flex-direction: column; align-items: start; }
  .kpi-grid { gap: 10px; }
  .kpi-card { padding: 15px; }
  .kpi-value { font-size: 22px; }
  .panel { padding: 17px; }
  .chart-legend { flex-direction: column; }
  .demo-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .insight-app { transition: none; }
}

(function () {
  "use strict";

var root = document.getElementById("insightApp");
  if (!root) return;

var initialized = false;
  var charts = [];
  var period = "30";
  var darkMode = false;

var data = {
    "7": {
      revenue: 32480,
      users: 6842,
      conversion: 4.42,
      order: 81.60,
      changes: [9.2, 6.1, 0.8, 2.4],
      labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      trend: [3200, 3900, 3600, 4700, 5100, 5700, 6280]
    },
    "30": {
      revenue: 128450,
      users: 24892,
      conversion: 4.86,
      order: 84.20,
      changes: [12.8, 8.2, 1.4, 3.6],
      labels: ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6"],
      trend: [14200, 17500, 19100, 21800, 25200, 30650]
    },
    "90": {
      revenue: 386720,
      users: 72410,
      conversion: 5.12,
      order: 86.90,
      changes: [18.4, 13.7, 2.1, 4.8],
      labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct"],
      trend: [41200, 50700, 56100, 66500, 78100, 94120]
    }
  };

var sourceLabels = ["Organic search", "Direct", "Social media", "Referral"];
  var sourceValues = [42, 28, 18, 12];
  var sourceColors = ["#6372e9", "#9d82e8", "#49b7aa", "#f0b46e"];

function byId(id) {
    return document.getElementById(id);
  }

function money(value) {
    return "$" + value.toLocaleString("en-US");
  }

function text(id, value) {
    var node = byId(id);
    if (node) node.textContent = value;
  }

function chartOptions() {
    return {
      responsive: true,
      maintainAspectRatio: false,
      animation: false,
      devicePixelRatio: Math.min(window.devicePixelRatio || 1, 1.5),
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: "#20293a",
          padding: 12,
          cornerRadius: 8,
          titleFont: { family: "DM Sans" },
          bodyFont: { family: "DM Sans" }
        }
      }
    };
  }

function axisColor() {
    return darkMode ? "#a4b0c4" : "#8b94a6";
  }

function gridColor() {
    return darkMode ? "#303c4d" : "#eef0f5";
  }

function createCharts() {
    if (typeof Chart === "undefined") return;

var current = data[period];

var revenueChart = new Chart(byId("revenueChart"), {
      type: "line",
      data: {
        labels: current.labels,
        datasets: [{
          label: "Revenue",
          data: current.trend,
          borderColor: "#6372e9",
          backgroundColor: "rgba(99,114,233,0.11)",
          fill: true,
          tension: 0.38,
          borderWidth: 3,
          pointRadius: 3,
          pointHoverRadius: 6,
          pointBackgroundColor: "#6372e9"
        }]
      },
      options: revenueOptions
    });

var donutOptions = chartOptions();
    donutOptions.cutout = "77%";
    donutOptions.plugins.tooltip.callbacks = {
      label: function (context) {
        return context.label + ": " + context.parsed + "%";
      }
    };

var sourceChart = new Chart(byId("sourceChart"), {
      type: "doughnut",
      data: {
        labels: sourceLabels,
        datasets: [{
          data: sourceValues,
          backgroundColor: sourceColors,
          borderWidth: 0,
          spacing: 3,
          borderRadius: 5,
          hoverOffset: 4
        }]
      },
      options: donutOptions
    });

var activityOptions = chartOptions();
    activityOptions.scales = {
      x: {
        stacked: false,
        grid: { display: false },
        border: { display: false },
        ticks: { color: axisColor() }
      },
      y: {
        beginAtZero: true,
        grid: { color: gridColor() },
        border: { display: false },
        ticks: { color: axisColor() }
      }
    };

var activityChart = new Chart(byId("activityChart"), {
      type: "bar",
      data: {
        labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        datasets: [
          {
            label: "Desktop",
            data: [1250, 1580, 1420, 1750, 1620, 1100, 950],
            backgroundColor: "#6372e9",
            borderRadius: 5,
            maxBarThickness: 22
          },
          {
            label: "Mobile",
            data: [950, 1180, 1350, 1250, 1470, 1530, 1380],
            backgroundColor: "#b7bfff",
            borderRadius: 5,
            maxBarThickness: 22
          }
        ]
      },
      options: activityOptions
    });

charts = [revenueChart, sourceChart, activityChart];
  }

function createLegend() {
    var container = byId("sourceLegend");
    if (!container) return;

container.replaceChildren();

sourceLabels.forEach(function (name, index) {
      var row = document.createElement("div");
      row.className = "source-row";

var label = document.createElement("span");
      label.className = "source-name";

var dot = document.createElement("i");
      dot.className = "source-dot";
      dot.style.backgroundColor = sourceColors[index];

var nameText = document.createElement("span");
      nameText.textContent = name;

label.appendChild(dot);
      label.appendChild(nameText);

var percent = document.createElement("strong");
      percent.textContent = sourceValues[index] + "%";

row.appendChild(label);
      row.appendChild(percent);
      container.appendChild(row);
    });
  }

function updateKpis() {
    var d = data[period];

text("revenueKpi", money(d.revenue));
    text("usersKpi", d.users.toLocaleString("en-US"));
    text("conversionKpi", d.conversion.toFixed(2) + "%");
    text("orderKpi", "$" + d.order.toFixed(2));

text("revenueChange", "+" + d.changes[0] + "%");
    text("usersChange", "+" + d.changes[1] + "%");
    text("conversionChange", "+" + d.changes[2] + "%");
    text("orderChange", "+" + d.changes[3] + "%");

text("chartRevenue", money(d.revenue));
    text("chartGrowth", "+" + d.changes[0] + "%");
    text("revenueInsight", "Revenue grew " + d.changes[0] + "% compared with the previous period.");

if (charts[0]) {
      charts[0].data.labels = d.labels;
      charts[0].data.datasets[0].data = d.trend;
      charts[0].update("none");
    }
  }

function updateTheme() {
    root.classList.toggle("dark", darkMode);
    text("themeButton", darkMode ? "☀" : "☾");

if (charts[0]) {
      charts[0].options.scales.x.ticks.color = axisColor();
      charts[0].options.scales.y.ticks.color = axisColor();
      charts[0].options.scales.y.grid.color = gridColor();
      charts[0].update("none");
    }

if (charts[2]) {
      charts[2].options.scales.x.ticks.color = axisColor();
      charts[2].options.scales.y.ticks.color = axisColor();
      charts[2].options.scales.y.grid.color = gridColor();
      charts[2].update("none");
    }
  }

function initialize() {
    if (initialized) return;
    initialized = true;

createLegend();
    createCharts();
    updateKpis();

var buttons = root.querySelectorAll(".period-btn");

buttons.forEach(function (button) {
      button.addEventListener("click", function () {
        period = button.getAttribute("data-period");

buttons.forEach(function (item) {
          item.classList.toggle("active", item === button);
        });

updateKpis();
      });
    });

byId("themeButton").addEventListener("click", function () {
      darkMode = !darkMode;
      updateTheme();
    });
  }

function loadChartLibrary() {
    if (typeof Chart !== "undefined") {
      initialize();
      return;
    }

var attempts = 0;
    var timer = setInterval(function () {
      attempts++;

if (typeof Chart !== "undefined") {
        clearInterval(timer);
        initialize();
      } else if (attempts >= 40) {
        clearInterval(timer);
        var heading = root.querySelector(".page-heading p");
        if (heading) {
          heading.textContent = "Chart library unavailable. Check your internet connection.";
        }
      }
    }, 150);
  }

loadChartLibrary();
})();

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground