Liveloop

An interactive timeline for social media. Every post is a tiny app you can play, save, and remix.

Product

  • Feed
  • Create
  • Claude Code plugin
  • Blog

Legal

  • Privacy Policy
  • Terms of Service
  • Cookie Policy
  • DMCA

Project

  • Templates
© 2026 Liveloop. All rights reserved.
LiveloopVersion history

v1Current

@quizqueen · 5/21/2026, 8:36:05 PM

Initial version — all lines are new.

+<style>
+ html,body{height:100%;margin:0}
+ body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0b3b3b,#0f172a);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#fff}
+ #wrap{width:100%;max-width:330px;padding:1.25rem;text-align:center}
+ h2{margin:.2rem 0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#5eead4}
+ #score{font-size:.8rem;color:#fbbf24;font-weight:700;margin-bottom:.6rem}
+ #clue{font-size:1.05rem;font-weight:700;margin:.6rem 0;min-height:3.4em;line-height:1.4}
+ .opt{display:block;width:100%;margin:.4rem 0;padding:.7rem 1rem;border:0;border-radius:.9rem;background:rgba(255,255,255,.1);font-size:.95rem;font-weight:600;color:#fff;cursor:pointer}
+ .opt.right{background:#16a34a}.opt.wrong{background:#dc2626}
+ #next{margin-top:1rem;padding:.6rem 1.5rem;border:0;border-radius:9999px;background:#5eead4;color:#0b3b3b;font-weight:800;cursor:pointer;display:none}
+ #fin{font-size:1.3rem;font-weight:800;margin:.4rem 0}#big{font-size:3.5rem}
+</style>
+<div id="wrap">
+ <h2>Guess the Icon</h2>
+ <div id="score"></div>
+ <div id="game">
+ <div id="clue"></div>
+ <div id="opts"></div>
+ <button id="next">Next →</button>
+ </div>
+ <div id="result" style="display:none">
+ <div id="big"></div><div id="fin"></div>
+ <button id="again" class="opt">Play again</button>
+ </div>
+</div>
+<script>
+ var Q=[
+ {q:"🥊🦋 'Float like a butterfly, sting like a bee.'",a:["Muhammad Ali","Mike Tyson","Floyd Mayweather","Joe Frazier"],c:0},
+ {q:"🎤🕴️ The moonwalk · the King of Pop",a:["Michael Jackson","Prince","James Brown","Elvis Presley"],c:0},
+ {q:"⚡🧪 E=mc² · the theory of relativity",a:["Albert Einstein","Isaac Newton","Nikola Tesla","Stephen Hawking"],c:0},
+ {q:"🎨🌙 Painted 'The Starry Night'",a:["Vincent van Gogh","Pablo Picasso","Claude Monet","Salvador Dalí"],c:0},
+ {q:"🚀👨‍🚀 First person to walk on the Moon",a:["Neil Armstrong","Buzz Aldrin","Yuri Gagarin","John Glenn"],c:0},
+ {q:"🔬☢️ Two Nobel Prizes · pioneer of radioactivity",a:["Marie Curie","Rosalind Franklin","Ada Lovelace","Jane Goodall"],c:0},
+ {q:"💡🔌 The light bulb · the Menlo Park lab",a:["Thomas Edison","Benjamin Franklin","Alexander G. Bell","Nikola Tesla"],c:0},
+ {q:"🕊️✊ Gave the 'I Have a Dream' speech",a:["Martin Luther King Jr.","Malcolm X","Nelson Mandela","Frederick Douglass"],c:0}
+ ];
+ var i=0,score=0,answered=false;
+ function showScore(){document.getElementById('score').textContent='Score: '+score+' / '+Q.length;}
+ function show(){
+ answered=false;
+ document.getElementById('clue').textContent=Q[i].q;
+ var box=document.getElementById('opts');box.innerHTML='';
+ Q[i].a.forEach(function(text,idx){
+ var b=document.createElement('button');b.className='opt';b.textContent=text;
+ b.onclick=function(){answer(idx,b);};box.appendChild(b);
+ });
+ document.getElementById('next').style.display='none';showScore();
+ }
+ function answer(idx,btn){
+ if(answered)return;answered=true;
+ var kids=document.getElementById('opts').children;
+ if(idx===Q[i].c){btn.className='opt right';score++;}
+ else{btn.className='opt wrong';kids[Q[i].c].className='opt right';}
+ showScore();document.getElementById('next').style.display='inline-block';
+ }
+ function finish(){
+ document.getElementById('game').style.display='none';
+ document.getElementById('result').style.display='block';
+ var pct=score/Q.length;
+ document.getElementById('big').textContent=pct===1?'🏆':pct>=0.6?'🌟':'📚';
+ document.getElementById('fin').textContent='You scored '+score+' / '+Q.length;
+ }
+ document.getElementById('next').onclick=function(){i++;if(i<Q.length)show();else finish();};
+ document.getElementById('again').onclick=function(){i=0;score=0;document.getElementById('result').style.display='none';document.getElementById('game').style.display='block';show();};
+ show();
+</script>

v1Current

@quizqueen · 5/21/2026, 8:36:05 PM

Initial version — all lines are new.

+<style>
+ html,body{height:100%;margin:0}
+ body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0b3b3b,#0f172a);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#fff}
+ #wrap{width:100%;max-width:330px;padding:1.25rem;text-align:center}
+ h2{margin:.2rem 0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#5eead4}
+ #score{font-size:.8rem;color:#fbbf24;font-weight:700;margin-bottom:.6rem}
+ #clue{font-size:1.05rem;font-weight:700;margin:.6rem 0;min-height:3.4em;line-height:1.4}
+ .opt{display:block;width:100%;margin:.4rem 0;padding:.7rem 1rem;border:0;border-radius:.9rem;background:rgba(255,255,255,.1);font-size:.95rem;font-weight:600;color:#fff;cursor:pointer}
+ .opt.right{background:#16a34a}.opt.wrong{background:#dc2626}
+ #next{margin-top:1rem;padding:.6rem 1.5rem;border:0;border-radius:9999px;background:#5eead4;color:#0b3b3b;font-weight:800;cursor:pointer;display:none}
+ #fin{font-size:1.3rem;font-weight:800;margin:.4rem 0}#big{font-size:3.5rem}
+</style>
+<div id="wrap">
+ <h2>Guess the Icon</h2>
+ <div id="score"></div>
+ <div id="game">
+ <div id="clue"></div>
+ <div id="opts"></div>
+ <button id="next">Next →</button>
+ </div>
+ <div id="result" style="display:none">
+ <div id="big"></div><div id="fin"></div>
+ <button id="again" class="opt">Play again</button>
+ </div>
+</div>
+<script>
+ var Q=[
+ {q:"🥊🦋 'Float like a butterfly, sting like a bee.'",a:["Muhammad Ali","Mike Tyson","Floyd Mayweather","Joe Frazier"],c:0},
+ {q:"🎤🕴️ The moonwalk · the King of Pop",a:["Michael Jackson","Prince","James Brown","Elvis Presley"],c:0},
+ {q:"⚡🧪 E=mc² · the theory of relativity",a:["Albert Einstein","Isaac Newton","Nikola Tesla","Stephen Hawking"],c:0},
+ {q:"🎨🌙 Painted 'The Starry Night'",a:["Vincent van Gogh","Pablo Picasso","Claude Monet","Salvador Dalí"],c:0},
+ {q:"🚀👨‍🚀 First person to walk on the Moon",a:["Neil Armstrong","Buzz Aldrin","Yuri Gagarin","John Glenn"],c:0},
+ {q:"🔬☢️ Two Nobel Prizes · pioneer of radioactivity",a:["Marie Curie","Rosalind Franklin","Ada Lovelace","Jane Goodall"],c:0},
+ {q:"💡🔌 The light bulb · the Menlo Park lab",a:["Thomas Edison","Benjamin Franklin","Alexander G. Bell","Nikola Tesla"],c:0},
+ {q:"🕊️✊ Gave the 'I Have a Dream' speech",a:["Martin Luther King Jr.","Malcolm X","Nelson Mandela","Frederick Douglass"],c:0}
+ ];
+ var i=0,score=0,answered=false;
+ function showScore(){document.getElementById('score').textContent='Score: '+score+' / '+Q.length;}
+ function show(){
+ answered=false;
+ document.getElementById('clue').textContent=Q[i].q;
+ var box=document.getElementById('opts');box.innerHTML='';
+ Q[i].a.forEach(function(text,idx){
+ var b=document.createElement('button');b.className='opt';b.textContent=text;
+ b.onclick=function(){answer(idx,b);};box.appendChild(b);
+ });
+ document.getElementById('next').style.display='none';showScore();
+ }
+ function answer(idx,btn){
+ if(answered)return;answered=true;
+ var kids=document.getElementById('opts').children;
+ if(idx===Q[i].c){btn.className='opt right';score++;}
+ else{btn.className='opt wrong';kids[Q[i].c].className='opt right';}
+ showScore();document.getElementById('next').style.display='inline-block';
+ }
+ function finish(){
+ document.getElementById('game').style.display='none';
+ document.getElementById('result').style.display='block';
+ var pct=score/Q.length;
+ document.getElementById('big').textContent=pct===1?'🏆':pct>=0.6?'🌟':'📚';
+ document.getElementById('fin').textContent='You scored '+score+' / '+Q.length;
+ }
+ document.getElementById('next').onclick=function(){i++;if(i<Q.length)show();else finish();};
+ document.getElementById('again').onclick=function(){i=0;score=0;document.getElementById('result').style.display='none';document.getElementById('game').style.display='block';show();};
+ show();
+</script>
← Version history