From 1d386c47793035fc7ca274b5c40af9bd4dec73a8 Mon Sep 17 00:00:00 2001
From: fynks <75840152+fynks@users.noreply.github.com>
Date: Mon, 25 Aug 2025 10:48:23 +0500
Subject: [PATCH] improved alignment

---
 dist/css/styles.css | 45 ++++++++++++++++++++++++++++++++++++++++
 dist/index.html     | 50 ++++++++++++++++++++++-----------------------
 2 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/dist/css/styles.css b/dist/css/styles.css
index a53e0ae..bf29be8 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -247,6 +247,18 @@ a:hover {
   gap: var(--space-4xl);
 }
 
+/* Header right aligned actions */
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+  margin-left: auto;
+}
+
+@media (max-width: 900px){
+  .header-actions { gap: var(--space-md); }
+}
+
 .site-title {
   display: flex;
   flex-shrink: 0; /* Prevent shrinking */
@@ -1060,6 +1072,39 @@ table {
   min-width: 600px;
 }
 
+/* Table toolbar */
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-xl);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-xl);
+  align-items: center;
+}
+
+/* Resources enhancements */
+.enhanced-resources .resource-category.elevated { position: relative; border: 1px solid var(--border-primary); box-shadow: var(--shadow-md); }
+.resource-list.cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); display: grid; }
+.resource-item.accent-hover { position: relative; overflow: hidden; }
+.resource-item.accent-hover::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.08)); opacity:0; transition:opacity var(--transition-fast); }
+.resource-item.accent-hover:hover::after { opacity:1; }
+.resource-item.static { cursor: default; background: var(--bg-secondary); }
+
+/* Footer improvements */
+.footer-content.improved { position: relative; }
+.newsletter-form { display:flex; gap: var(--space-sm); margin-top: var(--space-2xl); }
+.newsletter-form input { flex:1; padding: var(--space-sm) var(--space-md); border:1px solid var(--border-primary); background: var(--bg-primary); border-radius: var(--radius-md); font-size: var(--text-sm); }
+.newsletter-form button { padding: var(--space-sm) var(--space-lg); border:1px solid var(--border-primary); background: var(--primary); color:#fff; font-size: var(--text-sm); border-radius: var(--radius-md); cursor: not-allowed; opacity:.5; }
+.social-links { margin-top: var(--space-xl); display:flex; gap: var(--space-md); }
+.social-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background: var(--bg-primary); border:1px solid var(--border-primary); border-radius: var(--radius-full); color: var(--text-secondary); transition: all var(--transition-fast); }
+.social-btn:hover { background: var(--primary); color:#fff; border-color: var(--primary); transform: translateY(-2px); }
+.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
+
+/* Compact on small screens adjust toolbar */
+@media (max-width:600px){
+  .table-toolbar { flex-direction: column; align-items: stretch; }
+}
+
 th,
 td {
   padding: var(--space-lg) var(--space-xl);
diff --git a/dist/index.html b/dist/index.html
index 5a5b421..955d0bd 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -91,12 +91,6 @@
 </svg>
                         Debrid Comparison
                     </a>
-                    <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu"
-                        aria-controls="primary-navigation" aria-expanded="false" type="button">
-                        <span class="nav-toggle-bar"></span>
-                        <span class="nav-toggle-bar"></span>
-                        <span class="nav-toggle-bar"></span>
-                    </button>
                     <nav id="primary-navigation" class="header-nav" aria-label="Main navigation" aria-hidden="true">
                         <a href="#what-are-debrid" class="nav-link">Intro</a>
                         <a href="#pricing" class="nav-link">Pricing</a>
@@ -106,16 +100,23 @@
                         <a href="#speed-test" class="nav-link">Speed Test</a>
                         <a href="#live-status" class="nav-link">Status</a>
                         <a href="#resources" class="nav-link">Resources</a>
-
                     </nav>
-                    <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" type="button">
-                        <svg class="sun-icon" role="img" aria-hidden="true">
+                    <div class="header-actions">
+                        <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" type="button">
+                            <svg class="sun-icon" role="img" aria-hidden="true">
   <use href="#icon-sun" stroke="currentColor" stroke-width="2" fill="none" />
 </svg>
 <svg class="moon-icon" role="img" aria-hidden="true">
   <use href="#icon-moon" stroke="currentColor" stroke-width="2" fill="none" />
 </svg>
-                    </button>
+                        </button>
+                        <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu"
+                            aria-controls="primary-navigation" aria-expanded="false" type="button">
+                            <span class="nav-toggle-bar"></span>
+                            <span class="nav-toggle-bar"></span>
+                            <span class="nav-toggle-bar"></span>
+                        </button>
+                    </div>
                 </div>
             </div>
         </header>
@@ -662,38 +663,38 @@
                                 guides, and communities</p>
                         </div>
 
-                        <div class="resources-categories">
-                            <div class="resource-category">
+                        <div class="resources-categories enhanced-resources">
+                            <div class="resource-category elevated">
                                 <h3>
                                     <svg class="resource-category-icon" role="img" aria-hidden="true">
   <use href="#icon-tools" stroke="currentColor" stroke-width="2" fill="none" />
 </svg>
                                     Tools and Integrations
                                 </h3>
-                                <div class="resource-list">
-                                    <a href="https://github.com/debridmediamanager/awesome-debrid" class="resource-item"
+                                <div class="resource-list cards-3">
+                                    <a href="https://github.com/debridmediamanager/awesome-debrid" class="resource-item accent-hover"
                                         target="_blank" rel="noopener noreferrer">
                                         <strong>Awesome-Debrid</strong>
                                         <span>Curated list of debrid-compatible apps, browser extensions, and automation
                                             tools</span>
                                     </a>
                                     <a href="https://github.com/debridmediamanager/debrid-media-manager"
-                                        class="resource-item" target="_blank" rel="noopener noreferrer">
+                                        class="resource-item accent-hover" target="_blank" rel="noopener noreferrer">
                                         <strong>Debrid Media Manager</strong>
                                         <span>Easily download movies and TV shows directly to your Debrid library</span>
                                     </a>
-                                    <a href="https://github.com/rogerfar/rdt-client" class="resource-item"
+                                    <a href="https://github.com/rogerfar/rdt-client" class="resource-item accent-hover"
                                         target="_blank" rel="noopener noreferrer">
                                         <strong>Real-Debrid Torrent Client</strong>
                                         <span>Web interface to manage your torrents on Real-Debrid, AllDebrid,
                                             Premiumize TorBox or DebridLink</span>
                                     </a>
-                                    <a href="https://github.com/g0ldyy/comet" class="resource-item" target="_blank"
+                                    <a href="https://github.com/g0ldyy/comet" class="resource-item accent-hover" target="_blank"
                                         rel="noopener noreferrer">
                                         <strong>Comet</strong>
                                         <span>Stremio's torrent/debrid search add-on</span>
                                     </a>
-                                    <a href="https://github.com/jackett/jackett" class="resource-item" target="_blank"
+                                    <a href="https://github.com/jackett/jackett" class="resource-item accent-hover" target="_blank"
                                         rel="noopener noreferrer">
                                         <strong>Jackett + Prowlarr</strong>
                                         <span>Indexer proxies that work seamlessly with debrid services for
@@ -701,26 +702,25 @@
                                     </a>
                                 </div>
                             </div>
-
-                            <div class="resource-category">
+                            <div class="resource-category elevated">
                                 <h3>
                                     <svg class="resource-category-icon" role="img" aria-hidden="true">
   <use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
 </svg>
                                     Community and Support
                                 </h3>
-                                <div class="resource-list">
-                                    <div class="resource-item">
+                                <div class="resource-list cards-3">
+                                    <div class="resource-item static">
                                         <strong>Reddit</strong>
                                         <span>Active discussions on r/Debrid, r/Piracy and service-specific
                                             threads</span>
                                     </div>
-                                    <div class="resource-item">
+                                    <div class="resource-item static">
                                         <strong>Discord</strong>
                                         <span>Many services offer official Discord servers for real-time support and
                                             status updates</span>
                                     </div>
-                                    <div class="resource-item">
+                                    <div class="resource-item static">
                                         <strong>GitHub Issues</strong>
                                         <span>Report inaccuracies or suggest improvements here — this project thrives on
                                             community input!</span>
@@ -746,7 +746,7 @@
         <footer class="site-footer" role="contentinfo">
             <div class="container">
                 <div class="content-container">
-                    <div class="footer-content">
+                    <div class="footer-content improved">
                         <div class="footer-section">
                             <div class="footer-brand">
                                 <svg class="footer-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor"