<!DOCTYPE html> <html lang="en" data-theme="light"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Streak — Contribution Card</title> <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" /> <style> :root{ --l0:#ebedf0; --l1:#9be9a8; --l2:#40c463; --l3:#30a14e; --l4:#216e39; --bg:#f4f5f7; --card:#ffffff; --fg:#1f2328; --muted:#6e7781; --line:#e6e8eb; --shadow:0 10px 40px rgba(20,24,31,.10); --cell:13px; --gap:4px; --ease:cubic-bezier(.34,1.56,.64,1); } html[data-theme="dark"]{ --l0:#1b2026; --bg:#0d1117; --card:#161b22; --fg:#e6edf3; --muted:#8b949e; --line:#262c34; --shadow:0 14px 50px rgba(0,0,0,.5); } *{margin:0;padding:0;box-sizing:border-box} body{min-height:100vh;display:grid;place-items:center;padding:28px;background:var(--bg);color:var(--fg); font-family:"Inter",system-ui,sans-serif;transition:background .5s var(--ease),color .5s var(--ease)} .card{width:min(840px,100%);background:var(--card);border:1px solid var(--line);border-radius:20px; padding:clamp(18px,3vw,30px);box-shadow:var(--shadow);transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s} .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px} .total{font-size:clamp(20px,3vw,26px);font-weight:700;letter-spacing:-.02em} .total small{font-weight:500;color:var(--muted);font-size:14px} .streak{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--l3) 14%,transparent); color:var(--l3);border:1px solid color-mix(in srgb,var(--l3) 30%,transparent);padding:7px 13px;border-radius:100px; font-weight:600;font-size:14px;transition:color .5s,background .5s,border-color .5s} .flame{width:18px;height:18px;display:inline-block;vertical-align:-4px;animation:flicker 1.6s ease-in-out infinite;transform-origin:bottom center} @keyframes flicker{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.18) rotate(3deg)}} .controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px} .swatches{display:flex;gap:8px} .sw{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;position:relative; transition:transform .25s var(--ease),border-color .25s} .sw:hover{transform:scale(1.18)} .sw.on{border-color:var(--fg)} .sw input{position:absolute;inset:0;opacity:0;cursor:pointer} .btn{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--fg);border:1px solid var(--line); border-radius:10px;padding:8px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer; transition:background .25s,border-color .25s,transform .15s} .btn:hover{border-color:var(--muted)} .btn:active{transform:scale(.96)} .btn svg{width:15px;height:15px;flex-shrink:0} .spacer{flex:1} .scroll{overflow-x:auto;scrollbar-width:none;padding-bottom:4px} .scroll::-webkit-scrollbar{display:none} .cal{display:grid;grid-template-columns:auto 1fr;gap:6px 7px;width:max-content} .months{grid-column:2;display:grid;grid-template-columns:repeat(var(--weeks),var(--cell));gap:var(--gap); font-size:11px;color:var(--muted)} .months span{white-space:nowrap} .days{display:grid;grid-template-rows:repeat(7,var(--cell));gap:var(--gap);font-size:11px;color:var(--muted); align-items:center} .cells{display:grid;grid-template-columns:repeat(var(--weeks),var(--cell));grid-template-rows:repeat(7,var(--cell)); grid-auto-flow:column;gap:var(--gap)} .cell{width:var(--cell);height:var(--cell);border-radius:3px;background:var(--l0);cursor:pointer; transform:scale(.2);opacity:0;transition:background .45s var(--ease),transform .2s var(--ease),box-shadow .2s; outline:1px solid rgba(27,31,36,.04);outline-offset:-1px} html[data-theme="dark"] .cell{outline-color:rgba(255,255,255,.05)} .cell.show{transform:scale(1);opacity:1} .cell[data-level="1"]{background:var(--l1)} .cell[data-level="2"]{background:var(--l2)} .cell[data-level="3"]{background:var(--l3)} .cell[data-level="4"]{background:var(--l4)} .cell:hover{transform:scale(1.35);box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:2; outline:1.5px solid var(--fg);outline-offset:1px} .legend{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:16px;font-size:12px;color:var(--muted)} .legend .cell{cursor:default;transform:scale(1);opacity:1} .legend .cell:hover{transform:scale(1);box-shadow:none;outline:1px solid rgba(27,31,36,.04)} .tip{position:fixed;pointer-events:none;background:#1b1f24;color:#fff;font-size:12px;font-weight:500; padding:7px 10px;border-radius:8px;transform:translate(-50%,-130%) scale(.9);opacity:0; transition:opacity .16s,transform .16s var(--ease);white-space:nowrap;z-index:50;box-shadow:0 6px 20px rgba(0,0,0,.3)} .tip.show{opacity:1;transform:translate(-50%,-130%) scale(1)} .tip::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%); border:5px solid transparent;border-top-color:#1b1f24} .hint{font-size:12px;color:var(--muted);margin-top:14px} </style> </head> <body> <div class="card"> <div class="top"> <div> <div class="total"><span id="total">0</span> <small>contributions this year</small></div> </div> <div class="streak" id="streakBadge"><svg class="flame" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M208,144a80,80,0,0,1-160,0c0-30.57,14.42-58.26,31-80l33,32,26.27-72C159.86,41.92,208,88.15,208,144Z" opacity="0.2"/><path d="M183.89,153.34a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68ZM216,144a88,88,0,0,1-176,0c0-27.92,11-56.47,32.66-84.85a8,8,0,0,1,11.93-.89l24.12,23.41,22-60.41a8,8,0,0,1,12.63-3.41C165.21,36,216,84.55,216,144Zm-16,0c0-46.09-35.79-85.92-58.21-106.33L119.52,98.74a8,8,0,0,1-13.09,3L80.06,76.16C64.09,99.21,56,122,56,144a72,72,0,0,0,144,0Z"/></svg> <span id="streakNum">0</span>-day streak</div> </div> <div class="controls"> <div class="swatches" id="swatches"></div> <div class="spacer"></div> <button class="btn" id="shuffle" title="Generate new data">⤮ Shuffle</button> <button class="btn" id="theme" title="Toggle theme"></button> </div> <div class="scroll"> <div class="cal" id="cal"> <div class="months" id="months"></div> <div class="days" id="days"></div> <div class="cells" id="cells"></div> </div> </div> <div class="legend"> Less <div class="cell" data-level="0"></div><div class="cell" data-level="1"></div> <div class="cell" data-level="2"></div><div class="cell" data-level="3"></div> <div class="cell" data-level="4"></div> More </div> <p class="hint">Hover a day for details · click a day to change its level · pick a colour above.</p> </div> <div class="tip" id="tip"></div> <script> (function(){ var WEEKS=53, DOW=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; var MONTHS=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; var root=document.documentElement; var cellsEl=document.getElementById("cells"), monthsEl=document.getElementById("months"), daysEl=document.getElementById("days"); var tip=document.getElementById("tip"); var totalEl=document.getElementById("total"), streakNum=document.getElementById("streakNum"); var cells=[]; // {el, date, count, level} root.style.setProperty("--weeks", WEEKS); var PALETTES=[ {name:"Green", h:137, s:58},{name:"Blue", h:212, s:72},{name:"Violet", h:265, s:60}, {name:"Amber", h:33, s:85},{name:"Pink", h:330, s:70},{name:"Teal", h:172, s:60} ]; var accent={h:137,s:58}; function lvlColor(h,s,level){ var dark=root.getAttribute("data-theme")==="dark"; var L = dark ? [0,30,40,52,64][level] : [0,80,62,46,32][level]; var S = dark ? s : Math.min(s+6,92); return "hsl("+h+" "+S+"% "+L+"%)"; } function applyAccent(){ for(var i=1;i<=4;i++) root.style.setProperty("--l"+i, lvlColor(accent.h,accent.s,i)); } /* weekday labels (Mon/Wed/Fri) */ for(var d=0;d<7;d++){var s=document.createElement("div");s.textContent=(d===1||d===3||d===5)?DOW[d]:"";daysEl.appendChild(s);} function genData(){ cellsEl.innerHTML=""; monthsEl.innerHTML=""; cells=[]; var end=new Date(); end.setHours(0,0,0,0); var start=new Date(end); start.setDate(start.getDate()-((WEEKS-1)*7+end.getDay())); var cur=new Date(start), col=0, lastMonth=-1, streakMomentum=0; var monthCells=[]; while(cur<=end){ // autocorrelated activity for believable streaks var base=Math.random(); streakMomentum = base<0.42 ? Math.max(0,streakMomentum-1) : Math.min(4,streakMomentum + (Math.random()<.6?1:2)); var level = base<0.32 ? 0 : streakMomentum===0 ? 1 : streakMomentum; if(Math.random()<0.12) level=0; var count = level===0?0 : [0,[1,3],[4,7],[8,12],[13,21]][level]; count = level===0?0 : count[0]+Math.floor(Math.random()*(count[1]-count[0]+1)); var cell=document.createElement("div"); cell.className="cell"; cell.dataset.level=level; var date=new Date(cur); var obj={el:cell,date:date,count:count,level:level}; cell.addEventListener("mouseenter",function(o){return function(e){showTip(o,e);};}(obj)); cell.addEventListener("mousemove",moveTip); cell.addEventListener("mouseleave",hideTip); cell.addEventListener("click",function(o){return function(){cycle(o);};}(obj)); cellsEl.appendChild(cell); cells.push(obj); // month label at first row of a week when month changes if(cur.getDay()===0){ var span=document.createElement("span"); if(cur.getMonth()!==lastMonth){ span.textContent=MONTHS[cur.getMonth()]; lastMonth=cur.getMonth(); } monthsEl.appendChild(span); } cur.setDate(cur.getDate()+1); } reveal(); recalc(); } function reveal(){ cells.forEach(function(o,i){ var col=Math.floor(i/7), row=i%7; o.el.style.transitionDelay=(col*9+row*6)+"ms"; requestAnimationFrame(function(){ o.el.classList.add("show"); }); }); setTimeout(function(){ cells.forEach(function(o){o.el.style.transitionDelay="0ms";}); }, 1400); } function cycle(o){ o.level=(o.level+1)%5; o.count=o.level===0?0:[0,2,6,10,17][o.level]+Math.floor(Math.random()*3); o.el.dataset.level=o.level; o.el.style.transform="scale(1.5)"; setTimeout(function(){o.el.style.transform="";},160); recalc(); } function recalc(){ var total=0,longest=0,run=0,current=0; cells.forEach(function(o){ total+=o.count; if(o.level>0){run++; if(run>longest)longest=run;} else run=0; }); // current streak = trailing run for(var i=cells.length-1;i>=0;i--){ if(cells[i].level>0) current++; else break; } countTo(totalEl, total); streakNum.textContent=current; } function countTo(el,target){ var from=parseInt(el.textContent.replace(/,/g,""))||0, t0=null, dur=700; function step(ts){ if(!t0)t0=ts; var p=Math.min((ts-t0)/dur,1); var v=Math.round(from+(target-from)*(1-Math.pow(1-p,3))); el.textContent=v.toLocaleString(); if(p<1)requestAnimationFrame(step); } requestAnimationFrame(step); } function fmt(d){ return DOW[d.getDay()]+", "+MONTHS[d.getMonth()]+" "+d.getDate(); } function showTip(o,e){ tip.textContent=(o.count===0?"No contributions":o.count+" contribution"+(o.count>1?"s":""))+" · "+fmt(o.date); moveTip(e); tip.classList.add("show"); } function moveTip(e){ tip.style.left=e.clientX+"px"; tip.style.top=e.clientY+"px"; } function hideTip(){ tip.classList.remove("show"); } /* swatches */ var swWrap=document.getElementById("swatches"); PALETTES.forEach(function(p,i){ var b=document.createElement("button"); b.className="sw"+(i===0?" on":""); b.style.background="hsl("+p.h+" "+p.s+"% 50%)"; b.title=p.name; b.addEventListener("click",function(){ accent={h:p.h,s:p.s}; setActive(b); applyAccent(); }); swWrap.appendChild(b); }); // custom colour picker swatch var custom=document.createElement("label"); custom.className="sw"; custom.title="Custom"; custom.style.background="conic-gradient(red,orange,yellow,lime,aqua,blue,magenta,red)"; var picker=document.createElement("input"); picker.type="color"; picker.value="#8b5cf6"; picker.addEventListener("input",function(){ var hsl=hexToHsl(picker.value); accent={h:hsl.h,s:Math.max(hsl.s,45)}; setActive(custom); applyAccent(); }); custom.appendChild(picker); swWrap.appendChild(custom); function setActive(el){ swWrap.querySelectorAll(".sw").forEach(function(s){s.classList.remove("on");}); el.classList.add("on"); } function hexToHsl(hex){ var r=parseInt(hex.slice(1,3),16)/255,g=parseInt(hex.slice(3,5),16)/255,b=parseInt(hex.slice(5,7),16)/255; var mx=Math.max(r,g,b),mn=Math.min(r,g,b),h,s,l=(mx+mn)/2; if(mx===mn){h=s=0;} else { var dd=mx-mn; s=l>.5?dd/(2-mx-mn):dd/(mx+mn); h = mx===r ? (g-b)/dd+(g<b?6:0) : mx===g ? (b-r)/dd+2 : (r-g)/dd+4; h*=60; } return {h:Math.round(h),s:Math.round(s*100),l:Math.round(l*100)}; } /* theme */ var moonSvg='<svg viewBox="0 0 256 256" fill="currentColor"><path d="M227.89,147.89A96,96,0,1,1,108.11,28.11,96.09,96.09,0,0,0,227.89,147.89Z" opacity="0.2"/><path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/></svg>'; var sunSvg='<svg viewBox="0 0 256 256" fill="currentColor"><path d="M184,128a56,56,0,1,1-56-56A56,56,0,0,1,184,128Z" opacity="0.2"/><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/></svg>'; var themeBtn=document.getElementById("theme"); function paintThemeBtn(){ var dark=root.getAttribute("data-theme")==="dark"; themeBtn.innerHTML = dark ? sunSvg+" Light" : moonSvg+" Dark"; } themeBtn.addEventListener("click",function(){ var dark=root.getAttribute("data-theme")==="dark"; root.setAttribute("data-theme", dark?"light":"dark"); paintThemeBtn(); applyAccent(); }); paintThemeBtn(); document.getElementById("shuffle").addEventListener("click",genData); applyAccent(); genData(); })(); </script> </body> </html>

Code & assets

Design System