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

add better styling

Browse Source
This commit is contained in:
Matteo Rosati
2026-01-20 12:13:08 +01:00
parent f5bafd1117
commit c97739d096
2 changed files with 561 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
static/templates/index.html
View File

@@ -4,19 +4,56 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/main.css">
<title>Document</title>
<title>AI Chat Assistant</title>
</head>
<body>
<h1>Chat</h1>
<p>Come si calcola la massa magra? dammi una spiegazione dettagliata</p>
<div class="app-container">
<header class="chat-header">
<div class="header-content">
<div class="logo-icon">
<svg 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>
</div>
<h1 class="header-title">AI Chat Assistant</h1>
</div>
<div class="header-status">
<span class="status-dot"></span>
<span class="status-text">Online</span>
</div>
</header>
<div>
<textarea name="" id="message"></textarea>
<input id="button" type="button" value="Send">
<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>
</main>
<footer class="chat-footer">
<div class="input-wrapper">
<textarea id="message" class="message-input" placeholder="Type your message here..." rows="1"></textarea>
<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">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" fill="currentColor"/>
</svg>
</button>
</div>
<p class="footer-hint">Press Enter to send, Shift+Enter for new line</p>
</footer>
</div>
<div id="messages"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="/static/js/main.js"></script>