candifloss/ldapmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

search page

Browse Source
This commit is contained in:
Candifloss 2024-10-31 23:52:49 +05:30
parent 494af30e43
commit acfb0ddfc6
6 changed files with 479 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
test/css/search.css Normal file
View File

@ -0,0 +1,156 @@
* {
all: unset;
margin: 0;
padding: 0;
box-sizing: border-box;
}
title {
display: none;
}
body {
font-family: "Arial", sans-serif;
background: linear-gradient(135deg, #283e4a, #1c2e38);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 20px;
}
body .search-page {
background-color: rgba(255, 255, 255, 0.92);
padding: 40px;
border-radius: 12px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
body .search-page .search-bar {
display: flex;
gap: 10px;
padding: 20px 20px 10px 20px;
border-radius: 12px 12px 0 0;
justify-content: space-between;
align-items: center;
background-color: #c4c4c4;
height: 75px;
}
body .search-page .search-bar input[type=text],
body .search-page .search-bar select {
flex: 1;
height: 45px;
padding: 10px;
background-color: rgba(245, 245, 245, 0.9);
border: 1px solid rgba(220, 220, 220, 0.8);
border-radius: 6px;
font-size: 16px;
}
body .search-page .search-bar input[type=text]:hover,
body .search-page .search-bar select:hover {
border-color: #007b8a;
}
body .search-page .search-bar input[type=text]:focus,
body .search-page .search-bar select:focus {
border-color: #007b8a;
}
body .search-page .search-bar select {
max-width: 25%;
}
body .search-page .search-bar button[type=submit] {
padding: 10px 20px;
font-size: 16px;
height: 45px;
background-color: rgba(245, 245, 245, 0.9);
color: #4e4e4e;
border: none;
border-radius: 4px;
cursor: pointer;
}
body .search-page .search-bar button[type=submit]:hover {
background-color: #007b8a;
color: #ffffff;
border-color: #007b8a;
}
body .search-page .search-bar button[type=submit]:active {
background-color: rgba(232, 232, 232, 0.9);
color: #007b8a;
border-color: #007b8a;
}
body .search-page .search-results {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
min-height: 800px;
}
body .search-page .search-results .search-result {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px 10px;
border-radius: 6px;
transition: background-color 0.3s;
background-color: #e1e1e1;
}
body .search-page .search-results .search-result:hover {
background-color: #b9b9b9;
}
body .search-page .search-results .search-result .details {
display: flex;
flex-direction: column;
gap: 4px;
}
body .search-page .search-results .search-result .details .primary-key {
font-size: 16px;
margin-bottom: 3px;
}
body .search-page .search-results .search-result .details .info-row {
display: flex;
gap: 10px;
}
body .search-page .search-results .search-result .details .info-row * {
font-size: 15px;
color: #666;
}
body .search-page .search-results .search-result .actions {
display: flex;
gap: 8px;
align-self: flex-start;
visibility: hidden;
}
body .search-page .search-results .search-result .actions button {
padding: 6px 12px;
font-size: 12px;
border: none;
border-radius: 4px;
cursor: pointer;
}
body .search-page .search-results .search-result .actions button.edit {
background-color: rgba(245, 245, 245, 0.9);
color: #4e4e4e;
}
body .search-page .search-results .search-result .actions button.edit:hover {
background-color: #3b8084;
}
body .search-page .search-results .search-result .actions button.delete {
background-color: rgba(245, 245, 245, 0.9);
color: #4e4e4e;
}
body .search-page .search-results .search-result .actions button.delete:hover {
background-color: #c96f6f;
}
body .search-page .search-results .search-result .actions button:hover {
color: #fff;
}
body .search-page .search-results .search-result:hover .actions {
visibility: visible;
}

2
test/html/adduser.html
View File

@ -103,7 +103,7 @@
<div class="form-group radio-input"> <div class="form-group radio-input">
<label>Account Status</label> <label>Account Status</label>
<div class="radio-group"> <div class="radio-group">
<input type="radio" id="active" name="account_status" value="active"> <input type="radio" id="active" name="account_status" value="active" checked>
<label class="radio" for="active">Active</label> <label class="radio" for="active">Active</label>
<input type="radio" id="inactive" name="account_status" value="inactive"> <input type="radio" id="inactive" name="account_status" value="inactive">

4
test/html/login.html
View File

@ -3,13 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css/login.css"> <link rel="stylesheet" href="../css/login.css">
<title>Login Page</title> <title>Login Page</title>
</head> </head>
<body> <body>
<div class="left-container"> <div class="left-container">
<img src="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/images/logo2.png" alt="Company Logo" class="logo"> <img src="../images/logo2.png" alt="Company Logo" class="logo">
<h1>LDAP Manager</h1> <h1>LDAP Manager</h1>
<p>User management system</p> <p>User management system</p>
</div> </div>

111
test/html/search.html Normal file
View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Results</title>
<link rel="stylesheet" href="../css/search.css">
</head>
<body>
<div class="search-page">
<form class="search-bar" action="/search-results" method="GET">
<input type="text" name="query" placeholder="Search...">
<select name="filter">
<option value="username">Username</option>
<option value="employee-id">Employee ID</option>
<option value="name">Name</option>
<option value="email">Email</option>
</select>
<button type="submit">Search</button>
</form>
<ul class="search-results">
<li class="search-result">
<div class="details">
<span class="primary-key username">realobamna</span>
<div class="info-row">
<span class="employee-id">12345</span>
<span class="full-name">John Doe Obama</span>
</div>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</li>
<li class="search-result">
<div class="details">
<span class="primary-key username">obama</span>
<div class="info-row">
<span class="employee-id">19845</span>
<span class="full-name">Fake Obama</span>
</div>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</li>
<li class="search-result">
<div class="details">
<span class="primary-key username">realobamna</span>
<div class="info-row">
<span class="employee-id">12345</span>
<span class="full-name">John Doe Obama</span>
</div>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</li>
<li class="search-result">
<div class="details">
<span class="primary-key username">obama</span>
<div class="info-row">
<span class="employee-id">19845</span>
<span class="full-name">Fake Obama</span>
</div>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</li>
<li class="search-result">
<div class="details">
<span class="primary-key username">realobamna</span>
<div class="info-row">
<span class="employee-id">12345</span>
<span class="full-name">John Doe Obama</span>
</div>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</li>
<li class="search-result">
<div class="details">
<span class="primary-key username">obama</span>
<div class="info-row">
<span class="employee-id">19845</span>
<span class="full-name">Fake Obama</span>
</div>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</li>
<!-- Additional search results go here -->
</ul>
</div>
</body>
</html>

42
test/scss/_colors.scss
View File

@ -22,7 +22,7 @@ $login-button-shadow: rgba(0, 95, 115, 0.3);
$login-button-active-shadow: rgba(70, 70, 70, 0.2); $login-button-active-shadow: rgba(70, 70, 70, 0.2);
$login-button-text-color: #fff; $login-button-text-color: #fff;
// Entry Form Page //////////////////////////////// // Entry Form Page //////////////////////////////////
// Page // Page
$add-user-background-color: linear-gradient(135deg, #283e4a, #1c2e38); // Background gradient $add-user-background-color: linear-gradient(135deg, #283e4a, #1c2e38); // Background gradient
@ -51,9 +51,9 @@ $add-user-clear-button-text-color: #ffffff;
// Check-box buttons // Check-box buttons
// Unchecked // Unchecked
$user-form-checkbox-button-color: #007b8a; $user-form-checkbox-button-color: $add-user-input-background;
$user-form-checkbox-button-text-color: #007b8a; $user-form-checkbox-button-text-color: $add-user-form-title-color;
$user-form-checkbox-button-border-color: rgba(220, 220, 220, 0.8); $user-form-checkbox-button-border-color: $add-user-input-border-color;
// Hover // Hover
$user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9); $user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9);
$user-form-checkbox-button-hover-text-color: #007b8a; $user-form-checkbox-button-hover-text-color: #007b8a;
@ -86,3 +86,37 @@ $details-closed-summary-color: #b1b1b1;
$details-summary-hover-color: #636363; $details-summary-hover-color: #636363;
$details-open-summary-color: #979797; $details-open-summary-color: #979797;
$details-summary-border-color: $add-user-input-border-color; $details-summary-border-color: $add-user-input-border-color;
// Search page //////////////////////////////////////
// Search field
$search-page-search-field-background: $add-user-input-background;
$search-page-search-field-border-color: $add-user-input-border-color;
$search-page-search-field-hover-border-color: $add-user-input-focus-border-color;
$search-page-search-field-focus-border-color: $add-user-input-focus-border-color;
// Search button normal
$search-page-search-button-color: $user-form-checkbox-button-color;
$search-page-search-button-text-color: $user-form-checkbox-button-text-color;
$search-page-search-button-border-color: $user-form-checkbox-button-border-color;
// Search button hover
$search-page-search-button-hover-color: $add-user-button-color;
$search-page-search-button-hover-text-color: $add-user-button-text-color;
$search-page-search-button-hover-border-color: $user-form-checkbox-button-hover-border-color;
// Search button clicked
$search-page-search-button-active-color: $user-form-checkbox-button-hover-color;
$search-page-search-button-active-text-color: $user-form-checkbox-button-hover-text-color;
$search-page-search-button-active-border-color: $user-form-checkbox-button-hover-border-color;
// Search result normal
$search-res-item-border-color: #e0e0e0;
$search-res-item-hover-color: #b9b9b9;
// Search res item edit button
$search-res-edit-item-button-color: $user-form-checkbox-button-color;
$search-res-edit-item-button-text-color: $user-form-checkbox-button-text-color;
$search-res-edit-item-button-hover-color: $user-form-checkbox-button-active-color;
// Search res item delete button
$search-res-delete-item-button-color: $user-form-checkbox-button-color;
$search-res-delete-item-button-text-color: $user-form-checkbox-button-text-color;
$search-res-delete-item-button-hover-color: #c96f6f;

171
test/scss/search.scss Normal file
View File

@ -0,0 +1,171 @@
@use "common"; // Reset styles
@use "colors" as *; // Color scheme
@use "vars" as *;
body {
font-family: 'Arial', sans-serif;
background: $add-user-background-color;
display: flex;
justify-content: center; // Center the form horizontally
align-items: center; // Center the form vertically
height: 100%;
padding: 20px; // Some padding for mobile responsiveness
.search-page {
background-color: $add-user-form-background;
padding: 40px;
border-radius: 12px; // Rounded corners
box-shadow: 0 8px 15px $add-user-form-shadow-color;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
.search-bar {
display: flex;
gap: 10px;
padding: 20px 20px 10px 20px;
border-radius: 12px 12px 0 0; // Rounded corners
justify-content: space-between;
align-items: center;
background-color: #c4c4c4;
height: 75px;
input[type="text"],
select {
flex: 1;
height: 45px;
padding: 10px;
background-color: $search-page-search-field-background;
border: 1px solid $search-page-search-field-border-color;
border-radius: $input-field-border-radius;
font-size: 16px;
&:hover {
border-color: $search-page-search-field-hover-border-color;
}
&:focus {
border-color: $search-page-search-field-focus-border-color;
}
}
select {
max-width: 25%;
}
button[type="submit"] {
padding: 10px 20px;
font-size: 16px;
height: 45px;
background-color: $search-page-search-button-color;
color: $search-page-search-button-text-color;
border: none;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: $search-page-search-button-hover-color;
color: $search-page-search-button-hover-text-color;
border-color: $search-page-search-button-hover-border-color;
}
&:active {
background-color: $search-page-search-button-active-color;
color: $search-page-search-button-active-text-color;
border-color: $search-page-search-button-active-border-color;
}
}
}
.search-results {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
min-height: 800px;
.search-result {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px 10px;
border-radius: $input-field-border-radius;
transition: background-color 0.3s;
background-color: #e1e1e1;
&:hover {
background-color: $search-res-item-hover-color;
}
.details {
display: flex;
flex-direction: column;
gap: 4px;
.primary-key {
font-size: 16px;
margin-bottom: 3px;
}
.info-row {
display: flex;
gap: 10px;
* {
font-size: 15px;
//font-weight: 500;
color: #666;
}
}
}
.actions {
display: flex;
gap: 8px;
align-self: flex-start;
visibility: hidden;
button {
padding: 6px 12px;
font-size: 12px;
border: none;
border-radius: 4px;
cursor: pointer;
&.edit {
background-color: $search-res-edit-item-button-color;
color: $search-res-edit-item-button-text-color;
&:hover {
background-color: $search-res-edit-item-button-hover-color;
}
}
&.delete {
background-color: $search-res-delete-item-button-color;
color: $search-res-delete-item-button-text-color;
&:hover {
background-color: $search-res-delete-item-button-hover-color;
}
}
&:hover {
color: #fff;
}
}
}
&:hover .actions {
visibility: visible;
}
}
}
}
}