sequelize-game-bank 5.0.2 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/public/home.html CHANGED
@@ -1,378 +1,461 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="ru">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Сеть Терминалов Нео-Банка</title>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Game-bank</title>
7
7
  <style>
8
- :root {
9
- --neon-blue: #00f0ff;
10
- --neon-purple: #bd00ff;
11
- --neon-gold: #ffb703;
12
- --bg-dark: #0a0b10;
13
- --panel-bg: rgba(20, 24, 38, 0.9);
14
- --border-color: #262b40;
15
- --text-color: #e2e8f0;
8
+ :root {
9
+ --neon-blue: #00f0ff;
10
+ --neon-purple: #bd00ff;
11
+ --neon-gold: #ffb703;
12
+ --bg-dark: #0a0b10;
13
+ --panel-bg: rgba(20, 24, 38, 0.9);
14
+ --border-color: #262b40;
15
+ --text-color: #e2e8f0;
16
+ }
17
+ body {
18
+ background-color: var(--bg-dark);
19
+ color: var(--text-color);
20
+ font-family: "Segoe UI", Roboto, sans-serif;
21
+ margin: 0;
22
+ padding: 0;
23
+ min-height: 100vh;
24
+ display: flex;
25
+ flex-direction: column;
26
+ background-image:
27
+ radial-gradient(
28
+ circle at 80% 20%,
29
+ rgba(189, 0, 255, 0.15) 0%,
30
+ transparent 50%
31
+ ),
32
+ radial-gradient(
33
+ circle at 20% 80%,
34
+ rgba(0, 240, 255, 0.1) 0%,
35
+ transparent 50%
36
+ );
37
+ }
38
+ .bank-navbar {
39
+ display: flex;
40
+ justify-content: space-between;
41
+ align-items: center;
42
+ padding: 20px 40px;
43
+ background: rgba(10, 11, 16, 0.8);
44
+ border-bottom: 1px solid var(--border-color);
45
+ backdrop-filter: blur(10px);
46
+ box-sizing: border-box;
47
+ }
48
+ .logo {
49
+ font-size: 22px;
50
+ font-weight: bold;
51
+ text-transform: uppercase;
52
+ letter-spacing: 3px;
53
+ color: #fff;
54
+ text-shadow: 0 0 10px var(--neon-blue);
55
+ }
56
+ .logo span {
57
+ color: var(--neon-purple);
58
+ }
59
+ .auth-buttons {
60
+ display: flex;
61
+ gap: 15px;
62
+ }
63
+ .btn-auth {
64
+ padding: 10px 24px;
65
+ font-size: 14px;
66
+ font-weight: 600;
67
+ text-transform: uppercase;
68
+ letter-spacing: 1px;
69
+ border-radius: 6px;
70
+ cursor: pointer;
71
+ transition: all 0.3s ease;
72
+ outline: none;
73
+ }
74
+ .btn-login {
75
+ background: transparent;
76
+ color: var(--neon-blue);
77
+ border: 2px solid var(--neon-blue);
78
+ box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
79
+ }
80
+ .btn-login:hover {
81
+ background: var(--neon-blue);
82
+ color: #000;
83
+ box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
84
+ }
85
+ .btn-register {
86
+ background: linear-gradient(135deg, var(--neon-purple), #8900ff);
87
+ color: #fff;
88
+ border: none;
89
+ box-shadow: 0 0 15px rgba(189, 0, 255, 0.4);
90
+ }
91
+ .btn-register:hover {
92
+ transform: translateY(-2px);
93
+ box-shadow: 0 0 25px rgba(189, 0, 255, 0.8);
94
+ }
95
+ .main-content {
96
+ flex: 1;
97
+ display: flex;
98
+ justify-content: center;
99
+ align-items: center;
100
+ padding: 40px;
101
+ }
102
+ .promo-billboard {
103
+ background: var(--panel-bg);
104
+ border: 1px solid var(--border-color);
105
+ border-radius: 16px;
106
+ width: 800px;
107
+ height: 380px;
108
+ padding: 40px;
109
+ text-align: center;
110
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
111
+ backdrop-filter: blur(10px);
112
+ position: relative;
113
+ box-sizing: border-box;
114
+ overflow: hidden;
115
+ display: flex;
116
+ flex-direction: column;
117
+ justify-content: center;
118
+ align-items: center;
119
+ }
120
+ .promo-billboard::before {
121
+ content: "";
122
+ position: absolute;
123
+ top: 0;
124
+ left: 0;
125
+ width: 4px;
126
+ height: 100%;
127
+ background: var(--neon-blue);
128
+ }
129
+ .promo-slider {
130
+ width: 100%;
131
+ }
132
+ .promo-slide {
133
+ display: none;
134
+ animation: fadeIn 0.6s ease-in-out forwards;
135
+ }
136
+ .promo-slide.active {
137
+ display: block;
138
+ }
139
+ .promo-tag {
140
+ font-size: 11px;
141
+ text-transform: uppercase;
142
+ letter-spacing: 3px;
143
+ color: var(--neon-blue);
144
+ margin-bottom: 20px;
145
+ display: inline-block;
146
+ border: 1px solid rgba(0, 240, 255, 0.3);
147
+ padding: 4px 12px;
148
+ border-radius: 20px;
149
+ }
150
+ .promo-title {
151
+ font-size: 38px;
152
+ font-weight: 800;
153
+ color: #fff;
154
+ margin: 0 0 20px 0;
155
+ line-height: 1.2;
156
+ text-transform: uppercase;
157
+ }
158
+ .promo-title span {
159
+ color: var(--neon-gold);
160
+ text-shadow: 0 0 10px rgba(255, 183, 3, 0.3);
161
+ }
162
+ .promo-text {
163
+ font-size: 16px;
164
+ color: #94a3b8;
165
+ max-width: 650px;
166
+ height: 80px;
167
+ margin: 0 auto;
168
+ line-height: 1.6;
169
+ overflow-y: auto;
170
+ }
171
+ .background-interactive-container {
172
+ position: fixed;
173
+ top: 50%;
174
+ left: 50%;
175
+ width: 150px;
176
+ height: 150px;
177
+ margin-top: -75px;
178
+ margin-left: -75px;
179
+ z-index: 1;
180
+ display: flex;
181
+ justify-content: center;
182
+ align-items: center;
183
+ perspective: 1000px;
184
+ animation: drift 24s infinite linear;
185
+ }
186
+ .crystal-core {
187
+ width: 100px;
188
+ height: 100px;
189
+ background: linear-gradient(
190
+ 135deg,
191
+ rgba(0, 240, 255, 0.15),
192
+ rgba(189, 0, 255, 0.15)
193
+ );
194
+ border: 2px solid rgba(0, 240, 255, 0.4);
195
+ box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
196
+ border-radius: 38% 62% 62% 38%;
197
+ cursor: pointer;
198
+ animation: floatAndRotate 6s infinite ease-in-out;
199
+ transition: all 0.3s ease;
200
+ }
201
+ .crystal-core:hover {
202
+ background: linear-gradient(
203
+ 135deg,
204
+ rgba(0, 240, 255, 0.4),
205
+ rgba(189, 0, 255, 0.4)
206
+ );
207
+ box-shadow: 0 0 40px rgba(0, 240, 255, 0.6);
208
+ }
209
+ .crystal-core:active {
210
+ transform: scale(0.85);
211
+ }
212
+ @keyframes drift {
213
+ 0% {
214
+ transform: translate(0vw, 0vh);
16
215
  }
17
- body {
18
- background-color: var(--bg-dark);
19
- color: var(--text-color);
20
- font-family: 'Segoe UI', Roboto, sans-serif;
21
- margin: 0;
22
- padding: 0;
23
- min-height: 100vh;
24
- display: flex;
25
- flex-direction: column;
26
- background-image:
27
- radial-gradient(circle at 80% 20%, rgba(189, 0, 255, 0.15) 0%, transparent 50%),
28
- radial-gradient(circle at 20% 80%, rgba(0, 240, 255, 0.1) 0%, transparent 50%);
216
+ 15% {
217
+ transform: translate(35vw, -35vh);
29
218
  }
30
- .bank-navbar {
31
- display: flex;
32
- justify-content: space-between;
33
- align-items: center;
34
- padding: 20px 40px;
35
- background: rgba(10, 11, 16, 0.8);
36
- border-bottom: 1px solid var(--border-color);
37
- backdrop-filter: blur(10px);
38
- box-sizing: border-box;
219
+ 30% {
220
+ transform: translate(-40vw, -20vh);
39
221
  }
40
- .logo {
41
- font-size: 22px;
42
- font-weight: bold;
43
- text-transform: uppercase;
44
- letter-spacing: 3px;
45
- color: #fff;
46
- text-shadow: 0 0 10px var(--neon-blue);
222
+ 45% {
223
+ transform: translate(-25vw, 30vh);
47
224
  }
48
- .logo span {
49
- color: var(--neon-purple);
225
+ 60% {
226
+ transform: translate(30vw, 25vh);
50
227
  }
51
- .auth-buttons {
52
- display: flex;
53
- gap: 15px;
228
+ 75% {
229
+ transform: translate(40vw, -10vh);
54
230
  }
55
- .btn-auth {
56
- padding: 10px 24px;
57
- font-size: 14px;
58
- font-weight: 600;
59
- text-transform: uppercase;
60
- letter-spacing: 1px;
61
- border-radius: 6px;
62
- cursor: pointer;
63
- transition: all 0.3s ease;
64
- outline: none;
231
+ 90% {
232
+ transform: translate(-30vw, -35vh);
65
233
  }
66
- .btn-login {
67
- background: transparent;
68
- color: var(--neon-blue);
69
- border: 2px solid var(--neon-blue);
70
- box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
234
+ 100% {
235
+ transform: translate(0vw, 0vh);
71
236
  }
72
- .btn-login:hover {
73
- background: var(--neon-blue);
74
- color: #000;
75
- box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
237
+ }
238
+ .promo-billboard {
239
+ background: var(--panel-bg);
240
+ border: 1px solid var(--border-color);
241
+ border-radius: 16px;
242
+ width: 100%;
243
+ max-width: 800px;
244
+ height: 380px;
245
+ padding: 30px 20px;
246
+ text-align: center;
247
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
248
+ backdrop-filter: blur(10px);
249
+ position: relative;
250
+ box-sizing: border-box;
251
+ overflow: hidden;
252
+ display: flex;
253
+ flex-direction: column;
254
+ justify-content: center;
255
+ align-items: center;
256
+ }
257
+ .corner-notification {
258
+ position: fixed;
259
+ top: 90px;
260
+ right: 40px;
261
+ color: var(--neon-gold);
262
+ font-weight: bold;
263
+ font-size: 20px;
264
+ text-shadow: 0 0 10px var(--neon-gold);
265
+ background: rgba(20, 24, 38, 0.85);
266
+ border: 1px solid var(--border-color);
267
+ padding: 10px 20px;
268
+ border-radius: 6px;
269
+ pointer-events: none;
270
+ z-index: 999;
271
+ animation: fadeOutNotice 1.5s ease-out forwards;
272
+ }
273
+ @keyframes fadeOutNotice {
274
+ 0% {
275
+ opacity: 0;
276
+ transform: translateY(-10px);
76
277
  }
77
- .btn-register {
78
- background: linear-gradient(135deg, var(--neon-purple), #8900ff);
79
- color: #fff;
80
- border: none;
81
- box-shadow: 0 0 15px rgba(189, 0, 255, 0.4);
278
+ 15% {
279
+ opacity: 1;
280
+ transform: translateY(0);
82
281
  }
83
- .btn-register:hover {
84
- transform: translateY(-2px);
85
- box-shadow: 0 0 25px rgba(189, 0, 255, 0.8);
282
+ 80% {
283
+ opacity: 1;
86
284
  }
87
- .main-content {
88
- flex: 1;
89
- display: flex;
90
- justify-content: center;
91
- align-items: center;
92
- padding: 40px;
285
+ 100% {
286
+ opacity: 0;
287
+ transform: translateY(-5px);
93
288
  }
94
- .promo-billboard {
95
- background: var(--panel-bg);
96
- border: 1px solid var(--border-color);
97
- border-radius: 16px;
98
- width: 800px;
99
- height: 380px;
100
- padding: 40px;
101
- text-align: center;
102
- box-shadow: 0 20px 50px rgba(0,0,0,0.5);
103
- backdrop-filter: blur(10px);
104
- position: relative;
105
- box-sizing: border-box;
106
- overflow: hidden;
107
- display: flex;
108
- flex-direction: column;
109
- justify-content: center;
110
- align-items: center;
111
- }
112
- .promo-billboard::before {
113
- content: '';
114
- position: absolute;
115
- top: 0; left: 0; width: 4px; height: 100%;
116
- background: var(--neon-blue);
289
+ }
290
+ @keyframes fadeIn {
291
+ from {
292
+ opacity: 0;
293
+ transform: translateY(10px);
117
294
  }
118
- .promo-slider {
119
- width: 100%;
295
+ to {
296
+ opacity: 1;
297
+ transform: translateY(0);
120
298
  }
121
- .promo-slide {
122
- display: none;
123
- animation: fadeIn 0.6s ease-in-out forwards;
299
+ }
300
+ @media (max-width: 600px) {
301
+ body {
302
+ padding: 10px;
124
303
  }
125
- .promo-slide.active {
126
- display: block;
304
+ .bank-navbar {
305
+ padding: 15px 20px;
127
306
  }
128
- .promo-tag {
129
- font-size: 11px;
130
- text-transform: uppercase;
131
- letter-spacing: 3px;
132
- color: var(--neon-blue);
133
- margin-bottom: 20px;
134
- display: inline-block;
135
- border: 1px solid rgba(0, 240, 255, 0.3);
136
- padding: 4px 12px;
137
- border-radius: 20px;
307
+ .logo {
308
+ font-size: 18px;
309
+ }
310
+ .btn-auth {
311
+ padding: 8px 16px;
312
+ font-size: 12px;
138
313
  }
139
314
  .promo-title {
140
- font-size: 38px;
141
- font-weight: 800;
142
- color: #fff;
143
- margin: 0 0 20px 0;
144
- line-height: 1.2;
145
- text-transform: uppercase;
315
+ font-size: 26px;
316
+ margin-bottom: 15px;
146
317
  }
147
- .promo-title span {
148
- color: var(--neon-gold);
149
- text-shadow: 0 0 10px rgba(255, 183, 3, 0.3);
318
+ .promo-text {
319
+ font-size: 14px;
320
+ height: 90px;
150
321
  }
151
- .promo-text {
152
- font-size: 16px;
153
- color: #94a3b8;
154
- max-width: 650px;
155
- height: 80px;
156
- margin: 0 auto;
157
- line-height: 1.6;
158
- overflow-y: auto;
159
- }
160
- .background-interactive-container {
161
- position: fixed;
162
- top: 50%;
163
- left: 50%;
164
- width: 150px;
165
- height: 150px;
166
- margin-top: -75px;
167
- margin-left: -75px;
168
- z-index: 1;
169
- display: flex;
170
- justify-content: center;
171
- align-items: center;
172
- perspective: 1000px;
173
- animation: drift 24s infinite linear;
174
- }
175
- .crystal-core {
176
- width: 100px;
177
- height: 100px;
178
- background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(189, 0, 255, 0.15));
179
- border: 2px solid rgba(0, 240, 255, 0.4);
180
- box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
181
- border-radius: 38% 62% 62% 38%;
182
- cursor: pointer;
183
- animation: floatAndRotate 6s infinite ease-in-out;
184
- transition: all 0.3s ease;
185
- }
186
- .crystal-core:hover {
187
- background: linear-gradient(135deg, rgba(0, 240, 255, 0.4), rgba(189, 0, 255, 0.4));
188
- box-shadow: 0 0 40px rgba(0, 240, 255, 0.6);
189
- }
190
- .crystal-core:active {
191
- transform: scale(0.85);
192
- }
193
- @keyframes drift {
194
- 0% { transform: translate(0vw, 0vh); }
195
- 15% { transform: translate(35vw, -35vh); }
196
- 30% { transform: translate(-40vw, -20vh); }
197
- 45% { transform: translate(-25vw, 30vh); }
198
- 60% { transform: translate(30vw, 25vh); }
199
- 75% { transform: translate(40vw, -10vh); }
200
- 90% { transform: translate(-30vw, -35vh); }
201
- 100% { transform: translate(0vw, 0vh); }
202
- }
203
- .promo-billboard {
204
- background: var(--panel-bg);
205
- border: 1px solid var(--border-color);
206
- border-radius: 16px;
207
- width: 100%;
208
- max-width: 800px;
209
- height: 380px;
210
- padding: 30px 20px;
211
- text-align: center;
212
- box-shadow: 0 20px 50px rgba(0,0,0,0.5);
213
- backdrop-filter: blur(10px);
214
- position: relative;
215
- box-sizing: border-box;
216
- overflow: hidden;
217
- display: flex;
218
- flex-direction: column;
219
- justify-content: center;
220
- align-items: center;
221
- }
222
- .corner-notification {
223
- position: fixed;
224
- top: 90px;
225
- right: 40px;
226
- color: var(--neon-gold);
227
- font-weight: bold;
228
- font-size: 20px;
229
- text-shadow: 0 0 10px var(--neon-gold);
230
- background: rgba(20, 24, 38, 0.85);
231
- border: 1px solid var(--border-color);
232
- padding: 10px 20px;
233
- border-radius: 6px;
234
- pointer-events: none;
235
- z-index: 999;
236
- animation: fadeOutNotice 1.5s ease-out forwards;
237
- }
238
- @keyframes fadeOutNotice {
239
- 0% { opacity: 0; transform: translateY(-10px); }
240
- 15% { opacity: 1; transform: translateY(0); }
241
- 80% { opacity: 1; }
242
- 100% { opacity: 0; transform: translateY(-5px); }
243
- }
244
- @keyframes fadeIn {
245
- from { opacity: 0; transform: translateY(10px); }
246
- to { opacity: 1; transform: translateY(0); }
322
+ .promo-tag {
323
+ font-size: 10px;
324
+ margin-bottom: 15px;
247
325
  }
248
- @media (max-width: 600px) {
249
- body {
250
- padding: 10px;
251
- }
252
- .bank-navbar {
253
- padding: 15px 20px;
254
- }
255
- .logo {
256
- font-size: 18px;
257
- }
258
- .btn-auth {
259
- padding: 8px 16px;
260
- font-size: 12px;
261
- }
262
- .promo-title {
263
- font-size: 26px;
264
- margin-bottom: 15px;
265
- }
266
- .promo-text {
267
- font-size: 14px;
268
- height: 90px;
269
- }
270
- .promo-tag {
271
- font-size: 10px;
272
- margin-bottom: 15px;
273
- }
274
- .corner-notification {
275
- top: auto;
276
- bottom: 20px;
277
- right: 50%;
278
- transform: translateX(50%);
279
- font-size: 16px;
280
- width: 80%;
281
- text-align: center;
282
- }
283
- @keyframes fadeOutNotice {
284
- 0% { opacity: 0; transform: translate(50%, 10px); }
285
- 15% { opacity: 1; transform: translate(50%, 0); }
286
- 80% { opacity: 1; }
287
- 100% { opacity: 0; transform: translate(50%, -5px); }
288
- }
289
- }
326
+ .corner-notification {
327
+ top: auto;
328
+ bottom: 20px;
329
+ right: 50%;
330
+ transform: translateX(50%);
331
+ font-size: 16px;
332
+ width: 80%;
333
+ text-align: center;
334
+ }
335
+ @keyframes fadeOutNotice {
336
+ 0% {
337
+ opacity: 0;
338
+ transform: translate(50%, 10px);
339
+ }
340
+ 15% {
341
+ opacity: 1;
342
+ transform: translate(50%, 0);
343
+ }
344
+ 80% {
345
+ opacity: 1;
346
+ }
347
+ 100% {
348
+ opacity: 0;
349
+ transform: translate(50%, -5px);
350
+ }
351
+ }
352
+ }
290
353
  </style>
291
- </head>
292
- <body>
354
+ </head>
355
+ <body>
293
356
  <div class="background-interactive-container">
294
- <div class="crystal-ring"></div>
295
- <div class="crystal-core" id="interactive-crystal" onclick="spawnParticle(event)"></div>
296
- </div>
357
+ <div class="crystal-ring"></div>
358
+ <div
359
+ class="crystal-core"
360
+ id="interactive-crystal"
361
+ onclick="spawnParticle(event)"
362
+ ></div>
363
+ </div>
297
364
  <header class="bank-navbar">
298
- <div class="logo">GAME-<span>BANK</span></div>
299
- <div class="auth-buttons">
300
- <a href="/bank/login.html"><button class="btn-auth btn-login">Войти</button></a>
301
- <a href="/bank/register.html"><button class="btn-auth btn-register">Регистрация</button></a>
302
- </div>
365
+ <div class="logo">GAME-<span>BANK</span></div>
366
+ <div class="auth-buttons">
367
+ <a href="/bank/login.html"
368
+ ><button class="btn-auth btn-login">Войти</button></a
369
+ >
370
+ <a href="/bank/register.html"
371
+ ><button class="btn-auth btn-register">Регистрация</button></a
372
+ >
373
+ </div>
303
374
  </header>
304
375
  <main class="main-content">
305
- <div class="promo-billboard">
306
- <div class="promo-slider">
307
- <div class="promo-slide active">
308
- <span class="promo-tag">Введение</span>
309
- <h1 class="promo-title"><span>Первый</span> npm модуль для создания банка</h1>
310
- <p class="promo-text">Открой щёт в защищёмном от атак банке!</p>
311
- </div>
312
- <div class="promo-slide">
313
- <span class="promo-tag">Возможности</span>
314
- <h1 class="promo-title">Открой <span>большие возможности</span> в нашем банке</h1>
315
- <p class="promo-text">Регистрация полностью бесплатная</p>
316
- </div>
317
- <div class="promo-slide">
318
- <span class="promo-tag">Регистрация</span>
319
- <h1 class="promo-title"><span>нет аккаунта?</span></h1>
320
- <p class="promo-text">Нажми на кнопку "регистрация"</p>
321
- </div>
322
- <div class="promo-slide">
323
- <span class="promo-tag">Вход</span>
324
- <h1 class="promo-title"><span>Не знаешь как войти?</span></h1>
325
- <p class="promo-text">Нажми на кнопку "Войти"</p>
326
- </div>
327
- <div class="promo-slide">
328
- <span class="promo-tag">Безкомисный переводы</span>
329
- <h1 class="promo-title"><span>Не боись</span> потерять деньги при переводе</h1>
330
- <p class="promo-text">0% комиссии при переводе любого количества средств</p>
331
- </div>
332
- <div class="promo-slide">
333
- <span class="promo-tag">Кредит</span>
334
- <h1 class="promo-title"><span>Мало </span>денег?</h1>
335
- <p class="promo-text">Возьмите кредит под 0% (акция)</p>
336
- </div>
337
- <div class="promo-slide">
338
- <span class="promo-tag">Управление</span>
339
- <h1 class="promo-title">Хочешь <span>отредактировать</span> профиль?</h1>
340
- <p class="promo-text">Зайти в аккаунт, а после нажми на "Профиль"</p>
341
- </div>
342
- </div>
376
+ <div class="promo-billboard">
377
+ <div class="promo-slider">
378
+ <div class="promo-slide active">
379
+ <span class="promo-tag">Введение</span>
380
+ <h1 class="promo-title">
381
+ <span>Первый</span> npm модуль для создания банка
382
+ </h1>
383
+ <p class="promo-text">Открой щёт в защищёмном от атак банке!</p>
384
+ </div>
385
+ <div class="promo-slide">
386
+ <span class="promo-tag">Возможности</span>
387
+ <h1 class="promo-title">
388
+ Открой <span>большие возможности</span> в нашем банке
389
+ </h1>
390
+ <p class="promo-text">Регистрация полностью бесплатная</p>
391
+ </div>
392
+ <div class="promo-slide">
393
+ <span class="promo-tag">Регистрация</span>
394
+ <h1 class="promo-title"><span>нет аккаунта?</span></h1>
395
+ <p class="promo-text">Нажми на кнопку "регистрация"</p>
396
+ </div>
397
+ <div class="promo-slide">
398
+ <span class="promo-tag">Вход</span>
399
+ <h1 class="promo-title"><span>Не знаешь как войти?</span></h1>
400
+ <p class="promo-text">Нажми на кнопку "Войти"</p>
401
+ </div>
402
+ <div class="promo-slide">
403
+ <span class="promo-tag">Безкомисный переводы</span>
404
+ <h1 class="promo-title">
405
+ <span>Не боись</span> потерять деньги при переводе
406
+ </h1>
407
+ <p class="promo-text">
408
+ 0% комиссии при переводе любого количества средств
409
+ </p>
410
+ </div>
411
+ <div class="promo-slide">
412
+ <span class="promo-tag">Кредит</span>
413
+ <h1 class="promo-title"><span>Мало </span>денег?</h1>
414
+ <p class="promo-text">Возьмите кредит под 10%</p>
415
+ </div>
416
+ <div class="promo-slide">
417
+ <span class="promo-tag">Управление</span>
418
+ <h1 class="promo-title">
419
+ Хочешь <span>отредактировать</span> профиль?
420
+ </h1>
421
+ <p class="promo-text">
422
+ Зайти в аккаунт, а после нажми на "Профиль"
423
+ </p>
424
+ </div>
343
425
  </div>
426
+ </div>
344
427
  </main>
345
428
 
346
429
  <script>
347
- const slides = document.querySelectorAll('.promo-slide');
348
- let currentSlide = 0;
430
+ const slides = document.querySelectorAll(".promo-slide");
431
+ let currentSlide = 0;
349
432
 
350
- function nextSlide() {
351
- slides[currentSlide].classList.remove('active');
352
- currentSlide = (currentSlide + 1) % slides.length;
353
- slides[currentSlide].classList.add('active');
354
- }
355
- setInterval(nextSlide, 5000);
356
- function moveObjectRandomly() {
357
- const maxX = window.innerWidth - 160;
358
- const maxY = window.innerHeight - 160;
359
- const randomX = Math.floor(Math.random() * maxX);
360
- const randomY = Math.floor(Math.random() * maxY);
361
- container.style.left = randomX + 'px';
362
- container.style.top = randomY + 'px';
363
- }
364
- moveObjectRandomly();
365
- setInterval(moveObjectRandomly, 4000);
366
- function spawnParticle(event) {
367
- const notice = document.createElement('div');
368
- notice.className = 'corner-notification';
369
- const rewards = ['+🪙', '+🪙', '+⭐', '+💎'];
370
- notice.innerText = rewards[Math.floor(Math.random() * rewards.length)];
371
- document.body.appendChild(notice);
372
- setTimeout(() => {
373
- notice.remove();
374
- }, 500);
375
- }
433
+ function nextSlide() {
434
+ slides[currentSlide].classList.remove("active");
435
+ currentSlide = (currentSlide + 1) % slides.length;
436
+ slides[currentSlide].classList.add("active");
437
+ }
438
+ setInterval(nextSlide, 5000);
439
+ function moveObjectRandomly() {
440
+ const maxX = window.innerWidth - 160;
441
+ const maxY = window.innerHeight - 160;
442
+ const randomX = Math.floor(Math.random() * maxX);
443
+ const randomY = Math.floor(Math.random() * maxY);
444
+ container.style.left = randomX + "px";
445
+ container.style.top = randomY + "px";
446
+ }
447
+ moveObjectRandomly();
448
+ setInterval(moveObjectRandomly, 4000);
449
+ function spawnParticle(event) {
450
+ const notice = document.createElement("div");
451
+ notice.className = "corner-notification";
452
+ const rewards = ["+🪙", "+🪙", "+⭐", "+💎"];
453
+ notice.innerText = rewards[Math.floor(Math.random() * rewards.length)];
454
+ document.body.appendChild(notice);
455
+ setTimeout(() => {
456
+ notice.remove();
457
+ }, 500);
458
+ }
376
459
  </script>
377
- </body>
378
- </html>
460
+ </body>
461
+ </html>