mirror of
https://github.com/oarkflow/mq.git
synced 2025-10-22 04:19:23 +08:00
211 lines
6.1 KiB
HTML
211 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Message Sent Successfully</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
max-width: 700px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
|
|
color: white;
|
|
}
|
|
|
|
.result-container {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 40px;
|
|
border-radius: 20px;
|
|
backdrop-filter: blur(15px);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
|
|
text-align: center;
|
|
}
|
|
|
|
.success-icon {
|
|
font-size: 80px;
|
|
margin-bottom: 20px;
|
|
animation: bounce 2s infinite;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
60% {
|
|
transform: translateY(-5px);
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 30px;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
font-size: 2.5em;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.info-item {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
border-left: 4px solid #4ECDC4;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
opacity: 0.9;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 16px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.message-preview {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
margin: 30px 0;
|
|
text-align: left;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.actions {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.btn {
|
|
background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
|
|
color: white;
|
|
padding: 15px 30px;
|
|
border: none;
|
|
border-radius: 25px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin: 0 15px;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.3s ease;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.status-badge {
|
|
background: #4CAF50;
|
|
color: white;
|
|
padding: 8px 20px;
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
margin: 10px 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.workflow-info {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
margin-top: 30px;
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="result-container">
|
|
<div class="success-icon">✅</div>
|
|
<h1>Message Sent Successfully!</h1>
|
|
|
|
<div class="status-badge">{{email_status}}</div>
|
|
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">👤 Recipient</div>
|
|
<div class="info-value">{{full_name}}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">📧 Email Address</div>
|
|
<div class="info-value">{{email}}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">🆔 Email ID</div>
|
|
<div class="info-value">{{email_id}}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">⏰ Sent At</div>
|
|
<div class="info-value">{{sent_at}}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">📨 Email Type</div>
|
|
<div class="info-value">{{email_type}}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">👥 User Type</div>
|
|
<div class="info-value">{{user_type}}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">🚨 Priority</div>
|
|
<div class="info-value">{{priority}}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">🚚 Delivery</div>
|
|
<div class="info-value">{{delivery_estimate}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message-preview">
|
|
<div class="info-label">📋 Subject:</div>
|
|
<div class="info-value" style="margin: 10px 0; font-weight: bold; font-size: 18px;">
|
|
{{subject}}
|
|
</div>
|
|
<div class="info-label">💬 Message ({{message_length}} chars):</div>
|
|
<div class="info-value" style="margin-top: 15px; font-style: italic; line-height: 1.6;">
|
|
"{{message}}"
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<a href="/" class="btn">📧 Send Another Message</a>
|
|
<a href="/api/metrics" class="btn">📊 View Metrics</a>
|
|
</div>
|
|
|
|
<div class="workflow-info">
|
|
<strong>🔄 Workflow Details:</strong><br>
|
|
Gateway: {{gateway}} | Template: {{email_template}} | Processed: {{processed_at}}<br>
|
|
This message was processed through our advanced DAG workflow system with conditional routing.
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|