pretty callbacks

This commit is contained in:
Taylor Wilsdon
2025-08-12 12:40:12 -04:00
parent 05911d5e7c
commit 282e7e5dc9
+133
View File
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
<style>
* {{
margin: 0;
padding: 0;
box-sizing: border-box;
}}
body {{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
background: #ffffff;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}}
.container {{
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 40px;
text-align: center;
max-width: 480px;
width: 100%;
animation: slideUp 0.5s ease-out;
}}
@keyframes slideUp {{
from {{
opacity: 0;
transform: translateY(20px);
}}
to {{
opacity: 1;
transform: translateY(0);
}}
}}
.icon {{
width: 64px;
height: 64px;
margin: 0 auto 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}}
.success .icon {{
background: #3b82f6;
color: white;
}}
.error .icon {{
background: #ef4444;
color: white;
}}
h1 {{
font-size: 24px;
font-weight: 600;
margin-bottom: 12px;
color: #1f2937;
}}
.success h1 {{
color: #3b82f6;
}}
.error h1 {{
color: #ef4444;
}}
p {{
font-size: 16px;
color: #6b7280;
line-height: 1.5;
margin-bottom: 24px;
}}
.action-text {{
font-size: 14px;
color: #9ca3af;
background: #f9fafb;
padding: 12px 16px;
border-radius: 8px;
border-left: 4px solid #e5e7eb;
}}
.success .action-text {{
border-left-color: #3b82f6;
background: #eff6ff;
color: #1e40af;
}}
.error .action-text {{
border-left-color: #ef4444;
background: #fef2f2;
color: #991b1b;
}}
@media (max-width: 480px) {{
.container {{
padding: 30px 20px;
}}
h1 {{
font-size: 20px;
}}
p {{
font-size: 15px;
}}
}}
</style>
</head>
<body>
<div class="container {status_class}">
<div class="icon">{icon}</div>
<h1>{heading}</h1>
<p>{message}</p>
<div class="action-text">{action_text}</div>
</div>
</body>
</html>