Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +665 -19
- prompts.txt +2 -0
README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
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 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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!
|