From 58952d89f0e80fd0b8a80be5267314418fedac69 Mon Sep 17 00:00:00 2001
From: Alana E <alinuxa@alinuxa.com>
Date: Fri, 15 Nov 2024 05:51:30 -0800
Subject: [PATCH] readmeu  pdate

---
 index.html | 387 +++++++++++++++++------------------------------------
 1 file changed, 121 insertions(+), 266 deletions(-)
diff --git a/index.html b/index.html
index 4271117..12cd122 100644
--- a/index.html
+++ b/index.html
@@ -1,266 +1,121 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Crypto Analyzer</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-            background-color: #f5f5f5;
-        }
-        .container {
-            background-color: white;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        .input-section {
-            margin-bottom: 20px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            flex-wrap: wrap;
-        }
-        input {
-            padding: 8px 12px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            width: 200px;
-        }
-        button {
-            padding: 8px 16px;
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-        button:disabled {
-            background-color: #cccccc;
-            cursor: not-allowed;
-        }
-        button:not(:disabled):hover {
-            background-color: #45a049;
-        }
-        .interval-buttons {
-            display: flex;
-            gap: 10px;
-            margin-left: auto;
-        }
-        .interval-button {
-            background-color: #6c757d;
-            padding: 6px 12px;
-            font-size: 0.9em;
-        }
-        .interval-button.active {
-            background-color: #4CAF50;
-        }
-        .chart-container {
-            margin: 20px 0;
-            height: 400px;
-            position: relative;
-        }
-        .loading {
-            display: none;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: rgba(255, 255, 255, 0.9);
-            padding: 20px;
-            border-radius: 8px;
-            text-align: center;
-        }
-        .loading.active {
-            display: block;
-        }
-        .spinner {
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #4CAF50;
-            border-radius: 50%;
-            width: 24px;
-            height: 24px;
-            animation: spin 1s linear infinite;
-            display: inline-block;
-            vertical-align: middle;
-            margin-right: 8px;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin: 20px 0;
-            background: white;
-        }
-        th, td {
-            padding: 12px;
-            text-align: left;
-            border-bottom: 1px solid #ddd;
-        }
-        th {
-            background-color: #f8f9fa;
-            font-weight: bold;
-        }
-        .positive {
-            color: #4CAF50;
-        }
-        .negative {
-            color: #dc3545;
-        }
-        .analysis-section {
-            margin: 20px 0;
-            padding: 15px;
-            background-color: #f8f9fa;
-            border-radius: 4px;
-        }
-        .error-message {
-            color: #dc3545;
-            background-color: #f8d7da;
-            border: 1px solid #f5c6cb;
-            padding: 10px;
-            border-radius: 4px;
-            margin: 10px 0;
-            display: none;
-        }
-        .data-container {
-            display: none;
-        }
-        .data-container.active {
-            display: block;
-        }
-        .signal-strength {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin: 10px 0;
-        }
-        .confidence-meter {
-            width: 200px;
-            height: 20px;
-            background: #f0f0f0;
-            border-radius: 10px;
-            overflow: hidden;
-        }
-        .confidence-level {
-            height: 100%;
-            transition: width 0.3s ease;
-        }
-        .technical-indicators {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            margin: 20px 0;
-        }
-        .indicator-card {
-            background: white;
-            padding: 15px;
-            border-radius: 8px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-        }
-        .prediction-section {
-            background: #fff;
-            padding: 15px;
-            border-radius: 8px;
-            margin: 20px 0;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>Crypto Analyzer & AI Predictor</h1>
-        
-        <div class="input-section">
-            <input type="text" id="cryptoSymbol" placeholder="Enter crypto symbol (e.g., bitcoin)" />
-            <button onclick="analyzeCrypto()" id="analyzeBtn">
-                <span class="spinner" style="display: none;"></span>
-                Analyze
-            </button>
-            <button onclick="downloadCSV()" id="downloadBtn" disabled>Download CSV</button>
-            <div class="interval-buttons">
-                <button onclick="updateInterval('1m')" class="interval-button active" id="interval1m">1m</button>
-                <button onclick="updateInterval('5m')" class="interval-button" id="interval5m">5m</button>
-            </div>
-        </div>
-
-        <div class="error-message" id="errorMessage"></div>
-
-        <div class="data-container" id="dataContainer">
-            <div class="chart-container">
-                <canvas id="priceChart"></canvas>
-                <div class="loading" id="chartLoading">
-                    <div class="spinner"></div>
-                    Loading chart data...
-                </div>
-            </div>
-
-            <div class="prediction-section">
-                <h2>AI Price Prediction</h2>
-                <div id="predictionContent"></div>
-                <div class="signal-strength">
-                    <span>Buy Signal Strength:</span>
-                    <div class="confidence-meter">
-                        <div id="buyConfidence" class="confidence-level" style="background: #4CAF50;"></div>
-                    </div>
-                    <span id="buyConfidenceText">0%</span>
-                </div>
-                <div class="signal-strength">
-                    <span>Sell Signal Strength:</span>
-                    <div class="confidence-meter">
-                        <div id="sellConfidence" class="confidence-level" style="background: #dc3545;"></div>
-                    </div>
-                    <span id="sellConfidenceText">0%</span>
-                </div>
-            </div>
-
-            <div class="technical-indicators">
-                <div class="indicator-card">
-                    <h3>RSI (Relative Strength Index)</h3>
-                    <div id="rsiValue"></div>
-                </div>
-                <div class="indicator-card">
-                    <h3>MACD</h3>
-                    <div id="macdValue"></div>
-                </div>
-                <div class="indicator-card">
-                    <h3>Signal Summary</h3>
-                    <div id="signalSummary"></div>
-                </div>
-            </div>
-
-            <div id="tableContainer">
-                <h2>Current Metrics</h2>
-                <table id="dataTable">
-                    <thead>
-                        <tr>
-                            <th>Metric</th>
-                            <th>Value</th>
-                        </tr>
-                    </thead>
-                    <tbody id="tableBody">
-                    </tbody>
-                </table>
-            </div>
-
-            <div class="analysis-section">
-                <h2>Analysis & Predictions</h2>
-                <div id="analysisContent"></div>
-            </div>
-        </div>
-    </div>
-    <script src="script.js"></script>
-</body>
-</html>
-
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crypto Analyzer</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .input-section {
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        input {
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            width: 200px;
+        }
+        button {
+            padding: 8px 16px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        .chart-container {
+            margin: 20px 0;
+            height: 400px;
+            position: relative;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+            background: white;
+        }
+        th, td {
+            padding: 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+        }
+        th {
+            background-color: #f8f9fa;
+            font-weight: bold;
+        }
+        .positive {
+            color: #4CAF50;
+        }
+        .negative {
+            color: #dc3545;
+        }
+        .error-message {
+            color: #dc3545;
+            background-color: #f8d7da;
+            border: 1px solid #f5c6cb;
+            padding: 10px;
+            border-radius: 4px;
+            margin: 10px 0;
+            display: none;
+        }
+        .data-container {
+            display: none;
+        }
+        .data-container.active {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Crypto Analyzer</h1>
+        
+        <div class="input-section">
+            <input type="text" id="cryptoSymbol" placeholder="Enter crypto name (e.g., bitcoin)" />
+            <button id="analyzeBtn">Analyze</button>
+        </div>
+
+        <div class="error-message" id="errorMessage"></div>
+
+        <div class="data-container" id="dataContainer">
+            <div class="chart-container">
+                <canvas id="priceChart"></canvas>
+            </div>
+
+            <div id="tableContainer">
+                <h2>Current Metrics</h2>
+                <table id="dataTable">
+                    <thead>
+                        <tr>
+                            <th>Metric</th>
+                            <th>Value</th>
+                        </tr>
+                    </thead>
+                    <tbody id="tableBody">
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
