admin/Akern-Genai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update style

Browse Source
This commit is contained in:
Matteo Rosati
2026-01-21 09:58:19 +01:00
parent 9f5d8a0a88
commit 543775d61e
5 changed files with 372 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
static/css/main.css
View File

@@ -1,21 +1,25 @@
/* ===== CSS Variables ===== */ /* ===== CSS Variables ===== */
:root { :root {
--primary-color: #6366f1; --accent-color: rgb(38, 186, 216);
--primary-hover: #4f46e5; --accent-hover: rgb(25, 150, 180);
--primary-light: #818cf8; --accent-light: rgb(80, 205, 235);
--secondary-color: #8b5cf6; --background-gradient: linear-gradient(
--accent-color: #06b6d4; 135deg,
--success-color: #10b981; var(--accent-hover) 0%,
--background-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); var(--accent-color) 100%
);
--glass-bg: rgba(255, 255, 255, 0.95); --glass-bg: rgba(255, 255, 255, 0.95);
--glass-border: rgba(255, 255, 255, 0.2); --glass-border: rgba(255, 255, 255, 0.2);
--text-primary: #1f2937; --text-primary: #1f2937;
--text-secondary: #6b7280; --text-secondary: #6b7280;
--text-light: #9ca3af; --text-light: #9ca3af;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-md:
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-lg:
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl:
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--border-radius-sm: 8px; --border-radius-sm: 8px;
--border-radius-md: 12px; --border-radius-md: 12px;
--border-radius-lg: 16px; --border-radius-lg: 16px;
@@ -25,6 +29,31 @@
--transition-slow: 0.5s ease; --transition-slow: 0.5s ease;
} }
/* ===== Font Face Declarations ===== */
@font-face {
font-family: "Intelo";
src: url("../fonts/intelo-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Intelo";
src: url("../fonts/intelo-light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Intelo";
src: url("../fonts/intelo-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ===== Reset & Base Styles ===== */ /* ===== Reset & Base Styles ===== */
* { * {
margin: 0; margin: 0;
@@ -33,7 +62,15 @@
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family:
"Intelo",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
background: var(--background-gradient); background: var(--background-gradient);
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
@@ -75,7 +112,11 @@ body {
/* ===== Header ===== */ /* ===== Header ===== */
.chat-header { .chat-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); background: linear-gradient(
135deg,
var(--accent-hover) 0%,
var(--accent-color) 100%
);
padding: 20px 24px; padding: 20px 24px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -103,7 +144,6 @@ body {
} }
@keyframes pulse { @keyframes pulse {
0%, 0%,
100% { 100% {
transform: scale(1); transform: scale(1);
@@ -121,41 +161,6 @@ body {
letter-spacing: -0.5px; letter-spacing: -0.5px;
} }
.header-status {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
padding: 6px 12px;
border-radius: 20px;
}
.status-dot {
width: 8px;
height: 8px;
background: var(--success-color);
border-radius: 50%;
animation: blink 1.5s infinite;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.status-text {
color: white;
font-size: 0.875rem;
font-weight: 500;
}
/* ===== Main Content ===== */ /* ===== Main Content ===== */
.chat-main { .chat-main {
flex: 1; flex: 1;
@@ -183,103 +188,6 @@ body {
background: var(--text-secondary); background: var(--text-secondary);
} }
/* ===== Welcome Section ===== */
.welcome-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
animation: fadeIn 0.8s ease-out;
flex-shrink: 0;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.welcome-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-bottom: 24px;
box-shadow: var(--shadow-lg);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.welcome-title {
font-size: 2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.welcome-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
margin-bottom: 32px;
max-width: 500px;
}
.sample-question {
background: white;
padding: 20px 24px;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
max-width: 600px;
border-left: 4px solid var(--primary-color);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.sample-question:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.sample-label {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.sample-text {
font-size: 1rem;
color: var(--text-primary);
font-style: italic;
}
/* ===== Messages Container ===== */ /* ===== Messages Container ===== */
.messages-container { .messages-container {
display: flex; display: flex;
@@ -314,7 +222,11 @@ body {
.sent { .sent {
align-self: flex-end; align-self: flex-end;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); background: linear-gradient(
135deg,
var(--accent-hover) 0%,
var(--accent-color) 100%
);
color: white; color: white;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
@@ -335,7 +247,7 @@ body {
} }
.received a { .received a {
color: var(--primary-color); color: var(--accent-color);
text-decoration: none; text-decoration: none;
} }
@@ -364,7 +276,7 @@ body {
} }
.message li::marker { .message li::marker {
color: var(--primary-color); color: var(--accent-color);
} }
/* Nested lists */ /* Nested lists */
@@ -420,7 +332,7 @@ body {
} }
.message-input:focus { .message-input:focus {
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); box-shadow: 0 0 0 3px rgba(38, 186, 216, 0.2);
} }
.message-input:disabled { .message-input:disabled {
@@ -432,7 +344,11 @@ body {
.send-button { .send-button {
width: 50px; width: 50px;
height: 50px; height: 50px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); background: linear-gradient(
135deg,
var(--accent-hover) 0%,
var(--accent-color) 100%
);
border: none; border: none;
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
color: white; color: white;
@@ -539,10 +455,6 @@ body {
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.header-status {
display: none;
}
.message { .message {
max-width: 90%; max-width: 90%;
} }

BIN
static/fonts/intelo-bold.woff2 Normal file
View File

Binary file not shown.

BIN
static/fonts/intelo-light.woff2 Normal file
View File

Binary file not shown.

BIN
static/fonts/intelo-regular.woff2 Normal file
View File

Binary file not shown.

61
static/templates/index.html
View File

@@ -1,9 +1,9 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/static/css/main.css"> <link rel="stylesheet" href="/static/css/main.css" />
<title>AI Chat Assistant</title> <title>AI Chat Assistant</title>
</head> </head>
<body> <body>
@@ -11,42 +11,47 @@
<header class="chat-header"> <header class="chat-header">
<div class="header-content"> <div class="header-content">
<div class="logo-icon"> <div class="logo-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 6C13.66 6 15 7.34 15 9C15 10.66 13.66 12 12 12C10.34 12 9 10.66 9 9C9 7.34 10.34 6 12 6ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z" fill="currentColor"/> width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 6C13.66 6 15 7.34 15 9C15 10.66 13.66 12 12 12C10.34 12 9 10.66 9 9C9 7.34 10.34 6 12 6ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z"
fill="currentColor"
/>
</svg> </svg>
</div> </div>
<h1 class="header-title">AI Chat Assistant</h1> <h1 class="header-title">AKERN Assistant</h1>
</div>
<div class="header-status">
<span class="status-dot"></span>
<span class="status-text">Online</span>
</div> </div>
</header> </header>
<main class="chat-main"> <main class="chat-main">
<div class="welcome-section">
<div class="welcome-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H6L4 18V4H20V16Z" fill="currentColor"/>
</svg>
</div>
<h2 class="welcome-title">Welcome to AI Chat</h2>
<p class="welcome-subtitle">Ask me anything and I'll help you find answers</p>
<div class="sample-question">
<span class="sample-label">Example question:</span>
<p class="sample-text">Come si calcola la massa magra? dammi una spiegazione dettagliata</p>
</div>
</div>
<div id="messages" class="messages-container"></div> <div id="messages" class="messages-container"></div>
</main> </main>
<footer class="chat-footer"> <footer class="chat-footer">
<div class="input-wrapper"> <div class="input-wrapper">
<textarea id="message" class="message-input" placeholder="Type your message here..." rows="1"></textarea> <textarea
id="message"
class="message-input"
placeholder="Type your message here..."
rows="1"
></textarea>
<button id="button" class="send-button"> <button id="button" class="send-button">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" fill="currentColor"/> width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"
fill="currentColor"
/>
</svg> </svg>
</button> </button>
</div> </div>