Phoenixoni commited on
Commit
773c686
·
verified ·
1 Parent(s): 834cd9d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +744 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mobile Iphone
3
- emoji: 📉
4
- colorFrom: purple
5
- colorTo: green
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: mobile-iphone
3
+ emoji: 🐳
4
+ colorFrom: green
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,744 @@
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="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>iPhone Экран</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes fadeIn {
11
+ from { opacity: 0; }
12
+ to { opacity: 1; }
13
+ }
14
+
15
+ body {
16
+ background-color: #000;
17
+ display: flex;
18
+ justify-content: center;
19
+ align-items: center;
20
+ height: 100vh;
21
+ overflow: hidden;
22
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
23
+ animation: fadeIn 0.5s ease-in;
24
+ }
25
+
26
+ .iphone-frame {
27
+ position: relative;
28
+ width: 375px;
29
+ height: 812px;
30
+ background: #000;
31
+ border-radius: 60px;
32
+ border: 12px solid #1a1a1a;
33
+ overflow: hidden;
34
+ box-shadow: 0 0 0 4px #333, 0 30px 60px rgba(0,0,0,0.5);
35
+ }
36
+
37
+ .screen {
38
+ position: absolute;
39
+ top: 0;
40
+ left: 0;
41
+ right: 0;
42
+ bottom: 0;
43
+ background: linear-gradient(to bottom, #6bb1ff, #0066ff);
44
+ overflow: hidden;
45
+ }
46
+
47
+ .notch {
48
+ position: absolute;
49
+ top: 0;
50
+ left: 50%;
51
+ transform: translateX(-50%);
52
+ width: 150px;
53
+ height: 35px;
54
+ background: #000;
55
+ border-bottom-left-radius: 18px;
56
+ border-bottom-right-radius: 18px;
57
+ z-index: 10;
58
+ }
59
+
60
+ .status-bar {
61
+ position: absolute;
62
+ top: 10px;
63
+ left: 0;
64
+ right: 0;
65
+ display: flex;
66
+ justify-content: space-between;
67
+ padding: 0 25px;
68
+ color: white;
69
+ font-size: 14px;
70
+ font-weight: 600;
71
+ z-index: 5;
72
+ }
73
+
74
+ .time {
75
+ position: absolute;
76
+ left: 50%;
77
+ transform: translateX(-50%);
78
+ }
79
+
80
+ .app-grid {
81
+ display: grid;
82
+ grid-template-columns: repeat(4, 1fr);
83
+ gap: 20px;
84
+ padding: 80px 25px 25px;
85
+ }
86
+
87
+ .app-icon {
88
+ display: flex;
89
+ flex-direction: column;
90
+ align-items: center;
91
+ color: white;
92
+ text-shadow: 0 1px 3px rgba(0,0,0,0.3);
93
+ cursor: pointer;
94
+ transition: transform 0.2s;
95
+ }
96
+
97
+ .app-icon:active {
98
+ transform: scale(0.9);
99
+ }
100
+
101
+ .app-icon-circle {
102
+ width: 60px;
103
+ height: 60px;
104
+ border-radius: 15px;
105
+ display: flex;
106
+ justify-content: center;
107
+ align-items: center;
108
+ margin-bottom: 5px;
109
+ background: rgba(255,255,255,0.1);
110
+ backdrop-filter: blur(10px);
111
+ }
112
+
113
+ .app-name {
114
+ font-size: 12px;
115
+ text-align: center;
116
+ width: 100%;
117
+ overflow: hidden;
118
+ text-overflow: ellipsis;
119
+ }
120
+
121
+ .dock {
122
+ position: absolute;
123
+ bottom: 100px;
124
+ left: 25px;
125
+ right: 25px;
126
+ height: 80px;
127
+ background: rgba(255,255,255,0.1);
128
+ backdrop-filter: blur(20px);
129
+ border-radius: 25px;
130
+ display: flex;
131
+ justify-content: space-around;
132
+ align-items: center;
133
+ padding: 0 15px;
134
+ }
135
+
136
+ .dock-icon {
137
+ width: 60px;
138
+ height: 60px;
139
+ border-radius: 12px;
140
+ display: flex;
141
+ justify-content: center;
142
+ align-items: center;
143
+ color: white;
144
+ cursor: pointer;
145
+ transition: transform 0.2s;
146
+ }
147
+
148
+ .dock-icon:active {
149
+ transform: scale(0.9);
150
+ }
151
+
152
+ .home-indicator {
153
+ position: absolute;
154
+ bottom: 10px;
155
+ left: 50%;
156
+ transform: translateX(-50%);
157
+ width: 120px;
158
+ height: 5px;
159
+ background: white;
160
+ border-radius: 3px;
161
+ opacity: 0.8;
162
+ }
163
+
164
+ .app-screen {
165
+ position: absolute;
166
+ top: 0;
167
+ left: 0;
168
+ right: 0;
169
+ bottom: 0;
170
+ background: white;
171
+ z-index: 20;
172
+ display: none;
173
+ overflow: hidden;
174
+ }
175
+
176
+ .app-header {
177
+ height: 44px;
178
+ display: flex;
179
+ justify-content: space-between;
180
+ align-items: center;
181
+ padding: 0 15px;
182
+ background: #f8f8f8;
183
+ border-bottom: 1px solid #e5e5e5;
184
+ }
185
+
186
+ .app-title {
187
+ font-weight: 600;
188
+ font-size: 17px;
189
+ }
190
+
191
+ .app-content {
192
+ height: calc(100% - 44px);
193
+ overflow-y: auto;
194
+ -webkit-overflow-scrolling: touch;
195
+ }
196
+
197
+ .control-center {
198
+ position: absolute;
199
+ bottom: 0;
200
+ left: 0;
201
+ right: 0;
202
+ background: rgba(255,255,255,0.8);
203
+ backdrop-filter: blur(20px);
204
+ border-top-left-radius: 25px;
205
+ border-top-right-radius: 25px;
206
+ padding: 20px;
207
+ z-index: 30;
208
+ transform: translateY(100%);
209
+ transition: transform 0.3s ease-out;
210
+ }
211
+
212
+ .control-center.show {
213
+ transform: translateY(0);
214
+ }
215
+
216
+ .cc-grid {
217
+ display: grid;
218
+ grid-template-columns: repeat(4, 1fr);
219
+ gap: 15px;
220
+ }
221
+
222
+ .cc-tile {
223
+ background: rgba(255,255,255,0.7);
224
+ border-radius: 12px;
225
+ height: 60px;
226
+ display: flex;
227
+ flex-direction: column;
228
+ justify-content: center;
229
+ align-items: center;
230
+ cursor: pointer;
231
+ }
232
+
233
+ .cc-tile:active {
234
+ opacity: 0.7;
235
+ }
236
+
237
+ .cc-tile i {
238
+ font-size: 24px;
239
+ margin-bottom: 5px;
240
+ }
241
+
242
+ .cc-tile span {
243
+ font-size: 10px;
244
+ font-weight: 500;
245
+ }
246
+
247
+ .cc-slider {
248
+ margin-top: 20px;
249
+ background: rgba(255,255,255,0.7);
250
+ border-radius: 12px;
251
+ padding: 15px;
252
+ }
253
+
254
+ .slider-container {
255
+ display: flex;
256
+ align-items: center;
257
+ }
258
+
259
+ .slider-container i {
260
+ font-size: 20px;
261
+ margin-right: 10px;
262
+ }
263
+
264
+ .slider {
265
+ flex: 1;
266
+ height: 4px;
267
+ background: #ccc;
268
+ border-radius: 2px;
269
+ position: relative;
270
+ }
271
+
272
+ .slider-thumb {
273
+ position: absolute;
274
+ width: 16px;
275
+ height: 16px;
276
+ background: white;
277
+ border-radius: 50%;
278
+ top: -6px;
279
+ left: 70%;
280
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
281
+ }
282
+
283
+ .notification-center {
284
+ position: absolute;
285
+ top: 0;
286
+ left: 0;
287
+ right: 0;
288
+ bottom: 0;
289
+ background: rgba(255,255,255,0.8);
290
+ backdrop-filter: blur(20px);
291
+ z-index: 30;
292
+ transform: translateY(-100%);
293
+ transition: transform 0.3s ease-out;
294
+ overflow-y: auto;
295
+ -webkit-overflow-scrolling: touch;
296
+ }
297
+
298
+ .notification-center.show {
299
+ transform: translateY(0);
300
+ }
301
+
302
+ .notification {
303
+ background: white;
304
+ border-radius: 12px;
305
+ margin: 10px;
306
+ padding: 12px;
307
+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
308
+ }
309
+
310
+ .notification-header {
311
+ display: flex;
312
+ justify-content: space-between;
313
+ margin-bottom: 5px;
314
+ }
315
+
316
+ .notification-app {
317
+ font-weight: 600;
318
+ font-size: 14px;
319
+ }
320
+
321
+ .notification-time {
322
+ font-size: 12px;
323
+ color: #8e8e93;
324
+ }
325
+
326
+ .notification-content {
327
+ font-size: 14px;
328
+ }
329
+
330
+ .swipe-down-area {
331
+ position: absolute;
332
+ top: 0;
333
+ left: 0;
334
+ right: 0;
335
+ height: 40px;
336
+ z-index: 5;
337
+ }
338
+
339
+ .swipe-up-area {
340
+ position: absolute;
341
+ bottom: 0;
342
+ left: 0;
343
+ right: 0;
344
+ height: 40px;
345
+ z-index: 5;
346
+ }
347
+ </style>
348
+ </head>
349
+ <body>
350
+ <div class="iphone-frame">
351
+ <div class="screen">
352
+ <div class="notch"></div>
353
+ <div class="status-bar">
354
+ <div>9:41</div>
355
+ <div class="time" id="iphone-time">14:25</div>
356
+ <div>
357
+ <i class="fas fa-signal"></i>
358
+ <i class="fas fa-wifi ml-1"></i>
359
+ <i class="fas fa-battery-full ml-1"></i>
360
+ </div>
361
+ </div>
362
+
363
+ <div class="app-grid">
364
+ <!-- Первый ряд -->
365
+ <div class="app-icon" onclick="openApp('phone')">
366
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #4CD964, #2AC940);">
367
+ <i class="fas fa-phone" style="color: white;"></i>
368
+ </div>
369
+ <div class="app-name">Телефон</div>
370
+ </div>
371
+
372
+ <div class="app-icon" onclick="openApp('safari')">
373
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #1DA1F2, #1A91DA);">
374
+ <i class="fas fa-globe" style="color: white;"></i>
375
+ </div>
376
+ <div class="app-name">Safari</div>
377
+ </div>
378
+
379
+ <div class="app-icon" onclick="openApp('messages')">
380
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #32C759, #2DBE50);">
381
+ <i class="fas fa-comment" style="color: white;"></i>
382
+ </div>
383
+ <div class="app-name">Сообщения</div>
384
+ </div>
385
+
386
+ <div class="app-icon" onclick="openApp('music')">
387
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #FF2D55, #FF375F);">
388
+ <i class="fas fa-music" style="color: white;"></i>
389
+ </div>
390
+ <div class="app-name">Музыка</div>
391
+ </div>
392
+
393
+ <!-- Второй ряд -->
394
+ <div class="app-icon" onclick="openApp('mail')">
395
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #007AFF, #0A84FF);">
396
+ <i class="fas fa-envelope" style="color: white;"></i>
397
+ </div>
398
+ <div class="app-name">Почта</div>
399
+ </div>
400
+
401
+ <div class="app-icon" onclick="openApp('calendar')">
402
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #5856D6, #5E5CE6);">
403
+ <i class="fas fa-calendar" style="color: white;"></i>
404
+ </div>
405
+ <div class="app-name">Календарь</div>
406
+ </div>
407
+
408
+ <div class="app-icon" onclick="openApp('photos')">
409
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #FF9500, #FF9F0A);">
410
+ <i class="fas fa-camera" style="color: white;"></i>
411
+ </div>
412
+ <div class="app-name">Фото</div>
413
+ </div>
414
+
415
+ <div class="app-icon" onclick="openApp('camera')">
416
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #FF375F, #FF2D55);">
417
+ <i class="fas fa-camera-retro" style="color: white;"></i>
418
+ </div>
419
+ <div class="app-name">Камера</div>
420
+ </div>
421
+
422
+ <!-- Третий ряд -->
423
+ <div class="app-icon" onclick="openApp('maps')">
424
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #34C759, #30D158);">
425
+ <i class="fas fa-map" style="color: white;"></i>
426
+ </div>
427
+ <div class="app-name">Карты</div>
428
+ </div>
429
+
430
+ <div class="app-icon" onclick="openApp('weather')">
431
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #32ADE6, #0A84FF);">
432
+ <i class="fas fa-cloud-sun" style="color: white;"></i>
433
+ </div>
434
+ <div class="app-name">Погода</div>
435
+ </div>
436
+
437
+ <div class="app-icon" onclick="openApp('notes')">
438
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #FFCC00, #FFD60A);">
439
+ <i class="fas fa-sticky-note" style="color: white;"></i>
440
+ </div>
441
+ <div class="app-name">Заметки</div>
442
+ </div>
443
+
444
+ <div class="app-icon" onclick="openApp('reminders')">
445
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #5E5CE6, #5856D6);">
446
+ <i class="fas fa-list-check" style="color: white;"></i>
447
+ </div>
448
+ <div class="app-name">Напоминания</div>
449
+ </div>
450
+
451
+ <!-- Четвертый ряд -->
452
+ <div class="app-icon" onclick="openApp('settings')">
453
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #8E8E93, #7C7C80);">
454
+ <i class="fas fa-gear" style="color: white;"></i>
455
+ </div>
456
+ <div class="app-name">Настройки</div>
457
+ </div>
458
+
459
+ <div class="app-icon" onclick="openApp('appstore')">
460
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #0A84FF, #007AFF);">
461
+ <i class="fas fa-shopping-bag" style="color: white;"></i>
462
+ </div>
463
+ <div class="app-name">App Store</div>
464
+ </div>
465
+
466
+ <div class="app-icon" onclick="openApp('wallet')">
467
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #5856D6, #5E5CE6);">
468
+ <i class="fas fa-wallet" style="color: white;"></i>
469
+ </div>
470
+ <div class="app-name">Wallet</div>
471
+ </div>
472
+
473
+ <div class="app-icon" onclick="openApp('health')">
474
+ <div class="app-icon-circle" style="background: linear-gradient(to bottom, #FF375F, #FF2D55);">
475
+ <i class="fas fa-heart-pulse" style="color: white;"></i>
476
+ </div>
477
+ <div class="app-name">Здоровье</div>
478
+ </div>
479
+ </div>
480
+
481
+ <div class="dock">
482
+ <div class="dock-icon" onclick="openApp('phone')">
483
+ <i class="fas fa-phone" style="color: white; font-size: 24px;"></i>
484
+ </div>
485
+ <div class="dock-icon" onclick="openApp('safari')">
486
+ <i class="fas fa-globe" style="color: white; font-size: 24px;"></i>
487
+ </div>
488
+ <div class="dock-icon" onclick="openApp('messages')">
489
+ <i class="fas fa-comment" style="color: white; font-size: 24px;"></i>
490
+ </div>
491
+ <div class="dock-icon" onclick="openApp('music')">
492
+ <i class="fas fa-music" style="color: white; font-size: 24px;"></i>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="home-indicator"></div>
497
+
498
+ <!-- Область для свайпа вниз (Control Center) -->
499
+ <div class="swipe-down-area" id="swipe-down-area"></div>
500
+
501
+ <!-- Область для свайпа вверх (Notification Center) -->
502
+ <div class="swipe-up-area" id="swipe-up-area"></div>
503
+ </div>
504
+
505
+ <!-- Control Center -->
506
+ <div class="control-center" id="control-center">
507
+ <div class="cc-grid">
508
+ <div class="cc-tile" onclick="toggleAirplaneMode()">
509
+ <i class="fas fa-plane"></i>
510
+ <span>Авиарежим</span>
511
+ </div>
512
+ <div class="cc-tile" onclick="toggleWifi()">
513
+ <i class="fas fa-wifi"></i>
514
+ <span>Wi-Fi</span>
515
+ </div>
516
+ <div class="cc-tile" onclick="toggleBluetooth()">
517
+ <i class="fas fa-bluetooth"></i>
518
+ <span>Bluetooth</span>
519
+ </div>
520
+ <div class="cc-tile" onclick="toggleFlashlight()">
521
+ <i class="fas fa-lightbulb"></i>
522
+ <span>Фонарик</span>
523
+ </div>
524
+
525
+ <div class="cc-tile" onclick="toggleRotationLock()">
526
+ <i class="fas fa-lock"></i>
527
+ <span>Блокир.</span>
528
+ </div>
529
+ <div class="cc-tile" onclick="openSettings('display')">
530
+ <i class="fas fa-moon"></i>
531
+ <span>Темный режим</span>
532
+ </div>
533
+ <div class="cc-tile" onclick="openSettings('battery')">
534
+ <i class="fas fa-battery-three-quarters"></i>
535
+ <span>Экономия</span>
536
+ </div>
537
+ <div class="cc-tile" onclick="openSettings('wifi')">
538
+ <i class="fas fa-wifi"></i>
539
+ <span>Сеть</span>
540
+ </div>
541
+ </div>
542
+
543
+ <div class="cc-slider">
544
+ <div class="slider-container">
545
+ <i class="fas fa-sun"></i>
546
+ <div class="slider">
547
+ <div class="slider-thumb"></div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <div class="text-center mt-4">
553
+ <button class="px-4 py-2 bg-gray-200 rounded-full" onclick="hideControlCenter()">Закрыть</button>
554
+ </div>
555
+ </div>
556
+
557
+ <!-- Notification Center -->
558
+ <div class="notification-center" id="notification-center">
559
+ <div class="text-center py-4 font-medium">Сегодня</div>
560
+
561
+ <div class="notification">
562
+ <div class="notification-header">
563
+ <div class="notification-app">Сообщения</div>
564
+ <div class="notification-time">10:30</div>
565
+ </div>
566
+ <div class="notification-content">Новое сообщение от Алексея: "Привет, как дела?"</div>
567
+ </div>
568
+
569
+ <div class="notification">
570
+ <div class="notification-header">
571
+ <div class="notification-app">Почта</div>
572
+ <div class="notification-time">09:45</div>
573
+ </div>
574
+ <div class="notification-content">Новое письмо: "Ваш заказ был отправлен"</div>
575
+ </div>
576
+
577
+ <div class="notification">
578
+ <div class="notification-header">
579
+ <div class="notification-app">Напоминания</div>
580
+ <div class="notification-time">08:15</div>
581
+ </div>
582
+ <div class="notification-content">Запланировано: "Встреча в 14:00"</div>
583
+ </div>
584
+
585
+ <div class="text-center py-4">
586
+ <button class="px-4 py-2 bg-gray-200 rounded-full" onclick="hideNotificationCenter()">Закрыть</button>
587
+ </div>
588
+ </div>
589
+
590
+ <!-- Экран приложения -->
591
+ <div class="app-screen" id="phone-app">
592
+ <div class="app-header">
593
+ <div class="app-title">Телефон</div>
594
+ <div onclick="closeApp('phone')">
595
+ <i class="fas fa-chevron-down"></i>
596
+ </div>
597
+ </div>
598
+ <div class="app-content">
599
+ <div class="p-4">
600
+ <div class="text-center text-gray-500 mt-10">Избранные контакты</div>
601
+ <div class="mt-4">
602
+ <div class="flex items-center p-3 border-b">
603
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">И</div>
604
+ <div>
605
+ <div class="font-medium">Иван Петров</div>
606
+ <div class="text-gray-500 text-sm">мобильный</div>
607
+ </div>
608
+ </div>
609
+ <div class="flex items-center p-3 border-b">
610
+ <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white mr-3">А</div>
611
+ <div>
612
+ <div class="font-medium">Алексей Смирнов</div>
613
+ <div class="text-gray-500 text-sm">рабочий</div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+
621
+ <div class="app-screen" id="safari-app">
622
+ <div class="app-header">
623
+ <div class="app-title">Safari</div>
624
+ <div onclick="closeApp('safari')">
625
+ <i class="fas fa-chevron-down"></i>
626
+ </div>
627
+ </div>
628
+ <div class="app-content">
629
+ <div class="p-4">
630
+ <div class="text-center">
631
+ <img src="https://www.apple.com/ac/globalnav/7/ru_RU/images/be15095f-5a20-57d0-ad14-cf4c638e223a/globalnav_apple_image__b5er5ngrzxqq_large.svg" alt="Apple" class="h-10 mx-auto mb-4">
632
+ <div class="relative">
633
+ <input type="text" class="w-full p-2 pl-8 bg-gray-100 rounded-full" placeholder="Поиск или введите название сайта">
634
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+
641
+ <div class="app-screen" id="messages-app">
642
+ <div class="app-header">
643
+ <div class="app-title">Сообщения</div>
644
+ <div onclick="closeApp('messages')">
645
+ <i class="fas fa-chevron-down"></i>
646
+ </div>
647
+ </div>
648
+ <div class="app-content">
649
+ <div class="p-2">
650
+ <div class="flex items-center p-3 border-b">
651
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">И</div>
652
+ <div>
653
+ <div class="font-medium">Иван Петров</div>
654
+ <div class="text-gray-500 text-sm">Привет, как дела?</div>
655
+ </div>
656
+ <div class="ml-auto text-gray-500 text-sm">10:30</div>
657
+ </div>
658
+ <div class="flex items-center p-3 border-b">
659
+ <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white mr-3">А</div>
660
+ <div>
661
+ <div class="font-medium">Алексей Смирнов</div>
662
+ <div class="text-gray-500 text-sm">Встречаемся в 14:00</div>
663
+ </div>
664
+ <div class="ml-auto text-gray-500 text-sm">09:45</div>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </div>
670
+
671
+ <script>
672
+ // Обновление времени
673
+ function updateTime() {
674
+ const now = new Date();
675
+ const timeElement = document.getElementById('iphone-time');
676
+
677
+ const hours = now.getHours().toString().padStart(2, '0');
678
+ const minutes = now.getMinutes().toString().padStart(2, '0');
679
+ timeElement.textContent = `${hours}:${minutes}`;
680
+ }
681
+
682
+ setInterval(updateTime, 1000);
683
+ updateTime();
684
+
685
+ // Управление приложениями
686
+ function openApp(appName) {
687
+ document.getElementById(`${appName}-app`).style.display = 'block';
688
+ }
689
+
690
+ function closeApp(appName) {
691
+ document.getElementById(`${appName}-app`).style.display = 'none';
692
+ }
693
+
694
+ // Control Center
695
+ const swipeDownArea = document.getElementById('swipe-down-area');
696
+ const controlCenter = document.getElementById('control-center');
697
+
698
+ swipeDownArea.addEventListener('click', function() {
699
+ controlCenter.classList.add('show');
700
+ });
701
+
702
+ function hideControlCenter() {
703
+ controlCenter.classList.remove('show');
704
+ }
705
+
706
+ function toggleAirplaneMode() {
707
+ alert('Авиарежим переключен');
708
+ }
709
+
710
+ function toggleWifi() {
711
+ alert('Wi-Fi переключен');
712
+ }
713
+
714
+ function toggleBluetooth() {
715
+ alert('Bluetooth переключен');
716
+ }
717
+
718
+ function toggleFlashlight() {
719
+ alert('Фонарик переключен');
720
+ }
721
+
722
+ function toggleRotationLock() {
723
+ alert('Блокировка вращения переключена');
724
+ }
725
+
726
+ // Notification Center
727
+ const swipeUpArea = document.getElementById('swipe-up-area');
728
+ const notificationCenter = document.getElementById('notification-center');
729
+
730
+ swipeUpArea.addEventListener('click', function() {
731
+ notificationCenter.classList.add('show');
732
+ });
733
+
734
+ function hideNotificationCenter() {
735
+ notificationCenter.classList.remove('show');
736
+ }
737
+
738
+ // Настройки
739
+ function openSettings(section) {
740
+ alert(`Открыты настройки: ${section}`);
741
+ }
742
+ </script>
743
+ <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=Phoenixoni/mobile-iphone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
744
+ </html>