Change port to 8280

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: johnnybegood320 # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

docker-compose.yml

@@ -2,7 +2,7 @@ services:
   gridtv:
     build: .
     ports:
-      - "${PORT:-8080}:80"
+      - "${PORT:-8280}:80"
     volumes:
       - ./data:/data
     restart: unless-stopped

src/css/topbar.css

@@ -7,6 +7,7 @@
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
+    flex-wrap: nowrap;
     padding: 0 16px;
     gap: 12px;
     flex-shrink: 0;
@@ -25,6 +26,14 @@
   .logo span { color: var(--text-dim); margin: 0 5px; }
   .logo-sub { display: inline; }
 
+  .topbar-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
   .live-dot {
     display: flex;
     align-items: center;
@@ -33,7 +42,6 @@
     font-family: 'Share Tech Mono', monospace;
     color: var(--accent-live);
     letter-spacing: 0.1em;
-    margin-left: auto;
     flex-shrink: 0;
   }
   .live-dot::before {
@@ -117,6 +125,24 @@
     border-color: var(--accent);
     color: var(--accent);
   }
+  .support-links {
+    display: flex;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+  .support-link-github:hover {
+    border-color: var(--text);
+    color: var(--text);
+  }
+  .support-link-coffee {
+    border-color: #f6c453;
+    color: #f6c453;
+  }
+  .support-link-coffee:hover {
+    border-color: #ffd978;
+    color: #ffd978;
+    background: rgba(246, 196, 83, 0.08);
+  }
 
 /* ═══════════════════════════════════════════
      RESPONSIVE
@@ -168,6 +194,7 @@
   .category-filter:hover { border-color: var(--accent2); color: var(--accent2); }
   .category-filter option { background: #111; color: #eee; font-family: sans-serif; }
 
+  @media (max-width: 600px) {
     body { overflow: hidden; }
 
     .topbar {
@@ -179,6 +206,7 @@
     .logo { font-size: 11px; }
     .clock { font-size: 14px; }
     .category-filter { max-width: 100%; }
+    .topbar-right { width: 100%; justify-content: space-between; }
 
     .grid-wrapper { display: none; }
     .mobile-view { display: block; }

src/tpl/topbar.php

@@ -62,7 +62,13 @@ foreach ($theme_files as $file) {
     <option value=""><?= htmlspecialchars($L["category_all"] ?? 'All categories') ?></option>
   </select>
   <button class="search-btn" onclick="toggleSearch()" title="Search">&#128269;</button>
+  <div class="topbar-right">
+    <div class="support-links">
+      <a class="copy-btn support-link support-link-github" href="https://github.com/Johnnybegood90/GridTV" target="_blank" rel="noopener" title="GitHub">GitHub</a>
+      <a class="copy-btn support-link support-link-coffee" href="https://buymeacoffee.com/johnnybegood320" target="_blank" rel="noopener" title="Buy Me a Coffee">Buy Me a Coffee</a>
+    </div>
     <div class="live-dot"><?= htmlspecialchars($L["live"]) ?></div>
+  </div>
 </div>
 <div class="search-bar" id="searchBar">
   <input class="search-input" id="searchInput" type="text" placeholder="<?= htmlspecialchars($L["search_placeholder"]) ?>" oninput="onSearchInput(this.value)" />