Merge remote-tracking branch 'origin/main'
This commit is contained in:
Patrick_Pluto
commit
e484b38eca
16 changed files with 641 additions and 251 deletions
|
|
@ -1,8 +1,96 @@
|
|||
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>('');
|
||||
|
||||
// Theme selection
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('IOMARKET'); // Default value can be 'IOMARKET'
|
||||
|
||||
|
||||
// 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 +98,430 @@ 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>
|
||||
|
||||
{/* Dropdown to select theme */}
|
||||
<div className="settings-option">
|
||||
<p>Select Theme</p>
|
||||
<select
|
||||
value={selectedTheme}
|
||||
onChange={(e) => {
|
||||
const theme = e.target.value;
|
||||
setSelectedTheme(theme); // Update state for selected theme
|
||||
|
||||
// Apply the appropriate theme based on selection
|
||||
switch (theme) {
|
||||
case 'IOMARKET':
|
||||
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // New header background color
|
||||
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
|
||||
document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color
|
||||
document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color
|
||||
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Background color for input fields
|
||||
document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Hover color for input buttons
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // Background color for user messages
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Text color for user messages
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // Background color for AI messages
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Text color for AI messages
|
||||
document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color
|
||||
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Background for models section
|
||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Background color for left panel
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Background color for conversation container
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // Background color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // Heading color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // Background color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // Heading color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // Text color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Text color for pop-ups
|
||||
document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
break;
|
||||
case 'WHITE':
|
||||
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background color
|
||||
document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color
|
||||
document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color
|
||||
document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color
|
||||
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Background color for input fields
|
||||
document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Hover color for input buttons
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // Background color for user messages
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // Text color for user messages
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // Background color for AI messages
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // Text color for AI messages
|
||||
document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color
|
||||
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Background for models section
|
||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Background color for left panel
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Background color for conversation container
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // Background color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // Heading color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // Background color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // Heading color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // Text color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Text color for pop-ups
|
||||
document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
|
||||
break;
|
||||
case 'BLACK':
|
||||
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background color
|
||||
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
|
||||
document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
|
||||
document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
|
||||
document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Background color for input fields
|
||||
document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Hover color for input buttons
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#2c2c2c'); // Background color for user messages
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // Text color for user messages
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#2a2a2a'); // Background color for AI messages
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // Text color for AI messages
|
||||
document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
|
||||
document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Background for models section
|
||||
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // Background color for history
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Background color for left panel
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Background color for conversation container
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Background color for documents
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // Background color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // Heading color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // Background color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // Heading color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Text color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // Hover background color for FAQ items
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Text color for pop-ups
|
||||
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
// Do nothing, CUSTOM will display the customization options
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}} // Handle theme selection
|
||||
>
|
||||
<option value="IOMARKET">IOMARKET</option>
|
||||
<option value="WHITE">WHITE</option>
|
||||
<option value="BLACK">BLACK</option>
|
||||
<option value="CUSTOM">CUSTOM</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Conditionally render theme settings only if "CUSTOM" is selected */}
|
||||
{selectedTheme === 'CUSTOM' && (
|
||||
<>
|
||||
<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="'Poppins', sans-serif">Poppins</option>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'foss':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Theme Settings</h2>
|
||||
<h2>Free and Open Source Software (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>
|
||||
</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" />
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Delete Account</p>
|
||||
<button>Delete Account</button>
|
||||
<label>Change Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
|
@ -227,6 +536,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>
|
||||
|
|
@ -238,6 +548,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
background-color: var(--history-background-color); /* Use variable for track color */
|
||||
}
|
||||
|
|
@ -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,7 +19,7 @@
|
|||
}
|
||||
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue