2025-12-24 00:13:23 -06:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
|
<title>Toast Notification Demo</title>
|
2026-01-19 01:17:43 -06:00
|
|
|
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
2025-12-24 00:13:23 -06:00
|
|
|
|
<link
|
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<link rel="stylesheet" href="/admin/css/admin-style.css" />
|
|
|
|
|
|
<style>
|
|
|
|
|
|
body {
|
|
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
|
|
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
|
|
|
|
padding: 40px;
|
|
|
|
|
|
background: #f8f9fa;
|
|
|
|
|
|
}
|
|
|
|
|
|
.demo-container {
|
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
background: white;
|
|
|
|
|
|
padding: 40px;
|
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.subtitle {
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.button-group {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
|
|
|
gap: 15px;
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.demo-btn {
|
|
|
|
|
|
padding: 12px 24px;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
gap: 8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.demo-btn:hover {
|
|
|
|
|
|
transform: translateY(-2px);
|
|
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
|
|
}
|
|
|
|
|
|
.btn-success {
|
|
|
|
|
|
background: #28a745;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
}
|
|
|
|
|
|
.btn-error {
|
|
|
|
|
|
background: #dc3545;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
}
|
|
|
|
|
|
.btn-warning {
|
|
|
|
|
|
background: #ffc107;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
}
|
|
|
|
|
|
.btn-info {
|
|
|
|
|
|
background: #17a2b8;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
}
|
|
|
|
|
|
.info-box {
|
|
|
|
|
|
background: #e7f3ff;
|
|
|
|
|
|
border-left: 4px solid #17a2b8;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.info-box h3 {
|
|
|
|
|
|
margin: 0 0 10px 0;
|
|
|
|
|
|
color: #17a2b8;
|
|
|
|
|
|
}
|
|
|
|
|
|
.info-box ul {
|
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.info-box li {
|
|
|
|
|
|
margin: 5px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="demo-container">
|
|
|
|
|
|
<h1>🎉 Custom Toast Notifications Demo</h1>
|
|
|
|
|
|
<p class="subtitle">
|
|
|
|
|
|
Click the buttons below to see the beautiful toast notifications in
|
|
|
|
|
|
action!
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="button-group">
|
|
|
|
|
|
<button class="demo-btn btn-success" onclick="testSuccess()">
|
|
|
|
|
|
<i class="bi bi-check-circle"></i>
|
|
|
|
|
|
Show Success
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
<button class="demo-btn btn-error" onclick="testError()">
|
|
|
|
|
|
<i class="bi bi-exclamation-circle"></i>
|
|
|
|
|
|
Show Error
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
<button class="demo-btn btn-warning" onclick="testWarning()">
|
|
|
|
|
|
<i class="bi bi-exclamation-triangle"></i>
|
|
|
|
|
|
Show Warning
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
<button class="demo-btn btn-info" onclick="testInfo()">
|
|
|
|
|
|
<i class="bi bi-info-circle"></i>
|
|
|
|
|
|
Show Info
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
class="demo-btn"
|
|
|
|
|
|
style="background: #667eea; color: white; width: 100%"
|
|
|
|
|
|
onclick="testMultiple()"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="bi bi-stars"></i>
|
|
|
|
|
|
Show Multiple Toasts
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="info-box">
|
|
|
|
|
|
<h3><i class="bi bi-lightbulb"></i> Features</h3>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<strong>Smooth Animations:</strong> Slide-in from right with bounce
|
|
|
|
|
|
effect
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<strong>Auto Dismiss:</strong> Automatically disappears after 4
|
|
|
|
|
|
seconds
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<strong>Manual Close:</strong> Click the × button to close
|
|
|
|
|
|
immediately
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<strong>Multiple Toasts:</strong> Stack multiple notifications
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<strong>Color Coded:</strong> Different colors for different message
|
|
|
|
|
|
types
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li><strong>Responsive:</strong> Works great on mobile devices</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<strong>Icon Support:</strong> Bootstrap Icons for visual clarity
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
function escapeHtml(text) {
|
|
|
|
|
|
const map = {
|
|
|
|
|
|
"&": "&",
|
|
|
|
|
|
"<": "<",
|
|
|
|
|
|
">": ">",
|
|
|
|
|
|
'"': """,
|
|
|
|
|
|
"'": "'",
|
|
|
|
|
|
};
|
|
|
|
|
|
return text.replace(/[&<>"']/g, (m) => map[m]);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function showToast(message, type = "info") {
|
|
|
|
|
|
let container = document.getElementById("toastContainer");
|
|
|
|
|
|
if (!container) {
|
|
|
|
|
|
container = document.createElement("div");
|
|
|
|
|
|
container.id = "toastContainer";
|
|
|
|
|
|
container.className = "toast-container";
|
|
|
|
|
|
document.body.appendChild(container);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const toast = document.createElement("div");
|
|
|
|
|
|
toast.className = `toast toast-${type} toast-show`;
|
|
|
|
|
|
|
|
|
|
|
|
let icon = "";
|
|
|
|
|
|
if (type === "success") {
|
|
|
|
|
|
icon = '<i class="bi bi-check-circle-fill"></i>';
|
|
|
|
|
|
} else if (type === "error") {
|
|
|
|
|
|
icon = '<i class="bi bi-exclamation-circle-fill"></i>';
|
|
|
|
|
|
} else if (type === "info") {
|
|
|
|
|
|
icon = '<i class="bi bi-info-circle-fill"></i>';
|
|
|
|
|
|
} else if (type === "warning") {
|
|
|
|
|
|
icon = '<i class="bi bi-exclamation-triangle-fill"></i>';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
toast.innerHTML = `
|
|
|
|
|
|
<div class="toast-icon">${icon}</div>
|
|
|
|
|
|
<div class="toast-message">${escapeHtml(message)}</div>
|
|
|
|
|
|
<button class="toast-close" onclick="this.parentElement.remove()">
|
|
|
|
|
|
<i class="bi bi-x"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
container.appendChild(toast);
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
toast.classList.remove("toast-show");
|
|
|
|
|
|
toast.classList.add("toast-hide");
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
if (toast.parentElement) {
|
|
|
|
|
|
toast.remove();
|
|
|
|
|
|
}
|
|
|
|
|
|
}, 300);
|
|
|
|
|
|
}, 4000);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function testSuccess() {
|
|
|
|
|
|
showToast("3 image(s) added to product gallery", "success");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function testError() {
|
|
|
|
|
|
showToast("Failed to upload image. Please try again.", "error");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function testWarning() {
|
|
|
|
|
|
showToast("Image size is large. Upload may take longer.", "warning");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function testInfo() {
|
|
|
|
|
|
showToast(
|
|
|
|
|
|
"Select images from the media library to add to your product.",
|
|
|
|
|
|
"info"
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function testMultiple() {
|
|
|
|
|
|
showToast("First notification", "info");
|
|
|
|
|
|
setTimeout(() => showToast("Second notification", "success"), 500);
|
|
|
|
|
|
setTimeout(() => showToast("Third notification", "warning"), 1000);
|
|
|
|
|
|
setTimeout(
|
|
|
|
|
|
() => showToast("Multiple toasts stack nicely!", "info"),
|
|
|
|
|
|
1500
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Show welcome message
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
showToast(
|
|
|
|
|
|
"Welcome! Click any button to see toast notifications in action.",
|
|
|
|
|
|
"info"
|
|
|
|
|
|
);
|
|
|
|
|
|
}, 500);
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
