252 lines
12 KiB
HTML
252 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-container-high": "#e7e7f3",
|
|
"on-primary": "#ffffff",
|
|
"background": "#F8FAFC",
|
|
"error-container": "#ffdad6",
|
|
"surface-container": "#ededf9",
|
|
"on-background": "#191b23",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"on-tertiary-fixed": "#360f00",
|
|
"slate-200": "#E2E8F0",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"surface-container-low": "#f3f3fe",
|
|
"info": "#0EA5E9",
|
|
"on-secondary-container": "#54647a",
|
|
"on-primary-container": "#eeefff",
|
|
"error": "#ba1a1a",
|
|
"on-secondary-fixed-variant": "#38485d",
|
|
"primary-fixed": "#dbe1ff",
|
|
"on-error": "#ffffff",
|
|
"on-surface-variant": "#434655",
|
|
"surface": "#faf8ff",
|
|
"tertiary": "#943700",
|
|
"surface-variant": "#e1e2ed",
|
|
"tertiary-fixed-dim": "#ffb596",
|
|
"on-primary-fixed": "#00174b",
|
|
"on-surface": "#191b23",
|
|
"primary": "#004ac6",
|
|
"on-error-container": "#93000a",
|
|
"secondary-fixed": "#d3e4fe",
|
|
"tertiary-container": "#bc4800",
|
|
"secondary-container": "#d0e1fb",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"outline-variant": "#c3c6d7",
|
|
"on-secondary-fixed": "#0b1c30",
|
|
"on-tertiary-container": "#ffede6",
|
|
"slate-900": "#0F172A",
|
|
"surface-tint": "#0053db",
|
|
"success": "#16A34A",
|
|
"primary-container": "#2563eb",
|
|
"surface-bright": "#faf8ff",
|
|
"on-tertiary-fixed-variant": "#7d2d00",
|
|
"slate-100": "#F1F5F9",
|
|
"surface-dim": "#d9d9e5",
|
|
"surface-container-lowest": "#ffffff",
|
|
"secondary-fixed-dim": "#b7c8e1",
|
|
"secondary": "#505f76",
|
|
"inverse-on-surface": "#f0f0fb",
|
|
"danger": "#DC2626",
|
|
"slate-500": "#64748B",
|
|
"tertiary-fixed": "#ffdbcd",
|
|
"surface-container-highest": "#e1e2ed",
|
|
"warning": "#F59E0B",
|
|
"outline": "#737686",
|
|
"inverse-surface": "#2e3039",
|
|
"slate-700": "#334155",
|
|
"inverse-primary": "#b4c5ff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"row-height": "52px",
|
|
"gutter": "24px",
|
|
"card-padding": "20px",
|
|
"topbar-height": "72px",
|
|
"page-padding": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"],
|
|
"body-lg": ["Inter"],
|
|
"headline-lg": ["Plus Jakarta Sans"],
|
|
"metric-sm": ["Inter"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"label-md": ["Inter"],
|
|
"metric-lg": ["Inter"],
|
|
"mono": ["JetBrains Mono"]
|
|
},
|
|
"fontSize": {
|
|
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
|
|
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
|
|
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.success-pulse {
|
|
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
@keyframes pulse-ring {
|
|
0% { transform: scale(0.95); opacity: 1; }
|
|
50% { transform: scale(1.05); opacity: 0.8; }
|
|
100% { transform: scale(0.95); opacity: 1; }
|
|
}
|
|
.confetti {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-900 flex items-center justify-center min-h-screen p-4 overflow-hidden">
|
|
<!-- Soundbox Device Simulation Frame -->
|
|
<div class="relative w-full max-w-[400px] aspect-[3/4] bg-surface-container-lowest rounded-[48px] shadow-2xl border-[12px] border-slate-700 flex flex-col overflow-hidden">
|
|
<!-- Physical Speaker Grille Top -->
|
|
<div class="w-full h-12 flex items-center justify-center space-x-1.5 opacity-20 py-4">
|
|
<div class="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
|
|
<div class="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
|
|
<div class="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
|
|
<div class="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
|
|
<div class="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
|
|
</div>
|
|
<!-- Success Content Canvas -->
|
|
<main class="flex-1 flex flex-col items-center justify-center px-8 text-center relative">
|
|
<!-- Confetti / Particles Effect -->
|
|
<div class="absolute inset-0 pointer-events-none" id="confetti-container"></div>
|
|
<!-- Success Checkmark Icon -->
|
|
<div class="mb-8 relative">
|
|
<div class="success-pulse absolute -inset-4 bg-success/10 rounded-full"></div>
|
|
<div class="relative w-24 h-24 bg-success flex items-center justify-center rounded-full shadow-lg shadow-success/20">
|
|
<span class="material-symbols-outlined text-white text-[64px]" style="font-variation-settings: 'wght' 700;">check</span>
|
|
</div>
|
|
</div>
|
|
<!-- Status Text -->
|
|
<div class="space-y-2 mb-8">
|
|
<h1 class="font-headline-lg text-headline-lg text-on-background tracking-tight">Payment Successful</h1>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">Merchant: Brew & Bean Cafe</p>
|
|
</div>
|
|
<!-- Transaction Amount Card -->
|
|
<div class="w-full bg-surface-container-low rounded-xl p-6 border border-slate-200 mb-8">
|
|
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-widest mb-1">Amount Paid</p>
|
|
<div class="font-display-lg text-display-lg text-primary flex justify-center items-baseline gap-1">
|
|
<span class="text-headline-md font-medium">Rp</span>
|
|
<span>50,000</span>
|
|
</div>
|
|
</div>
|
|
<!-- Transaction Meta Details -->
|
|
<div class="w-full space-y-3 mb-4">
|
|
<div class="flex justify-between items-center py-2 border-b border-slate-100">
|
|
<span class="font-label-md text-label-md text-slate-500">Reference No.</span>
|
|
<span class="font-mono text-[13px] text-on-background font-medium">FTX-8829-0012</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-2 border-b border-slate-100">
|
|
<span class="font-label-md text-label-md text-slate-500">Date & Time</span>
|
|
<span class="font-body-md text-body-md text-on-background">Oct 24, 2023 · 14:32</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-2">
|
|
<span class="font-label-md text-label-md text-slate-500">Method</span>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-body-md text-body-md text-on-background">QRIS QuickPay</span>
|
|
<div class="w-2 h-2 rounded-full bg-success"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Device Status Bar Bottom -->
|
|
<footer class="h-16 border-t border-slate-100 bg-surface-container-lowest px-8 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-success text-[20px]">wifi</span>
|
|
<span class="font-label-md text-label-md text-slate-500">Connected</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-label-md text-label-md text-slate-500">88%</span>
|
|
<span class="material-symbols-outlined text-slate-500 text-[20px]">battery_5_bar</span>
|
|
</div>
|
|
</footer>
|
|
<!-- Physical Power Indicator Light -->
|
|
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-success shadow-[0_0_8px_rgba(22,163,74,0.6)]"></div>
|
|
</div>
|
|
<!-- Decorative Device Background Label -->
|
|
<div class="absolute bottom-8 left-0 right-0 text-center pointer-events-none">
|
|
<p class="font-headline-md text-headline-md text-slate-600 opacity-50">IOT SOUNDBOX GEN-3</p>
|
|
</div>
|
|
<script>
|
|
// Simple confetti effect for the success state
|
|
function createConfetti() {
|
|
const container = document.getElementById('confetti-container');
|
|
const colors = ['#16A34A', '#2563eb', '#F59E0B', '#004ac6'];
|
|
|
|
for (let i = 0; i < 40; i++) {
|
|
const confetti = document.createElement('div');
|
|
confetti.classList.add('confetti');
|
|
|
|
const size = Math.random() * 6 + 4;
|
|
confetti.style.width = `${size}px`;
|
|
confetti.style.height = `${size}px`;
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
|
|
|
// Random position
|
|
const startX = Math.random() * 100;
|
|
const startY = Math.random() * 100;
|
|
confetti.style.left = `${startX}%`;
|
|
confetti.style.top = `${startY}%`;
|
|
confetti.style.opacity = Math.random();
|
|
|
|
// Basic animation
|
|
const duration = Math.random() * 3 + 2;
|
|
const delay = Math.random() * 2;
|
|
confetti.style.transition = `all ${duration}s ease-out ${delay}s`;
|
|
|
|
container.appendChild(confetti);
|
|
|
|
// Trigger animation
|
|
setTimeout(() => {
|
|
confetti.style.transform = `translate(${(Math.random() - 0.5) * 200}px, ${(Math.random() - 0.5) * 200}px) rotate(${Math.random() * 360}deg)`;
|
|
confetti.style.opacity = '0';
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
createConfetti();
|
|
|
|
// Re-run confetti occasionally
|
|
setInterval(() => {
|
|
const container = document.getElementById('confetti-container');
|
|
container.innerHTML = '';
|
|
createConfetti();
|
|
}, 6000);
|
|
});
|
|
</script>
|
|
</body></html> |