updateweb
This commit is contained in:
Local Server
257
website/admin/test-toast.html
Normal file
257
website/admin/test-toast.html
Normal file
@@ -0,0 +1,257 @@
|
||||
<!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="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>
|
||||
Reference in New Issue
Block a user