YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Compare commits

base: YasinOnm08:b034292e6483a55731022f60fed633ce749f07e5
Branches Tags
YasinOnm08:main
React-Group:main
..
compare: YasinOnm08:6ea8d31620afc2de483c55d525778f69498cbca2
Branches Tags
YasinOnm08:main
React-Group:main

No commits in common. "b034292e6483a55731022f60fed633ce749f07e5" and "6ea8d31620afc2de483c55d525778f69498cbca2" have entirely different histories.
b034292e64 ... 6ea8d31620

10 changed files with 172 additions and 257 deletions
Download patch file Download diff file Expand all files Collapse all files

148
app/components/Login.tsx
View file

@ -3,8 +3,8 @@ import Settings from './Settings'; // Import the Settings component
const Login: React.FC = () => { const Login: React.FC = () => {
// State to handle popup visibility // State to handle popup visibility
const [showLoginPopup, setShowLoginPopup] = useState(false); const [showPopup, setShowPopup] = useState(false);
const [showSignUpPopup, setShowSignUpPopup] = useState(false); const [showSignInPopup, setShowSignInPopup] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false);
const [showSettingsPopup, setShowSettingsPopup] = useState(false); const [showSettingsPopup, setShowSettingsPopup] = useState(false);
@ -12,40 +12,26 @@ const Login: React.FC = () => {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [accountName, setAccountName] = useState('Pluto'); // Set the account name const [accountName, setAccountName] = useState('Pluto'); // Set the account name
const [newAccountEmail, setNewAccountEmail] = useState('');
const [newAccountPassword, setNewAccountPassword] = useState('');
// Fixed credentials // Function to toggle the popup
const fixedEmail = 'pluto@imareal.planet'; const togglePopup = () => setShowPopup(!showPopup);
const fixedPassword = 'fuckTheSun1234';
const fixedAccount = 'Pluto';
// Function to toggle the login popup // Function to toggle the sign-in popup
const toggleLoginPopup = () => setShowLoginPopup(!showLoginPopup); const toggleSignInPopup = () => {
setShowSignInPopup(!showSignInPopup);
// Function to toggle the sign-up popup setShowPopup(false); // Hide login popup when opening the sign-in popup
const toggleSignUpPopup = () => {
setShowSignUpPopup(!showSignUpPopup);
setShowLoginPopup(false); // Hide login popup when opening the sign-up popup
}; };
// Function to handle login // Function to handle login
const handleLogin = () => { const handleLogin = () => {
if ((email === fixedEmail || accountName === fixedAccount) && password === fixedPassword) { if ((email === 'pluto@imareal.planet' || accountName === 'Pluto') && password === 'fuckTheSun1234') {
setIsLoggedIn(true); // Successful login setIsLoggedIn(true); // Successful login
setShowLoginPopup(false); // Close the login popup setShowSignInPopup(false); // Close the sign-in popup
} else { } else {
alert('Incorrect credentials'); alert('Incorrect credentials');
} }
}; };
// Function to handle account creation
const handleCreateAccount = () => {
console.log('New Account Created:', newAccountEmail, newAccountPassword);
alert('Account created successfully! You can now log in.');
toggleSignUpPopup(); // Close sign-up popup
};
// Function to toggle the settings popup // Function to toggle the settings popup
const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup); const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup);
@ -53,38 +39,79 @@ const Login: React.FC = () => {
<div> <div>
{/* Login or Settings Button */} {/* Login or Settings Button */}
<div className="login-button"> <div className="login-button">
<button onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}> <button onClick={isLoggedIn ? toggleSettingsPopup : togglePopup}>
{isLoggedIn ? 'Settings' : 'Log In'} {isLoggedIn ? 'Settings' : 'Register'}
</button> </button>
</div> </div>
{/* Conditional rendering of the Login Popup */} {/* Conditional rendering of the initial Popup */}
{showLoginPopup && ( {showPopup && (
<div className="popup-overlay"> <div className="popup-overlay">
<div className="popup-content"> <div className="popup-content">
<h2>Log In</h2> <h2>Register</h2>
{/* Close Button */}
<button className="close-popup" onClick={toggleLoginPopup} aria-label="Close popup">
Close
</button>
{/* Name or Email Input */} {/* Name or Email Input */}
<div> <div>
<input <input
type="text" type="text"
placeholder="Name or Email" placeholder="Name or Email"
value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
/> />
</div> </div>
{/* Password Input */} {/* Password Input (displayed as asterisks) */}
<div>
<input
type="password"
placeholder="Password"
onChange={(e) => setPassword(e.target.value)}
/>
</div>
{/* Create Account and Sign In buttons */}
<div className="popup-footer">
<button onClick={() => alert('Create Account clicked')}>
Create Account
</button>
<p>
Already have an account? Sign in {' '}
<span
style={{ color: 'blue', cursor: 'pointer' }}
onClick={toggleSignInPopup}
>
here
</span>
</p>
</div>
{/* Close Button */}
<button className="close-popup" onClick={togglePopup}>
Close
</button>
</div>
</div>
)}
{/* Conditional rendering of the Sign-In Popup */}
{showSignInPopup && (
<div className="popup-overlay">
<div className="popup-content">
<h2>Sign In</h2>
{/* Name or Email Input */}
<div>
<input
type="text"
placeholder="Name or Email"
onChange={(e) => setEmail(e.target.value)}
/>
</div>
{/* Password Input (displayed as asterisks) */}
<div> <div>
<input <input
type="password" type="password"
placeholder="Password" placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
/> />
</div> </div>
@ -94,53 +121,8 @@ const Login: React.FC = () => {
<button className="log-into-account" onClick={handleLogin}>Log In</button> <button className="log-into-account" onClick={handleLogin}>Log In</button>
</div> </div>
{/* Text for creating an account */}
<p>
Don't have an account yet? Create one {' '}
<span
style={{ color: 'blue', cursor: 'pointer' }}
onClick={toggleSignUpPopup}
>
here
</span>
</p>
</div>
</div>
)}
{/* Conditional rendering of the Sign-Up Popup */}
{showSignUpPopup && (
<div className="popup-overlay">
<div className="popup-content">
<h2>Create Account</h2>
{/* New Account Email Input */}
<div>
<input
type="text"
placeholder="Email"
value={newAccountEmail}
onChange={(e) => setNewAccountEmail(e.target.value)}
/>
</div>
{/* New Account Password Input */}
<div>
<input
type="password"
placeholder="Password"
value={newAccountPassword}
onChange={(e) => setNewAccountPassword(e.target.value)}
/>
</div>
{/* Create Account Button */}
<div>
<button className="create-account" onClick={handleCreateAccount}>Create Account</button>
</div>
{/* Close Button */} {/* Close Button */}
<button className="close-popup" onClick={toggleSignUpPopup} aria-label="Close popup"> <button className="close-popup" onClick={toggleSignInPopup}>
Close Close
</button> </button>
</div> </div>

199
app/components/Settings.tsx
View file

@ -45,7 +45,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [newPassword, setNewPassword] = useState<string>(''); const [newPassword, setNewPassword] = useState<string>('');
// Theme selection // Theme selection
const [selectedTheme, setSelectedTheme] = useState<string>('default'); const [selectedTheme, setSelectedTheme] = useState<string>('IOMARKET'); // Default value can be 'IOMARKET'
// Effect to update CSS variables on theme state change // Effect to update CSS variables on theme state change
@ -99,85 +99,43 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<h2>General Settings</h2> <h2>General Settings</h2>
<div className="settings-option"> <div className="settings-option">
<label>Preferred Language</label> <label>Preferred Language</label>
<select <input
type="text"
value={preferredLanguage} value={preferredLanguage}
onChange={(e) => setPreferredLanguage(e.target.value)} onChange={(e) => setPreferredLanguage(e.target.value)}
> />
<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="ru">Russian</option>
<option value="ar">Arabic</option>
{/* Add more languages as needed */}
</select>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<label>Preferred Currency</label> <label>Preferred Currency</label>
<select <input
type="text"
value={preferredCurrency} value={preferredCurrency}
onChange={(e) => setPreferredCurrency(e.target.value)} onChange={(e) => setPreferredCurrency(e.target.value)}
> />
<option value="usd">USD</option>
<option value="eur">EUR</option>
<option value="gbp">GBP</option>
<option value="jpy">JPY</option>
<option value="cad">CAD</option>
<option value="aud">AUD</option>
<option value="chf">CHF</option>
<option value="cny">CNY</option>
<option value="inr">INR</option>
{/* Add more currencies as needed */}
</select>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<label>Date Format</label> <label>Date Format</label>
<select <input
type="text"
value={dateFormat} value={dateFormat}
onChange={(e) => setDateFormat(e.target.value)} onChange={(e) => setDateFormat(e.target.value)}
> />
<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>
<option value="mm-dd-yyyy">MM-DD-YYYY</option>
<option value="dd-mm-yyyy">DD-MM-YYYY</option>
{/* Add more formats as needed */}
</select>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<label>Time Format</label> <label>Time Format</label>
<select <input
type="text"
value={timeFormat} value={timeFormat}
onChange={(e) => setTimeFormat(e.target.value)} onChange={(e) => setTimeFormat(e.target.value)}
> />
<option value="12-hour">12 Hour</option>
<option value="24-hour">24 Hour</option>
<option value="am-pm">AM/PM Format</option>
{/* Add more formats if necessary */}
</select>
</div> </div>
<div className="settings-option"> <div className="settings-option">
<label>Time Zone</label> <label>Time Zone</label>
<select <input
type="text"
value={timeZone} value={timeZone}
onChange={(e) => setTimeZone(e.target.value)} onChange={(e) => setTimeZone(e.target.value)}
> />
<option value="GMT">GMT</option>
<option value="EST">EST</option>
<option value="CST">CST</option>
<option value="MST">MST</option>
<option value="PST">PST</option>
<option value="UTC">UTC</option>
<option value="BST">BST</option>
<option value="IST">IST</option>
<option value="CET">CET</option>
<option value="JST">JST</option>
{/* Add more time zones as needed */}
</select>
</div> </div>
</div> </div>
); );
@ -239,110 +197,111 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
// Apply the appropriate theme based on selection // Apply the appropriate theme based on selection
switch (theme) { switch (theme) {
case 'IOMARKET': case 'IOMARKET':
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color 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('--header-text-color', '#ffffff'); // Header text color
document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background 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('--text-color', '#474D22'); // Main text color
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background 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-color', '#8B9635'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Hover color for input buttons
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // Background color for user messages
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Text color for user messages
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // Background color for AI messages
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color 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-background-color', '#8B9635'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover 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('--models-background-color', '#ffffff'); // Background for models section
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Background color for left panel
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Background color for conversation container
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // Background color for FAQ section
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // Heading color for FAQ section
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // Background color for FAQ items
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // Heading color for FAQ items
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // Text color for FAQ items
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color 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('--input-border-color', '#8B9635'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size document.documentElement.style.setProperty('--font-size', '16px'); // Font size
break; break;
case 'WHITE': case 'WHITE':
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background 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('--header-text-color', '#000000'); // Header text color
document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background 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('--text-color', '#000000'); // Main text color
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background 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-color', '#007bff'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Hover color for input buttons
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // Background color for user messages
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // Text color for user messages
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // Background color for AI messages
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color 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-background-color', '#007bff'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover 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('--models-background-color', '#ffffff'); // Background for models section
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Background color for left panel
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Background color for conversation container
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // Background color for FAQ section
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // Heading color for FAQ section
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // Background color for FAQ items
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // Heading color for FAQ items
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // Text color for FAQ items
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color 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('--input-border-color', '#ced4da'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size document.documentElement.style.setProperty('--font-size', '16px'); // Font size
break; break;
case 'BLACK': case 'BLACK':
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background 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('--header-text-color', '#ffffff'); // Header text color
document.documentElement.style.setProperty('--background-color', '#121212'); // Main background 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('--text-color', '#e0e0e0'); // Main text color
document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background 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-color', '#3c3c3c'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Hover color for input buttons
document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background document.documentElement.style.setProperty('--user-message-background-color', '#2c2c2c'); // Background color for user messages
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // Text color for user messages
document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background document.documentElement.style.setProperty('--ai-message-background-color', '#2a2a2a'); // Background color for AI messages
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color 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-background-color', '#3c3c3c'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover 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('--models-background-color', '#1e1e1e'); // Background for models section
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // Background color for history
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Background color for left panel
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Background color for conversation container
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Background color for documents
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // Background color for FAQ section
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // Heading color for FAQ section
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // Background color for FAQ items
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // Heading color for FAQ items
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Text color for FAQ items
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // Hover background color for FAQ items
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color 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('--input-border-color', '#3c3c3c'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size document.documentElement.style.setProperty('--font-size', '16px'); // Font size
break; break;
case 'CUSTOM': case 'CUSTOM':
// Handle custom theme logic here // Do nothing, CUSTOM will display the customization options
break; break;
default: default:
break; break;
} }
}} // Handle theme selection }} // Handle theme selection
> >
<option value="default">Select your style...</option>
<option value="IOMARKET">IOMARKET</option> <option value="IOMARKET">IOMARKET</option>
<option value="WHITE">WHITE</option> <option value="WHITE">WHITE</option>
<option value="BLACK">BLACK</option> <option value="BLACK">BLACK</option>
<option value="CUSTOM">CUSTOM</option> <option value="CUSTOM">CUSTOM</option>
</select> </select>
</div> </div>
{/* Conditionally render theme settings only if "CUSTOM" is selected */} {/* Conditionally render theme settings only if "CUSTOM" is selected */}
{selectedTheme === 'CUSTOM' && ( {selectedTheme === 'CUSTOM' && (
<> <>

46
app/styles/Login.css
View file

@ -1,13 +1,3 @@
/* Container for the login layout */
.login-container {
display: grid;
grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
grid-auto-flow: column;
overflow-x: hidden;
height: 100%; /* Ensure it takes full height */
}
/* Button for login action */
.login-button { .login-button {
position: absolute; position: absolute;
top: 5px; top: 5px;
@ -53,7 +43,6 @@
width: 300px; width: 300px;
text-align: center; text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
position: relative; /* For positioning the close button */
} }
/* Input styles */ /* Input styles */
@ -72,28 +61,10 @@
outline: none; /* Remove default outline */ outline: none; /* Remove default outline */
} }
/* Close button styles */ /* Close button */
.close-popup { .close-popup {
background: var(--close-button-color); /* Use variable for close button color */ background: var(--close-button-color); /* Use variable for close button color */
color: white; /* Use white for text color */ color: var(--text-color);
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
position: absolute; /* Position the button absolutely */
top: 10px; /* Distance from the top */
right: 10px; /* Distance from the right */
transition: background 0.3s;
}
.close-popup:hover {
background: darkred; /* Optional hover effect */
}
/* Log In button styles */
.log-into-account {
background: green; /* Use variable for login button color */
color: white;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
@ -101,7 +72,17 @@
margin-top: 20px; margin-top: 20px;
} }
/* Footer section for popups */ .log-into-account {
background: var(--login-button-color); /* Use variable for login button color */
color: var(--text-color);
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
margin-top: 20px;
}
/* Footer section */
.popup-footer { .popup-footer {
margin-top: 15px; margin-top: 15px;
} }
@ -129,7 +110,6 @@
text-decoration: underline; text-decoration: underline;
} }
/* Paragraph styles within popup */
.popup-content p { .popup-content p {
color: var(--popup-text-color); /* Use variable for paragraph text color */ color: var(--popup-text-color); /* Use variable for paragraph text color */
margin: 10px; margin: 10px;

16
app/styles/Settings.css
View file

@ -97,23 +97,23 @@
/* Close button positioning */ /* Close button positioning */
.close-popup { .close-popup {
background: var(--close-button-color); /* Use variable for close button color */ background-color: var(--close-button-color);
color: white; /* Use white for text color */ color: var(--user-message-text-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px;
cursor: pointer; cursor: pointer;
position: absolute; /* Position the button absolutely */ position: absolute; /* Position absolute to top right */
top: 10px; /* Distance from the top */ top: 20px; /* Distance from top */
right: 10px; /* Distance from the right */ right: 20px; /* Distance from right */
transition: background 0.3s; transition: background 0.3s;
} }
.close-popup:hover { .close-popup:hover {
background: darkred; /* Optional hover effect */ background-color: var(--close-button-hover-color); /* Darker red on hover */
} }
/* Additional styles for inputs and options */ /* Additional styles for inputs and options */
.settings-option { .settings-option {
margin-bottom: 20px; /* Adds space between each setting option */ margin-bottom: 20px; /* Adds space between each setting option */

2
app/styles/container.css
View file

@ -14,8 +14,6 @@
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */ transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
background-color: var(--left-panel-background-color); /* Use variable for background color */ background-color: var(--left-panel-background-color); /* Use variable for background color */
border-radius: 0 1em 0 0; border-radius: 0 1em 0 0;
margin-left: 0;
padding-right: 1em;
} }
.left-panel.hidden { .left-panel.hidden {

4
app/styles/global.css
View file

@ -45,7 +45,3 @@ input {
input:hover { input:hover {
border-color: var(--button-hover-background-color); border-color: var(--button-hover-background-color);
} }
select{
background-color: var(--input-background-color);
}

2
app/styles/history.css
View file

@ -1,7 +1,7 @@
.history-background { .history-background {
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/2; grid-row: 1/2;
height: 45vh; height: 40vh;
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;

3
app/styles/output.css
View file

@ -12,7 +12,8 @@
font-size: 1em; font-size: 1em;
overflow-y: auto; overflow-y: auto;
width: calc(100% - 2em); /* Corrected calculation for width */ width: calc(100% - 2em); /* Corrected calculation for width */
height: 75vh; height: 70vh;
margin-bottom: 1vh;
} }
#conversation { #conversation {

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

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

1
app/styles/variables.css
View file

@ -18,7 +18,6 @@
--left-panel-background-color: #79832e; /* Background color for left panel */ --left-panel-background-color: #79832e; /* Background color for left panel */
--conversation-background-color: #79832e; /* Background color for conversation container */ --conversation-background-color: #79832e; /* Background color for conversation container */
--doc-background-color: #ffffff; /* Background color for documents */ --doc-background-color: #ffffff; /* Background color for documents */
--close-button-color: red;
/* FAQ Colors */ /* FAQ Colors */
--faq-background-color: #474D22; /* Background color for FAQ section */ --faq-background-color: #474D22; /* Background color for FAQ section */