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

@jaymakes · 5/21/2026, 8:36:06 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,#fef3c7,#fde68a);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#1e293b}
+ #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:#b45309}
+ #score{font-size:.8rem;color:#b45309;font-weight:700;margin-bottom:.6rem}
+ #stmt{font-size:1.2rem;font-weight:700;margin:.8rem 0;min-height:3.6em;line-height:1.4}
+ .choice{width:46%;margin:.3rem 1%;padding:.8rem;border:0;border-radius:.9rem;font-size:1rem;font-weight:800;color:#fff;cursor:pointer}
+ #myth{background:#dc2626}#truth{background:#16a34a}
+ #reveal{min-height:3em;font-size:.95rem;font-weight:600;margin-top:.8rem}
+ #next{margin-top:.6rem;padding:.6rem 1.5rem;border:0;border-radius:9999px;background:#b45309;color:#fff;font-weight:800;cursor:pointer;display:none}
+ #fin{font-size:1.3rem;font-weight:800}#big{font-size:3.5rem}
+</style>
+<div id="wrap">
+ <h2>Myth or Truth?</h2>
+ <div id="score"></div>
+ <div id="game">
+ <div id="stmt"></div>
+ <div><button class="choice" id="myth">Myth</button><button class="choice" id="truth">Truth</button></div>
+ <div id="reveal"></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="choice" style="width:auto;background:#b45309">Play again</button>
+ </div>
+</div>
+<script>
+ var Q=[
+ {s:"Goldfish only have a 3-second memory.",t:false,x:"Myth — they remember things for months."},
+ {s:"Sealed honey never spoils.",t:true,x:"Truth — edible honey has been found in ancient tombs."},
+ {s:"The Great Wall of China is visible from space with the naked eye.",t:false,x:"Myth — you can't pick it out unaided from orbit."},
+ {s:"Bananas are berries, botanically speaking.",t:true,x:"Truth — and strawberries technically aren't!"},
+ {s:"We only use 10% of our brains.",t:false,x:"Myth — we use virtually all of it, just not all at once."},
+ {s:"Octopuses have three hearts.",t:true,x:"Truth — two pump blood to the gills, one to the body."},
+ {s:"Lightning never strikes the same place twice.",t:false,x:"Myth — tall towers get struck over and over."},
+ {s:"A group of flamingos is called a 'flamboyance'.",t:true,x:"Truth — a fittingly fabulous name."}
+ ];
+ var i=0,score=0,answered=false;
+ function showScore(){document.getElementById('score').textContent='Score: '+score+' / '+Q.length;}
+ function show(){
+ answered=false;
+ document.getElementById('stmt').textContent=Q[i].s;
+ document.getElementById('reveal').textContent='';
+ document.getElementById('next').style.display='none';
+ document.getElementById('myth').disabled=false;
+ document.getElementById('truth').disabled=false;
+ showScore();
+ }
+ function answer(said){
+ if(answered)return;answered=true;
+ var correct=(said===Q[i].t);
+ if(correct)score++;
+ document.getElementById('reveal').textContent=(correct?'✅ Correct! ':'❌ Nope. ')+Q[i].x;
+ document.getElementById('myth').disabled=true;
+ document.getElementById('truth').disabled=true;
+ document.getElementById('next').style.display='inline-block';
+ showScore();
+ }
+ document.getElementById('myth').onclick=function(){answer(false);};
+ document.getElementById('truth').onclick=function(){answer(true);};
+ 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 got '+score+' / '+Q.length+' right';
+ }
+ 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

@jaymakes · 5/21/2026, 8:36:06 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,#fef3c7,#fde68a);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#1e293b}
+ #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:#b45309}
+ #score{font-size:.8rem;color:#b45309;font-weight:700;margin-bottom:.6rem}
+ #stmt{font-size:1.2rem;font-weight:700;margin:.8rem 0;min-height:3.6em;line-height:1.4}
+ .choice{width:46%;margin:.3rem 1%;padding:.8rem;border:0;border-radius:.9rem;font-size:1rem;font-weight:800;color:#fff;cursor:pointer}
+ #myth{background:#dc2626}#truth{background:#16a34a}
+ #reveal{min-height:3em;font-size:.95rem;font-weight:600;margin-top:.8rem}
+ #next{margin-top:.6rem;padding:.6rem 1.5rem;border:0;border-radius:9999px;background:#b45309;color:#fff;font-weight:800;cursor:pointer;display:none}
+ #fin{font-size:1.3rem;font-weight:800}#big{font-size:3.5rem}
+</style>
+<div id="wrap">
+ <h2>Myth or Truth?</h2>
+ <div id="score"></div>
+ <div id="game">
+ <div id="stmt"></div>
+ <div><button class="choice" id="myth">Myth</button><button class="choice" id="truth">Truth</button></div>
+ <div id="reveal"></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="choice" style="width:auto;background:#b45309">Play again</button>
+ </div>
+</div>
+<script>
+ var Q=[
+ {s:"Goldfish only have a 3-second memory.",t:false,x:"Myth — they remember things for months."},
+ {s:"Sealed honey never spoils.",t:true,x:"Truth — edible honey has been found in ancient tombs."},
+ {s:"The Great Wall of China is visible from space with the naked eye.",t:false,x:"Myth — you can't pick it out unaided from orbit."},
+ {s:"Bananas are berries, botanically speaking.",t:true,x:"Truth — and strawberries technically aren't!"},
+ {s:"We only use 10% of our brains.",t:false,x:"Myth — we use virtually all of it, just not all at once."},
+ {s:"Octopuses have three hearts.",t:true,x:"Truth — two pump blood to the gills, one to the body."},
+ {s:"Lightning never strikes the same place twice.",t:false,x:"Myth — tall towers get struck over and over."},
+ {s:"A group of flamingos is called a 'flamboyance'.",t:true,x:"Truth — a fittingly fabulous name."}
+ ];
+ var i=0,score=0,answered=false;
+ function showScore(){document.getElementById('score').textContent='Score: '+score+' / '+Q.length;}
+ function show(){
+ answered=false;
+ document.getElementById('stmt').textContent=Q[i].s;
+ document.getElementById('reveal').textContent='';
+ document.getElementById('next').style.display='none';
+ document.getElementById('myth').disabled=false;
+ document.getElementById('truth').disabled=false;
+ showScore();
+ }
+ function answer(said){
+ if(answered)return;answered=true;
+ var correct=(said===Q[i].t);
+ if(correct)score++;
+ document.getElementById('reveal').textContent=(correct?'✅ Correct! ':'❌ Nope. ')+Q[i].x;
+ document.getElementById('myth').disabled=true;
+ document.getElementById('truth').disabled=true;
+ document.getElementById('next').style.display='inline-block';
+ showScore();
+ }
+ document.getElementById('myth').onclick=function(){answer(false);};
+ document.getElementById('truth').onclick=function(){answer(true);};
+ 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 got '+score+' / '+Q.length+' right';
+ }
+ 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