trtr

commit 0320520107050d42cf74ce11bab286c53b4439b8
parent fc2f8e5ebd51094e4bea55c0b892cee019513b13
Author: ea <ea@ea.contact>
Date:   Fri, 29 May 2026 10:46:34 +0000

Add ? button

Diffstat:
M
frontend/index.html
 | 
104
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1 file changed, 104 insertions(+), 0 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
@@ -64,6 +64,82 @@
   }
   #new-session-btn:hover { background: #3a3a5a; color: #e0e0e0; }
 
+  #help-btn {
+    width: 28px;
+    height: 28px;
+    background: #1e1e36;
+    color: #606080;
+    border: 1px solid #3a3a5a;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: background 0.15s, color 0.15s;
+  }
+  #help-btn:hover { background: #2a2a4a; color: #c0c0e0; }
+
+  #help-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 500;
+    padding: 16px;
+  }
+  #help-overlay.hidden { display: none; }
+
+  #help-box {
+    background: #16162a;
+    border: 1px solid #2a2a4a;
+    border-radius: 10px;
+    padding: 24px 28px;
+    max-width: 480px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    position: relative;
+    font-size: 0.85rem;
+    line-height: 1.65;
+    color: #c0c0d8;
+  }
+  #help-box h2 {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #f0b429;
+    margin-bottom: 8px;
+  }
+  #help-box h2:not(:first-child) { margin-top: 20px; }
+  #help-box p { margin-bottom: 0; }
+  #help-box ol { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
+  #help-box .help-note {
+    margin-top: 20px;
+    padding: 10px 14px;
+    background: #1e1e36;
+    border: 1px solid #3a3a5a;
+    border-radius: 6px;
+    font-size: 0.78rem;
+    color: #808098;
+    line-height: 1.6;
+  }
+  #help-close {
+    position: absolute;
+    top: 12px;
+    right: 14px;
+    background: none;
+    border: none;
+    color: #505070;
+    font-size: 1.1rem;
+    cursor: pointer;
+    line-height: 1;
+    padding: 2px 4px;
+  }
+  #help-close:hover { color: #c0c0e0; }
+
   .main {
     display: flex;
     flex: 1;
@@ -561,6 +637,7 @@
       <option value="12">Dec</option>
     </select>
     <button id="new-session-btn">New Session</button>
+    <button id="help-btn">?</button>
   </div>
 </header>
 
@@ -699,6 +776,25 @@
   </div>
 </footer>
 
+<div id="help-overlay" class="hidden">
+  <div id="help-box">
+    <button id="help-close">&#x2715;</button>
+    <h2>What is this?</h2>
+    <p>You are looking at real historic 1 minute BTC/USD pair trading data from Bitstamp. Try predicting how it is going to behave in the next minutes! Some basic tools for visual technical analysis are at your disposal.</p>
+    <h2>How to play?</h2>
+    <ol>
+      <li>Double click somewhere on the right from the last candle to place a prediction. Clicking above the current price creates a long prediction. Create a short prediction by clicking below the current price.</li>
+      <li>Let the time progress till execution by adding candles with the buttons on the bottom.</li>
+      <li>&hellip;</li>
+      <li>Profit!! (or not)</li>
+    </ol>
+    <div class="help-note">
+      <strong style="color:#a0a0c0">Note</strong><br>
+      A long position counts as a positive x1 buy-sell of 100 USD. Equivalent to buying BTC at the current price and selling at the price at the set moment of the prediction. Short is the same but in reverse.
+    </div>
+  </div>
+</div>
+
 <script>
   let sessionId = null;
   let chart = null;
@@ -1226,6 +1322,14 @@
 
   document.getElementById('new-session-btn').addEventListener('click', startSession);
 
+  // ── Help overlay ──────────────────────────────────────────────────────────
+
+  const helpOverlay = document.getElementById('help-overlay');
+  document.getElementById('help-btn').addEventListener('click', () => helpOverlay.classList.remove('hidden'));
+  document.getElementById('help-close').addEventListener('click', () => helpOverlay.classList.add('hidden'));
+  helpOverlay.addEventListener('click', e => { if (e.target === helpOverlay) helpOverlay.classList.add('hidden'); });
+  document.addEventListener('keydown', e => { if (e.key === 'Escape') helpOverlay.classList.add('hidden'); });
+
   // ── Gym Mode ──────────────────────────────────────────────────────────────
 
   let gymMode = true;