claude fix the UI and make no mistakes (lmfao)
This commit is contained in:
KingKDot
@@ -130,11 +130,18 @@
|
|||||||
<p id="wipe-offline-message" class="hidden text-sm rounded-lg px-3 py-2 border"></p>
|
<p id="wipe-offline-message" class="hidden text-sm rounded-lg px-3 py-2 border"></p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Account + Banned IPs -->
|
||||||
<section class="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
<section class="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
||||||
|
<!-- Account -->
|
||||||
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4">
|
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-sky-500/10 border border-sky-500/30">
|
||||||
|
<i class="fa-solid fa-user text-sky-400"></i>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-lg font-semibold">Basic Settings</h2>
|
<h2 class="text-lg font-semibold">Account</h2>
|
||||||
<p class="text-sm text-slate-400">Update account and local dashboard preferences.</p>
|
<p class="text-sm text-slate-400">View your account info and update your password.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
|
||||||
@@ -148,8 +155,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form id="password-form" class="space-y-3 pt-1">
|
<form id="password-form" class="space-y-3">
|
||||||
<h3 class="font-medium">Change Password</h3>
|
<p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Change Password</p>
|
||||||
<input
|
<input
|
||||||
id="current-password"
|
id="current-password"
|
||||||
type="password"
|
type="password"
|
||||||
@@ -179,19 +186,81 @@
|
|||||||
<p id="password-policy-hint" class="text-xs text-slate-400"></p>
|
<p id="password-policy-hint" class="text-xs text-slate-400"></p>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
class="px-4 py-2 rounded-lg bg-sky-600 hover:bg-sky-700 transition-colors text-white font-medium"
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-sky-600 hover:bg-sky-500 transition-colors text-white text-sm font-medium"
|
||||||
>
|
>
|
||||||
<i class="fa-solid fa-key mr-2"></i>Update Password
|
<i class="fa-solid fa-key"></i>Update Password
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<form id="prefs-form" class="space-y-3 pt-1">
|
<p id="settings-message" class="hidden text-sm rounded-lg px-3 py-2 border"></p>
|
||||||
<h3 class="font-medium">Dashboard Preferences</h3>
|
</div>
|
||||||
<label class="flex items-center gap-2">
|
|
||||||
|
<!-- Banned IPs -->
|
||||||
|
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4">
|
||||||
|
<div class="flex items-center justify-between gap-3">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-red-500/10 border border-red-500/30">
|
||||||
|
<i class="fa-solid fa-ban text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-semibold">Banned IPs</h2>
|
||||||
|
<p class="text-sm text-slate-400">Unban blocked agent source IPs.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
id="refresh-bans-btn"
|
||||||
|
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-sm transition-colors"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i class="fa-solid fa-rotate"></i>Refresh
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="bans-permission-note" class="hidden rounded-lg border border-amber-800 bg-amber-900/20 text-amber-200 px-3 py-2 text-sm">
|
||||||
|
Your role does not allow IP unban actions.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overflow-x-auto border border-slate-800 rounded-lg">
|
||||||
|
<table class="w-full text-sm">
|
||||||
|
<thead class="bg-slate-800/60 text-slate-300">
|
||||||
|
<tr>
|
||||||
|
<th class="text-left px-3 py-2">IP</th>
|
||||||
|
<th class="text-left px-3 py-2">Reason</th>
|
||||||
|
<th class="text-left px-3 py-2">Banned At</th>
|
||||||
|
<th class="text-right px-3 py-2">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="bans-table-body" class="divide-y divide-slate-800">
|
||||||
|
<tr>
|
||||||
|
<td colspan="4" class="px-3 py-6 text-center text-slate-400">Loading...</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Dashboard Preferences -->
|
||||||
|
<section class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-violet-500/10 border border-violet-500/30">
|
||||||
|
<i class="fa-solid fa-sliders text-violet-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-semibold">Dashboard Preferences</h2>
|
||||||
|
<p class="text-sm text-slate-400">Configure notifications, client refresh rate, and navigation layout.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="prefs-form" class="space-y-4">
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Notifications</p>
|
||||||
|
<label class="flex items-center gap-2 text-sm">
|
||||||
<input id="pref-notifications" type="checkbox" class="h-4 w-4" />
|
<input id="pref-notifications" type="checkbox" class="h-4 w-4" />
|
||||||
<span>Enable notification badge updates</span>
|
<span>Enable notification badge updates</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="flex items-center gap-2">
|
<label class="flex items-center gap-2 text-sm">
|
||||||
<input id="pref-desktop-notifications" type="checkbox" class="h-4 w-4 accent-emerald-500" />
|
<input id="pref-desktop-notifications" type="checkbox" class="h-4 w-4 accent-emerald-500" />
|
||||||
<span>Enable desktop (OS) notifications</span>
|
<span>Enable desktop (OS) notifications</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -199,6 +268,10 @@
|
|||||||
<i class="fa-solid fa-triangle-exclamation mr-1"></i>
|
<i class="fa-solid fa-triangle-exclamation mr-1"></i>
|
||||||
Browser permission was denied. Reset notification permissions for this site in your browser settings, then try again.
|
Browser permission was denied. Reset notification permissions for this site in your browser settings, then try again.
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Refresh Interval</p>
|
||||||
<label class="block">
|
<label class="block">
|
||||||
<span class="text-sm text-slate-300">Client refresh interval (seconds)</span>
|
<span class="text-sm text-slate-300">Client refresh interval (seconds)</span>
|
||||||
<input
|
<input
|
||||||
@@ -209,9 +282,12 @@
|
|||||||
class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500"
|
class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500"
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span class="text-sm text-slate-300">Navigation layout</span>
|
<p class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">Navigation Layout</p>
|
||||||
<div class="mt-2 flex gap-2">
|
<div class="flex gap-2">
|
||||||
<button type="button" id="pref-nav-sidebar"
|
<button type="button" id="pref-nav-sidebar"
|
||||||
class="nav-layout-btn flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors">
|
class="nav-layout-btn flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors">
|
||||||
<i class="fa-solid fa-table-columns"></i> Sidebar
|
<i class="fa-solid fa-table-columns"></i> Sidebar
|
||||||
@@ -223,36 +299,54 @@
|
|||||||
</div>
|
</div>
|
||||||
<p class="text-xs text-slate-500 mt-1">Changes apply immediately on save.</p>
|
<p class="text-xs text-slate-500 mt-1">Changes apply immediately on save.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
class="px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 transition-colors text-white font-medium"
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-violet-700 hover:bg-violet-600 transition-colors text-white text-sm font-medium"
|
||||||
>
|
>
|
||||||
<i class="fa-solid fa-floppy-disk mr-2"></i>Save Preferences
|
<i class="fa-solid fa-floppy-disk"></i>Save Preferences
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div id="telegram-settings" class="space-y-3 pt-1 border-t border-slate-800 pt-4">
|
<!-- Notification Delivery -->
|
||||||
|
<section id="telegram-settings" class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-emerald-500/10 border border-emerald-500/30">
|
||||||
|
<i class="fa-solid fa-bell text-emerald-400"></i>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="font-medium">Notification Delivery</h3>
|
<h2 class="text-lg font-semibold">Notification Delivery</h2>
|
||||||
<p class="text-xs text-slate-400">
|
<p class="text-sm text-slate-400">Configure where alerts and notifications are sent.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-lg border border-slate-700 bg-slate-900 px-4 py-4">
|
||||||
|
<p class="text-sm text-slate-300">
|
||||||
Webhook and Telegram Bot settings have moved to the
|
Webhook and Telegram Bot settings have moved to the
|
||||||
<a href="/notifications" class="text-sky-400 hover:underline font-medium">Notifications page</a>.
|
<a href="/notifications" class="text-sky-400 hover:underline font-medium">Notifications page</a>.
|
||||||
Configure your personal webhook and Telegram bot there.
|
Configure your personal webhook and Telegram bot there.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<form id="security-form" class="space-y-3 pt-1 border-t border-slate-800 pt-4">
|
<!-- Security Policy -->
|
||||||
|
<section class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-indigo-500/10 border border-indigo-500/30">
|
||||||
|
<i class="fa-solid fa-shield-halved text-indigo-400"></i>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="font-medium">Security Policy</h3>
|
<h2 class="text-lg font-semibold">Security Policy</h2>
|
||||||
<p class="text-xs text-slate-400">Admin-only global security controls.</p>
|
<p class="text-sm text-slate-400">Admin-only global security controls.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<form id="security-form" class="space-y-4">
|
||||||
<div id="security-permission-note" class="hidden rounded-lg border border-amber-800 bg-amber-900/20 text-amber-200 px-3 py-2 text-sm">
|
<div id="security-permission-note" class="hidden rounded-lg border border-amber-800 bg-amber-900/20 text-amber-200 px-3 py-2 text-sm">
|
||||||
Only admins can update security policy settings.
|
Only admins can update security policy settings.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||||
<label class="block">
|
<label class="block">
|
||||||
<span class="text-sm text-slate-300">Session TTL (hours)</span>
|
<span class="text-sm text-slate-300">Session TTL (hours)</span>
|
||||||
<input
|
<input
|
||||||
@@ -293,7 +387,7 @@
|
|||||||
class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500"
|
class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500"
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<label class="block sm:col-span-2">
|
<label class="block">
|
||||||
<span class="text-sm text-slate-300">Minimum password length</span>
|
<span class="text-sm text-slate-300">Minimum password length</span>
|
||||||
<input
|
<input
|
||||||
id="security-password-min"
|
id="security-password-min"
|
||||||
@@ -305,40 +399,51 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
|
<div>
|
||||||
|
<p class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">Password Requirements</p>
|
||||||
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-sm">
|
||||||
<label class="flex items-center gap-2">
|
<label class="flex items-center gap-2">
|
||||||
<input id="security-require-uppercase" type="checkbox" class="h-4 w-4" />
|
<input id="security-require-uppercase" type="checkbox" class="h-4 w-4" />
|
||||||
<span>Require uppercase letter</span>
|
<span>Uppercase</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="flex items-center gap-2">
|
<label class="flex items-center gap-2">
|
||||||
<input id="security-require-lowercase" type="checkbox" class="h-4 w-4" />
|
<input id="security-require-lowercase" type="checkbox" class="h-4 w-4" />
|
||||||
<span>Require lowercase letter</span>
|
<span>Lowercase</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="flex items-center gap-2">
|
<label class="flex items-center gap-2">
|
||||||
<input id="security-require-number" type="checkbox" class="h-4 w-4" />
|
<input id="security-require-number" type="checkbox" class="h-4 w-4" />
|
||||||
<span>Require number</span>
|
<span>Number</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="flex items-center gap-2">
|
<label class="flex items-center gap-2">
|
||||||
<input id="security-require-symbol" type="checkbox" class="h-4 w-4" />
|
<input id="security-require-symbol" type="checkbox" class="h-4 w-4" />
|
||||||
<span>Require symbol</span>
|
<span>Symbol</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
id="security-save-btn"
|
id="security-save-btn"
|
||||||
class="px-4 py-2 rounded-lg bg-indigo-700 hover:bg-indigo-600 transition-colors text-white font-medium"
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-indigo-700 hover:bg-indigo-600 transition-colors text-white text-sm font-medium"
|
||||||
>
|
>
|
||||||
<i class="fa-solid fa-shield-halved mr-2"></i>Save Security Policy
|
<i class="fa-solid fa-shield-halved"></i>Save Security Policy
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
<form id="tls-form" class="space-y-3 pt-1 border-t border-slate-800 pt-4">
|
<!-- TLS Certificates -->
|
||||||
|
<section class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-cyan-500/10 border border-cyan-500/30">
|
||||||
|
<i class="fa-solid fa-certificate text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="font-medium">TLS Certificates</h3>
|
<h2 class="text-lg font-semibold">TLS Certificates</h2>
|
||||||
<p class="text-xs text-slate-400">Admin-only TLS source configuration. Changes apply after server restart.</p>
|
<p class="text-sm text-slate-400">Admin-only TLS source configuration. Changes apply after server restart.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<form id="tls-form" class="space-y-4">
|
||||||
<div id="tls-permission-note" class="hidden rounded-lg border border-amber-800 bg-amber-900/20 text-amber-200 px-3 py-2 text-sm">
|
<div id="tls-permission-note" class="hidden rounded-lg border border-amber-800 bg-amber-900/20 text-amber-200 px-3 py-2 text-sm">
|
||||||
Only admins can update TLS settings.
|
Only admins can update TLS settings.
|
||||||
</div>
|
</div>
|
||||||
@@ -358,7 +463,7 @@
|
|||||||
class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500"
|
class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500"
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<label class="block sm:col-span-2">
|
<label class="block">
|
||||||
<span class="text-sm text-slate-300">Certbot live base path</span>
|
<span class="text-sm text-slate-300">Certbot live base path</span>
|
||||||
<input
|
<input
|
||||||
id="tls-certbot-live-path"
|
id="tls-certbot-live-path"
|
||||||
@@ -367,7 +472,7 @@
|
|||||||
class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500"
|
class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500"
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<label class="block sm:col-span-2">
|
<label class="block">
|
||||||
<span class="text-sm text-slate-300">Certbot domain folder</span>
|
<span class="text-sm text-slate-300">Certbot domain folder</span>
|
||||||
<input
|
<input
|
||||||
id="tls-certbot-domain"
|
id="tls-certbot-domain"
|
||||||
@@ -394,7 +499,7 @@
|
|||||||
class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500"
|
class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500"
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<label class="block sm:col-span-2">
|
<label class="block">
|
||||||
<span class="text-sm text-slate-300">CA chain file name</span>
|
<span class="text-sm text-slate-300">CA chain file name</span>
|
||||||
<input
|
<input
|
||||||
id="tls-certbot-ca-file"
|
id="tls-certbot-ca-file"
|
||||||
@@ -405,46 +510,53 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rounded-lg border border-slate-800 bg-slate-900/70 p-3 space-y-2">
|
<div class="rounded-lg border border-slate-700 bg-slate-900 px-4 py-4 flex flex-col sm:flex-row sm:items-center gap-4">
|
||||||
<div class="text-xs text-slate-300">
|
<div class="flex-1">
|
||||||
One-click setup requirements: DNS for the domain must point to this server and inbound port 80 must be reachable.
|
<p class="text-sm text-slate-300">One-click setup requirements: DNS for the domain must point to this server and inbound port 80 must be reachable.</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
id="tls-certbot-auto-btn"
|
id="tls-certbot-auto-btn"
|
||||||
class="px-4 py-2 rounded-lg bg-emerald-700 hover:bg-emerald-600 transition-colors text-white font-medium"
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-700 hover:bg-emerald-600 transition-colors text-white text-sm font-medium whitespace-nowrap"
|
||||||
>
|
>
|
||||||
<i class="fa-solid fa-wand-magic-sparkles mr-2"></i>Auto Setup Free SSL (Let's Encrypt)
|
<i class="fa-solid fa-wand-magic-sparkles"></i>Auto Setup Free SSL
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
id="tls-save-btn"
|
id="tls-save-btn"
|
||||||
class="px-4 py-2 rounded-lg bg-cyan-700 hover:bg-cyan-600 transition-colors text-white font-medium"
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-cyan-700 hover:bg-cyan-600 transition-colors text-white text-sm font-medium"
|
||||||
>
|
>
|
||||||
<i class="fa-solid fa-certificate mr-2"></i>Save TLS Settings
|
<i class="fa-solid fa-certificate"></i>Save TLS Settings
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
<form id="appearance-form" class="space-y-3 pt-1 border-t border-slate-800 pt-4">
|
<!-- Custom CSS -->
|
||||||
|
<section class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-fuchsia-500/10 border border-fuchsia-500/30">
|
||||||
|
<i class="fa-solid fa-paintbrush text-fuchsia-400"></i>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="font-medium">Custom CSS</h3>
|
<h2 class="text-lg font-semibold">Custom CSS</h2>
|
||||||
<p class="text-xs text-slate-400">Admin-only. Paste custom CSS to override the default theme across all pages.</p>
|
<p class="text-sm text-slate-400">Admin-only. Paste custom CSS to override the default theme across all pages.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<form id="appearance-form" class="space-y-4">
|
||||||
<div id="appearance-permission-note" class="hidden rounded-lg border border-amber-800 bg-amber-900/20 text-amber-200 px-3 py-2 text-sm">
|
<div id="appearance-permission-note" class="hidden rounded-lg border border-amber-800 bg-amber-900/20 text-amber-200 px-3 py-2 text-sm">
|
||||||
Only admins can update custom CSS.
|
Only admins can update custom CSS.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label class="block">
|
<label class="block">
|
||||||
<span class="text-sm text-slate-300">Custom CSS</span>
|
|
||||||
<textarea
|
<textarea
|
||||||
id="appearance-custom-css"
|
id="appearance-custom-css"
|
||||||
rows="12"
|
rows="12"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
placeholder="/* Paste your custom CSS here */ :root { --color-primary: #f59e0b; }"
|
placeholder="/* Paste your custom CSS here */ :root { --color-primary: #f59e0b; }"
|
||||||
class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500 font-mono text-xs resize-y"
|
class="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500 font-mono text-xs resize-y"
|
||||||
></textarea>
|
></textarea>
|
||||||
<p class="text-xs text-slate-500 mt-1">Max 50 KB. Reload any open page after saving to see the new styles.</p>
|
<p class="text-xs text-slate-500 mt-1">Max 50 KB. Reload any open page after saving to see the new styles.</p>
|
||||||
</label>
|
</label>
|
||||||
@@ -452,59 +564,15 @@
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
id="appearance-save-btn"
|
id="appearance-save-btn"
|
||||||
class="px-4 py-2 rounded-lg bg-violet-700 hover:bg-violet-600 transition-colors text-white font-medium"
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-fuchsia-700 hover:bg-fuchsia-600 transition-colors text-white text-sm font-medium"
|
||||||
>
|
>
|
||||||
<i class="fa-solid fa-paintbrush mr-2"></i>Save Custom CSS
|
<i class="fa-solid fa-paintbrush"></i>Save Custom CSS
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<p id="settings-message" class="hidden text-sm rounded-lg px-3 py-2"></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4">
|
|
||||||
<div class="flex items-center justify-between gap-3">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-lg font-semibold">Banned IPs</h2>
|
|
||||||
<p class="text-sm text-slate-400">Unban blocked agent source IPs.</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
id="refresh-bans-btn"
|
|
||||||
class="px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-sm"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i class="fa-solid fa-rotate mr-1"></i>Refresh
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="bans-permission-note" class="hidden rounded-lg border border-amber-800 bg-amber-900/20 text-amber-200 px-3 py-2 text-sm">
|
|
||||||
Your role does not allow IP unban actions.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto border border-slate-800 rounded-lg">
|
|
||||||
<table class="w-full text-sm">
|
|
||||||
<thead class="bg-slate-800/60 text-slate-300">
|
|
||||||
<tr>
|
|
||||||
<th class="text-left px-3 py-2">IP</th>
|
|
||||||
<th class="text-left px-3 py-2">Reason</th>
|
|
||||||
<th class="text-left px-3 py-2">Banned At</th>
|
|
||||||
<th class="text-right px-3 py-2">Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="bans-table-body" class="divide-y divide-slate-800">
|
|
||||||
<tr>
|
|
||||||
<td colspan="4" class="px-3 py-6 text-center text-slate-400">Loading...</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script type="module" src="/assets/nav.js"></script>
|
<script type="module" src="/assets/nav.js"></script>
|
||||||
<script type="module" src="/assets/settings.js"></script>
|
<script type="module" src="/assets/settings.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user