Hugging Face's logo

Spaces:
Abrasax22
/
iphone-mod
Running

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

build me a blackberry - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +250 -331
index.html CHANGED
@@ -3,361 +3,280 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Modern BlackBerry</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
+ .bb-key {
15
+ transition: all 0.1s ease;
 
 
 
 
 
 
16
  }
17
+ .bb-key:active {
18
+ transform: scale(0.95);
19
+ background-color: #4b5563;
20
  }
21
+ .trackball {
22
+ box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
 
 
 
 
 
 
 
 
 
 
23
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  .screen {
25
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  }
27
  </style>
28
  </head>
29
+ <body class="bg-gray-900 flex items-center justify-center min-h-screen">
30
+ <div class="relative w-full max-w-md mx-auto">
31
+ <!-- BlackBerry Device -->
32
+ <div class="relative bg-black rounded-3xl p-6 shadow-2xl border-2 border-gray-800 overflow-hidden">
33
+ <!-- Top Bezel -->
34
+ <div class="flex justify-between items-center mb-4">
35
+ <div class="text-white text-sm font-bold">BlackBerry</div>
36
+ <div class="flex space-x-2">
37
+ <div class="w-2 h-2 rounded-full bg-blue-500"></div>
38
+ <div class="text-white text-xs">4G</div>
39
+ <div class="text-white text-xs">12:34 PM</div>
40
+ </div>
41
+ </div>
42
+
43
+ <!-- Screen -->
44
+ <div class="screen rounded-xl h-64 mb-4 p-4 text-white overflow-hidden relative">
45
+ <!-- Home Screen Content -->
46
+ <div id="home-screen" class="h-full flex flex-col">
47
+ <div class="flex justify-between items-center mb-4">
48
+ <h2 class="text-xl font-bold">Today</h2>
49
+ <div class="text-sm">June 15</div>
50
  </div>
51
 
52
+ <div class="grid grid-cols-4 gap-3 mb-4">
53
+ <div class="bg-gray-800 bg-opacity-50 rounded-lg p-2 text-center">
54
+ <i class="fas fa-envelope text-blue-400 mb-1"></i>
55
+ <div class="text-xs">Messages</div>
56
+ </div>
57
+ <div class="bg-gray-800 bg-opacity-50 rounded-lg p-2 text-center">
58
+ <i class="fas fa-phone text-green-400 mb-1"></i>
59
+ <div class="text-xs">Phone</div>
60
+ </div>
61
+ <div class="bg-gray-800 bg-opacity-50 rounded-lg p-2 text-center">
62
+ <i class="fas fa-calendar text-yellow-400 mb-1"></i>
63
+ <div class="text-xs">Calendar</div>
64
+ </div>
65
+ <div class="bg-gray-800 bg-opacity-50 rounded-lg p-2 text-center">
66
+ <i class="fas fa-camera text-purple-400 mb-1"></i>
67
+ <div class="text-xs">Camera</div>
68
+ </div>
69
+ </div>
70
 
71
+ <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3 flex-1">
72
+ <div class="flex items-center mb-2">
73
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
74
+ <div class="text-sm font-medium">New Message</div>
75
+ </div>
76
+ <div class="text-xs opacity-75">From: John Doe</div>
77
+ <div class="text-xs mt-1">Meeting at 2PM confirmed. Don't forget the presentation...</div>
78
+ </div>
79
  </div>
80
+
81
+ <!-- Keyboard Input Screen (hidden by default) -->
82
+ <div id="keyboard-screen" class="h-full hidden flex-col">
83
+ <div class="flex-1 p-2 overflow-y-auto" id="message-display">
84
+ <div class="text-right mb-2">
85
+ <div class="bg-blue-600 text-white rounded-lg p-2 inline-block max-w-xs">
86
+ Hey, how's the project going?
87
+ </div>
88
+ </div>
89
+ <div class="text-left mb-2">
90
+ <div class="bg-gray-700 text-white rounded-lg p-2 inline-block max-w-xs">
91
+ Going well! Almost finished with the UI.
92
+ </div>
93
+ </div>
94
+ </div>
95
+ <div class="bg-gray-800 rounded-lg p-2 mb-2">
96
+ <div id="input-text" class="min-h-6 text-sm"></div>
97
+ <div class="text-xs text-gray-400">Press keys to type</div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Physical Keyboard -->
103
+ <div class="grid grid-cols-10 gap-1 mb-2">
104
+ <!-- Top row -->
105
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="Q">Q</div>
106
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="W">W</div>
107
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="E">E</div>
108
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="R">R</div>
109
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="T">T</div>
110
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="Y">Y</div>
111
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="U">U</div>
112
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="I">I</div>
113
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="O">O</div>
114
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="P">P</div>
115
+
116
+ <!-- Middle row -->
117
+ <div class="col-span-1"></div>
118
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="A">A</div>
119
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="S">S</div>
120
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="D">D</div>
121
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="F">F</div>
122
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="G">G</div>
123
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="H">H</div>
124
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="J">J</div>
125
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="K">K</div>
126
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="L">L</div>
127
+
128
+ <!-- Bottom row -->
129
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="SYM">SYM</div>
130
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="Z">Z</div>
131
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="X">X</div>
132
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="C">C</div>
133
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="V">V</div>
134
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="B">B</div>
135
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="N">N</div>
136
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="M">M</div>
137
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="DEL">DEL</div>
138
  </div>
139
 
140
+ <!-- Navigation Keys -->
141
+ <div class="flex justify-between mb-4">
142
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 px-4 rounded" data-key="CALL">CALL</div>
143
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 px-4 rounded" data-key="MENU">MENU</div>
144
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 px-4 rounded" data-key="BACK">BACK</div>
145
+ <div class="trackball w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center cursor-pointer">
146
+ <div class="w-6 h-6 rounded-full bg-gray-800 flex items-center justify-center">
147
+ <div class="w-4 h-4 rounded-full bg-gray-900"></div>
148
+ </div>
149
  </div>
150
+ <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 px-4 rounded" data-key="ENTER">ENTER</div>
151
  </div>
152
 
153
+ <!-- Bottom Bezel -->
154
+ <div class="text-center text-gray-500 text-xs">
155
+ BlackBerry OS 10
156
+ </div>
157
  </div>
158
  </div>
159
+
 
 
160
  <script>
161
+ document.addEventListener('DOMContentLoaded', function() {
162
+ const homeScreen = document.getElementById('home-screen');
163
+ const keyboardScreen = document.getElementById('keyboard-screen');
164
+ const inputText = document.getElementById('input-text');
165
+ const messageDisplay = document.getElementById('message-display');
166
+ let currentScreen = 'home';
167
 
168
+ // Handle keyboard clicks
169
+ document.querySelectorAll('.bb-key').forEach(key => {
170
+ key.addEventListener('click', function() {
171
+ const keyValue = this.getAttribute('data-key');
172
+
173
+ // Add key press animation
174
+ this.classList.add('bg-gray-700');
175
+ setTimeout(() => {
176
+ this.classList.remove('bg-gray-700');
177
+ }, 100);
178
+
179
+ // Handle special keys
180
+ if (keyValue === 'MENU') {
181
+ if (currentScreen === 'home') {
182
+ homeScreen.classList.add('hidden');
183
+ keyboardScreen.classList.remove('hidden');
184
+ currentScreen = 'keyboard';
185
+ } else {
186
+ homeScreen.classList.remove('hidden');
187
+ keyboardScreen.classList.add('hidden');
188
+ currentScreen = 'home';
189
+ }
190
+ }
191
+ else if (keyValue === 'BACK') {
192
+ inputText.textContent = inputText.textContent.slice(0, -1);
193
+ }
194
+ else if (keyValue === 'ENTER') {
195
+ if (inputText.textContent.trim() !== '') {
196
+ const newMessage = document.createElement('div');
197
+ newMessage.className = 'text-right mb-2';
198
+ newMessage.innerHTML = `
199
+ <div class="bg-blue-600 text-white rounded-lg p-2 inline-block max-w-xs">
200
+ ${inputText.textContent}
201
+ </div>
202
+ `;
203
+ messageDisplay.appendChild(newMessage);
204
+ inputText.textContent = '';
205
+
206
+ // Auto-scroll to bottom
207
+ messageDisplay.scrollTop = messageDisplay.scrollHeight;
208
+
209
+ // Simulate reply after 1 second
210
+ setTimeout(() => {
211
+ const replyMessage = document.createElement('div');
212
+ replyMessage.className = 'text-left mb-2';
213
+ replyMessage.innerHTML = `
214
+ <div class="bg-gray-700 text-white rounded-lg p-2 inline-block max-w-xs">
215
+ Thanks for your message!
216
+ </div>
217
+ `;
218
+ messageDisplay.appendChild(replyMessage);
219
+ messageDisplay.scrollTop = messageDisplay.scrollHeight;
220
+ }, 1000);
221
+ }
222
+ }
223
+ else if (keyValue === 'DEL') {
224
+ inputText.textContent = '';
225
+ }
226
+ else if (keyValue === 'CALL') {
227
+ alert('Calling...');
228
+ }
229
+ else if (keyValue === 'SYM') {
230
+ alert('Symbol menu would appear here');
231
+ }
232
+ else {
233
+ // Regular key input
234
+ if (currentScreen === 'keyboard') {
235
+ inputText.textContent += keyValue.toLowerCase();
236
+ }
237
+ }
238
+ });
239
+ });
240
 
241
+ // Also handle keyboard events for typing
242
+ document.addEventListener('keydown', function(e) {
243
+ if (currentScreen === 'keyboard') {
244
+ if (e.key.length === 1 && e.key.match(/[a-z]/i)) {
245
+ inputText.textContent += e.key.toLowerCase();
246
+ } else if (e.key === 'Backspace') {
247
+ inputText.textContent = inputText.textContent.slice(0, -1);
248
+ } else if (e.key === 'Enter') {
249
+ const newMessage = document.createElement('div');
250
+ newMessage.className = 'text-right mb-2';
251
+ newMessage.innerHTML = `
252
+ <div class="bg-blue-600 text-white rounded-lg p-2 inline-block max-w-xs">
253
+ ${inputText.textContent}
254
+ </div>
255
+ `;
256
+ messageDisplay.appendChild(newMessage);
257
+ inputText.textContent = '';
258
+ messageDisplay.scrollTop = messageDisplay.scrollHeight;
259
+ }
260
+ }
261
+ });
262
+
263
+ // Trackball navigation simulation
264
+ document.querySelector('.trackball').addEventListener('click', function() {
265
+ if (currentScreen === 'home') {
266
+ // Simulate selecting the message
267
+ const messageBox = homeScreen.querySelector('.bg-gray-800');
268
+ messageBox.classList.add('ring-2', 'ring-blue-500');
269
+ setTimeout(() => {
270
+ messageBox.classList.remove('ring-2', 'ring-blue-500');
271
+ }, 300);
272
+
273
+ // Open the message
274
+ setTimeout(() => {
275
+ homeScreen.classList.add('hidden');
276
+ keyboardScreen.classList.remove('hidden');
277
+ currentScreen = 'keyboard';
278
+ }, 500);
279
+ }
280
  });
281
  });
282
  </script>