File size: 9,474 Bytes
b190b45 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 | <!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">
<!-- API Configuration - Smart Fallback System -->
<script src="/static/js/api-config.js"></script>
<script>
// Initialize API client
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>
<!-- Tabs -->
<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>
<!-- Tab Content -->
<div class="tab-content">
<!-- Global Sentiment Tab -->
<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>
<!-- Asset Sentiment Tab -->
<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>
<!-- Custom Text Tab -->
<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>
<!-- Load trading pairs loader -->
<script src="/static/js/trading-pairs-loader.js"></script>
<!-- Initialize layout and page -->
<script type="module">
import { LayoutManager } from '/static/shared/js/core/layout-manager.js';
// Initialize layouts first
await LayoutManager.init('sentiment');
// Load trading pairs into dropdown
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
});
}
// Then load page module
await import('/static/pages/sentiment/sentiment.js');
</script>
</body>
</html>
|