mirror of
https://github.com/plexguide/Huntarr.io.git
synced 2025-12-20 13:39:35 -06:00
936 lines
30 KiB
HTML
936 lines
30 KiB
HTML
<div class="sidebar" id="sidebar">
|
|
<div class="sidebar-top-line"></div>
|
|
<div class="logo-container">
|
|
<a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
|
|
style="display: flex; align-items: center; text-decoration: none; color: inherit;">
|
|
<img src="./static/logo/256.png" alt="Huntarr Logo" class="logo logo-large">
|
|
<img src="./static/logo/32.png" alt="Huntarr Logo" class="logo logo-small">
|
|
<h1>Huntarr</h1>
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="nav-menu">
|
|
<!-- Project Sponsors Link -->
|
|
<a href="https://plexguide.github.io/Huntarr.io/donate.html" class="nav-item" target="_blank"
|
|
rel="noopener noreferrer">
|
|
<div class="nav-icon-wrapper heart-icon">
|
|
<i class="fas fa-heart"></i>
|
|
</div>
|
|
<span>Become A Sponsor</span>
|
|
</a>
|
|
<!-- Core Navigation Group -->
|
|
<div class="nav-group" style="margin-top: -10px;">
|
|
<div class="nav-group-title">Core</div>
|
|
<a href="./" class="nav-item" id="homeNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-home"></i>
|
|
</div>
|
|
<span>Home</span>
|
|
</a>
|
|
<a href="./#apps" class="nav-item" id="appsNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-tools"></i>
|
|
</div>
|
|
<span>Apps</span>
|
|
</a>
|
|
<a href="./#swaparr" class="nav-item" id="swaparrNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-exchange-alt"></i>
|
|
</div>
|
|
<span>Swaparr</span>
|
|
</a>
|
|
<a href="./#requestarr" class="nav-item" id="requestarrNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-plus-circle"></i>
|
|
</div>
|
|
<span>Requestarr</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Features Group -->
|
|
<div class="nav-group">
|
|
<div class="nav-group-title">Features</div>
|
|
|
|
<a href="./#logs" class="nav-item" id="logsNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-list-alt"></i>
|
|
</div>
|
|
<span>Logs</span>
|
|
</a>
|
|
<a href="./#hunt-manager" class="nav-item" id="huntManagerNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-crosshairs"></i>
|
|
</div>
|
|
<span>Hunt Manager</span>
|
|
</a>
|
|
<a href="./#settings" class="nav-item" id="settingsNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-cog"></i>
|
|
</div>
|
|
<span>Settings</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Resources Group -->
|
|
<div class="nav-group">
|
|
<div class="nav-group-title">Resources</div>
|
|
<a href="https://github.com/plexguide/Unraid_Intel-ARC_Deployment" class="nav-item" target="_blank"
|
|
rel="noopener noreferrer">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-film"></i>
|
|
</div>
|
|
<span>My AV1 Guide</span>
|
|
</a>
|
|
<a href="https://github.com/flmorg/cleanuperr" class="nav-item" target="_blank" rel="noopener noreferrer">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-broom"></i>
|
|
</div>
|
|
<span>Cleanuperr</span>
|
|
</a>
|
|
<a href="https://github.com/BassHous3/taggarr" class="nav-item" target="_blank" rel="noopener noreferrer">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-tags"></i>
|
|
</div>
|
|
<span>Taggarr</span>
|
|
</a>
|
|
<a href="https://github.com/Wizarrrr/wizarr" class="nav-item" target="_blank" rel="noopener noreferrer">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-magic"></i>
|
|
</div>
|
|
<span>Wizarr</span>
|
|
</a>
|
|
<!-- Project Sponsors removed from here and placed above CORE -->
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Requestarr Sidebar -->
|
|
<div class="sidebar requestarr-sidebar" id="requestarr-sidebar" style="display: none;">
|
|
<div class="sidebar-top-line"></div>
|
|
<div class="logo-container">
|
|
<a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
|
|
style="display: flex; align-items: center; text-decoration: none; color: inherit;">
|
|
<img src="./static/logo/256.png" alt="Huntarr Logo" class="logo logo-large">
|
|
<img src="./static/logo/32.png" alt="Huntarr Logo" class="logo logo-small">
|
|
<h1>Huntarr</h1>
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="nav-menu">
|
|
<!-- Project Sponsors Link -->
|
|
<a href="https://plexguide.github.io/Huntarr.io/donate.html" class="nav-item" target="_blank"
|
|
rel="noopener noreferrer">
|
|
<div class="nav-icon-wrapper heart-icon">
|
|
<i class="fas fa-heart"></i>
|
|
</div>
|
|
<span>Become A Sponsor</span>
|
|
</a>
|
|
|
|
<!-- Huntarr Navigation Group -->
|
|
<div class="nav-group" style="margin-top: -10px;">
|
|
<div class="nav-group-title">Huntarr</div>
|
|
<a href="./" class="nav-item" id="requestarrReturnNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</div>
|
|
<span>Return</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Requestarr Group -->
|
|
<div class="nav-group">
|
|
<div class="nav-group-title">Requestarr</div>
|
|
<a href="./#requestarr" class="nav-item active" id="requestarrHomeNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-home"></i>
|
|
</div>
|
|
<span>Home</span>
|
|
</a>
|
|
<a href="./#requestarr-history" class="nav-item" id="requestarrHistoryNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-history"></i>
|
|
</div>
|
|
<span>History</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Apps Sidebar -->
|
|
<div class="sidebar apps-sidebar" id="apps-sidebar" style="display: none;">
|
|
<div class="sidebar-top-line"></div>
|
|
<div class="logo-container">
|
|
<a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
|
|
style="display: flex; align-items: center; text-decoration: none; color: inherit;">
|
|
<img src="./static/logo/256.png" alt="Huntarr Logo" class="logo logo-large">
|
|
<img src="./static/logo/32.png" alt="Huntarr Logo" class="logo logo-small">
|
|
<h1>Huntarr</h1>
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="nav-menu">
|
|
<!-- Project Sponsors Link -->
|
|
<a href="https://plexguide.github.io/Huntarr.io/donate.html" class="nav-item" target="_blank"
|
|
rel="noopener noreferrer">
|
|
<div class="nav-icon-wrapper heart-icon">
|
|
<i class="fas fa-heart"></i>
|
|
</div>
|
|
<span>Become A Sponsor</span>
|
|
</a>
|
|
|
|
<!-- Huntarr Navigation Group -->
|
|
<div class="nav-group" style="margin-top: -10px;">
|
|
<div class="nav-group-title">Huntarr</div>
|
|
<a href="./" class="nav-item" id="appsReturnNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</div>
|
|
<span>Return</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Apps Group -->
|
|
<div class="nav-group">
|
|
<div class="nav-group-title">Apps</div>
|
|
<a href="./#sonarr" class="nav-item sonarr-app" id="appsSonarrNav">
|
|
<div class="nav-icon-wrapper sonarr-icon">
|
|
<img src="./static/images/app-icons/sonarr.png" alt="Sonarr" class="app-icon-img">
|
|
</div>
|
|
<span>Sonarr</span>
|
|
</a>
|
|
<a href="./#radarr" class="nav-item radarr-app" id="appsRadarrNav">
|
|
<div class="nav-icon-wrapper radarr-icon">
|
|
<img src="./static/images/app-icons/radarr.png" alt="Radarr" class="app-icon-img">
|
|
</div>
|
|
<span>Radarr</span>
|
|
</a>
|
|
<a href="./#lidarr" class="nav-item lidarr-app" id="appsLidarrNav">
|
|
<div class="nav-icon-wrapper lidarr-icon">
|
|
<img src="./static/images/app-icons/lidarr.png" alt="Lidarr" class="app-icon-img">
|
|
</div>
|
|
<span>Lidarr</span>
|
|
</a>
|
|
<a href="./#readarr" class="nav-item readarr-app" id="appsReadarrNav">
|
|
<div class="nav-icon-wrapper readarr-icon">
|
|
<img src="./static/images/app-icons/readarr.png" alt="Readarr" class="app-icon-img">
|
|
</div>
|
|
<span>Readarr</span>
|
|
</a>
|
|
<a href="./#whisparr" class="nav-item whisparr-app" id="appsWhisparrNav">
|
|
<div class="nav-icon-wrapper whisparr-icon">
|
|
<img src="./static/images/app-icons/whisparr.png" alt="Whisparr V2" class="app-icon-img">
|
|
</div>
|
|
<span>Whisparr V2</span>
|
|
</a>
|
|
<a href="./#eros" class="nav-item eros-app" id="appsErosNav">
|
|
<div class="nav-icon-wrapper eros-icon">
|
|
<img src="./static/images/app-icons/eros.png" alt="Whisparr V3" class="app-icon-img">
|
|
</div>
|
|
<span>Whisparr V3</span>
|
|
</a>
|
|
<a href="./#prowlarr" class="nav-item prowlarr-app" id="appsProwlarrNav">
|
|
<div class="nav-icon-wrapper prowlarr-icon">
|
|
<img src="./static/images/app-icons/prowlarr.png" alt="Prowlarr" class="app-icon-img">
|
|
</div>
|
|
<span>Prowlarr</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Settings Sidebar -->
|
|
<div class="sidebar settings-sidebar" id="settings-sidebar" style="display: none;">
|
|
<div class="sidebar-top-line"></div>
|
|
<div class="logo-container">
|
|
<a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
|
|
style="display: flex; align-items: center; text-decoration: none; color: inherit;">
|
|
<img src="./static/logo/256.png" alt="Huntarr Logo" class="logo logo-large">
|
|
<img src="./static/logo/32.png" alt="Huntarr Logo" class="logo logo-small">
|
|
<h1>Huntarr</h1>
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="nav-menu">
|
|
<!-- Project Sponsors Link -->
|
|
<a href="https://plexguide.github.io/Huntarr.io/donate.html" class="nav-item" target="_blank"
|
|
rel="noopener noreferrer">
|
|
<div class="nav-icon-wrapper heart-icon">
|
|
<i class="fas fa-heart"></i>
|
|
</div>
|
|
<span>Become A Sponsor</span>
|
|
</a>
|
|
|
|
<!-- Huntarr Navigation Group -->
|
|
<div class="nav-group" style="margin-top: -10px;">
|
|
<div class="nav-group-title">Huntarr</div>
|
|
<a href="./" class="nav-item" id="settingsReturnNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</div>
|
|
<span>Return</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Settings Group -->
|
|
<div class="nav-group">
|
|
<div class="nav-group-title">Settings</div>
|
|
<a href="./#settings" class="nav-item active" id="settingsMainNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-home"></i>
|
|
</div>
|
|
<span>Main</span>
|
|
</a>
|
|
<a href="./#scheduling" class="nav-item" id="settingsSchedulingNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</div>
|
|
<span>Scheduling</span>
|
|
</a>
|
|
<a href="./#notifications" class="nav-item" id="settingsNotificationsNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-bell"></i>
|
|
</div>
|
|
<span>Notifications</span>
|
|
</a>
|
|
|
|
<a href="./#backup-restore" class="nav-item" id="settingsBackupRestoreNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-database"></i>
|
|
</div>
|
|
<span>Backup / Restore</span>
|
|
</a>
|
|
|
|
<a href="./user" class="nav-item" id="settingsUserNav">
|
|
<div class="nav-icon-wrapper">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<span>User</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<style>
|
|
/* Heart icon styling for project sponsors */
|
|
.heart-icon {
|
|
color: #e74c3c;
|
|
animation: pulse-heart 1.5s infinite alternate;
|
|
}
|
|
|
|
@keyframes pulse-heart {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1.2);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
width: 250px;
|
|
height: 100vh;
|
|
background: linear-gradient(135deg, #1e2738 0%, #0e1420 50%, #101824 75%, rgba(18, 25, 38, 0.95) 100%);
|
|
background-size: 100% 100%;
|
|
border-right: 1px solid rgba(90, 109, 137, 0.15);
|
|
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 1000;
|
|
flex-shrink: 0;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
/* Add subtle texture overlay */
|
|
position: relative;
|
|
backdrop-filter: blur(5px);
|
|
/* Add subtle blur for depth */
|
|
}
|
|
|
|
/* Add horizontal line at the top of the sidebar */
|
|
.sidebar-top-line {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, rgba(52, 152, 219, 0.6), rgba(155, 89, 182, 0.6));
|
|
/* Sonarr blue to Whisparr purple */
|
|
z-index: 2;
|
|
box-shadow: 0 0 8px rgba(52, 152, 219, 0.4);
|
|
/* Add subtle glow */
|
|
}
|
|
|
|
/* Add vertical color line to right edge of sidebar */
|
|
.sidebar::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: linear-gradient(to bottom, rgba(52, 152, 219, 0.6), rgba(155, 89, 182, 0.6));
|
|
/* Sonarr blue to Whisparr purple */
|
|
z-index: 2;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Add matching vertical color line to left edge of sidebar */
|
|
.sidebar::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: linear-gradient(to bottom, rgba(52, 152, 219, 0.6), rgba(155, 89, 182, 0.6));
|
|
/* Sonarr blue to Whisparr purple */
|
|
z-index: 2;
|
|
}
|
|
|
|
.logo-container {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 16px 0px;
|
|
border-bottom: none;
|
|
margin-bottom: -12px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Improve logo container with subtle background */
|
|
.logo-container::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 10px;
|
|
right: 10px;
|
|
bottom: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg,
|
|
rgba(255, 255, 255, 0.01),
|
|
rgba(255, 255, 255, 0.1),
|
|
rgba(255, 255, 255, 0.01));
|
|
}
|
|
|
|
/* Remove the line under logo by setting this to empty */
|
|
.logo-container::after {
|
|
display: none;
|
|
}
|
|
|
|
/* Define logo glowing animation */
|
|
@keyframes logo-glow {
|
|
0% {
|
|
box-shadow: 0 0 15px #3498db, 0 0 5px rgba(52, 152, 219, 0.4);
|
|
}
|
|
|
|
/* Sonarr blue */
|
|
20% {
|
|
box-shadow: 0 0 15px #f1c40f, 0 0 5px rgba(241, 196, 15, 0.4);
|
|
}
|
|
|
|
/* Radarr yellow */
|
|
40% {
|
|
box-shadow: 0 0 15px #2ecc71, 0 0 5px rgba(46, 204, 113, 0.4);
|
|
}
|
|
|
|
/* Lidarr green */
|
|
60% {
|
|
box-shadow: 0 0 15px #e74c3c, 0 0 5px rgba(231, 76, 60, 0.4);
|
|
}
|
|
|
|
/* Readarr red */
|
|
80% {
|
|
box-shadow: 0 0 15px #9b59b6, 0 0 5px rgba(155, 89, 182, 0.4);
|
|
}
|
|
|
|
/* Whisparr purple */
|
|
100% {
|
|
box-shadow: 0 0 15px #3498db, 0 0 5px rgba(52, 152, 219, 0.4);
|
|
}
|
|
|
|
/* Back to Sonarr blue */
|
|
}
|
|
|
|
/* Define heart icon pulsing animation */
|
|
@keyframes heart-pulse {
|
|
0% {
|
|
color: #ff4d6d;
|
|
text-shadow: 0 0 10px #ff4d6d, 0 0 20px #ff4d6d;
|
|
}
|
|
|
|
/* Pink */
|
|
50% {
|
|
color: #ff0a33;
|
|
text-shadow: 0 0 15px #ff0a33, 0 0 25px #ff0a33;
|
|
}
|
|
|
|
/* Red */
|
|
100% {
|
|
color: #ff4d6d;
|
|
text-shadow: 0 0 10px #ff4d6d, 0 0 20px #ff4d6d;
|
|
}
|
|
|
|
/* Pink */
|
|
}
|
|
|
|
.logo {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-right: 12px;
|
|
border-radius: 50%;
|
|
animation: logo-glow 10s infinite ease-in-out;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.logo-small {
|
|
display: none;
|
|
}
|
|
|
|
.logo-container h1 {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
color: #fff;
|
|
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
letter-spacing: 0.4px;
|
|
background: linear-gradient(to right, #fff, #bbb);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.nav-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 4px 0 16px 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 16px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
border-radius: 0 6px 6px 0;
|
|
margin: 1.5px 0 1.5px 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Add hover effect for nav items */
|
|
.nav-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 3px;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, rgba(52, 152, 219, 0), rgba(155, 89, 182, 0));
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-icon-wrapper {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 12px;
|
|
position: relative;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
background: rgba(30, 39, 56, 0.3);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.nav-icon-wrapper i {
|
|
font-size: 13px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: all 0.3s ease;
|
|
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
|
|
}
|
|
|
|
/* Apply the pulsing animation to the heart icon */
|
|
.heart-icon i {
|
|
animation: heart-pulse 7.2s infinite ease-in-out;
|
|
}
|
|
|
|
.nav-group {
|
|
margin-top: 4px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* Specific adjustment for the Core nav group */
|
|
.nav-group:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.nav-group-title {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: rgba(52, 152, 219, 0.8);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.6px;
|
|
padding: 0 16px 6px;
|
|
margin-top: 12px;
|
|
border-bottom: 1px solid rgba(52, 152, 219, 0.2);
|
|
text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
|
|
position: relative;
|
|
}
|
|
|
|
.nav-item span {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
letter-spacing: 0.24px;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: rgba(59, 130, 246, 0.15);
|
|
color: #fff;
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.nav-item:hover .nav-icon-wrapper {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.nav-item:hover::before {
|
|
background: linear-gradient(to bottom, rgba(52, 152, 219, 0.4), rgba(155, 89, 182, 0.4));
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: linear-gradient(to right, rgba(59, 130, 246, 0.9), rgba(59, 130, 246, 0.7));
|
|
color: #ffffff;
|
|
box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.nav-item.active .nav-icon-wrapper {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.nav-item.active i {
|
|
color: #ffffff;
|
|
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
|
|
}
|
|
|
|
.nav-item.active::before {
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
|
|
}
|
|
|
|
/* Mobile view optimization */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
width: 70px !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
/* Ensure hidden sidebars stay hidden even in mobile */
|
|
.sidebar[style*="display: none"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Adjust vertical color lines on mobile */
|
|
.sidebar::before,
|
|
.sidebar::after {
|
|
width: 1px;
|
|
}
|
|
|
|
.logo-container {
|
|
padding: 15px 5px !important;
|
|
justify-content: center !important;
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.sidebar .nav-item span,
|
|
.sidebar .nav-group-title {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar .logo-container {
|
|
justify-content: center;
|
|
padding: 15px 0;
|
|
height: 60px;
|
|
}
|
|
|
|
.sidebar .logo-container h1 {
|
|
display: none;
|
|
}
|
|
|
|
.logo-large {
|
|
display: none;
|
|
}
|
|
|
|
.logo-small {
|
|
display: block;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-menu {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.nav-item {
|
|
width: 60px;
|
|
justify-content: center;
|
|
padding: 12px 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.nav-item:hover,
|
|
.nav-item.active {
|
|
width: 42px;
|
|
height: 42px;
|
|
margin: 0 auto 8px auto;
|
|
border-radius: 10px;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-icon-wrapper {
|
|
margin-right: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.nav-icon-wrapper i {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
/* Adjust spacing for the sponsor link */
|
|
.nav-menu a.nav-item:first-child {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* App icon image styling */
|
|
.app-icon-img {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
filter: brightness(0.9) contrast(1.1);
|
|
}
|
|
|
|
/* App-specific visual effects with colored rings matching front page */
|
|
|
|
/* Sonarr - Blue */
|
|
.sonarr-app:hover .sonarr-icon,
|
|
.sonarr-app.active .sonarr-icon {
|
|
background: rgba(52, 152, 219, 0.2);
|
|
border: 2px solid rgba(52, 152, 219, 0.6);
|
|
box-shadow: 0 0 15px rgba(52, 152, 219, 0.4), inset 0 0 10px rgba(52, 152, 219, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.sonarr-app:hover .app-icon-img,
|
|
.sonarr-app.active .app-icon-img {
|
|
filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 8px rgba(52, 152, 219, 0.6));
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Radarr - Yellow */
|
|
.radarr-app:hover .radarr-icon,
|
|
.radarr-app.active .radarr-icon {
|
|
background: rgba(241, 196, 15, 0.2);
|
|
border: 2px solid rgba(241, 196, 15, 0.6);
|
|
box-shadow: 0 0 15px rgba(241, 196, 15, 0.4), inset 0 0 10px rgba(241, 196, 15, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.radarr-app:hover .app-icon-img,
|
|
.radarr-app.active .app-icon-img {
|
|
filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 8px rgba(241, 196, 15, 0.6));
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Lidarr - Green */
|
|
.lidarr-app:hover .lidarr-icon,
|
|
.lidarr-app.active .lidarr-icon {
|
|
background: rgba(46, 204, 113, 0.2);
|
|
border: 2px solid rgba(46, 204, 113, 0.6);
|
|
box-shadow: 0 0 15px rgba(46, 204, 113, 0.4), inset 0 0 10px rgba(46, 204, 113, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.lidarr-app:hover .app-icon-img,
|
|
.lidarr-app.active .app-icon-img {
|
|
filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 8px rgba(46, 204, 113, 0.6));
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Readarr - Red */
|
|
.readarr-app:hover .readarr-icon,
|
|
.readarr-app.active .readarr-icon {
|
|
background: rgba(231, 76, 60, 0.2);
|
|
border: 2px solid rgba(231, 76, 60, 0.6);
|
|
box-shadow: 0 0 15px rgba(231, 76, 60, 0.4), inset 0 0 10px rgba(231, 76, 60, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.readarr-app:hover .app-icon-img,
|
|
.readarr-app.active .app-icon-img {
|
|
filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 8px rgba(231, 76, 60, 0.6));
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Whisparr V2 - Purple */
|
|
.whisparr-app:hover .whisparr-icon,
|
|
.whisparr-app.active .whisparr-icon {
|
|
background: rgba(155, 89, 182, 0.2);
|
|
border: 2px solid rgba(155, 89, 182, 0.6);
|
|
box-shadow: 0 0 15px rgba(155, 89, 182, 0.4), inset 0 0 10px rgba(155, 89, 182, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.whisparr-app:hover .app-icon-img,
|
|
.whisparr-app.active .app-icon-img {
|
|
filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 8px rgba(155, 89, 182, 0.6));
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Eros (Whisparr V3) - Dark Purple/Magenta */
|
|
.eros-app:hover .eros-icon,
|
|
.eros-app.active .eros-icon {
|
|
background: rgba(142, 68, 173, 0.2);
|
|
border: 2px solid rgba(142, 68, 173, 0.6);
|
|
box-shadow: 0 0 15px rgba(142, 68, 173, 0.4), inset 0 0 10px rgba(142, 68, 173, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.eros-app:hover .app-icon-img,
|
|
.eros-app.active .app-icon-img {
|
|
filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 8px rgba(142, 68, 173, 0.6));
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Prowlarr - Orange (as requested) */
|
|
.prowlarr-app:hover .prowlarr-icon,
|
|
.prowlarr-app.active .prowlarr-icon {
|
|
background: rgba(230, 126, 34, 0.2);
|
|
border: 2px solid rgba(230, 126, 34, 0.6);
|
|
box-shadow: 0 0 15px rgba(230, 126, 34, 0.4), inset 0 0 10px rgba(230, 126, 34, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.prowlarr-app:hover .app-icon-img,
|
|
.prowlarr-app.active .app-icon-img {
|
|
filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 8px rgba(230, 126, 34, 0.6));
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Mobile adjustments for app icons */
|
|
@media (max-width: 768px) {
|
|
.app-icon-img {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.nav-item:hover .nav-icon-wrapper,
|
|
.nav-item.active .nav-icon-wrapper {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.nav-item:hover .app-icon-img,
|
|
.nav-item.active .app-icon-img {
|
|
transform: scale(1.02);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Function to set active nav item based on the current hash
|
|
function setActiveNavItem() {
|
|
// Get all navigation items from all sidebars
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
|
|
// Remove active class from all items
|
|
navItems.forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
|
|
// Get current hash, or default to home if no hash
|
|
let currentHash = window.location.hash;
|
|
if (!currentHash) {
|
|
currentHash = '#home';
|
|
}
|
|
|
|
// Set the appropriate nav item as active based on current section
|
|
let selector = null;
|
|
|
|
// Main sidebar items
|
|
if (currentHash === '#home') {
|
|
selector = '#homeNav';
|
|
} else if (currentHash === '#hunt-manager') {
|
|
selector = '#huntManagerNav';
|
|
} else if (currentHash === '#logs') {
|
|
selector = '#logsNav';
|
|
} else if (currentHash === '#apps' || currentHash === '#sonarr') {
|
|
selector = '#appsNav';
|
|
} else if (currentHash === '#swaparr') {
|
|
selector = '#swaparrNav';
|
|
} else if (currentHash === '#requestarr') {
|
|
selector = '#requestarrNav';
|
|
}
|
|
// Apps sidebar items
|
|
else if (currentHash === '#radarr') {
|
|
selector = '#appsRadarrNav';
|
|
} else if (currentHash === '#lidarr') {
|
|
selector = '#appsLidarrNav';
|
|
} else if (currentHash === '#readarr') {
|
|
selector = '#appsReadarrNav';
|
|
} else if (currentHash === '#whisparr') {
|
|
selector = '#appsWhisparrNav';
|
|
} else if (currentHash === '#eros') {
|
|
selector = '#appsErosNav';
|
|
} else if (currentHash === '#prowlarr') {
|
|
selector = '#appsProwlarrNav';
|
|
}
|
|
// Settings sidebar items
|
|
else if (currentHash === '#settings') {
|
|
selector = '#settingsMainNav';
|
|
} else if (currentHash === '#scheduling') {
|
|
selector = '#settingsSchedulingNav';
|
|
} else if (currentHash === '#notifications') {
|
|
selector = '#settingsNotificationsNav';
|
|
} else if (currentHash === '#user') {
|
|
selector = '#settingsUserNav';
|
|
}
|
|
// Requestarr sidebar items
|
|
else if (currentHash === '#requestarr') {
|
|
selector = '#requestarrHomeNav';
|
|
} else if (currentHash === '#requestarr-history') {
|
|
selector = '#requestarrHistoryNav';
|
|
}
|
|
// Default to home
|
|
else {
|
|
selector = '#homeNav';
|
|
}
|
|
|
|
const activeItem = document.querySelector(selector);
|
|
if (activeItem) {
|
|
activeItem.classList.add('active');
|
|
}
|
|
}
|
|
|
|
// Set active on page load
|
|
document.addEventListener('DOMContentLoaded', setActiveNavItem);
|
|
|
|
// Update active when hash changes
|
|
window.addEventListener('hashchange', setActiveNavItem);
|
|
</script> |