agent_tracker/templates/index.html
nickviljoen 08038b066f Rebrand UI to OLIVER template: Montserrat, yellow accents, sticky nav, tab fixes
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>
2026-05-17 10:12:18 +02:00

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 %}