diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 697fb68..29ba297 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -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 [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 = () => {
switch (activeSection) {
case 'general':
@@ -10,209 +94,312 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<div className="settings-section">
<h2>General Settings</h2>
<div className="settings-option">
- <p>Change Language</p>
- <select>
- <option value="en">English</option>
- <option value="es">Spanish</option>
- <option value="fr">French</option>
- <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>
+ <label>Preferred Language</label>
+ <input
+ type="text"
+ value={preferredLanguage}
+ onChange={(e) => setPreferredLanguage(e.target.value)}
+ />
</div>
<div className="settings-option">
- <p>Notifications</p>
- <label>
- <input type="checkbox" /> Enable notifications
- </label>
+ <label>Preferred Currency</label>
+ <input
+ type="text"
+ value={preferredCurrency}
+ onChange={(e) => setPreferredCurrency(e.target.value)}
+ />
</div>
<div className="settings-option">
- <p>Notification Frequency</p>
- <select>
- <option value="instant">Instant</option>
- <option value="daily">Daily</option>
- <option value="weekly">Weekly</option>
- <option value="monthly">Monthly</option>
- <option value="quarterly">Quarterly</option>
- <option value="annually">Annually</option>
- </select>
+ <label>Date Format</label>
+ <input
+ type="text"
+ value={dateFormat}
+ onChange={(e) => setDateFormat(e.target.value)}
+ />
</div>
<div className="settings-option">
- <p>Time Zone</p>
- <select>
- <option value="utc">UTC</option>
- <option value="est">EST</option>
- <option value="pst">PST</option>
- <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>
+ <label>Time Format</label>
+ <input
+ type="text"
+ value={timeFormat}
+ onChange={(e) => setTimeFormat(e.target.value)}
+ />
</div>
<div className="settings-option">
- <p>Auto-Save</p>
- <label>
- <input type="checkbox" /> Enable auto-save
- </label>
- </div>
- <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>
+ <label>Time Zone</label>
+ <input
+ type="text"
+ value={timeZone}
+ onChange={(e) => setTimeZone(e.target.value)}
+ />
</div>
</div>
);
+
case 'privacy':
return (
<div className="settings-section">
<h2>Privacy Settings</h2>
<div className="settings-option">
- <p>Data Collection</p>
<label>
- <input type="checkbox" /> Allow data collection
+ <input
+ type="checkbox"
+ checked={disableOnlineAI}
+ onChange={() => setDisableOnlineAI(!disableOnlineAI)}
+ />
+ Disable Online AI
</label>
</div>
<div className="settings-option">
- <p>Location Access</p>
<label>
- <input type="checkbox" /> Enable location access
+ <input
+ type="checkbox"
+ checked={disableChatHistory}
+ onChange={() => setDisableChatHistory(!disableChatHistory)}
+ />
+ Disable Chat History Save
</label>
</div>
<div className="settings-option">
- <p>Two-Factor Authentication</p>
<label>
- <input type="checkbox" /> Enable 2FA
+ <input
+ type="checkbox"
+ checked={disableAIMemory}
+ onChange={() => setDisableAIMemory(!disableAIMemory)}
+ />
+ Disable AI Memory
</label>
</div>
<div className="settings-option">
- <p>Data Export</p>
- <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>
+ <button onClick={() => {/* Export data logic */}}>Export My Data</button>
</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 (
<div className="settings-section">
- <h2>Theme Settings</h2>
+ <h2>FOSS Settings</h2>
<div className="settings-option">
- <p>Choose Theme Color</p>
- <input type="color" />
- </div>
- <div className="settings-option">
- <p>Font Size</p>
- <input type="range" min="10" max="30" />
- </div>
- <div className="settings-option">
- <p>Background Pattern</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>
+ <label>
+ <input
+ type="checkbox"
+ checked={openSourceMode}
+ onChange={() => setOpenSourceMode(!openSourceMode)}
+ />
+ Enable Open Source Mode
+ </label>
+ <p>(ONLY OPEN SOURCE MODULES WORK IN THERE)</p>
</div>
</div>
);
+
case 'account':
return (
<div className="settings-section">
<h2>Account Settings</h2>
<div className="settings-option">
- <p>Change Name</p>
- <input type="text" placeholder="New Name" />
+ <label>Change Name</label>
+ <input
+ type="text"
+ value={newName}
+ onChange={(e) => setNewName(e.target.value)}
+ />
</div>
<div className="settings-option">
- <p>Change Email</p>
- <input type="email" placeholder="New Email" />
+ <label>Change Email</label>
+ <input
+ type="email"
+ value={newEmail}
+ onChange={(e) => setNewEmail(e.target.value)}
+ />
</div>
<div className="settings-option">
- <p>Change Password</p>
- <input type="password" placeholder="New Password" />
+ <label>Change Password</label>
+ <input
+ type="password"
+ value={newPassword}
+ onChange={(e) => setNewPassword(e.target.value)}
+ />
</div>
- <div className="settings-option">
- <p>Delete Account</p>
- <button>Delete Account</button>
+ <div className="danger-zone">
+ <h3>DANGER ZONE</h3>
+ <button onClick={() => {/* Delete account logic */}}>Delete Account</button>
</div>
</div>
);
+
default:
return null;
}
@@ -227,6 +414,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<li onClick={() => setActiveSection('general')}>General</li>
<li onClick={() => setActiveSection('privacy')}>Privacy</li>
<li onClick={() => setActiveSection('theme')}>Theme</li>
+ <li onClick={() => setActiveSection('foss')}>FOSS</li>
<li onClick={() => setActiveSection('account')}>Account</li>
</ul>
</div>
@@ -241,4 +429,4 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
);
};
-export default Settings;
\ No newline at end of file
+export default Settings;
diff --git a/app/styles/Login.css b/app/styles/Login.css
index c2754a9..c8c559e 100644
--- a/app/styles/Login.css
+++ b/app/styles/Login.css
@@ -36,8 +36,8 @@
/* Popup content box */
.popup-content {
- background: var(--background-color);
- color: var(--text-color);
+ background: var(--popup-background-color); /* Use variable for background color */
+ color: var(--popup-text-color); /* Use variable for text color */
padding: 30px;
border-radius: 10px;
width: 300px;
@@ -63,7 +63,7 @@
/* Close button */
.close-popup {
- background: red; /* Exception to the rule */
+ background: var(--close-button-color); /* Use variable for close button color */
color: var(--text-color);
border: none;
border-radius: 5px;
@@ -73,7 +73,7 @@
}
.log-into-account {
- background: green; /* Exception to the rule */
+ background: var(--login-button-color); /* Use variable for login button color */
color: var(--text-color);
border: none;
border-radius: 5px;
@@ -111,6 +111,6 @@
}
.popup-content p {
- color: var(--pop-up-text);
+ color: var(--popup-text-color); /* Use variable for paragraph text color */
margin: 10px;
}
diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index a3c7fa0..014a3a8 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -12,18 +12,27 @@
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;
grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
grid-auto-flow: column;
- overflow-x:hidden;
+ overflow-x: hidden;
+ height: 100%; /* Ensure it takes full height */
}
/* Settings content */
.settings-content {
- background: #f5f5f5;
- color: #333;
+ background: var(--history-background-color);
+ color: var(--text-color);
padding: 20px;
border-radius: 10px;
width: 90%;
@@ -31,13 +40,15 @@
height: 90%;
max-height: 600px;
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 */
+ display: flex;
+ flex-direction: column; /* Flexbox for vertical stacking */
}
/* Sidebar styles */
.sidebar {
- background: #e0e0e0;
+ background: var(--settings-background-color);
padding: 20px;
border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
@@ -45,15 +56,17 @@
display: flex;
flex-direction: column;
grid-column: 1; /* Places sidebar in the first grid column */
+ height: 100%; /* Ensures sidebar takes full height */
}
/* Sidebar item styles */
.sidebar ul {
list-style-type: none;
padding: 0;
- margin: 0; /* Ensure no margin for the list */
+ margin: 0;
display: flex;
flex-direction: column; /* Make the ul a column */
+ flex-grow: 1; /* Allows the list to take available space */
}
.sidebar li {
@@ -65,11 +78,11 @@
}
.sidebar li:hover {
- background: #d0d0d0; /* Highlight on hover */
+ background: var(--input-button-hover-color); /* Highlight on hover */
}
.sidebar li.active {
- background: #b0b0b0; /* Active section highlight */
+ background: var(--button-hover-background-color); /* Active section highlight */
}
/* Main settings area */
@@ -78,14 +91,14 @@
padding: 20px;
border-radius: 0 10px 10px 0; /* Rounded corners on the right side */
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 */
}
/* Close button positioning */
.close-popup {
- background-color: #ff4d4d;
- color: #fff;
+ background-color: var(--close-button-color);
+ color: var(--user-message-text-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
border: none;
@@ -98,21 +111,39 @@
}
.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 */
+.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="email"],
.settings-option input[type="password"],
.settings-option input[type="color"],
.settings-option input[type="range"],
.settings-option select {
- border-color: #ccc;
- color: #333;
+ border-color: var(--input-border-color);
+ color: var(--text-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px;
border-radius: 5px;
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;
}
diff --git a/app/styles/container.css b/app/styles/container.css
index 528c675..08f254a 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -12,6 +12,8 @@
.left-panel {
width: 25vw; /* Adjust as needed */
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 {
@@ -23,6 +25,8 @@
.conversation-container {
flex: 1;
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 */
diff --git a/app/styles/doc.css b/app/styles/doc.css
index d924358..eb06945 100644
--- a/app/styles/doc.css
+++ b/app/styles/doc.css
@@ -9,7 +9,7 @@
max-width: 900px;
height: 80vh;
margin: 0 auto;
- background: #fff;
+ background: var(--doc-background-color); /* Use variable for background */
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
@@ -18,29 +18,27 @@
.title {
font-size: 2rem;
- color: #333;
+ color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem;
}
.subtitle {
font-size: 1.5rem;
- color: #555;
+ color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem;
margin-bottom: 1rem;
}
.subsection-title {
font-size: 1.25rem;
- color: #666;
+ color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.paragraph {
font-size: 1rem;
- color: #333;
+ color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem;
line-height: 1.6;
}
-
-
diff --git a/app/styles/faq.css b/app/styles/faq.css
index 05e93e5..1484722 100644
--- a/app/styles/faq.css
+++ b/app/styles/faq.css
@@ -11,7 +11,7 @@
max-width: 800px;
width: 90%;
padding: 20px;
- background-color: #222;
+ background-color: var(--faq-background-color); /* Use variable for background */
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
overflow-y: scroll; /* Allow vertical scrolling if content overflows */
@@ -21,7 +21,7 @@
#faq h2 {
text-align: center;
- color: #00ccff;
+ color: var(--faq-heading-color); /* Use variable for heading color */
font-size: 2em;
margin-bottom: 20px;
}
@@ -30,22 +30,22 @@
margin-bottom: 20px;
padding: 10px;
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;
}
.faq-item h3 {
- color: #00ccff;
+ color: var(--faq-item-heading-color); /* Use variable for item heading color */
margin-bottom: 10px;
font-size: 1.5em;
}
.faq-item p {
- color: #ddd;
+ color: var(--faq-item-text-color); /* Use variable for item text color */
font-size: 1.1em;
line-height: 1.5;
}
.faq-item:hover {
- background-color: #444;
+ background-color: var(--faq-item-hover-background-color); /* Use variable for hover background */
}
diff --git a/app/styles/global.css b/app/styles/global.css
index 2a2b956..f1bcfdf 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -14,5 +14,34 @@ body {
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
+ font-size: var(--font-size);
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);
+}
diff --git a/app/styles/header.css b/app/styles/header.css
index 8ecc019..eed0f9e 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,6 +1,6 @@
header {
- background-color: var(--background-color);
- color: black;
+ background-color: var(--header-background-color); /* Use the new header background color */
+ color: var(--header-text-color); /* Use the new header text color */
width: 100%;
text-decoration: none;
position: fixed;
@@ -24,7 +24,7 @@ header img {
header a,
header li button {
- color: black;
+ color: var(--header-text-color); /* Use the new header text color */
text-decoration: none;
transition: color 0.3s;
border: none;
@@ -34,5 +34,5 @@ header li button {
header a:hover,
header li button:hover {
- color: var(--input-button-color);
+ color: var(--input-button-color); /* Keep the hover color */
}
diff --git a/app/styles/history.css b/app/styles/history.css
index d1adcd0..7bc9bcd 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -29,7 +29,7 @@
.history ul li a {
display: block;
text-decoration: none;
- color: white;
+ color: var(--text-color); /* Use variable for link text color */
width: 100%;
padding: 5px;
}
diff --git a/app/styles/input.css b/app/styles/input.css
index 12b71e2..ceeb0b3 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -22,8 +22,8 @@
border: 2px solid var(--input-button-color);
outline: none;
margin-right: 10px;
- background-color: rgba(255, 255, 255, 0.9);
- color: #333;
+ background-color: var(--input-background-color); /* Use variable for background */
+ color: var(--text-color); /* Use variable for text color */
transition: border-color 0.3s ease-in-out;
height: 7vh;
}
@@ -36,7 +36,7 @@
padding: 1em;
margin: 5px;
background-color: var(--input-button-color);
- color: white;
+ color: var(--user-message-text-color); /* Use variable for button text color */
border: none;
border-radius: 50%;
font-size: 1.5em;
diff --git a/app/styles/models.css b/app/styles/models.css
index 9f853f1..c53d14b 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -1,21 +1,20 @@
.model-background {
- grid-column: 1/2;
- grid-row: 2/5;
+ grid-column: 1 / 2;
+ grid-row: 2 / 5;
overflow-y: auto;
- background-color: var(--models-background-color);
+ background-color: var(--models-background-color); /* Ensure this variable is defined */
border-radius: 2em;
padding: 1em;
margin-left: 1em;
height: 40vh;
box-sizing: border-box;
- overflow: hidden;
}
.models {
- grid-column: 1/2;
- grid-row: 2/5;
+ grid-column: 1 / 2;
+ grid-row: 2 / 5;
overflow-y: auto;
- background-color: var(--models-background-color);
+ background-color: var(--models-background-color); /* Ensure this variable is defined */
border-radius: 2em;
padding: 1em;
height: 100%;
@@ -55,7 +54,7 @@
display: flex;
align-items: center;
justify-content: center;
- color: #fff;
+ color: var(--text-color); /* Use variable for text color */
border-radius: 5%;
overflow: hidden;
position: relative;
@@ -70,7 +69,7 @@
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
- color: white;
+ color: var(--text-color); /* Use variable for overlay text color */
display: flex;
justify-content: center;
align-items: center;
@@ -103,7 +102,7 @@
.math-model {
background-image: url(/img/math.jpg);
- background-color: white;
+ background-color: var(--background-color); /* Use variable for background color */
background-position: center;
background-repeat: no-repeat;
background-size: contain;
@@ -111,7 +110,7 @@
.language-model {
background-image: url(/img/language.jpg);
- background-color: #72cce4;
+ background-color: #72cce4; /* Use variable for background color */
background-repeat: no-repeat;
background-size: contain;
background-position: center;
diff --git a/app/styles/output.css b/app/styles/output.css
index f105f90..f5d7924 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -11,8 +11,7 @@
justify-content: flex-start;
font-size: 1em;
overflow-y: auto;
- margin-bottom: 0;
- width: 100% -2em;
+ width: calc(100% - 2em); /* Corrected calculation for width */
height: 70vh;
margin-bottom: 1vh;
}
@@ -59,10 +58,8 @@
background: none;
border: none;
cursor: pointer;
- background-color: var(--button-background-color);
border-radius: 50%;
padding: 10px;
- padding-top: 0;
transition: background-color 0.3s ease;
}
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index b995946..31f563d 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -1,6 +1,6 @@
/* Responsive behavior - applies only on smaller screens */
@media (max-width: 1200px) {
- *{
+ * {
margin: 0;
padding: 0;
}
@@ -28,7 +28,7 @@
padding: 0;
}
- header li{
+ header li {
display: flex;
flex-direction: column;
justify-content: center;
@@ -47,46 +47,46 @@
}
/* Left panel styles */
- .left-panel {
+ .left-panel {
display: none; /* Initially hidden */
min-width: 90%; /* Takes full width when visible */
margin: 0;
}
- .left-panel.visible {
+ .left-panel.visible {
display: block;
}
/* Conversation container styles */
- .conversation-container {
+ .conversation-container {
width: 90%;
height: 90%;
}
- .conversation-container.collapsed {
+ .conversation-container.collapsed {
width: 0;
padding: 0;
border: none;
overflow: hidden;
}
- .conversation-container.expanded {
+ .conversation-container.expanded {
width: 100%;
}
/* Grid styles */
- .grid {
+ .grid {
grid-template-columns: 1fr; /* One item per line */
}
/* Model box styles */
- .model-box {
+ .model-box {
max-width: none; /* Remove max-width */
margin: 0 auto; /* Center each model-box */
}
/* Input styles */
- .input {
+ .input {
grid-column: 1 / -1;
gap: 10px;
padding: 0.5em;
@@ -95,32 +95,35 @@
width: 90%;
}
- .input input {
+ .input input {
font-size: 1em; /* Adjust font size */
max-width: 65%;
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 */
width: 40px; /* Adjust button width */
font-size: 1.2em; /* Adjust button font size */
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) {
.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 */
+ width: 100%; /* Full width for sidebar */
}
.settings-main {
- width: 100%; /* Full width for main content */
+ width: 100%; /* Full width for main content */
}
-}
\ No newline at end of file
+}
diff --git a/app/styles/scrollbar.css b/app/styles/scrollbar.css
index 5e2f6a1..7608126 100644
--- a/app/styles/scrollbar.css
+++ b/app/styles/scrollbar.css
@@ -8,10 +8,10 @@
}
.scrollbar::-webkit-scrollbar-thumb {
- background-color: #ccc;
+ background-color: var(--input-border-color); /* Use variable for thumb color */
border-radius: 4px;
}
.scrollbar::-webkit-scrollbar-track {
- background-color: #f1f1f1;
-}
\ No newline at end of file
+ background-color: var(--history-background-color); /* Use variable for track color */
+}
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index 91a04d6..ebb9da1 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -11,7 +11,7 @@
}
.user-message {
- background-color: var(--user-message-color);
+ background-color: var(--user-message-background-color);
color: var(--text-color);
border-bottom-right-radius: 0;
margin-left: auto;
@@ -19,9 +19,9 @@
}
.ai-message {
- background-color: var(--ai-message-color);
+ background-color: var(--ai-message-background-color);
color: var(--text-color);
border-bottom-left-radius: 0;
margin-right: auto;
text-align: left;
-}
\ No newline at end of file
+}
diff --git a/app/styles/variables.css b/app/styles/variables.css
index 97b3628..e5b3bbc 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -1,16 +1,34 @@
:root {
- --background-color: white;
- --text-color: white;
- --font-family: Arial, sans-serif;
- --history-background-color: rgb(0, 0, 48);
- --models-background-color: rgb(0, 0, 48);
- --output-background-color: black;
- --user-message-color: rgb(0, 128, 255);
- --ai-message-color: rgb(100, 100, 255);
- --input-background-color: rgb(0, 0, 48);
- --input-button-color: rgb(0, 128, 255);
- --input-button-hover-color: rgb(0, 100, 200);
- --scrollbar-track: rgb(91, 172, 253);
- --scrollbar-thumb: rgb(0, 88, 176);
- --pop-up-text: darkgrey;
+ /* Colors */
+ --header-background-color: #7e7e7e; /* New header background color */
+ --header-text-color: #ffffff; /* Header text color */
+ --background-color: #8B9635; /* Main background color */
+ --text-color: #474D22; /* Main text color */
+ --input-background-color: #ffffff; /* Background color for input fields */
+ --input-button-color: #8B9635; /* Button color */
+ --input-button-hover-color: #6b7c2b; /* Hover color for input buttons */
+ --user-message-background-color: #8B9635; /* Background color for user messages */
+ --user-message-text-color: #000; /* Text color for user messages */
+ --ai-message-background-color: #FCFCEB; /* Background color for AI messages */
+ --ai-message-text-color: #000; /* Text color for AI messages */
+ --button-background-color: #8B9635; /* Button background color */
+ --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;
}