🎨 Palette: Improve fallback UI accessibility and UX

- 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>
2 weeks ago · 55d2c35a63
parent a915ac5ed5
commit 55d2c35a63
1 changed files with 55 additions and 10 deletions
--- 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>