|
|
<!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 - Settings & Configuration"> |
|
|
<title>Settings | Crypto Monitor ULTIMATE</title> |
|
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/static/assets/icons/favicon.svg"> |
|
|
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> |
|
|
|
|
|
<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/settings/settings.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="background-effects"> |
|
|
<div class="gradient-orb orb-1"></div> |
|
|
<div class="gradient-orb orb-2"></div> |
|
|
<div class="gradient-orb orb-3"></div> |
|
|
</div> |
|
|
|
|
|
<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 glass-panel"> |
|
|
<div class="page-title"> |
|
|
<div class="title-icon"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg> |
|
|
</div> |
|
|
<div class="title-content"> |
|
|
<h1>Settings</h1> |
|
|
<p class="page-subtitle">Configure tokens, notifications, signals & scheduling</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="page-actions"> |
|
|
<button id="save-all-btn" class="btn-gradient" title="Save all settings"> |
|
|
<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="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg> |
|
|
<span>Save All</span> |
|
|
</button> |
|
|
<button id="reset-btn" class="btn-secondary" title="Reset to defaults"> |
|
|
<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"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg> |
|
|
<span>Reset</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="settings-nav glass-panel"> |
|
|
<button class="settings-nav-btn active" data-section="api-tokens"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> |
|
|
<span>API Tokens</span> |
|
|
</button> |
|
|
<button class="settings-nav-btn" data-section="telegram"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.5 2L2 9.5l7 2.5L15 7l-4.5 7 9-12z"></path><path d="M9 12v9l3.5-4"></path></svg> |
|
|
<span>Telegram</span> |
|
|
</button> |
|
|
<button class="settings-nav-btn" data-section="signals"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg> |
|
|
<span>Signals</span> |
|
|
</button> |
|
|
<button class="settings-nav-btn" data-section="scheduling"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> |
|
|
<span>Scheduling</span> |
|
|
</button> |
|
|
<button class="settings-nav-btn" data-section="notifications"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg> |
|
|
<span>Notifications</span> |
|
|
</button> |
|
|
<button class="settings-nav-btn" data-section="appearance"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"></circle><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path></svg> |
|
|
<span>Appearance</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="settings-content"> |
|
|
|
|
|
|
|
|
<section id="section-api-tokens" class="settings-section active"> |
|
|
<div class="section-card glass-panel"> |
|
|
<div class="section-header"> |
|
|
<div class="section-icon">🔑</div> |
|
|
<div class="section-info"> |
|
|
<h2>API Tokens & Keys</h2> |
|
|
<p>Manage your API keys for various services</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<form class="settings-form" onsubmit="event.preventDefault();"> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">🤗</span> |
|
|
Hugging Face Token |
|
|
</label> |
|
|
<div class="input-with-action"> |
|
|
<input type="password" id="hf-token" class="form-input" placeholder="hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" autocomplete="new-password"> |
|
|
<button class="toggle-visibility" type="button" data-target="hf-token"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg> |
|
|
</button> |
|
|
</div> |
|
|
<span class="form-hint">Required for private/gated models. Get yours at <a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a></span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">🦎</span> |
|
|
CoinGecko API Key <span class="optional-badge">Optional</span> |
|
|
</label> |
|
|
<div class="input-with-action"> |
|
|
<input type="password" id="coingecko-key" class="form-input" placeholder="CG-xxxxxxxxxxxxxxxxxxxxxxxx" autocomplete="new-password"> |
|
|
<button class="toggle-visibility" type="button" data-target="coingecko-key"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg> |
|
|
</button> |
|
|
</div> |
|
|
<span class="form-hint">For higher rate limits. Free tier works without key.</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">📊</span> |
|
|
CoinMarketCap API Key <span class="optional-badge">Optional</span> |
|
|
</label> |
|
|
<div class="input-with-action"> |
|
|
<input type="password" id="cmc-key" class="form-input" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" autocomplete="new-password"> |
|
|
<button class="toggle-visibility" type="button" data-target="cmc-key"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg> |
|
|
</button> |
|
|
</div> |
|
|
<span class="form-hint">Get your free key at <a href="https://coinmarketcap.com/api/" target="_blank">coinmarketcap.com/api</a></span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">⛓️</span> |
|
|
Etherscan API Key <span class="optional-badge">Optional</span> |
|
|
</label> |
|
|
<div class="input-with-action"> |
|
|
<input type="password" id="etherscan-key" class="form-input" placeholder="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" autocomplete="new-password"> |
|
|
<button class="toggle-visibility" type="button" data-target="etherscan-key"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg> |
|
|
</button> |
|
|
</div> |
|
|
<span class="form-hint">For blockchain data and transaction lookups</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">📈</span> |
|
|
CryptoCompare API Key <span class="optional-badge">Optional</span> |
|
|
</label> |
|
|
<div class="input-with-action"> |
|
|
<input type="password" id="cryptocompare-key" class="form-input" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" autocomplete="new-password"> |
|
|
<button class="toggle-visibility" type="button" data-target="cryptocompare-key"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg> |
|
|
</button> |
|
|
</div> |
|
|
<span class="form-hint">Alternative market data provider</span> |
|
|
</div> |
|
|
|
|
|
<div class="form-actions"> |
|
|
<button id="test-tokens-btn" type="button" class="btn-secondary"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg> |
|
|
Test Tokens |
|
|
</button> |
|
|
<button id="save-tokens-btn" type="button" class="btn-gradient"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline></svg> |
|
|
Save Tokens |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="section-telegram" class="settings-section"> |
|
|
<div class="section-card glass-panel"> |
|
|
<div class="section-header"> |
|
|
<div class="section-icon">📱</div> |
|
|
<div class="section-info"> |
|
|
<h2>Telegram Bot Configuration</h2> |
|
|
<p>Set up your Telegram bot for receiving alerts and signals</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<form class="settings-form" onsubmit="event.preventDefault();"> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">🤖</span> |
|
|
Bot Token |
|
|
</label> |
|
|
<div class="input-with-action"> |
|
|
<input type="password" id="telegram-bot-token" class="form-input" placeholder="1234567890:ABCdefGHIjklMNOpqrsTUVwxyz" autocomplete="new-password"> |
|
|
<button class="toggle-visibility" type="button" data-target="telegram-bot-token"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg> |
|
|
</button> |
|
|
</div> |
|
|
<span class="form-hint">Get your bot token from <a href="https://t.me/BotFather" target="_blank">@BotFather</a></span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">💬</span> |
|
|
Chat ID |
|
|
</label> |
|
|
<input type="text" id="telegram-chat-id" class="form-input" placeholder="-1001234567890 or your user ID"> |
|
|
<span class="form-hint">Your user ID or group chat ID. Use <a href="https://t.me/userinfobot" target="_blank">@userinfobot</a> to find your ID</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="settings-group"> |
|
|
<h3 class="settings-group-title">Message Settings</h3> |
|
|
|
|
|
<div class="toggle-group"> |
|
|
<div class="toggle-item"> |
|
|
<div class="toggle-info"> |
|
|
<span class="toggle-label">Enable Notifications</span> |
|
|
<span class="toggle-desc">Send alerts via Telegram</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="telegram-enabled" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="toggle-item"> |
|
|
<div class="toggle-info"> |
|
|
<span class="toggle-label">Silent Mode</span> |
|
|
<span class="toggle-desc">Send messages without notification sound</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="telegram-silent"> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="toggle-item"> |
|
|
<div class="toggle-info"> |
|
|
<span class="toggle-label">Include Charts</span> |
|
|
<span class="toggle-desc">Attach price charts to signal messages</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="telegram-charts" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-actions"> |
|
|
<button id="test-telegram-btn" type="button" class="btn-secondary"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.5 2L2 9.5l7 2.5L15 7l-4.5 7 9-12z"></path></svg> |
|
|
Send Test Message |
|
|
</button> |
|
|
<button id="save-telegram-btn" type="button" class="btn-gradient"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path></svg> |
|
|
Save Settings |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="section-signals" class="settings-section"> |
|
|
<div class="section-card glass-panel"> |
|
|
<div class="section-header"> |
|
|
<div class="section-icon">📊</div> |
|
|
<div class="section-info"> |
|
|
<h2>Signal Configuration</h2> |
|
|
<p>Configure which signals to receive and their thresholds</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-form"> |
|
|
|
|
|
<div class="settings-group"> |
|
|
<h3 class="settings-group-title">Signal Types to Receive</h3> |
|
|
|
|
|
<div class="signal-grid"> |
|
|
<div class="signal-card"> |
|
|
<div class="signal-header"> |
|
|
<span class="signal-icon bullish">📈</span> |
|
|
<span class="signal-name">Bullish Signals</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="signal-bullish" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="signal-card"> |
|
|
<div class="signal-header"> |
|
|
<span class="signal-icon bearish">📉</span> |
|
|
<span class="signal-name">Bearish Signals</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="signal-bearish" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="signal-card"> |
|
|
<div class="signal-header"> |
|
|
<span class="signal-icon whale">🐋</span> |
|
|
<span class="signal-name">Whale Alerts</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="signal-whale" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="signal-card"> |
|
|
<div class="signal-header"> |
|
|
<span class="signal-icon news">📰</span> |
|
|
<span class="signal-name">News Alerts</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="signal-news"> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="signal-card"> |
|
|
<div class="signal-header"> |
|
|
<span class="signal-icon sentiment">💬</span> |
|
|
<span class="signal-name">Sentiment Changes</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="signal-sentiment" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="signal-card"> |
|
|
<div class="signal-header"> |
|
|
<span class="signal-icon price">💰</span> |
|
|
<span class="signal-name">Price Alerts</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="signal-price" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="settings-group"> |
|
|
<h3 class="settings-group-title">Signal Thresholds</h3> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label">Minimum Confidence Level</label> |
|
|
<div class="range-with-value"> |
|
|
<input type="range" id="signal-confidence" class="range-input" min="50" max="95" value="70"> |
|
|
<span class="range-value" id="confidence-value">70%</span> |
|
|
</div> |
|
|
<span class="form-hint">Only send signals with confidence above this threshold</span> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label">Price Change Threshold (%)</label> |
|
|
<div class="range-with-value"> |
|
|
<input type="range" id="price-change-threshold" class="range-input" min="1" max="20" value="5"> |
|
|
<span class="range-value" id="price-threshold-value">5%</span> |
|
|
</div> |
|
|
<span class="form-hint">Trigger price alert when price changes by this amount</span> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label">Whale Transaction Minimum (USD)</label> |
|
|
<input type="number" id="whale-threshold" class="form-input" value="100000" min="10000" step="10000"> |
|
|
<span class="form-hint">Minimum transaction value to trigger whale alert</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="settings-group"> |
|
|
<h3 class="settings-group-title">Watched Coins</h3> |
|
|
<div class="form-group"> |
|
|
<label class="form-label">Coins to Monitor</label> |
|
|
<input type="text" id="watched-coins" class="form-input" placeholder="BTC, ETH, SOL, XRP, ADA" value="BTC, ETH, SOL"> |
|
|
<span class="form-hint">Comma-separated list of coin symbols to watch</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-actions"> |
|
|
<button id="save-signals-btn" class="btn-gradient"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path></svg> |
|
|
Save Signal Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="section-scheduling" class="settings-section"> |
|
|
<div class="section-card glass-panel"> |
|
|
<div class="section-header"> |
|
|
<div class="section-icon">⏱️</div> |
|
|
<div class="section-info"> |
|
|
<h2>Refresh Scheduling</h2> |
|
|
<p>Configure automatic data refresh intervals</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-form"> |
|
|
|
|
|
<div class="settings-group"> |
|
|
<h3 class="settings-group-title">Auto Refresh Settings</h3> |
|
|
|
|
|
<div class="toggle-group"> |
|
|
<div class="toggle-item"> |
|
|
<div class="toggle-info"> |
|
|
<span class="toggle-label">Enable Auto Refresh</span> |
|
|
<span class="toggle-desc">Automatically refresh data at configured intervals</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="auto-refresh-enabled" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="settings-group"> |
|
|
<h3 class="settings-group-title">Refresh Intervals</h3> |
|
|
|
|
|
<div class="interval-grid"> |
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">📊</span> |
|
|
Market Data |
|
|
</label> |
|
|
<select id="interval-market" class="form-select"> |
|
|
<option value="15">15 seconds</option> |
|
|
<option value="30" selected>30 seconds</option> |
|
|
<option value="60">1 minute</option> |
|
|
<option value="120">2 minutes</option> |
|
|
<option value="300">5 minutes</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">📰</span> |
|
|
News Feed |
|
|
</label> |
|
|
<select id="interval-news" class="form-select"> |
|
|
<option value="60">1 minute</option> |
|
|
<option value="120" selected>2 minutes</option> |
|
|
<option value="300">5 minutes</option> |
|
|
<option value="600">10 minutes</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">💬</span> |
|
|
Sentiment Analysis |
|
|
</label> |
|
|
<select id="interval-sentiment" class="form-select"> |
|
|
<option value="60">1 minute</option> |
|
|
<option value="120">2 minutes</option> |
|
|
<option value="300" selected>5 minutes</option> |
|
|
<option value="600">10 minutes</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">🐋</span> |
|
|
Whale Tracking |
|
|
</label> |
|
|
<select id="interval-whale" class="form-select"> |
|
|
<option value="30">30 seconds</option> |
|
|
<option value="60" selected>1 minute</option> |
|
|
<option value="120">2 minutes</option> |
|
|
<option value="300">5 minutes</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">⛓️</span> |
|
|
Blockchain Data |
|
|
</label> |
|
|
<select id="interval-blockchain" class="form-select"> |
|
|
<option value="60">1 minute</option> |
|
|
<option value="120">2 minutes</option> |
|
|
<option value="300" selected>5 minutes</option> |
|
|
<option value="600">10 minutes</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label"> |
|
|
<span class="label-icon">🤖</span> |
|
|
AI Models Health |
|
|
</label> |
|
|
<select id="interval-models" class="form-select"> |
|
|
<option value="300">5 minutes</option> |
|
|
<option value="600" selected>10 minutes</option> |
|
|
<option value="900">15 minutes</option> |
|
|
<option value="1800">30 minutes</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="settings-group"> |
|
|
<h3 class="settings-group-title">Quiet Hours</h3> |
|
|
|
|
|
<div class="toggle-group"> |
|
|
<div class="toggle-item"> |
|
|
<div class="toggle-info"> |
|
|
<span class="toggle-label">Enable Quiet Hours</span> |
|
|
<span class="toggle-desc">Pause notifications during specified hours</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="quiet-hours-enabled"> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="time-range" id="quiet-hours-config"> |
|
|
<div class="form-group"> |
|
|
<label class="form-label">Start Time</label> |
|
|
<input type="time" id="quiet-start" class="form-input" value="22:00"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label class="form-label">End Time</label> |
|
|
<input type="time" id="quiet-end" class="form-input" value="08:00"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-actions"> |
|
|
<button id="save-scheduling-btn" class="btn-gradient"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path></svg> |
|
|
Save Schedule Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="section-notifications" class="settings-section"> |
|
|
<div class="section-card glass-panel"> |
|
|
<div class="section-header"> |
|
|
<div class="section-icon">🔔</div> |
|
|
<div class="section-info"> |
|
|
<h2>Notification Preferences</h2> |
|
|
<p>Configure how you receive notifications</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-form"> |
|
|
<div class="settings-group"> |
|
|
<h3 class="settings-group-title">Notification Channels</h3> |
|
|
|
|
|
<div class="toggle-group"> |
|
|
<div class="toggle-item"> |
|
|
<div class="toggle-info"> |
|
|
<span class="toggle-label">Browser Notifications</span> |
|
|
<span class="toggle-desc">Show desktop notifications</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="notif-browser" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="toggle-item"> |
|
|
<div class="toggle-info"> |
|
|
<span class="toggle-label">Sound Effects</span> |
|
|
<span class="toggle-desc">Play sound on new notifications</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="notif-sound" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="toggle-item"> |
|
|
<div class="toggle-info"> |
|
|
<span class="toggle-label">In-App Toasts</span> |
|
|
<span class="toggle-desc">Show toast messages in the app</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="notif-toast" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-group"> |
|
|
<h3 class="settings-group-title">Notification Sound</h3> |
|
|
<div class="form-group"> |
|
|
<label class="form-label">Select Sound</label> |
|
|
<select id="notif-sound-type" class="form-select"> |
|
|
<option value="default">Default Chime</option> |
|
|
<option value="coin">Coin Drop</option> |
|
|
<option value="alert">Alert Beep</option> |
|
|
<option value="subtle">Subtle Ping</option> |
|
|
<option value="none">No Sound</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label">Volume</label> |
|
|
<div class="range-with-value"> |
|
|
<input type="range" id="notif-volume" class="range-input" min="0" max="100" value="50"> |
|
|
<span class="range-value" id="volume-value">50%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-actions"> |
|
|
<button id="test-notif-btn" class="btn-secondary"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path></svg> |
|
|
Test Notification |
|
|
</button> |
|
|
<button id="save-notif-btn" class="btn-gradient"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path></svg> |
|
|
Save Notification Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="section-appearance" class="settings-section"> |
|
|
<div class="section-card glass-panel"> |
|
|
<div class="section-header"> |
|
|
<div class="section-icon">🎨</div> |
|
|
<div class="section-info"> |
|
|
<h2>Appearance</h2> |
|
|
<p>Customize the look and feel</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-form"> |
|
|
<div class="settings-group"> |
|
|
<h3 class="settings-group-title">Theme</h3> |
|
|
|
|
|
<div class="theme-selector"> |
|
|
<label class="theme-option"> |
|
|
<input type="radio" name="theme" value="dark" checked> |
|
|
<div class="theme-preview dark-theme"> |
|
|
<div class="theme-icon">🌙</div> |
|
|
<span>Dark</span> |
|
|
</div> |
|
|
</label> |
|
|
<label class="theme-option"> |
|
|
<input type="radio" name="theme" value="light"> |
|
|
<div class="theme-preview light-theme"> |
|
|
<div class="theme-icon">☀️</div> |
|
|
<span>Light</span> |
|
|
</div> |
|
|
</label> |
|
|
<label class="theme-option"> |
|
|
<input type="radio" name="theme" value="system"> |
|
|
<div class="theme-preview system-theme"> |
|
|
<div class="theme-icon">💻</div> |
|
|
<span>System</span> |
|
|
</div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-group"> |
|
|
<h3 class="settings-group-title">Display Options</h3> |
|
|
|
|
|
<div class="toggle-group"> |
|
|
<div class="toggle-item"> |
|
|
<div class="toggle-info"> |
|
|
<span class="toggle-label">Compact Mode</span> |
|
|
<span class="toggle-desc">Reduce spacing for more content</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="compact-mode"> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="toggle-item"> |
|
|
<div class="toggle-info"> |
|
|
<span class="toggle-label">Show Animations</span> |
|
|
<span class="toggle-desc">Enable UI animations</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="show-animations" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="toggle-item"> |
|
|
<div class="toggle-info"> |
|
|
<span class="toggle-label">Show Background Effects</span> |
|
|
<span class="toggle-desc">Display gradient orb animations</span> |
|
|
</div> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="show-bg-effects" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-actions"> |
|
|
<button id="save-appearance-btn" class="btn-gradient"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path></svg> |
|
|
Save Appearance Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<div id="toast-container" aria-live="polite" aria-atomic="true"></div> |
|
|
|
|
|
|
|
|
<script type="module"> |
|
|
import { LayoutManager } from '/static/shared/js/core/layout-manager.js'; |
|
|
|
|
|
|
|
|
await LayoutManager.init('settings'); |
|
|
|
|
|
|
|
|
await import('./settings.js'); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
|
|
|
