文件
mashangyoujiu/Application/Retail/View/Home/Home-modern.html

1021 行
34 KiB
HTML
可执行文件

此文件含有模棱两可的 Unicode 字符

此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的,可以安全地忽略该警告。 使用 Escape 按钮显示他们。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>{$logoinfo.name}后台管理系统</title>
<link href="{$logoinfo['icourl']}" type="image/x-icon" rel="shortcut icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- Chart.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
<!-- jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
--warning-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
--primary-color: #667eea;
--success-color: #11998e;
--warning-color: #f5576c;
--info-color: #4facfe;
--danger-color: #fa709a;
--bg-light: #f8fafc;
--bg-white: #ffffff;
--text-dark: #2d3748;
--text-muted: #718096;
--border-color: #e2e8f0;
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--bg-light);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
color: var(--text-dark);
line-height: 1.6;
}
/* 现代化容器 */
.dashboard-container {
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* 页面头部 */
.dashboard-header {
background: var(--bg-white);
border-radius: var(--radius-lg);
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
}
.welcome-section {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.welcome-text h1 {
font-size: 2rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.welcome-text p {
color: var(--text-muted);
font-size: 1rem;
margin: 0;
}
.header-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.btn-modern {
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
font-weight: 500;
font-size: 0.875rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.btn-primary-modern {
background: var(--primary-gradient);
color: white;
box-shadow: var(--shadow-sm);
}
.btn-primary-modern:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: white;
}
.btn-outline-modern {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--border-color);
}
.btn-outline-modern:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
transform: translateY(-1px);
}
/* 统计卡片网格 */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stats-card {
background: var(--bg-white);
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.stats-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.stats-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-gradient);
}
.stats-card.success::before { background: var(--success-gradient); }
.stats-card.warning::before { background: var(--warning-gradient); }
.stats-card.info::before { background: var(--info-gradient); }
.stats-card.danger::before { background: var(--danger-gradient); }
.stats-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.stats-info h3 {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
line-height: 1;
}
.stats-info p {
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
}
.stats-icon {
width: 64px;
height: 64px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
color: white;
background: var(--primary-gradient);
}
.stats-icon.success { background: var(--success-gradient); }
.stats-icon.warning { background: var(--warning-gradient); }
.stats-icon.info { background: var(--info-gradient); }
.stats-icon.danger { background: var(--danger-gradient); }
/* 主要内容区域 */
.main-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.content-card {
background: var(--bg-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
overflow: hidden;
}
.card-header {
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--border-color);
background: rgba(102, 126, 234, 0.02);
}
.card-header h5 {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-dark);
margin: 0;
}
.card-header small {
color: var(--text-muted);
font-size: 0.875rem;
}
.card-body {
padding: 2rem;
}
/* 图表容器 */
.chart-container {
position: relative;
height: 350px;
width: 100%;
}
/* 快捷操作网格 */
.quick-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.quick-action {
background: var(--primary-gradient);
color: white;
padding: 1.5rem;
border-radius: var(--radius-md);
text-decoration: none;
text-align: center;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.quick-action:hover {
color: white;
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.quick-action i {
font-size: 2rem;
}
.quick-action span {
font-weight: 500;
font-size: 0.875rem;
}
.quick-action.success { background: var(--success-gradient); }
.quick-action.warning { background: var(--warning-gradient); }
.quick-action.info { background: var(--info-gradient); }
/* 底部内容区域 */
.bottom-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
/* 活动列表 */
.activity-list {
max-height: 400px;
overflow-y: auto;
}
.activity-item {
display: flex;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid var(--border-color);
transition: all 0.2s ease;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-item:hover {
background: rgba(102, 126, 234, 0.02);
margin: 0 -2rem;
padding-left: 2rem;
padding-right: 2rem;
}
.activity-icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
font-size: 1.125rem;
color: white;
background: var(--primary-gradient);
}
.activity-icon.success { background: var(--success-gradient); }
.activity-icon.warning { background: var(--warning-gradient); }
.activity-icon.info { background: var(--info-gradient); }
.activity-content {
flex: 1;
}
.activity-title {
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.25rem;
}
.activity-time {
font-size: 0.875rem;
color: var(--text-muted);
}
/* 加载动画 */
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 提示消息 */
.toast-container {
position: fixed;
top: 2rem;
right: 2rem;
z-index: 9999;
}
.toast-modern {
background: var(--bg-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xl);
border: 1px solid var(--border-color);
padding: 1rem 1.5rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 320px;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.toast-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
color: white;
}
.toast-icon.success { background: var(--success-color); }
.toast-icon.info { background: var(--info-color); }
.toast-icon.warning { background: var(--warning-color); }
.toast-icon.error { background: var(--danger-color); }
/* 响应式设计 */
@media (max-width: 1200px) {
.main-content {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.dashboard-container {
padding: 1rem;
}
.dashboard-header {
padding: 1.5rem;
}
.welcome-section {
flex-direction: column;
align-items: flex-start;
}
.welcome-text h1 {
font-size: 1.5rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stats-info h3 {
font-size: 2rem;
}
.bottom-content {
grid-template-columns: 1fr;
}
.quick-actions {
grid-template-columns: 1fr;
}
.chart-container {
height: 250px;
}
}
/* 滚动条样式 */
.activity-list::-webkit-scrollbar {
width: 6px;
}
.activity-list::-webkit-scrollbar-track {
background: var(--bg-light);
border-radius: 3px;
}
.activity-list::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 3px;
}
.activity-list::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
</style>
</head>
<body>
<div class="dashboard-container">
<!-- 页面头部 -->
<div class="dashboard-header">
<div class="welcome-section">
<div class="welcome-text">
<h1>欢迎回来,{$user.name}!</h1>
<p>今天是 <span id="currentDate"></span>,祝您工作愉快</p>
</div>
<div class="header-actions">
<button class="btn-outline-modern" onclick="refreshData()">
<i class="bi bi-arrow-clockwise"></i>
<span>刷新数据</span>
</button>
<button class="btn-primary-modern" onclick="exportReport()">
<i class="bi bi-download"></i>
<span>导出报告</span>
</button>
</div>
</div>
</div>
<!-- 统计卡片 -->
<div class="stats-grid">
<div class="stats-card">
<div class="stats-content">
<div class="stats-info">
<h3 id="totalOrders">0</h3>
<p>今日订单</p>
</div>
<div class="stats-icon">
<i class="bi bi-cart-check"></i>
</div>
</div>
</div>
<div class="stats-card success">
<div class="stats-content">
<div class="stats-info">
<h3 id="totalRevenue">¥0</h3>
<p>今日营收</p>
</div>
<div class="stats-icon success">
<i class="bi bi-currency-yen"></i>
</div>
</div>
</div>
<div class="stats-card warning">
<div class="stats-content">
<div class="stats-info">
<h3 id="totalUsers">0</h3>
<p>新增用户</p>
</div>
<div class="stats-icon warning">
<i class="bi bi-people"></i>
</div>
</div>
</div>
<div class="stats-card info">
<div class="stats-content">
<div class="stats-info">
<h3 id="totalProducts">0</h3>
<p>商品总数</p>
</div>
<div class="stats-icon info">
<i class="bi bi-box-seam"></i>
</div>
</div>
</div>
</div>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 销售趋势图表 -->
<div class="content-card">
<div class="card-header">
<h5>销售趋势分析</h5>
<small>最近12个月的销售数据走势</small>
</div>
<div class="card-body">
<div class="chart-container">
<canvas id="salesChart"></canvas>
</div>
</div>
</div>
<!-- 快捷操作 -->
<div class="content-card">
<div class="card-header">
<h5>快捷操作</h5>
<small>常用功能快速入口</small>
</div>
<div class="card-body">
<div class="quick-actions">
<a href="javascript:void(0)" class="quick-action" onclick="addProduct()">
<i class="bi bi-plus-circle"></i>
<span>添加商品</span>
</a>
<a href="javascript:void(0)" class="quick-action success" onclick="viewOrders()">
<i class="bi bi-list-check"></i>
<span>查看订单</span>
</a>
<a href="javascript:void(0)" class="quick-action warning" onclick="manageUsers()">
<i class="bi bi-person-gear"></i>
<span>用户管理</span>
</a>
<a href="javascript:void(0)" class="quick-action info" onclick="viewReports()">
<i class="bi bi-graph-up"></i>
<span>数据报告</span>
</a>
</div>
</div>
</div>
</div>
<!-- 底部内容区域 -->
<div class="bottom-content">
<!-- 订单状态分布 -->
<div class="content-card">
<div class="card-header">
<h5>订单状态分布</h5>
<small>今日订单状态统计分析</small>
</div>
<div class="card-body">
<div class="chart-container">
<canvas id="orderStatusChart"></canvas>
</div>
</div>
</div>
<!-- 最近活动 -->
<div class="content-card">
<div class="card-header">
<h5>最近活动</h5>
<small>系统最新动态和重要事件</small>
</div>
<div class="card-body">
<div class="activity-list" id="recentActivities">
<div class="activity-item">
<div class="activity-icon success">
<i class="bi bi-check-circle"></i>
</div>
<div class="activity-content">
<div class="activity-title">新订单已生成</div>
<div class="activity-time">2分钟前</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon">
<i class="bi bi-person-plus"></i>
</div>
<div class="activity-content">
<div class="activity-title">新用户注册</div>
<div class="activity-time">5分钟前</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon warning">
<i class="bi bi-exclamation-triangle"></i>
</div>
<div class="activity-content">
<div class="activity-title">库存预警提醒</div>
<div class="activity-time">10分钟前</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon info">
<i class="bi bi-gear"></i>
</div>
<div class="activity-content">
<div class="activity-title">系统设置更新</div>
<div class="activity-time">1小时前</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon success">
<i class="bi bi-truck"></i>
</div>
<div class="activity-content">
<div class="activity-title">订单已发货</div>
<div class="activity-time">2小时前</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 提示消息容器 -->
<div class="toast-container" id="toastContainer"></div>
<script>
// 页面初始化
$(document).ready(function() {
updateCurrentDate();
loadDashboardData();
initCharts();
// 定时更新数据
setInterval(updateCurrentDate, 60000); // 每分钟更新时间
setInterval(loadDashboardData, 300000); // 每5分钟更新数据
});
// 更新当前日期
function updateCurrentDate() {
const now = new Date();
const options = {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
};
document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
}
// 加载仪表盘数据
function loadDashboardData() {
// 模拟API调用
setTimeout(() => {
// 使用动画效果更新数字
animateNumber('totalOrders', Math.floor(Math.random() * 200) + 100);
animateNumber('totalRevenue', Math.floor(Math.random() * 50000) + 20000, '¥');
animateNumber('totalUsers', Math.floor(Math.random() * 100) + 50);
animateNumber('totalProducts', Math.floor(Math.random() * 300) + 200);
}, 500);
}
// 数字动画效果
function animateNumber(elementId, targetValue, prefix = '') {
const element = document.getElementById(elementId);
const duration = 1500;
const startValue = 0;
const increment = targetValue / (duration / 16);
let currentValue = startValue;
const timer = setInterval(() => {
currentValue += increment;
if (currentValue >= targetValue) {
currentValue = targetValue;
clearInterval(timer);
}
element.textContent = prefix + Math.floor(currentValue).toLocaleString();
}, 16);
}
// 初始化图表
function initCharts() {
initSalesChart();
initOrderStatusChart();
}
// 销售趋势图表
function initSalesChart() {
const ctx = document.getElementById('salesChart').getContext('2d');
// 创建渐变
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(102, 126, 234, 0.3)');
gradient.addColorStop(1, 'rgba(102, 126, 234, 0.05)');
new Chart(ctx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
datasets: [{
label: '销售额 (¥)',
data: [15000, 22000, 18000, 28000, 25000, 35000, 32000, 42000, 38000, 45000, 48000, 52000],
borderColor: '#667eea',
backgroundColor: gradient,
borderWidth: 3,
fill: true,
tension: 0.4,
pointBackgroundColor: '#667eea',
pointBorderColor: '#ffffff',
pointBorderWidth: 3,
pointRadius: 6,
pointHoverRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#ffffff',
bodyColor: '#ffffff',
borderColor: '#667eea',
borderWidth: 1,
cornerRadius: 8,
displayColors: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(0, 0, 0, 0.05)',
drawBorder: false
},
ticks: {
color: '#718096',
callback: function(value) {
return '¥' + value.toLocaleString();
}
}
},
x: {
grid: {
display: false
},
ticks: {
color: '#718096'
}
}
},
interaction: {
intersect: false,
mode: 'index'
}
}
});
}
// 订单状态分布图表
function initOrderStatusChart() {
const ctx = document.getElementById('orderStatusChart').getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['已完成', '处理中', '待付款', '已取消'],
datasets: [{
data: [65, 20, 10, 5],
backgroundColor: [
'#11998e',
'#667eea',
'#f5576c',
'#fa709a'
],
borderWidth: 0,
hoverOffset: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 20,
usePointStyle: true,
pointStyle: 'circle',
color: '#718096',
font: {
size: 14,
weight: '500'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#ffffff',
bodyColor: '#ffffff',
cornerRadius: 8,
displayColors: true,
callbacks: {
label: function(context) {
return context.label + ': ' + context.parsed + '%';
}
}
}
},
cutout: '60%'
}
});
}
// 快捷操作函数
function addProduct() {
if (parent && parent.MenuApp) {
parent.MenuApp.swapUrl('/index.php/Retail/Goods/goodsList', 1, '商品管理');
} else {
showToast('跳转到商品管理页面', 'info');
}
}
function viewOrders() {
if (parent && parent.MenuApp) {
parent.MenuApp.swapUrl('/index.php/Retail/Order/orderList', 1, '订单管理');
} else {
showToast('跳转到订单管理页面', 'info');
}
}
function manageUsers() {
if (parent && parent.MenuApp) {
parent.MenuApp.swapUrl('/index.php/Retail/User/userList', 1, '用户管理');
} else {
showToast('跳转到用户管理页面', 'info');
}
}
function viewReports() {
if (parent && parent.MenuApp) {
parent.MenuApp.swapUrl('/index.php/Retail/Report/index', 1, '数据报告');
} else {
showToast('跳转到数据报告页面', 'info');
}
}
// 刷新数据
function refreshData() {
const btn = event.target.closest('button');
const originalHTML = btn.innerHTML;
btn.innerHTML = '<div class="loading-spinner"></div><span>刷新中...</span>';
btn.disabled = true;
setTimeout(() => {
loadDashboardData();
btn.innerHTML = originalHTML;
btn.disabled = false;
showToast('数据已成功刷新', 'success');
}, 2000);
}
// 导出报告
function exportReport() {
showToast('报告导出功能正在开发中...', 'info');
}
// 显示提示消息
function showToast(message, type = 'info') {
const container = document.getElementById('toastContainer');
const toast = document.createElement('div');
toast.className = 'toast-modern';
const iconMap = {
success: 'check-circle',
error: 'x-circle',
warning: 'exclamation-triangle',
info: 'info-circle'
};
toast.innerHTML = `
<div class="toast-icon ${type}">
<i class="bi bi-${iconMap[type]}"></i>
</div>
<div class="toast-content">
<div style="font-weight: 500; color: var(--text-dark);">${message}</div>
</div>
`;
container.appendChild(toast);
// 自动移除
setTimeout(() => {
toast.style.animation = 'slideIn 0.3s ease reverse';
setTimeout(() => {
if (toast.parentNode) {
toast.parentNode.removeChild(toast);
}
}, 300);
}, 3000);
}
// 模拟实时数据更新
function simulateRealTimeUpdates() {
setInterval(() => {
// 随机更新活动列表
const activities = [
{ icon: 'success', iconClass: 'check-circle', title: '新订单已生成', time: '刚刚' },
{ icon: 'primary', iconClass: 'person-plus', title: '新用户注册', time: '1分钟前' },
{ icon: 'warning', iconClass: 'exclamation-triangle', title: '库存预警', time: '3分钟前' },
{ icon: 'info', iconClass: 'gear', title: '系统更新', time: '5分钟前' },
{ icon: 'success', iconClass: 'truck', title: '订单已发货', time: '8分钟前' }
];
const randomActivity = activities[Math.floor(Math.random() * activities.length)];
const activityList = document.getElementById('recentActivities');
// 添加新活动到顶部
const newActivity = document.createElement('div');
newActivity.className = 'activity-item';
newActivity.innerHTML = `
<div class="activity-icon ${randomActivity.icon}">
<i class="bi bi-${randomActivity.iconClass}"></i>
</div>
<div class="activity-content">
<div class="activity-title">${randomActivity.title}</div>
<div class="activity-time">${randomActivity.time}</div>
</div>
`;
activityList.insertBefore(newActivity, activityList.firstChild);
// 保持最多显示10个活动
if (activityList.children.length > 10) {
activityList.removeChild(activityList.lastChild);
}
}, 30000); // 每30秒更新一次
}
// 启动实时更新
setTimeout(simulateRealTimeUpdates, 5000);
</script>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>