Merge pull request 'Improved the settings and some css tweaks' (#31) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/31
This commit is contained in:
Patrick 2024-09-23 11:58:31 +02:00
commit 7854676e79
16 changed files with 517 additions and 250 deletions

View file

@ -1,8 +1,92 @@
import React, { useState } from'react'; import React, { useState, useEffect } from 'react';
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => { const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
const [activeSection, setActiveSection] = useState('general'); const [activeSection, setActiveSection] = useState('general');
// Theme settings state
const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
const [inputButtonColor, setInputButtonColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim());
const [inputButtonHoverColor, setInputButtonHoverColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim());
const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim());
const [userMessageTextColor, setUserMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim());
const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim());
const [aiMessageTextColor, setAiMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim());
const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim());
const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim());
const [modelsBackgroundColor, setModelsBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim());
const [historyBackgroundColor, setHistoryBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim());
const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim());
const [conversationBackgroundColor, setConversationBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim());
const [popUpTextColor, setPopUpTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim());
const [inputBorderColor, setInputBorderColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
// General settings state
const [preferredLanguage, setPreferredLanguage] = useState<string>('English');
const [preferredCurrency, setPreferredCurrency] = useState<string>('USD');
const [dateFormat, setDateFormat] = useState<string>('MM/DD/YYYY');
const [timeFormat, setTimeFormat] = useState<string>('12-hour');
const [timeZone, setTimeZone] = useState<string>('UTC');
// Privacy settings state
const [disableOnlineAI, setDisableOnlineAI] = useState<boolean>(false);
const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
// FOSS settings state
const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);
// Account settings state
const [newName, setNewName] = useState<string>('');
const [newEmail, setNewEmail] = useState<string>('');
const [newPassword, setNewPassword] = useState<string>('');
// Effect to update CSS variables on theme state change
useEffect(() => {
document.documentElement.style.setProperty('--background-color', backgroundColor);
document.documentElement.style.setProperty('--text-color', textColor);
document.documentElement.style.setProperty('--input-background-color', inputBackgroundColor);
document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
document.documentElement.style.setProperty('--input-button-hover-color', inputButtonHoverColor);
document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
document.documentElement.style.setProperty('--user-message-text-color', userMessageTextColor);
document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
document.documentElement.style.setProperty('--ai-message-text-color', aiMessageTextColor);
document.documentElement.style.setProperty('--button-background-color', buttonBackgroundColor);
document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
document.documentElement.style.setProperty('--models-background-color', modelsBackgroundColor);
document.documentElement.style.setProperty('--history-background-color', historyBackgroundColor);
document.documentElement.style.setProperty('--left-panel-background-color', leftPanelBackgroundColor);
document.documentElement.style.setProperty('--conversation-background-color', conversationBackgroundColor);
document.documentElement.style.setProperty('--pop-up-text', popUpTextColor);
document.documentElement.style.setProperty('--input-border-color', inputBorderColor);
document.documentElement.style.setProperty('--font-family', fontFamily);
document.documentElement.style.setProperty('--font-size', fontSize);
}, [
backgroundColor,
textColor,
inputBackgroundColor,
inputButtonColor,
inputButtonHoverColor,
userMessageBackgroundColor,
userMessageTextColor,
aiMessageBackgroundColor,
aiMessageTextColor,
buttonBackgroundColor,
buttonHoverBackgroundColor,
modelsBackgroundColor,
historyBackgroundColor,
leftPanelBackgroundColor,
conversationBackgroundColor,
popUpTextColor,
inputBorderColor,
fontFamily,
fontSize
]);
const renderSettingsContent = () => { const renderSettingsContent = () => {
switch (activeSection) { switch (activeSection) {
case 'general': case 'general':
@ -10,209 +94,312 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<div className="settings-section"> <div className="settings-section">
<h2>General Settings</h2> <h2>General Settings</h2>
<div className="settings-option"> <div className="settings-option">
<p>Change Language</p> <label>Preferred Language</label>
<select> <input
<option value="en">English</option> type="text"
<option value="es">Spanish</option> value={preferredLanguage}
<option value="fr">French</option> onChange={(e) => setPreferredLanguage(e.target.value)}
<option value="de">German</option> />
<option value="it">Italian</option>
<option value="pt">Portuguese</option>
<option value="zh">Chinese</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="ar">Arabic</option>
<option value="ru">Russian</option>
<option value="he">Hebrew</option>
</select>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<p>Notifications</p> <label>Preferred Currency</label>
<label> <input
<input type="checkbox" /> Enable notifications type="text"
</label> value={preferredCurrency}
onChange={(e) => setPreferredCurrency(e.target.value)}
/>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<p>Notification Frequency</p> <label>Date Format</label>
<select> <input
<option value="instant">Instant</option> type="text"
<option value="daily">Daily</option> value={dateFormat}
<option value="weekly">Weekly</option> onChange={(e) => setDateFormat(e.target.value)}
<option value="monthly">Monthly</option> />
<option value="quarterly">Quarterly</option>
<option value="annually">Annually</option>
</select>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<p>Time Zone</p> <label>Time Format</label>
<select> <input
<option value="utc">UTC</option> type="text"
<option value="est">EST</option> value={timeFormat}
<option value="pst">PST</option> onChange={(e) => setTimeFormat(e.target.value)}
<option value="gmt">GMT</option> />
<option value="cst">CST</option>
<option value="mst">MST</option>
<option value="bst">BST</option>
<option value="cest">CEST</option>
</select>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<p>Auto-Save</p> <label>Time Zone</label>
<label> <input
<input type="checkbox" /> Enable auto-save type="text"
</label> value={timeZone}
</div> onChange={(e) => setTimeZone(e.target.value)}
<div className="settings-option"> />
<p>Auto-Save Frequency</p>
<select>
<option value="5">Every 5 minutes</option>
<option value="10">Every 10 minutes</option>
<option value="15">Every 15 minutes</option>
<option value="30">Every 30 minutes</option>
<option value="60">Every hour</option>
</select>
</div>
<div className="settings-option">
<p>Default Currency</p>
<select>
<option value="usd">USD</option>
<option value="eur">EUR</option>
<option value="gbp">GBP</option>
<option value="jpy">JPY</option>
<option value="cny">CNY</option>
<option value="aud">AUD</option>
</select>
</div>
<div className="settings-option">
<p>Date Format</p>
<select>
<option value="mm/dd/yyyy">MM/DD/YYYY</option>
<option value="dd/mm/yyyy">DD/MM/YYYY</option>
<option value="yyyy-mm-dd">YYYY-MM-DD</option>
</select>
</div>
<div className="settings-option">
<p>Time Format</p>
<select>
<option value="12-hour">12-hour clock</option>
<option value="24-hour">24-hour clock</option>
</select>
</div> </div>
</div> </div>
); );
case 'privacy': case 'privacy':
return ( return (
<div className="settings-section"> <div className="settings-section">
<h2>Privacy Settings</h2> <h2>Privacy Settings</h2>
<div className="settings-option"> <div className="settings-option">
<p>Data Collection</p>
<label> <label>
<input type="checkbox" /> Allow data collection <input
type="checkbox"
checked={disableOnlineAI}
onChange={() => setDisableOnlineAI(!disableOnlineAI)}
/>
Disable Online AI
</label> </label>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<p>Location Access</p>
<label> <label>
<input type="checkbox" /> Enable location access <input
type="checkbox"
checked={disableChatHistory}
onChange={() => setDisableChatHistory(!disableChatHistory)}
/>
Disable Chat History Save
</label> </label>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<p>Two-Factor Authentication</p>
<label> <label>
<input type="checkbox" /> Enable 2FA <input
type="checkbox"
checked={disableAIMemory}
onChange={() => setDisableAIMemory(!disableAIMemory)}
/>
Disable AI Memory
</label> </label>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<p>Data Export</p> <button onClick={() => {/* Export data logic */}}>Export My Data</button>
<button>Export Data</button>
</div>
<div className="settings-option">
<p>Cookie Policy</p>
<label>
<input type="checkbox" /> Accept cookie policy
</label>
</div>
<div className="settings-option">
<p>GDPR Compliance</p>
<label>
<input type="checkbox" /> I agree to GDPR terms
</label>
</div>
<div className="settings-option">
<p>CCPA Compliance</p>
<label>
<input type="checkbox" /> I agree to CCPA terms
</label>
</div>
<div className="settings-option">
<p>Biometric Data</p>
<label>
<input type="checkbox" /> Allow biometric data collection
</label>
</div> </div>
</div> </div>
); );
case 'theme':
case 'theme':
return (
<div className="settings-section">
<h2>Theme Settings</h2>
<div className="settings-option">
<p>Font Size</p>
<input
type="range"
min="12"
max="30"
value={parseInt(fontSize, 10)} // Ensure value is a number
onChange={(e) => {
const newSize = `${e.target.value}px`;
setFontSize(newSize);
document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable
}}
/>
<span>{fontSize}</span>
</div>
<div className="settings-option">
<p>Background Color</p>
<input
type="color"
value={backgroundColor}
onChange={(e) => setBackgroundColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Text Color</p>
<input
type="color"
value={textColor}
onChange={(e) => setTextColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Input Background Color</p>
<input
type="color"
value={inputBackgroundColor}
onChange={(e) => setInputBackgroundColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Input Button Color</p>
<input
type="color"
value={inputButtonColor}
onChange={(e) => setInputButtonColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Input Button Hover Color</p>
<input
type="color"
value={inputButtonHoverColor}
onChange={(e) => setInputButtonHoverColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>User Message Background Color</p>
<input
type="color"
value={userMessageBackgroundColor}
onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>User Message Text Color</p>
<input
type="color"
value={userMessageTextColor}
onChange={(e) => setUserMessageTextColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>AI Message Background Color</p>
<input
type="color"
value={aiMessageBackgroundColor}
onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>AI Message Text Color</p>
<input
type="color"
value={aiMessageTextColor}
onChange={(e) => setAiMessageTextColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Button Background Color</p>
<input
type="color"
value={buttonBackgroundColor}
onChange={(e) => setButtonBackgroundColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Button Hover Background Color</p>
<input
type="color"
value={buttonHoverBackgroundColor}
onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Models Background Color</p>
<input
type="color"
value={modelsBackgroundColor}
onChange={(e) => setModelsBackgroundColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>History Background Color</p>
<input
type="color"
value={historyBackgroundColor}
onChange={(e) => setHistoryBackgroundColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Left Panel Background Color</p>
<input
type="color"
value={leftPanelBackgroundColor}
onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Conversation Background Color</p>
<input
type="color"
value={conversationBackgroundColor}
onChange={(e) => setConversationBackgroundColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Pop-up Text Color</p>
<input
type="color"
value={popUpTextColor}
onChange={(e) => setPopUpTextColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Input Border Color</p>
<input
type="color"
value={inputBorderColor}
onChange={(e) => setInputBorderColor(e.target.value)}
/>
</div>
<div className="settings-option">
<p>Font Family</p>
<select
value={fontFamily}
onChange={(e) => setFontFamily(e.target.value)}
>
<option value="'Arial', sans-serif">Arial</option>
<option value="'Calibri', sans-serif">Calibri</option>
<option value="'Helvetica', sans-serif">Helvetica</option>
<option value="'Times New Roman', serif">Times New Roman</option>
<option value="'Poppins', sans-serif">Poppins</option>
</select>
</div>
</div>
);
case 'foss':
return ( return (
<div className="settings-section"> <div className="settings-section">
<h2>Theme Settings</h2> <h2>FOSS Settings</h2>
<div className="settings-option"> <div className="settings-option">
<p>Choose Theme Color</p> <label>
<input type="color" /> <input
</div> type="checkbox"
<div className="settings-option"> checked={openSourceMode}
<p>Font Size</p> onChange={() => setOpenSourceMode(!openSourceMode)}
<input type="range" min="10" max="30" /> />
</div> Enable Open Source Mode
<div className="settings-option"> </label>
<p>Background Pattern</p> <p>(ONLY OPEN SOURCE MODULES WORK IN THERE)</p>
<select>
<option value="solid">Solid</option>
<option value="striped">Striped</option>
<option value="dots">Dotted</option>
<option value="grid">Grid</option>
</select>
</div>
<div className="settings-option">
<p>Font Family</p>
<select>
<option value="arial">Arial</option>
<option value="calibri">Calibri</option>
<option value="helvetica">Helvetica</option>
</select>
</div>
<div className="settings-option">
<p>Button Style</p>
<select>
<option value="flat">Flat</option>
<option value="raised">Raised</option>
<option value="rounded">Rounded</option>
</select>
</div> </div>
</div> </div>
); );
case 'account': case 'account':
return ( return (
<div className="settings-section"> <div className="settings-section">
<h2>Account Settings</h2> <h2>Account Settings</h2>
<div className="settings-option"> <div className="settings-option">
<p>Change Name</p> <label>Change Name</label>
<input type="text" placeholder="New Name" /> <input
type="text"
value={newName}
onChange={(e) => setNewName(e.target.value)}
/>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<p>Change Email</p> <label>Change Email</label>
<input type="email" placeholder="New Email" /> <input
type="email"
value={newEmail}
onChange={(e) => setNewEmail(e.target.value)}
/>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<p>Change Password</p> <label>Change Password</label>
<input type="password" placeholder="New Password" /> <input
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
/>
</div> </div>
<div className="settings-option"> <div className="danger-zone">
<p>Delete Account</p> <h3>DANGER ZONE</h3>
<button>Delete Account</button> <button onClick={() => {/* Delete account logic */}}>Delete Account</button>
</div> </div>
</div> </div>
); );
default: default:
return null; return null;
} }
@ -227,6 +414,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<li onClick={() => setActiveSection('general')}>General</li> <li onClick={() => setActiveSection('general')}>General</li>
<li onClick={() => setActiveSection('privacy')}>Privacy</li> <li onClick={() => setActiveSection('privacy')}>Privacy</li>
<li onClick={() => setActiveSection('theme')}>Theme</li> <li onClick={() => setActiveSection('theme')}>Theme</li>
<li onClick={() => setActiveSection('foss')}>FOSS</li>
<li onClick={() => setActiveSection('account')}>Account</li> <li onClick={() => setActiveSection('account')}>Account</li>
</ul> </ul>
</div> </div>
@ -241,4 +429,4 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
); );
}; };
export default Settings; export default Settings;

View file

@ -36,8 +36,8 @@
/* Popup content box */ /* Popup content box */
.popup-content { .popup-content {
background: var(--background-color); background: var(--popup-background-color); /* Use variable for background color */
color: var(--text-color); color: var(--popup-text-color); /* Use variable for text color */
padding: 30px; padding: 30px;
border-radius: 10px; border-radius: 10px;
width: 300px; width: 300px;
@ -63,7 +63,7 @@
/* Close button */ /* Close button */
.close-popup { .close-popup {
background: red; /* Exception to the rule */ background: var(--close-button-color); /* Use variable for close button color */
color: var(--text-color); color: var(--text-color);
border: none; border: none;
border-radius: 5px; border-radius: 5px;
@ -73,7 +73,7 @@
} }
.log-into-account { .log-into-account {
background: green; /* Exception to the rule */ background: var(--login-button-color); /* Use variable for login button color */
color: var(--text-color); color: var(--text-color);
border: none; border: none;
border-radius: 5px; border-radius: 5px;
@ -111,6 +111,6 @@
} }
.popup-content p { .popup-content p {
color: var(--pop-up-text); color: var(--popup-text-color); /* Use variable for paragraph text color */
margin: 10px; margin: 10px;
} }

View file

@ -12,18 +12,27 @@
z-index: 10000; z-index: 10000;
} }
.settings-container{ .settings-main h2 {
margin-bottom: 1em;
}
.settings-main p {
padding-bottom: 7px;
}
/* Main container for the settings */
.settings-container {
display: grid; display: grid;
grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */ grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
grid-auto-flow: column; grid-auto-flow: column;
overflow-x:hidden; overflow-x: hidden;
height: 100%; /* Ensure it takes full height */
} }
/* Settings content */ /* Settings content */
.settings-content { .settings-content {
background: #f5f5f5; background: var(--history-background-color);
color: #333; color: var(--text-color);
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
width: 90%; width: 90%;
@ -31,13 +40,15 @@
height: 90%; height: 90%;
max-height: 600px; max-height: 600px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
overflow: scroll; /* Prevents overflow of the content */ overflow: hidden; /* Prevents overflow of the content */
position: relative; /* Needed for absolute positioning of close button */ position: relative; /* Needed for absolute positioning of close button */
display: flex;
flex-direction: column; /* Flexbox for vertical stacking */
} }
/* Sidebar styles */ /* Sidebar styles */
.sidebar { .sidebar {
background: #e0e0e0; background: var(--settings-background-color);
padding: 20px; padding: 20px;
border-radius: 10px 0 0 10px; /* Rounded corners on the left side */ border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
@ -45,15 +56,17 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
grid-column: 1; /* Places sidebar in the first grid column */ grid-column: 1; /* Places sidebar in the first grid column */
height: 100%; /* Ensures sidebar takes full height */
} }
/* Sidebar item styles */ /* Sidebar item styles */
.sidebar ul { .sidebar ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 0; /* Ensure no margin for the list */ margin: 0;
display: flex; display: flex;
flex-direction: column; /* Make the ul a column */ flex-direction: column; /* Make the ul a column */
flex-grow: 1; /* Allows the list to take available space */
} }
.sidebar li { .sidebar li {
@ -65,11 +78,11 @@
} }
.sidebar li:hover { .sidebar li:hover {
background: #d0d0d0; /* Highlight on hover */ background: var(--input-button-hover-color); /* Highlight on hover */
} }
.sidebar li.active { .sidebar li.active {
background: #b0b0b0; /* Active section highlight */ background: var(--button-hover-background-color); /* Active section highlight */
} }
/* Main settings area */ /* Main settings area */
@ -78,14 +91,14 @@
padding: 20px; padding: 20px;
border-radius: 0 10px 10px 0; /* Rounded corners on the right side */ border-radius: 0 10px 10px 0; /* Rounded corners on the right side */
overflow-y: auto; /* Scroll if content exceeds height */ overflow-y: auto; /* Scroll if content exceeds height */
display: flex; /* Ensure main settings area displays content correctly */ display: flex;
flex-direction: column; /* Stack content vertically */ flex-direction: column; /* Stack content vertically */
} }
/* Close button positioning */ /* Close button positioning */
.close-popup { .close-popup {
background-color: #ff4d4d; background-color: var(--close-button-color);
color: #fff; color: var(--user-message-text-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px 20px; padding: 10px 20px;
border: none; border: none;
@ -98,21 +111,39 @@
} }
.close-popup:hover { .close-popup:hover {
background-color: #e63939; /* Darker red on hover */ background-color: var(--close-button-hover-color); /* Darker red on hover */
} }
/* Additional styles for inputs and options */ /* Additional styles for inputs and options */
.settings-option {
margin-bottom: 20px; /* Adds space between each setting option */
padding-bottom: 10px; /* Adds internal spacing */
border-bottom: 1px solid var(--input-border-color); /* Optional, creates a separator between options */
}
.settings-option:last-child {
margin-bottom: 0; /* Removes bottom margin from last option */
border-bottom: none; /* 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"],
.settings-option input[type="color"], .settings-option input[type="color"],
.settings-option input[type="range"], .settings-option input[type="range"],
.settings-option select { .settings-option select {
border-color: #ccc; border-color: var(--input-border-color);
color: #333; color: var(--text-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
margin-bottom: 10px; /* Add spacing between inputs */ margin-bottom: 10px; /* Adds spacing between inputs */
}
/* Optional additional spacing for labels */
.settings-option label {
margin-bottom: 5px;
display: block;
font-weight: bold;
} }

View file

@ -12,6 +12,8 @@
.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 */
border-radius: 0 1em 0 0;
} }
.left-panel.hidden { .left-panel.hidden {
@ -23,6 +25,8 @@
.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 */
border-radius: 1em 0 0 0;
} }
/* Adjust margin-left when panel is shown or hidden */ /* Adjust margin-left when panel is shown or hidden */

View file

@ -9,7 +9,7 @@
max-width: 900px; max-width: 900px;
height: 80vh; height: 80vh;
margin: 0 auto; margin: 0 auto;
background: #fff; 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);
@ -18,29 +18,27 @@
.title { .title {
font-size: 2rem; font-size: 2rem;
color: #333; color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.subtitle { .subtitle {
font-size: 1.5rem; font-size: 1.5rem;
color: #555; 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: 1.25rem; font-size: 1.25rem;
color: #666; 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: 1rem; font-size: 1rem;
color: #333; color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
line-height: 1.6; line-height: 1.6;
} }

View file

@ -11,7 +11,7 @@
max-width: 800px; max-width: 800px;
width: 90%; width: 90%;
padding: 20px; padding: 20px;
background-color: #222; background-color: var(--faq-background-color); /* Use variable for background */
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
overflow-y: scroll; /* Allow vertical scrolling if content overflows */ overflow-y: scroll; /* Allow vertical scrolling if content overflows */
@ -21,7 +21,7 @@
#faq h2 { #faq h2 {
text-align: center; text-align: center;
color: #00ccff; color: var(--faq-heading-color); /* Use variable for heading color */
font-size: 2em; font-size: 2em;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -30,22 +30,22 @@
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: #333; 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: #00ccff; 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: #ddd; 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: #444; background-color: var(--faq-item-hover-background-color); /* Use variable for hover background */
} }

View file

@ -14,5 +14,34 @@ 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);
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
header {
background-color: var(--header-background-color);
color: var(--header-text-color);
padding: 1rem; /* Adjust padding as needed */
}
button {
background-color: var(--button-background-color);
color: var(--text-color);
border: 1px solid var(--input-border-color);
transition: background-color 0.3s ease;
}
button:hover {
background-color: var(--button-hover-background-color);
}
input {
background-color: var(--input-background-color);
border: 1px solid var(--input-border-color);
color: var(--text-color);
}
input:hover {
border-color: var(--button-hover-background-color);
}

View file

@ -1,6 +1,6 @@
header { header {
background-color: var(--background-color); background-color: var(--header-background-color); /* Use the new header background color */
color: black; color: var(--header-text-color); /* Use the new header text color */
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
position: fixed; position: fixed;
@ -24,7 +24,7 @@ header img {
header a, header a,
header li button { header li button {
color: black; color: var(--header-text-color); /* Use the new header text color */
text-decoration: none; text-decoration: none;
transition: color 0.3s; transition: color 0.3s;
border: none; border: none;
@ -34,5 +34,5 @@ header li button {
header a:hover, header a:hover,
header li button:hover { header li button:hover {
color: var(--input-button-color); color: var(--input-button-color); /* Keep the hover color */
} }

View file

@ -29,7 +29,7 @@
.history ul li a { .history ul li a {
display: block; display: block;
text-decoration: none; text-decoration: none;
color: white; color: var(--text-color); /* Use variable for link text color */
width: 100%; width: 100%;
padding: 5px; padding: 5px;
} }

View file

@ -22,8 +22,8 @@
border: 2px solid var(--input-button-color); border: 2px solid var(--input-button-color);
outline: none; outline: none;
margin-right: 10px; margin-right: 10px;
background-color: rgba(255, 255, 255, 0.9); background-color: var(--input-background-color); /* Use variable for background */
color: #333; color: var(--text-color); /* Use variable for text color */
transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out;
height: 7vh; height: 7vh;
} }
@ -36,7 +36,7 @@
padding: 1em; padding: 1em;
margin: 5px; margin: 5px;
background-color: var(--input-button-color); background-color: var(--input-button-color);
color: white; color: var(--user-message-text-color); /* Use variable for button text color */
border: none; border: none;
border-radius: 50%; border-radius: 50%;
font-size: 1.5em; font-size: 1.5em;

View file

@ -1,21 +1,20 @@
.model-background { .model-background {
grid-column: 1/2; grid-column: 1 / 2;
grid-row: 2/5; grid-row: 2 / 5;
overflow-y: auto; overflow-y: auto;
background-color: var(--models-background-color); background-color: var(--models-background-color); /* Ensure this variable is defined */
border-radius: 2em; border-radius: 2em;
padding: 1em; padding: 1em;
margin-left: 1em; margin-left: 1em;
height: 40vh; height: 40vh;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
} }
.models { .models {
grid-column: 1/2; grid-column: 1 / 2;
grid-row: 2/5; grid-row: 2 / 5;
overflow-y: auto; overflow-y: auto;
background-color: var(--models-background-color); background-color: var(--models-background-color); /* Ensure this variable is defined */
border-radius: 2em; border-radius: 2em;
padding: 1em; padding: 1em;
height: 100%; height: 100%;
@ -55,7 +54,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: var(--text-color); /* Use variable for text color */
border-radius: 5%; border-radius: 5%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -70,7 +69,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
color: white; color: var(--text-color); /* Use variable for overlay text color */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -103,7 +102,7 @@
.math-model { .math-model {
background-image: url(/img/math.jpg); background-image: url(/img/math.jpg);
background-color: white; background-color: var(--background-color); /* Use variable for background color */
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@ -111,7 +110,7 @@
.language-model { .language-model {
background-image: url(/img/language.jpg); background-image: url(/img/language.jpg);
background-color: #72cce4; background-color: #72cce4; /* Use variable for background color */
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
background-position: center; background-position: center;

View file

@ -11,8 +11,7 @@
justify-content: flex-start; justify-content: flex-start;
font-size: 1em; font-size: 1em;
overflow-y: auto; overflow-y: auto;
margin-bottom: 0; width: calc(100% - 2em); /* Corrected calculation for width */
width: 100% -2em;
height: 70vh; height: 70vh;
margin-bottom: 1vh; margin-bottom: 1vh;
} }
@ -59,10 +58,8 @@
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
background-color: var(--button-background-color);
border-radius: 50%; border-radius: 50%;
padding: 10px; padding: 10px;
padding-top: 0;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }

View file

@ -1,6 +1,6 @@
/* Responsive behavior - applies only on smaller screens */ /* Responsive behavior - applies only on smaller screens */
@media (max-width: 1200px) { @media (max-width: 1200px) {
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -28,7 +28,7 @@
padding: 0; padding: 0;
} }
header li{ header li {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -47,46 +47,46 @@
} }
/* Left panel styles */ /* Left panel styles */
.left-panel { .left-panel {
display: none; /* Initially hidden */ display: none; /* Initially hidden */
min-width: 90%; /* Takes full width when visible */ min-width: 90%; /* Takes full width when visible */
margin: 0; margin: 0;
} }
.left-panel.visible { .left-panel.visible {
display: block; display: block;
} }
/* Conversation container styles */ /* Conversation container styles */
.conversation-container { .conversation-container {
width: 90%; width: 90%;
height: 90%; height: 90%;
} }
.conversation-container.collapsed { .conversation-container.collapsed {
width: 0; width: 0;
padding: 0; padding: 0;
border: none; border: none;
overflow: hidden; overflow: hidden;
} }
.conversation-container.expanded { .conversation-container.expanded {
width: 100%; width: 100%;
} }
/* 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;
gap: 10px; gap: 10px;
padding: 0.5em; padding: 0.5em;
@ -95,32 +95,35 @@
width: 90%; width: 90%;
} }
.input input { .input input {
font-size: 1em; /* Adjust font size */ font-size: 1em; /* Adjust font size */
max-width: 65%; max-width: 65%;
margin-right: 0; margin-right: 0;
border-color: var(--input-border-color); /* Use variable for input border */
color: var(--text-color); /* Use variable for text color */
} }
.input button { .input button {
height: 40px; /* Adjust button height */ height: 40px; /* Adjust button height */
width: 40px; /* Adjust button width */ width: 40px; /* Adjust button width */
font-size: 1.2em; /* Adjust button font size */ font-size: 1.2em; /* Adjust button font size */
margin: auto; margin: auto;
background-color: var(--input-button-color); /* Use variable for button color */
color: var(--user-message-text-color); /* Use variable for button text color */
} }
} }
/* Responsive adjustments for the settings */
/* Responsive adjustments for the settings*/
@media (max-width: 768px) { @media (max-width: 768px) {
.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 { .sidebar {
width: 100%; /* Full width for sidebar */ width: 100%; /* Full width for sidebar */
} }
.settings-main { .settings-main {
width: 100%; /* Full width for main content */ width: 100%; /* Full width for main content */
} }
} }

View file

@ -8,10 +8,10 @@
} }
.scrollbar::-webkit-scrollbar-thumb { .scrollbar::-webkit-scrollbar-thumb {
background-color: #ccc; 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: #f1f1f1; background-color: var(--history-background-color); /* Use variable for track color */
} }

View file

@ -11,7 +11,7 @@
} }
.user-message { .user-message {
background-color: var(--user-message-color); background-color: var(--user-message-background-color);
color: var(--text-color); color: var(--text-color);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
margin-left: auto; margin-left: auto;
@ -19,9 +19,9 @@
} }
.ai-message { .ai-message {
background-color: var(--ai-message-color); background-color: var(--ai-message-background-color);
color: var(--text-color); color: var(--text-color);
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
margin-right: auto; margin-right: auto;
text-align: left; text-align: left;
} }

View file

@ -1,16 +1,34 @@
:root { :root {
--background-color: white; /* Colors */
--text-color: white; --header-background-color: #7e7e7e; /* New header background color */
--font-family: Arial, sans-serif; --header-text-color: #ffffff; /* Header text color */
--history-background-color: rgb(0, 0, 48); --background-color: #8B9635; /* Main background color */
--models-background-color: rgb(0, 0, 48); --text-color: #474D22; /* Main text color */
--output-background-color: black; --input-background-color: #ffffff; /* Background color for input fields */
--user-message-color: rgb(0, 128, 255); --input-button-color: #8B9635; /* Button color */
--ai-message-color: rgb(100, 100, 255); --input-button-hover-color: #6b7c2b; /* Hover color for input buttons */
--input-background-color: rgb(0, 0, 48); --user-message-background-color: #8B9635; /* Background color for user messages */
--input-button-color: rgb(0, 128, 255); --user-message-text-color: #000; /* Text color for user messages */
--input-button-hover-color: rgb(0, 100, 200); --ai-message-background-color: #FCFCEB; /* Background color for AI messages */
--scrollbar-track: rgb(91, 172, 253); --ai-message-text-color: #000; /* Text color for AI messages */
--scrollbar-thumb: rgb(0, 88, 176); --button-background-color: #8B9635; /* Button background color */
--pop-up-text: darkgrey; --button-hover-background-color: #6b7c2b; /* Button hover color */
--models-background-color: #ffffff; /* Background for models section */
--history-background-color: #f9f9f9; /* Background color for history */
--left-panel-background-color: #79832e; /* Background color for left panel */
--conversation-background-color: #79832e; /* Background color for conversation container */
--doc-background-color: #ffffff; /* Background color for documents */
/* FAQ Colors */
--faq-background-color: #474D22; /* Background color for FAQ section */
--faq-heading-color: #8B9635; /* Heading color for FAQ section */
--faq-item-background-color: #fefefe; /* Background 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-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
--pop-up-text: #000; /* Text color for pop-ups */
--input-border-color: #8B9635; /* Input border color */
--font-family: 'Poppins', 'sans-serif';/* Default font family */
--font-size: 16px;
} }