|
|
<!DOCTYPE html> |
|
|
<html lang="en" dir="ltr" data-theme="light"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<meta http-equiv="Permissions-Policy" content="accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()"> |
|
|
<meta name="description" content="Crypto Monitor ULTIMATE - Sentiment Analysis"> |
|
|
<title>Sentiment Analysis | Crypto Monitor ULTIMATE</title> |
|
|
|
|
|
<link rel="icon" type="image/svg+xml" href="../../assets/icons/favicon.svg"> |
|
|
|
|
|
<link rel="stylesheet" href="/static/shared/css/design-system.css"> |
|
|
<link rel="stylesheet" href="/static/shared/css/global.css"> |
|
|
<link rel="stylesheet" href="/static/shared/css/components.css"> |
|
|
<link rel="stylesheet" href="/static/shared/css/layout.css"> |
|
|
<link rel="stylesheet" href="/static/shared/css/utilities.css"> |
|
|
<link rel="stylesheet" href="/static/pages/sentiment/sentiment.css"> |
|
|
|
|
|
<script src="/static/js/api-config.js"></script> |
|
|
<script> |
|
|
|
|
|
window.apiReady = new Promise((resolve) => { |
|
|
if (window.apiClient) { |
|
|
console.log('✅ API Client ready'); |
|
|
resolve(window.apiClient); |
|
|
} else { |
|
|
console.error('❌ API Client not loaded'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</head> |
|
|
<body> |
|
|
<div class="app-container"> |
|
|
<aside id="sidebar-container"></aside> |
|
|
|
|
|
<main class="main-content"> |
|
|
<header id="header-container"></header> |
|
|
|
|
|
<div class="page-content"> |
|
|
<div class="page-header"> |
|
|
<div class="page-title"> |
|
|
<h1> |
|
|
<span class="page-icon"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> |
|
|
</span> |
|
|
Sentiment Analysis |
|
|
</h1> |
|
|
<p class="page-subtitle">AI-Powered Market Sentiment</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tabs" id="sentiment-tabs"> |
|
|
<button class="tab active" data-tab="global"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg> |
|
|
Global Sentiment |
|
|
</button> |
|
|
<button class="tab" data-tab="asset"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"></circle><line x1="3" y1="3" x2="6" y2="6"></line><line x1="21" y1="3" x2="18" y2="6"></line><line x1="3" y1="21" x2="6" y2="18"></line><line x1="21" y1="21" x2="18" y2="18"></line></svg> |
|
|
Asset Sentiment |
|
|
</button> |
|
|
<button class="tab" data-tab="text"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg> |
|
|
Custom Text |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content"> |
|
|
|
|
|
<div class="tab-pane active" id="tab-global"> |
|
|
<div class="sentiment-grid"> |
|
|
<div class="panel-card global-overview"> |
|
|
<div class="panel-header"> |
|
|
<h3>Market Sentiment Overview</h3> |
|
|
<button id="refresh-global" class="btn btn-sm btn-secondary"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg> |
|
|
Refresh |
|
|
</button> |
|
|
</div> |
|
|
<div class="panel-body" id="global-content"> |
|
|
<div class="loading-container"><div class="spinner"></div><p>Loading sentiment data...</p></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-pane" id="tab-asset"> |
|
|
<div class="sentiment-grid"> |
|
|
<div class="panel-card"> |
|
|
<div class="panel-header"> |
|
|
<h3>Analyze Asset Sentiment</h3> |
|
|
</div> |
|
|
<div class="panel-body"> |
|
|
<div class="form-group"> |
|
|
<label for="asset-select">Select Cryptocurrency</label> |
|
|
<select id="asset-select" class="form-select"> |
|
|
<option value="">Loading cryptocurrencies...</option> |
|
|
</select> |
|
|
</div> |
|
|
<button id="analyze-asset" class="btn btn-primary btn-block"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> |
|
|
Analyze Sentiment |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="panel-card results-panel"> |
|
|
<div class="panel-header"> |
|
|
<h3>Analysis Results</h3> |
|
|
</div> |
|
|
<div class="panel-body" id="asset-result"> |
|
|
<div class="empty-state"> |
|
|
<p>Enter a cryptocurrency symbol and click Analyze</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-pane" id="tab-text"> |
|
|
<div class="sentiment-grid"> |
|
|
<div class="panel-card"> |
|
|
<div class="panel-header"> |
|
|
<h3>Analyze Custom Text</h3> |
|
|
</div> |
|
|
<div class="panel-body"> |
|
|
<div class="form-group"> |
|
|
<label for="text-input">Enter text to analyze</label> |
|
|
<textarea id="text-input" class="form-textarea" rows="6" placeholder="Enter any text related to cryptocurrency to analyze its sentiment..."></textarea> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="mode-select">Analysis Mode</label> |
|
|
<select id="mode-select" class="form-select"> |
|
|
<option value="crypto">Crypto-specific</option> |
|
|
<option value="general">General</option> |
|
|
<option value="financial">Financial</option> |
|
|
</select> |
|
|
</div> |
|
|
<button id="analyze-text" class="btn btn-primary btn-block"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> |
|
|
Analyze Sentiment |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="panel-card results-panel"> |
|
|
<div class="panel-header"> |
|
|
<h3>Analysis Results</h3> |
|
|
</div> |
|
|
<div class="panel-body" id="text-result"> |
|
|
<div class="empty-state"> |
|
|
<p>Enter text and click Analyze to see results</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<div id="toast-container" aria-live="polite" aria-atomic="true"></div> |
|
|
|
|
|
|
|
|
<script src="/static/js/trading-pairs-loader.js"></script> |
|
|
|
|
|
|
|
|
<script type="module"> |
|
|
import { LayoutManager } from '/static/shared/js/core/layout-manager.js'; |
|
|
|
|
|
|
|
|
await LayoutManager.init('sentiment'); |
|
|
|
|
|
|
|
|
const assetSelect = document.getElementById('asset-select'); |
|
|
if (assetSelect && window.tradingPairsLoader) { |
|
|
await window.tradingPairsLoader.populateSelect(assetSelect, { |
|
|
limit: 100, |
|
|
placeholder: 'Select a cryptocurrency...', |
|
|
selectedValue: 'BTC', |
|
|
showRank: true, |
|
|
showSymbol: true |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
await import('/static/pages/sentiment/sentiment.js'); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
