From 55d2c35a63695c9cad32a758630e6cc8ff9ff933 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 1 Feb 2026 23:27:01 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20fallback=20?=
 =?UTF-8?q?UI=20accessibility=20and=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Improved text contrast in footer
- Added 'Copy to Clipboard' button for install command
- Replaced dummy nav links with useful documentation links
- Added :focus-visible styles for keyboard accessibility
- Polished button and layout styles

Co-authored-by: Corax-CoLAB <239841157+Corax-CoLAB@users.noreply.github.com>
---
 .../rpc/api_server/ui/fallback_file.html      | 65 ++++++++++++++++---
 1 file changed, 55 insertions(+), 10 deletions(-)
diff --git a/freqtrade/rpc/api_server/ui/fallback_file.html b/freqtrade/rpc/api_server/ui/fallback_file.html
index 25d7c4d14..bd8cbd9f7 100644
--- a/freqtrade/rpc/api_server/ui/fallback_file.html
+++ b/freqtrade/rpc/api_server/ui/fallback_file.html
@@ -111,7 +111,7 @@
       text-align: center;
       padding: 2rem;
       background-color: var(--nav-bg);
-      color: #aaa;
+      color: var(--text-color); /* Improved contrast */
       margin-top: 3rem;
       border-top: 2px solid var(--accent-primary);
     }
@@ -124,13 +124,60 @@
       text-decoration: none;
       font-weight: bold;
       margin-top: 1rem;
+      border: none;
+      cursor: pointer;
+      font-size: 1rem;
       transition: transform 0.2s, box-shadow 0.2s;
     }
     .btn:hover {
       transform: scale(1.05);
       box-shadow: 0 0 10px var(--accent-primary);
     }
+    /* Accessibility Focus Styles */
+    a:focus-visible, button:focus-visible {
+      outline: 3px solid var(--accent-secondary);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+    .btn:focus-visible {
+      border-radius: 25px;
+    }
+
+    /* Code Copy Section */
+    .code-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin: 1rem 0;
+    }
+    .copy-btn {
+      background-color: var(--accent-secondary);
+      color: var(--bg-color);
+      border: none;
+      padding: 0.5rem 1rem;
+      border-radius: 5px;
+      cursor: pointer;
+      font-weight: bold;
+      font-family: sans-serif;
+    }
+    .copy-btn:hover {
+      background-color: #fff;
+    }
   </style>
+  <script>
+    function copyCommand() {
+      const commandText = document.getElementById('install-cmd').innerText;
+      navigator.clipboard.writeText(commandText).then(() => {
+        const btn = document.getElementById('copy-btn');
+        btn.innerText = '✅ Copied!';
+        setTimeout(() => {
+          btn.innerText = '📋 Copy';
+        }, 2000);
+      });
+    }
+  </script>
 </head>
 <body>
 
@@ -140,14 +187,9 @@
   </div>
   <h1>Freqtrade - Crypto P Edition</h1>
   <nav>
-    <a href="#">Home</a>
-    <a href="#">Sign Up</a>
-    <a href="#">Login</a>
-    <a href="#">Dashboard</a>
-    <a href="#">Crypto Signals</a>
-    <a href="#">Live Charts</a>
-    <a href="#">About Crypto P</a>
-    <a href="#">Contact</a>
+    <a href="https://freqtrade.io" target="_blank" rel="noopener noreferrer">Docs</a>
+    <a href="https://github.com/freqtrade/freqtrade" target="_blank" rel="noopener noreferrer">GitHub</a>
+    <a href="https://discord.gg/freqtrade" target="_blank" rel="noopener noreferrer">Discord</a>
   </nav>
 </header>
 
@@ -174,7 +216,10 @@
 <div class="content-section install-notice">
   <h3>Unlock the Full Edition!</h3>
   <p>The UI is currently hiding. Install it with this command:</p>
-  <code>freqtrade install-ui</code>
+  <div class="code-container">
+    <code id="install-cmd">freqtrade install-ui</code>
+    <button id="copy-btn" class="copy-btn" onclick="copyCommand()" aria-label="Copy install command to clipboard">📋 Copy</button>
+  </div>
   <p>Then refresh this page to enter the dashboard!</p>
   <button class="btn" onclick="location.reload()">🔄 Refresh</button>
 </div>
