diff --git a/py/static/img/code.jpg b/py/static/img/code.jpg
new file mode 100644
index 0000000..416fca4
Binary files /dev/null and b/py/static/img/code.jpg differ
diff --git a/py/static/img/copy.svg b/py/static/img/copy.svg
new file mode 100644
index 0000000..c8bdf17
--- /dev/null
+++ b/py/static/img/copy.svg
@@ -0,0 +1,54 @@
+
+
+
+
+
diff --git a/py/static/img/default.jpg b/py/static/img/default.jpg
new file mode 100644
index 0000000..266213d
Binary files /dev/null and b/py/static/img/default.jpg differ
diff --git a/py/static/img/edit.svg b/py/static/img/edit.svg
new file mode 100644
index 0000000..ed1f7fe
--- /dev/null
+++ b/py/static/img/edit.svg
@@ -0,0 +1,74 @@
+
+
+
+
+
diff --git a/py/static/img/language.jpg b/py/static/img/language.jpg
new file mode 100644
index 0000000..5ab31b9
Binary files /dev/null and b/py/static/img/language.jpg differ
diff --git a/py/static/img/math.jpg b/py/static/img/math.jpg
new file mode 100644
index 0000000..a417968
Binary files /dev/null and b/py/static/img/math.jpg differ
diff --git a/py/static/img/resend.svg b/py/static/img/resend.svg
new file mode 100644
index 0000000..469d02b
--- /dev/null
+++ b/py/static/img/resend.svg
@@ -0,0 +1,65 @@
+
+
+
+
+
diff --git a/py/static/img/send.svg b/py/static/img/send.svg
new file mode 100644
index 0000000..edcd870
--- /dev/null
+++ b/py/static/img/send.svg
@@ -0,0 +1,6 @@
+
+
+
\ No newline at end of file
diff --git a/py/static/styles.css b/py/static/styles.css
index a4347f3..950c0d8 100644
--- a/py/static/styles.css
+++ b/py/static/styles.css
@@ -1,4 +1,3 @@
-/* Color Variables */
:root {
--background-color: white;
--text-color: white;
@@ -10,13 +9,14 @@
--language-model-color: blue;
--default-model-color: yellow;
--custom-model-color: purple;
- --output-background-color: rgb(0, 0, 48);
- --user-message-color: rgb(0, 128, 255);
- --ai-message-color: rgb(100, 100, 255);
+ --output-background-color: black; /* Set the conversation background to black */
+ --user-message-color: rgb(0, 128, 255); /* Blueish bubble for user */
+ --ai-message-color: rgb(100, 100, 255); /* Lighter blue for AI */
--input-background-color: rgb(0, 0, 48);
--input-button-color: rgb(0, 128, 255);
--input-button-hover-color: rgb(0, 100, 200);
}
+
/* Global Reset */
* {
margin: 0;
@@ -28,49 +28,52 @@ html, body {
height: 100vh;
overflow: hidden; /* Prevent scrolling */
}
+
/* Body Styling */
body {
- margin-top: 1em;
+ margin-top: 2em;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
+ margin-bottom: 0.5em;
}
+/* Header Styling */
header {
- background-color: var(--background-color); /* Use the background color variable */
- color: black; /* Use the text color variable */
+ background-color: var(--background-color);
+ color: black;
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 */
+ padding: 10px 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ font-family: var(--font-family);
}
header li {
display: inline-block;
- margin: 0 15px; /* Add spacing between list items */
+ margin: 0 15px;
}
header img {
height: 2em;
- vertical-align: middle; /* Align image with text */
+ vertical-align: middle;
}
header a {
- color: black; /* Ensure links are white */
- text-decoration: none; /* Remove underline from links */
- transition: color 0.3s; /* Smooth transition for hover effect */
+ color: black;
+ text-decoration: none;
+ transition: color 0.3s;
}
header a:hover {
- color: var(--input-button-color); /* Change color on hover for better interaction */
+ color: var(--input-button-color);
}
/* Container Grid Layout */
@@ -82,6 +85,7 @@ header a:hover {
width: 90vw;
height: 90vh;
}
+
/* History Section */
.history {
grid-column: 1;
@@ -90,18 +94,20 @@ header a:hover {
background-color: var(--history-background-color);
padding: 1em;
overflow-y: auto;
- height: 50vh; /* Adjusted to occupy 60% of the viewport height */
+ height: 50vh;
}
+
.history ul {
list-style: none;
}
+
.history ul li {
padding: 10px 0;
border-bottom: 1px solid var(--text-color);
width: 100%;
}
-.history ul li a{
+.history ul li a {
display: block;
text-decoration: none;
color: white;
@@ -109,109 +115,183 @@ header a:hover {
padding: 5px;
}
-.history ul li a:hover{
+.history ul li a:hover {
background-color: var(--input-button-hover-color);
}
/* Models Section */
.models {
+ overflow-y: auto;
background-color: var(--models-background-color);
border-radius: 2em;
padding: 1em;
- height: 40vh; /* Adjusted height to occupy 40% of the viewport height */
+ height: 40vh;
+ box-sizing: border-box;
}
-.models h3 {
- padding: 2px;
- margin: 5px;
-}
-
-.models .title h3 {
- padding: 2px;
- margin: 5px;
+.models .titel {
padding-bottom: 1em;
-}
-
-.grid{
- grid-column: 1;
- grid-row: 2;
display: flex;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
- padding-top: 1em;
+
}
-.ai-class {
- text-align: center;
+.grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5vh;
+ height: calc(100% - 2em);
+}
+
+.model-box {
display: flex;
- flex-direction: column;
align-items: center;
justify-content: center;
+ color: #fff;
+ border-radius: 5%;
+ overflow: hidden;
+ position: relative;
+ height: 20vh;
}
-.circle {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- cursor: pointer;
- transition: transform 0.2s;
+
+.overlay{
+ z-index: 900;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.7);
+ /* Dark overlay */
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 300%;
+ transition: opacity 0.5s ease;
+ pointer-events: none;
+ opacity: 0;
+ font-size:xx-large;
}
-.circle:hover {
- transform: scale(1.1);
+
+.model-box:hover .overlay{
+ opacity: 1;
}
-/* Model Colors */
+
.code-model {
- background-color: var(--code-model-color);
+ background-image: url(/static/img/code.jpg);
+ background-repeat: no-repeat;
+ background-size: cover;
}
+
.math-model {
- background-color: var(--math-model-color);
+ background-image: url(/static/img/math.jpg);
+ background-color: white;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
}
+
.language-model {
- background-color: var(--language-model-color);
+ background-image: url(/static/img/language.jpg);
+ background-color: #72cce4;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
}
+
.default-model {
- background-color: var(--default-model-color);
-}
-.custom-model {
- background-color: var(--custom-model-color);
+ background-image: url(/static/img/default.jpg);
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
}
+
/* Output Section */
.output {
grid-column: 2;
grid-row: 1 / span 2;
border-radius: 2em;
background-color: var(--output-background-color);
- padding: 1em;
+ padding: 1.5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: 1.2em;
- overflow-y: scroll;
- height: 80vh;
+ overflow-y: auto;
+ max-height: 75vh;
margin-bottom: 0;
+ width: 100%;
}
+
+
/* Conversation */
-.conversation {
- width: 100%;
+#conversation {
+ display: flex;
+ flex-direction: column;
+ padding: 10px;
+ overflow-y: auto;
+ max-height: 80vh;
+ background-color: var(--output-background-color); /* Black background */
+ border-radius: 10px;
+ scroll-behavior: smooth; /* Optional: Smooth scrolling */
}
-.md {
- display: block;
- width: 100%;
+
+.user-message,
+.ai-message {
+ margin: 10px 0;
+ padding: 10px 15px;
+ border-radius: 15px;
+ max-width: 60%;
+ width: fit-content; /* Adjusts width to fit the content */
+ word-wrap: break-word;
+ display: block; /* Changed from inline-block to block */
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
+
+/* Align user message to the right */
.user-message {
background-color: var(--user-message-color);
- padding: 10px;
- border-radius: 10px;
- margin-bottom: 10px;
- align-self: flex-end;
- text-align: right;
+ color: var(--text-color);
+ border-bottom-right-radius: 0;
+ margin-left: auto;
+ text-align: right; /* Align text to the right */
}
+
+/* Align AI message to the left */
.ai-message {
background-color: var(--ai-message-color);
- padding: 10px;
- border-radius: 10px;
- margin-bottom: 10px;
- align-self: flex-start;
+ color: var(--text-color);
+ border-bottom-left-radius: 0;
+ margin-right: auto;
+ text-align: left; /* Align text to the left */
}
+
+
+/* Output Form Buttons */
+.output form {
+ display: flex;
+ justify-content: flex-start;
+ gap: 10px;
+}
+
+.output form button {
+ background-color: transparent;
+ color: white;
+ border: none;
+ padding: 0;
+ cursor: pointer;
+ transition: transform 0.2s ease-in-out;
+}
+
+.output form button:hover {
+ transform: scale(1.2);
+}
+
+.output form button img {
+ height: 1.8em;
+}
+
/* Input Section */
.input {
grid-column: 2;
@@ -222,74 +302,54 @@ header a:hover {
display: flex;
justify-content: space-between;
align-items: center;
- height: 10vh;
- margin-top: -7em;
+ height: auto;
+ margin-top: -9em;
+ gap: 10px;
+ height: 7em;
}
+
.input input {
flex-grow: 1;
- padding: 10px;
+ padding: 12px;
font-size: 1.2em;
- border-radius: 5px;
- border: none;
+ border-radius: 8px;
+ border: 2px solid var(--input-button-color);
+ outline: none;
margin-right: 10px;
+ background-color: rgba(255, 255, 255, 0.9);
+ color: #333;
+ transition: border-color 0.3s ease-in-out;
}
+
+.input input:focus {
+ border-color: var(--input-button-hover-color);
+}
+
.input button {
- padding: 10px 20px;
+ padding: 12px 20px;
background-color: var(--input-button-color);
color: white;
border: none;
- border-radius: 5px;
- font-size: 1em;
+ border-radius: 50%;
+ font-size: 1.5em;
cursor: pointer;
- height: 3em;
- margin: 5px;
+ height: 50px;
+ width: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: background-color 0.3s ease;
+ position: relative;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
+
.input button img {
- height: 100%;
+ height: 1em;
}
+
.input button:hover {
background-color: var(--input-button-hover-color);
-}
-
-/* Form styling */
-#contactForm {
- max-width: 600px;
- margin: 0 auto;
- background: var(--input-background-color); /* Use the input background color variable */
- padding: 20px;
- border-radius: 2em; /* Match the border radius used in other sections */
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
-}
-
-#contactForm label {
- color: var(--text-color); /* Use the text color variable */
- display: block; /* Ensure labels are block elements */
- margin-bottom: 5px; /* Add some space below labels */
-}
-
-#contactForm input,
-#contactForm textarea {
- color: var(--text-color); /* Use the text color variable */
- background-color: var(--history-background-color); /* Use a contrasting background */
- border: 1px solid var(--input-button-color); /* Use the input button color for borders */
- border-radius: 4px;
- width: 100%;
- padding: 10px;
- margin-bottom: 15px;
-}
-
-#contactForm button {
- background-color: var(--input-button-color); /* Use the input button color */
- color: var(--background-color); /* Use the background color for text */
- border: none;
- padding: 10px 20px;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s; /* Smooth transition for hover effect */
-}
-
-#contactForm button:hover {
- background-color: var(--input-button-hover-color); /* Use the hover color variable */
+ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
/* FAQ Section */
@@ -329,8 +389,46 @@ header a:hover {
line-height: 1.5;
}
-/* Add some hover effects for the FAQ items */
.faq-item:hover {
background-color: #444;
transition: background-color 0.3s;
-}
\ No newline at end of file
+}
+
+@media (max-width: 1400px) {
+ .grid{
+ grid-template-columns: 1fr;
+ }
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+ .container {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ width: 95vw;
+ }
+
+ .history, .models {
+ display: none; /* Hide history and models */
+ }
+
+ .output {
+ grid-column: 1;
+ grid-row: 1 / span 2;
+ }
+
+ .input {
+ grid-column: 1;
+ grid-row: 3;
+ margin-top: -4em;
+ }
+
+ .input button {
+ height: 40px;
+ width: 40px;
+ }
+
+ .output form button img {
+ height: 1.5em;
+ }
+}
diff --git a/py/templates/index.html b/py/templates/index.html
index 67938f8..0ddb62e 100644
--- a/py/templates/index.html
+++ b/py/templates/index.html
@@ -1,19 +1,18 @@
-
-
-
-
- AI Assistant
-
-
-
-
+
+
+
+ AI Assistant
+
+
+ 
+