mirror of
https://github.com/plexguide/Huntarr.io.git
synced 2026-02-23 07:08:45 -06:00
Admin9705
866 lines
28 KiB
HTML
866 lines
28 KiB
HTML
<section id="homeSection" class="content-section">
|
|
<div class="dashboard-grid stack-layout">
|
|
<!-- Community & Resources Hub (redesigned links section) -->
|
|
<div class="card community-hub-card">
|
|
<div class="card-header">
|
|
<h3>Community & Resources</h3>
|
|
</div>
|
|
<div class="community-resources-container">
|
|
<div class="community-links-grid">
|
|
<a href="https://discord.gg/VQbZCGzQsn" target="_blank" class="community-link discord">
|
|
<div class="icon-container">
|
|
<i class="fab fa-discord"></i>
|
|
</div>
|
|
<div class="link-details">
|
|
<span class="link-title">Discord</span>
|
|
</div>
|
|
</a>
|
|
<a href="https://www.reddit.com/r/huntarr/" target="_blank" class="community-link reddit">
|
|
<div class="icon-container">
|
|
<i class="fab fa-reddit"></i>
|
|
</div>
|
|
<div class="link-details">
|
|
<span class="link-title">Reddit</span>
|
|
</div>
|
|
</a>
|
|
<a href="https://github.com/plexguide/Huntarr/issues" target="_blank" class="community-link github">
|
|
<div class="icon-container">
|
|
<i class="fas fa-bug"></i>
|
|
</div>
|
|
<div class="link-details">
|
|
<span class="link-title">Issues</span>
|
|
</div>
|
|
</a>
|
|
<a href="https://github.com/plexguide/Huntarr/wiki" target="_blank" class="community-link wiki">
|
|
<div class="icon-container">
|
|
<i class="fas fa-book"></i>
|
|
</div>
|
|
<div class="link-details">
|
|
<span class="link-title">Wiki</span>
|
|
</div>
|
|
</a>
|
|
<a href="https://github.com/plexguide/Huntarr.io/releases" target="_blank" class="community-link changelog">
|
|
<div class="icon-container">
|
|
<i class="fas fa-history"></i>
|
|
</div>
|
|
<div class="link-details">
|
|
<span class="link-title">Changelog</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Updated statistics card with new layout -->
|
|
<div class="card stats-card">
|
|
<div class="card-header">
|
|
<h3>Live Hunts Executed</h3>
|
|
<button id="reset-stats" class="action-button danger"><i class="fas fa-trash"></i> Reset</button>
|
|
</div>
|
|
<div class="media-stats-container">
|
|
<div class="app-stats-grid">
|
|
<!-- Sonarr Card -->
|
|
<div class="app-stats-card sonarr">
|
|
<div class="status-container">
|
|
<span id="sonarrHomeStatus" class="status-badge loading"><i class="fas fa-spinner fa-spin"></i> Loading...</span>
|
|
</div>
|
|
<div class="app-content">
|
|
<div class="app-icon-wrapper">
|
|
<img src="/static/arrs/48-sonarr.png" alt="Sonarr Logo" class="app-logo">
|
|
</div>
|
|
<h4>Sonarr</h4>
|
|
</div>
|
|
<div class="stats-numbers">
|
|
<div class="stat-box">
|
|
<div class="stat-number" id="sonarr-hunted">0</div>
|
|
<div class="stat-label">Searches Triggered</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-number" id="sonarr-upgraded">0</div>
|
|
<div class="stat-label">Upgrades Triggered</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Radarr Card -->
|
|
<div class="app-stats-card radarr">
|
|
<div class="status-container">
|
|
<span id="radarrHomeStatus" class="status-badge loading"><i class="fas fa-spinner fa-spin"></i> Loading...</span>
|
|
</div>
|
|
<div class="app-content">
|
|
<div class="app-icon-wrapper">
|
|
<img src="/static/arrs/48-radarr.png" alt="Radarr Logo" class="app-logo">
|
|
</div>
|
|
<h4>Radarr</h4>
|
|
</div>
|
|
<div class="stats-numbers">
|
|
<div class="stat-box">
|
|
<span class="stat-number" id="radarr-hunted">0</span>
|
|
<span class="stat-label">Searches Triggered</span>
|
|
</div>
|
|
<div class="stat-box">
|
|
<span class="stat-number" id="radarr-upgraded">0</span>
|
|
<span class="stat-label">Upgrades Triggered</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lidarr Card -->
|
|
<div class="app-stats-card lidarr">
|
|
<div class="status-container">
|
|
<span id="lidarrHomeStatus" class="status-badge loading"><i class="fas fa-spinner fa-spin"></i> Loading...</span>
|
|
</div>
|
|
<div class="app-content">
|
|
<div class="app-icon-wrapper">
|
|
<img src="/static/arrs/48-lidarr.png" alt="Lidarr Logo" class="app-logo">
|
|
</div>
|
|
<h4>Lidarr</h4>
|
|
</div>
|
|
<div class="stats-numbers">
|
|
<div class="stat-box">
|
|
<span class="stat-number" id="lidarr-hunted">0</span>
|
|
<span class="stat-label">Searches Triggered</span>
|
|
</div>
|
|
<div class="stat-box">
|
|
<span class="stat-number" id="lidarr-upgraded">0</span>
|
|
<span class="stat-label">Upgrades Triggered</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Readarr Card -->
|
|
<div class="app-stats-card readarr">
|
|
<div class="status-container">
|
|
<span id="readarrHomeStatus" class="status-badge loading"><i class="fas fa-spinner fa-spin"></i> Loading...</span>
|
|
</div>
|
|
<div class="app-content">
|
|
<div class="app-icon-wrapper">
|
|
<img src="/static/arrs/48-readarr.png" alt="Readarr Logo" class="app-logo">
|
|
</div>
|
|
<h4>Readarr</h4>
|
|
</div>
|
|
<div class="stats-numbers">
|
|
<div class="stat-box">
|
|
<span class="stat-number" id="readarr-hunted">0</span>
|
|
<span class="stat-label">Searches Triggered</span>
|
|
</div>
|
|
<div class="stat-box">
|
|
<span class="stat-number" id="readarr-upgraded">0</span>
|
|
<span class="stat-label">Upgrades Triggered</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Whisparr Card -->
|
|
<div class="app-stats-card whisparr">
|
|
<div class="status-container">
|
|
<span id="whisparrHomeStatus" class="status-badge loading"><i class="fas fa-spinner fa-spin"></i> Loading...</span>
|
|
</div>
|
|
<div class="app-content">
|
|
<div class="app-icon-wrapper">
|
|
<img src="/static/arrs/48-whisparr.png" alt="Whisparr Logo" class="app-logo">
|
|
</div>
|
|
<h4>Whisparr</h4>
|
|
</div>
|
|
<div class="stats-numbers">
|
|
<div class="stat-box">
|
|
<span class="stat-number" id="whisparr-hunted">0</span>
|
|
<span class="stat-label">Searches Triggered</span>
|
|
</div>
|
|
<div class="stat-box">
|
|
<span class="stat-number" id="whisparr-upgraded">0</span>
|
|
<span class="stat-label">Upgrades Triggered</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Eros Card -->
|
|
<div class="app-stats-card eros">
|
|
<div class="status-container">
|
|
<span id="erosHomeStatus" class="status-badge loading"><i class="fas fa-spinner fa-spin"></i> Loading...</span>
|
|
</div>
|
|
<div class="app-content">
|
|
<div class="app-icon-wrapper">
|
|
<img src="/static/arrs/48-whisparr.png" alt="Eros Logo" class="app-logo">
|
|
</div>
|
|
<h4>Eros</h4>
|
|
</div>
|
|
<div class="stats-numbers">
|
|
<div class="stat-box">
|
|
<span class="stat-number" id="eros-hunted">0</span>
|
|
<span class="stat-label">Searches Triggered</span>
|
|
</div>
|
|
<div class="stat-box">
|
|
<span class="stat-number" id="eros-upgraded">0</span>
|
|
<span class="stat-label">Upgrades Triggered</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Fixed banner at the bottom of the viewport -->
|
|
<div class="fixed-banner-footer">
|
|
<div class="footer-content">
|
|
<div class="footer-item">
|
|
<i class="fas fa-heart donation-icon"></i>
|
|
<a href="https://donate.plex.one" target="_blank">Donate</a> for Daughter's College Fund!
|
|
</div>
|
|
<div class="footer-divider"></div>
|
|
<div class="footer-item">
|
|
<i class="fas fa-star star-icon"></i>
|
|
<a href="https://github.com/plexguide/huntarr" target="_blank">Star Huntarr on GitHub</a> - Helps!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.stack-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
width: 100%;
|
|
padding-bottom: 50px; /* Add padding to prevent content from being hidden by fixed banner */
|
|
}
|
|
|
|
.stack-layout .card {
|
|
width: 100%;
|
|
}
|
|
|
|
.thanks-list {
|
|
text-align: left;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.thanks-list li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Banner card styles */
|
|
.banner-card {
|
|
background-color: var(--bg-secondary);
|
|
padding: 12px 15px;
|
|
border-left: 3px solid var(--accent-color);
|
|
}
|
|
|
|
.banner-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.donation-icon {
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.star-icon {
|
|
color: #ffd700;
|
|
}
|
|
|
|
/* Improved important links */
|
|
.important-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.link-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 14px;
|
|
background-color: var(--bg-tertiary);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
font-weight: 500;
|
|
font-size: 0.85rem;
|
|
box-shadow: none;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.link-button i {
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.link-button:hover {
|
|
transform: none;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
background-color: var(--accent-color);
|
|
color: white;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.sponsor-button {
|
|
background-color: #4e54c8;
|
|
color: white;
|
|
}
|
|
|
|
.sponsor-button:hover {
|
|
background-color: #24c6dc;
|
|
}
|
|
|
|
/* Stats card styling */
|
|
.stats-card {
|
|
width: 100%;
|
|
background-color: rgba(24, 28, 37, 0.6);
|
|
border: 1px solid rgba(90, 109, 137, 0.2);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stats-card .card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 20px;
|
|
background-color: rgba(32, 38, 50, 0.6);
|
|
border-bottom: 1px solid rgba(90, 109, 137, 0.2);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.stats-card .card-header h3 {
|
|
margin: 0;
|
|
color: #e0e6ed;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.media-stats-container {
|
|
padding: 20px;
|
|
background-color: rgba(15, 18, 24, 0.4);
|
|
}
|
|
|
|
.app-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.app-stats-card {
|
|
background: rgba(24, 28, 37, 0.8);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 200px;
|
|
justify-content: space-between;
|
|
border: 1px solid rgba(120, 140, 180, 0.15);
|
|
}
|
|
|
|
/* Removing card-level border styles since we only want rings around the icons */
|
|
|
|
.app-stats-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
|
|
border-color: rgba(120, 140, 180, 0.3);
|
|
}
|
|
|
|
/* Status container styling */
|
|
.status-container {
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 6px 16px;
|
|
border-radius: 20px;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* App content styling */
|
|
.app-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.app-icon-wrapper {
|
|
width: 70px;
|
|
height: 70px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
background: rgba(28, 34, 46, 0.8);
|
|
margin-bottom: 12px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
|
border: 2px solid rgba(120, 140, 180, 0.2);
|
|
}
|
|
|
|
/* Sonarr blue icon ring */
|
|
.app-stats-card.sonarr .app-icon-wrapper {
|
|
border: 2px solid rgba(0, 174, 240, 0.8);
|
|
box-shadow: 0 0 15px rgba(0, 174, 240, 0.4);
|
|
}
|
|
|
|
/* Radarr yellow icon ring */
|
|
.app-stats-card.radarr .app-icon-wrapper {
|
|
border: 2px solid rgba(253, 203, 43, 0.8);
|
|
box-shadow: 0 0 15px rgba(253, 203, 43, 0.4);
|
|
}
|
|
|
|
/* Lidarr green icon ring */
|
|
.app-stats-card.lidarr .app-icon-wrapper {
|
|
border: 2px solid rgba(49, 197, 56, 0.8);
|
|
box-shadow: 0 0 15px rgba(49, 197, 56, 0.4);
|
|
}
|
|
|
|
/* Readarr red icon ring */
|
|
.app-stats-card.readarr .app-icon-wrapper {
|
|
border: 2px solid rgba(192, 45, 40, 0.8);
|
|
box-shadow: 0 0 15px rgba(192, 45, 40, 0.4);
|
|
}
|
|
|
|
/* Whisparr purple icon ring */
|
|
.app-stats-card.whisparr .app-icon-wrapper {
|
|
border: 2px solid rgba(195, 0, 230, 0.8);
|
|
box-shadow: 0 0 15px rgba(195, 0, 230, 0.4);
|
|
}
|
|
|
|
/* Eros gold/amber icon ring */
|
|
.app-stats-card.eros .app-icon-wrapper {
|
|
border: 2px solid rgba(255, 193, 7, 0.8);
|
|
box-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
|
|
}
|
|
|
|
.app-logo {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.app-stats-card h4 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #e0e6ed;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Stats display styling */
|
|
.stats-numbers {
|
|
display: flex;
|
|
gap: 15px;
|
|
width: 100%;
|
|
padding-top: 15px;
|
|
margin-top: auto;
|
|
border-top: 1px solid rgba(120, 140, 180, 0.15);
|
|
}
|
|
|
|
.stat-box {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
background: linear-gradient(to bottom right, #fff, #a0a8b8);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: #a0a8b8;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* App-specific accent colors for sonarr */
|
|
.app-stats-card.sonarr .app-icon-wrapper {
|
|
border-color: rgba(0, 174, 240, 0.5);
|
|
box-shadow: 0 0 15px rgba(0, 174, 240, 0.2);
|
|
}
|
|
|
|
.app-stats-card.sonarr .stat-number {
|
|
background: linear-gradient(to bottom right, #5acdff, #00aef0);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* App-specific accent colors for radarr */
|
|
.app-stats-card.radarr .app-icon-wrapper {
|
|
border-color: rgba(253, 203, 43, 0.5);
|
|
box-shadow: 0 0 15px rgba(253, 203, 43, 0.2);
|
|
}
|
|
|
|
.app-stats-card.radarr .stat-number {
|
|
background: linear-gradient(to bottom right, #ffe066, #fdcb2b);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* App-specific accent colors for lidarr */
|
|
.app-stats-card.lidarr .app-icon-wrapper {
|
|
border-color: rgba(49, 197, 56, 0.5);
|
|
box-shadow: 0 0 15px rgba(49, 197, 56, 0.2);
|
|
}
|
|
|
|
.app-stats-card.lidarr .stat-number {
|
|
background: linear-gradient(to bottom right, #5de264, #31c538);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* App-specific accent colors for readarr */
|
|
.app-stats-card.readarr .app-icon-wrapper {
|
|
border-color: rgba(192, 45, 40, 0.5);
|
|
box-shadow: 0 0 15px rgba(192, 45, 40, 0.2);
|
|
}
|
|
|
|
.app-stats-card.readarr .stat-number {
|
|
background: linear-gradient(to bottom right, #e35751, #c02d28);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* App-specific accent colors for whisparr */
|
|
.app-stats-card.whisparr .app-icon-wrapper {
|
|
border-color: rgba(195, 0, 230, 0.5);
|
|
box-shadow: 0 0 15px rgba(195, 0, 230, 0.2);
|
|
}
|
|
|
|
.app-stats-card.whisparr .stat-number {
|
|
background: linear-gradient(to bottom right, #e64dff, #c300e6);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* App-specific accent colors for eros */
|
|
.app-stats-card.eros .app-icon-wrapper {
|
|
border-color: rgba(255, 193, 7, 0.5);
|
|
box-shadow: 0 0 15px rgba(255, 193, 7, 0.2);
|
|
}
|
|
|
|
.app-stats-card.eros .stat-number {
|
|
background: linear-gradient(to bottom right, #ffd54f, #ffb300);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* Status badge colors */
|
|
.status-badge.connected {
|
|
background-color: rgba(39, 174, 96, 0.15);
|
|
color: #2ecc71;
|
|
border: 1px solid rgba(39, 174, 96, 0.3);
|
|
}
|
|
|
|
.status-badge.partially-connected {
|
|
background-color: rgba(243, 156, 18, 0.15);
|
|
color: #f39c12;
|
|
border: 1px solid rgba(243, 156, 18, 0.3);
|
|
}
|
|
|
|
.status-badge.not-connected {
|
|
background-color: rgba(231, 76, 60, 0.15);
|
|
color: #e74c3c;
|
|
border: 1px solid rgba(231, 76, 60, 0.3);
|
|
}
|
|
|
|
.status-badge.loading {
|
|
background-color: rgba(41, 128, 185, 0.15);
|
|
color: #3498db;
|
|
border: 1px solid rgba(41, 128, 185, 0.3);
|
|
}
|
|
|
|
/* Header for cards */
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.card h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Ensure button in header doesn't inherit odd margins and adjust padding */
|
|
.card-header .action-button {
|
|
margin: 0;
|
|
padding: 6px 12px;
|
|
font-size: 0.9em;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
/* Re-add danger button style */
|
|
.action-button.danger {
|
|
background-color: rgba(244, 67, 54, 0.1);
|
|
color: #f44336;
|
|
}
|
|
|
|
.action-button.danger:hover {
|
|
background-color: #f44336;
|
|
color: white;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.important-links {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.link-button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Version display styling */
|
|
.version-icon {
|
|
color: #3498db;
|
|
}
|
|
|
|
#version-number {
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
#version-value {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Added style for latest version number */
|
|
#latest-version-value {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Developer credit styling */
|
|
.developer-credit {
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.developer-credit a {
|
|
color: #3498db;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.developer-credit a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Community & Resources Hub styling */
|
|
.community-hub-card {
|
|
width: 100%;
|
|
background-color: rgba(24, 28, 37, 0.6);
|
|
border: 1px solid rgba(90, 109, 137, 0.2);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.community-hub-card .card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 20px;
|
|
background-color: rgba(32, 38, 50, 0.6);
|
|
border-bottom: 1px solid rgba(90, 109, 137, 0.2);
|
|
}
|
|
|
|
.community-hub-card .card-header h3 {
|
|
margin: 0;
|
|
color: #e0e6ed;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.community-resources-container {
|
|
padding: 20px;
|
|
background-color: rgba(15, 18, 24, 0.4);
|
|
}
|
|
|
|
.community-links-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.community-link {
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(28, 34, 46, 0.7);
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid rgba(120, 140, 180, 0.15);
|
|
text-decoration: none;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.community-link:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
background: rgba(38, 46, 63, 0.8);
|
|
}
|
|
|
|
.icon-container {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
margin-right: 12px;
|
|
flex-shrink: 0;
|
|
font-size: 18px;
|
|
color: white;
|
|
}
|
|
|
|
.link-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.link-title {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: #e0e6ed;
|
|
}
|
|
|
|
/* Icon styles for each link type */
|
|
.community-link.discord .icon-container {
|
|
background: linear-gradient(135deg, #7289DA, #5865F2);
|
|
}
|
|
|
|
.community-link.reddit .icon-container {
|
|
background: linear-gradient(135deg, #FF4500, #FF6A33);
|
|
}
|
|
|
|
.community-link.github .icon-container {
|
|
background: linear-gradient(135deg, #24292E, #404448);
|
|
}
|
|
|
|
.community-link.wiki .icon-container {
|
|
background: linear-gradient(135deg, #1ABC9C, #16A085);
|
|
}
|
|
|
|
.community-link.changelog .icon-container {
|
|
background: linear-gradient(135deg, #3498DB, #2980B9);
|
|
}
|
|
|
|
/* Media queries for responsiveness */
|
|
@media (max-width: 768px) {
|
|
.community-links-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.community-links-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Fixed banner footer styling */
|
|
.fixed-banner-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
padding: 10px 20px;
|
|
background: linear-gradient(180deg, rgba(24, 28, 37, 0.95), rgba(18, 22, 30, 0.98));
|
|
box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.2);
|
|
border-top: 1px solid rgba(90, 109, 137, 0.15);
|
|
z-index: 1000; /* Ensure it's above other elements */
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.fixed-banner-footer .footer-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.fixed-banner-footer .footer-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 14px;
|
|
color: #e0e6ed;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.fixed-banner-footer .footer-item:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.fixed-banner-footer .footer-divider {
|
|
width: 1px;
|
|
height: 20px;
|
|
background-color: rgba(120, 140, 180, 0.3);
|
|
}
|
|
|
|
.fixed-banner-footer a {
|
|
color: #3498db;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.fixed-banner-footer a:hover {
|
|
text-decoration: none;
|
|
color: #5dade2;
|
|
}
|
|
|
|
.fixed-banner-footer .donation-icon {
|
|
color: #ff6b6b;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.fixed-banner-footer .star-icon {
|
|
color: #ffd700;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Responsive footer */
|
|
@media (max-width: 600px) {
|
|
.fixed-banner-footer .footer-content {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.fixed-banner-footer .footer-divider {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|