Skip to content

Commit

Permalink
readmeu pdate
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlanaRm-rf-me
AlanaRm-rf-me committed Nov 15, 2024
1 parent bdd1787 commit 58952d8
Showing 1 changed file with 121 additions and 266 deletions.
387 changes: 121 additions & 266 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -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>

<!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>

1 comment on commit 58952d8

@deno-deploy
Copy link

@deno-deploy deno-deploy bot commented on 58952d8 Nov 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Failed to deploy:

UNCAUGHT_EXCEPTION

ReferenceError: document is not defined
    at file:///src/realtime.js:201:1

Please sign in to comment.