forked from React-Group/interstellar_ai
Compare commits
No commits in common. "2087f374685944df12749259497c943b84e545b4" and "9492c8765151df528ea759e531d6bc657d54f112" have entirely different histories.
2087f37468
...
9492c87651
8 changed files with 19 additions and 653 deletions
|
|
@ -1,6 +1,5 @@
|
||||||
// Header.tsx
|
// Header.tsx
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Login from './Login';
|
|
||||||
|
|
||||||
interface HeaderProps {
|
interface HeaderProps {
|
||||||
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
|
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
|
||||||
|
|
@ -12,7 +11,6 @@ interface HeaderProps {
|
||||||
|
|
||||||
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
|
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<header>
|
<header>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -34,9 +32,7 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
<Login />
|
|
||||||
</header>
|
</header>
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
138
app/Login.tsx
138
app/Login.tsx
|
|
@ -1,138 +0,0 @@
|
||||||
import React, { useState } from 'react';
|
|
||||||
import Settings from './Settings'; // Import the Settings component
|
|
||||||
|
|
||||||
const Login: React.FC = () => {
|
|
||||||
// State to handle popup visibility
|
|
||||||
const [showPopup, setShowPopup] = useState(false);
|
|
||||||
const [showSignInPopup, setShowSignInPopup] = useState(false);
|
|
||||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
|
||||||
const [showSettingsPopup, setShowSettingsPopup] = useState(false);
|
|
||||||
|
|
||||||
// Credentials state
|
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
const [accountName, setAccountName] = useState('Pluto'); // Set the account name
|
|
||||||
|
|
||||||
// Function to toggle the popup
|
|
||||||
const togglePopup = () => setShowPopup(!showPopup);
|
|
||||||
|
|
||||||
// Function to toggle the sign-in popup
|
|
||||||
const toggleSignInPopup = () => {
|
|
||||||
setShowSignInPopup(!showSignInPopup);
|
|
||||||
setShowPopup(false); // Hide login popup when opening the sign-in popup
|
|
||||||
};
|
|
||||||
|
|
||||||
// Function to handle login
|
|
||||||
const handleLogin = () => {
|
|
||||||
if ((email === 'pluto@imareal.planet' || accountName === 'Pluto') && password === 'fuckTheSun1234') {
|
|
||||||
setIsLoggedIn(true); // Successful login
|
|
||||||
setShowSignInPopup(false); // Close the sign-in popup
|
|
||||||
} else {
|
|
||||||
alert('Incorrect credentials');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Function to toggle the settings popup
|
|
||||||
const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{/* Login or Settings Button */}
|
|
||||||
<div className="login-button">
|
|
||||||
<button onClick={isLoggedIn ? toggleSettingsPopup : togglePopup}>
|
|
||||||
{isLoggedIn ? 'Settings' : 'Register'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Conditional rendering of the initial Popup */}
|
|
||||||
{showPopup && (
|
|
||||||
<div className="popup-overlay">
|
|
||||||
<div className="popup-content">
|
|
||||||
<h2>Register</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>
|
|
||||||
<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>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
placeholder="Password"
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Log In Button */}
|
|
||||||
<div>
|
|
||||||
<button className="log-into-account" onClick={handleLogin}>Log In</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Close Button */}
|
|
||||||
<button className="close-popup" onClick={toggleSignInPopup}>
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Conditional rendering of the Settings Popup */}
|
|
||||||
{showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Login;
|
|
||||||
244
app/Settings.tsx
244
app/Settings.tsx
|
|
@ -1,244 +0,0 @@
|
||||||
import React, { useState } from'react';
|
|
||||||
|
|
||||||
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
|
|
||||||
const [activeSection, setActiveSection] = useState('general');
|
|
||||||
|
|
||||||
const renderSettingsContent = () => {
|
|
||||||
switch (activeSection) {
|
|
||||||
case 'general':
|
|
||||||
return (
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Notifications</p>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" /> Enable notifications
|
|
||||||
</label>
|
|
||||||
</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>
|
|
||||||
</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>
|
|
||||||
</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>
|
|
||||||
</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
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Location Access</p>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" /> Enable location access
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Two-Factor Authentication</p>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" /> Enable 2FA
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
case 'theme':
|
|
||||||
return (
|
|
||||||
<div className="settings-section">
|
|
||||||
<h2>Theme 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>
|
|
||||||
</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" />
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Change Email</p>
|
|
||||||
<input type="email" placeholder="New Email" />
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="popup-overlay">
|
|
||||||
<div className="settings-content">
|
|
||||||
<div className="settings-container">
|
|
||||||
<div className="sidebar">
|
|
||||||
<ul>
|
|
||||||
<li onClick={() => setActiveSection('general')}>General</li>
|
|
||||||
<li onClick={() => setActiveSection('privacy')}>Privacy</li>
|
|
||||||
<li onClick={() => setActiveSection('theme')}>Theme</li>
|
|
||||||
<li onClick={() => setActiveSection('account')}>Account</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="settings-main">
|
|
||||||
<h2>Settings for {accountName}</h2>
|
|
||||||
{renderSettingsContent()}
|
|
||||||
<button className="close-popup" onClick={closeSettings}>Close</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Settings;
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
.login-button {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 10px;
|
|
||||||
z-index: 9999; /* Highest z-index for the login button */
|
|
||||||
margin: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-button button {
|
|
||||||
padding: 10px 20px;
|
|
||||||
background-color: var(--input-button-color);
|
|
||||||
color: var(--text-color);
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-button button:hover {
|
|
||||||
background-color: var(--input-button-hover-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Overlay for popup - full screen and centered */
|
|
||||||
.popup-overlay {
|
|
||||||
position: fixed; /* Fixed to cover the entire viewport */
|
|
||||||
top: 0; /* Ensure it starts from the top */
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 10000; /* Higher than the header to cover the screen */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Popup content box */
|
|
||||||
.popup-content {
|
|
||||||
background: var(--background-color);
|
|
||||||
color: var(--text-color);
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 300px;
|
|
||||||
text-align: center;
|
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Input styles */
|
|
||||||
.popup-content input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 10px 0;
|
|
||||||
border: 1px solid var(--input-border-color);
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 16px;
|
|
||||||
transition: border-color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-content input:focus {
|
|
||||||
border-color: var(--input-button-color);
|
|
||||||
outline: none; /* Remove default outline */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Close button */
|
|
||||||
.close-popup {
|
|
||||||
background: red; /* Exception to the rule */
|
|
||||||
color: var(--text-color);
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-into-account {
|
|
||||||
background: green; /* Exception to the rule */
|
|
||||||
color: var(--text-color);
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer section */
|
|
||||||
.popup-footer {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-footer button {
|
|
||||||
margin-right: 10px;
|
|
||||||
padding: 8px 15px;
|
|
||||||
background-color: var(--input-button-color);
|
|
||||||
color: var(--text-color);
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-footer button:hover {
|
|
||||||
background-color: var(--input-button-hover-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-footer a {
|
|
||||||
color: var(--user-message-color);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-footer a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-content p {
|
|
||||||
color: var(--pop-up-text);
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
/* Overlay for popup - full screen and centered */
|
|
||||||
.popup-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 10000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Settings content */
|
|
||||||
.settings-content {
|
|
||||||
background: #f5f5f5;
|
|
||||||
color: #333;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 90%;
|
|
||||||
max-width: 800px;
|
|
||||||
height: 90%;
|
|
||||||
max-height: 600px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
|
|
||||||
grid-auto-flow: column;
|
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
||||||
overflow: scroll; /* Prevents overflow of the content */
|
|
||||||
position: relative; /* Needed for absolute positioning of close button */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar styles */
|
|
||||||
.sidebar {
|
|
||||||
background: #e0e0e0;
|
|
||||||
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);
|
|
||||||
overflow-y: auto; /* Scroll if content exceeds height */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
grid-column: 1; /* Places sidebar in the first grid column */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar item styles */
|
|
||||||
.sidebar ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0; /* Ensure no margin for the list */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column; /* Make the ul a column */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar li {
|
|
||||||
margin: 10px 0;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar li:hover {
|
|
||||||
background: #d0d0d0; /* Highlight on hover */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar li.active {
|
|
||||||
background: #b0b0b0; /* Active section highlight */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Main settings area */
|
|
||||||
.settings-main {
|
|
||||||
grid-column: 2; /* Places main settings in the second grid column */
|
|
||||||
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 */
|
|
||||||
flex-direction: column; /* Stack content vertically */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Close button positioning */
|
|
||||||
.close-popup {
|
|
||||||
background-color: #ff4d4d;
|
|
||||||
color: #fff;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute; /* Position absolute to top right */
|
|
||||||
top: 20px; /* Distance from top */
|
|
||||||
right: 20px; /* Distance from right */
|
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-popup:hover {
|
|
||||||
background-color: #e63939; /* Darker red on hover */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Additional styles for inputs and options */
|
|
||||||
.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;
|
|
||||||
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 */
|
|
||||||
}
|
|
||||||
|
|
@ -12,6 +12,4 @@
|
||||||
@import './faq.css';
|
@import './faq.css';
|
||||||
@import './scrollbar.css';
|
@import './scrollbar.css';
|
||||||
@import './doc.css';
|
@import './doc.css';
|
||||||
@import './Login.css';
|
|
||||||
@import './Settings.css';
|
|
||||||
@import './responsive.css';
|
@import './responsive.css';
|
||||||
|
|
|
||||||
|
|
@ -108,19 +108,3 @@
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Responsive adjustments for the settings*/
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.settings-content {
|
|
||||||
flex-direction: column; /* Stack sidebar and main content on smaller screens */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
width: 100%; /* Full width for sidebar */
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-main {
|
|
||||||
width: 100%; /* Full width for main content */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -12,5 +12,4 @@
|
||||||
--input-button-hover-color: rgb(0, 100, 200);
|
--input-button-hover-color: rgb(0, 100, 200);
|
||||||
--scrollbar-track: rgb(91, 172, 253);
|
--scrollbar-track: rgb(91, 172, 253);
|
||||||
--scrollbar-thumb: rgb(0, 88, 176);
|
--scrollbar-thumb: rgb(0, 88, 176);
|
||||||
--pop-up-text: darkgrey;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue