Hugging Face's logo

Spaces:
Abrasax22
/
iphone-mod
Running

App Files Community
Abrasax22 commited on
Commit
876fffd
·
verified ·
1 Parent(s): 61a16a8

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +365 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Iphone Mod
3
- emoji: 🐠
4
- colorFrom: gray
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: iphone-mod
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
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,365 @@
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>3D iPhone Model</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ .scene {
10
+ perspective: 1000px;
11
+ width: 300px;
12
+ height: 600px;
13
+ margin: 50px auto;
14
+ }
15
+
16
+ .iphone {
17
+ width: 100%;
18
+ height: 100%;
19
+ position: relative;
20
+ transform-style: preserve-3d;
21
+ transition: transform 1s;
22
+ transform: rotateX(-10deg) rotateY(20deg);
23
+ }
24
+
25
+ .iphone:hover {
26
+ transform: rotateX(-5deg) rotateY(15deg);
27
+ }
28
+
29
+ .iphone-face {
30
+ position: absolute;
31
+ width: 100%;
32
+ height: 100%;
33
+ background: #111;
34
+ border-radius: 50px;
35
+ border: 12px solid #111;
36
+ box-sizing: border-box;
37
+ backface-visibility: hidden;
38
+ box-shadow: 0 0 10px rgba(0,0,0,0.5);
39
+ overflow: hidden;
40
+ }
41
+
42
+ .iphone-back {
43
+ position: absolute;
44
+ width: 100%;
45
+ height: 100%;
46
+ background: #111;
47
+ border-radius: 50px;
48
+ border: 12px solid #111;
49
+ box-sizing: border-box;
50
+ transform: translateZ(-10px);
51
+ backface-visibility: hidden;
52
+ box-shadow: 0 0 10px rgba(0,0,0,0.5);
53
+ }
54
+
55
+ .iphone-side {
56
+ position: absolute;
57
+ width: 10px;
58
+ height: 100%;
59
+ background: #333;
60
+ right: -10px;
61
+ top: 0;
62
+ transform: rotateY(90deg) translateZ(150px);
63
+ border-radius: 0 10px 10px 0;
64
+ }
65
+
66
+ .iphone-top {
67
+ position: absolute;
68
+ width: 100%;
69
+ height: 10px;
70
+ background: #333;
71
+ top: -10px;
72
+ left: 0;
73
+ transform: rotateX(90deg) translateZ(300px);
74
+ border-radius: 10px 10px 0 0;
75
+ }
76
+
77
+ .iphone-bottom {
78
+ position: absolute;
79
+ width: 100%;
80
+ height: 10px;
81
+ background: #333;
82
+ bottom: -10px;
83
+ left: 0;
84
+ transform: rotateX(-90deg) translateZ(300px);
85
+ border-radius: 0 0 10px 10px;
86
+ }
87
+
88
+ .screen {
89
+ width: 100%;
90
+ height: 100%;
91
+ background: #000;
92
+ border-radius: 38px;
93
+ overflow: hidden;
94
+ position: relative;
95
+ }
96
+
97
+ .notch {
98
+ position: absolute;
99
+ width: 150px;
100
+ height: 25px;
101
+ background: #000;
102
+ border-radius: 0 0 15px 15px;
103
+ top: 0;
104
+ left: 50%;
105
+ transform: translateX(-50%);
106
+ z-index: 2;
107
+ }
108
+
109
+ .home-button {
110
+ position: absolute;
111
+ width: 60px;
112
+ height: 60px;
113
+ background: #333;
114
+ border-radius: 50%;
115
+ bottom: 20px;
116
+ left: 50%;
117
+ transform: translateX(-50%);
118
+ z-index: 2;
119
+ cursor: pointer;
120
+ transition: all 0.3s;
121
+ }
122
+
123
+ .home-button:hover {
124
+ background: #555;
125
+ transform: translateX(-50%) scale(1.1);
126
+ }
127
+
128
+ .home-button:active {
129
+ background: #777;
130
+ transform: translateX(-50%) scale(0.9);
131
+ }
132
+
133
+ .camera {
134
+ position: absolute;
135
+ width: 10px;
136
+ height: 10px;
137
+ background: #222;
138
+ border-radius: 50%;
139
+ top: 15px;
140
+ left: 50%;
141
+ transform: translateX(-30px);
142
+ z-index: 3;
143
+ }
144
+
145
+ .speaker {
146
+ position: absolute;
147
+ width: 60px;
148
+ height: 5px;
149
+ background: #222;
150
+ border-radius: 5px;
151
+ top: 15px;
152
+ left: 50%;
153
+ transform: translateX(-50%);
154
+ z-index: 3;
155
+ }
156
+
157
+ .app-icon {
158
+ width: 60px;
159
+ height: 60px;
160
+ border-radius: 12px;
161
+ position: absolute;
162
+ display: flex;
163
+ justify-content: center;
164
+ align-items: center;
165
+ color: white;
166
+ font-weight: bold;
167
+ cursor: pointer;
168
+ transition: all 0.3s;
169
+ }
170
+
171
+ .app-icon:hover {
172
+ transform: scale(1.1);
173
+ }
174
+
175
+ .app-icon:active {
176
+ transform: scale(0.9);
177
+ }
178
+
179
+ .time {
180
+ position: absolute;
181
+ top: 50px;
182
+ left: 0;
183
+ width: 100%;
184
+ text-align: center;
185
+ color: white;
186
+ font-size: 24px;
187
+ font-weight: bold;
188
+ }
189
+
190
+ .date {
191
+ position: absolute;
192
+ top: 80px;
193
+ left: 0;
194
+ width: 100%;
195
+ text-align: center;
196
+ color: white;
197
+ font-size: 14px;
198
+ }
199
+
200
+ .camera-bump {
201
+ position: absolute;
202
+ width: 80px;
203
+ height: 80px;
204
+ background: #333;
205
+ border-radius: 50%;
206
+ top: 50%;
207
+ left: 50%;
208
+ transform: translate(-50%, -50%);
209
+ }
210
+
211
+ .lens {
212
+ position: absolute;
213
+ width: 50px;
214
+ height: 50px;
215
+ background: #111;
216
+ border-radius: 50%;
217
+ top: 50%;
218
+ left: 50%;
219
+ transform: translate(-50%, -50%);
220
+ }
221
+
222
+ .flash {
223
+ position: absolute;
224
+ width: 15px;
225
+ height: 15px;
226
+ background: #444;
227
+ border-radius: 50%;
228
+ top: 30%;
229
+ left: 70%;
230
+ }
231
+
232
+ @keyframes rotate {
233
+ 0% { transform: rotateX(-10deg) rotateY(20deg); }
234
+ 100% { transform: rotateX(-10deg) rotateY(380deg); }
235
+ }
236
+
237
+ .rotate-btn {
238
+ position: fixed;
239
+ bottom: 20px;
240
+ left: 50%;
241
+ transform: translateX(-50%);
242
+ padding: 10px 20px;
243
+ background: #007AFF;
244
+ color: white;
245
+ border: none;
246
+ border-radius: 50px;
247
+ cursor: pointer;
248
+ font-weight: bold;
249
+ transition: all 0.3s;
250
+ }
251
+
252
+ .rotate-btn:hover {
253
+ background: #0062CC;
254
+ transform: translateX(-50%) scale(1.05);
255
+ }
256
+
257
+ .rotating {
258
+ animation: rotate 10s linear infinite;
259
+ }
260
+ </style>
261
+ </head>
262
+ <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center">
263
+ <h1 class="text-3xl font-bold text-gray-800 mb-8">3D iPhone Model</h1>
264
+
265
+ <div class="scene">
266
+ <div class="iphone" id="iphone">
267
+ <!-- Front Face -->
268
+ <div class="iphone-face">
269
+ <div class="screen">
270
+ <div class="notch">
271
+ <div class="camera"></div>
272
+ <div class="speaker"></div>
273
+ </div>
274
+
275
+ <div class="time" id="time">12:34</div>
276
+ <div class="date" id="date">Monday, June 5</div>
277
+
278
+ <!-- App Icons -->
279
+ <div class="app-icon bg-blue-500" style="top: 150px; left: 30px;">Phone</div>
280
+ <div class="app-icon bg-green-500" style="top: 150px; left: 120px;">Messages</div>
281
+ <div class="app-icon bg-yellow-500" style="top: 150px; left: 210px;">Mail</div>
282
+
283
+ <div class="app-icon bg-purple-500" style="top: 230px; left: 30px;">Photos</div>
284
+ <div class="app-icon bg-red-500" style="top: 230px; left: 120px;">Music</div>
285
+ <div class="app-icon bg-teal-500" style="top: 230px; left: 210px;">Maps</div>
286
+
287
+ <div class="app-icon bg-orange-500" style="top: 310px; left: 30px;">Settings</div>
288
+ <div class="app-icon bg-pink-500" style="top: 310px; left: 120px;">App Store</div>
289
+ <div class="app-icon bg-indigo-500" style="top: 310px; left: 210px;">Safari</div>
290
+
291
+ <div class="home-button"></div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Back Face -->
296
+ <div class="iphone-back">
297
+ <div class="camera-bump">
298
+ <div class="lens"></div>
299
+ <div class="flash"></div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Sides -->
304
+ <div class="iphone-side"></div>
305
+ <div class="iphone-top"></div>
306
+ <div class="iphone-bottom"></div>
307
+ </div>
308
+ </div>
309
+
310
+ <button class="rotate-btn" id="rotateBtn">Rotate iPhone</button>
311
+
312
+ <script>
313
+ // Update time and date
314
+ function updateTime() {
315
+ const now = new Date();
316
+ const timeElement = document.getElementById('time');
317
+ const dateElement = document.getElementById('date');
318
+
319
+ const hours = now.getHours().toString().padStart(2, '0');
320
+ const minutes = now.getMinutes().toString().padStart(2, '0');
321
+ timeElement.textContent = `${hours}:${minutes}`;
322
+
323
+ const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
324
+ dateElement.textContent = now.toLocaleDateString('en-US', options);
325
+ }
326
+
327
+ updateTime();
328
+ setInterval(updateTime, 1000);
329
+
330
+ // Rotate button functionality
331
+ const rotateBtn = document.getElementById('rotateBtn');
332
+ const iphone = document.getElementById('iphone');
333
+
334
+ rotateBtn.addEventListener('click', () => {
335
+ iphone.classList.toggle('rotating');
336
+ rotateBtn.textContent = iphone.classList.contains('rotating') ? 'Stop Rotation' : 'Rotate iPhone';
337
+ });
338
+
339
+ // App icon click effect
340
+ const appIcons = document.querySelectorAll('.app-icon');
341
+ appIcons.forEach(icon => {
342
+ icon.addEventListener('click', () => {
343
+ icon.style.transform = 'scale(0.8)';
344
+ setTimeout(() => {
345
+ icon.style.transform = 'scale(1)';
346
+ }, 300);
347
+
348
+ // Change screen content briefly
349
+ const timeElement = document.getElementById('time');
350
+ const dateElement = document.getElementById('date');
351
+ const originalTime = timeElement.textContent;
352
+ const originalDate = dateElement.textContent;
353
+
354
+ timeElement.textContent = 'Opening...';
355
+ dateElement.textContent = icon.textContent;
356
+
357
+ setTimeout(() => {
358
+ timeElement.textContent = originalTime;
359
+ dateElement.textContent = originalDate;
360
+ }, 1000);
361
+ });
362
+ });
363
+ </script>
364
+ <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=Abrasax22/iphone-mod" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
365
+ </html>