starred/newznab-tmux
1
0
Fork 0
mirror of https://github.com/NNTmux/newznab-tmux.git synced 2026-08-28 17:01:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update theme components

Browse Source
This commit is contained in:
DariusIII
2026-08-27 19:01:30 +02:00
parent b2096be078
commit 3285303984
30 changed files with 774 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+243
View File
@@ -152,6 +152,249 @@
display: none !important;
}
/* Shared application shell */
.skip-link {
@apply fixed left-4 top-3 z-[100] -translate-y-20 rounded-xl bg-white px-4 py-2 text-sm font-semibold text-gray-950 shadow-xl transition-transform focus:translate-y-0 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-900 dark:text-white;
}
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
.layout-shell {
background-color: var(--surface-body);
}
.dark .layout-shell {
background-color: var(--surface-body-dark);
}
.layout-content {
isolation: isolate;
}
.layout-main {
background-color: var(--surface-body);
background-image:
radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--color-primary-500) 9%, transparent), transparent 28rem),
linear-gradient(to bottom, color-mix(in srgb, var(--surface-body) 92%, white), var(--surface-body));
scroll-behavior: smooth;
}
.dark .layout-main {
background-color: var(--surface-body-dark);
background-image:
radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--color-primary-500) 13%, transparent), transparent 30rem),
linear-gradient(to bottom, color-mix(in srgb, var(--surface-body-dark) 88%, black), var(--surface-body-dark));
}
.layout-sidebar {
border-right: 1px solid var(--surface-chrome-border);
background-image:
radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--color-primary-400) 18%, transparent), transparent 18rem),
linear-gradient(to bottom, color-mix(in srgb, var(--surface-sidebar) 92%, black), var(--surface-sidebar));
box-shadow: 12px 0 36px rgb(15 23 42 / 0.14);
}
.dark .layout-sidebar {
border-right-color: var(--surface-chrome-border-dark);
background-image:
radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--color-primary-500) 15%, transparent), transparent 18rem),
linear-gradient(to bottom, color-mix(in srgb, var(--surface-sidebar-dark) 92%, black), var(--surface-sidebar-dark));
box-shadow: 12px 0 40px rgb(0 0 0 / 0.3);
}
.layout-sidebar__brand {
min-height: 4.75rem;
border-bottom: 1px solid var(--surface-chrome-border);
}
.dark .layout-sidebar__brand {
border-bottom-color: var(--surface-chrome-border-dark);
}
.layout-sidebar__logo {
border: 1px solid rgb(255 255 255 / 0.1);
background: rgb(255 255 255 / 0.07);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}
.layout-sidebar__nav {
scrollbar-color: rgb(255 255 255 / 0.18) transparent;
scrollbar-width: thin;
}
.user-sidebar-menu > .sidebar-section > button,
.user-sidebar-menu > a,
.admin-sidebar-menu > div > button,
.admin-sidebar-menu > div > a {
min-height: 2.75rem;
border-radius: 0.75rem;
}
.user-sidebar-menu .sidebar-submenu,
.admin-sidebar-menu [x-show] {
border-left: 1px solid rgb(255 255 255 / 0.09);
}
.user-sidebar-menu .sidebar-submenu a,
.admin-sidebar-menu [x-show] a {
min-height: 2.5rem;
border-radius: 0.625rem;
}
.admin-sidebar-menu > div {
margin-bottom: 0.25rem;
}
.layout-topbar {
border-bottom: 1px solid var(--surface-chrome-border);
background-image: linear-gradient(to right, color-mix(in srgb, var(--surface-header) 94%, black), var(--surface-header));
box-shadow: 0 8px 30px rgb(15 23 42 / 0.12);
}
.dark .layout-topbar {
border-bottom-color: var(--surface-chrome-border-dark);
background-image: linear-gradient(to right, color-mix(in srgb, var(--surface-header-dark) 94%, black), var(--surface-header-dark));
box-shadow: 0 8px 32px rgb(0 0 0 / 0.25);
}
.layout-primary-nav__search {
border-radius: 0.75rem;
box-shadow: 0 1px 0 rgb(255 255 255 / 0.08);
}
.layout-flash {
@apply flex items-start gap-3 rounded-2xl border px-4 py-3.5 text-sm font-medium shadow-sm;
}
.layout-flash > i {
@apply mt-0.5 shrink-0 text-base;
}
.layout-flash--success {
@apply border-emerald-200 bg-emerald-50/95 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/80 dark:text-emerald-100;
}
.layout-flash--error {
@apply border-red-200 bg-red-50/95 text-red-900 dark:border-red-800 dark:bg-red-950/80 dark:text-red-100;
}
.layout-flash--warning {
@apply border-amber-200 bg-amber-50/95 text-amber-950 dark:border-amber-800 dark:bg-amber-950/80 dark:text-amber-100;
}
.app-page-header,
.admin-page-header {
border-bottom: 1px solid var(--border-default);
background-image: linear-gradient(120deg, color-mix(in srgb, var(--color-primary-50) 72%, white), transparent 62%);
}
.dark .app-page-header,
.dark .admin-page-header {
border-bottom-color: var(--border-default-dark);
background-image: linear-gradient(120deg, color-mix(in srgb, var(--color-primary-950) 35%, transparent), transparent 62%);
}
.admin-page-header__icon {
border: 1px solid color-mix(in srgb, var(--color-primary-500) 24%, transparent);
background-color: color-mix(in srgb, var(--color-primary-500) 11%, transparent);
color: var(--color-primary-700);
}
.dark .admin-page-header__icon {
color: var(--color-primary-300);
}
.admin-card,
.admin-stat-card,
.admin-data-table-wrap {
border-color: var(--border-default);
}
.dark .admin-card,
.dark .admin-stat-card,
.dark .admin-data-table-wrap {
border-color: var(--border-default-dark);
}
.admin-stat-card {
background-image: linear-gradient(145deg, color-mix(in srgb, var(--color-primary-50) 42%, transparent), transparent 58%);
}
.dark .admin-stat-card {
background-image: linear-gradient(145deg, color-mix(in srgb, var(--color-primary-950) 24%, transparent), transparent 58%);
}
.admin-data-table-wrap {
border-radius: 0.875rem;
}
.admin-dashboard-page__hero {
position: relative;
overflow: hidden;
background-image:
radial-gradient(circle at 92% 20%, color-mix(in srgb, var(--color-primary-400) 18%, transparent), transparent 16rem),
linear-gradient(125deg, color-mix(in srgb, var(--color-primary-50) 78%, white), var(--surface-card) 62%);
}
.dark .admin-dashboard-page__hero {
background-image:
radial-gradient(circle at 92% 20%, color-mix(in srgb, var(--color-primary-500) 16%, transparent), transparent 18rem),
linear-gradient(125deg, color-mix(in srgb, var(--color-primary-950) 38%, var(--surface-card-dark)), var(--surface-card-dark) 62%);
}
.admin-dashboard-page__stats-grid > div,
.admin-dashboard-page [data-widget] {
border-color: var(--border-default);
border-radius: 1rem;
background-color: var(--surface-card) !important;
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 10px 30px rgb(15 23 42 / 0.04);
}
.dark .admin-dashboard-page__stats-grid > div,
.dark .admin-dashboard-page [data-widget] {
border-color: var(--border-default-dark);
background-color: var(--surface-card-dark) !important;
box-shadow: 0 1px 2px rgb(0 0 0 / 0.18), 0 12px 32px rgb(0 0 0 / 0.12);
}
.admin-dashboard-page__stats-grid > div {
background-image: linear-gradient(145deg, color-mix(in srgb, var(--color-primary-50) 36%, transparent), transparent 58%);
}
.dark .admin-dashboard-page__stats-grid > div {
background-image: linear-gradient(145deg, color-mix(in srgb, var(--color-primary-950) 20%, transparent), transparent 58%);
}
#sidebar a[aria-current="page"] {
background-color: color-mix(in srgb, var(--color-primary-500) 22%, transparent);
color: white;
box-shadow: inset 3px 0 0 var(--color-primary-400);
}
@media (max-width: 767px) {
.layout-sidebar {
box-shadow: 20px 0 60px rgb(2 6 23 / 0.42);
}
.layout-topbar__tools {
max-width: 60vw;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Default document flow - public/guest pages need vertical scrolling */
html,
body {
resources/js/alpine/components/admin-submenu.js
+11 -1
View File
@@ -6,9 +6,19 @@ import Alpine from '@alpinejs/csp';
Alpine.data('adminSubmenu', () => ({
open: false,
init() {
this.open = Array.from(this.$el.querySelectorAll('a[href]')).some((link) => {
try {
var linkUrl = new URL(link.href, window.location.origin);
return linkUrl.origin === window.location.origin && linkUrl.pathname === window.location.pathname;
} catch (_error) {
return false;
}
});
},
toggle() {
this.open = !this.open;
}
}));
resources/js/alpine/components/mobile-nav.js
+51 -1
View File
@@ -50,6 +50,17 @@ Alpine.data('mobileSidebar', () => ({
* Document-level delegation for mobile menu elements without x-data.
*/
(function() {
document.querySelectorAll('#sidebar a[href]').forEach(function(link) {
try {
var linkUrl = new URL(link.href, window.location.origin);
if (linkUrl.origin === window.location.origin && linkUrl.pathname === window.location.pathname) {
link.setAttribute('aria-current', 'page');
}
} catch (_error) {
// Ignore malformed or non-navigational URLs.
}
});
var toggle = document.getElementById('mobile-menu-toggle');
var panel = document.getElementById('mobile-nav-panel');
var iconOpen = document.getElementById('mobile-menu-icon-open');
@@ -82,6 +93,7 @@ Alpine.data('mobileSidebar', () => ({
searchToggle.addEventListener('click', function(ev) {
ev.preventDefault();
searchForm.classList.toggle('hidden');
searchToggle.setAttribute('aria-expanded', searchForm.classList.contains('hidden') ? 'false' : 'true');
if (panel && !searchForm.classList.contains('hidden')) {
panel.classList.add('hidden');
if (iconOpen && iconClose) { iconOpen.classList.remove('hidden'); iconClose.classList.add('hidden'); }
@@ -91,10 +103,44 @@ Alpine.data('mobileSidebar', () => ({
}
var mobileSidebarToggle = document.getElementById('mobile-sidebar-toggle');
var mobileSidebarClose = document.getElementById('mobile-sidebar-close');
var mobileSidebarBackdrop = document.getElementById('mobile-sidebar-backdrop');
function setMobileSidebar(open) {
var sidebar = document.getElementById('sidebar');
if (!sidebar || !mobileSidebarToggle) return;
sidebar.classList.toggle('hidden', !open);
sidebar.classList.toggle('flex', open);
mobileSidebarBackdrop?.classList.toggle('hidden', !open);
mobileSidebarToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
mobileSidebarToggle.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
if (open) {
mobileSidebarClose?.focus();
} else if (window.innerWidth < 768) {
mobileSidebarToggle.focus();
}
}
if (mobileSidebarToggle && !mobileSidebarToggle.closest('[x-data]')) {
mobileSidebarToggle.addEventListener('click', function() {
var sidebar = document.getElementById('sidebar');
if (sidebar) { sidebar.classList.toggle('hidden'); sidebar.classList.toggle('flex'); }
if (sidebar) setMobileSidebar(sidebar.classList.contains('hidden'));
});
mobileSidebarClose?.addEventListener('click', function() {
setMobileSidebar(false);
});
mobileSidebarBackdrop?.addEventListener('click', function() {
setMobileSidebar(false);
});
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' && mobileSidebarToggle.getAttribute('aria-expanded') === 'true') {
setMobileSidebar(false);
}
});
}
@@ -105,5 +151,9 @@ Alpine.data('mobileSidebar', () => ({
if (iconOpen && iconClose) { iconOpen.classList.remove('hidden'); iconClose.classList.add('hidden'); }
if (toggle) toggle.setAttribute('aria-expanded', 'false');
}
if (window.innerWidth >= 768 && mobileSidebarToggle) {
setMobileSidebar(false);
}
});
})();
resources/views/admin/dashboard.blade.php
+7 -5
View File
@@ -14,15 +14,17 @@
<div x-data="adminDashboard"
id="adminDashboard"
class="admin-dashboard-page"
data-data-url="{{ route('admin.api.dashboard-data') }}"
data-refresh-interval="{{ 60 * 1000 }}">
<div class="space-y-6" data-dashboard-content>
<div class="admin-dashboard-page__content space-y-6" data-dashboard-content>
<!-- Welcome Section -->
<x-admin.card class="p-6">
<x-admin.card class="admin-dashboard-page__hero p-6">
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Admin Dashboard</h2>
<p class="text-gray-600">Welcome to the administration panel</p>
<p class="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary-600 dark:text-primary-300">Operations overview</p>
<h1 class="text-2xl font-semibold tracking-tight text-gray-950 dark:text-white sm:text-3xl">Admin Dashboard</h1>
<p class="mt-2 text-gray-600 dark:text-gray-300">Monitor index health, users, releases, and site activity from one workspace.</p>
</div>
<div class="rounded-lg bg-gray-50 dark:bg-gray-900 px-4 py-3 text-sm text-gray-600 dark:text-gray-300 lg:text-right">
<p class="font-medium text-gray-700 dark:text-gray-200">
@@ -34,7 +36,7 @@
</x-admin.card>
<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
<div class="admin-dashboard-page__stats-grid grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
<!-- Total Releases -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
resources/views/components/admin/card.blade.php
+1 -1
View File
@@ -3,6 +3,6 @@
'noPadding' => false,
])
<div {{ $attributes->merge(['class' => 'bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700']) }}>
<div {{ $attributes->merge(['class' => 'admin-card surface-panel rounded-2xl border shadow-sm']) }}>
{{ $slot }}
</div>
resources/views/components/admin/data-table.blade.php
+1 -1
View File
@@ -5,7 +5,7 @@
'striped' => false,
])
<div class="overflow-x-auto overscroll-x-contain">
<div class="admin-data-table-wrap overflow-x-auto overscroll-x-contain">
<table {{ $attributes->merge(['class' => 'min-w-full table-auto divide-y divide-gray-200 dark:divide-gray-700']) }}>
@if(isset($head))
<thead @class([
resources/views/components/admin/page-header.blade.php
+9 -8
View File
@@ -5,24 +5,25 @@
'subtitle' => null,
])
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<div class="flex flex-wrap justify-between items-center gap-3">
<div>
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
<div {{ $attributes->merge(['class' => 'admin-page-header px-4 py-5 sm:px-6']) }}>
<div class="flex flex-wrap items-start justify-between gap-4">
<div class="min-w-0">
<h1 class="flex items-center gap-3 text-2xl font-semibold tracking-tight text-gray-950 dark:text-white">
@if($icon)
<i class="{{ $icon }} mr-2"></i>
<span class="admin-page-header__icon flex h-10 w-10 shrink-0 items-center justify-center rounded-xl" aria-hidden="true">
<i class="{{ $icon }}"></i>
</span>
@endif
{{ $title }}
<span class="break-words">{{ $title }}</span>
</h1>
@if($subtitle)
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $subtitle }}</p>
@endif
</div>
@if(isset($actions))
<div class="flex flex-wrap gap-2">
<div class="admin-page-header__actions flex flex-wrap gap-2">
{{ $actions }}
</div>
@endif
</div>
</div>
resources/views/components/admin/stat-card.blade.php
+3 -4
View File
@@ -19,14 +19,14 @@
$colors = $colorMap[$color] ?? $colorMap['blue'];
@endphp
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700">
<div {{ $attributes->merge(['class' => 'admin-stat-card surface-panel rounded-2xl border p-5 shadow-sm sm:p-6']) }}>
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">{{ $label }}</p>
<p class="text-3xl font-bold text-gray-800 dark:text-gray-200">{{ $value }}</p>
</div>
<div class="w-12 h-12 {{ $colors['bg'] }} rounded-lg flex items-center justify-center">
<i class="{{ $icon }} text-2xl {{ $colors['text'] }}"></i>
<div class="flex h-12 w-12 items-center justify-center rounded-xl {{ $colors['bg'] }}">
<i class="{{ $icon }} text-xl {{ $colors['text'] }}" aria-hidden="true"></i>
</div>
</div>
@if($footer || isset($footerSlot))
@@ -39,4 +39,3 @@
</div>
@endif
</div>
resources/views/components/page-header.blade.php
+3 -3
View File
@@ -4,10 +4,10 @@
'icon' => null,
])
<div {{ $attributes->merge(['class' => 'px-6 py-6']) }}>
<div {{ $attributes->merge(['class' => 'app-page-header px-4 py-5 sm:px-6 sm:py-6']) }}>
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="min-w-0">
<h1 class="flex items-center gap-3 text-2xl font-bold text-gray-900 dark:text-gray-100 sm:text-3xl">
<h1 class="flex items-center gap-3 text-2xl font-semibold tracking-tight text-gray-950 dark:text-white sm:text-3xl">
@if($icon)
<i class="{{ $icon }} text-primary-600 dark:text-primary-400" aria-hidden="true"></i>
@endif
@@ -19,7 +19,7 @@
</div>
@isset($actions)
<div class="flex shrink-0 flex-wrap items-center gap-2">
<div class="app-page-header__actions flex shrink-0 flex-wrap items-center gap-2">
{{ $actions }}
</div>
@endisset
resources/views/layouts/admin.blade.php
+47 -28
View File
@@ -27,31 +27,51 @@
@stack('meta')
@stack('styles')
</head>
<body class="app-shell bg-gray-100 dark:bg-gray-900 font-sans antialiased">
<div class="h-screen flex">
<body class="app-shell font-sans antialiased">
<a href="#main-content" class="skip-link">Skip to admin content</a>
<div class="layout-shell layout-shell--admin h-screen flex">
<!-- Admin Sidebar -->
<aside id="sidebar" class="hidden md:flex md:flex-col w-64 bg-gray-900 dark:bg-gray-950 text-white shrink-0 h-full overflow-y-auto">
<div class="flex items-center justify-between p-4 border-b border-white/10 dark:border-white/5">
<a href="{{ route('admin.index') }}" class="flex items-center space-x-2">
<i class="fas fa-cog text-2xl text-blue-500 dark:text-blue-400"></i>
<span class="text-xl font-semibold">Admin Panel</span>
<aside id="sidebar" class="layout-sidebar layout-sidebar--admin fixed inset-y-0 left-0 z-50 hidden h-full w-72 shrink-0 flex-col overflow-y-auto text-white md:static md:z-auto md:flex md:w-64" aria-label="Admin navigation">
<div class="layout-sidebar__brand flex items-center justify-between gap-3 p-4">
<a href="{{ route('admin.index') }}" class="flex min-w-0 items-center gap-3 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400">
<span class="layout-sidebar__logo flex h-11 w-11 shrink-0 items-center justify-center rounded-xl">
<i class="fas fa-sliders text-lg text-primary-300" aria-hidden="true"></i>
</span>
<span class="min-w-0">
<span class="block truncate text-lg font-semibold">Admin Panel</span>
<span class="block text-xs font-medium text-white/55">Operations workspace</span>
</span>
</a>
<button type="button" id="mobile-sidebar-close" class="touch-target inline-flex items-center justify-center rounded-xl text-white/70 hover:bg-white/10 hover:text-white md:hidden" aria-label="Close admin navigation">
<i class="fas fa-xmark" aria-hidden="true"></i>
</button>
</div>
<nav class="flex-1 overflow-y-auto py-4">
<nav class="layout-sidebar__nav flex-1 overflow-y-auto py-3" aria-label="Admin">
@include('partials.admin-menu')
</nav>
</aside>
<button type="button" id="mobile-sidebar-backdrop" class="layout-sidebar-backdrop fixed inset-0 z-40 hidden bg-slate-950/60 backdrop-blur-sm md:hidden" aria-label="Close admin navigation" tabindex="-1"></button>
<!-- Main Content -->
<div class="flex-1 flex flex-col h-full overflow-hidden">
<div class="layout-content flex h-full min-w-0 flex-1 flex-col overflow-hidden">
<!-- Top Bar -->
<header class="surface-header bg-gray-800 dark:bg-gray-950 text-white shrink-0 z-10">
<div class="flex items-center justify-between px-6 py-4">
<h1 class="text-lg font-semibold text-gray-200">{{ $page_title ?? 'Admin Dashboard' }}</h1>
<div class="flex items-center space-x-4">
<button id="theme-toggle" class="bg-gray-700 dark:bg-gray-800 text-gray-100 dark:text-gray-200 px-3 py-2 rounded-lg shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition-all duration-200 flex items-center gap-2 touch-target"
title="{{ ucfirst($userTheme) }} Mode">
<header class="layout-topbar surface-header z-30 shrink-0 text-white">
<div class="layout-topbar__inner flex min-h-16 items-center justify-between gap-3 px-3 py-2 sm:px-5 lg:px-6">
<div class="flex min-w-0 items-center gap-3">
<button id="mobile-sidebar-toggle" type="button" class="touch-target inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 text-white/80 transition hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 md:hidden" aria-label="Open admin navigation" aria-controls="sidebar" aria-expanded="false">
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
<div class="min-w-0">
<p class="text-[0.6875rem] font-semibold uppercase tracking-[0.16em] text-white/45">Administration</p>
<p class="truncate text-sm font-semibold text-white sm:text-base">{{ $page_title ?? 'Dashboard' }}</p>
</div>
</div>
<div class="layout-topbar__tools flex items-center gap-1 rounded-2xl border border-white/10 bg-white/5 p-1 shadow-sm backdrop-blur-sm sm:gap-2">
<button id="theme-toggle" class="touch-target flex items-center gap-2 rounded-xl px-3 py-2 text-gray-100 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400"
title="{{ ucfirst($userTheme) }} Mode"
aria-label="Change theme. Current theme: {{ $userTheme }}">
<i id="theme-icon" class="fas
@if($userTheme === 'dark')
fa-moon
@@ -65,13 +85,13 @@
{{ ucfirst($userTheme) }}
</span>
</button>
<a href="{{ url('/') }}" class="text-gray-300 dark:text-gray-400 hover:text-white transition">
<i class="fas fa-home mr-1"></i> Back to Site
<a href="{{ url('/') }}" class="touch-target inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-white/75 transition hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400" title="Back to site" aria-label="View site">
<i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i><span class="hidden lg:inline">View site</span>
</a>
<a href="{{ route('logout') }}"
data-logout
class="text-red-400 hover:text-red-300 transition">
<i class="fas fa-sign-out-alt mr-1"></i> Logout
class="touch-target inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-red-300 transition hover:bg-red-400/10 hover:text-red-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-300" title="Log out" aria-label="Log out">
<i class="fas fa-sign-out-alt" aria-hidden="true"></i><span class="hidden xl:inline">Log out</span>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
@csrf
@@ -81,23 +101,23 @@
</header>
<!-- Page Content - Scrollable Area -->
<main class="flex-1 overflow-y-auto p-6 rounded-xl shadow-inner ring-1 ring-black/10 dark:ring-white/5" data-scroll-container>
<main id="main-content" class="layout-main flex-1 overflow-y-auto p-3 sm:p-5 lg:p-6" data-scroll-container tabindex="-1">
@unless(trim($__env->yieldContent('suppress_layout_flash')))
@if(session('success'))
<div class="mb-4 p-4 bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 dark:border-green-600 text-green-800 dark:text-green-200 rounded">
<i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
<div class="layout-flash layout-flash--success mb-5" role="status">
<i class="fas fa-circle-check" aria-hidden="true"></i><div>{{ session('success') }}</div>
</div>
@endif
@if(session('error'))
<div class="mb-4 p-4 bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 dark:border-red-600 text-red-800 dark:text-red-200 rounded">
<i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
<div class="layout-flash layout-flash--error mb-5" role="alert">
<i class="fas fa-circle-exclamation" aria-hidden="true"></i><div>{{ session('error') }}</div>
</div>
@endif
@if(session('warning'))
<div class="mb-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 dark:border-yellow-600 text-yellow-800 dark:text-yellow-200 rounded">
<i class="fas fa-exclamation-triangle mr-2"></i>{{ session('warning') }}
<div class="layout-flash layout-flash--warning mb-5" role="status">
<i class="fas fa-triangle-exclamation" aria-hidden="true"></i><div>{{ session('warning') }}</div>
</div>
@endif
@endunless
@@ -106,7 +126,7 @@
</main>
<!-- Admin Footer - Fixed at bottom -->
<footer class="shrink-0">
<footer class="layout-footer shrink-0">
<div class="px-6 py-3">
<div class="flex flex-wrap items-center justify-between gap-2 text-sm text-gray-300 dark:text-gray-400">
<p>&copy; {{ now()->year }} <a href="https://github.com/NNTmux/newznab-tmux" class="text-primary-400 hover:text-primary-300 transition">NNTmux</a> Admin Panel</p>
@@ -146,4 +166,3 @@
@endauth
</body>
</html>
resources/views/layouts/main.blade.php
+41 -24
View File
@@ -33,50 +33,65 @@
@stack('styles')
</head>
<body class="app-shell font-sans antialiased">
<div class="h-screen flex">
<a href="#main-content" class="skip-link">Skip to content</a>
<div class="layout-shell h-screen flex">
<!-- Sidebar -->
@auth
<aside id="sidebar" class="hidden md:flex md:flex-col w-64 text-white shrink-0 h-full overflow-y-auto">
<div class="flex items-center justify-between p-4 border-b border-white/10 dark:border-white/5">
<a href="{{ $site['home_link'] ?? url('/') }}" class="flex items-center space-x-3">
<img src="{{ asset('assets/images/logo.svg') }}" alt="{{ config('app.name') }} Logo" class="w-12 h-12" aria-hidden="true">
<span class="text-xl font-semibold">{{ config('app.name') }}</span>
<aside id="sidebar" class="layout-sidebar fixed inset-y-0 left-0 z-50 hidden h-full w-72 shrink-0 flex-col overflow-y-auto text-white md:static md:z-auto md:flex md:w-64" aria-label="Account navigation">
<div class="layout-sidebar__brand flex items-center justify-between gap-3 p-4">
<a href="{{ $site['home_link'] ?? url('/') }}" class="flex min-w-0 items-center gap-3 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400">
<span class="layout-sidebar__logo flex h-11 w-11 shrink-0 items-center justify-center rounded-xl">
<i class="fas fa-layer-group text-lg text-primary-300" aria-hidden="true"></i>
</span>
<span class="min-w-0">
<span class="block truncate text-lg font-semibold">{{ config('app.name') }}</span>
<span class="block text-xs font-medium text-white/55">Usenet workspace</span>
</span>
</a>
<button type="button" id="mobile-sidebar-close" class="touch-target inline-flex items-center justify-center rounded-xl text-white/70 hover:bg-white/10 hover:text-white md:hidden" aria-label="Close navigation">
<i class="fas fa-xmark" aria-hidden="true"></i>
</button>
</div>
<nav class="flex-1 overflow-y-auto py-4">
<nav class="layout-sidebar__nav flex-1 overflow-y-auto py-3" aria-label="User">
@include('partials.sidebar')
</nav>
</aside>
<button type="button" id="mobile-sidebar-backdrop" class="layout-sidebar-backdrop fixed inset-0 z-40 hidden bg-slate-950/60 backdrop-blur-sm md:hidden" aria-label="Close navigation" tabindex="-1"></button>
@endauth
<!-- Main Content -->
<div class="flex-1 flex flex-col h-full overflow-hidden">
<div class="layout-content flex h-full min-w-0 flex-1 flex-col overflow-hidden">
<!-- Top Navigation -->
@auth
<header class="surface-header text-white shrink-0 z-10">
<header class="layout-topbar surface-header z-30 shrink-0 text-white">
@include('partials.header-menu')
</header>
@endauth
<!-- Page Content - This is the scrollable area -->
<main class="flex-1 overflow-y-auto shadow-inner ring-1 ring-black/10 dark:ring-white/5" data-scroll-container>
<div class="container mx-auto px-4 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]">
<main id="main-content" class="layout-main flex-1 overflow-y-auto" data-scroll-container tabindex="-1">
<div class="layout-page-container container mx-auto max-w-[1600px] px-3 py-5 pb-[max(1.5rem,env(safe-area-inset-bottom))] sm:px-5 sm:py-6 lg:px-8">
@if(session('success'))
<div class="mb-4 p-4 bg-green-100 dark:bg-green-900 border border-green-400 dark:border-green-700 text-green-700 dark:text-green-200 rounded-lg">
{{ session('success') }}
<div class="layout-flash layout-flash--success mb-5" role="status">
<i class="fas fa-circle-check" aria-hidden="true"></i>
<div>{{ session('success') }}</div>
</div>
@endif
@if(session('error'))
<div class="mb-4 p-4 bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-200 rounded-lg">
@if(is_array(session('error')))
@foreach(session('error') as $error)
<div>{{ $error }}</div>
@endforeach
@else
{{ session('error') }}
@endif
<div class="layout-flash layout-flash--error mb-5" role="alert">
<i class="fas fa-circle-exclamation" aria-hidden="true"></i>
<div>
@if(is_array(session('error')))
@foreach(session('error') as $error)
<div>{{ $error }}</div>
@endforeach
@else
{{ session('error') }}
@endif
</div>
</div>
@endif
@@ -95,8 +110,9 @@
</div>
<!-- Mobile Sidebar Toggle -->
<button id="mobile-sidebar-toggle" class="md:hidden fixed z-50 bg-primary-600 dark:bg-primary-700 text-white p-4 rounded-full shadow-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition-all touch-target bottom-[max(5rem,calc(env(safe-area-inset-bottom)+4rem))] right-[max(1rem,env(safe-area-inset-right))]" aria-label="Toggle Sidebar">
<i class="fas fa-bars text-lg"></i>
<button id="mobile-sidebar-toggle" class="layout-mobile-sidebar-toggle touch-target fixed z-30 inline-flex items-center gap-2 rounded-full bg-primary-600 px-4 py-3 text-sm font-semibold text-white shadow-lg transition hover:bg-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 dark:bg-primary-700 dark:hover:bg-primary-600 md:hidden bottom-[max(5rem,calc(env(safe-area-inset-bottom)+4rem))] right-[max(1rem,env(safe-area-inset-right))]" aria-label="Open account navigation" aria-controls="sidebar" aria-expanded="false">
<i class="fas fa-compass" aria-hidden="true"></i>
<span>Navigate</span>
</button>
<!-- Back to Top -->
@@ -106,7 +122,8 @@
@php $themePreference = $userTheme; @endphp
@guest
<button id="theme-toggle" class="fixed z-50 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-3 rounded-full shadow-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 flex items-center gap-2 touch-target bottom-[max(1rem,env(safe-area-inset-bottom))] right-[max(1rem,env(safe-area-inset-right))]"
title="{{ ucfirst($themePreference) }} Mode">
title="{{ ucfirst($themePreference) }} Mode"
aria-label="Change theme. Current theme: {{ $themePreference }}">
<i id="theme-icon" class="fas {{ $themePreference === 'dark' ? 'fa-moon' : ($themePreference === 'system' ? 'fa-desktop' : 'fa-sun') }}"></i>
<span id="theme-label" class="text-xs font-medium hidden sm:inline">{{ ucfirst($themePreference) }}</span>
</button>
resources/views/partials/admin-menu.blade.php
+1 -2
View File
@@ -1,4 +1,4 @@
<div class="space-y-2 px-4">
<div class="admin-sidebar-menu space-y-1 px-3 py-2">
<!-- Dashboard -->
<div class="mb-4">
<a href="{{ route('admin.index') }}" class="flex items-center space-x-3 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
@@ -330,4 +330,3 @@
</div>
</div>
resources/views/partials/confirmation-modal.blade.php
+2 -3
View File
@@ -23,8 +23,8 @@
<i class="fas mr-2" :class="iconClass()"></i>
<span x-text="title">Confirm Action</span>
</h3>
<button type="button" @click="cancel()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
<i class="fas fa-times text-xl"></i>
<button type="button" @click="cancel()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" aria-label="Close confirmation">
<i class="fas fa-times text-xl" aria-hidden="true"></i>
</button>
</div>
</div>
@@ -50,4 +50,3 @@
</div>
</div>
</div>
resources/views/partials/filelist-modal.blade.php
+2 -3
View File
@@ -33,8 +33,8 @@
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100" id="filelist-modal-title">
<i class="fas fa-folder-open mr-2 text-blue-600 dark:text-blue-400"></i>File List
</h3>
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" @click="close()">
<i class="fas fa-times text-xl"></i>
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" @click="close()" aria-label="Close file list">
<i class="fas fa-times text-xl" aria-hidden="true"></i>
</button>
</div>
@@ -60,4 +60,3 @@
</div>
</div>
</div>
resources/views/partials/header-menu.blade.php
+15 -13
View File
@@ -1,14 +1,14 @@
<nav class="bg-gray-800 dark:bg-gray-950 relative">
<div class="container mx-auto px-4">
<nav class="layout-primary-nav relative" aria-label="Content categories">
<div class="container mx-auto max-w-[1600px] px-3 sm:px-5 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Mobile menu button (visible below lg) -->
<button type="button" class="lg:hidden text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white focus:outline-none p-2 touch-target" id="mobile-menu-toggle" aria-expanded="false" aria-controls="mobile-nav-panel">
<i class="fas fa-bars text-xl" id="mobile-menu-icon-open"></i>
<i class="fas fa-times text-xl hidden" id="mobile-menu-icon-close"></i>
<button type="button" class="touch-target rounded-xl p-2 text-gray-300 transition hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 lg:hidden" id="mobile-menu-toggle" aria-label="Toggle category navigation" aria-expanded="false" aria-controls="mobile-nav-panel">
<i class="fas fa-bars text-xl" id="mobile-menu-icon-open" aria-hidden="true"></i>
<i class="fas fa-times text-xl hidden" id="mobile-menu-icon-close" aria-hidden="true"></i>
</button>
<!-- Desktop Navigation (visible at lg+) -->
<div class="hidden lg:flex lg:items-center lg:space-x-1 flex-1 min-w-0" id="desktop-nav">
<div class="layout-primary-nav__categories hidden min-w-0 flex-1 lg:flex lg:items-center lg:gap-1" id="desktop-nav">
@if(isset($parentcatlist))
@foreach($parentcatlist as $parentcat)
@if($parentcat['id'] == App\Models\Category::TV_ROOT)
@@ -165,13 +165,14 @@
<!-- Right side: Search and User Menu -->
<div class="flex items-center space-x-2 lg:space-x-4 ml-auto">
<!-- Mobile Search Toggle (visible below lg) -->
<button type="button" class="lg:hidden text-gray-300 hover:text-white p-2 touch-target" id="mobile-search-toggle">
<i class="fa fa-search text-lg"></i>
<button type="button" class="touch-target rounded-xl p-2 text-gray-300 transition hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 lg:hidden" id="mobile-search-toggle" aria-label="Toggle release search" aria-expanded="false" aria-controls="mobile-search-form">
<i class="fa fa-search text-lg" aria-hidden="true"></i>
</button>
<!-- Desktop Search Form with Autocomplete (visible at lg+) -->
<form method="GET" action="{{ route('search') }}" class="hidden lg:flex items-center relative" id="header-search-form">
<select name="t" class="bg-gray-700 text-white text-sm rounded-l-lg px-3 py-2 border-r border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
<form method="GET" action="{{ route('search') }}" class="layout-primary-nav__search relative hidden items-center lg:flex" id="header-search-form" role="search">
<label for="header-search-category" class="sr-only">Search category</label>
<select id="header-search-category" name="t" class="bg-gray-700 text-white text-sm rounded-l-lg px-3 py-2 border-r border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
<option value="-1">All</option>
@if(isset($parentcatlist))
@foreach($parentcatlist as $parentcat)
@@ -183,19 +184,20 @@
@endif
</select>
<div class="relative">
<label for="header-search-input" class="sr-only">Search releases</label>
<input type="search"
name="search"
id="header-search-input"
value="{{ $header_menu_search ?? '' }}"
placeholder="Search..."
placeholder="Search releases"
autocomplete="off"
class="bg-gray-700 text-white text-sm px-3 py-2 w-40 xl:w-48 focus:outline-none focus:ring-2 focus:ring-primary-500">
<!-- Autocomplete dropdown for header -->
<div id="header-autocomplete-dropdown" class="hidden absolute z-50 w-64 mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto right-0">
</div>
</div>
<button type="submit" class="bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 text-white px-4 py-2 rounded-r-lg transition">
<i class="fa fa-search"></i>
<button type="submit" class="bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 text-white px-4 py-2 rounded-r-lg transition" aria-label="Search releases">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</form>
resources/views/partials/image-modal.blade.php
+2 -3
View File
@@ -33,8 +33,8 @@
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100" id="image-modal-title" x-text="imageTitle">
Image Preview
</h3>
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" @click="close()">
<i class="fas fa-times text-xl"></i>
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" @click="close()" aria-label="Close image preview">
<i class="fas fa-times text-xl" aria-hidden="true"></i>
</button>
</div>
@@ -57,4 +57,3 @@
</div>
</div>
</div>
resources/views/partials/mediainfo-modal.blade.php
+2 -3
View File
@@ -33,8 +33,8 @@
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100" id="mediainfo-modal-title">
<i class="fas fa-info-circle mr-2 text-blue-600 dark:text-blue-400"></i>Media Information
</h3>
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" @click="close()">
<i class="fas fa-times text-xl"></i>
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" @click="close()" aria-label="Close media information">
<i class="fas fa-times text-xl" aria-hidden="true"></i>
</button>
</div>
@@ -60,4 +60,3 @@
</div>
</div>
</div>
resources/views/partials/nfo-modal.blade.php
+2 -3
View File
@@ -33,8 +33,8 @@
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100" id="nfo-modal-title">
<i class="fas fa-file-alt mr-2 text-yellow-600 dark:text-yellow-400"></i>NFO File
</h3>
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" @click="close()">
<i class="fas fa-times text-xl"></i>
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" @click="close()" aria-label="Close NFO preview">
<i class="fas fa-times text-xl" aria-hidden="true"></i>
</button>
</div>
@@ -67,4 +67,3 @@
</div>
</div>
resources/views/partials/preview-modal.blade.php
+2 -3
View File
@@ -33,8 +33,8 @@
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100" id="preview-modal-title" x-text="title">
Preview Image
</h3>
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" @click="close()">
<i class="fas fa-times text-xl"></i>
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" @click="close()" aria-label="Close preview">
<i class="fas fa-times text-xl" aria-hidden="true"></i>
</button>
</div>
@@ -72,4 +72,3 @@
</div>
</div>
</div>
resources/views/partials/report-modal.blade.php
+2 -2
View File
@@ -36,8 +36,8 @@
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100" id="report-modal-title">
<i class="fas fa-flag text-red-500 mr-2"></i>Report Release
</h3>
<button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" @click="close()">
<i class="fas fa-times"></i>
<button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" @click="close()" aria-label="Close report form">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
resources/views/partials/sidebar.blade.php
+2 -2
View File
@@ -1,4 +1,4 @@
<nav class="flex flex-col space-y-1 p-4">
<div class="user-sidebar-menu flex flex-col gap-1 px-3 py-2">
<!-- Browse Menu -->
<div class="sidebar-section">
<button class="sidebar-toggle w-full flex items-center justify-between px-4 py-3 text-white hover:bg-white/10 rounded-lg transition" data-target="submenu1">
@@ -185,4 +185,4 @@
@csrf
</form>
@endauth
</nav>
</div>
resources/views/partials/toast-notifications.blade.php
+3 -3
View File
@@ -30,12 +30,12 @@
<div class="flex-1 text-sm text-gray-700 dark:text-gray-300" x-text="toast.message"></div>
<button type="button"
@click="dismiss(toast.id)"
class="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition">
<i class="fas fa-times"></i>
class="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition"
aria-label="Dismiss notification">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</template>
</div>