cristiano.hoshikawa/select_ai
1
0
Fork 0
mirror of https://github.com/hoshikawa2/select_ai.git synced 2026-03-03 16:09:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjustments

Browse Source
This commit is contained in:
Cristiano Hoshikawa
2025-08-23 18:26:51 -03:00
parent 7e9207db22
commit 6885ea8b2f
1 changed files with 66 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
files/app_select_ai.py
View File

@@ -67,63 +67,73 @@ PAGE = """
<!-- Export Excel (browser) -->
<script src="https://cdn.jsdelivr.net/npm/xlsx-populate/browser/xlsx-populate.min.js"></script>
<style>
:root { --bg:#0f1115; --card:#141826; --border:#22283a; --muted:#9aa4af; --text:#e5e7eb; --brand:#4f46e5; }
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text);}
/* Layout de coluna: topo = histórico, base = input */
.page { min-height: 100vh; display:flex; flex-direction:column; }
.wrap { max-width:1200px; width:100%; margin:0 auto; padding:16px; flex:1; display:flex; flex-direction:column; gap:12px; }
.header{ display:flex; align-items:center; gap:10px; }
.logo{ width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,#4f46e5,#06b6d4); display:flex; align-items:center; justify-content:center; font-weight:800; }
.title{ font-size:18px; font-weight:700 }
.muted{ color:var(--muted); font-size:12px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; }
.kpi{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{ padding:4px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; }
/* Histórico vertical com rolagem; cada item contém gráfico e/ou tabela */
#history { flex:1; overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px; max-height: 68vh; }
.item { background:#0f1424; border:1px solid var(--border); border-radius:10px; padding:12px; }
.sql { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:12px; color:#cbd5e1; background:#0b0f19; border:1px solid var(--border); border-radius:8px; padding:8px; overflow:auto; }
.block { margin-top:8px; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ padding:8px; border-bottom:1px solid var(--border); text-align:left; }
th{ background:#0f1524; position:sticky; top:0; }
/* Área de input sempre embaixo */
.footer { position: sticky; bottom: 0; background:var(--bg); padding:12px 16px; border-top:1px solid var(--border); }
.ask { display:flex; gap:8px; flex-wrap:wrap; }
input[type="text"]{ flex:1; min-width:280px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0c0f19; color:var(--text); }
button{ background:var(--brand); color:#fff; border:none; border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer; }
button:hover{ filter:brightness(1.1) }
.chart-box{
height: 220px; /* altura final do gráfico */
width: 100%;
border: 1px solid var(--border);
border-radius: 10px;
background: #0b0f19;
padding: 8px;
:root{
--bg:#ffffff; /* fundo página */
--card:#f9fafb; /* cartões/itens */
--border:#e5e7eb; /* linhas/bordas */
--muted:#6b7280; /* textos fracos */
--text:#111827; /* texto principal */
--brand:#0d6efd; /* botões/realces */
}
@media (max-width: 640px){
.chart-box{ height: 180px; } /* menor em telas pequenas */
}
.item { max-width: 100%; } /* já está */
.hist .item { max-width: 520px; } /* se usar histórico horizontal */
.toolbar{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 6px; }
.pill{ background:#0e1420; border:1px solid var(--border); color:#cbd5e1;
padding:6px 10px; border-radius:999px; font-size:12px; cursor:pointer; }
.pill:hover{ border-color:#3a4258; }
.chart-box{
height: 220px; width: 100%;
border:1px solid var(--border); border-radius:10px;
background:#0b0f19; padding:8px;
}
@media (max-width:640px){ .chart-box{ height:180px; } }
*{box-sizing:border-box}
body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
background:var(--bg);
color:var(--text);
}
/* Layout */
.page{ min-height:100vh; display:flex; flex-direction:column; }
.wrap{ max-width:1200px; width:100%; margin:0 auto; padding:16px; flex:1; display:flex; flex-direction:column; gap:12px; }
.header{ display:flex; align-items:center; gap:10px; }
.logo{ width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,#60a5fa,#22d3ee); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }
.title{ font-size:18px; font-weight:700 }
.muted{ color:var(--muted); font-size:12px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; }
.kpi{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{ padding:4px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; background:#fff; color:var(--text); }
/* Histórico */
#history{ flex:1; overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px; max-height:68vh; }
.item{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px; }
.sql{
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size:12px; color:#1f2937; background:#ffffff; border:1px solid var(--border);
border-radius:8px; padding:8px; overflow:auto;
}
.block{ margin-top:8px; }
table{ width:100%; border-collapse:collapse; font-size:14px; background:#fff; }
th,td{ padding:8px; border-bottom:1px solid var(--border); text-align:left; }
th{ background:#f3f4f6; position:sticky; top:0; }
/* Rodapé/input */
.footer{ position:sticky; bottom:0; background:var(--bg); padding:12px 16px; border-top:1px solid var(--border); }
.ask{ display:flex; gap:8px; flex-wrap:wrap; }
input[type="text"]{
flex:1; min-width:280px; padding:10px 12px; border-radius:10px;
border:1px solid var(--border); background:#ffffff; color:var(--text);
}
button{
background:var(--brand); color:#fff; border:none; border-radius:10px;
padding:10px 14px; font-weight:600; cursor:pointer;
}
button:hover{ filter:brightness(1.05) }
/* Gráficos */
.toolbar{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 6px; }
.pill{ background:#ffffff; border:1px solid var(--border); color:#374151; }
.pill:hover{ border-color:#cbd5e1; }
.chart-box{
height:220px; width:100%;
border:1px solid var(--border); border-radius:10px;
background:#ffffff; padding:8px;
}
@media (max-width:640px){ .chart-box{ height:180px; } }
</style>
</head>
<body>