Merge pull request 'Added a header to the project' (#28) from sageTheDm/ai-virtual-assistant:main into main
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/ai-virtual-assistant/pulls/28
This commit is contained in:
commit
1cd0393269
5 changed files with 153 additions and 89 deletions
BIN
py/static/img/logo.png
Normal file
BIN
py/static/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
|
|
@ -1,6 +1,6 @@
|
||||||
/* Color Variables */
|
/* Color Variables */
|
||||||
:root {
|
:root {
|
||||||
--background-color: black;
|
--background-color: white;
|
||||||
--text-color: white;
|
--text-color: white;
|
||||||
--font-family: Arial, sans-serif;
|
--font-family: Arial, sans-serif;
|
||||||
--history-background-color: rgb(0, 0, 48);
|
--history-background-color: rgb(0, 0, 48);
|
||||||
|
|
@ -23,13 +23,14 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
/* Disable Scrolling */
|
|
||||||
html, body {
|
html, body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden; /* Prevent scrolling */
|
overflow: hidden; /* Prevent scrolling */
|
||||||
}
|
}
|
||||||
/* Body Styling */
|
/* Body Styling */
|
||||||
body {
|
body {
|
||||||
|
margin-top: 1em;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -37,6 +38,41 @@ body {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: var(--background-color); /* Use the background color variable */
|
||||||
|
color: black; /* Use the text color variable */
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 10px 20px; /* Add some padding for spacing */
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
|
||||||
|
z-index: 1000; /* Ensure the header is above other content */
|
||||||
|
font-family: var(--font-family); /* Use the font family variable */
|
||||||
|
}
|
||||||
|
|
||||||
|
header li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 15px; /* Add spacing between list items */
|
||||||
|
}
|
||||||
|
|
||||||
|
header img {
|
||||||
|
height: 2em;
|
||||||
|
vertical-align: middle; /* Align image with text */
|
||||||
|
}
|
||||||
|
|
||||||
|
header a {
|
||||||
|
color: black; /* Ensure links are white */
|
||||||
|
text-decoration: none; /* Remove underline from links */
|
||||||
|
transition: color 0.3s; /* Smooth transition for hover effect */
|
||||||
|
}
|
||||||
|
|
||||||
|
header a:hover {
|
||||||
|
color: var(--input-button-color); /* Change color on hover for better interaction */
|
||||||
|
}
|
||||||
|
|
||||||
/* Container Grid Layout */
|
/* Container Grid Layout */
|
||||||
.container {
|
.container {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
13
py/templates/contact.html
Normal file
13
py/templates/contact.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="/static/styles.css">
|
||||||
|
<title>AI Assistant</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
0
py/templates/faq.html
Normal file
0
py/templates/faq.html
Normal file
|
|
@ -1,93 +1,108 @@
|
||||||
<!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/styles.css">
|
<link rel="stylesheet" href="/static/styles.css">
|
||||||
<title>AI Assistant</title>
|
<title>AI Assistant</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- Main container for the layout -->
|
<header>
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<!-- History section: A scrollable list of interactions or messages -->
|
|
||||||
<div class="history">
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">history1</a></li>
|
<li>
|
||||||
<li><a href="#">history2</a></li>
|
<a href="/static/templates/index.html">
|
||||||
<li><a href="#">history3</a></li>
|
<img src="/static/img/logo.png" alt="logo.png">
|
||||||
<li><a href="#">history4</a></li>
|
</a>
|
||||||
<li><a href="#">history5</a></li>
|
</li>
|
||||||
<li><a href="#">history6</a></li>
|
<li>
|
||||||
<li><a href="#">history7</a></li>
|
<a href="/static/template/contact.html">Contact</a>
|
||||||
<li><a href="#">history8</a></li>
|
</li>
|
||||||
<li><a href="#">history9</a></li>
|
<li>
|
||||||
<li><a href="#">history10</a></li>
|
<a href="/static/template/faq.html">FAQ</a>
|
||||||
<li><a href="#">history11</a></li>
|
</li>
|
||||||
<li><a href="#">history12</a></li>
|
|
||||||
<li><a href="#">history13</a></li>
|
|
||||||
<li><a href="#">history14</a></li>
|
|
||||||
<li><a href="#">history15</a></li>
|
|
||||||
<li><a href="#">history16</a></li>
|
|
||||||
<li><a href="#">history17</a></li>
|
|
||||||
<li><a href="#">history18</a></li>
|
|
||||||
<li><a href="#">history19</a></li>
|
|
||||||
<li><a href="#">history20</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</header>
|
||||||
|
<!-- Main container for the layout -->
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
<!-- Models section: Contains buttons to switch between AI models -->
|
<!-- History section: A scrollable list of interactions or messages -->
|
||||||
<div class="models">
|
<div class="history">
|
||||||
<div class="titel">
|
<ul>
|
||||||
<h1>Different AI models</h1>
|
<li><a href="#">history1</a></li>
|
||||||
|
<li><a href="#">history2</a></li>
|
||||||
|
<li><a href="#">history3</a></li>
|
||||||
|
<li><a href="#">history4</a></li>
|
||||||
|
<li><a href="#">history5</a></li>
|
||||||
|
<li><a href="#">history6</a></li>
|
||||||
|
<li><a href="#">history7</a></li>
|
||||||
|
<li><a href="#">history8</a></li>
|
||||||
|
<li><a href="#">history9</a></li>
|
||||||
|
<li><a href="#">history10</a></li>
|
||||||
|
<li><a href="#">history11</a></li>
|
||||||
|
<li><a href="#">history12</a></li>
|
||||||
|
<li><a href="#">history13</a></li>
|
||||||
|
<li><a href="#">history14</a></li>
|
||||||
|
<li><a href="#">history15</a></li>
|
||||||
|
<li><a href="#">history16</a></li>
|
||||||
|
<li><a href="#">history17</a></li>
|
||||||
|
<li><a href="#">history18</a></li>
|
||||||
|
<li><a href="#">history19</a></li>
|
||||||
|
<li><a href="#">history20</a></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid">
|
|
||||||
<!-- Each AI model is represented as a colored circular button -->
|
<!-- Models section: Contains buttons to switch between AI models -->
|
||||||
<div class="ai-class">
|
<div class="models">
|
||||||
<h3>Code</h3>
|
<div class="titel">
|
||||||
<div class="circle code-model"></div>
|
<h1>Different AI models</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="ai-class">
|
<div class="grid">
|
||||||
<h3>Math</h3>
|
<!-- Each AI model is represented as a colored circular button -->
|
||||||
<div class="circle math-model"></div>
|
<div class="ai-class">
|
||||||
</div>
|
<h3>Code</h3>
|
||||||
<div class="ai-class">
|
<div class="circle code-model"></div>
|
||||||
<h3>Language</h3>
|
</div>
|
||||||
<div class="circle language-model"></div>
|
<div class="ai-class">
|
||||||
</div>
|
<h3>Math</h3>
|
||||||
<div class="ai-class">
|
<div class="circle math-model"></div>
|
||||||
<h3>Default</h3>
|
</div>
|
||||||
<div class="circle default-model"></div>
|
<div class="ai-class">
|
||||||
</div>
|
<h3>Language</h3>
|
||||||
<div class="ai-class">
|
<div class="circle language-model"></div>
|
||||||
<h3>Custom</h3>
|
</div>
|
||||||
<div class="circle custom-model"></div>
|
<div class="ai-class">
|
||||||
|
<h3>Default</h3>
|
||||||
|
<div class="circle default-model"></div>
|
||||||
|
</div>
|
||||||
|
<div class="ai-class">
|
||||||
|
<h3>Custom</h3>
|
||||||
|
<div class="circle custom-model"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Output section: Simulating a conversation with AI -->
|
<!-- Output section: Simulating a conversation with AI -->
|
||||||
<div class="output">
|
<div class="output">
|
||||||
<div class="conversation">
|
<div class="conversation">
|
||||||
{% for message in messages %}
|
{% for message in messages %}
|
||||||
{% if message.startswith('User:') %}
|
{% if message.startswith('User:') %}
|
||||||
<div class="user-message">{{ message }}</div>
|
<div class="user-message">{{ message }}</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="ai-message">{{ message }}</div>
|
<div class="ai-message">{{ message }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Input section: Where user input is provided -->
|
||||||
|
<form class="input" method="POST" action="">
|
||||||
|
<input type="text" name="user_message" placeholder="Type your message here..." />
|
||||||
|
<button type="submit" name="option" value="voice"><img src="/static/img/microphone.svg" alt="microphone"></button>
|
||||||
|
<button type="submit" name="option" value="chat">Send</button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
<!-- Input section: Where user input is provided -->
|
</html>
|
||||||
<form class="input" method="POST" action="">
|
|
||||||
<input type="text" name="user_message" placeholder="Type your message here..." />
|
|
||||||
<button type="submit" name="option" value="voice"><img src="/static/img/microphone.svg" alt="microphone"></button>
|
|
||||||
<button type="submit" name="option" value="chat">Send</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue