forked from React-Group/interstellar_ai
Merge pull request 'Added a first login draft' (#27) from sageTheDm/interstellar_ai:main into main
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/27
This commit is contained in:
commit
0176b690b5
8 changed files with 653 additions and 19 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
// 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;
|
||||||
|
|
@ -11,28 +12,31 @@ 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>
|
<>
|
||||||
<ul>
|
<header>
|
||||||
<li>
|
<ul>
|
||||||
<button onClick={() => onViewChange('AI')} className="header-button header-logo">
|
|
||||||
<img src="/img/logo.png" alt="logo" className="header-logo" />
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button onClick={() => onViewChange('FAQ')} className="header-button">FAQ</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button onClick={() => onViewChange('Documentation')} className="header-button">Documentation</button>
|
|
||||||
</li>
|
|
||||||
{showToggle && showHistoryModelsToggle && (
|
|
||||||
<li>
|
<li>
|
||||||
<button onClick={toggleDivs} className="header-button">
|
<button onClick={() => onViewChange('AI')} className="header-button header-logo">
|
||||||
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
|
<img src="/img/logo.png" alt="logo" className="header-logo" />
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
)}
|
<li>
|
||||||
</ul>
|
<button onClick={() => onViewChange('FAQ')} className="header-button">FAQ</button>
|
||||||
</header>
|
</li>
|
||||||
|
<li>
|
||||||
|
<button onClick={() => onViewChange('Documentation')} className="header-button">Documentation</button>
|
||||||
|
</li>
|
||||||
|
{showToggle && showHistoryModelsToggle && (
|
||||||
|
<li>
|
||||||
|
<button onClick={toggleDivs} className="header-button">
|
||||||
|
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
<Login />
|
||||||
|
</header>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
138
app/Login.tsx
Normal file
138
app/Login.tsx
Normal file
|
|
@ -0,0 +1,138 @@
|
||||||
|
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
Normal file
244
app/Settings.tsx
Normal file
|
|
@ -0,0 +1,244 @@
|
||||||
|
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;
|
||||||
116
app/styles/Login.css
Normal file
116
app/styles/Login.css
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
113
app/styles/Settings.css
Normal file
113
app/styles/Settings.css
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
/* 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,4 +12,6 @@
|
||||||
@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,3 +108,19 @@
|
||||||
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,4 +12,5 @@
|
||||||
--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…
Reference in a new issue