Bootstrap
Bootstrap5
Card
Html
Css
Template de carte d'information Bootstrap 5 avec design élégant et moderne.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card Info Style Bootstrap 5 | AngularForAll</title>
<style>
:root {
--primary-color: #4a6cf7;
--secondary-color: #6a89ff;
--accent-color: #2c3e8f;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--background-color: #f8fafc;
--card-bg: #ffffff;
--text-primary: #1e293b;
--text-secondary: #64748b;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--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);
--border-radius: 12px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: var(--background-color);
color: var(--text-primary);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.dashboard {
width: 100%;
max-width: 650px;
background-color: var(--card-bg);
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
padding: 2rem;
overflow: hidden;
position: relative;
}
.dashboard::before {
content: '';
position: absolute;
top: -10%;
right: -10%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(106, 137, 255, 0.1) 0%, rgba(106, 137, 255, 0) 70%);
z-index: 0;
}
.dashboard::after {
content: '';
position: absolute;
bottom: -10%;
left: -10%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(106, 137, 255, 0.05) 0%, rgba(106, 137, 255, 0) 70%);
z-index: 0;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.header h1 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
}
.header .status {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
}
.status-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--success-color);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}
}
.service-group {
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
}
.group-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.service-card {
background-color: #f8fafd;
border-radius: var(--border-radius);
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.service-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.service-card.active {
background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
border-left: 3px solid var(--primary-color);
}
.service-info {
display: flex;
align-items: center;
gap: 12px;
}
.service-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: linear-gradient(135deg, #f3f6ff 0%, #e9efff 100%);
color: var(--primary-color);
}
.service-text {
display: flex;
flex-direction: column;
}
.service-name {
font-weight: 600;
font-size: 0.9375rem;
margin-bottom: 4px;
}
.service-description {
font-size: 0.8125rem;
color: var(--text-secondary);
}
.toggle-switch {
position: relative;
width: 50px;
height: 26px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e2e8f0;
transition: .4s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
input:checked + .toggle-slider {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}
input:checked + .toggle-slider:before {
transform: translateX(24px);
}
.usage-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 1.5rem;
}
.stat-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%);
border-radius: var(--border-radius);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.stat-title {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 8px;
}
.stat-value {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 4px;
}
.stat-trend {
font-size: 0.75rem;
display: flex;
align-items: center;
gap: 4px;
}
.trend-up {
color: var(--success-color);
}
.trend-down {
color: var(--danger-color);
}
.visual-indicator {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
border-radius: 0 3px 3px 0;
}
.indicator-high {
background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
width: 85%;
}
.indicator-medium {
background: linear-gradient(90deg, var(--warning-color) 0%, #fbbf24 100%);
width: 60%;
}
.indicator-low {
background: linear-gradient(90deg, var(--success-color) 0%, #34d399 100%);
width: 25%;
}
.data-visualization {
margin-top: 2rem;
width: 100%;
height: 120px;
position: relative;
overflow: hidden;
}
.data-visualization canvas {
position: relative;
z-index: 1;
}
.toggle-ripple {
position: absolute;
background: rgba(74, 108, 247, 0.15);
border-radius: 50%;
transform: scale(0);
pointer-events: none;
z-index: 0;
}
.resource-alert {
background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%);
border-left: 3px solid var(--warning-color);
padding: 1rem;
border-radius: var(--border-radius);
margin-top: 1.5rem;
display: flex;
align-items: center;
gap: 12px;
font-size: 0.875rem;
line-height: 1.5;
opacity: 0;
height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.resource-alert.show {
opacity: 1;
height: auto;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.alert-icon {
color: var(--warning-color);
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 500px) {
.dashboard {
padding: 1.5rem;
}
.usage-stats {
grid-template-columns: 1fr;
}
.service-name {
font-size: 0.875rem;
}
.service-description {
font-size: 0.75rem;
}
}
</style>
</head>
<body>
<div class="dashboard">
<div class="header">
<h1>Cloud Services Control</h1>
<div class="status">
<span class="status-indicator"></span>
All systems operational
</div>
</div>
<div class="service-group">
<h2 class="group-title">Compute Resources</h2>
<div class="service-card" id="compute-card">
<div class="service-info">
<div class="service-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
<line x1="6" y1="6" x2="6" y2="6"></line>
<line x1="6" y1="18" x2="6" y2="18"></line>
</svg>
</div>
<div class="service-text">
<div class="service-name">Auto-scaling Cluster</div>
<div class="service-description">Dynamic scaling with load balancing</div>
</div>
</div>
<label class="toggle-switch">
<input type="checkbox" id="compute-toggle" checked>
<span class="toggle-slider"></span>
</label>
</div>
<div class="service-card" id="kubernates-card">
<div class="service-info">
<div class="service-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2L2 7l10 5 10-5-10-5z"></path>
<path d="M2 17l10 5 10-5"></path>
<path d="M2 12l10 5 10-5"></path>
</svg>
</div>
<div class="service-text">
<div class="service-name">Kubernetes Engine</div>
<div class="service-description">Containerized workload orchestration</div>
</div>
</div>
<label class="toggle-switch">
<input type="checkbox" id="kubernates-toggle" checked>
<span class="toggle-slider"></span>
</label>
</div>
</div>
<div class="service-group">
<h2 class="group-title">Storage & Database</h2>
<div class="service-card" id="storage-card">
<div class="service-info">
<div class="service-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 6v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"></path>
<path d="M3 13v1a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z"></path>
<path d="M3 20v1a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z"></path>
</svg>
</div>
<div class="service-text">
<div class="service-name">Object Storage</div>
<div class="service-description">Scalable cloud storage buckets</div>
</div>
</div>
<label class="toggle-switch">
<input type="checkbox" id="storage-toggle" checked>
<span class="toggle-slider"></span>
</label>
</div>
<div class="service-card" id="database-card">
<div class="service-info">
<div class="service-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
</svg>
</div>
<div class="service-text">
<div class="service-name">Managed SQL</div>
<div class="service-description">High-availability relational DB</div>
</div>
</div>
<label class="toggle-switch">
<input type="checkbox" id="database-toggle">
<span class="toggle-slider"></span>
</label>
</div>
</div>
<div class="resource-alert" id="resource-alert">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
<path d="M12 9v4"></path>
<path d="M12 17h.01"></path>
</svg>
</div>
<div>
<strong>Resource optimization recommended.</strong> Enabling multiple high-compute services may increase costs. Consider scheduling workloads for off-peak hours.
</div>
</div>
<div class="usage-stats">
<div class="stat-card">
<div class="stat-title">CPU UTILIZATION</div>
<div class="stat-value">73%</div>
<div class="stat-trend trend-up">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
12% from last week
</div>
<div class="visual-indicator indicator-high"></div>
</div>
<div class="stat-card">
<div class="stat-title">MEMORY USAGE</div>
<div class="stat-value">48%</div>
<div class="stat-trend trend-up">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
5% from last week
</div>
<div class="visual-indicator indicator-medium"></div>
</div>
<div class="stat-card">
<div class="stat-title">NETWORK TRAFFIC</div>
<div class="stat-value">2.3 TB</div>
<div class="stat-trend trend-down">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
3% from last week
</div>
<div class="visual-indicator indicator-low"></div>
</div>
</div>
<div class="data-visualization">
<canvas id="dataChart"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Initialize Chart
const ctx = document.getElementById('dataChart').getContext('2d');
const gradientFill = ctx.createLinearGradient(0, 0, 0, 160);
gradientFill.addColorStop(0, 'rgba(106, 137, 255, 0.4)');
gradientFill.addColorStop(1, 'rgba(106, 137, 255, 0.05)');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Resource Usage',
data: [42, 49, 45, 62, 55, 65, 73],
borderColor: '#4a6cf7',
backgroundColor: gradientFill,
tension: 0.4,
borderWidth: 2,
fill: true,
pointBackgroundColor: '#fff',
pointBorderColor: '#4a6cf7',
pointBorderWidth: 2,
pointRadius: 4,
pointHoverRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
max: 100,
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.05)',
drawBorder: false
},
ticks: {
stepSize: 25,
font: {
size: 10
}
}
},
x: {
grid: {
display: false
},
ticks: {
font: {
size: 10
}
}
}
},
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: 'rgba(255, 255, 255, 0.9)',
titleColor: '#1e293b',
bodyColor: '#1e293b',
borderColor: 'rgba(0, 0, 0, 0.1)',
borderWidth: 1,
displayColors: false,
padding: 10,
titleFont: {
size: 14,
weight: 'bold'
},
callbacks: {
label: function(context) {
return `Usage: ${context.parsed.y}%`;
}
}
}
}
}
});
// Toggle Switch Animation
const toggles = document.querySelectorAll('input[type="checkbox"]');
toggles.forEach(toggle => {
toggle.addEventListener('change', function() {
const card = this.closest('.service-card');
const cardRect = card.getBoundingClientRect();
// Create ripple effect
const ripple = document.createElement('div');
ripple.classList.add('toggle-ripple');
ripple.style.width = '150px';
ripple.style.height = '150px';
ripple.style.left = `${this.offsetLeft - 60}px`;
ripple.style.top = `${this.offsetTop - 60}px`;
card.appendChild(ripple);
// Animate ripple
ripple.animate(
[
{ transform: 'scale(0)', opacity: 1 },
{ transform: 'scale(1)', opacity: 0 }
],
{
duration: 600,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
}
);
// Toggle active class on card
if (this.checked) {
card.classList.add('active');
} else {
card.classList.remove('active');
}
// Remove ripple after animation
setTimeout(() => {
ripple.remove();
}, 600);
// Update chart data based on active services
updateChartData();
// Show alert if multiple compute services are active
checkResourceUsage();
});
});
// Function to update chart data based on active toggles
function updateChartData() {
const baseData = [42, 49, 45, 62, 55, 65, 73];
const activeServices = document.querySelectorAll('input[type="checkbox"]:checked').length;
// Generate new data based on active services
const newData = baseData.map(value => {
// Adjust value based on number of active services
const multiplier = 0.9 + (activeServices * 0.1);
let newValue = Math.min(value * multiplier, 100);
return Math.round(newValue);
});
// Update chart with animation
chart.data.datasets[0].data = newData;
chart.update({
duration: 800,
easing: 'easeOutQuart'
});
}
// Function to check resource usage and show alert if needed
function checkResourceUsage() {
const computeActive = document.getElementById('compute-toggle').checked;
const kubernetesActive = document.getElementById('kubernates-toggle').checked;
const storageActive = document.getElementById('storage-toggle').checked;
const databaseActive = document.getElementById('database-toggle').checked;
const alertElement = document.getElementById('resource-alert');
// Show alert if all compute-intensive services are active
if (computeActive && kubernetesActive && databaseActive) {
alertElement.classList.add('show');
} else {
alertElement.classList.remove('show');
}
}
// Initial setup
document.querySelectorAll('.service-card').forEach(card => {
const toggle = card.querySelector('input[type="checkbox"]');
if (toggle.checked) {
card.classList.add('active');
}
});
// Check initial resource usage
checkResourceUsage();
</script>
</body>
</html>