Files
rfp_response_automation/files/templates/base.html
2026-02-18 20:34:33 -03:00

321 lines
6.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ORACLE RFP AI Platform</title>
<style>
/* =========================
GLOBAL THEME (Oracle light)
========================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
/* antes: gradiente dark */
background: #f5f6f7;
/* antes: texto claro */
color: #1f2937;
min-height: 100vh;
}
/* =========================
LINKS
========================= */
a {
color: #C74634; /* Oracle red */
text-decoration: none;
}
a:hover {
opacity: 0.85;
}
/* =========================
NAVBAR
========================= */
.navbar {
position: fixed; /* 🔥 cola no topo real */
top: 0;
left: 0;
width: 100%;
background: #E30613;
z-index: 9999;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.navbar-inner {
width: 100%;
/* 🔥 padding mínimo só vertical */
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* texto branco */
.navbar a,
.nav-left {
color: white;
font-weight: 500;
}
.nav-links {
display: flex;
gap: 20px;
}
.nav-left {
font-weight: bold;
font-size: 18px;
/* destaque Oracle */
color: #FFFFFF;
}
.nav-links {
display: flex;
gap: 18px;
font-size: 14px;
}
/* =========================
LAYOUT
========================= */
.container {
max-width: 1400px;
margin: 90px auto 40px auto; /* 🔥 espaço para navbar */
padding: 0 24px;
}
/* =========================
CARD
========================= */
.card {
/* antes: #1e293b */
background: #ffffff;
border-radius: 14px;
padding: 24px;
/* antes sombra pesada */
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
border: 1px solid #e5e7eb;
margin-bottom: 24px;
}
/* =========================
TABLE
========================= */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px 12px;
border-bottom: 1px solid #e5e7eb;
text-align: left;
}
th {
color: #374151;
}
/* =========================
INPUTS
========================= */
input, select, textarea {
/* antes fundo escuro */
background: #ffffff;
border: 1px solid #e5e7eb;
color: #111;
padding: 10px;
border-radius: 8px;
width: 100%;
}
textarea {
resize: vertical;
}
/* =========================
BUTTONS
========================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: #F80000;
color: white;
padding: 10px 18px;
border-radius: 8px;
border: none;
cursor: pointer;
font-weight: 500;
font-size: 14px;
text-decoration: none;
line-height: 1;
gap: 6px;
}
.btn:hover {
opacity: 0.9;
}
.btn-success {
background: #16a34a;
}
.btn-danger {
background: #dc2626;
}
/* =========================
FLASH MESSAGES
========================= */
.flash {
padding: 10px;
border-radius: 8px;
margin-bottom: 14px;
}
.flash-success {
background: #e7f7ed;
color: #166534;
}
.flash-error {
background: #fee2e2;
color: #991b1b;
}
/* =========================
MOBILE
========================= */
@media (max-width: 768px) {
.container {
margin: 20px 12px;
}
table {
font-size: 12px;
}
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
font-size: 18px;
color: white; /* texto branco também */
}
.oracle-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
}
</style>
</head>
<body>
<!-- =========================
NAVBAR
========================= -->
<div class="navbar">
<div class="navbar-inner">
<div class="nav-left logo">
<img
src="{{ url_for('static', filename='oracle.webp') }}"
class="oracle-icon"
alt="Oracle"
/>
<span>ORACLE RFP AI Platform</span>
</div>
{% if request.endpoint != 'auth.login_page' %}
<div class="nav-links">
<a href="/">Chat</a>
{% if current_user and current_user.role == "admin" %}
<a href="/admin">Admin</a>
{% endif %}
{% if current_user %}
<a href="/logout">Logout</a>
{% else %}
<a href="/login">Login</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
<!-- =========================
PAGE CONTENT
========================= -->
<div class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="flash flash-{{ category }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}
{% endblock %}
</div>
</body>
</html>