Added a first login draft
This commit is contained in:
parent
ed6e812b6c
commit
464df4adac
8 changed files with 653 additions and 19 deletions
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 './scrollbar.css';
|
||||
@import './doc.css';
|
||||
@import './Login.css';
|
||||
@import './Settings.css';
|
||||
@import './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 */
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue