Skip to content

Commit 393f7c7

Browse files
author
Admin9705
committed
sidebar
1 parent 33080d3 commit 393f7c7

File tree

3 files changed

+313
-50
lines changed

3 files changed

+313
-50
lines changed

‎frontend/static/js/new-main.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -790,15 +790,12 @@ let huntarrUI = {
790790
} else if (section === 'prowlarr' && document.getElementById('prowlarrSection')) {
791791
document.getElementById('prowlarrSection').classList.add('active');
792792
document.getElementById('prowlarrSection').style.display = 'block';
793-
if (document.getElementById('settingsProwlarrNav')) document.getElementById('settingsProwlarrNav').classList.add('active');
793+
if (document.getElementById('appsProwlarrNav')) document.getElementById('appsProwlarrNav').classList.add('active');
794794
newTitle = 'Prowlarr';
795795
this.currentSection = 'prowlarr';
796796

797-
// Switch to Settings sidebar for prowlarr
798-
this.showSettingsSidebar();
799-
800-
// Set localStorage to maintain Settings sidebar preference
801-
localStorage.setItem('huntarr-settings-sidebar', 'true');
797+
// Switch to Apps sidebar for prowlarr
798+
this.showAppsSidebar();
802799

803800
// Initialize prowlarr settings if not already done
804801
this.initializeProwlarr();

‎frontend/templates/components/apps_section.html‎

Lines changed: 149 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -116,53 +116,61 @@ <h2>Apps</h2>
116116

117117
<div class="apps-overview">
118118
<div class="apps-grid">
119-
<div class="app-card" onclick="window.location.hash = '#sonarr'">
120-
<div class="app-icon">
121-
<i class="fas fa-tv"></i>
119+
<div class="app-card sonarr-card" onclick="window.location.hash = '#sonarr'">
120+
<div class="app-icon sonarr-icon-card">
121+
<img src="./static/images/app-icons/sonarr.png" alt="Sonarr" class="app-icon-img">
122122
</div>
123123
<h3>Sonarr</h3>
124124
<p>TV Series Management</p>
125125
</div>
126126

127-
<div class="app-card" onclick="window.location.hash = '#radarr'">
128-
<div class="app-icon">
129-
<i class="fas fa-film"></i>
127+
<div class="app-card radarr-card" onclick="window.location.hash = '#radarr'">
128+
<div class="app-icon radarr-icon-card">
129+
<img src="./static/images/app-icons/radarr.png" alt="Radarr" class="app-icon-img">
130130
</div>
131131
<h3>Radarr</h3>
132132
<p>Movie Management</p>
133133
</div>
134134

135-
<div class="app-card" onclick="window.location.hash = '#lidarr'">
136-
<div class="app-icon">
137-
<i class="fas fa-music"></i>
135+
<div class="app-card lidarr-card" onclick="window.location.hash = '#lidarr'">
136+
<div class="app-icon lidarr-icon-card">
137+
<img src="./static/images/app-icons/lidarr.png" alt="Lidarr" class="app-icon-img">
138138
</div>
139139
<h3>Lidarr</h3>
140140
<p>Music Management</p>
141141
</div>
142142

143-
<div class="app-card" onclick="window.location.hash = '#readarr'">
144-
<div class="app-icon">
145-
<i class="fas fa-book"></i>
143+
<div class="app-card readarr-card" onclick="window.location.hash = '#readarr'">
144+
<div class="app-icon readarr-icon-card">
145+
<img src="./static/images/app-icons/readarr.png" alt="Readarr" class="app-icon-img">
146146
</div>
147147
<h3>Readarr</h3>
148148
<p>Book Management</p>
149149
</div>
150150

151-
<div class="app-card" onclick="window.location.hash = '#whisparr'">
152-
<div class="app-icon">
153-
<i class="fas fa-heart"></i>
151+
<div class="app-card whisparr-card" onclick="window.location.hash = '#whisparr'">
152+
<div class="app-icon whisparr-icon-card">
153+
<img src="./static/images/app-icons/whisparr.png" alt="Whisparr V2" class="app-icon-img">
154154
</div>
155155
<h3>Whisparr V2</h3>
156156
<p>Adult Content Management</p>
157157
</div>
158158

159-
<div class="app-card" onclick="window.location.hash = '#eros'">
160-
<div class="app-icon">
161-
<i class="fas fa-fire"></i>
159+
<div class="app-card eros-card" onclick="window.location.hash = '#eros'">
160+
<div class="app-icon eros-icon-card">
161+
<img src="./static/images/app-icons/eros.png" alt="Whisparr V3" class="app-icon-img">
162162
</div>
163163
<h3>Whisparr V3</h3>
164164
<p>Adult Content Management (V3)</p>
165165
</div>
166+
167+
<div class="app-card prowlarr-card" onclick="window.location.hash = '#prowlarr'">
168+
<div class="app-icon prowlarr-icon-card">
169+
<img src="./static/images/app-icons/prowlarr.png" alt="Prowlarr" class="app-icon-img">
170+
</div>
171+
<h3>Prowlarr</h3>
172+
<p>Indexer Management</p>
173+
</div>
166174
</div>
167175
</div>
168176
</section>
@@ -253,6 +261,129 @@ <h3>Whisparr V3</h3>
253261
color: #fff;
254262
text-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
255263
}
264+
265+
/* App icon image styling for cards */
266+
.app-icon .app-icon-img {
267+
width: 32px;
268+
height: 32px;
269+
border-radius: 6px;
270+
transition: all 0.3s ease;
271+
filter: brightness(0.9) contrast(1.1);
272+
}
273+
274+
/* App-specific visual effects matching front page and sidebar */
275+
276+
/* Sonarr - Blue */
277+
.sonarr-card:hover .sonarr-icon-card {
278+
background: linear-gradient(135deg, rgba(52, 152, 219, 0.3) 0%, rgba(52, 152, 219, 0.5) 100%);
279+
border: 2px solid rgba(52, 152, 219, 0.6);
280+
box-shadow: 0 0 20px rgba(52, 152, 219, 0.4);
281+
}
282+
283+
.sonarr-card:hover .app-icon-img {
284+
filter: brightness(1.3) contrast(1.3) drop-shadow(0 0 10px rgba(52, 152, 219, 0.7));
285+
transform: scale(1.1);
286+
}
287+
288+
.sonarr-card:hover h3 {
289+
color: #3498db;
290+
}
291+
292+
/* Radarr - Yellow */
293+
.radarr-card:hover .radarr-icon-card {
294+
background: linear-gradient(135deg, rgba(241, 196, 15, 0.3) 0%, rgba(241, 196, 15, 0.5) 100%);
295+
border: 2px solid rgba(241, 196, 15, 0.6);
296+
box-shadow: 0 0 20px rgba(241, 196, 15, 0.4);
297+
}
298+
299+
.radarr-card:hover .app-icon-img {
300+
filter: brightness(1.3) contrast(1.3) drop-shadow(0 0 10px rgba(241, 196, 15, 0.7));
301+
transform: scale(1.1);
302+
}
303+
304+
.radarr-card:hover h3 {
305+
color: #f1c40f;
306+
}
307+
308+
/* Lidarr - Green */
309+
.lidarr-card:hover .lidarr-icon-card {
310+
background: linear-gradient(135deg, rgba(46, 204, 113, 0.3) 0%, rgba(46, 204, 113, 0.5) 100%);
311+
border: 2px solid rgba(46, 204, 113, 0.6);
312+
box-shadow: 0 0 20px rgba(46, 204, 113, 0.4);
313+
}
314+
315+
.lidarr-card:hover .app-icon-img {
316+
filter: brightness(1.3) contrast(1.3) drop-shadow(0 0 10px rgba(46, 204, 113, 0.7));
317+
transform: scale(1.1);
318+
}
319+
320+
.lidarr-card:hover h3 {
321+
color: #2ecc71;
322+
}
323+
324+
/* Readarr - Red */
325+
.readarr-card:hover .readarr-icon-card {
326+
background: linear-gradient(135deg, rgba(231, 76, 60, 0.3) 0%, rgba(231, 76, 60, 0.5) 100%);
327+
border: 2px solid rgba(231, 76, 60, 0.6);
328+
box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);
329+
}
330+
331+
.readarr-card:hover .app-icon-img {
332+
filter: brightness(1.3) contrast(1.3) drop-shadow(0 0 10px rgba(231, 76, 60, 0.7));
333+
transform: scale(1.1);
334+
}
335+
336+
.readarr-card:hover h3 {
337+
color: #e74c3c;
338+
}
339+
340+
/* Whisparr V2 - Purple */
341+
.whisparr-card:hover .whisparr-icon-card {
342+
background: linear-gradient(135deg, rgba(155, 89, 182, 0.3) 0%, rgba(155, 89, 182, 0.5) 100%);
343+
border: 2px solid rgba(155, 89, 182, 0.6);
344+
box-shadow: 0 0 20px rgba(155, 89, 182, 0.4);
345+
}
346+
347+
.whisparr-card:hover .app-icon-img {
348+
filter: brightness(1.3) contrast(1.3) drop-shadow(0 0 10px rgba(155, 89, 182, 0.7));
349+
transform: scale(1.1);
350+
}
351+
352+
.whisparr-card:hover h3 {
353+
color: #9b59b6;
354+
}
355+
356+
/* Eros (Whisparr V3) - Dark Purple/Magenta */
357+
.eros-card:hover .eros-icon-card {
358+
background: linear-gradient(135deg, rgba(142, 68, 173, 0.3) 0%, rgba(142, 68, 173, 0.5) 100%);
359+
border: 2px solid rgba(142, 68, 173, 0.6);
360+
box-shadow: 0 0 20px rgba(142, 68, 173, 0.4);
361+
}
362+
363+
.eros-card:hover .app-icon-img {
364+
filter: brightness(1.3) contrast(1.3) drop-shadow(0 0 10px rgba(142, 68, 173, 0.7));
365+
transform: scale(1.1);
366+
}
367+
368+
.eros-card:hover h3 {
369+
color: #8e44ad;
370+
}
371+
372+
/* Prowlarr - Orange */
373+
.prowlarr-card:hover .prowlarr-icon-card {
374+
background: linear-gradient(135deg, rgba(230, 126, 34, 0.3) 0%, rgba(230, 126, 34, 0.5) 100%);
375+
border: 2px solid rgba(230, 126, 34, 0.6);
376+
box-shadow: 0 0 20px rgba(230, 126, 34, 0.4);
377+
}
378+
379+
.prowlarr-card:hover .app-icon-img {
380+
filter: brightness(1.3) contrast(1.3) drop-shadow(0 0 10px rgba(230, 126, 34, 0.7));
381+
transform: scale(1.1);
382+
}
383+
384+
.prowlarr-card:hover h3 {
385+
color: #e67e22;
386+
}
256387

257388
.app-card h3 {
258389
color: #fff;

0 commit comments

Comments
 (0)