Swap the muddy #f3ae3e palette for the real OLIVER brand pulled from the master
PPT template: yellow #FFCB05 + near-black #1A1A1A + off-white #F6F7F7, Montserrat
font. White-first page with a brand-yellow highlight rectangle behind page titles,
stat tiles with yellow left-strip, and a short yellow accent line under each
card section title — picks up the template's "01" chapter-marker rhythm.
Fixes two production bugs along the way:
- Nav stays pinned at top while page scrolls. The conflicting
`.navbar { position: relative !important }` rule was removed from nav.html
so the `position: fixed` from style.css can take effect.
- Clicking admin tabs no longer scrolls the page. Converted
`<a href="#users">` to `<button data-bs-target="#users">` (Bootstrap 5's
recommended pattern), so the anchor jump can't happen.
Other refinements: table padding loosened, `transform: scale` row hover
removed (jittery on dense rows), modal headers switched to near-black,
Chart.js palette aligned with brand tokens.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
89 lines
2.5 KiB
HTML
89 lines
2.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container my-5">
|
|
<!-- Welcome page for non-authenticated users -->
|
|
<div class="text-center py-5">
|
|
<div class="welcome-section">
|
|
<h1 class="display-4 mb-4">Welcome to AgentHub</h1>
|
|
<p class="lead mb-4">Your personal account management platform</p>
|
|
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
|
<a href="{{ base_path }}/login" class="btn btn-primary btn-lg">
|
|
<i class="fas fa-sign-in-alt me-2"></i>Sign In
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-5">
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card text-center h-100">
|
|
<div class="card-body">
|
|
<div class="feature-icon bg-primary mb-3 mx-auto">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<h5 class="card-title">Secure</h5>
|
|
<p class="card-text">Your data is protected with industry-standard security measures.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card text-center h-100">
|
|
<div class="card-body">
|
|
<div class="feature-icon bg-success mb-3 mx-auto">
|
|
<i class="fas fa-rocket"></i>
|
|
</div>
|
|
<h5 class="card-title">Fast</h5>
|
|
<p class="card-text">Quick registration and seamless user experience.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card text-center h-100">
|
|
<div class="card-body">
|
|
<div class="feature-icon bg-info mb-3 mx-auto">
|
|
<i class="fas fa-heart"></i>
|
|
</div>
|
|
<h5 class="card-title">Simple</h5>
|
|
<p class="card-text">Clean and intuitive interface for easy navigation.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.feature-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.welcome-section {
|
|
padding: 4rem 2rem;
|
|
border-radius: 12px;
|
|
background: var(--brand-off-white);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.display-4 {
|
|
display: inline-block;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
color: var(--brand-dark);
|
|
padding: 0.15rem 0.6rem;
|
|
background: linear-gradient(
|
|
to top,
|
|
var(--brand-yellow) 0,
|
|
var(--brand-yellow) 70%,
|
|
transparent 70%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
</style>
|
|
{% endblock %}
|