Skip to content

Modernize UI across all PHP/HTML files with new CSS #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Modernize UI across all PHP/HTML files with new CSS #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b1825c6
Checkpoint from VS Code for cloud agent session
mrfroncu Apr 7, 2026
f4a6525
Modernize all PHP/HTML files with new CSS, glassmorphism, and Google …
Copilot Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
This project provides a centralized platform integrating multiple services and tools for deployment, monitoring, and access management.

![Screenshot](documentation/images/1.png)

![Screenshot](documentation/images/2.png)

## Features
Expand Down
86 changes: 72 additions & 14 deletions checksum/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,83 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Checksum</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
* { -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', system-ui, sans-serif; }
.mono { font-family: 'JetBrains Mono', 'Courier New', monospace; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#4f46e5,#7c3aed); border-radius:999px; }

body::before {
content: '';
position: fixed; top:-15%; right:-10%;
width: 40vw; height: 40vw;
background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}

/* Glass card */
.glass-card {
background: rgba(24, 24, 27, 0.65);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}

@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp 0.5s ease-out both; }
</style>
</head>
<body>
<body class="bg-zinc-950 text-zinc-200 min-h-screen flex items-center justify-center p-6">

<div class="w-full max-w-md relative z-10 fade-in">

<div class="flex items-center mb-6">
<div class="bg-gradient-to-br from-indigo-500 to-purple-600 p-2 rounded-xl mr-3 shadow-lg shadow-indigo-500/30">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<h1 class="text-2xl font-extrabold text-white tracking-tight">File Checksum</h1>
</div>

<form method="post">
<button type="submit" name="checksum">Generate Checksum</button>
</form>
<div class="glass-card border border-zinc-800 rounded-2xl p-6 shadow-2xl shadow-black/40">
<p class="text-zinc-500 text-sm mb-5">Generate SHA-256 checksum for <span class="text-zinc-300 font-mono">KT-latest.zip</span>.</p>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['checksum'])) {
$file = '../dl/KT-latest.zip';
<form method="post">
<button type="submit" name="checksum" class="w-full flex items-center justify-center bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-semibold py-3 px-5 rounded-xl transition-all shadow-lg shadow-indigo-600/25 hover:shadow-indigo-500/35">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
Generate Checksum
</button>
</form>

if (file_exists($file)) {
$checksum = hash_file('sha256', $file);
echo "<p>SHA256 Checksum: <strong>$checksum</strong></p>";
} else {
echo "<p style='color:red;'>File not found!</p>";
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['checksum'])) {
$file = '../dl/KT-latest.zip';

if (file_exists($file)) {
$checksum = hash_file('sha256', $file);
echo "<div class='mt-5 bg-zinc-950/80 border border-zinc-800 rounded-xl p-4'>
<p class='text-xs text-zinc-500 font-semibold uppercase tracking-wider mb-2'>SHA-256 Checksum</p>
<p class='text-emerald-400 font-mono text-xs break-all leading-relaxed mono'>$checksum</p>
</div>";
} else {
echo "<div class='mt-5 bg-red-900/20 border border-red-800/50 rounded-xl p-4'>
<p class='text-red-400 text-sm'>File not found!</p>
</div>";
}
}
}
?>
?>
</div>

</div>

</body>
</html>
86 changes: 66 additions & 20 deletions debug/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,76 @@ function formatSize($bytes) {
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<title>Debug Page</title>
<style>
* { -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', system-ui, sans-serif; }
.mono { font-family: 'JetBrains Mono', 'Courier New', monospace; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#4f46e5,#7c3aed); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#6366f1,#8b5cf6); }

body::before {
content: '';
position: fixed; top:-15%; left:-5%;
width: 40vw; height: 40vw;
background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>Debug Utility</h1>
<div class="mt-4">
<form method="POST">
<button type="submit" name="list_files" class="btn btn-primary mb-3">[DEBUG] List all files in download directory</button>
<button type="submit" name="list_chunks" class="btn btn-secondary mb-3">[DEBUG] List all chunks (failed or live)</button>
<button type="submit" name="checksum" class="btn btn-warning mb-3">[DEBUG] SHA 256 CheckSum of KT-latest.zip</button>
<button type="submit" name="checksum2" class="btn btn-warning mb-3">[DEBUG] SHA 256 CheckSum of KT-new.zip</button>
<body class="bg-zinc-950 text-zinc-200 min-h-screen p-6 lg:p-10">
<div class="max-w-3xl mx-auto relative z-10">

<div class="mb-8">
<div class="flex items-center mb-2">
<div class="bg-gradient-to-br from-indigo-500 to-purple-600 p-2 rounded-xl mr-3 shadow-lg shadow-indigo-500/30">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
</div>
<h1 class="text-2xl font-extrabold text-white tracking-tight">Debug Utility</h1>
</div>
<p class="text-zinc-500 text-sm font-mono ml-12 uppercase tracking-widest">Klocki Time Management</p>
</div>

<div class="bg-zinc-900/60 backdrop-blur-sm border border-zinc-800 rounded-2xl p-6 mb-6 shadow-xl">
<h2 class="text-sm font-semibold text-zinc-400 uppercase tracking-widest mb-4">Actions</h2>
<form method="POST" class="flex flex-wrap gap-3">
<button type="submit" name="list_files" class="flex items-center px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-xl transition-all shadow-lg shadow-indigo-600/20 hover:shadow-indigo-500/30">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
[DEBUG] List all files in download directory
</button>
<button type="submit" name="list_chunks" class="flex items-center px-4 py-2.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-sm font-semibold rounded-xl transition-all border border-zinc-700 hover:border-zinc-600">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
[DEBUG] List all chunks (failed or live)
</button>
<button type="submit" name="checksum" class="flex items-center px-4 py-2.5 bg-amber-600/20 hover:bg-amber-600/30 text-amber-400 hover:text-amber-300 text-sm font-semibold rounded-xl transition-all border border-amber-600/30 hover:border-amber-500/50">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
[DEBUG] SHA 256 CheckSum of KT-latest.zip
</button>
<button type="submit" name="checksum2" class="flex items-center px-4 py-2.5 bg-amber-600/20 hover:bg-amber-600/30 text-amber-400 hover:text-amber-300 text-sm font-semibold rounded-xl transition-all border border-amber-600/30 hover:border-amber-500/50">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
[DEBUG] SHA 256 CheckSum of KT-new.zip
</button>
</form>
</div>

<div class="mt-4">
<h2>Output:</h2>
<pre class="border p-3">
<div class="bg-zinc-900/60 backdrop-blur-sm border border-zinc-800 rounded-2xl shadow-xl overflow-hidden">
<div class="flex items-center px-5 py-3 bg-zinc-900 border-b border-zinc-800">
<div class="flex space-x-1.5 mr-4">
<div class="w-3 h-3 rounded-full bg-red-500/70"></div>
<div class="w-3 h-3 rounded-full bg-amber-500/70"></div>
<div class="w-3 h-3 rounded-full bg-emerald-500/70"></div>
</div>
<h2 class="text-xs font-semibold text-zinc-500 mono uppercase tracking-wider">Output</h2>
</div>
<pre class="mono text-sm text-zinc-300 p-5 overflow-x-auto min-h-24 leading-relaxed">
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['list_files'])) {
Expand Down Expand Up @@ -87,13 +139,7 @@ function formatSize($bytes) {
?>
</pre>
</div>
</div>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>



</div>
</body>
</html>
108 changes: 97 additions & 11 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@ function listFiles($title, $folder) {
if (is_file($filepath)) {
$size = formatBytes(filesize($filepath));
$url = rtrim($folder, '/') . '/' . rawurlencode($file);
echo "<li class='hover:bg-zinc-700/50 transition-colors duration-200'>";
echo "<li class='archive-row hover:bg-zinc-700/50 transition-all duration-200'>";
echo "<a href=\"$url\" download class='flex items-center justify-between p-4 group'>";
echo "<div class='flex items-center text-zinc-300 group-hover:text-white transition-colors'>";
echo "$iconFile <span class='font-medium'>$file</span>";
echo "</div>";
echo "<span class='text-xs font-mono text-zinc-500 bg-zinc-900 px-2 py-1 rounded border border-zinc-700'>$size</span>";
echo "<span class='text-xs font-mono text-zinc-500 bg-zinc-900/80 px-2 py-1 rounded-md border border-zinc-700 group-hover:border-indigo-500/50 transition-colors'>$size</span>";
echo "</a></li>";
}
}
Expand All @@ -56,13 +56,99 @@ function listFiles($title, $folder) {
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KT - Management [Alleria]</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #18181b; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #52525b; }
:root {
--accent: #6366f1;
--accent-glow: rgba(99, 102, 241, 0.35);
--accent-glow-soft: rgba(99, 102, 241, 0.12);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4f46e5, #7c3aed); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6366f1, #8b5cf6); }

/* Ambient background blobs */
body::before {
content: '';
position: fixed;
top: -20%;
left: -10%;
width: 50vw;
height: 50vw;
background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
body::after {
content: '';
position: fixed;
bottom: -20%;
right: -10%;
width: 40vw;
height: 40vw;
background: radial-gradient(circle, rgba(168,85,247,0.05) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}

/* Gradient border on header */
header {
position: relative;
}
header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(99,102,241,0.5), rgba(168,85,247,0.4), transparent);
}

/* Footer gradient top border */
footer {
position: relative;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3), transparent);
}

/* Logo glow */
.logo-glow {
box-shadow: 0 0 16px rgba(99,102,241,0.5), 0 0 32px rgba(99,102,241,0.2);
}

/* Nav active glow */
.nav-active-glow {
box-shadow: 0 0 12px var(--accent-glow), 0 2px 8px var(--accent-glow-soft);
}

/* Fade-in animation for main content */
@keyframes fadeSlideIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
main { animation: fadeSlideIn 0.4s ease-out both; }

/* Archive list row hover glow */
.archive-row:hover {
background: rgba(99,102,241,0.06) !important;
}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0WCNB0WDW"></script>
<script>
Expand All @@ -74,15 +160,15 @@ function gtag(){dataLayer.push(arguments);}
</head>
<body class="bg-zinc-950 text-zinc-200 h-full flex flex-col overflow-hidden">

<header class="bg-zinc-900 border-b border-zinc-800 shadow-md z-20 flex-shrink-0">
<header class="bg-zinc-900/80 backdrop-blur-md border-b border-zinc-800 shadow-lg shadow-black/40 z-20 flex-shrink-0">
<div class="w-full flex flex-wrap items-center justify-between px-6 py-3">

<div class="flex items-center mr-8 flex-shrink-0">
<div class="bg-indigo-600 p-2 rounded-lg mr-3 shadow-lg shadow-indigo-500/20">
<div class="bg-gradient-to-br from-indigo-500 to-purple-600 p-2 rounded-xl mr-3 shadow-lg logo-glow">
<img src="http://alleria.pl/image/favicon.png" alt="Alleria Logo" class="w-6 h-6 object-contain">
</div>
<div>
<h1 class="font-bold text-xl text-white tracking-tight whitespace-nowrap">Klocki Time</h1>
<h1 class="font-extrabold text-xl text-white tracking-tight whitespace-nowrap bg-gradient-to-r from-white to-zinc-300 bg-clip-text">Klocki Time</h1>
<p class="text-xs text-zinc-400 font-mono uppercase tracking-widest hidden sm:block">Management Panel</p>
</div>
</div>
Expand All @@ -107,7 +193,7 @@ function gtag(){dataLayer.push(arguments);}
$baseClass = "flex items-center px-3 py-2 text-sm font-semibold rounded-lg transition-all duration-300 whitespace-nowrap border border-transparent";

if ($isActive) {
$class = "$baseClass bg-{$item['color']}-600 text-white shadow-lg shadow-{$item['color']}-500/20";
$class = "$baseClass bg-gradient-to-r from-{$item['color']}-600 to-{$item['color']}-500 text-white shadow-lg nav-active-glow";
} else {
if ($item['ext']) {
$class = "$baseClass bg-zinc-800 text-{$item['color']}-400 hover:bg-{$item['color']}-900/30 hover:text-{$item['color']}-200 border-zinc-700";
Expand Down Expand Up @@ -165,7 +251,7 @@ class="w-full h-full border-none opacity-0 transition-opacity duration-500"
<?php } ?>
</main>

<footer class="bg-zinc-900 border-t border-zinc-800 py-3 flex-shrink-0 z-20">
<footer class="bg-zinc-900/80 backdrop-blur-md border-t border-zinc-800/50 py-3 flex-shrink-0 z-20">
<div class="text-center text-xs font-mono text-zinc-500">
&copy; 2025 - <?php echo $currentYear; ?> <a target="_blank" href="https://alleria.pl" class="text-zinc-300 hover:text-white transition-colors">Alleria</a> | All Rights Reserved |
Built by <a target="_blank" href="https://x.com/henas_pl" class="text-zinc-300 hover:text-white transition-colors">@henas_pl</a>
Expand Down
Loading