Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern BlackBerry</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .bb-key { | |
| transition: all 0.1s ease; | |
| } | |
| .bb-key:active { | |
| transform: scale(0.95); | |
| background-color: #4b5563; | |
| } | |
| .trackball { | |
| box-shadow: inset 0 0 10px rgba(0,0,0,0.5); | |
| } | |
| .screen { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 flex items-center justify-center min-h-screen"> | |
| <div class="relative w-full max-w-md mx-auto"> | |
| <!-- BlackBerry Device --> | |
| <div class="relative bg-black rounded-3xl p-6 shadow-2xl border-2 border-gray-800 overflow-hidden"> | |
| <!-- Top Bezel --> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-white text-sm font-bold">BlackBerry</div> | |
| <div class="flex space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500"></div> | |
| <div class="text-white text-xs">4G</div> | |
| <div class="text-white text-xs">12:34 PM</div> | |
| </div> | |
| </div> | |
| <!-- Screen --> | |
| <div class="screen rounded-xl h-64 mb-4 p-4 text-white overflow-hidden relative"> | |
| <!-- Home Screen Content --> | |
| <div id="home-screen" class="h-full flex flex-col"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">Today</h2> | |
| <div class="text-sm">June 15</div> | |
| </div> | |
| <div class="grid grid-cols-4 gap-3 mb-4"> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-lg p-2 text-center"> | |
| <i class="fas fa-envelope text-blue-400 mb-1"></i> | |
| <div class="text-xs">Messages</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-lg p-2 text-center"> | |
| <i class="fas fa-phone text-green-400 mb-1"></i> | |
| <div class="text-xs">Phone</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-lg p-2 text-center"> | |
| <i class="fas fa-calendar text-yellow-400 mb-1"></i> | |
| <div class="text-xs">Calendar</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-lg p-2 text-center"> | |
| <i class="fas fa-camera text-purple-400 mb-1"></i> | |
| <div class="text-xs">Camera</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3 flex-1"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="text-sm font-medium">New Message</div> | |
| </div> | |
| <div class="text-xs opacity-75">From: John Doe</div> | |
| <div class="text-xs mt-1">Meeting at 2PM confirmed. Don't forget the presentation...</div> | |
| </div> | |
| </div> | |
| <!-- Keyboard Input Screen (hidden by default) --> | |
| <div id="keyboard-screen" class="h-full hidden flex-col"> | |
| <div class="flex-1 p-2 overflow-y-auto" id="message-display"> | |
| <div class="text-right mb-2"> | |
| <div class="bg-blue-600 text-white rounded-lg p-2 inline-block max-w-xs"> | |
| Hey, how's the project going? | |
| </div> | |
| </div> | |
| <div class="text-left mb-2"> | |
| <div class="bg-gray-700 text-white rounded-lg p-2 inline-block max-w-xs"> | |
| Going well! Almost finished with the UI. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-2 mb-2"> | |
| <div id="input-text" class="min-h-6 text-sm"></div> | |
| <div class="text-xs text-gray-400">Press keys to type</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Physical Keyboard --> | |
| <div class="grid grid-cols-10 gap-1 mb-2"> | |
| <!-- Top row --> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="Q">Q</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="W">W</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="E">E</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="R">R</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="T">T</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="Y">Y</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="U">U</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="I">I</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="O">O</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="P">P</div> | |
| <!-- Middle row --> | |
| <div class="col-span-1"></div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="A">A</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="S">S</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="D">D</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="F">F</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="G">G</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="H">H</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="J">J</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="K">K</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="L">L</div> | |
| <!-- Bottom row --> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="SYM">SYM</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="Z">Z</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="X">X</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="C">C</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="V">V</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="B">B</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="N">N</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="M">M</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 rounded" data-key="DEL">DEL</div> | |
| </div> | |
| <!-- Navigation Keys --> | |
| <div class="flex justify-between mb-4"> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 px-4 rounded" data-key="CALL">CALL</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 px-4 rounded" data-key="MENU">MENU</div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 px-4 rounded" data-key="BACK">BACK</div> | |
| <div class="trackball w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center cursor-pointer"> | |
| <div class="w-6 h-6 rounded-full bg-gray-800 flex items-center justify-center"> | |
| <div class="w-4 h-4 rounded-full bg-gray-900"></div> | |
| </div> | |
| </div> | |
| <div class="bb-key bg-gray-800 text-white text-xs text-center py-2 px-4 rounded" data-key="ENTER">ENTER</div> | |
| </div> | |
| <!-- Bottom Bezel --> | |
| <div class="text-center text-gray-500 text-xs"> | |
| BlackBerry OS 10 | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const homeScreen = document.getElementById('home-screen'); | |
| const keyboardScreen = document.getElementById('keyboard-screen'); | |
| const inputText = document.getElementById('input-text'); | |
| const messageDisplay = document.getElementById('message-display'); | |
| let currentScreen = 'home'; | |
| // Handle keyboard clicks | |
| document.querySelectorAll('.bb-key').forEach(key => { | |
| key.addEventListener('click', function() { | |
| const keyValue = this.getAttribute('data-key'); | |
| // Add key press animation | |
| this.classList.add('bg-gray-700'); | |
| setTimeout(() => { | |
| this.classList.remove('bg-gray-700'); | |
| }, 100); | |
| // Handle special keys | |
| if (keyValue === 'MENU') { | |
| if (currentScreen === 'home') { | |
| homeScreen.classList.add('hidden'); | |
| keyboardScreen.classList.remove('hidden'); | |
| currentScreen = 'keyboard'; | |
| } else { | |
| homeScreen.classList.remove('hidden'); | |
| keyboardScreen.classList.add('hidden'); | |
| currentScreen = 'home'; | |
| } | |
| } | |
| else if (keyValue === 'BACK') { | |
| inputText.textContent = inputText.textContent.slice(0, -1); | |
| } | |
| else if (keyValue === 'ENTER') { | |
| if (inputText.textContent.trim() !== '') { | |
| const newMessage = document.createElement('div'); | |
| newMessage.className = 'text-right mb-2'; | |
| newMessage.innerHTML = ` | |
| <div class="bg-blue-600 text-white rounded-lg p-2 inline-block max-w-xs"> | |
| ${inputText.textContent} | |
| </div> | |
| `; | |
| messageDisplay.appendChild(newMessage); | |
| inputText.textContent = ''; | |
| // Auto-scroll to bottom | |
| messageDisplay.scrollTop = messageDisplay.scrollHeight; | |
| // Simulate reply after 1 second | |
| setTimeout(() => { | |
| const replyMessage = document.createElement('div'); | |
| replyMessage.className = 'text-left mb-2'; | |
| replyMessage.innerHTML = ` | |
| <div class="bg-gray-700 text-white rounded-lg p-2 inline-block max-w-xs"> | |
| Thanks for your message! | |
| </div> | |
| `; | |
| messageDisplay.appendChild(replyMessage); | |
| messageDisplay.scrollTop = messageDisplay.scrollHeight; | |
| }, 1000); | |
| } | |
| } | |
| else if (keyValue === 'DEL') { | |
| inputText.textContent = ''; | |
| } | |
| else if (keyValue === 'CALL') { | |
| alert('Calling...'); | |
| } | |
| else if (keyValue === 'SYM') { | |
| alert('Symbol menu would appear here'); | |
| } | |
| else { | |
| // Regular key input | |
| if (currentScreen === 'keyboard') { | |
| inputText.textContent += keyValue.toLowerCase(); | |
| } | |
| } | |
| }); | |
| }); | |
| // Also handle keyboard events for typing | |
| document.addEventListener('keydown', function(e) { | |
| if (currentScreen === 'keyboard') { | |
| if (e.key.length === 1 && e.key.match(/[a-z]/i)) { | |
| inputText.textContent += e.key.toLowerCase(); | |
| } else if (e.key === 'Backspace') { | |
| inputText.textContent = inputText.textContent.slice(0, -1); | |
| } else if (e.key === 'Enter') { | |
| const newMessage = document.createElement('div'); | |
| newMessage.className = 'text-right mb-2'; | |
| newMessage.innerHTML = ` | |
| <div class="bg-blue-600 text-white rounded-lg p-2 inline-block max-w-xs"> | |
| ${inputText.textContent} | |
| </div> | |
| `; | |
| messageDisplay.appendChild(newMessage); | |
| inputText.textContent = ''; | |
| messageDisplay.scrollTop = messageDisplay.scrollHeight; | |
| } | |
| } | |
| }); | |
| // Trackball navigation simulation | |
| document.querySelector('.trackball').addEventListener('click', function() { | |
| if (currentScreen === 'home') { | |
| // Simulate selecting the message | |
| const messageBox = homeScreen.querySelector('.bg-gray-800'); | |
| messageBox.classList.add('ring-2', 'ring-blue-500'); | |
| setTimeout(() => { | |
| messageBox.classList.remove('ring-2', 'ring-blue-500'); | |
| }, 300); | |
| // Open the message | |
| setTimeout(() => { | |
| homeScreen.classList.add('hidden'); | |
| keyboardScreen.classList.remove('hidden'); | |
| currentScreen = 'keyboard'; | |
| }, 500); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |