259 lines
7.1 KiB
HTML
259 lines
7.1 KiB
HTML
<!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>
|
||
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||
<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>
|