201 lines
7.5 KiB
HTML
201 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Logs</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://kit.fontawesome.com/a82697a287.js" crossorigin="anonymous"></script>
|
|
<style>
|
|
body {
|
|
background: linear-gradient(135deg, #f6f8fc 0%, #e9ecef 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.log-item {
|
|
position: relative;
|
|
max-height: 10rem;
|
|
overflow: hidden;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: 1px solid rgba(226, 232, 240, 0.7);
|
|
}
|
|
|
|
.log-text {
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.log-item:hover {
|
|
max-height: none;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.log-item:hover .log-text {
|
|
white-space: normal;
|
|
}
|
|
|
|
.custom-select {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #4f46e5;
|
|
border: 2px solid rgba(79, 70, 229, 0.2);
|
|
font-weight: 600;
|
|
padding-right: 2.5rem;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234f46e5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
background-size: 1.25rem;
|
|
}
|
|
|
|
.custom-select:hover {
|
|
border-color: #4f46e5;
|
|
background-color: rgba(79, 70, 229, 0.05);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.custom-select:focus {
|
|
outline: none;
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
|
|
}
|
|
|
|
.refresh-button {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #4f46e5;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.4s ease;
|
|
border: 2px solid rgba(79, 70, 229, 0.2);
|
|
font-size: 1.25rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.refresh-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg,
|
|
rgba(79, 70, 229, 0.1) 0%,
|
|
rgba(79, 70, 229, 0) 100%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.refresh-button:hover {
|
|
border-color: #4f46e5;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 16px rgba(79, 70, 229, 0.15);
|
|
}
|
|
|
|
.refresh-button:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.refresh-button:hover i {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.refresh-button i {
|
|
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.controls-wrapper {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
padding: 0.5rem;
|
|
border-radius: 20px;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans">
|
|
<div class="max-w-5xl mx-auto p-8 glass-effect rounded-3xl shadow-2xl mt-12 mb-12">
|
|
<div class="flex items-center justify-between mb-12">
|
|
<div>
|
|
<h1 class="text-4xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">Query Logs</h1>
|
|
<p class="text-gray-500 mt-2">Monitor and track system queries</p>
|
|
</div>
|
|
|
|
<div class="controls-wrapper">
|
|
<button onclick="location.reload()" class="refresh-button" title="Refresh logs">
|
|
<i class="fa-solid fa-arrows-rotate"></i>
|
|
</button>
|
|
|
|
<div class="relative">
|
|
<select id="month" onchange="changeMonth()" class="custom-select w-48 px-6 py-3 rounded-xl text-sm font-medium">
|
|
<option value="january" {{ if eq .Month "january" }}selected{{ end }}>January</option>
|
|
<option value="february" {{ if eq .Month "february" }}selected{{ end }}>February</option>
|
|
<option value="march" {{ if eq .Month "march" }}selected{{ end }}>March</option>
|
|
<option value="april" {{ if eq .Month "april" }}selected{{ end }}>April</option>
|
|
<option value="may" {{ if eq .Month "may" }}selected{{ end }}>May</option>
|
|
<option value="june" {{ if eq .Month "june" }}selected{{ end }}>June</option>
|
|
<option value="july" {{ if eq .Month "july" }}selected{{ end }}>July</option>
|
|
<option value="august" {{ if eq .Month "august" }}selected{{ end }}>August</option>
|
|
<option value="september" {{ if eq .Month "september" }}selected{{ end }}>September</option>
|
|
<option value="october" {{ if eq .Month "october" }}selected{{ end }}>October</option>
|
|
<option value="november" {{ if eq .Month "november" }}selected{{ end }}>November</option>
|
|
<option value="december" {{ if eq .Month "december" }}selected{{ end }}>December</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="space-y-6">
|
|
{{ range .Logs }}
|
|
<li class="log-item p-6 glass-effect rounded-2xl hover:bg-gradient-to-r hover:from-indigo-50 hover:to-purple-50 transition-all">
|
|
<div class="flex items-center gap-2 text-indigo-600 mb-3">
|
|
<i class="fa-solid fa-terminal text-sm"></i>
|
|
<span class="font-semibold">Log Entry</span>
|
|
</div>
|
|
<pre class="text-sm whitespace-pre-wrap break-words log-text">{{ . }}</pre>
|
|
</li>
|
|
{{ else }}
|
|
<li class="p-8 glass-effect rounded-2xl text-center">
|
|
<i class="fa-solid fa-inbox text-4xl text-gray-300 mb-3"></i>
|
|
<p class="text-gray-500">No logs found for this month.</p>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const monthSelect = document.getElementById("month");
|
|
if (!monthSelect.value) {
|
|
const currentMonthIndex = new Date().getMonth();
|
|
const months = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
|
|
monthSelect.value = months[currentMonthIndex];
|
|
}
|
|
});
|
|
|
|
function changeMonth() {
|
|
const selectedMonth = document.getElementById("month").value;
|
|
window.location.href = `/logs/${selectedMonth}`;
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|