diff --git a/views/css/schedule/schedule.css b/views/css/schedule/schedule.css
index 5508a9e..d372622 100644
--- a/views/css/schedule/schedule.css
+++ b/views/css/schedule/schedule.css
@@ -1,5 +1,4 @@
:root {
-
--bg-base: #09090b;
--bg-surface: #121215;
--bg-glass: rgba(18, 18, 21, 0.8);
@@ -12,7 +11,8 @@
--radius-md: 12px;
--radius-lg: 24px;
--nav-height: 80px;
- --font-main: 'Inter', sans-serif;
+ --font-main: "Inter", sans-serif;
+ --titlebar-height: 40px;
}
* {
@@ -31,11 +31,15 @@ body {
flex-direction: column;
}
+html.electron body {
+ padding-top: 0;
+}
+
.navbar {
height: var(--nav-height);
display: flex;
align-items: center;
- justify-content: center;
+ justify-content: space-between;
padding: 0 2rem;
background: var(--bg-glass);
backdrop-filter: blur(16px);
@@ -66,7 +70,6 @@ body {
display: flex;
align-items: center;
justify-content: center;
-
}
.brand-icon img {
@@ -82,6 +85,9 @@ body {
padding: 0.3rem;
border-radius: 999px;
border: 1px solid var(--border);
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
}
.nav-button {
@@ -108,6 +114,290 @@ body {
border: 1px solid rgba(255, 255, 255, 0.05);
}
+.nav-right {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+ margin-left: auto;
+}
+
+.search-wrapper {
+ position: relative;
+ width: 250px;
+}
+
+.search-input {
+ width: 100%;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 0.7rem 1rem 0.7rem 2.5rem;
+ border-radius: 99px;
+ color: white;
+ font-family: inherit;
+ transition: 0.2s;
+}
+
+.search-input:focus {
+ background: rgba(255, 255, 255, 0.1);
+ border-color: var(--accent);
+ box-shadow: 0 0 15px var(--accent-glow);
+}
+
+.search-icon {
+ position: absolute;
+ left: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ pointer-events: none;
+ color: var(--text-secondary);
+}
+
+.search-results {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: rgba(15, 15, 18, 0.95);
+ backdrop-filter: blur(12px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-top: none;
+ border-radius: 0 0 12px 12px;
+ padding: 0.5rem;
+ display: none;
+ flex-direction: column;
+ gap: 0.25rem;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+ max-height: 400px;
+ overflow-y: auto;
+ z-index: 2000;
+}
+
+.search-results.active {
+ display: flex;
+}
+
+.search-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.5rem;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: background 0.2s;
+ text-decoration: none;
+ color: inherit;
+}
+
+.search-item:hover {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.search-poster {
+ width: 40px;
+ height: 56px;
+ border-radius: 4px;
+ object-fit: cover;
+ background: #222;
+}
+
+.search-info {
+ flex: 1;
+ overflow: hidden;
+}
+
+.search-title {
+ font-size: 0.9rem;
+ font-weight: 600;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--text-primary);
+}
+
+.search-meta {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+ margin-top: 2px;
+}
+
+.rating-pill {
+ color: #4ade80;
+ font-weight: 700;
+}
+
+.nav-user {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.user-avatar-btn {
+ position: relative;
+ cursor: pointer;
+ transition: transform 0.2s ease;
+}
+
+.user-avatar-btn:hover {
+ transform: scale(1.05);
+}
+
+#nav-avatar {
+ width: 44px;
+ height: 44px;
+ object-fit: cover;
+ border-radius: 50%;
+ border: 2px solid var(--accent);
+ background: var(--bg-surface);
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 0 0 0 var(--accent-glow);
+}
+
+.user-avatar-btn:hover #nav-avatar {
+ box-shadow: 0 0 0 4px var(--accent-glow);
+ border-color: #a78bfa;
+}
+
+.online-indicator {
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ width: 12px;
+ height: 12px;
+ background: #22c55e;
+ border: 2px solid var(--bg-base);
+ border-radius: 50%;
+ animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.6;
+ }
+}
+
+.nav-dropdown {
+ position: absolute;
+ top: calc(100% + 12px);
+ right: 0;
+ background: rgba(18, 18, 21, 0.98);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 16px;
+ padding: 0;
+ min-width: 260px;
+ display: none;
+ flex-direction: column;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1);
+ z-index: 9999;
+ overflow: hidden;
+ animation: dropdownSlide 0.2s ease-out;
+}
+
+@keyframes dropdownSlide {
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.nav-dropdown.active {
+ display: flex;
+}
+
+.dropdown-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 16px;
+ background: rgba(139, 92, 246, 0.08);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.dropdown-avatar {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ object-fit: cover;
+ border: 2px solid var(--accent);
+ background: var(--bg-surface);
+}
+
+.dropdown-user-info {
+ flex: 1;
+ overflow: hidden;
+}
+
+.dropdown-username {
+ font-weight: 700;
+ font-size: 1rem;
+ color: var(--text-primary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 2px;
+}
+
+.dropdown-item {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ color: var(--text-primary);
+ text-decoration: none;
+ font-size: 0.9rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ border: none;
+ background: transparent;
+ width: 100%;
+ text-align: left;
+ font-family: inherit;
+}
+
+.dropdown-item svg {
+ flex-shrink: 0;
+ color: var(--text-secondary);
+ transition: all 0.2s ease;
+}
+
+.dropdown-item:hover {
+ background: rgba(255, 255, 255, 0.08);
+ color: white;
+ padding-left: 20px;
+}
+
+.dropdown-item:hover svg {
+ color: var(--accent);
+ transform: translateX(2px);
+}
+
+.logout-item {
+ color: #ef4444;
+ margin-top: 4px;
+}
+
+.logout-item svg {
+ color: #ef4444;
+}
+
+.logout-item:hover {
+ background: rgba(239, 68, 68, 0.15);
+ color: #f87171;
+}
+
.ambient-bg {
position: absolute;
inset: 0;
@@ -125,7 +415,7 @@ body {
display: flex;
flex-direction: column;
overflow: hidden;
- padding: 0 2rem 2rem 2rem;
+ padding: 3rem;
max-width: 1920px;
width: 100%;
margin: 0 auto;
@@ -359,7 +649,7 @@ body {
}
.anime-chip::before {
- content: '';
+ content: "";
position: absolute;
left: 0;
top: 0;
@@ -450,4 +740,4 @@ body {
to {
transform: rotate(360deg);
}
-}
\ No newline at end of file
+}
diff --git a/views/schedule.html b/views/schedule.html
index b54cccd..b68d50f 100644
--- a/views/schedule.html
+++ b/views/schedule.html
@@ -8,7 +8,6 @@
-