forked from React-Group/interstellar_ai
Merge branch 'main' of interstellardevelopment.org:React-Group/interstellar_ai
This commit is contained in:
Patrick_Pluto
commit
a6699924c8
8 changed files with 175 additions and 117 deletions
|
|
@ -1,8 +1,6 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const Models: React.FC = () => {
|
||||
const [selectedModel, setSelectedModel] = useState<string>('Offline Fast');
|
||||
|
||||
const modelOptions = [
|
||||
'Offline Fast',
|
||||
'Offline Fast (FOSS)',
|
||||
|
|
@ -18,14 +16,25 @@ const Models: React.FC = () => {
|
|||
'Online Expensive (Google)',
|
||||
];
|
||||
|
||||
const [selectedModel, setSelectedModel] = useState<string>(() => {
|
||||
// Load the selected model from localStorage on initial render
|
||||
return localStorage.getItem('selectedModel') || 'Offline Fast';
|
||||
});
|
||||
|
||||
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setSelectedModel(event.target.value);
|
||||
const newModel = event.target.value;
|
||||
setSelectedModel(newModel);
|
||||
};
|
||||
|
||||
const isOfflineModel = (model: string) => {
|
||||
return model.includes('Offline');
|
||||
};
|
||||
|
||||
// Save selected model to localStorage whenever it changes
|
||||
useEffect(() => {
|
||||
localStorage.setItem('selectedModel', selectedModel);
|
||||
}, [selectedModel]);
|
||||
|
||||
return (
|
||||
<div className="model-background">
|
||||
<div className="models">
|
||||
|
|
@ -69,31 +78,37 @@ const Models: React.FC = () => {
|
|||
</button>
|
||||
<button className="financial-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Character</h3>
|
||||
<h3>Finance</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="weather-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Character</h3>
|
||||
<h3>Weather</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="time-planner-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Character</h3>
|
||||
<h3>Time</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="image-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Character</h3>
|
||||
<h3>Image</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Character</h3>
|
||||
<h3>Custom1</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Custom2</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme';
|
||||
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
|
||||
|
||||
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
|
||||
|
|
@ -57,6 +58,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
|
||||
const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
|
||||
const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
|
||||
const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color:').trim());
|
||||
|
||||
// Theme selection
|
||||
const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
|
||||
|
|
@ -199,6 +201,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
useEffect(() => {
|
||||
localStorage.setItem('fontSize', fontSize);
|
||||
}, [fontSize]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('burgerMenu', burgerMenu);
|
||||
}, [fontSize]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('selectedTheme', selectedTheme);
|
||||
|
|
@ -315,7 +321,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
if (settings.fontSize) {
|
||||
setFontSize(settings.fontSize);
|
||||
document.documentElement.style.setProperty('--font-size', settings.fontSize);
|
||||
}
|
||||
}
|
||||
|
||||
if (settings.burgerMenu) {
|
||||
setBurgerMenu(settings.fontSize);
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -472,105 +483,25 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<select
|
||||
value={selectedTheme}
|
||||
onChange={(e) => {
|
||||
const theme = e.target.value;
|
||||
const theme = e.target.value; // Get the selected value from the event
|
||||
setSelectedTheme(theme); // Update state for selected theme
|
||||
|
||||
// Apply the appropriate theme based on selection
|
||||
switch (theme) {
|
||||
switch (theme) { // Use 'theme' instead of 'selectedTheme'
|
||||
case 'IOMARKET':
|
||||
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // 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'); // Input fields background
|
||||
document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color
|
||||
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'); // Models section background
|
||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color
|
||||
document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
|
||||
break;
|
||||
case 'WHITE':
|
||||
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background
|
||||
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'); // Input fields background
|
||||
document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color
|
||||
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'); // Models section background
|
||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color
|
||||
document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
applyWhiteTheme(); // Call the function to apply the WHITE theme
|
||||
break;
|
||||
case 'BLACK':
|
||||
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
|
||||
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'); // Input fields background
|
||||
document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
|
||||
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'); // Models section background
|
||||
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
|
||||
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
applyBlackTheme(); // Call the function to apply the BLACK theme
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
// Handle custom theme logic here
|
||||
// Handle custom theme logic here if necessary
|
||||
break;
|
||||
default:
|
||||
applyIOMarketTheme(); // Fallback to the IOMARKET theme
|
||||
break;
|
||||
}
|
||||
}} // Handle theme selection
|
||||
|
|
@ -581,7 +512,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<option value="BLACK">BLACK</option>
|
||||
<option value="CUSTOM">CUSTOM</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conditionally render theme settings only if "CUSTOM" is selected */}
|
||||
{selectedTheme === 'CUSTOM' && (
|
||||
<>
|
||||
|
|
@ -809,6 +741,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-option">
|
||||
<p>Burger Menu Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={burgerMenu}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setBurgerMenu(newColor);
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-option">
|
||||
<p>Input Border Color</p>
|
||||
<input
|
||||
|
|
|
|||
96
app/components/theme.ts
Normal file
96
app/components/theme.ts
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
// theme.ts
|
||||
export const applyIOMarketTheme = () => {
|
||||
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // 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'); // Input fields background
|
||||
document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color
|
||||
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'); // Models section background
|
||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color
|
||||
document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
|
||||
};
|
||||
|
||||
export const applyWhiteTheme = () => {
|
||||
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background
|
||||
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'); // Input fields background
|
||||
document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color
|
||||
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'); // Models section background
|
||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color
|
||||
document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
|
||||
};
|
||||
|
||||
export const applyBlackTheme = () => {
|
||||
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
|
||||
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'); // Input fields background
|
||||
document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
|
||||
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'); // Models section background
|
||||
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
|
||||
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
|
||||
};
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
.left-panel {
|
||||
margin-top: 10vh;
|
||||
margin-top: 5em;
|
||||
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 */
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
.conversation-container {
|
||||
margin-top: 10vh;
|
||||
margin-top: 5em;
|
||||
flex: 1;
|
||||
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
|
||||
background-color: var(--conversation-background-color); /* Use variable for background color */
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ body {
|
|||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 1vh;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
header{
|
||||
position: absolute;
|
||||
padding: 0 20px;
|
||||
top: 0;
|
||||
top: 2em;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
height: 5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1.5vh 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.hamburger{
|
||||
|
|
@ -40,14 +40,16 @@ header{
|
|||
.nav-links{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
width: 25vw;
|
||||
height: 5vh;
|
||||
top: 1em;
|
||||
gap: 1em;
|
||||
width: 25em;
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.nav-btn{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
|
|
@ -63,8 +65,9 @@ header{
|
|||
}
|
||||
|
||||
.login-button .header-login-button{
|
||||
font-size: 1em;
|
||||
position: absolute;
|
||||
top: 2.5vh;
|
||||
top: 1.5em;
|
||||
right: 1vw;
|
||||
padding: 10px 20px;
|
||||
background-color: var(--input-button-color);
|
||||
|
|
|
|||
|
|
@ -61,11 +61,11 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: var(--text-color); /* Use variable for overlay text color */
|
||||
color: var(--overlay-text-color); /* Use variable for overlay text color */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: x-large;
|
||||
font-size: large;
|
||||
transition: opacity 0.5s ease;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
|
|
@ -176,11 +176,10 @@
|
|||
color: var(--text-color); /* Text color */
|
||||
font-size: medium; /* Font size for dropdown */
|
||||
cursor: pointer; /* Cursor change on hover */
|
||||
transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition */
|
||||
transition: all 0.3s ease-in-out, border 0.3s ease; /* Smooth transition */
|
||||
}
|
||||
#model-select option:hover{
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
#model-select:hover {
|
||||
background-color: var(--button-hover-background-color); /* Change background on hover */
|
||||
border-color: var(--button-background-color); /* Change border color on hover */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
--conversation-background-color: #79832e; /* Background color for conversation container */
|
||||
--doc-background-color: #ffffff; /* Background color for documents */
|
||||
--close-button-color: red;
|
||||
--burger-menu-background-color: #79832e;
|
||||
--burger-menu-background-color: #79832e; /*NEW*/
|
||||
--overlay-text-color:white; /*NEW*/
|
||||
|
||||
/* FAQ Colors */
|
||||
--faq-background-color: #474D22; /* Background color for FAQ section */
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
--faq-item-text-color: #333; /* Text color for FAQ items */
|
||||
--faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
|
||||
|
||||
--popup-background-color: #8B9635
|
||||
--popup-background-color: #8B9635;
|
||||
--pop-up-text: #000; /* Text color for pop-ups */
|
||||
--input-border-color: #8B9635; /* Input border color */
|
||||
--font-family: 'Poppins', 'sans-serif';/* Default font family */
|
||||
|
|
|
|||
Loading…
Reference in a new issue