Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chege SMS - AI Powered Messaging</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 pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } | |
| .chat-container { | |
| height: calc(100vh - 180px); | |
| } | |
| .message-transition { | |
| transition: all 0.3s ease; | |
| } | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #4b5563; | |
| margin: 0 2px; | |
| } | |
| .typing-indicator span:nth-child(1) { | |
| animation: bounce 1s infinite; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation: bounce 1s infinite 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation: bounce 1s infinite 0.4s; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| .slide-in { | |
| animation: slideIn 0.3s forwards; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .android-status-bar { | |
| height: 24px; | |
| background: #075e54; | |
| } | |
| .android-nav-bar { | |
| height: 48px; | |
| background: #f5f5f5; | |
| } | |
| .logo-gradient { | |
| background: linear-gradient(135deg, #25D366, #128C7E); | |
| } | |
| .message-bubble { | |
| max-width: 80%; | |
| } | |
| .mpesa-bg { | |
| background-color: #00A859; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Android Device Frame --> | |
| <div class="max-w-md mx-auto bg-white shadow-lg rounded-t-3xl overflow-hidden" style="height: 100vh;"> | |
| <!-- Android Status Bar --> | |
| <div class="android-status-bar flex items-center justify-between px-4 text-white text-xs"> | |
| <span>12:30</span> | |
| <div class="flex space-x-2"> | |
| <i class="fas fa-signal"></i> | |
| <i class="fas fa-wifi"></i> | |
| <i class="fas fa-battery-full"></i> | |
| </div> | |
| </div> | |
| <!-- App Header --> | |
| <div class="bg-green-600 text-white p-3 flex items-center"> | |
| <div class="w-10 h-10 rounded-full logo-gradient flex items-center justify-center text-white font-bold"> | |
| CS | |
| </div> | |
| <div class="ml-3"> | |
| <h1 class="font-bold">Chege SMS</h1> | |
| <p class="text-xs">AI Powered Messaging</p> | |
| </div> | |
| <div class="ml-auto flex space-x-4"> | |
| <button class="text-white"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="text-white"> | |
| <i class="fas fa-ellipsis-vertical"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tab Navigation --> | |
| <div class="flex border-b"> | |
| <button class="flex-1 py-3 text-center font-medium text-green-600 border-b-2 border-green-600"> | |
| <i class="fas fa-comment-dots mr-1"></i> Chats | |
| </button> | |
| <button class="flex-1 py-3 text-center font-medium text-gray-500"> | |
| <i class="fas fa-money-bill-transfer mr-1"></i> M-Pesa | |
| </button> | |
| <button class="flex-1 py-3 text-center font-medium text-gray-500"> | |
| <i class="fas fa-robot mr-1"></i> AI Tools | |
| </button> | |
| </div> | |
| <!-- Chat List --> | |
| <div class="overflow-y-auto" style="height: calc(100vh - 180px);"> | |
| <!-- AI Assistant Chat --> | |
| <div class="p-3 border-b flex items-center bg-gray-50"> | |
| <div class="w-12 h-12 rounded-full logo-gradient flex items-center justify-center text-white"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <h2 class="font-medium">AI Assistant</h2> | |
| <span class="text-xs text-gray-500">2 min</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Ready to analyze your messages and M-Pesa transactions</p> | |
| </div> | |
| </div> | |
| <!-- M-Pesa Chat --> | |
| <div class="p-3 border-b flex items-center"> | |
| <div class="w-12 h-12 rounded-full mpesa-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-money-bill-wave"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <h2 class="font-medium">M-Pesa</h2> | |
| <span class="text-xs text-gray-500">10 min</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">KSh 1,200 sent to John Chege</p> | |
| </div> | |
| </div> | |
| <!-- Regular Chat --> | |
| <div class="p-3 border-b flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white"> | |
| JC | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <h2 class="font-medium">John Chege</h2> | |
| <span class="text-xs text-gray-500">1 hr</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Thanks for the money, I'll pay back on Friday</p> | |
| </div> | |
| </div> | |
| <!-- Group Chat --> | |
| <div class="p-3 border-b flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <h2 class="font-medium">Family Group</h2> | |
| <span class="text-xs text-gray-500">3 hr</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Mom: Send money for groceries</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <div class="android-nav-bar flex items-center justify-around border-t"> | |
| <button class="text-green-600"> | |
| <i class="fas fa-comment-dots text-xl"></i> | |
| </button> | |
| <button class="text-gray-500"> | |
| <i class="fas fa-money-bill-transfer text-xl"></i> | |
| </button> | |
| <button class="text-gray-500"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </button> | |
| <button class="text-gray-500"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </button> | |
| <button class="text-gray-500"> | |
| <i class="fas fa-cog text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat Screen (Hidden by default) --> | |
| <div id="chatScreen" class="fixed inset-0 bg-white hidden"> | |
| <!-- Chat Header --> | |
| <div class="android-status-bar flex items-center justify-between px-4 text-white text-xs"> | |
| <span>12:30</span> | |
| <div class="flex space-x-2"> | |
| <i class="fas fa-signal"></i> | |
| <i class="fas fa-wifi"></i> | |
| <i class="fas fa-battery-full"></i> | |
| </div> | |
| </div> | |
| <div class="bg-green-600 text-white p-3 flex items-center"> | |
| <button onclick="hideChatScreen()" class="mr-2"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <div class="w-10 h-10 rounded-full logo-gradient flex items-center justify-center text-white"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h1 class="font-bold">AI Assistant</h1> | |
| <p class="text-xs">Analyzing your messages...</p> | |
| </div> | |
| <div class="ml-auto flex space-x-4"> | |
| <button class="text-white"> | |
| <i class="fas fa-phone-alt"></i> | |
| </button> | |
| <button class="text-white"> | |
| <i class="fas fa-ellipsis-vertical"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat Messages --> | |
| <div class="overflow-y-auto p-4 bg-gray-100" style="height: calc(100vh - 180px);"> | |
| <!-- AI Introduction --> | |
| <div class="flex mb-4 slide-in"> | |
| <div class="w-10 h-10 rounded-full logo-gradient flex items-center justify-center text-white"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="ml-3 message-bubble"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm"> | |
| <p class="text-gray-800">Hello! I'm your Chege SMS AI assistant. I can:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Analyze & summarize your messages</li> | |
| <li>Track M-Pesa transactions</li> | |
| <li>Learn your texting style</li> | |
| <li>Help manage your finances</li> | |
| </ul> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">2:45 PM</p> | |
| </div> | |
| </div> | |
| <!-- User Message --> | |
| <div class="flex justify-end mb-4 slide-in"> | |
| <div class="message-bubble"> | |
| <div class="bg-green-500 text-white p-3 rounded-lg shadow-sm"> | |
| <p>Can you check my M-Pesa balance and last transactions?</p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1 text-right">2:46 PM</p> | |
| </div> | |
| </div> | |
| <!-- AI Response --> | |
| <div class="flex mb-4 slide-in"> | |
| <div class="w-10 h-10 rounded-full logo-gradient flex items-center justify-center text-white"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="ml-3 message-bubble"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm"> | |
| <p class="text-gray-800">Here's your M-Pesa summary:</p> | |
| <div class="mt-2 bg-gray-50 p-2 rounded"> | |
| <div class="flex justify-between py-1"> | |
| <span class="font-medium">Current Balance:</span> | |
| <span class="font-bold">KSh 5,430</span> | |
| </div> | |
| <div class="border-t my-1"></div> | |
| <div class="text-sm"> | |
| <div class="flex justify-between py-1"> | |
| <span>- Sent to John Chege</span> | |
| <span class="text-red-500">KSh 1,200</span> | |
| </div> | |
| <div class="flex justify-between py-1"> | |
| <span>- Received from Safaricom</span> | |
| <span class="text-green-500">KSh 500</span> | |
| </div> | |
| <div class="flex justify-between py-1"> | |
| <span>- Lipa na M-Pesa</span> | |
| <span class="text-red-500">KSh 350</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-3 text-sm text-green-600 font-medium hover:underline"> | |
| <i class="fas fa-chart-pie mr-1"></i> View spending analytics | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">2:47 PM</p> | |
| </div> | |
| </div> | |
| <!-- AI Analyzing Indicator --> | |
| <div class="flex mb-4" id="typingIndicator"> | |
| <div class="w-10 h-10 rounded-full logo-gradient flex items-center justify-center text-white"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="ml-3 message-bubble"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm"> | |
| <div class="typing-indicator flex"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message Input --> | |
| <div class="bg-white border-t p-3"> | |
| <div class="flex items-center"> | |
| <button class="text-gray-500 mx-2"> | |
| <i class="fas fa-plus-circle text-xl"></i> | |
| </button> | |
| <div class="flex-1 bg-gray-100 rounded-full px-4 py-2 flex items-center"> | |
| <input type="text" placeholder="Type a message..." class="bg-transparent w-full focus:outline-none"> | |
| <button class="text-gray-500 ml-2"> | |
| <i class="far fa-smile"></i> | |
| </button> | |
| </div> | |
| <button class="ml-2 w-10 h-10 rounded-full logo-gradient text-white flex items-center justify-center"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- M-Pesa Screen (Hidden by default) --> | |
| <div id="mpesaScreen" class="fixed inset-0 bg-white hidden"> | |
| <!-- M-Pesa Header --> | |
| <div class="android-status-bar flex items-center justify-between px-4 text-white text-xs"> | |
| <span>12:30</span> | |
| <div class="flex space-x-2"> | |
| <i class="fas fa-signal"></i> | |
| <i class="fas fa-wifi"></i> | |
| <i class="fas fa-battery-full"></i> | |
| </div> | |
| </div> | |
| <div class="mpesa-bg text-white p-3 flex items-center"> | |
| <button onclick="hideMpesaScreen()" class="mr-2"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <div class="ml-3"> | |
| <h1 class="font-bold">M-Pesa Manager</h1> | |
| <p class="text-xs">AI-powered financial tracking</p> | |
| </div> | |
| </div> | |
| <!-- M-Pesa Content --> | |
| <div class="p-4 overflow-y-auto" style="height: calc(100vh - 180px);"> | |
| <!-- Balance Card --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 mb-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Available Balance</p> | |
| <p class="text-2xl font-bold">KSh 5,430</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full mpesa-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-wallet"></i> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-4"> | |
| <button class="flex-1 bg-green-100 text-green-800 py-2 rounded-l-lg"> | |
| <i class="fas fa-money-bill-wave mr-1"></i> Send | |
| </button> | |
| <button class="flex-1 bg-green-100 text-green-800 py-2 border-l border-r border-green-200"> | |
| <i class="fas fa-money-bill-transfer mr-1"></i> Withdraw | |
| </button> | |
| <button class="flex-1 bg-green-100 text-green-800 py-2 rounded-r-lg"> | |
| <i class="fas fa-bolt mr-1"></i> Pay | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Transactions --> | |
| <div class="mb-4"> | |
| <h2 class="font-medium mb-2 flex justify-between items-center"> | |
| <span>Recent Transactions</span> | |
| <button class="text-green-600 text-sm">See All</button> | |
| </h2> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <!-- Transaction 1 --> | |
| <div class="p-3 border-b flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-red-100 text-red-600 flex items-center justify-center"> | |
| <i class="fas fa-arrow-up"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <p class="font-medium">Sent to John Chege</p> | |
| <p class="text-red-500">-KSh 1,200</p> | |
| </div> | |
| <p class="text-xs text-gray-500">Today, 10:45 AM</p> | |
| </div> | |
| </div> | |
| <!-- Transaction 2 --> | |
| <div class="p-3 border-b flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center"> | |
| <i class="fas fa-arrow-down"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <p class="font-medium">Received from Safaricom</p> | |
| <p class="text-green-500">+KSh 500</p> | |
| </div> | |
| <p class="text-xs text-gray-500">Today, 9:30 AM</p> | |
| </div> | |
| </div> | |
| <!-- Transaction 3 --> | |
| <div class="p-3 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-red-100 text-red-600 flex items-center justify-center"> | |
| <i class="fas fa-shopping-bag"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <p class="font-medium">Lipa na M-Pesa</p> | |
| <p class="text-red-500">-KSh 350</p> | |
| </div> | |
| <p class="text-xs text-gray-500">Yesterday, 5:15 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Spending Analysis --> | |
| <div class="bg-white rounded-lg shadow-sm p-4"> | |
| <h2 class="font-medium mb-3 flex items-center"> | |
| <i class="fas fa-robot text-green-600 mr-2"></i> AI Spending Analysis | |
| </h2> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>This Month's Spending</span> | |
| <span class="font-medium">KSh 12,450</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-red-500 rounded-full" style="width: 70%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">15% higher than last month</p> | |
| </div> | |
| <div class="mb-3"> | |
| <p class="text-sm font-medium mb-1">Top Categories</p> | |
| <div class="flex space-x-2 overflow-x-auto pb-2"> | |
| <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs whitespace-nowrap"> | |
| <i class="fas fa-utensils mr-1"></i> Food KSh 4,200 | |
| </div> | |
| <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs whitespace-nowrap"> | |
| <i class="fas fa-bus mr-1"></i> Transport KSh 3,100 | |
| </div> | |
| <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs whitespace-nowrap"> | |
| <i class="fas fa-gift mr-1"></i> Gifts KSh 2,500 | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-2 py-2 bg-green-600 text-white rounded-lg font-medium"> | |
| <i class="fas fa-lightbulb mr-1"></i> Get Savings Tips | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Show chat screen when clicking on AI Assistant chat | |
| document.querySelectorAll('.p-3.border-b').forEach(chat => { | |
| chat.addEventListener('click', function() { | |
| if (this.querySelector('h2').textContent.includes('AI Assistant')) { | |
| document.getElementById('chatScreen').classList.remove('hidden'); | |
| } else if (this.querySelector('h2').textContent.includes('M-Pesa')) { | |
| document.getElementById('mpesaScreen').classList.remove('hidden'); | |
| } | |
| }); | |
| }); | |
| // Hide chat screen | |
| function hideChatScreen() { | |
| document.getElementById('chatScreen').classList.add('hidden'); | |
| } | |
| // Hide M-Pesa screen | |
| function hideMpesaScreen() { | |
| document.getElementById('mpesaScreen').classList.add('hidden'); | |
| } | |
| // Simulate sending a message | |
| function sendMessage() { | |
| // In a real app, this would send to OpenAI API | |
| console.log("Message sent to OpenAI API"); | |
| } | |
| // Initialize the app | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Hide typing indicator initially | |
| document.getElementById('typingIndicator').style.display = 'none'; | |
| }); | |
| </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=bobiqritikol/myspace" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |