timoon811 commited on
Commit
e671af1
·
verified ·
1 Parent(s): 2a3e1cc

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +665 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Aviatorpreland
3
- emoji: 🐠
4
- colorFrom: blue
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: aviatorpreland
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,665 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Aviator Game Phases Visualization</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ @keyframes pulse-glow {
12
+ 0% { opacity: 0.7; }
13
+ 50% { opacity: 1; box-shadow: 0 0 15px #10B981; }
14
+ 100% { opacity: 0.7; }
15
+ }
16
+
17
+ .glowing-line {
18
+ animation: pulse-glow 2s infinite;
19
+ }
20
+
21
+ .tooltip {
22
+ position: absolute;
23
+ background: rgba(0, 0, 0, 0.8);
24
+ color: white;
25
+ padding: 8px 12px;
26
+ border-radius: 6px;
27
+ font-size: 14px;
28
+ pointer-events: none;
29
+ z-index: 100;
30
+ transform: translate(-50%, -100%);
31
+ opacity: 0;
32
+ transition: opacity 0.3s;
33
+ min-width: 180px;
34
+ }
35
+
36
+ .tooltip:after {
37
+ content: "";
38
+ position: absolute;
39
+ top: 100%;
40
+ left: 50%;
41
+ margin-left: -5px;
42
+ border-width: 5px;
43
+ border-style: solid;
44
+ border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
45
+ }
46
+
47
+ .cashout-animation {
48
+ animation: cashout-pulse 1.5s ease-out;
49
+ }
50
+
51
+ @keyframes cashout-pulse {
52
+ 0% { transform: scale(1); opacity: 1; }
53
+ 50% { transform: scale(1.5); opacity: 0.8; }
54
+ 100% { transform: scale(2); opacity: 0; }
55
+ }
56
+
57
+ .game-container {
58
+ transition: all 0.5s ease;
59
+ }
60
+
61
+ .highlight-game {
62
+ box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
63
+ transform: translateY(-5px);
64
+ }
65
+
66
+ .plane-marker {
67
+ position: absolute;
68
+ font-size: 24px;
69
+ transform: translate(-50%, -50%) rotate(0deg);
70
+ z-index: 10;
71
+ transition: left 0.1s linear, top 0.1s linear;
72
+ }
73
+
74
+ .win-message {
75
+ position: absolute;
76
+ top: 50%;
77
+ left: 50%;
78
+ transform: translate(-50%, -50%);
79
+ background: rgba(16, 185, 129, 0.9);
80
+ color: white;
81
+ padding: 20px 30px;
82
+ border-radius: 10px;
83
+ font-size: 28px;
84
+ font-weight: bold;
85
+ text-align: center;
86
+ z-index: 100;
87
+ opacity: 0;
88
+ transition: opacity 0.5s;
89
+ box-shadow: 0 0 20px rgba(16, 185, 129, 0.7);
90
+ width: 80%;
91
+ max-width: 500px;
92
+ }
93
+
94
+ .lose-message {
95
+ position: absolute;
96
+ top: 50%;
97
+ left: 50%;
98
+ transform: translate(-50%, -50%);
99
+ background: rgba(239, 68, 68, 0.9);
100
+ color: white;
101
+ padding: 15px 25px;
102
+ border-radius: 8px;
103
+ font-size: 24px;
104
+ font-weight: bold;
105
+ text-align: center;
106
+ z-index: 100;
107
+ opacity: 0;
108
+ transition: opacity 0.5s;
109
+ box-shadow: 0 0 15px rgba(239, 68, 68, 0.7);
110
+ width: 70%;
111
+ max-width: 400px;
112
+ }
113
+ </style>
114
+ </head>
115
+ <body class="bg-gray-900 text-white min-h-screen">
116
+ <div class="container mx-auto px-4 py-12">
117
+ <!-- Header with meaning text -->
118
+ <div class="text-center mb-12">
119
+ <h1 class="text-4xl font-bold mb-6 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 bg-clip-text text-transparent">
120
+ Aviator Game Phases Analysis
121
+ </h1>
122
+ <div class="text-2xl font-semibold mb-4">
123
+ <span class="text-red-400">3 losses in a row.</span>
124
+ <span class="mx-4">But on the 4th — </span>
125
+ <span class="text-green-400 font-bold">X94.</span>
126
+ </div>
127
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">
128
+ Would you have waited? <span class="text-yellow-400 font-medium">We know when to wait.</span>
129
+ </p>
130
+ </div>
131
+
132
+ <!-- Main chart container -->
133
+ <div class="bg-gray-800 rounded-xl p-6 shadow-xl mb-8 relative">
134
+ <div class="flex justify-between items-center mb-6">
135
+ <h2 class="text-xl font-semibold">Game Phases Pattern</h2>
136
+ <button id="replayBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center transition">
137
+ <i class="fas fa-redo mr-2"></i> Replay Sequence
138
+ </button>
139
+ </div>
140
+
141
+ <div class="relative h-96">
142
+ <canvas id="gameChart"></canvas>
143
+
144
+ <!-- Plane marker -->
145
+ <div id="planeMarker" class="plane-marker hidden">
146
+ <i class="fas fa-plane text-blue-400"></i>
147
+ </div>
148
+
149
+ <!-- Cashout marker -->
150
+ <div id="cashoutMarker" class="absolute hidden flex-col items-center">
151
+ <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold mb-1 flex items-center">
152
+ <i class="fas fa-coins mr-1"></i> CASHOUT
153
+ </div>
154
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
155
+ </div>
156
+
157
+ <!-- Win message -->
158
+ <div id="winMessage" class="win-message">
159
+ WON $470<br>with 94x multiplier!
160
+ <div class="text-xl mt-2">🔥 Hot phase detected! 🔥</div>
161
+ </div>
162
+
163
+ <!-- Lose messages -->
164
+ <div id="loseMessage1" class="lose-message">LOST!</div>
165
+ <div id="loseMessage2" class="lose-message">LOST!</div>
166
+ <div id="loseMessage3" class="lose-message">LOST!</div>
167
+
168
+ <!-- Tooltip element -->
169
+ <div id="chartTooltip" class="tooltip"></div>
170
+ </div>
171
+
172
+ <!-- Game result indicators -->
173
+ <div class="grid grid-cols-4 gap-4 mt-6">
174
+ <div id="game1" class="game-container bg-gray-700 p-3 rounded-lg">
175
+ <div class="flex justify-between items-center mb-2">
176
+ <span class="font-medium">Game 1</span>
177
+ <span class="text-red-400 font-bold">- $5</span>
178
+ </div>
179
+ <p class="text-sm text-gray-300">Bet $5 — Lost at 1.34x</p>
180
+ </div>
181
+
182
+ <div id="game2" class="game-container bg-gray-700 p-3 rounded-lg">
183
+ <div class="flex justify-between items-center mb-2">
184
+ <span class="font-medium">Game 2</span>
185
+ <span class="text-red-400 font-bold">- $5</span>
186
+ </div>
187
+ <p class="text-sm text-gray-300">Bet $5 — Lost at 1.12x</p>
188
+ </div>
189
+
190
+ <div id="game3" class="game-container bg-gray-700 p-3 rounded-lg">
191
+ <div class="flex justify-between items-center mb-2">
192
+ <span class="font-medium">Game 3</span>
193
+ <span class="text-red-400 font-bold">- $5</span>
194
+ </div>
195
+ <p class="text-sm text-gray-300">Bet $5 — Lost at 1.86x</p>
196
+ </div>
197
+
198
+ <div id="game4" class="game-container bg-gray-700 p-3 rounded-lg">
199
+ <div class="flex justify-between items-center mb-2">
200
+ <span class="font-medium">Game 4</span>
201
+ <span class="text-green-400 font-bold">+ $470</span>
202
+ </div>
203
+ <p class="text-sm text-green-300 font-medium">Phase: <span class="text-yellow-400">🔥 Hot. Here it is.</span></p>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Key takeaways -->
209
+ <div class="grid md:grid-cols-3 gap-6 mt-8">
210
+ <div class="bg-gray-800 p-6 rounded-xl border-l-4 border-red-500">
211
+ <div class="flex items-center mb-3">
212
+ <div class="bg-red-500 p-2 rounded-full mr-3">
213
+ <i class="fas fa-exclamation-triangle text-white"></i>
214
+ </div>
215
+ <h3 class="text-lg font-semibold">Bad Phases</h3>
216
+ </div>
217
+ <p class="text-gray-300">Games 1-3 show losing streaks where most players lose money by cashing out too late or not recognizing the pattern.</p>
218
+ </div>
219
+
220
+ <div class="bg-gray-800 p-6 rounded-xl border-l-4 border-yellow-500">
221
+ <div class="flex items-center mb-3">
222
+ <div class="bg-yellow-500 p-2 rounded-full mr-3">
223
+ <i class="fas fa-lightbulb text-white"></i>
224
+ </div>
225
+ <h3 class="text-lg font-semibold">Recognizable Pattern</h3>
226
+ </div>
227
+ <p class="text-gray-300">The game follows a predictable algorithm - after several losses comes a big win phase that can be anticipated.</p>
228
+ </div>
229
+
230
+ <div class="bg-gray-800 p-6 rounded-xl border-l-4 border-green-500">
231
+ <div class="flex items-center mb-3">
232
+ <div class="bg-green-500 p-2 rounded-full mr-3">
233
+ <i class="fas fa-chart-line text-white"></i>
234
+ </div>
235
+ <h3 class="text-lg font-semibold">Generosity Phase</h3>
236
+ </div>
237
+ <p class="text-gray-300">Game 4 demonstrates the "hot phase" where multipliers skyrocket - our system identifies these moments for optimal betting.</p>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <script>
243
+ document.addEventListener('DOMContentLoaded', function() {
244
+ // Chart configuration
245
+ const ctx = document.getElementById('gameChart').getContext('2d');
246
+
247
+ // Game data
248
+ const games = [
249
+ { // Game 1
250
+ label: 'Game 1 (Loss)',
251
+ data: [
252
+ {x: 0, y: 1},
253
+ {x: 2, y: 1.1},
254
+ {x: 3, y: 1.2},
255
+ {x: 3.4, y: 1.34},
256
+ {x: 3.5, y: 1}
257
+ ],
258
+ borderColor: 'rgba(239, 68, 68, 1)',
259
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
260
+ borderWidth: 2,
261
+ tension: 0.3,
262
+ pointRadius: 0,
263
+ pointHoverRadius: 6,
264
+ pointBackgroundColor: 'rgba(239, 68, 68, 1)',
265
+ segment: {
266
+ borderColor: ctx => ctx.p0.parsed.y > ctx.p1.parsed.y ? 'rgba(239, 68, 68, 0.5)' : undefined,
267
+ borderDash: ctx => ctx.p0.parsed.y > ctx.p1.parsed.y ? [6, 6] : undefined
268
+ }
269
+ },
270
+ { // Game 2
271
+ label: 'Game 2 (Loss)',
272
+ data: [
273
+ {x: 10, y: 1},
274
+ {x: 11, y: 1.05},
275
+ {x: 11.5, y: 1.1},
276
+ {x: 11.8, y: 1.12},
277
+ {x: 12, y: 1}
278
+ ],
279
+ borderColor: 'rgba(239, 68, 68, 1)',
280
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
281
+ borderWidth: 2,
282
+ tension: 0.3,
283
+ pointRadius: 0,
284
+ pointHoverRadius: 6,
285
+ pointBackgroundColor: 'rgba(239, 68, 68, 1)',
286
+ segment: {
287
+ borderColor: ctx => ctx.p0.parsed.y > ctx.p1.parsed.y ? 'rgba(239, 68, 68, 0.5)' : undefined,
288
+ borderDash: ctx => ctx.p0.parsed.y > ctx.p1.parsed.y ? [6, 6] : undefined
289
+ }
290
+ },
291
+ { // Game 3
292
+ label: 'Game 3 (Loss)',
293
+ data: [
294
+ {x: 20, y: 1},
295
+ {x: 21, y: 1.3},
296
+ {x: 22, y: 1.5},
297
+ {x: 22.5, y: 1.7},
298
+ {x: 22.8, y: 1.86},
299
+ {x: 23, y: 1}
300
+ ],
301
+ borderColor: 'rgba(239, 68, 68, 1)',
302
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
303
+ borderWidth: 2,
304
+ tension: 0.3,
305
+ pointRadius: 0,
306
+ pointHoverRadius: 6,
307
+ pointBackgroundColor: 'rgba(239, 68, 68, 1)',
308
+ segment: {
309
+ borderColor: ctx => ctx.p0.parsed.y > ctx.p1.parsed.y ? 'rgba(239, 68, 68, 0.5)' : undefined,
310
+ borderDash: ctx => ctx.p0.parsed.y > ctx.p1.parsed.y ? [6, 6] : undefined
311
+ }
312
+ },
313
+ { // Game 4 (Win)
314
+ label: 'Game 4 (Win)',
315
+ data: [
316
+ {x: 30, y: 1},
317
+ {x: 31, y: 2},
318
+ {x: 32, y: 5},
319
+ {x: 33, y: 10},
320
+ {x: 34, y: 25},
321
+ {x: 35, y: 50},
322
+ {x: 36, y: 75},
323
+ {x: 36.5, y: 85},
324
+ {x: 37, y: 90},
325
+ {x: 37.5, y: 93},
326
+ {x: 37.8, y: 94.2},
327
+ {x: 38, y: 1}
328
+ ],
329
+ borderColor: 'rgba(16, 185, 129, 1)',
330
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
331
+ borderWidth: 3,
332
+ tension: 0.3,
333
+ pointRadius: 0,
334
+ pointHoverRadius: 6,
335
+ pointBackgroundColor: 'rgba(16, 185, 129, 1)',
336
+ segment: {
337
+ borderColor: ctx => ctx.p0.parsed.y > ctx.p1.parsed.y ? 'rgba(239, 68, 68, 0.5)' : undefined,
338
+ borderDash: ctx => ctx.p0.parsed.y > ctx.p1.parsed.y ? [6, 6] : undefined
339
+ }
340
+ }
341
+ ];
342
+
343
+ // Create chart
344
+ const chart = new Chart(ctx, {
345
+ type: 'line',
346
+ data: {
347
+ datasets: games
348
+ },
349
+ options: {
350
+ responsive: true,
351
+ maintainAspectRatio: false,
352
+ animation: {
353
+ duration: 0 // We'll handle animations manually
354
+ },
355
+ scales: {
356
+ x: {
357
+ type: 'linear',
358
+ position: 'bottom',
359
+ min: 0,
360
+ max: 40,
361
+ ticks: {
362
+ callback: function(value) {
363
+ if (value % 10 === 0) {
364
+ return `${value % 10}s`;
365
+ }
366
+ return '';
367
+ },
368
+ color: 'rgba(255, 255, 255, 0.7)'
369
+ },
370
+ grid: {
371
+ color: 'rgba(255, 255, 255, 0.1)',
372
+ drawTicks: false
373
+ },
374
+ title: {
375
+ display: true,
376
+ text: 'Time (seconds)',
377
+ color: 'rgba(255, 255, 255, 0.8)'
378
+ }
379
+ },
380
+ y: {
381
+ type: 'logarithmic',
382
+ min: 1,
383
+ max: 100,
384
+ ticks: {
385
+ callback: function(value) {
386
+ if ([1, 2, 5, 10, 25, 50, 100].includes(value)) {
387
+ return `${value}x`;
388
+ }
389
+ },
390
+ color: 'rgba(255, 255, 255, 0.7)'
391
+ },
392
+ grid: {
393
+ color: function(context) {
394
+ return [1, 2, 5, 10, 25, 50, 100].includes(context.tick.value) ?
395
+ 'rgba(255, 255, 255, 0.2)' :
396
+ 'rgba(255, 255, 255, 0.05)';
397
+ },
398
+ lineWidth: function(context) {
399
+ return [1, 10, 100].includes(context.tick.value) ? 2 : 1;
400
+ },
401
+ drawTicks: false
402
+ },
403
+ title: {
404
+ display: true,
405
+ text: 'Multiplier',
406
+ color: 'rgba(255, 255, 255, 0.8)'
407
+ }
408
+ }
409
+ },
410
+ plugins: {
411
+ legend: {
412
+ display: false
413
+ },
414
+ tooltip: {
415
+ enabled: false,
416
+ external: function(context) {
417
+ const tooltip = document.getElementById('chartTooltip');
418
+
419
+ if (context.tooltip.opacity === 0) {
420
+ tooltip.style.opacity = 0;
421
+ return;
422
+ }
423
+
424
+ const dataPoint = context.tooltip.dataPoints[0];
425
+ const dataset = games[dataPoint.datasetIndex];
426
+ const point = dataset.data[dataPoint.dataIndex];
427
+
428
+ let outcome = 'In Progress';
429
+ let color = 'text-blue-400';
430
+
431
+ if (dataset.label.includes('Loss')) {
432
+ outcome = 'Loss';
433
+ color = 'text-red-400';
434
+ } else if (point.x >= 37.8 && point.y >= 94) {
435
+ outcome = 'Win';
436
+ color = 'text-green-400';
437
+ }
438
+
439
+ tooltip.innerHTML = `
440
+ <div class="mb-1"><strong>Time:</strong> ${point.x.toFixed(1)}s</div>
441
+ <div class="mb-1"><strong>Multiplier:</strong> ${point.y.toFixed(2)}x</div>
442
+ <div class="${color} font-semibold"><strong>Outcome:</strong> ${outcome}</div>
443
+ `;
444
+
445
+ const chartRect = context.chart.canvas.getBoundingClientRect();
446
+ tooltip.style.left = chartRect.left + context.tooltip.caretX + 'px';
447
+ tooltip.style.top = chartRect.top + context.tooltip.caretY + 'px';
448
+ tooltip.style.opacity = 1;
449
+ }
450
+ }
451
+ },
452
+ interaction: {
453
+ intersect: false,
454
+ mode: 'index'
455
+ }
456
+ }
457
+ });
458
+
459
+ // Animation variables
460
+ let currentGame = 0;
461
+ let animationInterval;
462
+ let isAnimating = false;
463
+
464
+ // DOM elements
465
+ const replayBtn = document.getElementById('replayBtn');
466
+ const planeMarker = document.getElementById('planeMarker');
467
+ const cashoutMarker = document.getElementById('cashoutMarker');
468
+ const winMessage = document.getElementById('winMessage');
469
+ const loseMessage1 = document.getElementById('loseMessage1');
470
+ const loseMessage2 = document.getElementById('loseMessage2');
471
+ const loseMessage3 = document.getElementById('loseMessage3');
472
+ const gameContainers = [
473
+ document.getElementById('game1'),
474
+ document.getElementById('game2'),
475
+ document.getElementById('game3'),
476
+ document.getElementById('game4')
477
+ ];
478
+
479
+ // Highlight current game
480
+ function highlightGame(index) {
481
+ gameContainers.forEach((container, i) => {
482
+ if (i === index) {
483
+ container.classList.add('highlight-game');
484
+ } else {
485
+ container.classList.remove('highlight-game');
486
+ }
487
+ });
488
+ }
489
+
490
+ // Show lose message
491
+ function showLoseMessage(gameNumber) {
492
+ const message = document.getElementById(`loseMessage${gameNumber}`);
493
+ message.style.opacity = 1;
494
+
495
+ setTimeout(() => {
496
+ message.style.opacity = 0;
497
+ }, 1500);
498
+ }
499
+
500
+ // Show win message
501
+ function showWinMessage() {
502
+ winMessage.style.opacity = 1;
503
+
504
+ setTimeout(() => {
505
+ winMessage.style.opacity = 0;
506
+ }, 3000);
507
+ }
508
+
509
+ // Animate chart
510
+ function animateChart() {
511
+ if (isAnimating) return;
512
+ isAnimating = true;
513
+ currentGame = 0;
514
+
515
+ // Reset chart
516
+ chart.options.scales.x.min = 0;
517
+ chart.options.scales.x.max = 10;
518
+ chart.update();
519
+
520
+ // Hide markers and messages
521
+ planeMarker.classList.add('hidden');
522
+ cashoutMarker.classList.add('hidden');
523
+ winMessage.style.opacity = 0;
524
+ loseMessage1.style.opacity = 0;
525
+ loseMessage2.style.opacity = 0;
526
+ loseMessage3.style.opacity = 0;
527
+
528
+ // Start animation sequence
529
+ playNextGame();
530
+ }
531
+
532
+ // Play next game in sequence
533
+ function playNextGame() {
534
+ if (currentGame >= games.length) {
535
+ isAnimating = false;
536
+ return;
537
+ }
538
+
539
+ highlightGame(currentGame);
540
+
541
+ const game = games[currentGame];
542
+ const isWinGame = game.label.includes('Win');
543
+ let currentPoint = 0;
544
+ let crashPointReached = false;
545
+
546
+ // Adjust x-axis range based on game
547
+ if (currentGame === 0) {
548
+ chart.options.scales.x.min = 0;
549
+ chart.options.scales.x.max = 10;
550
+ } else if (currentGame === 1) {
551
+ chart.options.scales.x.min = 10;
552
+ chart.options.scales.x.max = 20;
553
+ } else if (currentGame === 2) {
554
+ chart.options.scales.x.min = 20;
555
+ chart.options.scales.x.max = 30;
556
+ } else if (currentGame === 3) {
557
+ chart.options.scales.x.min = 30;
558
+ chart.options.scales.x.max = 40;
559
+ }
560
+
561
+ chart.update();
562
+
563
+ // Show plane marker
564
+ planeMarker.classList.remove('hidden');
565
+
566
+ // Animate points one by one
567
+ const gameInterval = setInterval(() => {
568
+ if (currentPoint >= game.data.length) {
569
+ clearInterval(gameInterval);
570
+
571
+ // Hide plane at the end
572
+ planeMarker.classList.add('hidden');
573
+
574
+ // If win game, show cashout marker and win message
575
+ if (isWinGame) {
576
+ const lastPoint = game.data[game.data.length - 2]; // Second to last point (before crash)
577
+ const canvasPos = chart.scales.x.getPixelForValue(lastPoint.x);
578
+ const canvasYPos = chart.scales.y.getPixelForValue(lastPoint.y);
579
+
580
+ cashoutMarker.style.left = `${canvasPos}px`;
581
+ cashoutMarker.style.top = `${canvasYPos}px`;
582
+ cashoutMarker.classList.remove('hidden');
583
+ cashoutMarker.classList.add('cashout-animation');
584
+
585
+ setTimeout(() => {
586
+ cashoutMarker.classList.remove('cashout-animation');
587
+ }, 1500);
588
+
589
+ showWinMessage();
590
+
591
+ // Pause before next game (but this is the last game)
592
+ setTimeout(() => {
593
+ currentGame++;
594
+ isAnimating = false;
595
+ }, 3000);
596
+ } else {
597
+ // For lose games, show lose message
598
+ showLoseMessage(currentGame + 1);
599
+
600
+ // Pause before next game
601
+ setTimeout(() => {
602
+ currentGame++;
603
+ playNextGame();
604
+ }, 2000); // 2 second pause after each lose game
605
+ }
606
+
607
+ return;
608
+ }
609
+
610
+ // Update plane position
611
+ const point = game.data[currentPoint];
612
+ const canvasPos = chart.scales.x.getPixelForValue(point.x);
613
+ const canvasYPos = chart.scales.y.getPixelForValue(point.y);
614
+
615
+ planeMarker.style.left = `${canvasPos}px`;
616
+ planeMarker.style.top = `${canvasYPos}px`;
617
+
618
+ // Rotate plane slightly based on direction
619
+ if (currentPoint > 0) {
620
+ const prevPoint = game.data[currentPoint - 1];
621
+ const angle = Math.atan2(
622
+ chart.scales.y.getPixelForValue(point.y) - chart.scales.y.getPixelForValue(prevPoint.y),
623
+ chart.scales.x.getPixelForValue(point.x) - chart.scales.x.getPixelForValue(prevPoint.x)
624
+ ) * 180 / Math.PI;
625
+ planeMarker.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
626
+ }
627
+
628
+ // Check if we've reached the crash point
629
+ if (!crashPointReached && currentPoint > 0 &&
630
+ game.data[currentPoint].y < game.data[currentPoint - 1].y) {
631
+ crashPointReached = true;
632
+ }
633
+
634
+ currentPoint++;
635
+ }, isWinGame ? 100 : 200); // Faster animation for win game
636
+ }
637
+
638
+ // Initial animation after a delay
639
+ setTimeout(animateChart, 1000);
640
+
641
+ // Replay button
642
+ replayBtn.addEventListener('click', animateChart);
643
+
644
+ // Make the winning line glow
645
+ setTimeout(() => {
646
+ const winDataset = chart.data.datasets[3];
647
+ winDataset.borderWidth = 4;
648
+ winDataset.borderColor = 'rgba(16, 185, 129, 0.8)';
649
+ chart.update();
650
+
651
+ // Add glowing effect to the line
652
+ const meta = chart.getDatasetMeta(3);
653
+ if (meta) {
654
+ const ctx = meta.dataset._ctx;
655
+ ctx.shadowColor = 'rgba(16, 185, 129, 0.6)';
656
+ ctx.shadowBlur = 15;
657
+ ctx.shadowOffsetX = 0;
658
+ ctx.shadowOffsetY = 0;
659
+ chart.draw();
660
+ }
661
+ }, 500);
662
+ });
663
+ </script>
664
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=timoon811/aviatorpreland" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
665
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ 📊 Техническое задание: Интерактивный график фаз игры Aviator ⸻ 🎯 Цель графика: Показать: • Что игра идёт по определённой логике. • Что есть “плохие фазы”, в которых все сливают. • Что “фаза щедрости” можно заранее вычислить и поймать. • Визуально и эмоционально донести: “ты проиграл 3 раза подряд, но четвёртая ставка могла бы дать X100+”. ⸻ 1. 📐 ОСНОВНАЯ СЕТКА ГРАФИКА 🧱 Сетка координат: • Ось Y (левая вертикаль): коэффициенты • Отображаются значения: 1x, 2x, 5x, 10x, 25x, 50x, 100x • Логарифмическая шкала (т.к. X100 занимает большой диапазон) • Отметки визуально выделены сеткой — например, пунктирные линии • Ось X (горизонталь внизу): время в секундах • Показывает прогресс времени каждой сессии игры • Стандарт: от 0s до 10s на каждую сессию • Расположены 4 подряд идущие мини-сессии (игры), каждая длится 10 секунд • Под каждой сессией: подпись — номер попытки 1-я игра, 2-я игра, 3-я игра, 4-я игра (выигрыш) ⸻ 2. 📉 САМИ ГРАФИКИ ИГР 🔴 1–3-я игра: неудачные • Кривая множителя резко обрывается: • 1-я: доходит до 1.34x и падает • 2-я: 1.12x • 3-я: 1.86x • Каждая линия отмечена красным и подписана: • “Краш” • “−$5” • Анимация: кривая взлетает, замирает, и падает (в режиме реального времени или симуляции) • Под каждой из них: текст “Поставил $5 — проиграл” 🟢 4-я игра: успешная • Кривая стремительно взлетает: • Проходит через 10x → 25x → доходит до 94x • Текст появляется: “Вывел: +$470” • Подпись под графиком: “Фаза: 🔥 Горячая. Вот она.” • Цвет линии: ярко-зелёный с эффектом свечения ⸻ 3. 📌 ДОПОЛНИТЕЛЬНЫЕ ЭЛЕМЕНТЫ 🔹 Подсказки (tooltips при наведении): • Навёл мышку на точку кривой — подсказка: Время: 3.4 сек Коэффициент: 1.34x Исход: Проигрыш Или: Время: 7.8 сек Коэффициент: 94.2x Исход: Выигрыш 🔺 Маркер входа: • В каждой игре — точка старта (отметка ставки) • Можно добавить текст “Ставка: $5” 🔻 Маркер выхода (если был): • В 4-й игре — момент вывода: зелёная точка с фразой “КЭШАУТ” • Появляется анимационно с деньгами 💰 ⸻ 4. 🔁 ПОВЕДЕНИЕ ГРАФИКА • При загрузке лендинга: • Сначала показана первая игра (1–2 сек) • Далее автоматически проигрываются поочерёдно 2-я и 3-я игры (2 сек каждая) • Затем — пауза (эффект затишья) • Внезапно начинается 4-я игра — взрывной рост множителя, победа, +$470 • Цикл может повторяться (или запускаться вручную по кнопке “Показать ещё раз”) ⸻ 5. 🧠 Смысловая надпись над графиком: 3 слива подряд. А на 4-й — X94. Ты бы дождался? Мы знаем, когда ждать.
2
+ Только сделай так - чтобы вместо точки - которая идет по линии графика - был самолетик! И после первой второй и третьей игры - была надбись "Проиграл" и после каждой игры чтобы была пауза 1-2 секунды! А после 4й игры чтобы была надпись на весь графика - выиграл 470$ с коэффициентом 94!