Created
April 26, 2024 04:34
-
-
Save sangelxyz/0bad19fe8bae53a3526310f78e0aa385 to your computer and use it in GitHub Desktop.
zed error html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<meta http-equiv="Access-Control-Allow-Origin" content="*" /> | |
<!-- Disable zooming: --> | |
<meta | |
name="viewport" | |
content="width=device-width, initial-scale=1.0, user-scalable=no" | |
/> | |
<head> | |
<!-- change this to your project name --> | |
<title></title> | |
<!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization --> | |
<link data-trunk rel="rust" data-wasm-opt="2" /> | |
<!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option --> | |
<base data-trunk-public-url /> | |
<link data-trunk rel="icon" href="assets/favicon.ico" /> | |
<link data-trunk rel="copy-file" href="assets/manifest.json" /> | |
<link data-trunk rel="copy-file" href="assets/icon-1024.png" /> | |
<link data-trunk rel="copy-file" href="assets/icon-256.png" /> | |
<link data-trunk rel="copy-file" href="assets/icon_ios_touch_192.png" /> | |
<link data-trunk rel="copy-file" href="assets/maskable_icon_x512.png" /> | |
<link rel="manifest" href="manifest.json" /> | |
<link rel="apple-touch-icon" href="icon_ios_touch_192.png" /> | |
<meta | |
name="theme-color" | |
media="(prefers-color-scheme: light)" | |
content="white" | |
/> | |
<meta | |
name="theme-color" | |
media="(prefers-color-scheme: dark)" | |
content="#404040" | |
/> | |
<style> | |
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap") | |
html { | |
/* Remove touch delay: */ | |
/*touch-action: manipulation;*/ | |
touch-action: cross-slide-y; | |
} | |
body { | |
/* Light mode background color for what is not covered by the egui canvas, | |
or where the egui canvas is translucent. */ | |
background: #1f2937; | |
min-width: 650px; | |
max-width: 95%; | |
min-height: 2000px; | |
height: 2000px; | |
font-size: 0.8rem; | |
} | |
a { | |
color: white; | |
} | |
a:hover { | |
color: white; | |
} | |
a:active { | |
color: white; | |
} | |
/* Allow canvas to fill entire web page: */ | |
html, | |
body { | |
overflow: visible; | |
margin: 0 !important; | |
padding: 0 !important; | |
/*height: 100%;*/ | |
width: 100%; | |
} | |
/* Position canvas in center-top: */ | |
canvas { | |
margin-right: auto; | |
margin-left: auto; | |
display: block; | |
position: absolute; | |
top: 0%; | |
left: 50%; | |
transform: translate(-50%, 0%); | |
} | |
.centered { | |
margin-right: auto; | |
margin-left: auto; | |
display: block; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
color: #f0f0f0; | |
font-size: 24px; | |
font-family: Ubuntu-Light, Helvetica, sans-serif; | |
text-align: center; | |
} | |
/* ---------------------------------------------- */ | |
/* Loading animation from https://loading.io/css/ */ | |
.lds-dual-ring { | |
display: inline-block; | |
width: 24px; | |
height: 24px; | |
} | |
.lds-dual-ring:after { | |
content: " "; | |
display: block; | |
width: 24px; | |
height: 24px; | |
margin: 0px; | |
border-radius: 50%; | |
border: 3px solid #fff; | |
border-color: #fff transparent #fff transparent; | |
animation: lds-dual-ring 1.2s linear infinite; | |
} | |
@keyframes lds-dual-ring { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
#header { | |
position: relative; | |
top: 0px; | |
width: 100%; | |
height: 100px; | |
z-index: 10; | |
color: white; | |
margin-top: 20px; | |
margin-left: 20px; | |
font-family: Arial, Helvetica, sans-serif; | |
} | |
#header div div:last-child { | |
height: auto; | |
margin-left: 20px; | |
align-content: center; | |
margin-top: 10px; | |
padding: 5px; | |
border-bottom-color: #4b5563; | |
border-bottom-style: solid; | |
border-bottom-width: 2px; | |
border-top-color: #4b5563; | |
border-top-style: solid; | |
border-top-width: 2px; | |
border-radius: 6px; | |
letter-spacing: 0.03rem; | |
overflow-y: scroll; | |
height: 80px; | |
} | |
.sub-header { | |
margin-top: 10px; | |
font-weight: 400; | |
letter-spacing: 0.09rem; | |
} | |
#header .title { | |
font-weight: 600; | |
font-size: 1.5rem; | |
} | |
#footer { | |
position: absolute; | |
top: 1950px; | |
left: 60px; | |
/* display: flex; | |
justify-content: left; */ | |
align-items: center; | |
text-align: left; | |
width: 100%; | |
height: 25px; | |
z-index: 100; | |
color: white; | |
/* margin-top: 20px; | |
margin-left: 20px; */ | |
font-family: Arial, Helvetica, sans-serif; | |
font-weight: 600; | |
font-size: 0.7rem; | |
} | |
#footer div { | |
width: auto; | |
padding-right: 35px; | |
} | |
@media (max-height: 571px) { | |
#footer { | |
display: none; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div id="header"> | |
<div class="title">Crypto Price Predictor</div> | |
<div> | |
<div class="sub-header"> | |
This site is a bit of an experiment to use AI or in this | |
case more correctly machine learning to try and predict the | |
up or down direction of major cryptocurrencies over the next | |
3 hours. | |
</div> | |
<div> | |
Built in | |
<a | |
href="https://www.rust-lang.org/" | |
target="_blank" | |
rel="noopener noreferrer" | |
>RUST</a | |
> | |
for pure speed, and pulls live pricing for the top 50 coins | |
from the | |
<a | |
href="https://www.gate.io/" | |
target="_blank" | |
rel="noopener noreferrer" | |
>Gate.io</a | |
> | |
API. Price and volume data is stored in a high performance | |
<a | |
href="https://pola.rs/" | |
target="_blank" | |
rel="noopener noreferrer" | |
>Pola.rs</a | |
> | |
dataframe then used as an input for our model | |
<a | |
href="https://xgboost.ai/" | |
target="_blank" | |
rel="noopener noreferrer" | |
>XGBoost</a | |
> | |
which excel at pattern recognition. The front end uses | |
<a | |
href="https://www.egui.rs/" | |
target="_blank" | |
rel="noopener noreferrer" | |
>eGUI</a | |
> | |
again for simplicity and speed. We use Open, High, Low, | |
Close & Volume our AI model goes through thousands of | |
historical candles and data points to look for any pattern | |
similarity in predicting the next 3 hourly candles. | |
<!-- Once the | |
next hour has closed we lock in that position and record our | |
accuracy over the last week, we only record positions with a | |
greater than 70% prediction. The next 2 hourly candles are | |
continuously reviewed until it is their turn to be locked | |
in. The time is set to your local time for ease of use. Our | |
goal is to try and continue to improve the model and get | |
close to a 70% accuracy level or higher. The nature of | |
crypto however is fickle and looking more and more like a | |
coin toss without factoring in more external influences such | |
as social media hype and general news. --> | |
</div> | |
</div> | |
</div> | |
<!-- I need a diffrent way to enable scroll --> | |
<!-- <div | |
style=" | |
z-index: 200; | |
width: 100%; | |
height: 2000px; | |
position: absolute; | |
" | |
></div> --> | |
<!-- The WASM code will resize the canvas dynamically --> | |
<!-- the id is hardcoded in main.rs . so, make sure both match. --> | |
<canvas id="the_canvas_id" height="2000"></canvas> | |
<!-- <div id="footer"> | |
<div> | |
<p>Harness the latest in predictive analytics with our advanced cryptocurrency forecasting platform. <br /> | |
Powered by Rust for robust performance, EGUI for seamless user experience, <br /> | |
and XGBoost for state-of-the-art prediction modeling, our platform delivers real-time pricing updates and accurate forecasts for over 50 assets.</p></div> | |
</div> --> | |
<div | |
id="tradingview_float" | |
class="tradingview-widget-container" | |
style=" | |
height: 90%; | |
width: 90%; | |
transform: translate(-50, -50); | |
position: absolute; | |
right: 0; | |
top: 0; | |
z-index: 200; | |
" | |
> | |
<div | |
id="basic-area-chart-demo" | |
style="height: calc(100% - 32px)" | |
></div> | |
<script | |
type="text/javascript" | |
src="https://s3.tradingview.com/tv.js" | |
></script> | |
<script type="text/javascript" id="trading"></script> | |
</div> | |
<script> | |
// disable the canvas control of the mouse wheel | |
window.addEventListener( | |
"wheel", | |
function (event) { | |
event.stopImmediatePropagation(); | |
}, | |
true, | |
); | |
// let canvas = document.getElementById("the_canvas_id"); | |
// canvas.addEventListener("wheel", function (e) { | |
// if (e.target === canvas) { | |
// e.stopImmediatePropagation(); | |
// e.preventDefault(); // Prevent canvas from handling wheel event | |
// } | |
// }); | |
// canvas.addEventListener("mousewheel", function (e) { | |
// if (e.target === canvas) { | |
// e.stopImmediatePropagation(); | |
// e.preventDefault(); // Prevent canvas from handling wheel event | |
// } | |
// }); | |
// open tradingview chart. | |
var symbol_trading = "BTC"; | |
let timeoutId; | |
// let mouseX = 100; | |
// let mouseY = 0; | |
let tradeEl = document.getElementById("tradingview_float"); | |
tradeEl.addEventListener("mouseenter", () => { | |
clearTimeout(timeoutId); | |
}); | |
tradeEl.addEventListener("mouseleave", () => { | |
leaveEvent(tradeEl, 500); | |
}); | |
function leaveEvent(tradeEl, ms = 5000) { | |
timeoutId = setTimeout( | |
(el) => { | |
el.style.display = "none"; | |
}, | |
ms, | |
tradeEl, | |
); | |
} | |
function hoveredOver() { | |
// over ride mouse pointer egui sets | |
} | |
function openChart(symbol, x, y) { | |
let upper_symbol = symbol.toUpperCase(); | |
let tradingview = ` | |
new TradingView.widget({ | |
"container_id": "basic-area-chart-demo", | |
"width": "100%", /* Use 100% width to inherit parent's width */ | |
"height": "100%", | |
"autosize": true, | |
"symbol": "GATEIO:${upper_symbol}USDT", | |
"interval": "D", | |
"timezone": "exchange", | |
"theme": "light", | |
"style": "3", | |
"hide_top_toolbar": true, | |
"save_image": false, | |
"locale": "en" | |
}); | |
`; | |
// clear previous timeout. | |
clearTimeout(timeoutId); | |
// Cancel the scheduled execution (comment out this line to let the function execute) | |
const target = "trading"; | |
const el = document.getElementById(target); | |
el.remove(); | |
let script = document.createElement("script"); | |
const inlineCode = document.createTextNode(tradingview); | |
script.appendChild(inlineCode); | |
script.setAttribute("id", target); | |
document.body.appendChild(script); | |
let tradeEl = document.getElementById("tradingview_float"); | |
if (tradeEl) { | |
// tradeEl.style.top = y - 150 + "px"; | |
// if (x > 900) { | |
// tradeEl.style.left = x - 500 + "px"; | |
// } else { | |
// tradeEl.style.left = x + 50 + "px"; | |
// } | |
tradeEl.style.display = "block"; | |
leaveEvent(tradeEl); | |
} | |
} | |
</script> | |
</body> | |
</html> | |
<!-- Powered by egui: https://github.com/emilk/egui/ --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment