213 lines
12 KiB
HTML
213 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>BMC Hub - Design Templates</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
body { background: #f8f9fa; padding: 40px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
|
||
|
|
.card { transition: transform 0.2s; height: 100%; border: none; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
|
||
|
|
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
|
||
|
|
.preview-box { height: 160px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; letter-spacing: 1px; border-radius: 6px 6px 0 0; }
|
||
|
|
.btn-group-vertical { width: 100%; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="text-center mb-5">
|
||
|
|
<h1 class="fw-bold display-5 mb-3">BMC Hub Design Templates</h1>
|
||
|
|
<p class="text-muted lead">Choose a style below to preview the dashboard and customer overview pages.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row g-4 justify-content-center">
|
||
|
|
<!-- 01 Nordic -->
|
||
|
|
<div class="col-md-4 col-lg-3">
|
||
|
|
<div class="card">
|
||
|
|
<div class="preview-box" style="background: #f8f9fa; color: #0f4c75; border-bottom: 4px solid #0f4c75;">
|
||
|
|
NORDIC
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title fw-bold">01. Nordic Minimalist</h5>
|
||
|
|
<p class="card-text small text-muted mb-4">Clean, airy, white & deep blue. Professional, calm, and spacious layout.</p>
|
||
|
|
<div class="d-grid gap-2">
|
||
|
|
<a href="01_nordic/index.html" class="btn btn-primary">View Dashboard</a>
|
||
|
|
<a href="01_nordic/customers.html" class="btn btn-outline-primary">View Customers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 02 Dark -->
|
||
|
|
<div class="col-md-4 col-lg-3">
|
||
|
|
<div class="card" style="background: #1a1d2d; color: white;">
|
||
|
|
<div class="preview-box" style="background: #0f111a; color: #6c5ce7; border-bottom: 1px solid rgba(255,255,255,0.1);">
|
||
|
|
DARK
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title fw-bold">02. Dark Professional</h5>
|
||
|
|
<p class="card-text small text-secondary mb-4">High contrast dark theme with purple accents. Developer-focused and modern.</p>
|
||
|
|
<div class="d-grid gap-2">
|
||
|
|
<a href="02_dark/index.html" class="btn btn-light" style="background: #6c5ce7; border: none; color: white;">View Dashboard</a>
|
||
|
|
<a href="02_dark/customers.html" class="btn btn-outline-light">View Customers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 03 Swiss -->
|
||
|
|
<div class="col-md-4 col-lg-3">
|
||
|
|
<div class="card" style="border: 2px solid black; box-shadow: 5px 5px 0px black;">
|
||
|
|
<div class="preview-box" style="background: white; color: black; border-bottom: 2px solid black;">
|
||
|
|
SWISS
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title fw-bold">03. Swiss Grid</h5>
|
||
|
|
<p class="card-text small text-muted mb-4">Bold typography, grid-based, black & white with red accent. Sharp and editorial.</p>
|
||
|
|
<div class="d-grid gap-2">
|
||
|
|
<a href="03_swiss/index.html" class="btn btn-dark rounded-0 fw-bold">View Dashboard</a>
|
||
|
|
<a href="03_swiss/customers.html" class="btn btn-outline-dark rounded-0 fw-bold">View Customers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 04 Soft -->
|
||
|
|
<div class="col-md-4 col-lg-3">
|
||
|
|
<div class="card" style="border-radius: 20px;">
|
||
|
|
<div class="preview-box" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 20px 20px 0 0;">
|
||
|
|
SOFT
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title fw-bold">04. Soft Gradient</h5>
|
||
|
|
<p class="card-text small text-muted mb-4">Rounded corners, soft shadows, and gradients. Friendly and approachable.</p>
|
||
|
|
<div class="d-grid gap-2">
|
||
|
|
<a href="04_soft/index.html" class="btn btn-primary" style="background: #667eea; border: none; border-radius: 10px;">View Dashboard</a>
|
||
|
|
<a href="04_soft/customers.html" class="btn btn-outline-primary" style="border-radius: 10px;">View Customers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 05 Compact -->
|
||
|
|
<div class="col-md-4 col-lg-3">
|
||
|
|
<div class="card border">
|
||
|
|
<div class="preview-box" style="background: #e9ecef; color: #495057; font-size: 1.2rem;">
|
||
|
|
COMPACT
|
||
|
|
</div>
|
||
|
|
<div class="card-body p-3">
|
||
|
|
<h6 class="card-title fw-bold">05. Compact Utility</h6>
|
||
|
|
<p class="card-text small text-muted mb-3">Data-dense, utility focused. Maximum information density.</p>
|
||
|
|
<div class="d-grid gap-2">
|
||
|
|
<a href="05_compact/index.html" class="btn btn-primary btn-sm">View Dashboard</a>
|
||
|
|
<a href="05_compact/customers.html" class="btn btn-outline-secondary btn-sm">View Customers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 06 Glass -->
|
||
|
|
<div class="col-md-4 col-lg-3">
|
||
|
|
<div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
|
||
|
|
<div class="preview-box" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.2);">
|
||
|
|
GLASS
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title fw-bold">06. Glassmorphism</h5>
|
||
|
|
<p class="card-text small text-white-50 mb-4">Floating sidebar, blurred backgrounds, and gradients. Modern and trendy.</p>
|
||
|
|
<div class="d-grid gap-2">
|
||
|
|
<a href="06_glass/index.html" class="btn btn-light bg-opacity-25 border-0 text-white">View Dashboard</a>
|
||
|
|
<a href="06_glass/customers.html" class="btn btn-outline-light">View Customers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 07 Material -->
|
||
|
|
<div class="col-md-4 col-lg-3">
|
||
|
|
<div class="card" style="background: #FEF7FF;">
|
||
|
|
<div class="preview-box" style="background: #EADDFF; color: #21005D;">
|
||
|
|
MATERIAL
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title fw-bold">07. Material 3</h5>
|
||
|
|
<p class="card-text small text-muted mb-4">Google's Material Design 3. Navigation Rail, pills, and pastel tones.</p>
|
||
|
|
<div class="d-grid gap-2">
|
||
|
|
<a href="07_material/index.html" class="btn btn-primary" style="background: #6750A4; border: none; border-radius: 20px;">View Dashboard</a>
|
||
|
|
<a href="07_material/customers.html" class="btn btn-outline-primary" style="border-radius: 20px;">View Customers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 08 Horizontal Clean -->
|
||
|
|
<div class="col-md-4 col-lg-3">
|
||
|
|
<div class="card">
|
||
|
|
<div class="preview-box" style="background: white; border-bottom: 4px solid #2563eb; color: #2563eb;">
|
||
|
|
TOP NAV
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title fw-bold">08. Horizontal Clean</h5>
|
||
|
|
<p class="card-text small text-muted mb-4">Classic top navigation bar. Clean, white, and blue. Standard SaaS layout.</p>
|
||
|
|
<div class="d-grid gap-2">
|
||
|
|
<a href="08_horizontal_clean/index.html" class="btn btn-primary">View Dashboard</a>
|
||
|
|
<a href="08_horizontal_clean/customers.html" class="btn btn-outline-primary">View Customers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 09 Horizontal Dark -->
|
||
|
|
<div class="col-md-4 col-lg-3">
|
||
|
|
<div class="card" style="background: #0b0c10; color: #c5c6c7; border: 1px solid #45a29e;">
|
||
|
|
<div class="preview-box" style="background: #1f2833; color: #66fcf1; border-bottom: 1px solid #45a29e;">
|
||
|
|
CYBER
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title fw-bold">09. Horizontal Dark</h5>
|
||
|
|
<p class="card-text small text-muted mb-4">Top navigation with a dark, cyberpunk/tech aesthetic. Neon accents.</p>
|
||
|
|
<div class="d-grid gap-2">
|
||
|
|
<a href="09_horizontal_dark/index.html" class="btn btn-outline-info rounded-0">View Dashboard</a>
|
||
|
|
<a href="09_horizontal_dark/customers.html" class="btn btn-outline-secondary rounded-0">View Customers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 10 Nordic Topbar -->
|
||
|
|
<div class="col-md-4 col-lg-3">
|
||
|
|
<div class="card border">
|
||
|
|
<div class="preview-box" style="background: #f8f9fa; color: #0f4c75; border-bottom: 1px solid #eee;">
|
||
|
|
NORDIC TOP
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title fw-bold">10. Nordic Topbar</h5>
|
||
|
|
<p class="card-text small text-muted mb-4">The clean Nordic style but with a top navigation bar instead of sidebar.</p>
|
||
|
|
<div class="d-grid gap-2">
|
||
|
|
<a href="10_nordic_top/index.html" class="btn btn-primary" style="background-color: #0f4c75; border-color: #0f4c75;">View Dashboard</a>
|
||
|
|
<a href="10_nordic_top/customers.html" class="btn btn-outline-secondary">View Customers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 11 Material Blue Top -->
|
||
|
|
<div class="col-md-4 col-lg-3">
|
||
|
|
<div class="card" style="background: #FDFCFF;">
|
||
|
|
<div class="preview-box" style="background: #D1E4FF; color: #001D36;">
|
||
|
|
MAT BLUE
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title fw-bold">11. Material Blue</h5>
|
||
|
|
<p class="card-text small text-muted mb-4">Material 3 with top navigation, blue theme, and custom profile pill.</p>
|
||
|
|
<div class="d-grid gap-2">
|
||
|
|
<a href="11_material_top_blue/index.html" class="btn btn-primary" style="background: #0061A4; border: none; border-radius: 20px;">View Dashboard</a>
|
||
|
|
<a href="11_material_top_blue/customers.html" class="btn btn-outline-primary" style="border-radius: 20px;">View Customers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|