mirror of
https://github.com/Gerald-Ha/HodlEye-Crypto-Price-Tracker.git
synced 2025-06-25 17:16:27 +00:00
Gerald Hasani
428408b659
"Adding Note Option in Portfolio Page",
"Fixing Editing Option in Trade Summary"
320 lines
10 KiB
HTML
320 lines
10 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.5.1</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>
|
|
<h2>Buy me a Coffee</h2>
|
|
<p><strong>Send me:</strong> USDT / Ethereum</p>
|
|
<p>
|
|
<strong>Chain:</strong>
|
|
<span
|
|
style="text-decoration: underline; cursor: pointer"
|
|
onclick="copyToClipboard('0x26c2E3F6C854Af006520ec2ce433982866bB7632')"
|
|
>
|
|
ETH
|
|
</span>
|
|
/
|
|
<span
|
|
style="text-decoration: underline; cursor: pointer"
|
|
onclick="copyToClipboard('0x26c2E3F6C854Af006520ec2ce433982866bB7632')"
|
|
>
|
|
BSC
|
|
</span>
|
|
</p>
|
|
<p>
|
|
<span
|
|
style="text-decoration: underline; cursor: pointer"
|
|
onclick="copyToClipboard('0x26c2E3F6C854Af006520ec2ce433982866bB7632')"
|
|
>
|
|
0x26c2E3F6C854Af006520ec2ce433982866bB7632
|
|
</span>
|
|
</p>
|
|
<p>(When clicked, the address is copied to the clipboard.)</p>
|
|
</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="Suche nach Artikeln..." />
|
|
<div id="news-feed">Lade 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 auf <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>
|