<html><head><base href="https://www.tradingview.com/?utm_medium=lwc-link&utm_campaign=lwc-chart&utm_source=party.websim.ai/api/v1/sites/yPye11zQnQGxJDlYg/html">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cryptocurrency Analysis</title>
<style>
:root {
--primary-color: #1e2a3a;
--secondary-color: #2c3e50;
--accent-color: #3498db;
--text-color: #ecf0f1;
--positive-color: #2ecc71;
--negative-color: #e74c3c;
--neutral-color: #f39c12;
--select-bg: #34495e;
--select-hover: #2c3e50;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--primary-color);
color: var(--text-color);
line-height: 1.6;
}
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 250px;
background-color: var(--secondary-color);
padding: 20px;
overflow-y: auto;
border-right: 1px solid var(--accent-color);
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
h2, h3 {
margin-bottom: 15px;
color: var(--accent-color);
}
ul {
list-style-type: none;
}
li {
margin-bottom: 10px;
}
button {
width: 100%;
padding: 10px;
background-color: var(--accent-color);
color: var(--text-color);
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
}
button:hover {
background-color: #2980b9;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
button.active {
background-color: #2ecc71;
}
button i {
margin-right: 8px;
font-size: 1.2em;
}
.chart-container {
height: 60vh;
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.chart-controls {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.chart-controls select, .chart-controls button {
padding: 10px 15px;
border-radius: 5px;
border: none;
background-color: var(--select-bg);
color: var(--text-color);
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
.chart-controls select:hover, .chart-controls button:hover {
background-color: var(--select-hover);
}
.chart-controls select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
}
#indicatorsList {
max-height: 200px;
overflow-y: auto;
background-color: var(--secondary-color);
border-radius: 5px;
padding: 10px;
margin-top: 10px;
}
#indicatorsList div {
padding: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#indicatorsList div:hover {
background-color: var(--accent-color);
}
.analysis-container {
background-color: var(--secondary-color);
border-radius: 10px;
padding: 20px;
margin-top: 20px;
}
.analysis-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.analysis-header h3 {
margin: 0;
}
#analyzeButton {
background-color: var(--accent-color);
color: var(--text-color);
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
#analyzeButton:hover {
background-color: #2980b9;
}
#analysisResult {
background-color: var(--primary-color);
border-radius: 5px;
padding: 15px;
margin-top: 15px;
}
.recommendation {
font-weight: bold;
margin-top: 10px;
}
.long {
color: var(--positive-color);
}
.short {
color: var(--negative-color);
}
.neutral {
color: var(--neutral-color);
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
height: auto;
}
.chart-container {
height: 50vh;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li><h3>Cryptocurrencies</h3>
<ul>
<li><button onclick="updateInstrument('BTCUSD')"><i class="fab fa-bitcoin"></i>BTC/USD</button></li>
<li><button onclick="updateInstrument('ETHUSD')"><i class="fab fa-ethereum"></i>ETH/USD</button></li>
<li><button onclick="updateInstrument('XRPUSD')"><i class="fas fa-coins"></i>XRP/USD</button></li>
<li><button onclick="updateInstrument('LTCUSD')"><i class="fab fa-litecoin-ltc"></i>LTC/USD</button></li>
<li><button onclick="updateInstrument('ADAUSD')"><i class="fas fa-project-diagram"></i>ADA/USD</button></li>
<li><button onclick="updateInstrument('DOGEUSD')"><i class="fas fa-dog"></i>DOGE/USD</button></li>
<li><button onclick="updateInstrument('DOTUSD')"><i class="fas fa-dot-circle"></i>DOT/USD</button></li>
<li><button onclick="updateInstrument('LINKUSD')"><i class="fas fa-link"></i>LINK/USD</button></li>
<li><button onclick="updateInstrument('UNIUSD')"><i class="fas fa-unicorn"></i>UNI/USD</button></li>
<li><button onclick="updateInstrument('SOLUSD')"><i class="fas fa-sun"></i>SOL/USD</button></li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="chart-controls">
<select id="timeframeSelector" onchange="updateTimeframe()">
<option value="1">1 minute</option>
<option value="5">5 minutes</option>
<option value="15">15 minutes</option>
<option value="30">30 minutes</option>
<option value="60">1 hour</option>
<option value="D">Daily</option>
<option value="W">Weekly</option>
</select>
<select id="indicatorSelector" onchange="addIndicator()">
<option value="">Select Indicator</option>
<option value="MASimple@tv-basicstudies">Simple Moving Average</option>
<option value="MAExp@tv-basicstudies">Exponential Moving Average</option>
<option value="RSI@tv-basicstudies">RSI</option>
<option value="MACD@tv-basicstudies">MACD</option>
<option value="BB@tv-basicstudies">Bollinger Bands</option>
<option value="IchimokuCloud@tv-basicstudies">Ichimoku Cloud</option>
<option value="StochasticRSI@tv-basicstudies">Stochastic RSI</option>
<option value="ADX@tv-basicstudies">ADX</option>
<option value="CCI@tv-basicstudies">CCI</option>
<option value="ATR@tv-basicstudies">ATR</option>
<option value="EMA@tv-basicstudies">EMA</option>
<option value="VWAP@tv-basicstudies">VWAP</option>
<option value="ParabolicSAR@tv-basicstudies">Parabolic SAR</option>
<option value="ZigZag@tv-basicstudies">Zig Zag</option>
<option value="PivotPointsStandard@tv-basicstudies">Pivot Points Standard</option>
<option value="WilliamsR@tv-basicstudies">Williams %R</option>
<option value="MOM@tv-basicstudies">Momentum</option>
<option value="StochasticKC@tv-basicstudies">Stochastic</option>
<option value="DMI@tv-basicstudies">DMI</option>
<option value="Stochastic@tv-basicstudies">Stochastic Oscillator</option>
<option value="AwesomeOscillator@tv-basicstudies">Awesome Oscillator</option>
<option value="BollingerBandsWidth@tv-basicstudies">Bollinger Bands Width</option>
<option value="ChaikinOscillator@tv-basicstudies">Chaikin Oscillator</option>
<option value="ChandeMO@tv-basicstudies">Chande Momentum Oscillator</option>
<option value="ChoppinessIndex@tv-basicstudies">Choppiness Index</option>
<option value="CoppockCurve@tv-basicstudies">Coppock Curve</option>
<option value="DPO@tv-basicstudies">Detrended Price Oscillator</option>
<option value="EaseOfMovement@tv-basicstudies">Ease of Movement</option>
<option value="ElderRay@tv-basicstudies">Elder Ray Index</option>
<option value="KlingerOscillator@tv-basicstudies">Klinger Oscillator</option>
</select>
</div>
<div id="tradingview_widget" class="chart-container"></div>
<div class="analysis-container">
<div class="analysis-header">
<h3>Technical Analysis</h3>
<button id="analyzeButton" onclick="performAnalysis()">Analyze</button>
</div>
<div id="analysisResult"></div>
</div>
</div>
</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
let widget;
let currentSymbol = 'BTCUSD';
let currentTimeframe = '60';
let currentIndicators = [];
function createWidget() {
if (widget) {
widget.remove();
}
widget = new TradingView.widget({
"width": "100%",
"height": "100%",
"symbol": "BINANCE:" + currentSymbol,
"interval": currentTimeframe,
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_widget",
"studies": currentIndicators
});
}
function updateInstrument(symbol) {
currentSymbol = symbol;
createWidget();
// Update active button
const buttons = document.querySelectorAll('button');
buttons.forEach(button => button.classList.remove('active'));
event.currentTarget.classList.add('active');
}
function updateTimeframe() {
currentTimeframe = document.getElementById('timeframeSelector').value;
createWidget();
}
function addIndicator() {
const indicator = document.getElementById('indicatorSelector').value;
if (indicator && !currentIndicators.includes(indicator)) {
currentIndicators.push(indicator);
createWidget();
}
}
function performAnalysis() {
const analysisResult = document.getElementById('analysisResult');
analysisResult.innerHTML = '<p>Analyzing ' + currentSymbol + ' on ' + currentTimeframe + ' timeframe...</p>';
// Simulate analysis (this should be replaced with real analysis based on chart data)
setTimeout(() => {
const randomValue = Math.random();
let recommendation, explanation;
if (randomValue < 0.4) {
recommendation = '<p class="recommendation long">Recommendation: LONG</p>';
explanation = 'Technical analysis suggests an upward trend. Indicators show buy signals.';
} else if (randomValue < 0.8) {
recommendation = '<p class="recommendation short">Recommendation: SHORT</p>';
explanation = 'Technical analysis indicates a potential downward trend. Indicators show sell signals.';
} else {
recommendation = '<p class="recommendation neutral">Recommendation: NEUTRAL</p>';
explanation = 'Technical analysis does not show a clear trend. It is recommended to wait for stronger signals.';
}
analysisResult.innerHTML = `
<h4>Analysis Result for ${currentSymbol}</h4>
<p>Timeframe: ${currentTimeframe}</p>
${recommendation}
<p>${explanation}</p>
<p>Remember that this analysis is generated automatically and should not be considered as financial advice. Always do your own research before making investment decisions.</p>
`;
}, 2000);
}
// Initialize widget
document.addEventListener('DOMContentLoaded', () => {
createWidget();
// Set initial selections
document.querySelector('button').classList.add('active');
document.getElementById('timeframeSelector').value = currentTimeframe;
});
// Save selections to localStorage
function saveSelections() {
localStorage.setItem('currentSymbol', currentSymbol);
localStorage.setItem('currentTimeframe', currentTimeframe);
localStorage.setItem('currentIndicators', JSON.stringify(currentIndicators));
}
// Load selections from localStorage
function loadSelections() {
currentSymbol = localStorage.getItem('currentSymbol') || 'BTCUSD';
currentTimeframe = localStorage.getItem('currentTimeframe') || '60';
currentIndicators = JSON.parse(localStorage.getItem('currentIndicators')) || [];
// Update UI to reflect loaded selections
document.querySelector(`button[onclick="updateInstrument('${currentSymbol}')"]`).classList.add('active');
document.getElementById('timeframeSelector').value = currentTimeframe;
createWidget();
}
// Call loadSelections on page load
document.addEventListener('DOMContentLoaded', loadSelections);
// Save selections whenever they change
['updateInstrument', 'updateTimeframe', 'addIndicator'].forEach(funcName => {
const originalFunc = window[funcName];
window[funcName] = function() {
originalFunc.apply(this, arguments);
saveSelections();
};
});
</script>
</body></html>
