React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

main #122

Merged
Patrick_Pluto merged 4 commits from sageTheDm/interstellar_ai:main into main 2024-10-09 08:19:16 +02:00
Conversation 0 Commits 4 Files changed 22 +294 -498
22 changed files with 294 additions and 498 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
app/components/Credits.tsx
View file

@ -1,62 +1,24 @@
import React from 'react'; import React from 'react';
const Credits: React.FC = () => { const Credits: React.FC = () => (
return ( <div className="credits-container">
<div className="credits-container"> <section id="credits" className="credits-section">
<section id="credits" className="credits-section"> <h1 className="title">Credits</h1>
<h1 className="title">Credits</h1> <h2 className="subtitle">Icons</h2>
<p className="paragraph">This project utilizes the following icon resources:</p>
<CreditLink href="https://fontawesome.com/v4/license/" label="fontawesome" />
<h2 className="subtitle">Fonts</h2>
<p className="paragraph">The fonts used in this project are provided by:</p>
<CreditLink href="https://github.com/itfoundry/Poppins" label="Poppins" />
<CreditLink href="https://openfontlicense.org" label="Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight" />
<CreditLink href="http://www.apache.org/licenses/LICENSE-2.0" label="Roboto, Rock Salt" />
<CreditLink href="https://ubuntu.com/legal/font-licence" label="Ubuntu" />
</section>
</div>
);
<h2 className="subtitle">Icons</h2> const CreditLink = ({ href, label }: { href: string; label: string }) => (
<p className="paragraph"> <a href={href} className="credit-btn" target="_blank" rel="noopener noreferrer">{label}</a>
This project utilizes the following icon resources: );
</p>
<a
href="https://fontawesome.com/v4/license/"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
fontawesome
</a>
<h2 className="subtitle">Fonts</h2>
<p className="paragraph">
The fonts used in this project are provided by:
</p>
<a
href="https://github.com/itfoundry/Poppins"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Poppins
</a>
<a
href="https://openfontlicense.org"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight
</a>
<a
href="http://www.apache.org/licenses/LICENSE-2.0"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Roboto, Rock Salt
</a>
<a
href="https://ubuntu.com/legal/font-licence"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Ubuntu
</a>
</section>
</div>
);
};
export default Credits; export default Credits;

14
app/components/Header.tsx
View file

@ -20,13 +20,16 @@ const Header: React.FC<HeaderProps> = ({
const dropdownRef = useRef<HTMLDivElement | null>(null); const dropdownRef = useRef<HTMLDivElement | null>(null);
const toggleRef = useRef<HTMLDivElement | null>(null); const toggleRef = useRef<HTMLDivElement | null>(null);
// Pages that will be displayed in the menu
const pages: ('AI' | 'FAQ' | 'Documentation' | 'Credits')[] = ['AI', 'FAQ', 'Documentation', 'Credits'];
// Toggle menu state // Toggle menu state
const toggleMenu = () => { const toggleMenu = () => {
setMenuOpen((prevMenuOpen) => !prevMenuOpen); setMenuOpen((prevMenuOpen) => !prevMenuOpen);
}; };
// Handle button click // Handle button click
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { const handleViewChange = (page: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => {
onViewChange(page); onViewChange(page);
setMenuOpen(false); // Close the menu when a button is clicked setMenuOpen(false); // Close the menu when a button is clicked
}; };
@ -72,10 +75,11 @@ const Header: React.FC<HeaderProps> = ({
</button> </button>
)} )}
<nav ref={dropdownRef} className={`nav-links ${menuOpen ? "active" : ""}`}> <nav ref={dropdownRef} className={`nav-links ${menuOpen ? "active" : ""}`}>
<button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button> {pages.map(page => (
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button> <button key={page} onClick={() => handleViewChange(page)} className="nav-btn">
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button> {page}
<button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button> </button>
))}
</nav> </nav>
<div ref={toggleRef} className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}> <div ref={toggleRef} className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
<span></span> <span></span>

36
app/components/InputFrontend.tsx
View file

@ -1,5 +1,5 @@
import React, { useState, ForwardedRef, useEffect } from 'react'; import React, { useState, ForwardedRef, useEffect } from 'react';
import "../styles/variables.css" import "../styles/variables.css";
interface InputProps { interface InputProps {
message: string; message: string;
@ -13,33 +13,36 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
({ message, onSendClick, onMicClick, inputDisabled, isRecording }, ref: ForwardedRef<HTMLDivElement>) => { ({ message, onSendClick, onMicClick, inputDisabled, isRecording }, ref: ForwardedRef<HTMLDivElement>) => {
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
// Sync the inputValue state with the message prop
useEffect(() => { useEffect(() => {
setInputValue(message); setInputValue(message);
}, [message]); }, [message]);
// Handle the input change
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value); setInputValue(e.target.value);
}; };
// Handle 'Enter' key press
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (!inputDisabled) { if (!inputDisabled && event.key === 'Enter') {
if (event.key === 'Enter') { onSendClick(inputValue, false); // Send the message on Enter
onSendClick(inputValue, false); // Call the function passed via props setInputValue(''); // Clear the input after submission
setInputValue(''); // Optionally clear input after submission event.preventDefault(); // Prevent the default Enter action
event.preventDefault(); // Prevent default action (e.g., form submission)
}
} }
}; };
// Handle the Send button click
const handleSendClick = () => { const handleSendClick = () => {
if (inputValue.trim() !== "") { if (inputValue.trim() !== "") {
onSendClick(inputValue, false); // Send message to parent component onSendClick(inputValue, false); // Send message
setInputValue(''); // Clear input after sending setInputValue(''); // Clear input after sending
} }
}; };
return ( return (
<div className="input" id="inputForm" ref={ref}> <div className="input" id="inputForm" ref={ref}>
{/* Input field for typing messages */}
<input <input
type="text" type="text"
name="user_message" name="user_message"
@ -47,13 +50,22 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
value={inputValue} value={inputValue}
onChange={handleInputChange} onChange={handleInputChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
className='textInputField' className="textInputField"
disabled={inputDisabled} // Disable when inputDisabled is true
/> />
<button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
<svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" /></svg> {/* Send button */}
<button type="button" onClick={handleSendClick} disabled={inputDisabled}>
<svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={20}>
<path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" />
</svg>
</button> </button>
{/* Microphone button */}
<button className={`microphone-button ${isRecording ? "red" : "var(--input-button-color)"}`} type="button" onClick={onMicClick}> <button className={`microphone-button ${isRecording ? "red" : "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
<svg style={{ fill: "var(--text-color)" }} viewBox="0 0 384 512" width={15}><path d="M192 0C139 0 96 43 96 96l0 160c0 53 43 96 96 96s96-43 96-96l0-160c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6c85.8-11.7 152-85.3 152-174.4l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-40z" /></svg> <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 384 512" width={15}>
<path d="M192 0C139 0 96 43 96 96l0 160c0 53 43 96 96 96s96-43 96-96l0-160c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6c85.8-11.7 152-85.3 152-174.4l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-40z" />
</svg>
</button> </button>
</div> </div>
); );

52
app/components/Models.tsx
View file

@ -123,50 +123,39 @@ const ModelSection: React.FC = () => {
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') { if (typeof localStorage !== 'undefined') {
const defaultValues = {
selectedModelDropdown: 'Offline Fast',
activeSelectedAIFunction: 'Code',
model: 'starcoder2',
radioSelection: 'None',
type: 'local',
};
setIsOpenSourceMode(localStorage.getItem("openSourceMode")) Object.entries(defaultValues).forEach(([key, value]) => {
const temp = localStorage.getItem("activeSelectedAIFunction") || "" if (!localStorage.getItem(key)) {
setActiveSelectedAIFunction(temp) localStorage.setItem(key, value);
if (!localStorage.getItem('selectedModelDropdown')) { }
localStorage.setItem("selectedModelDropdown", "Offline Fast") });
}
if (!localStorage.getItem("activeSelectedAIFunction")) { setIsOpenSourceMode(localStorage.getItem("openSourceMode"));
setActiveSelectedAIFunction('Code') setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || '');
localStorage.setItem('activeSelectedAIFunction', 'Code') setRadioSelection(localStorage.getItem("radioSelection") || '');
} setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
if (!localStorage.getItem("model")) {
localStorage.setItem("model", 'starcoder2')
}
if (!localStorage.getItem("radioSelection")) {
localStorage.setItem("radioSelection", 'None')
}
if (!localStorage.getItem("type")) {
localStorage.setItem("type", 'local')
}
const handleStorageChange = () => { const handleStorageChange = () => {
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
}; };
// Update immediately when localStorage changes // Update immediately when localStorage changes
if (typeof window !== 'undefined') { window.addEventListener('storage', handleStorageChange);
window.addEventListener('storage', handleStorageChange);
}
setRadioSelection(localStorage.getItem('radioSelection') || '');
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
// Cleanup listener on component unmount // Cleanup listener on component unmount
return () => { return () => {
if (typeof window !== 'undefined') { window.removeEventListener('storage', handleStorageChange);
window.removeEventListener('storage', handleStorageChange);
}
}; };
} }
}, []); // Dependency array can remain empty if you only want this to run on mount }, []);
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') { if (typeof localStorage !== 'undefined') {
@ -271,7 +260,6 @@ const ModelSection: React.FC = () => {
))} ))}
</select> </select>
</div> </div>
{/* Model Grid with Cards */} {/* Model Grid with Cards */}
<div className="grid"> <div className="grid">
{selectedAIFunction.map( {selectedAIFunction.map(

85
app/components/settings/Settings.tsx
View file

@ -15,6 +15,7 @@ import {
changeSettings, changeSettings,
createAccount, createAccount,
deleteAccount, deleteAccount,
getSettings
} from '../../backend/database'; } from '../../backend/database';
import ThemeDropdown from './DropDownTheme'; import ThemeDropdown from './DropDownTheme';
@ -298,6 +299,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
}; };
useEffect(() => { useEffect(() => {
let useName = localStorage.getItem("accountName")
let usePassword = localStorage.getItem("accountPassword")
if (useName && usePassword) {
importDatabase(useName, usePassword)
}
const savedTheme = localStorage.getItem('selectedTheme'); const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme) { if (savedTheme) {
setSelectedTheme(savedTheme); setSelectedTheme(savedTheme);
@ -305,6 +311,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
} }
}, []); // Runs only once when the component mounts }, []); // Runs only once when the component mounts
const importDatabase = async (useName : string, usePassword : string) => {
const databaseSettings = await getSettings(useName, usePassword)
importSettings(databaseSettings)
}
// Effect hooks to update localStorage whenever any state changes // Effect hooks to update localStorage whenever any state changes
useEffect(() => { useEffect(() => {
// Flatten nested objects // Flatten nested objects
@ -355,7 +365,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
} }
if (await createAccount(useName, useEmail, usePassword)) { if (await createAccount(useName, useEmail, usePassword)) {
if (await changeSettings(useName, usePassword, settings)) { if (await changeSettings(useName, usePassword, handleExport)) {
localStorage.setItem("currentName", useName) localStorage.setItem("currentName", useName)
localStorage.setItem("currentPassword", usePassword) localStorage.setItem("currentPassword", usePassword)
localStorage.setItem("currentEmail", useEmail) localStorage.setItem("currentEmail", useEmail)
@ -714,7 +724,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const handleExport = () => { const handleExport = () => {
const settingsData = exportSettings(); const settingsData = exportSettings();
// Create a blob and download the exported settings // Create a blob and download the exported settings
const blob = new Blob([settingsData], { type: 'application/json' }); const blob = new Blob([settingsData], { type: 'application/json' });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
@ -730,36 +739,52 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
//#region overall export //#region overall export
return ( return (
<div className="popup-overlay"> <div className="popup-overlay">
<div className="settings-content"> <div className="settings-content">
<div className="settings-container"> <div className="settings-container">
<div className="sidebar"> {/* Sidebar for desktop */}
<ul> <div className="sidebar">
<li onClick={() => setActiveSection('general')}>General</li> <ul>
<li onClick={() => setActiveSection('privacy')}>Privacy</li> <li onClick={() => setActiveSection('general')}>General</li>
<li onClick={() => setActiveSection('theme')}>Theme</li> <li onClick={() => setActiveSection('privacy')}>Privacy</li>
<li onClick={() => setActiveSection('foss')}>FOSS</li> <li onClick={() => setActiveSection('theme')}>Theme</li>
<li onClick={() => setActiveSection('account')}>Account</li> <li onClick={() => setActiveSection('foss')}>FOSS</li>
<li onClick={() => setActiveSection('api')}>API Keys</li> <li onClick={() => setActiveSection('account')}>Account</li>
<li onClick={() => setActiveSection('im/export')}>Import/Export</li> <li onClick={() => setActiveSection('api')}>API Keys</li>
</ul> <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
</div> </ul>
<div className="settings-main"> </div>
<h2>Settings for {accountName}</h2>
{renderSettingsContent()} <div className="settings-main">
<button className="close-popup" onClick={closeSettings}>Close</button> {/* Dropdown for selections in responsive mode */}
<button className="apply" onClick={async () => { <div className="settings-option dropdown">
getAllLocalStorageItems(); <div className="dropdown-header"><h2>Select a Setting</h2></div>
closeSettings(); <select onChange={(e) => setActiveSection(e.target.value)} value={activeSection}>
await changeSettings(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ???? <option value="general">General</option>
window.location.reload(); <option value="privacy">Privacy</option>
}}> <option value="theme">Theme</option>
Apply <option value="foss">FOSS</option>
</button> <option value="account">Account</option>
</div> <option value="api">API Keys</option>
<option value="im/export">Import/Export</option>
</select>
</div>
<h2>Settings for {accountName}</h2>
{renderSettingsContent()}
<button className="close-popup" onClick={closeSettings}>Close</button>
<button className="apply" onClick={async () => {
getAllLocalStorageItems();
closeSettings();
window.location.reload();
}}>
Apply
</button>
</div>
</div>
</div> </div>
</div>
</div> </div>
); );
}; };
export default Settings; export default Settings;

46
app/styles/Login.css
View file

@ -1,6 +1,4 @@
.popup-overlay{
/* Overlay for popup - full screen and centered */
.popup-overlay {
position: fixed; /* Fixed to cover the entire viewport */ position: fixed; /* Fixed to cover the entire viewport */
top: 0; /* Ensure it starts from the top */ top: 0; /* Ensure it starts from the top */
left: 0; left: 0;
@ -12,9 +10,7 @@
align-items: center; align-items: center;
z-index: 10000; /* Higher than the header to cover the screen */ z-index: 10000; /* Higher than the header to cover the screen */
} }
.popup-content{
/* Popup content box */
.popup-content {
background-color: var(--popup-background-color); /* Use variable for background color */ background-color: var(--popup-background-color); /* Use variable for background color */
color: var(--popup-text-color); /* Use variable for text color */ color: var(--popup-text-color); /* Use variable for text color */
padding: 30px; padding: 30px;
@ -24,9 +20,7 @@
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
position: relative; /* For positioning the close button */ position: relative; /* For positioning the close button */
} }
.popup-content input{
/* Input styles */
.popup-content input {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
@ -35,14 +29,11 @@
font-size: 16px; font-size: 16px;
transition: border-color 0.3s; transition: border-color 0.3s;
} }
.popup-content input:focus{
.popup-content input:focus {
border-color: var(--input-button-color); border-color: var(--input-button-color);
outline: none; /* Remove default outline */ outline: none; /* Remove default outline */
} }
.close-popup{
/* Close button styles */
.close-popup {
background: var(--close-button-color); /* Use variable for close button color */ background: var(--close-button-color); /* Use variable for close button color */
color: white; /* Use white for text color */ color: white; /* Use white for text color */
border: none; border: none;
@ -54,13 +45,10 @@
right: 10px; /* Distance from the right */ right: 10px; /* Distance from the right */
transition: background 0.3s; transition: background 0.3s;
} }
.close-popup:hover{
.close-popup:hover {
background: darkred; /* Optional hover effect */ background: darkred; /* Optional hover effect */
} }
.log-into-account{
/* Log In button styles */
.log-into-account {
background: green; /* Use variable for login button color */ background: green; /* Use variable for login button color */
color: white; color: white;
border: none; border: none;
@ -69,13 +57,10 @@
cursor: pointer; cursor: pointer;
margin-top: 20px; margin-top: 20px;
} }
.popup-footer{
/* Footer section for popups */
.popup-footer {
margin-top: 15px; margin-top: 15px;
} }
.popup-footer button{
.popup-footer button {
margin-right: 10px; margin-right: 10px;
padding: 8px 15px; padding: 8px 15px;
background-color: var(--input-button-color); background-color: var(--input-button-color);
@ -84,22 +69,17 @@
border-radius: 5px; border-radius: 5px;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.popup-footer button:hover{
.popup-footer button:hover {
background-color: var(--input-button-hover-color); background-color: var(--input-button-hover-color);
} }
.popup-footer a{
.popup-footer a {
color: var(--user-message-color); color: var(--user-message-color);
text-decoration: none; text-decoration: none;
} }
.popup-footer a:hover{
.popup-footer a:hover {
text-decoration: underline; text-decoration: underline;
} }
.popup-content p{
/* Paragraph styles within popup */
.popup-content p {
color: var(--popup-text-color); /* Use variable for paragraph text color */ color: var(--popup-text-color); /* Use variable for paragraph text color */
margin: 10px; margin: 10px;
} }

28
app/styles/Settings.css
View file

@ -10,15 +10,12 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.settings-main h2 { .settings-main h2 {
margin-bottom: 1em; margin-bottom: 1em;
} }
.settings-main p { .settings-main p {
padding-bottom: 7px; padding-bottom: 7px;
} }
/* Main container for the settings */ /* Main container for the settings */
.settings-container { .settings-container {
display: grid; display: grid;
@ -29,7 +26,6 @@
height: 100%; height: 100%;
/* Ensure it takes full height */ /* Ensure it takes full height */
} }
/* Settings content */ /* Settings content */
.settings-content { .settings-content {
background: var(--history-background-color); background: var(--history-background-color);
@ -49,7 +45,6 @@
flex-direction: column; flex-direction: column;
/* Flexbox for vertical stacking */ /* Flexbox for vertical stacking */
} }
/* Sidebar styles */ /* Sidebar styles */
.sidebar { .sidebar {
background: var(--settings-background-color); background: var(--settings-background-color);
@ -66,7 +61,6 @@
height: 100%; height: 100%;
/* Ensures sidebar takes full height */ /* Ensures sidebar takes full height */
} }
/* Sidebar item styles */ /* Sidebar item styles */
.sidebar ul { .sidebar ul {
list-style-type: none; list-style-type: none;
@ -78,7 +72,6 @@
flex-grow: 1; flex-grow: 1;
/* Allows the list to take available space */ /* Allows the list to take available space */
} }
.sidebar li { .sidebar li {
margin: 10px 0; margin: 10px 0;
cursor: pointer; cursor: pointer;
@ -86,17 +79,14 @@
border-radius: 5px; border-radius: 5px;
transition: background 0.3s; transition: background 0.3s;
} }
.sidebar li:hover { .sidebar li:hover {
background: var(--input-button-hover-color); background: var(--input-button-hover-color);
/* Highlight on hover */ /* Highlight on hover */
} }
.sidebar li.active { .sidebar li.active {
background: var(--button-hover-background-color); background: var(--button-hover-background-color);
/* Active section highlight */ /* Active section highlight */
} }
/* Main settings area */ /* Main settings area */
.settings-main { .settings-main {
grid-column: 2; grid-column: 2;
@ -110,7 +100,6 @@
flex-direction: column; flex-direction: column;
/* Stack content vertically */ /* Stack content vertically */
} }
/* Close button positioning */ /* Close button positioning */
.close-popup { .close-popup {
background: var(--close-button-color); background: var(--close-button-color);
@ -129,7 +118,6 @@
/* Distance from the right */ /* Distance from the right */
transition: background 0.3s; transition: background 0.3s;
} }
/* Close button positioning */ /* Close button positioning */
.apply { .apply {
background: var(--apply-button-color); background: var(--apply-button-color);
@ -148,13 +136,10 @@
/* Distance from the right */ /* Distance from the right */
transition: background 0.3s; transition: background 0.3s;
} }
.close-popup:hover { .close-popup:hover {
background: darkred; background: darkred;
/* Optional hover effect */ /* Optional hover effect */
} }
/* Additional styles for inputs and options */ /* Additional styles for inputs and options */
.settings-option { .settings-option {
margin-bottom: 20px; margin-bottom: 20px;
@ -164,14 +149,12 @@
border-bottom: 1px solid var(--input-border-color); border-bottom: 1px solid var(--input-border-color);
/* Optional, creates a separator between options */ /* Optional, creates a separator between options */
} }
.settings-option:last-child { .settings-option:last-child {
margin-bottom: 0; margin-bottom: 0;
/* Removes bottom margin from last option */ /* Removes bottom margin from last option */
border-bottom: none; border-bottom: none;
/* Removes separator from last option */ /* Removes separator from last option */
} }
.settings-option input[type="text"], .settings-option input[type="text"],
.settings-option input[type="email"], .settings-option input[type="email"],
.settings-option input[type="password"], .settings-option input[type="password"],
@ -188,33 +171,28 @@
margin-bottom: 10px; margin-bottom: 10px;
/* Adds spacing between inputs */ /* Adds spacing between inputs */
} }
/* Optional additional spacing for labels */ /* Optional additional spacing for labels */
.settings-option label { .settings-option label {
margin-bottom: 5px; margin-bottom: 5px;
display: block; display: block;
font-weight: bold; font-weight: bold;
} }
.export-button { .export-button {
background-color: var(--button-hover-background-color); background-color: var(--button-hover-background-color);
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
border-radius: 10px; border-radius: 10px;
} }
.import-file { .import-file {
background-color: var(--button-hover-background-color); background-color: var(--button-hover-background-color);
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
.slider { .slider {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 10px; margin-top: 10px;
} }
.slider-option { .slider-option {
cursor: pointer; cursor: pointer;
padding: 10px; padding: 10px;
@ -222,22 +200,22 @@
border-radius: 5px; border-radius: 5px;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.slider-option.active { .slider-option.active {
background-color: #007bff; background-color: #007bff;
/* Change to your active color */ /* Change to your active color */
color: white; color: white;
border-color: #007bff; border-color: #007bff;
} }
input[type="radio"] { input[type="radio"] {
display: none; display: none;
/* Hide the default radio buttons */ /* Hide the default radio buttons */
} }
.slider-option.disabled { .slider-option.disabled {
opacity: 0.5; opacity: 0.5;
/* Make the option appear greyed out */ /* Make the option appear greyed out */
pointer-events: none; pointer-events: none;
/* Prevent clicks */ /* Prevent clicks */
} }
.dropdown{
display: none;
}

15
app/styles/container.css
View file

@ -5,8 +5,7 @@
height: 90dvh; height: 90dvh;
padding-top: 1dvh; padding-top: 1dvh;
} }
.left-panel{
.left-panel {
width: 25vw; /* Adjust as needed */ width: 25vw; /* Adjust as needed */
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */ transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
background-color: var(--left-panel-background-color); /* Use variable for background color */ background-color: var(--left-panel-background-color); /* Use variable for background color */
@ -14,23 +13,17 @@
margin-left: 0; margin-left: 0;
padding-right: 1em; padding-right: 1em;
} }
.left-panel.hidden{
.left-panel.hidden {
opacity: 0; /* Fade out when hidden */ opacity: 0; /* Fade out when hidden */
width: 0; /* Collapse width to 0 */ width: 0; /* Collapse width to 0 */
visibility: hidden; /* Hide visibility while collapsing */ visibility: hidden; /* Hide visibility while collapsing */
} }
.conversation-container{
.conversation-container {
flex: 1; flex: 1;
transition: margin-left 0.3s ease; /* Smooth margin adjustment */ transition: margin-left 0.3s ease; /* Smooth margin adjustment */
background-color: var(--conversation-background-color); /* Use variable for background color */ background-color: var(--conversation-background-color); /* Use variable for background color */
border-radius: 1em 0 0 0; border-radius: 1em 0 0 0;
} }
.conversation-container.collapsed{
.conversation-container.collapsed {
margin-left: 1vw; /* Space for the left panel */ margin-left: 1vw; /* Space for the left panel */
} }

95
app/styles/credit.css
View file

@ -1,52 +1,45 @@
/* Styling for the credits container */ /* Styling for the credits container */
.credits-container { .credits-container{
padding: 2rem; padding: 2rem;
} }
.credits-section{
.credits-section { max-width: 900px;
max-width: 900px; height: 80dvh;
height: 80dvh; margin: auto;
margin: auto; background: var(--doc-background-color); /* Use variable for background */
background: var(--doc-background-color); /* Use variable for background */ padding: 2rem;
padding: 2rem; border-radius: 8px;
border-radius: 8px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); overflow-y: scroll;
overflow-y: scroll; }
} .title{
font-size: calc(var(--font-size)*2);
.title { color: var(--doc-title-color); /* Use variable for title color */
font-size: calc(var(--font-size)*2); margin-bottom: 1.5rem;
color: var(--doc-title-color); /* Use variable for title color */ }
margin-bottom: 1.5rem; .subtitle{
} font-size: calc(var(--font-size)*1.5);
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
.subtitle { margin-top: 2rem;
font-size: calc(var(--font-size)*1.5); margin-bottom: 1rem;
color: var(--doc-subtitle-color); /* Use variable for subtitle color */ }
margin-top: 2rem; .paragraph{
margin-bottom: 1rem; font-size: calc(var(--font-size));
} color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem;
.paragraph { line-height: 1.6;
font-size: calc(var(--font-size)); }
color: var(--doc-paragraph-color); /* Use variable for paragraph color */ /* Styling for the credit buttons */
margin-bottom: 1.5rem; .credit-btn{
line-height: 1.6; display: inline-block;
} padding: 10px 15px;
margin: 10px 5px;
/* Styling for the credit buttons */ background-color: var(--button-background-color); /* Button background */
.credit-btn { color: var(--button-text-color); /* Button text */
display: inline-block; text-decoration: none;
padding: 10px 15px; border-radius: 5px;
margin: 10px 5px; transition: background-color 0.3s ease;
background-color: var(--button-background-color); /* Button background */ }
color: var(--button-text-color); /* Button text */ .credit-btn:hover{
text-decoration: none; background-color: var(--button-hover-background-color); /* Button hover */
border-radius: 5px; }
transition: background-color 0.3s ease;
}
.credit-btn:hover {
background-color: var(--button-hover-background-color); /* Button hover */
}

18
app/styles/doc.css
View file

@ -1,11 +1,9 @@
/* styles.css */ /* styles.css */
/* Styling for the documentation container */ /* Styling for the documentation container */
.documentation-container { .documentation-container{
padding: 2rem; padding: 2rem;
} }
.documentation-section{
.documentation-section {
max-width: 900px; max-width: 900px;
height: 80dvh; height: 80dvh;
margin: auto; margin: auto;
@ -15,28 +13,24 @@
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
overflow-y: scroll; overflow-y: scroll;
} }
.title{
.title {
font-size: calc(var(--font-size)*2); font-size: calc(var(--font-size)*2);
color: var(--doc-title-color); /* Use variable for title color */ color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.subtitle{
.subtitle {
font-size: calc(var(--font-size)*1.5); font-size: calc(var(--font-size)*1.5);
color: var(--doc-subtitle-color); /* Use variable for subtitle color */ color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.subsection-title{
.subsection-title {
font-size: calc(var(--font-size)*1.25); font-size: calc(var(--font-size)*1.25);
color: var(--doc-subsection-title-color); /* Use variable for subsection title color */ color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
margin-top: 1.5rem; margin-top: 1.5rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.paragraph{
.paragraph {
font-size: calc(var(--font-size)); font-size: calc(var(--font-size));
color: var(--doc-paragraph-color); /* Use variable for paragraph color */ color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem; margin-bottom: 1.5rem;

20
app/styles/faq.css
View file

@ -1,13 +1,12 @@
/* Make sure the parent container of #faq takes up the full viewport height */ /* Make sure the parent container of #faq takes up the full viewport height */
.faq-container { .faq-container{
display: flex; display: flex;
justify-content: center; /* Center horizontally */ justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */ align-items: center; /* Center vertically */
height: 100vh; /* Full viewport height */ height: 100vh; /* Full viewport height */
padding: 0 10px; /* Optional padding to ensure spacing on small screens */ padding: 0 10px; /* Optional padding to ensure spacing on small screens */
} }
#faq{
#faq {
max-width: 800px; max-width: 800px;
width: 90%; width: 90%;
padding: 20px; padding: 20px;
@ -18,34 +17,29 @@
margin: 2rem auto; margin: 2rem auto;
height: 80vh; height: 80vh;
} }
#faq h2{
#faq h2 {
text-align: center; text-align: center;
color: var(--faq-heading-color); /* Use variable for heading color */ color: var(--faq-heading-color); /* Use variable for heading color */
font-size: 2em; font-size: 2em;
margin-bottom: 20px; margin-bottom: 20px;
} }
.faq-item{
.faq-item {
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: var(--faq-item-background-color); /* Use variable for item background */ background-color: var(--faq-item-background-color); /* Use variable for item background */
transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out;
} }
.faq-item h3{
.faq-item h3 {
color: var(--faq-item-heading-color); /* Use variable for item heading color */ color: var(--faq-item-heading-color); /* Use variable for item heading color */
margin-bottom: 10px; margin-bottom: 10px;
font-size: 1.5em; font-size: 1.5em;
} }
.faq-item p{
.faq-item p {
color: var(--faq-item-text-color); /* Use variable for item text color */ color: var(--faq-item-text-color); /* Use variable for item text color */
font-size: 1.1em; font-size: 1.1em;
line-height: 1.5; line-height: 1.5;
} }
.faq-item:hover{
.faq-item:hover {
background-color: var(--faq-item-hover-background-color); /* Use variable for hover background */ background-color: var(--faq-item-hover-background-color); /* Use variable for hover background */
} }

41
app/styles/fonts.css
View file

@ -1,69 +1,56 @@
@font-face { @font-face{
font-family: 'Inconsolata'; font-family: 'Inconsolata';
src: url('/fonts/serious/Inconsolata/Inconsolata-VariableFont_wdth,wght.ttf') format('truetype'); src: url('/fonts/serious/Inconsolata/Inconsolata-VariableFont_wdth,wght.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Merriweather'; font-family: 'Merriweather';
src: url('/fonts/serious/Merriweather/Merriweather-Regular.tff') format('truetype'); src: url('/fonts/serious/Merriweather/Merriweather-Regular.tff') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Noto Sans'; font-family: 'Noto Sans';
src: url('/fonts/serious/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf') format('truetype'); src: url('/fonts/serious/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Noto Serif'; font-family: 'Noto Serif';
src: url('/fonts/serious/Noto_Serif/NotoSerif-VariableFont_wdth\,wght.ttf') format('truetype'); src: url('/fonts/serious/Noto_Serif/NotoSerif-VariableFont_wdth\,wght.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Playfair Display'; font-family: 'Playfair Display';
src: url('/fonts/serious/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype'); src: url('/fonts/serious/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Poppins'; font-family: 'Poppins';
src: url('/fonts/serious/Poppins/Poppins-Regular.ttf') format('truetype'); src: url('/fonts/serious/Poppins/Poppins-Regular.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/fonts/serious/Roboto/Roboto-Regular.ttf') format('truetype'); src: url('/fonts/serious/Roboto/Roboto-Regular.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Ubuntu'; font-family: 'Ubuntu';
src: url('/fonts/serious/Ubuntu/Ubuntu-Regular.ttf') format('truetype'); src: url('/fonts/serious/Ubuntu/Ubuntu-Regular.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Bangers'; font-family: 'Bangers';
src: url('/fonts/comic-sans-but-better/Bangers/Bangers-Regular.ttf') format('truetype'); src: url('/fonts/comic-sans-but-better/Bangers/Bangers-Regular.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Caveat'; font-family: 'Caveat';
src: url('/fonts/comic-sans-but-better/Caveat/Caveat-VariableFont_wght.ttf') format('truetype'); src: url('/fonts/comic-sans-but-better/Caveat/Caveat-VariableFont_wght.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Frederika the Great'; font-family: 'Frederika the Great';
src: url('/fonts/comic-sans-but-better/Fredericka_the_Great/FrederickatheGreat-Regular.ttf') format('truetype'); src: url('/fonts/comic-sans-but-better/Fredericka_the_Great/FrederickatheGreat-Regular.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Rock Salt'; font-family: 'Rock Salt';
src: url('/fonts/RockSalt.ttf') format('truetype'); src: url('/fonts/RockSalt.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Sofadi One'; font-family: 'Sofadi One';
src: url('/fonts/comic-sans-but-better/Sofadi_One/SofadiOne-Regular.ttf') format('truetype'); src: url('/fonts/comic-sans-but-better/Sofadi_One/SofadiOne-Regular.ttf') format('truetype');
} }
@font-face{
@font-face {
font-family: 'Zilla Slab Highlight'; font-family: 'Zilla Slab Highlight';
src: url('/fonts/comic-sans-but-better/Zilla_Slab_Highlight/ZillaSlabHighlight-Regular.ttf') format('truetype'); src: url('/fonts/comic-sans-but-better/Zilla_Slab_Highlight/ZillaSlabHighlight-Regular.ttf') format('truetype');
} }

56
app/styles/global.css
View file

@ -1,79 +1,59 @@
body { body{
height: 100dvh; height: 100dvh;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
/* Chrome, Edge, and Safari */ /* Chrome, Edge, and Safari */
::-webkit-scrollbar { ::-webkit-scrollbar{
width: 12px; width: 12px; /* Adjust width for horizontal and vertical scrollbars */
/* Adjust width for horizontal and vertical scrollbars */
} }
::-webkit-scrollbar-track{
::-webkit-scrollbar-track { background: #f0f0f0; /* Background of the scrollbar track */
background: #f0f0f0;
/* Background of the scrollbar track */
} }
::-webkit-scrollbar-thumb{
::-webkit-scrollbar-thumb { background-color: #888; /* Color of the draggable part (thumb) */
background-color: #888; border-radius: 10px; /* Rounded corners */
/* Color of the draggable part (thumb) */ border: 2px solid #f0f0f0; /* Space around the thumb */
border-radius: 10px;
/* Rounded corners */
border: 2px solid #f0f0f0;
/* Space around the thumb */
} }
::-webkit-scrollbar-thumb:hover{
::-webkit-scrollbar-thumb:hover { background-color: #555; /* Thumb color on hover */
background-color: #555;
/* Thumb color on hover */
} }
body{
body {
background-color: var(--background-color); background-color: var(--background-color);
color: var(--text-color); color: var(--text-color);
font-family: var(--font-family); font-family: var(--font-family);
font-size: var(--font-size); font-size: var(--font-size);
} }
header{
header {
background-color: var(--header-background-color); background-color: var(--header-background-color);
color: var(--header-text-color); color: var(--header-text-color);
} }
button{
button {
background-color: var(--button-background-color); background-color: var(--button-background-color);
color: var(--text-color); color: var(--text-color);
border: 1px solid var(--input-border-color); border: 1px solid var(--input-border-color);
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
button:hover{
button:hover {
background-color: var(--button-hover-background-color); background-color: var(--button-hover-background-color);
} }
input{
input {
background-color: var(--input-background-color); background-color: var(--input-background-color);
border: 1px solid var(--input-border-color); border: 1px solid var(--input-border-color);
color: var(--text-color); color: var(--text-color);
} }
input:hover{
input:hover {
border-color: var(--button-hover-background-color); border-color: var(--button-hover-background-color);
} }
select{ select{
background-color: var(--input-background-color); background-color: var(--input-background-color);
} }
h1, h2, h3, h4, p{ h1, h2, h3, h4, p{
color: var(--text-color); color: var(--text-color);
font-family: var(--font-family); font-family: var(--font-family);
font-weight: 500; font-weight: 500;
} }
p{ p{
font-weight: 400; font-weight: 400;
font-size: var(--font-size) font-size: var(--font-size);
} }

40
app/styles/header.css
View file

@ -1,4 +1,4 @@
header { header{
position: relative; position: relative;
padding: 0 20px; padding: 0 20px;
width: 100%; width: 100%;
@ -9,36 +9,32 @@ header {
font-size: 1em; font-size: 1em;
z-index: 999; z-index: 999;
} }
/* Hamburger button styles */ /* Hamburger button styles */
.hamburger { .hamburger{
position: absolute; position: absolute;
left: 5vw; left: 5vw;
display: flex; /* Always show hamburger button */ display: flex; /* Always show hamburger button */
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
} }
.hamburger span{
.hamburger span {
width: 25px; width: 25px;
height: 3px; height: 3px;
background-color: white; background-color: white;
margin: 4px; margin: 4px;
transition: 0.3s; transition: 0.3s;
} }
.hamburger.open span:nth-child(1){
.hamburger.open span:nth-child(1) {
transform: rotate(45deg) translate(5px, 10px); transform: rotate(45deg) translate(5px, 10px);
} }
.hamburger.open span:nth-child(2) { .hamburger.open span:nth-child(2){
opacity: 0; opacity: 0;
} }
.hamburger.open span:nth-child(3) { .hamburger.open span:nth-child(3){
transform: rotate(-45deg) translate(5px, -10px); transform: rotate(-45deg) translate(5px, -10px);
} }
/* Navigation links (hidden in header, shown in dropdown) */ /* Navigation links (hidden in header, shown in dropdown) */
.nav-links { .nav-links{
display: none; /* Default hidden */ display: none; /* Default hidden */
position: absolute; position: absolute;
top: 10vh; /* Adjust as needed */ top: 10vh; /* Adjust as needed */
@ -51,13 +47,11 @@ header {
padding: 10px auto; padding: 10px auto;
margin: auto; margin: auto;
} }
.nav-links.active{
.nav-links.active {
display: flex; /* Show when active */ display: flex; /* Show when active */
height: fit-content; height: fit-content;
} }
.nav-btn{
.nav-btn {
background-color: var(--input-button-color); background-color: var(--input-button-color);
border: none; border: none;
font-size: 0.9em; font-size: 0.9em;
@ -69,13 +63,11 @@ header {
text-align: center; /* Center text */ text-align: center; /* Center text */
margin: 4px auto; margin: 4px auto;
} }
.nav-btn:hover{
.nav-btn:hover {
background-color: var(--input-button-hover-color); background-color: var(--input-button-hover-color);
} }
/* Logo styles */ /* Logo styles */
.header-logo { .header-logo{
width: 250px; width: 250px;
height: 5vh; height: 5vh;
background-image: url(../../public/img/logo.png); background-image: url(../../public/img/logo.png);
@ -85,9 +77,8 @@ header {
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
/* Login button styles */ /* Login button styles */
.login-button-container { .login-button-container{
position: absolute; position: absolute;
top: 0.1vh; top: 0.1vh;
right: 1vw; right: 1vw;
@ -95,8 +86,7 @@ header {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.header-login-button{
.header-login-button {
height: 100%; height: 100%;
width: max-content; width: max-content;
font-size: var(--font-size); font-size: var(--font-size);
@ -112,11 +102,9 @@ header {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.header-login-button:hover{
.header-login-button:hover {
background-color: var(--input-button-hover-color); background-color: var(--input-button-hover-color);
} }
.show-hide-btn{ .show-hide-btn{
display: flex; display: flex;
align-items: center; align-items: center;

18
app/styles/history.css
View file

@ -1,4 +1,4 @@
.history-background { .history-background{
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/2; grid-row: 1/2;
height: 35dvh; height: 35dvh;
@ -9,35 +9,29 @@
margin-right: 0; margin-right: 0;
border-radius: 1em; border-radius: 1em;
} }
.history{
.history {
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
padding-right: 10px; padding-right: 10px;
} }
.history ul{
.history ul {
list-style: none; list-style: none;
} }
.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%; width: 100%;
} }
.history ul li a{
.history ul li a {
display: block; display: block;
text-decoration: none; text-decoration: none;
color: var(--text-color); /* Use variable for link text color */ color: var(--text-color); /* Use variable for link text color */
width: 100%; width: 100%;
padding: 5px; padding: 5px;
} }
.history ul li a:hover{
.history ul li a:hover {
background-color: var(--input-button-hover-color); background-color: var(--input-button-hover-color);
} }
.history-models{ .history-models{
position: relative; position: relative;
height: 86dvh; height: 86dvh;

33
app/styles/input.css
View file

@ -1,15 +1,11 @@
/* Input Section */ .input{
.input {
border-radius: 8px; border-radius: 8px;
background-color: var(--input-background-color); background-color: var(--input-background-color);
padding: 1em; padding: 1em 0 1em 0.5em;
padding-left: 0.5em;
padding-right: 0;
margin: 0 10px; margin: 0 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: auto;
height: 10dvh; height: 10dvh;
position: absolute; position: absolute;
left: 0.25vw; left: 0.25vw;
@ -18,8 +14,7 @@
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
z-index: 600; z-index: 600;
} }
.input input{
.input input {
flex-grow: 1; flex-grow: 1;
padding: 5px; padding: 5px;
font-size: 1em; font-size: 1em;
@ -32,20 +27,16 @@
transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out;
height: 7vh; height: 7vh;
} }
.textInputField::placeholder{
.textInputField::placeholder {
color: var(--text-color); /* Change to desired placeholder color */ color: var(--text-color); /* Change to desired placeholder color */
opacity: 1; /* Ensures full opacity (optional) */ opacity: 1; /* Ensures full opacity (optional) */
} }
.input input:focus{
.input input:focus {
border-color: var(--input-button-hover-color); border-color: var(--input-button-hover-color);
} }
.input button{
.input button {
padding: 5px; padding: 5px;
margin: 5px; margin: 5px 5px 5px 0;
margin-left: 0;
background-color: var(--input-button-color); background-color: var(--input-button-color);
color: var(--user-message-text-color); /* Use variable for button text color */ color: var(--user-message-text-color); /* Use variable for button text color */
border: none; border: none;
@ -61,28 +52,22 @@
position: relative; position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
} }
.input button img{
.input button img {
height: 20px; height: 20px;
} }
.input button:hover{
.input button:hover {
background-color: var(--input-button-hover-color); background-color: var(--input-button-hover-color);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
} }
.microphone-button.red{ .microphone-button.red{
background-color: var(--close-button-color); background-color: var(--close-button-color);
} }
.microphone-button.green{ .microphone-button.green{
background-color: var(--button-background-color); background-color: var(--button-background-color);
} }
.microphone-button.red:hover{ .microphone-button.red:hover{
background-color: var(--close-button-hover-color); background-color: var(--close-button-hover-color);
} }
.microphone-button.green:hover{ .microphone-button.green:hover{
background-color: var(--input-button-hover-color); background-color: var(--input-button-hover-color);
} }

19
app/styles/models.css
View file

@ -13,7 +13,6 @@
border-radius: 1em; border-radius: 1em;
height: 45dvh; height: 45dvh;
} }
.models { .models {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -21,7 +20,6 @@
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
.models .title { .models .title {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -29,24 +27,20 @@
font-size: 1.5em; font-size: 1.5em;
margin-bottom: 0; margin-bottom: 0;
} }
.model-dropdown { .model-dropdown {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 1em; /* Space between dropdown and models */ margin-bottom: 1em; /* Space between dropdown and models */
} }
.model-dropdown label { .model-dropdown label {
margin-right: 0.5em; /* Space between label and dropdown */ margin-right: 0.5em; /* Space between label and dropdown */
} }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 1.5vh; gap: 1.5vh;
width: 100%; /* Ensure grid takes full width */ width: 100%; /* Ensure grid takes full width */
} }
.model-box { .model-box {
display: flex; display: flex;
align-items: center; align-items: center;
@ -59,12 +53,10 @@
width: 18vh; width: 18vh;
margin: auto; /* Center each model box in the grid cell */ margin: auto; /* Center each model box in the grid cell */
} }
.model-box.selected { .model-box.selected {
box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */ box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */
border-color: var(--apply-button-hover-color); border-color: var(--apply-button-hover-color);
} }
.overlay { .overlay {
position: absolute; position: absolute;
left: 0; left: 0;
@ -81,7 +73,6 @@
opacity: 0; opacity: 0;
border-radius: 5%; border-radius: 5%;
} }
.overlay img { .overlay img {
align-self: flex-end; align-self: flex-end;
justify-self: end; justify-self: end;
@ -91,18 +82,15 @@
right: 15px; right: 15px;
bottom: 15px; bottom: 15px;
} }
.model-box:hover .overlay { .model-box:hover .overlay {
opacity: 1; opacity: 1;
} }
/* Model background styles */ /* Model background styles */
.code-model { .code-model {
background-image: url(/img/code.jpg); background-image: url(/img/code.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
.math-model { .math-model {
background-image: url(/img/math.jpg); background-image: url(/img/math.jpg);
background-color: var(--background-color); background-color: var(--background-color);
@ -110,7 +98,6 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
} }
.language-model { .language-model {
background-image: url(/img/language.jpg); background-image: url(/img/language.jpg);
background-color: #72cce4; background-color: #72cce4;
@ -118,8 +105,6 @@
background-size: contain; background-size: contain;
background-position: center; background-position: center;
} }
.weather-model { .weather-model {
background-image: url(/img/weather.jpg); background-image: url(/img/weather.jpg);
background-color: #72cce4; background-color: #72cce4;
@ -127,7 +112,6 @@
background-size: contain; background-size: contain;
background-position: center; background-position: center;
} }
.custom1-model, .custom1-model,
.custom2-model { .custom2-model {
background-image: url(/img/default.jpg); background-image: url(/img/default.jpg);
@ -135,20 +119,17 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.model-dropdown { .model-dropdown {
display: flex; display: flex;
flex-direction: column; /* Stack label and dropdown */ flex-direction: column; /* Stack label and dropdown */
align-items: center; /* Center the content */ align-items: center; /* Center the content */
margin-bottom: 1em; /* Space between dropdown and models */ margin-bottom: 1em; /* Space between dropdown and models */
} }
.model-dropdown label { .model-dropdown label {
margin-bottom: 0.5em; /* Space between label and dropdown */ margin-bottom: 0.5em; /* Space between label and dropdown */
font-size: large; /* Increase font size for visibility */ font-size: large; /* Increase font size for visibility */
color: var(--text-color); /* Use variable for text color */ color: var(--text-color); /* Use variable for text color */
} }
#model-select { #model-select {
padding: 0.5em; /* Padding for better touch targets */ padding: 0.5em; /* Padding for better touch targets */
border-radius: 5px; /* Rounded corners */ border-radius: 5px; /* Rounded corners */

24
app/styles/output.css
View file

@ -16,7 +16,6 @@
height: 85dvh; height: 85dvh;
position: relative; position: relative;
} }
#conversation { #conversation {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -27,7 +26,6 @@
border-radius: 10px; border-radius: 10px;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
/* Message Bubbles */ /* Message Bubbles */
.user-message, .ai-message { .user-message, .ai-message {
padding: 10px; padding: 10px;
@ -37,23 +35,19 @@
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.user-message { .user-message {
background-color: var(--user-message-background-color); background-color: var(--user-message-background-color);
align-self: flex-end; align-self: flex-end;
color: var(--user-message-text-color); color: var(--user-message-text-color);
} }
.ai-message { .ai-message {
background-color: var(--ai-message-background-color); background-color: var(--ai-message-background-color);
align-self: flex-start; align-self: flex-start;
color: var(--ai-message-text-color); color: var(--ai-message-text-color);
} }
.ai-message a { .ai-message a {
color: var(--text-color); color: var(--text-color);
} }
.ai-message table { .ai-message table {
display: block; /* Treat the table as a block element */ display: block; /* Treat the table as a block element */
position: relative; position: relative;
@ -67,31 +61,24 @@
border-radius: 4px; /* Optional: Add border radius similar to pre/code */ border-radius: 4px; /* Optional: Add border radius similar to pre/code */
margin-top: 5px; margin-top: 5px;
} }
.ai-message th { .ai-message th {
background-color: var(--user-message-background-color); background-color: var(--user-message-background-color);
align-items: center; align-items: center;
padding: 5px; padding: 5px;
} }
.ai-message td { .ai-message td {
align-items: center; align-items: center;
padding: 5px; padding: 5px;
} }
.ai-message img { .ai-message img {
max-width: 80%; max-width: 80%;
} }
.ai-message a:hover { .ai-message a:hover {
filter: brightness(70%); filter: brightness(70%);
} }
.ai-message li { .ai-message li {
margin-left: 1em; margin-left: 1em;
} }
.ai-message code, .ai-message pre { .ai-message code, .ai-message pre {
overflow-x: auto; overflow-x: auto;
white-space: pre; white-space: pre;
@ -101,12 +88,10 @@
background-color: var(--code-background-color); background-color: var(--code-background-color);
border-radius: 4px; border-radius: 4px;
} }
/* Button Container */ /* Button Container */
.button-container { .button-container {
display: flex; display: flex;
} }
.button-container button { .button-container button {
background: none; background: none;
border: none; border: none;
@ -117,18 +102,15 @@
height: 40px; height: 40px;
width: 40px; width: 40px;
} }
.button-container button:hover { .button-container button:hover {
background-color: var(--button-hover-background-color); background-color: var(--button-hover-background-color);
} }
.tooltip { .tooltip {
position: relative; position: relative;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
z-index: 900; z-index: 900;
} }
.tooltip .tooltiptext { .tooltip .tooltiptext {
visibility: hidden; visibility: hidden;
background-color: var(--user-message-background-color); background-color: var(--user-message-background-color);
@ -137,17 +119,14 @@
padding: 5px; padding: 5px;
border-radius: 4px; border-radius: 4px;
font-size: calc(var(--font-size) * 0.8); font-size: calc(var(--font-size) * 0.8);
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
white-space: nowrap; white-space: nowrap;
opacity: 0; opacity: 0;
transition: all 0.3s; transition: all 0.3s;
} }
.tooltip .tooltiptext::after { .tooltip .tooltiptext::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -158,19 +137,16 @@
border-style: solid; border-style: solid;
border-color: transparent transparent var(--user-message-background-color) transparent; border-color: transparent transparent var(--user-message-background-color) transparent;
} }
.tooltip:hover .tooltiptext { .tooltip:hover .tooltiptext {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
#copiedText { #copiedText {
margin-top: 1em; margin-top: 1em;
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
} }
#scrollToBottom { #scrollToBottom {
scroll-behavior: smooth; scroll-behavior: smooth;
visibility: hidden; visibility: hidden;

50
app/styles/responsive.css
View file

@ -5,7 +5,6 @@
padding: 0; padding: 0;
border-radius: none; border-radius: none;
} }
/* Header styles */ /* Header styles */
header { header {
top: 0; top: 0;
@ -14,7 +13,6 @@
padding-top: 0; padding-top: 0;
width: 100%; width: 100%;
} }
/* Container styles */ /* Container styles */
.container { .container {
display: flex; display: flex;
@ -24,26 +22,22 @@
margin: 0; margin: 0;
padding: 1dvh 0 0 0; padding: 1dvh 0 0 0;
} }
/* Left panel styles */ /* Left panel styles */
.left-panel { .left-panel {
display: hidden; /* Initially hidden */ display: hidden; /* Initially hidden */
min-width: 100%; /* Takes full width when visible */ min-width: 100%; /* Takes full width when visible */
margin: 0; margin: 0;
} }
.left-panel.visible { .left-panel.visible {
display: block; display: block;
height: min-content; height: min-content;
} }
/* Conversation container styles */ /* Conversation container styles */
.conversation-container { .conversation-container {
min-width: 100%; min-width: 100%;
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
} }
.conversation-container.collapsed { .conversation-container.collapsed {
width: 0; width: 0;
padding: 0; padding: 0;
@ -51,25 +45,21 @@
overflow: hidden; overflow: hidden;
display: hidden; display: hidden;
} }
.conversation-container.expanded { .conversation-container.expanded {
min-width: 100%; min-width: 100%;
margin-left: 0; margin-left: 0;
border-radius: none; border-radius: none;
height: 10vh; height: 10vh;
} }
/* Grid styles */ /* Grid styles */
.grid { .grid {
grid-template-columns: 1fr; /* One item per line */ grid-template-columns: 1fr; /* One item per line */
} }
/* Model box styles */ /* Model box styles */
.model-box { .model-box {
max-width: none; /* Remove max-width */ max-width: none; /* Remove max-width */
margin: 0 auto; /* Center each model-box */ margin: 0 auto; /* Center each model-box */
} }
/* Input styles */ /* Input styles */
.input { .input {
grid-column: 1 / -1; grid-column: 1 / -1;
@ -82,7 +72,6 @@
left: 2vw; left: 2vw;
justify-content: flex-start; justify-content: flex-start;
} }
.input input { .input input {
font-size: 1em; /* Adjust font size */ font-size: 1em; /* Adjust font size */
max-width: 70%; max-width: 70%;
@ -90,7 +79,6 @@
border-color: var(--input-border-color); /* Use variable for input border */ border-color: var(--input-border-color); /* Use variable for input border */
color: var(--text-color); /* Use variable for text color */ color: var(--text-color); /* Use variable for text color */
} }
.input button { .input button {
height: 100%; /* Adjust button height */ height: 100%; /* Adjust button height */
width: 15%; /* Adjust button width */ width: 15%; /* Adjust button width */
@ -99,16 +87,13 @@
color: var(--user-message-text-color); /* Use variable for button text color */ color: var(--user-message-text-color); /* Use variable for button text color */
margin: 0; margin: 0;
} }
.header-logo { .header-logo {
position: relative; position: relative;
} }
.hamburger.open { .hamburger.open {
margin-top: 0.5vh; margin-top: 0.5vh;
padding-left: 1vw; padding-left: 1vw;
} }
.nav-links { .nav-links {
display: none; /* Hidden by default */ display: none; /* Hidden by default */
position: absolute; position: absolute;
@ -121,12 +106,10 @@
padding: 10px; padding: 10px;
height: fit-content; height: fit-content;
} }
.nav-links.active { .nav-links.active {
display: flex; /* Show when active */ display: flex; /* Show when active */
height: fit-content; height: fit-content;
} }
.nav-btn { .nav-btn {
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -137,28 +120,43 @@
font-size: 0.9em; font-size: 0.9em;
border-radius: 5px; border-radius: 5px;
} }
.nav-btn:hover { .nav-btn:hover {
background-color: var(--input-button-hover-color); background-color: var(--input-button-hover-color);
} }
.hamburger { .hamburger {
display: flex; /* Always show hamburger button */ display: flex; /* Always show hamburger button */
} }
.header-login-button { .header-login-button {
right: 5vh; /* Keep login button visible */ right: 5vh; /* Keep login button visible */
} }
.show-hide-btn{ .show-hide-btn{
width: fit-content; width: fit-content;
left: 20vw; left: 20vw;
} }
.header-logo { .header-logo {
background-image: url(../../public/img/logo-small.png); background-image: url(../../public/img/logo-small.png);
width: 4em; width: 4em;
} }
.sidebar{
width: 0%;
display: none;
}
.settings-main {
width: 80vw; /* Full width for main content */
margin: auto;
padding: auto;
}
.dropdown{
display: flex;
position: relative;
top: 10px;
display: block;
}
.slider-option{
width: fit-content;
margin: 10px 10px 0 0;
}
} }
/* Responsive adjustments for the settings */ /* Responsive adjustments for the settings */
@ -166,12 +164,4 @@
.settings-content { .settings-content {
flex-direction: column; /* Stack sidebar and main content on smaller screens */ flex-direction: column; /* Stack sidebar and main content on smaller screens */
} }
.sidebar {
width: 100%; /* Full width for sidebar */
}
.settings-main {
width: 100%; /* Full width for main content */
}
} }

3
app/styles/scrollbar.css
View file

@ -2,16 +2,13 @@
.scrollbar { .scrollbar {
overflow-y: scroll; overflow-y: scroll;
} }
.scrollbar::-webkit-scrollbar { .scrollbar::-webkit-scrollbar {
width: 8px; width: 8px;
} }
.scrollbar::-webkit-scrollbar-thumb { .scrollbar::-webkit-scrollbar-thumb {
background-color: var(--input-border-color); /* Use variable for thumb color */ background-color: var(--input-border-color); /* Use variable for thumb color */
border-radius: 4px; border-radius: 4px;
} }
.scrollbar::-webkit-scrollbar-track { .scrollbar::-webkit-scrollbar-track {
background-color: var(--history-background-color); /* Use variable for track color */ background-color: var(--history-background-color); /* Use variable for track color */
} }

3
app/styles/user-ai-messages.css
View file

@ -9,7 +9,6 @@
display: block; display: block;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
} }
.user-message { .user-message {
background-color: var(--user-message-background-color); background-color: var(--user-message-background-color);
color: var(--text-color); color: var(--text-color);
@ -18,7 +17,6 @@
text-align: left; text-align: left;
margin-right: 1.5vw; margin-right: 1.5vw;
} }
.ai-message { .ai-message {
background-color: var(--ai-message-background-color); background-color: var(--ai-message-background-color);
color: var(--text-color); color: var(--text-color);
@ -26,7 +24,6 @@
margin-right: auto; margin-right: auto;
text-align: left; text-align: left;
} }
.ai-container{ .ai-container{
position: relative; position: relative;
height: min-content; height: min-content;

2
app/styles/variables.css
View file

@ -24,7 +24,6 @@
--apply-button-hover-color:#6b7c2b; --apply-button-hover-color:#6b7c2b;
--burger-menu-background-color: #79832e; /*NEW*/ --burger-menu-background-color: #79832e; /*NEW*/
--overlay-text-color:white; /*NEW*/ --overlay-text-color:white; /*NEW*/
/* FAQ Colors */ /* FAQ Colors */
--faq-background-color: #474D22; /* Background color for FAQ section */ --faq-background-color: #474D22; /* Background color for FAQ section */
--faq-heading-color: #8B9635; /* Heading color for FAQ section */ --faq-heading-color: #8B9635; /* Heading color for FAQ section */
@ -32,7 +31,6 @@
--faq-item-heading-color: #474D22; /* Heading color for FAQ items */ --faq-item-heading-color: #474D22; /* Heading color for FAQ items */
--faq-item-text-color: #333; /* Text color for FAQ items */ --faq-item-text-color: #333; /* Text color for FAQ items */
--faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */ --faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
--popup-background-color: #8B9635; --popup-background-color: #8B9635;
--pop-up-text: #000; /* Text color for pop-ups */ --pop-up-text: #000; /* Text color for pop-ups */
--input-border-color: #8B9635; /* Input border color */ --input-border-color: #8B9635; /* Input border color */