feat: updated UI to Refined Trading Dashboard style

2026-03-19 22:20:59 +01:00
parent 870f7574cc
commit eedd532ba7
15 changed files with 1637 additions and 1679 deletions
--- a/GEMINI.md
+++ b/GEMINI.md
@ -0,0 +1,76 @@
+# GEMINI.md
+
+## Project Overview
+**Winterfail Web** is a comprehensive BTC trading dashboard designed for visualization and technical analysis. It features a modular frontend built with modern JavaScript (ES Modules) and a mock backend for development and testing.
+
+### Main Technologies
+- **Frontend:** Vanilla JavaScript (ES Modules), [Lightweight Charts](https://github.com/tradingview/lightweight-charts) for high-performance charting.
+- **Backend:** Node.js with Express for a mock API server.
+- **Styling:** Vanilla CSS with a focus on dark-themed, TradingView-like UI components.
+- **Dev Tools:** `http-server` for local development.
+
+### Architecture
+The project follows a modular architecture:
+- **`js/core/`**: Core logic for data handling and chart management.
+- **`js/ui/`**: UI components including the main chart, sidebar, indicator panels, and strategy panels.
+- **`js/indicators/`**: Implementation of various technical indicators (ATR, Bollinger Bands, Hurst, MACD, RSI, etc.).
+- **`js/strategies/`**: Trading strategy implementations.
+- **`js/utils/`**: Helper functions for calculations and data formatting.
+- **`api-server.js`**: A mock API server providing candle data, stats, and technical analysis (TA) signals.
+
+## Building and Running
+
+### Prerequisites
+- Node.js and npm installed.
+
+### Installation
+```powershell
+# Navigate to the project directory
+cd winterfail
+
+# Install dependencies
+npm install
+```
+
+### Running the Project
+The project requires both the API server and the web server to be running.
+
+1.  **Start the API Server:**
+    ```powershell
+    node api-server.js
+    ```
+    *The API server runs on `http://20.20.20.20:8000` (Note: This IP is hardcoded in the current version).*
+
+2.  **Start the Web Dashboard:**
+    ```powershell
+    npm start
+    ```
+    *The dashboard will be available at `http://localhost:3001`.*
+
+### Testing
+- No explicit test suite was found. Testing is currently performed manually by verifying the dashboard's rendering and indicator calculations.
+
+## Development Conventions
+
+### Coding Style
+- **Modules:** Uses ES Modules (`import`/`export`). Frontend files should be linked via `<script type="module">` or imported by other modules.
+- **Naming:** 
+  - Files: kebab-case (e.g., `indicators-panel-new.js`).
+  - Variables/Functions: camelCase.
+- **Configuration:** API connection settings are managed in `config.js`.
+
+### UI/UX Standards
+- The dashboard aims to mimic the TradingView look and feel.
+- Uses CSS variables (defined in `index.html`) for consistent coloring and theming.
+- Interactive elements (popups, sidebars) use class-based toggling (e.g., `.show`).
+
+### Indicators and Strategies
+- New indicators should be added to the `js/indicators/` directory and registered in `js/indicators/index.js`.
+- Each indicator module should export a consistent interface for the `IndicatorRegistry` and the chart drawing logic.
+
+## Key Files
+- `index.html`: The main entry point and UI structure.
+- `js/app.js`: The primary frontend initialization script.
+- `api-server.js`: Mock API providing the necessary data for the dashboard.
+- `config.js`: Global configuration for the frontend.
+- `js/ui/chart.js`: Contains the main `TradingDashboard` class logic.