micalis/USB-RAID-Array
1
0
Fork 0
mirror of https://github.com/michalcz10/USB-RAID-Array.git synced 2026-11-11 07:59:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

oprava create button a uprava css

Browse Source
This commit is contained in:
Michal Sedlák
2026-10-14 23:28:04 +02:00
parent 048234009d
commit d15fb27fd1
7 changed files with 141 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/content/adminpanel.php
+4 -3
View File
@@ -141,6 +141,7 @@ function CheckPassword($password) {
<title>Admin Panel</title>
<link rel="icon" href="../img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/modern.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/adminpanel.css">
<script src="../js/bootstrap.bundle.js"></script>
@@ -160,7 +161,7 @@ function CheckPassword($password) {
</button>
</div>
<div class="custom-container">
<div class="custom-container dark-box">
<header class="row border-bottom m-5">
<h1>USB RAID Array</h1>
<div class="mb-3 p-3">
@@ -171,7 +172,7 @@ function CheckPassword($password) {
</div>
</header>
<section class="row">
<article class="col border border-2 border-primary rounded p-2">
<article class="col border border-2 border-primary rounded p-2 surface-panel">
<h2 class="mb-4">User Management</h2>
<?php if ($message): ?>
<div class="alert alert-<?php echo $message_type === 'success' ? 'success' : 'danger'; ?>">
@@ -262,4 +263,4 @@ function CheckPassword($password) {
</html>
<?php
$conn->close();
?>
?>
Web/content/changepassword.php
+4 -3
View File
@@ -99,6 +99,7 @@ function CheckPassword($password) {
<link rel="icon" href="../img/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/modern.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/changepassword.css">
<script src="../js/bootstrap.bundle.js"></script>
@@ -111,7 +112,7 @@ function CheckPassword($password) {
</button>
</div>
<div class="container-fluid">
<div class="custom-container dark-box">
<header class="row border-bottom my-3 my-md-5">
<h1>USB RAID Array</h1>
<div class="mb-3 p-3">
@@ -126,7 +127,7 @@ function CheckPassword($password) {
</header>
<section class="row content-section">
<article class="col-12 border border-2 border-primary rounded p-2 p-md-4">
<article class="col-12 border border-2 border-primary rounded p-2 p-md-4 surface-panel">
<h2 class="mb-4">Change Password</h2>
<?php if ($message): ?>
@@ -170,4 +171,4 @@ function CheckPassword($password) {
<script src="../js/theme.js"></script>
</div>
</body>
</html>
</html>
Web/content/css/adminpanel.css
+18 -4
View File
@@ -10,6 +10,10 @@ html, body {
max-width: 60%;
margin: 0 auto;
}
.custom-container.dark-box {
min-height: calc(100vh - 4rem);
width: min(60%, 1200px);
}
section.row {
flex: 1;
}
@@ -17,6 +21,19 @@ section.row {
.custom-container {
max-width: 90%;
}
.custom-container.dark-box {
width: 90%;
}
}
@media (max-width: 700px) {
.custom-container.dark-box {
width: calc(100% - 2rem);
min-height: calc(100vh - 2rem);
margin: 1rem auto;
}
body {
min-width: 0;
}
}
.add-user-form {
max-width: 400px;
@@ -34,9 +51,6 @@ section.row {
.form-check-label {
margin-left: 0.5rem;
}
body {
min-width: 800px;
}
.hover-effect {
transition: opacity 0.3s ease;
}
@@ -49,4 +63,4 @@ body {
}
.theme-dark .light-logo {
display: none;
}
}
Web/content/ftp/css/index.css
+15 -1
View File
@@ -125,4 +125,18 @@ footer {
padding: 20px;
border-top: 1px solid #ddd;
width: 100%;
}
}
/* Give the SFTP file browser its own surface, distinct from the outer page. */
article.col-8 {
background: linear-gradient(145deg, var(--sftp-bg-start), var(--sftp-bg-end));
border-color: rgba(77, 145, 255, 0.3) !important;
border-radius: 1rem !important;
box-shadow: 0 12px 32px rgba(3, 8, 18, 0.2);
}
html[data-bs-theme="light"] article.col-8 {
background: linear-gradient(145deg, #ffffff, #edf3fb);
border-color: rgba(59, 130, 246, 0.4) !important;
box-shadow: 0 18px 48px rgba(31, 58, 92, 0.1);
}
Web/content/ftp/index.php
+8 -1
View File
@@ -319,6 +319,13 @@
</div>
</footer>
</div>
<script>
// Keep Bootstrap modals outside the filtered SFTP container. A parent
// backdrop-filter creates a stacking context that can block modal input.
document.querySelectorAll('.modal').forEach(function (modal) {
document.body.appendChild(modal);
});
</script>
<script>
// Pass PHP variables to JavaScript
var currentPath = "<?php echo $currentPath; ?>";
@@ -336,4 +343,4 @@ function formatBytes($bytes, $precision = 2) {
$bytes /= (1 << (10 * $pow));
return round($bytes, $precision) . ' ' . $units[$pow];
}
?>
?>
Web/css/modern.css
+87 -8
View File
@@ -1,17 +1,23 @@
/* Modern dark theme with blue accents */
:root {
--bg-dark: #000000;
--bg-dark: #171b22;
--bg-dark2: #1a202c;
--primary-blue: #3b82f6;
--text-light: #e5e7eb;
/* Add dark blue variable */
--bg-darkblue: #0f172a;
--container-bg-start: #2b2b2b;
--container-border: var(--primary-blue);
--bg-darkblue: #101722;
--container-bg-start: #1a2029;
--container-bg-end: #151d29;
--sftp-bg-start: #151b25;
--sftp-bg-end: #101722;
--container-border: rgba(77, 145, 255, 0.7);
--panel-text: #e5e7eb;
--panel-muted: #aab4c3;
--control-bg: #101722;
--control-border: #39485d;
}
body {
background: linear-gradient(135deg, var(--container-bg-start), var(--bg-darkblue));
background: linear-gradient(135deg, var(--bg-dark), var(--bg-darkblue));
color: var(--text-light);
min-height: 100vh;
font-family: system-ui, sans-serif;
@@ -24,6 +30,49 @@ a, .nav-link {
transition: opacity .2s ease-in-out;
}
body, button, input, select, textarea {
font-family: system-ui, sans-serif;
}
/* Keep text, fields and tables readable on every page that uses the shared theme. */
.surface-panel,
.dark-box {
color: var(--panel-text);
}
.surface-panel .text-muted,
.dark-box .text-muted {
color: var(--panel-muted) !important;
}
.surface-panel .form-control,
.surface-panel .form-select,
.dark-box .form-control,
.dark-box .form-select {
color: var(--panel-text);
background-color: var(--control-bg);
border-color: var(--control-border);
}
.surface-panel .form-control::placeholder,
.dark-box .form-control::placeholder {
color: var(--panel-muted);
}
.surface-panel .form-control:focus,
.surface-panel .form-select:focus,
.dark-box .form-control:focus,
.dark-box .form-select:focus {
border-color: var(--primary-blue);
box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .2);
}
.surface-panel .table,
.surface-panel .table th,
.surface-panel .table td {
color: inherit;
}
a:hover, .btn:hover, .nav-link:hover {
opacity: 0.85;
@@ -53,6 +102,14 @@ a:hover, .btn:hover, .nav-link:hover {
backdrop-filter: blur(8px);
}
.surface-panel {
background: linear-gradient(145deg, var(--sftp-bg-start), var(--sftp-bg-end));
color: var(--text-light);
border: 1px solid rgba(77, 145, 255, 0.3);
border-radius: 1rem;
box-shadow: 0 12px 32px rgba(3, 8, 18, 0.2);
}
.modal-content {
background: rgba(20, 20, 30, 0.9) !important;
color: var(--text-light) !important;
@@ -69,8 +126,9 @@ a:hover, .btn:hover, .nav-link:hover {
/* Main window styling (window within window) */
.custom-container.dark-box {
margin: 2rem;
background: linear-gradient(135deg, var(--container-bg-start), var(--bg-darkblue));
box-sizing: border-box;
margin: 2rem auto;
background: linear-gradient(135deg, var(--container-bg-start), var(--container-bg-end));
border: 2px solid var(--container-border);
border-radius: var(--border-radius);
padding: 1rem;
@@ -84,6 +142,10 @@ html[data-bs-theme="light"] {
--container-bg: rgba(255,255,255,0.85);
--container-border: var(--primary-blue);
--text-dark: #212529;
--panel-text: #212529;
--panel-muted: #596579;
--control-bg: #ffffff;
--control-border: #c8d2df;
}
html[data-bs-theme="light"] body {
background: var(--bg-light);
@@ -93,6 +155,23 @@ html[data-bs-theme="light"] .dark-box {
background: rgba(255, 255, 255, 0.8);
color: var(--text-dark);
}
html[data-bs-theme="light"] .surface-panel .form-control,
html[data-bs-theme="light"] .surface-panel .form-select,
html[data-bs-theme="light"] .dark-box .form-control,
html[data-bs-theme="light"] .dark-box .form-select {
color: var(--panel-text);
background-color: var(--control-bg);
border-color: var(--control-border);
}
html[data-bs-theme="light"] .form-control::placeholder {
color: var(--panel-muted);
}
html[data-bs-theme="light"] .surface-panel {
background: linear-gradient(145deg, #ffffff, #edf2f8);
color: var(--text-dark);
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 12px 32px rgba(31, 58, 92, 0.08);
}
html[data-bs-theme="light"] .modal-content {
background: #fff !important;
color: var(--text-dark) !important;
Web/index.php
+5 -2
View File
@@ -22,6 +22,7 @@ if (empty($_SESSION)) {
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/modern.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/bootstrap.bundle.js"></script>
@@ -34,13 +35,14 @@ if (empty($_SESSION)) {
</button>
</div>
<div class="custom-container dark-box">
<header class="row border-bottom m-5">
<h1>USB RAID Array</h1>
</header>
<main>
<section class="row m-3">
<article class="col border border-2 border-primary rounded p-2 fixed">
<article class="col border border-2 border-primary rounded p-2 fixed surface-panel">
<form action="content/login.php" method="post">
<div class="mb-3">
<label for="uname">Username:</label>
@@ -73,7 +75,8 @@ if (empty($_SESSION)) {
</a>
</div>
</footer>
</div>
<script src="js/theme.js"></script>
</body>
</html>
</html>