From 464df4adacc7b0d4876706a1066dfc3aab9f4719 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Fri, 20 Sep 2024 10:00:54 +0200 Subject: [PATCH] Added a first login draft --- app/Header.tsx | 42 ++++--- app/Login.tsx | 138 +++++++++++++++++++++ app/Settings.tsx | 244 ++++++++++++++++++++++++++++++++++++++ app/styles/Login.css | 116 ++++++++++++++++++ app/styles/Settings.css | 113 ++++++++++++++++++ app/styles/master.css | 2 + app/styles/responsive.css | 16 +++ app/styles/variables.css | 1 + 8 files changed, 653 insertions(+), 19 deletions(-) create mode 100644 app/Login.tsx create mode 100644 app/Settings.tsx create mode 100644 app/styles/Login.css create mode 100644 app/styles/Settings.css diff --git a/app/Header.tsx b/app/Header.tsx index 2a1c9d0..96721bd 100644 --- a/app/Header.tsx +++ b/app/Header.tsx @@ -1,5 +1,6 @@ // Header.tsx import React from 'react'; +import Login from './Login'; interface HeaderProps { onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void; @@ -11,28 +12,31 @@ interface HeaderProps { const Header: React.FC = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => { return ( -
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • - {showToggle && showHistoryModelsToggle && ( + <> +
    +
    • -
      • - )} -
    -
    +
  • + +
    • +
  • + +
    • + {showToggle && showHistoryModelsToggle && ( +
  • + +
    • + )} +
+ +
+ ); }; diff --git a/app/Login.tsx b/app/Login.tsx new file mode 100644 index 0000000..c37a1fa --- /dev/null +++ b/app/Login.tsx @@ -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 ( +
+ {/* Login or Settings Button */} +
+ +
+ + {/* Conditional rendering of the initial Popup */} + {showPopup && ( +
+
+

Register

+ + {/* Name or Email Input */} +
+ setEmail(e.target.value)} + /> +
+ + {/* Password Input (displayed as asterisks) */} +
+ setPassword(e.target.value)} + /> +
+ + {/* Create Account and Sign In buttons */} +
+ +

+ Already have an account? Sign in {' '} + + here + +

+
+ + {/* Close Button */} + +
+
+ )} + + {/* Conditional rendering of the Sign-In Popup */} + {showSignInPopup && ( +
+
+

Sign In

+ + {/* Name or Email Input */} +
+ setEmail(e.target.value)} + /> +
+ + {/* Password Input (displayed as asterisks) */} +
+ setPassword(e.target.value)} + /> +
+ + {/* Log In Button */} +
+ +
+ + {/* Close Button */} + +
+
+ )} + + {/* Conditional rendering of the Settings Popup */} + {showSettingsPopup && } +
+ ); +}; + +export default Login; diff --git a/app/Settings.tsx b/app/Settings.tsx new file mode 100644 index 0000000..697fb68 --- /dev/null +++ b/app/Settings.tsx @@ -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 ( +
+

General Settings

+
+

Change Language

+ +
+
+

Notifications

+ +
+
+

Notification Frequency

+ +
+
+

Time Zone

+ +
+
+

Auto-Save

+ +
+
+

Auto-Save Frequency

+ +
+
+

Default Currency

+ +
+
+

Date Format

+ +
+
+

Time Format

+ +
+
+ ); + case 'privacy': + return ( +
+

Privacy Settings

+
+

Data Collection

+ +
+
+

Location Access

+ +
+
+

Two-Factor Authentication

+ +
+
+

Data Export

+ +
+
+

Cookie Policy

+ +
+
+

GDPR Compliance

+ +
+
+

CCPA Compliance

+ +
+
+

Biometric Data

+ +
+
+ ); + case 'theme': + return ( +
+

Theme Settings

+
+

Choose Theme Color

+ +
+
+

Font Size

+ +
+
+

Background Pattern

+ +
+
+

Font Family

+ +
+
+

Button Style

+ +
+
+ ); + case 'account': + return ( +
+

Account Settings

+
+

Change Name

+ +
+
+

Change Email

+ +
+
+

Change Password

+ +
+
+

Delete Account

+ +
+
+ ); + default: + return null; + } + }; + + return ( +
+
+
+
+
    +
  • setActiveSection('general')}>General
    • +
  • setActiveSection('privacy')}>Privacy
    • +
  • setActiveSection('theme')}>Theme
    • +
  • setActiveSection('account')}>Account
    • +
+
+
+

Settings for {accountName}

+ {renderSettingsContent()} + +
+
+
+
+ ); +}; + +export default Settings; \ No newline at end of file diff --git a/app/styles/Login.css b/app/styles/Login.css new file mode 100644 index 0000000..c2754a9 --- /dev/null +++ b/app/styles/Login.css @@ -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; +} diff --git a/app/styles/Settings.css b/app/styles/Settings.css new file mode 100644 index 0000000..ff74100 --- /dev/null +++ b/app/styles/Settings.css @@ -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 */ +} diff --git a/app/styles/master.css b/app/styles/master.css index 53fcff8..73edf95 100644 --- a/app/styles/master.css +++ b/app/styles/master.css @@ -12,4 +12,6 @@ @import './faq.css'; @import './scrollbar.css'; @import './doc.css'; +@import './Login.css'; +@import './Settings.css'; @import './responsive.css'; diff --git a/app/styles/responsive.css b/app/styles/responsive.css index 1a66c07..b995946 100644 --- a/app/styles/responsive.css +++ b/app/styles/responsive.css @@ -107,4 +107,20 @@ font-size: 1.2em; /* Adjust button font size */ 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 */ + } } \ No newline at end of file diff --git a/app/styles/variables.css b/app/styles/variables.css index 3df7f30..97b3628 100644 --- a/app/styles/variables.css +++ b/app/styles/variables.css @@ -12,4 +12,5 @@ --input-button-hover-color: rgb(0, 100, 200); --scrollbar-track: rgb(91, 172, 253); --scrollbar-thumb: rgb(0, 88, 176); + --pop-up-text: darkgrey; }