Spaces:
Running
Running
File size: 11,465 Bytes
b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 cf6e799 b32a431 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
<!DOCTYPE html>
<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> |