React-Group/ai-virtual-assistant
Archived
3
2
Fork 2
Code Issues 24 Pull requests Projects Releases Packages Wiki Activity Actions

Improved the css & html

Browse source
This commit is contained in:
sageTheDM 2024-09-16 13:16:11 +02:00
parent 8d51733f2f
commit 1f5911d2fa
2 changed files with 76 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
html/index.html
View file

@ -15,16 +15,26 @@
<!-- History section: A scrollable list of interactions or messages -->
<div class="history">
<ul>
<li>history1</li>
<li>history2</li>
<li>history3</li>
<li>history4</li>
<li>history5</li>
<li>history6</li>
<li>history7</li>
<li>history8</li>
<li>history9</li>
<li>history10</li>
<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>
@ -33,6 +43,7 @@
<div class="titel">
<h1>Different AI models</h1>
</div>
<div class="grid">
<!-- Each AI model is represented as a colored circular button -->
<div class="ai-class">
<h3>Code</h3>
@ -55,6 +66,7 @@
<div class="circle custom-model"></div>
</div>
</div>
</div>
<!-- Output section: Simulating a conversation with AI -->
<div class="output">

38
html/styles.css
View file

@ -62,23 +62,49 @@ body {
.history ul li {
padding: 10px 0;
border-bottom: 1px solid var(--text-color);
width: 100%;
}
.history ul li a{
display: block;
text-decoration: none;
color: white;
width: 100%;
padding: 5px;
}
.history ul li a:hover{
background-color: var(--input-button-hover-color);
}
/* Models Section */
.models {
grid-column: 1;
grid-row: 2;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--models-background-color);
border-radius: 2em;
padding: 1em;
height: 40vh; /* Adjusted height to occupy 40% of the viewport height */
}
.models .title h3 {
.models h3 {
padding: 2px;
margin: 5px;
}
.models .title h3 {
padding: 2px;
margin: 5px;
padding-bottom: 1em;
}
.grid{
grid-column: 1;
grid-row: 2;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1em;
}
.ai-class {
text-align: center;
display: flex;