frontend

2026-04-20 20:40:48 +02:00
parent 463c391d14
commit 53dd49612d
19 changed files with 2435 additions and 4 deletions
@@ -0,0 +1,89 @@
+<script>
+  // Screener — sera branché sur les données réelles une fois les API intégrées
+  let filters = { minRsi: '', maxRsi: '', minVolume: '', sector: '' }
+</script>
+
+<div class="page">
+  <h1>Screener</h1>
+
+  <div class="filters">
+    <div class="filter-group">
+      <label for="rsi-min">RSI min</label>
+      <input id="rsi-min" type="number" bind:value={filters.minRsi} placeholder="ex: 30" min="0" max="100" />
+    </div>
+    <div class="filter-group">
+      <label for="rsi-max">RSI max</label>
+      <input id="rsi-max" type="number" bind:value={filters.maxRsi} placeholder="ex: 70" min="0" max="100" />
+    </div>
+    <div class="filter-group">
+      <label for="vol-min">Volume min</label>
+      <input id="vol-min" type="number" bind:value={filters.minVolume} placeholder="ex: 1000000" />
+    </div>
+    <div class="filter-group">
+      <label for="sector">Secteur</label>
+      <input id="sector" type="text" bind:value={filters.sector} placeholder="Technology…" />
+    </div>
+    <button class="btn-scan" disabled>
+      Scan (bientôt disponible)
+    </button>
+  </div>
+
+  <div class="placeholder">
+    <div class="icon">⊞</div>
+    <p>Le screener sera disponible après l'intégration Yahoo Finance / Finnhub.</p>
+    <p class="hint">Il filtrera l'univers eToro sur RSI, MACD, volume et catalyseurs news.</p>
+  </div>
+</div>
+
+<style>
+  .page h1 { color: #e6edf3; font-size: 1.4rem; }
+
+  .filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: flex-end;
+    margin-bottom: 2rem;
+    padding: 1.25rem;
+    background: #161b22;
+    border: 1px solid #21262d;
+    border-radius: 8px;
+  }
+
+  .filter-group { display: flex; flex-direction: column; gap: 0.3rem; }
+  label { font-size: 0.75rem; color: #8b949e; text-transform: uppercase; letter-spacing: 0.05em; }
+
+  input {
+    background: #0d1117;
+    border: 1px solid #30363d;
+    border-radius: 6px;
+    color: #e6edf3;
+    padding: 0.45rem 0.65rem;
+    font-size: 0.875rem;
+    outline: none;
+    width: 130px;
+  }
+  input:focus { border-color: #58a6ff; }
+  input::placeholder { color: #484f58; }
+
+  .btn-scan {
+    background: #1f6feb;
+    border: none;
+    border-radius: 6px;
+    color: #fff;
+    padding: 0.5rem 1.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    align-self: flex-end;
+  }
+  .btn-scan:disabled { opacity: 0.4; cursor: not-allowed; }
+
+  .placeholder {
+    text-align: center;
+    padding: 3rem;
+    color: #484f58;
+  }
+  .placeholder .icon { font-size: 2.5rem; margin-bottom: 1rem; }
+  .placeholder p { margin: 0.3rem 0; font-size: 0.9rem; }
+  .placeholder .hint { font-size: 0.8rem; color: #30363d; }
+</style>