mirror of
https://github.com/Gerald-Ha/HodlEye-Crypto-Price-Tracker.git
synced 2025-06-25 09:11:45 +00:00
Gerald Hasani
f03b405691
"Revamped Alarm Modal with grouped alarms per coin and cleaner layout",
"Improved alignment and responsiveness of alarm input fields",
"Compact alarm boxes with hover effects and subtle delete buttons",
"Alarm modal now retains focus and resets fields after adding an alarm",
"Enter key submits alarm from any input field",
"Prevents duplicate alarms for same coin/price",
"Alarm titles now displayed with center-aligned divider lines",
"Alarm logic improved: server-side checks even without browser",
"Recurring alarms now persist and trigger correctly",
"Alarms are sorted and grouped by symbol and price",
"Last price check is stored per alarm to avoid threshold skips",
"API improved: endpoints usable for external tools (e.g., Windows app)",
"Better error handling and logging for API actions",
"Windows App UI redesigned: modern English layout, centered elements",
"Tray icon with context menu (Open/Exit) and minimize/close behavior",
"All texts and notifications are now in English",
"Auto-reconnect and connection recovery implemented",
"Notification appears if disconnected for more than 2 minutes",
"Resolved issue where HodlEye_Notify could not receive alarms from the 'HodlEye-Crypto-Price-Tracker' Docker container when no browser session was active"
337 lines
11 KiB
HTML
337 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>HodlEye Crypto Price Tracker</title>
|
|
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
<link rel="stylesheet" href="css/responsive.css" />
|
|
<link rel="icon" type="image/png" href="images/favicon.png" />
|
|
</head>
|
|
<body class="dark">
|
|
|
|
<div class="header">
|
|
<h1>HodlEye Crypto Price Tracker</h1>
|
|
<div class="button-grid-container">
|
|
<div class="grid-left">
|
|
<button onclick="openCryptoNews()">Crypto News</button>
|
|
<button onclick="openEconomicCalendar()">Economic Calendar</button>
|
|
</div>
|
|
<div class="grid-middle">
|
|
<button onclick="openAddCryptoModal()">Add Crypto</button>
|
|
<button onclick="toggleEditMode()" id="editButton">Edit List</button>
|
|
<button class="alarm-btn" onclick="openAlarmModal()">Alarms</button>
|
|
<button class="portfolio-btn" onclick="window.location.href='portfolio.html'">Portfolio</button>
|
|
|
|
</div>
|
|
|
|
<div class="grid-right">
|
|
<button class="options-btn" onclick="openOptionsModal()">
|
|
Options
|
|
</button>
|
|
<button onclick="logout()">Logout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-container">
|
|
<div class="left-column">
|
|
<div class="grid-container" id="cryptoGrid"></div>
|
|
</div>
|
|
|
|
<div class="right-column">
|
|
<div class="notify-area">
|
|
<div class="notify-heading">
|
|
<span>Notify</span>
|
|
<button onclick="clearNotifications()">Clear List</button>
|
|
</div>
|
|
<ul class="notify-list" id="notifyList"></ul>
|
|
</div>
|
|
|
|
<div class="buttons-and-version">
|
|
<button class="coffee-btn" onclick="openBuyMeModal()">
|
|
Buy me a Coffee
|
|
<img src="images/coffee.svg" alt="Coffee" class="coffee-icon" />
|
|
</button>
|
|
|
|
<button
|
|
class="my-button"
|
|
onclick="window.open('https://github.com/Gerald-Ha/HodlEye-Crypto-Price-Tracker', '_blank')"
|
|
>
|
|
Github
|
|
<img
|
|
src="images/github-mark.svg"
|
|
alt="Git Logo"
|
|
class="coffee-icon"
|
|
/>
|
|
</button>
|
|
|
|
<div class="version-info">
|
|
<span id="currentVersion">Version 1.6.0</span>
|
|
<span
|
|
id="updateAvailable"
|
|
style="display: none; color: red; cursor: pointer"
|
|
>
|
|
Update Available
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="alarmModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeAlarmModal()">×</span>
|
|
<h2>Price Alarms</h2>
|
|
<div class="alarm-list-container" id="alarmListContainer"></div>
|
|
<div class="alarm-row">
|
|
<div class="alarm-col">
|
|
<label for="alarmSymbol">Symbol:</label>
|
|
<select id="alarmSymbol"></select>
|
|
</div>
|
|
<div class="alarm-col">
|
|
<label for="alarmPrice">Alarm Price (USDT):</label>
|
|
<input type="number" id="alarmPrice" placeholder="Price" />
|
|
</div>
|
|
</div>
|
|
<div class="alarm-row">
|
|
<div class="alarm-col">
|
|
<label for="alarmFrequency">Frequency:</label>
|
|
<select id="alarmFrequency">
|
|
<option value="Once">Once</option>
|
|
<option value="Recurring">Recurring</option>
|
|
</select>
|
|
</div>
|
|
<div class="alarm-col">
|
|
<label for="alarmDirection">Direction:</label>
|
|
<select id="alarmDirection">
|
|
<option value="Rising">Rising</option>
|
|
<option value="Falling">Falling</option>
|
|
<option value="Both">Both</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<button onclick="addAlarm()">Add Alarm</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="optionsModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeOptionsModal()">×</span>
|
|
<h2>Options</h2>
|
|
|
|
<label for="soundSelect">Alarm Sound:</label>
|
|
<select id="soundSelect">
|
|
<option value="ping.mp3">ping.mp3</option>
|
|
<option value="cashing.mp3">cashing.mp3</option>
|
|
</select>
|
|
<br /><br />
|
|
|
|
<input type="checkbox" id="darkModeToggle" />
|
|
<label for="darkModeToggle">Enable Dark Mode</label>
|
|
<br /><br />
|
|
|
|
<input type="checkbox" id="desktopNotifyToggle" />
|
|
<label for="desktopNotifyToggle">Enable Desktop Notifications</label>
|
|
<br /><br />
|
|
|
|
<button onclick="openApiModal()">ADD/Edit OKX API</button>
|
|
<br /><br />
|
|
|
|
<button onclick="saveOptions()">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="apiModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeApiModal()">×</span>
|
|
<h2>OKX API Settings</h2>
|
|
<p>
|
|
Enter your OKX API data here (optional). Primary is Binance. If
|
|
Binance fails, the site tries OKX (or if you force OKX).
|
|
</p>
|
|
|
|
<label for="okxApiKey">OKX API-Key:</label><br />
|
|
<input type="text" id="okxApiKey" placeholder="e.g. c42166aa-..." />
|
|
<br />
|
|
|
|
<label for="okxSecretKey">OKX Secret-Key:</label><br />
|
|
<input type="text" id="okxSecretKey" placeholder="e.g. ACD0B07F..." />
|
|
<br />
|
|
|
|
<label for="okxPassphrase">OKX Passphrase (if needed):</label><br />
|
|
<input type="text" id="okxPassphrase" placeholder="(optional)" />
|
|
<br /><br />
|
|
|
|
<button onclick="saveApiSettings()">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="addCryptoModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeAddCryptoModal()">×</span>
|
|
<h2>Add a New Cryptocurrency</h2>
|
|
<label for="newCryptoSymbol">Symbol (e.g. ETH):</label>
|
|
<input
|
|
type="text"
|
|
id="newCryptoSymbol"
|
|
placeholder="BTC, ETH, ADA..."
|
|
/><br />
|
|
<br /><br />
|
|
<button onclick="addNewCrypto()">Add</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="apiSelectModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeApiSelectModal()">×</span>
|
|
<h2>API Selection for <span id="apiSelectSymbol"></span></h2>
|
|
<label for="apiSelectDropdown">Please choose:</label>
|
|
<select id="apiSelectDropdown">
|
|
<option value="auto">Auto (Binance -> OKX fallback)</option>
|
|
<option value="binance">Force Binance</option>
|
|
<option value="okx">Force OKX</option>
|
|
</select>
|
|
<br /><br />
|
|
<button onclick="saveApiSelection()">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="buyMeModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeBuyMeModal()">×</span>
|
|
|
|
<div class="coffee-modal-header">
|
|
<div class="coffee-icon-large">☕</div>
|
|
<h2>Buy me a Coffee</h2>
|
|
<p class="coffee-subtitle">Support the development of HodlEye</p>
|
|
</div>
|
|
|
|
<div class="coffee-content">
|
|
<div class="payment-methods">
|
|
<div class="payment-method">
|
|
<div class="payment-icon">💎</div>
|
|
<h3>USDT / Ethereum</h3>
|
|
<p class="chain-selector">
|
|
<span class="chain-option active" onclick="selectChain('ETH')">ETH</span>
|
|
<span class="chain-option" onclick="selectChain('BSC')">BSC</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wallet-address-section">
|
|
<div class="qr-code-placeholder">
|
|
<div class="qr-icon">📱</div>
|
|
<p>QR Code</p>
|
|
</div>
|
|
|
|
<div class="address-container">
|
|
<label>Wallet Address:</label>
|
|
<div class="address-box" onclick="copyToClipboard('0x26c2E3F6C854Af006520ec2ce433982866bB7632')">
|
|
<span id="walletAddress">0x26c2E3F6C854Af006520ec2ce433982866bB7632</span>
|
|
<span class="copy-icon">📋</span>
|
|
</div>
|
|
<p class="copy-hint">Click to copy address</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="coffee-footer">
|
|
<p class="thank-you">Thank you for your support! 🙏</p>
|
|
<div class="coffee-benefits">
|
|
<span>☕</span>
|
|
<span>🚀</span>
|
|
<span>💡</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="alarmOverlay" class="alert-overlay">
|
|
<div class="alert-box">
|
|
<div id="alarmMessage"></div>
|
|
<button onclick="closeAlarmPopup()">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="errorOverlay" class="error-overlay">
|
|
<div class="error-box">
|
|
<p id="errorMessage"></p>
|
|
<button onclick="closeErrorPopup()">Ok</button>
|
|
</div>
|
|
</div>
|
|
|
|
<audio id="alarmSound">
|
|
<source src="sound/ping.mp3" type="audio/mpeg" />
|
|
</audio>
|
|
|
|
<div id="cryptoNewsModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeCryptoNewsModal()">×</span>
|
|
<h2>Crypto News</h2>
|
|
|
|
<input type="text" id="search" placeholder="Search for articles..." />
|
|
<div id="news-feed">Loading news...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="economicCalendarModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeEconomicCalendarModal()"
|
|
>×</span
|
|
>
|
|
<h2>Economic Calendar</h2>
|
|
<div class="iframe-container">
|
|
<div class="iframe-wrapper">
|
|
<iframe
|
|
src="https://sslecal2.investing.com?columns=exc_flags,exc_currency,exc_importance,exc_actual,exc_forecast,exc_previous&features=datepicker,timezone&countries=25,32,6,37,72,22,17,39,14,10,35,43,56,36,110,11,26,12,4,5&calType=week&timeZone=8&lang=1"
|
|
allowtransparency="true"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<div class="poweredBy">
|
|
<span
|
|
>Real Time Economic Calendar provided by
|
|
<a
|
|
href="https://www.investing.com/"
|
|
rel="nofollow"
|
|
target="_blank"
|
|
class="underline_link"
|
|
>Investing.com</a
|
|
>.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="updateModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeUpdateModal()">×</span>
|
|
<h2 id="updateTitle">Update to <span id="updateVersion"></span></h2>
|
|
<p id="updateChanges"></p>
|
|
|
|
<button onclick="performUpdate()">Update</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tradingViewModal" class="modal">
|
|
<div class="modal-content" id="tradingViewModalContent" style="height:700px; width:100%;">
|
|
<!--
|
|
Tradingview Place
|
|
-->
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/magic.js"></script>
|
|
<script src="js/news.js"></script>
|
|
<script src="js/update.js"></script>
|
|
<script src="js/tradingview.js"></script>
|
|
<script src="js/script.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|