Skip to content

Instantly share code, notes, and snippets.

@mikkipastel

mikkipastel/index.html

Created July 28, 2023 06:11
Show Gist options
  • Save mikkipastel/55a793610e1308e1ccfeb87514684a30 to your computer and use it in GitHub Desktop.
Save mikkipastel/55a793610e1308e1ccfeb87514684a30 to your computer and use it in GitHub Desktop.
Download ZIP
position sizing calculator front-end
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Position Sizing Calculator</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- OpenGraph/Social sharing -->
<meta name="description" content="Calculator for trade cryptocurrency future, formular from Crypto Teller" />
<meta name="og:description" content="Calculator for trade cryptocurrency future, formular from Crypto Teller" />
<meta property="og:image" content="https://cdn.glitch.global/d1fcae68-a5e4-40eb-aac9-5bfad9facbfe/icon-512-maskable.png?v=1689501092180" />
<meta property="og:title" content="Position Sizing Calculator" />
<meta name="twitter:card" content="summary" />
<link rel="icon" href="https://cdn.glitch.global/d1fcae68-a5e4-40eb-aac9-5bfad9facbfe/icon-180-maskable.png?v=1689501870404" />
<link rel="stylesheet" type="text/css" href="/style.css" />
<!-- PWA setup - update public/sw.js if you add your own assets like a new .css file -->
<link rel="manifest" href="/manifest.json" />
<script src="index.js" async defer></script>
<script src="calculate.js"></script>
</head>
<body>
<main>
<div class="wrapper">
<div class="content">
<img id="imgLogo" alt="logo" src="https://cdn.glitch.global/d1fcae68-a5e4-40eb-aac9-5bfad9facbfe/icon-128-maskable.png?v=1689501325168">
<h1 id="textHeader">Position Sizing Calculator</h1>
<div class="item">
<p class="textLabel">Coin: </p>
<input type="text" id="inputCoinMame" class="inputTextField" placeholder="Enter coin name" value="">
</div>
<hr class="divider">
<!-- Input & Calculate Loss per order -->
<div class="item">
<p class="textLabel">Start Fund: </p>
<input type="number" id="inputStartFund" class="inputTextField" placeholder="Enter start fund" value="" onchange="calculateLossPerOrder();">
</div>
<div class="item">
<p class="textLabel">Risk % per order: </p>
<input type="number" id="inputRiskPerOrder" class="inputTextField" placeholder="Enter risk % per order" value="" onchange="calculateLossPerOrder();">
</div>
<div class="item">
<p class="textLabel">Loss per order: </p>
<input id="resultLossPerOrder" class="resultTextField" disabled>
</div>
<hr class="divider">
<!-- Input for calculate All -->
<div class="item">
<div class="tooltip">
<p class="textLabel">Max Loss:</p>
<span class="tooltiptext">จำนวนเงินที่เสียได้ต่อ 1 order</span>
</div>
<input type="number" step="0.01" id="inputMaxLoss" class="inputTextField" placeholder="Enter max loss" value="" onchange="calculateAll();">
</div>
<div class="item">
<div class="tooltip">
<p class="textLabel">Leverage:</p>
<span class="tooltiptext">( Spot=1 )</span>
</div>
<input type="number" step="0.01" id="inputLeverage" class="inputTextField" placeholder="Enter leverage" value="" onchange="calculateAll();">
</div>
<div class="item">
<div class="tooltip">
<p class="textLabel">Entry price:</p>
<span class="tooltiptext">ราคาเข้าซื้อ</span>
</div>
<input type="number" step="0.01" id="inputEntryPrice" class="inputTextField" placeholder="Enter entry price" value="" onchange="calculateAll();">
</div>
<div class="item">
<div class="tooltip">
<p class="textLabel">Stop loss price:</p>
<span class="tooltiptext">ราคาที่ยอมแพ้</span>
</div>
<input type="number" step="0.01" id="inputStopLossPrice" class="inputTextField" placeholder="Enter stop loss price" value="" onchange="calculateAll();">
</div>
<hr class="divider">
<!-- Result All -->
<div class="item">
<p class="textLabel">Take profit (3x): </p>
<input id="resultTakeProfit3x" class="resultTextField" disabled>
</div>
<div class="item">
<p class="textLabel">Take profit (5x): </p>
<input id="resultTakeProfit5x" class="resultTextField" disabled>
</div>
<div class="item">
<p class="textLabel">Amount Buy: </p>
<input id="resultAmountBuy" class="resultTextField" disabled>
</div>
<div class="item">
<p class="textLabel">USD uses: </p>
<input id="resultUsdUses" class="resultTextField" disabled>
</div>
</div>
</div>
<footer class="footer">
<div class="tagline">
Formular from <a href="https://www.facebook.com/cryptoteller007/">Crypto Teller</a>
| <a href="https://docs.google.com/spreadsheets/d/1eUuFPSLvmFLdwrno9wp81MmslqiUw96P/edit#gid=117080312">Excel File</a>
| <a href="https://twitter.com/mikkipastel/status/1669684718114340864">About This</a><br />
© 2023 <a href="https://www.mikkipastel.com/">MikkiPastel</a>
</div>
</footer>
</main>
</body>
</html>
Raw
style.css
/******************************************************************************
START Page structure and element resets
******************************************************************************/
/* A set of default style */
:root {
/* Generic sizing for the page */
--wrapper-height: 75vh;
--avatar-max-width: 140px;
/* Fonts for different elements */
--font-family: sans-serif;
--font-family-header: sans-serif;
--font-family-list: monospace;
/* Colors you'll see cascade through the elements */
/* To set your own use custom-theme.css with `custom-theme` in settings.json `theme` property */
--color-bg: #D9BD6A; /* Used for the page body background */
--color-bg-alt: #ffffff; /* Used for social icons on hover */
--color-text-main: #000000; /* List text ann social icons on hover */
--color-primary: #ffffff; /* Headers and borders */
--color-forms: #ff00bc; /* Form borders and highlights */
--color-forms-focus: #ff9028; /* Form borders and highlights */
--color-buttons: #ffbfee; /* Button colors */
}
/* Basic page style resets */
* {
box-sizing: border-box;
font-size: 16px; /* Not setting this makes iOS zooooooom too much! */
}
[hidden] {
display: none !important;
}
/* Page structure */
body {
font-family: var(--font-family);
background-color: var(--color-bg);
text-align: center;
margin: 0;
}
.wrapper {
min-height: var(--wrapper-height);
place-items: center;
margin: 3rem 2rem 0;
}
.content {
display: flex;
flex-direction: column;
max-width: 550px;
margin: 0 auto;
}
/* header text */
#textHeader {
color: #862B0D;
}
#imgLogo {
width: 180px;
height: 180px;
}
/* show input row */
.content .item {
display: flex;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
}
.content .textLabel {
color: #000000;
font-weight: 400;
}
.inputTextField {
width: 200px;
margin-top: 0rem;
display: block;
border-radius: 8px;
padding-left: 16px;
padding-right: 16px;
}
.divider {
width: 100%;
height: 4px;
background: #FAF3F0;
}
.resultTextField {
width: 200px;
margin-top: 0rem;
border: 2px solid #321E1E;
border-radius: 8px;
padding-left: 16px;
padding-right: 16px;
/* new */
background-color: #F4F2DE;
color: #000000;
}
/* hover */
.tooltip {
position: relative;
display: inline-block;
text-align: center;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 150px;
background-color: #192733;
color: #FFFFFF;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 2;
margin-left: -60px;
padding: 8px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* The footer and our remix on glitch button */
.footer {
display: flex;
justify-content: space-between;
margin: 2rem auto 0;
padding: 1rem 0 0.75rem 0;
width: 100%;
flex-wrap: wrap;
border-top: 4px solid #FFFFFF;
}
.footer a:hover,
.footer a:focus {
background: var(--color-primary);
}
.footer .tagline {
padding: 0.25rem 1rem 1rem;
font-size: clamp(1rem, 0.925rem + 0.3333vw, 1.1rem);
text-align: center;
white-space: nowrap;
flex-grow: 8;
}
.btn--remix {
font-family: Menlo, Consolas, Monaco, "Lucida Console", monospace;
padding: 0.8rem 1.75rem;
/*font sizes scaled by viewport https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/*/
font-size: clamp(0.9rem, 0.825rem + 0.3333vw, 1rem);
line-height: 1rem;
font-weight: 500;
height: 3rem;
align-items: center;
cursor: pointer;
background: #ffffff;
border: 2px solid #000000;
box-sizing: border-box;
border-radius: 4px;
text-decoration: none;
color: #000000;
white-space: nowrap;
margin: 6px 1rem 1.5rem 1rem;
flex-grow: 1;
}
.btn--remix img {
position: relative;
top: 1px;
margin-right: 0.25rem;
}
.btn--remix:hover,
.btn--remix:focus {
background-color: #d0fff1;
}
/* Typography */
p {
margin: 0 0 1rem 0;
line-height: 1.5 !important;
font-size: clamp(1rem, 0.25rem + 2.5vw, 1.5rem);
font-weight: 200;
}
h1,
h2,
h3,
h4,
h5 {
margin: 2rem 0 0.8rem;
font-family: var(--font-family-header);
font-weight: bold;
line-height: 1.1;
color: var(--color-text-main);
}
h1 {
margin-top: 1rem;
margin-bottom: 1.25rem;
font-size: clamp(3rem, -0.875rem + 8.333vw, 4rem);
display: inline-flex;
color: var(--color-primary);
justify-content: center;
}
ul > li,
ol > li {
margin-bottom: 0.75rem;
line-height: 1.5;
font-size: clamp(1rem, 0.625rem + 1.6667vw, 1.5rem);
}
ul {
padding: 0 0 0 18px;
margin: 0;
}
/* Link styles */
.wrapper a:not(.btn--remix):link,
.wrapper a:not(.btn--remix):visited {
text-decoration: none;
border-bottom: 4px solid var(--color-primary);
color: var(--color-text-main);
transition: background 0.2s linear;
}
.wrapper a:hover,
.wrapper a:active,
.wrapper a:focus {
background: var(--color-primary);
}
/******************************************************************************
END Page structure and element resets
******************************************************************************/
/******************************************************************************
START Hello PWA styles
You can create your own CSS file in public/styles.css
******************************************************************************/
textarea,
input,
button {
margin-top: 0.5rem;
display: block;
height: 40px;
width: 100%;
border: 2px solid var(--color-forms);
}
input:focus {
outline: none;
border: 2px solid var(--color-forms-focus);
}
button {
background: var(--color-buttons);
color: #000000;
text-transform: uppercase;
font-weight: bold;
}
button:focus {
outline: none;
color: #ffffff;
border: 2px solid var(--color-forms-focus);
}
button:hover {
background: var(--color-forms);
color: #ffffff;
cursor: pointer;
}
textarea {
height: 125px;
}
h1,
h2,
p {
display: block;
text-align: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment