<!-- Build with JS -->
<div class="heatmap" id="heatmap"></div>

<script>
const weeks = 20;
const days  = 7;
const container = document.getElementById('heatmap');

for (let w = 0; w < weeks; w++) {
  const col = document.createElement('div');
  col.className = 'heatmap-week';
  for (let d = 0; d < days; d++) {
    const cell = document.createElement('div');
    cell.className = 'heatmap-cell';
    const val = Math.random();
    cell.style.opacity = val < 0.2 ? '0.05' : val < 0.5 ? '0.25' : val < 0.8 ? '0.6' : '1';
    cell.title = `${Math.floor(val * 10)} contributions`;
    col.appendChild(cell);
  }
  container.appendChild(col);
}
</script>

<style>
.heatmap { display: flex; gap: 3px; }
.heatmap-week { display: flex; flex-direction: column; gap: 3px; }
.heatmap-cell { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
</style>