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

72
html/index.html
View file

@ -15,16 +15,26 @@
<!-- History section: A scrollable list of interactions or messages --> <!-- History section: A scrollable list of interactions or messages -->
<div class="history"> <div class="history">
<ul> <ul>
<li>history1</li> <li><a href="#">history1</a></li>
<li>history2</li> <li><a href="#">history2</a></li>
<li>history3</li> <li><a href="#">history3</a></li>
<li>history4</li> <li><a href="#">history4</a></li>
<li>history5</li> <li><a href="#">history5</a></li>
<li>history6</li> <li><a href="#">history6</a></li>
<li>history7</li> <li><a href="#">history7</a></li>
<li>history8</li> <li><a href="#">history8</a></li>
<li>history9</li> <li><a href="#">history9</a></li>
<li>history10</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> </ul>
</div> </div>
@ -33,26 +43,28 @@
<div class="titel"> <div class="titel">
<h1>Different AI models</h1> <h1>Different AI models</h1>
</div> </div>
<!-- Each AI model is represented as a colored circular button --> <div class="grid">
<div class="ai-class"> <!-- Each AI model is represented as a colored circular button -->
<h3>Code</h3> <div class="ai-class">
<div class="circle code-model"></div> <h3>Code</h3>
</div> <div class="circle code-model"></div>
<div class="ai-class"> </div>
<h3>Math</h3> <div class="ai-class">
<div class="circle math-model"></div> <h3>Math</h3>
</div> <div class="circle math-model"></div>
<div class="ai-class"> </div>
<h3>Language</h3> <div class="ai-class">
<div class="circle language-model"></div> <h3>Language</h3>
</div> <div class="circle language-model"></div>
<div class="ai-class"> </div>
<h3>Default</h3> <div class="ai-class">
<div class="circle default-model"></div> <h3>Default</h3>
</div> <div class="circle default-model"></div>
<div class="ai-class"> </div>
<h3>Custom</h3> <div class="ai-class">
<div class="circle custom-model"></div> <h3>Custom</h3>
<div class="circle custom-model"></div>
</div>
</div> </div>
</div> </div>

38
html/styles.css
View file

@ -62,23 +62,49 @@ body {
.history ul li { .history ul li {
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid var(--text-color); 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 Section */
.models { .models {
grid-column: 1;
grid-row: 2;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--models-background-color); background-color: var(--models-background-color);
border-radius: 2em; border-radius: 2em;
padding: 1em; padding: 1em;
height: 40vh; /* Adjusted height to occupy 40% of the viewport height */ height: 40vh; /* Adjusted height to occupy 40% of the viewport height */
} }
.models .title h3 {
.models h3 {
padding: 2px; padding: 2px;
margin: 5px; 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 { .ai-class {
text-align: center; text-align: center;
display: flex; display: flex;