-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest.html
More file actions
155 lines (143 loc) · 12.3 KB
/
test.html
File metadata and controls
155 lines (143 loc) · 12.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<title>UpOrDown – Random Trading Game Simulator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
<meta name="description" content="Test your luck and money management with UpOrDown, a simple trading game where every result is random. Click Up or Down, manage your wagers, and see if chance alone can make you profitable.">
<meta name="author" content="Michael Schwartz">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="UpOrDown – Random Trading Game Simulator">
<meta name="theme-color" content="#13171f">
<meta name="apple-mobile-web-app-title" content="UpOrDown – Random Trading Game Simulator">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="./index.html">
<meta name="msapplication-navbutton-color" content="#13171f">
<meta property="og:url" content="https://michaelsboost.com/UpOrDown" />
<meta property="og:type" content="website" />
<meta property="og:title" content="UpOrDown – Random Trading Game Simulator" />
<meta property="og:description" content="Test your luck and money management with UpOrDown, a simple trading game where every result is random. Click Up or Down, manage your wagers, and see if chance alone can make you profitable." />
<link rel="shortcut icon" type="image/x-icon" href="imgs/logo.svg">
<link rel="icon" type="image/svg+xml" href="imgs/logo.svg" />
<link rel="apple-touch-icon" href="imgs/logo.svg">
<link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/picocss/2.0.6/pico.min.css" rel="stylesheet">
<link rel="stylesheet" href="src/bundle.css">
</head>
<body>
<div class="min-h-screen max-w-7xl mx-auto p-4 flex flex-col gap-6">
<!-- Header with Performance Button -->
<div class="flex flex-row justify-between items-center">
<a class="no-underline" href="https://github.com/michaelsboost/UpOrDown/" target="_blank">
<h1 class="text-3xl font-bold flex items-center gap-2">
<svg class="h-12" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 648.93951 635.74731" fill="currentColor">
<g transform="translate(-187.53024,-194.12634)">
<rect width="648.93951" height="635.74731" x="187.53024" y="194.12634" ry="144.89166"></rect>
<g class="inverted-paths" transform="translate(-6.3508763,14.35495)">
<path d="m 608.03584,711.35349 c -2.0546,-0.4831 -5.33374,-1.89924 -7.28699,-3.14698 -2.46084,-1.57199 -19.12372,-23.54028 -54.26436,-71.54199 -66.80397,-91.25342 -60.49995,-82.04534 -61.01152,-89.11768 -0.2346,-3.24335 0.0992,-7.49 0.74176,-9.437 1.49753,-4.53757 7.8598,-10.29002 12.75007,-11.52798 2.09367,-0.53001 20.45667,-1.17602 40.80667,-1.43557 39.51678,-0.50401 40.88223,-0.67726 44.23598,-5.61252 1.64992,-2.42797 1.79636,-9.45201 2.26402,-108.59587 l 0.5,-106 2.81095,-5.72425 c 6.27171,-12.77178 19.42469,-18.41917 33.30123,-14.29828 6.35544,1.88736 12.15314,6.86348 15.91967,13.66373 l 2.96815,5.3588 0.74639,105.5 c 0.81242,114.83263 0.53064,109.84181 6.4197,113.70105 2.48303,1.62719 6.42523,1.85114 41.28952,2.34554 21.19941,0.30062 39.44439,0.92966 40.54439,1.39788 9.6947,4.12653 14.91545,15.0722 11.48836,24.08615 -1.02554,2.69738 -108.15564,148.65536 -112.82867,153.72192 -4.9688,5.38724 -14.36983,8.31497 -21.39532,6.66305 z"></path>
<path d="m 416.02622,283.93661 c -2.0546,0.4831 -5.33374,1.89924 -7.28699,3.14698 -2.46084,1.57199 -19.12372,23.54028 -54.26436,71.54199 -66.80397,91.25342 -60.49995,82.04534 -61.01152,89.11768 -0.2346,3.24335 0.0992,7.49 0.74176,9.437 1.49753,4.53757 7.8598,10.29002 12.75007,11.52798 2.09367,0.53001 20.45667,1.17602 40.80667,1.43557 39.51678,0.50401 40.88223,0.67726 44.23598,5.61252 1.64992,2.42797 1.79636,9.45201 2.26402,108.59587 l 0.5,106 2.81095,5.72425 c 6.27171,12.77178 19.42469,18.41917 33.30123,14.29828 6.35544,-1.88736 12.15314,-6.86348 15.91967,-13.66373 l 2.96815,-5.3588 0.74639,-105.5 c 0.81242,-114.83263 0.53064,-109.84181 6.4197,-113.70105 2.48303,-1.62719 6.42523,-1.85114 41.28952,-2.34554 21.19941,-0.30062 39.44439,-0.92966 40.54439,-1.39788 9.6947,-4.12653 14.91545,-15.0722 11.48836,-24.08615 -1.02554,-2.69738 -108.15564,-148.65536 -112.82867,-153.72192 -4.9688,-5.38724 -14.36983,-8.31497 -21.39532,-6.66305 z"></path>
</g>
</g>
</svg>
<span class="arvo-bold gradient-text">UpOrDown</span>
</h1>
<p class="text-sm text-slate-400 mt-1">Start with $1,000. Click Up or Down. Results are random.</p>
</a>
<!-- Performance Button -->
<button id="performance" class="bg-transparent border-0 shadow-none">
<svg class="w-12 h-12 trading-card transition hover:border-white text-green-400" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="3">
<path id="chart-line" d="M8 48 L20 32 L32 40 L44 20 L56 28" stroke="currentColor" stroke-linejoin="round" fill="none" stroke-dasharray="100" stroke-dashoffset="100">
<animate attributeName="stroke-dashoffset" from="100" to="0" dur="1.4s" fill="freeze"></animate>
</path>
<circle cx="8" cy="48" r="2"><animate attributeName="r" from="0" to="2" dur="0.5s" begin="0.2s" fill="freeze"></animate></circle>
<circle cx="20" cy="32" r="2"><animate attributeName="r" from="0" to="2" dur="0.5s" begin="0.5s" fill="freeze"></animate></circle>
<circle cx="32" cy="40" r="2"><animate attributeName="r" from="0" to="2" dur="0.5s" begin="0.8s" fill="freeze"></animate></circle>
<circle cx="44" cy="20" r="2"><animate attributeName="r" from="0" to="2" dur="0.5s" begin="1.1s" fill="freeze"></animate></circle>
<circle cx="56" cy="28" r="2"><animate attributeName="r" from="0" to="2" dur="0.5s" begin="1.4s" fill="freeze"></animate></circle>
</svg>
</button>
</div>
<!-- Main Trading Interface -->
<div class="grid grid-cols-1 gap-6">
<!-- Chart Column -->
<div class="trading-card rounded-xl p-5">
<div class="flex justify-between items-center mb-4">
<h2 class="font-bold text-lg my-auto">Price Chart</h2>
<div class="flex justify-between gap-3">
<!-- Balance Button -->
<button data-active="false" id="balance" class="flex items-center bg-[var(--bg-body)] border-2 border-cyan-900 rounded-full px-4 py-3">
<svg class="w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<path fill="currentColor" d="M200 168a48.05 48.05 0 0 1-48 48h-16v16a8 8 0 0 1-16 0v-16h-16a48.05 48.05 0 0 1-48-48a8 8 0 0 1 16 0a32 32 0 0 0 32 32h48a32 32 0 0 0 0-64h-40a48 48 0 0 1 0-96h8V24a8 8 0 0 1 16 0v16h8a48.05 48.05 0 0 1 48 48a8 8 0 0 1-16 0a32 32 0 0 0-32-32h-32a32 32 0 0 0 0 64h40a48.05 48.05 0 0 1 48 48"></path>
</svg>
<span class="px-2">1,000</span>
</button>
<!-- Settings Button -->
<button data-active="false" id="settings" class="flex items-center bg-[var(--bg-body)] border-2 border-cyan-900 rounded-full px-4 py-3">
<svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
</svg>
</button>
</div>
</div>
<!-- Chart Canvas -->
<div class="relative">
<canvas id="chart" class="w-full h-[400px]"></canvas>
<div id="tradeMessage" class="text-sm text-red-400 mt-2 h-5"></div>
</div>
<!-- Trading Controls -->
<footer class="flex-shrink flex justify-between p-4 gap-4 overflow-x-auto">
<!-- Up (Buy) -->
<button data-active="false" id="buy" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2 border-0">
<svg class="w-4" xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 256 256" fill="currentColor"><path d="M 0 168.381 L 66.301 102.065 C 73.447 94.894 85.06 94.894 92.206 102.065 L 128 137.905 L 193.524 72.381 L 176.762 72.381 C 166.663 72.381 158.476 64.194 158.476 54.095 C 158.476 43.996 166.663 35.81 176.762 35.81 L 237.714 35.81 C 247.813 35.81 256 43.996 256 54.095 L 256 115.048 C 256 125.147 247.813 133.333 237.714 133.333 C 227.615 133.333 219.429 125.147 219.429 115.048 L 219.429 98.286 L 140.937 176.792 C 133.791 183.963 122.179 183.963 115.032 176.792 L 79.238 140.952 L 0 220.19"></path></svg>
Up
</button>
<!-- Down (Sell) -->
<button data-active="false" id="sell" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2 border-0">
<svg class="w-4" xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 256 256" fill="currentColor"><path d="M 0 87.619 L 66.301 153.935 C 73.447 161.106 85.06 161.106 92.206 153.935 L 128 118.095 L 193.524 183.619 L 176.762 183.619 C 166.663 183.619 158.476 191.806 158.476 201.905 C 158.476 212.004 166.663 220.19 176.762 220.19 L 237.714 220.19 C 247.813 220.19 256 212.004 256 201.905 L 256 140.952 C 256 130.853 247.813 122.667 237.714 122.667 C 227.615 122.667 219.429 130.853 219.429 140.952 L 219.429 157.714 L 140.937 79.208 C 133.791 72.037 122.179 72.037 115.032 79.208 L 79.238 115.048 L 0 35.81"></path></svg>
Down
</button>
</footer>
</div>
</div>
<!-- Trade History -->
<div class="trading-card rounded-xl p-5 mt-6">
<div class="flex justify-between items-center mb-4">
<h2 class="font-bold text-lg">📋 Trade History</h2>
<div class="flex gap-4">
<div class="text-sm">
<span class="text-slate-400">Total Trades:</span>
<span id="totalTrades" class="font-bold ml-2">0</span>
</div>
<div class="text-sm">
<span class="text-slate-400">Profitability:</span>
<span id="winlossratio" class="font-bold ml-2">0%</span>
</div>
</div>
</div>
<div class="overflow-x-auto max-h-96 overflow-y-auto">
<table id="history" class="w-full text-sm">
<thead class="sticky inset-x-0 top-0">
<tr class="text-left border-b border-slate-700">
<th class="pb-2 text-slate-400">Time</th>
<th class="pb-2 text-slate-400">Type</th>
<th class="pb-2 text-slate-400">Entry</th>
<th class="pb-2 text-slate-400">Exit</th>
<th class="pb-2 text-slate-400">P&L</th>
<th class="pb-2 text-slate-400">Result</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-700">
<tr>
<td colspan="8" class="py-8 text-center text-slate-500">No trades yet</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://michaelsboost.com/TailwindCSSMod/tailwind-mod-noreset.min.js"></script>
<script src="dist/script.js" type="module"></script>
</body>
</html>