gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
64 lines (57 loc) • 2.36 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media | Gentelella 2026 v4</title>
<link rel="icon" href="../images/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="/src/main-v4.js"></script>
</head>
<body data-shell="admin" data-page="media" data-breadcrumb="Home > Media">
<main class="main">
<div class="page-wrapper">
<div class="page-header">
<div class="page-header-row">
<div>
<div class="page-pretitle">Library</div>
<h1 class="page-title">Media gallery</h1>
</div>
<div class="page-actions">
<button class="btn btn-outline">Filter</button>
<button class="btn btn-primary">Upload</button>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="media-grid" id="media-grid"></div>
</div>
</div>
</div>
</main>
<script type="module">
const palettes = [
['linear-gradient(135deg,#1ABB9C,#169f85)', 'hero-bg.jpg', '2.4 MB'],
['linear-gradient(135deg,#066fd1,#4299e1)', 'team.jpg', '1.8 MB'],
['linear-gradient(135deg,#f59f00,#f76707)', 'sunset.jpg', '3.1 MB'],
['linear-gradient(135deg,#ae3ec9,#d6336c)', 'product.png', '0.9 MB'],
['linear-gradient(135deg,#2fb344,#74b816)', 'forest.jpg', '4.2 MB'],
['linear-gradient(135deg,#d63939,#f76707)', 'fire.jpg', '2.7 MB'],
['linear-gradient(135deg,#17a2b8,#066fd1)', 'ocean.jpg', '5.5 MB'],
['linear-gradient(135deg,#1a2332,#626d7d)', 'night.jpg', '3.3 MB'],
['linear-gradient(135deg,#4263eb,#ae3ec9)', 'aurora.png', '1.2 MB'],
['linear-gradient(135deg,#74b816,#2fb344)', 'meadow.jpg', '2.0 MB'],
['linear-gradient(135deg,#d6336c,#ae3ec9)', 'bloom.jpg', '1.5 MB'],
['linear-gradient(135deg,#f59f00,#d6336c)', 'desert.jpg', '4.8 MB']
];
document.getElementById('media-grid').innerHTML = palettes.map(([bg, name, size]) => `
<div class="media-tile" style="background:${bg}">
<div class="meta"><span>${name}</span><span class="size">${size}</span></div>
</div>
`).join('');
</script>
</body>
</html>