Cashapp #302
Description
<title>Cash App Style – Real</title>
<style>
*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
body{
margin:0;height:100vh;background:#000;color:#fff;
display:flex;justify-content:center;align-items:center;
}
.app{width:100%;max-width:420px;text-align:center}
/* AMOUNT */
.amount{
font-size:64px;font-weight:700;letter-spacing:-1px;
margin:36px 0 18px;
}
.sub{opacity:.55;font-size:13px}
/* KEYPAD */
.keypad{
display:grid;grid-template-columns:repeat(3,1fr);
gap:16px;padding:24px 28px 10px;
}
.key{
height:68px;border-radius:34px;background:#0f0f0f;
border:none;color:#fff;font-size:26px
}
.key:active{background:#1b1b1b}
.zero{grid-column:span 2}
.del{opacity:.7}
/* PAY */
.pay{
margin:22px auto 0;width:120px;height:120px;border-radius:50%;
border:none;font-size:22px;font-weight:700;
background:#00D632;color:#000;opacity:.35;
transform:scale(.96);transition:.25s
}
.pay.enabled{opacity:1;transform:scale(1)}
.pay:active{transform:scale(.96)}
/* LOADING */
.loading,.success{display:none}
.loader{
width:72px;height:72px;border-radius:50%;
border:6px solid #1b1b1b;border-top-color:#00D632;
animation:spin 1s linear infinite;margin:80px auto 12px
}
@Keyframes spin{to{transform:rotate(360deg)}}
/* SUCCESS */
.check{
width:140px;height:140px;border-radius:50%;
background:#00D632;color:#000;font-size:64px;font-weight:800;
display:flex;align-items:center;justify-content:center;
margin:80px auto 18px;animation:pop .35s ease
}
@Keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.small{opacity:.6;font-size:13px;margin-top:6px}
</style>
<script>
let raw=""; // raw input
const MAX=99999.99;
const amtEl=amount, payBtn=pay;
function haptic(){ if(navigator.vibrate) navigator.vibrate(8); }
function format(v){
if(!v) return "$0";
let n=Number(v);
if(isNaN(n)) return "$0";
return "$"+n.toLocaleString("en-US",{minimumFractionDigits: v.includes('.')?2:0, maximumFractionDigits:2});
}
function update(){
let n=Number(raw||0);
amtEl.textContent=format(raw);
if(n>0 && n<=MAX){
payBtn.classList.add("enabled");
}else{
payBtn.classList.remove("enabled");
}
}
function tap(x){
haptic();
if(x==="." && raw.includes(".")) return;
if(raw.length>=8) return;
raw+=x;
let n=Number(raw);
if(n>MAX){ raw=String(MAX); }
update();
}
function del(){
haptic();
raw=raw.slice(0,-1);
update();
}
function pay(){
let n=Number(raw||0);
if(!(n>0 && n<=MAX)) return;
haptic();
input.style.display="none";
loading.style.display="block";
setTimeout(()=>{
loading.style.display="none";
success.style.display="block";
final.textContent=`Amount ${format(raw)} • Order CA-TEST-001`;
},2200);
}
</script>
$0
Enter amount
<div class="keypad">
<button class="key" onclick="tap('1')">1</button>
<button class="key" onclick="tap('2')">2</button>
<button class="key" onclick="tap('3')">3</button>
<button class="key" onclick="tap('4')">4</button>
<button class="key" onclick="tap('5')">5</button>
<button class="key" onclick="tap('6')">6</button>
<button class="key" onclick="tap('7')">7</button>
<button class="key" onclick="tap('8')">8</button>
<button class="key" onclick="tap('9')">9</button>
<button class="key" onclick="tap('.')">.</button>
<button class="key zero" onclick="tap('0')">0</button>
<button class="key del" onclick="del()">⌫</button>
</div>
<button id="pay" class="pay" onclick="pay()">Pay</button>
Sending payment…
✓
Payment Sent