Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PhoneDoc AI - Smartphone Health Assistant</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 float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .ai-gradient { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .chat-bubble { | |
| border-radius: 20px 20px 20px 5px; | |
| } | |
| .user-bubble { | |
| border-radius: 20px 20px 5px 20px; | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(124, 58, 237, 0.5); | |
| } | |
| .slide-up { | |
| animation: slideUp 0.5s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="max-w-md mx-auto bg-white min-h-screen shadow-xl overflow-hidden relative"> | |
| <!-- AI Assistant Header --> | |
| <header class="ai-gradient text-white p-6 pb-20 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-32 h-32 bg-purple-400 rounded-full opacity-20 transform translate-x-16 -translate-y-16"></div> | |
| <div class="absolute bottom-0 left-0 w-48 h-48 bg-indigo-400 rounded-full opacity-20 transform -translate-x-20 translate-y-20"></div> | |
| <div class="flex justify-between items-center mb-8 z-10 relative"> | |
| <div> | |
| <h1 class="text-2xl font-bold flex items-center"> | |
| <span class="mr-2">PhoneDoc</span> | |
| <span class="text-xs bg-white text-purple-600 px-2 py-1 rounded-full">AI</span> | |
| </h1> | |
| <p class="text-sm opacity-90">Your AI smartphone doctor</p> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="bg-white bg-opacity-20 p-2 rounded-full hover:bg-opacity-30 transition"> | |
| <i class="fas fa-history text-white text-sm"></i> | |
| </button> | |
| <button class="bg-white bg-opacity-20 p-2 rounded-full hover:bg-opacity-30 transition"> | |
| <i class="fas fa-cog text-white text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- AI Avatar --> | |
| <div class="flex items-center mb-6 z-10 relative"> | |
| <div class="relative mr-4"> | |
| <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center pulse"> | |
| <i class="fas fa-robot text-white text-2xl"></i> | |
| </div> | |
| <div class="absolute -bottom-1 -right-1 bg-green-400 w-4 h-4 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div> | |
| <h2 class="font-bold text-lg" id="device-model">Analyzing your device...</h2> | |
| <p class="text-sm opacity-90" id="ai-status">AI Assistant is ready</p> | |
| </div> | |
| </div> | |
| <!-- Health Score with AI Analysis --> | |
| <div class="bg-white bg-opacity-15 backdrop-blur-sm rounded-2xl p-4 mb-6 border border-white border-opacity-20 slide-up"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div> | |
| <span class="text-sm font-medium">AI Health Score</span> | |
| <span class="text-xs block opacity-80">Powered by neural analysis</span> | |
| </div> | |
| <span class="text-xl font-bold" id="health-score">--</span> | |
| </div> | |
| <div class="h-2 bg-white bg-opacity-20 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-green-400 to-cyan-400 rounded-full transition-all duration-500" id="health-progress" style="width: 0%"></div> | |
| </div> | |
| <p class="text-xs mt-2 opacity-90" id="health-message">Run a scan to get your device health analysis</p> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="px-6 pt-6 pb-24 -mt-12 relative z-10"> | |
| <!-- AI Chat Interface --> | |
| <div class="bg-gray-50 rounded-2xl p-4 mb-6 h-64 overflow-y-auto" id="chat-container"> | |
| <div class="flex mb-4"> | |
| <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-robot text-purple-600 text-sm"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-xs chat-bubble max-w-[80%]"> | |
| <p class="text-sm">Hello! I'm your PhoneDoc AI assistant. I can analyze your smartphone's health including battery, storage, performance and more. How can I help you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="grid grid-cols-2 gap-3 mb-6"> | |
| <button onclick="askAI('battery')" class="bg-white hover:bg-gray-50 border border-gray-200 p-3 rounded-xl flex items-center transition"> | |
| <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-battery-three-quarters text-red-500"></i> | |
| </div> | |
| <span class="text-sm font-medium">Battery</span> | |
| </button> | |
| <button onclick="askAI('storage')" class="bg-white hover:bg-gray-50 border border-gray-200 p-3 rounded-xl flex items-center transition"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-database text-blue-500"></i> | |
| </div> | |
| <span class="text-sm font-medium">Storage</span> | |
| </button> | |
| <button onclick="askAI('performance')" class="bg-white hover:bg-gray-50 border border-gray-200 p-3 rounded-xl flex items-center transition"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-tachometer-alt text-yellow-500"></i> | |
| </div> | |
| <span class="text-sm font-medium">Performance</span> | |
| </button> | |
| <button onclick="askAI('network')" class="bg-white hover:bg-gray-50 border border-gray-200 p-3 rounded-xl flex items-center transition"> | |
| <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-wifi text-green-500"></i> | |
| </div> | |
| <span class="text-sm font-medium">Network</span> | |
| </button> | |
| </div> | |
| <!-- Full Diagnostic Button --> | |
| <button id="full-scan-btn" class="w-full ai-gradient hover:opacity-90 text-white py-3 px-4 rounded-xl shadow-md flex items-center justify-center transition mb-6 glow"> | |
| <i class="fas fa-shield-alt mr-2"></i> | |
| <span class="font-bold">Run Full AI Diagnostic</span> | |
| </button> | |
| <!-- AI Suggestions --> | |
| <div class="bg-white border border-gray-200 rounded-xl p-4"> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> | |
| <h3 class="font-medium text-sm">AI Recommendations</h3> | |
| </div> | |
| <div id="ai-suggestions"> | |
| <p class="text-xs text-gray-600">Complete a scan to get personalized AI recommendations for your device.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Input Area --> | |
| <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white p-3 border-t border-gray-200 shadow-lg"> | |
| <div class="flex items-center"> | |
| <input type="text" id="user-input" placeholder="Ask PhoneDoc AI..." class="flex-1 bg-gray-100 rounded-full py-2 px-4 text-sm focus:outline-none focus:ring-2 focus:ring-purple-200"> | |
| <button id="send-btn" class="ml-2 w-10 h-10 ai-gradient text-white rounded-full flex items-center justify-center hover:opacity-90 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Device information (simulated) | |
| const deviceInfo = { | |
| model: navigator.userAgent.match(/\(([^)]+)\)/)[1] || "Unknown Device", | |
| os: navigator.platform, | |
| battery: { | |
| level: Math.floor(Math.random() * 30) + 70, | |
| health: Math.floor(Math.random() * 20) + 80 | |
| }, | |
| storage: { | |
| total: 64, | |
| used: Math.floor(Math.random() * 40) + 15, | |
| health: Math.floor(Math.random() * 20) + 85 | |
| }, | |
| performance: Math.floor(Math.random() * 20) + 75, | |
| network: Math.floor(Math.random() * 20) + 80 | |
| }; | |
| // AI responses database | |
| const aiResponses = { | |
| greeting: "Hello! I'm your PhoneDoc AI assistant. I can analyze your smartphone's health including battery, storage, performance and more. How can I help you today?", | |
| battery: { | |
| good: `Your battery health is at ${deviceInfo.battery.health}%, which is excellent! The current charge level is ${deviceInfo.battery.level}%. To maintain battery health, avoid extreme temperatures and try to keep charge between 20-80%.`, | |
| average: `Your battery health is at ${deviceInfo.battery.health}%, which is acceptable but could be better. The current charge level is ${deviceInfo.battery.level}%. Consider reducing screen brightness and closing background apps to extend battery life.`, | |
| poor: `Your battery health is at ${deviceInfo.battery.health}%, which indicates significant degradation. The current charge level is ${deviceInfo.battery.level}%. You might want to consider battery replacement soon for optimal performance.` | |
| }, | |
| storage: { | |
| good: `Your storage is healthy with ${deviceInfo.storage.health}% integrity. You're using ${deviceInfo.storage.used}GB out of ${deviceInfo.storage.total}GB. That's ${Math.floor((deviceInfo.storage.used/deviceInfo.storage.total)*100)}% utilization - great job managing your space!`, | |
| average: `Your storage health is at ${deviceInfo.storage.health}%. You're using ${deviceInfo.storage.used}GB out of ${deviceInfo.storage.total}GB (${Math.floor((deviceInfo.storage.used/deviceInfo.storage.total | |
| </html> |