|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NexusAI - Your Mobile 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 pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
.listening-animation { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
.slide-up { |
|
|
animation: slideUp 0.3s ease-out; |
|
|
} |
|
|
@keyframes slideUp { |
|
|
from { transform: translateY(20px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
.task-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="max-w-md mx-auto bg-white min-h-screen shadow-lg overflow-hidden"> |
|
|
|
|
|
<header class="gradient-bg text-white p-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h1 class="text-xl font-bold">NexusAI</h1> |
|
|
<p class="text-xs opacity-80">Your personal mobile assistant</p> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="bg-white bg-opacity-20 p-2 rounded-full"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
<button class="bg-white bg-opacity-20 p-2 rounded-full"> |
|
|
<i class="fas fa-user"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-4"> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-3 mb-6"> |
|
|
<div class="bg-blue-50 rounded-lg p-3 border border-blue-100"> |
|
|
<p class="text-xs text-blue-600">Tasks Completed</p> |
|
|
<p class="text-xl font-bold">128</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 rounded-lg p-3 border border-purple-100"> |
|
|
<p class="text-xs text-purple-600">Time Saved</p> |
|
|
<p class="text-xl font-bold">9.2h</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-4 mb-6 relative overflow-hidden"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h2 class="font-semibold">Voice Assistant</h2> |
|
|
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Active</span> |
|
|
</div> |
|
|
|
|
|
<div id="assistant-response" class="bg-white rounded-lg p-3 mb-3 min-h-16 text-sm"> |
|
|
<p>Hi there! How can I help you today?</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<button id="voice-btn" class="bg-blue-600 text-white p-3 rounded-full mr-3"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
<div class="flex-1 relative"> |
|
|
<input type="text" id="command-input" placeholder="Type or say a command..." |
|
|
class="w-full bg-white border border-gray-200 rounded-full py-2 px-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<button id="send-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-blue-600"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="listening-indicator" class="hidden absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center"> |
|
|
<div class="text-center text-white"> |
|
|
<div class="listening-animation mb-2"> |
|
|
<i class="fas fa-microphone text-4xl"></i> |
|
|
</div> |
|
|
<p>Listening...</p> |
|
|
<p class="text-xs mt-2">Say "stop" when finished</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="font-semibold mb-3">Quick Actions</h2> |
|
|
<div class="grid grid-cols-4 gap-2"> |
|
|
<button class="bg-gray-50 p-3 rounded-lg text-center" onclick="runQuickAction('call')"> |
|
|
<i class="fas fa-phone text-blue-600 mb-1"></i> |
|
|
<p class="text-xs">Call</p> |
|
|
</button> |
|
|
<button class="bg-gray-50 p-3 rounded-lg text-center" onclick="runQuickAction('message')"> |
|
|
<i class="fas fa-comment text-purple-600 mb-1"></i> |
|
|
<p class="text-xs">Message</p> |
|
|
</button> |
|
|
<button class="bg-gray-50 p-3 rounded-lg text-center" onclick="runQuickAction('reminder')"> |
|
|
<i class="fas fa-bell text-yellow-600 mb-1"></i> |
|
|
<p class="text-xs">Reminder</p> |
|
|
</button> |
|
|
<button class="bg-gray-50 p-3 rounded-lg text-center" onclick="runQuickAction('email')"> |
|
|
<i class="fas fa-envelope text-red-600 mb-1"></i> |
|
|
<p class="text-xs">Email</p> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h2 class="font-semibold">Automated Tasks</h2> |
|
|
<button class="text-blue-600 text-sm" onclick="showAddTaskModal()"> |
|
|
<i class="fas fa-plus mr-1"></i> Add |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="tasks-container"> |
|
|
|
|
|
<div class="task-card bg-gray-50 rounded-lg p-3 mb-2 border border-gray-200 transition-all duration-200 cursor-pointer" onclick="runTask(1)"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h3 class="font-medium">Morning Routine</h3> |
|
|
<p class="text-xs text-gray-500">Turns on WiFi, reads news, plays music</p> |
|
|
</div> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="task-card bg-gray-50 rounded-lg p-3 mb-2 border border-gray-200 transition-all duration-200 cursor-pointer" onclick="runTask(2)"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h3 class="font-medium">Work Mode</h3> |
|
|
<p class="text-xs text-gray-500">Silences phone, opens work apps</p> |
|
|
</div> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="task-card bg-gray-50 rounded-lg p-3 mb-2 border border-gray-200 transition-all duration-200 cursor-pointer" onclick="runTask(3)"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h3 class="font-medium">Sleep Mode</h3> |
|
|
<p class="text-xs text-gray-500">DND, dims screen, sets alarm</p> |
|
|
</div> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<nav class="flex justify-around items-center bg-white border-t border-gray-200 p-3"> |
|
|
<button class="text-blue-600 p-2"> |
|
|
<i class="fas fa-home"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 p-2"> |
|
|
<i class="fas fa-tasks"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 p-2"> |
|
|
<i class="fas fa-calendar"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 p-2"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div id="add-task-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"> |
|
|
<div class="bg-white rounded-lg w-full max-w-md p-4 slide-up"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="font-bold">Create New Task</h3> |
|
|
<button onclick="hideAddTaskModal()" class="text-gray-500"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-1">Task Name</label> |
|
|
<input type="text" id="task-name" class="w-full border border-gray-200 rounded-lg p-2 text-sm"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-1">Actions</label> |
|
|
<div class="flex items-center mb-2"> |
|
|
<select class="flex-1 border border-gray-200 rounded-lg p-2 text-sm mr-2"> |
|
|
<option>Select action...</option> |
|
|
<option>Send message</option> |
|
|
<option>Make a call</option> |
|
|
<option>Set reminder</option> |
|
|
<option>Open app</option> |
|
|
<option>Adjust settings</option> |
|
|
</select> |
|
|
<button class="bg-gray-100 p-2 rounded-lg"> |
|
|
<i class="fas fa-plus text-blue-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-1">Trigger</label> |
|
|
<select class="w-full border border-gray-200 rounded-lg p-2 text-sm"> |
|
|
<option>Time of day</option> |
|
|
<option>Location</option> |
|
|
<option>App opened</option> |
|
|
<option>Manual</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<button onclick="addNewTask()" class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium"> |
|
|
Save Task |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const voiceBtn = document.getElementById('voice-btn'); |
|
|
const sendBtn = document.getElementById('send-btn'); |
|
|
const commandInput = document.getElementById('command-input'); |
|
|
const assistantResponse = document.getElementById('assistant-response'); |
|
|
const listeningIndicator = document.getElementById('listening-indicator'); |
|
|
const addTaskModal = document.getElementById('add-task-modal'); |
|
|
|
|
|
|
|
|
const sampleResponses = [ |
|
|
"I've set a reminder for your meeting tomorrow at 10 AM.", |
|
|
"Calling Mom on speakerphone...", |
|
|
"Your morning routine has been activated. Good morning!", |
|
|
"I've sent your location to Sarah via text message.", |
|
|
"Your phone is now in sleep mode. Good night!", |
|
|
"I found 3 new emails in your inbox. Would you like me to read them?" |
|
|
]; |
|
|
|
|
|
|
|
|
let isListening = false; |
|
|
|
|
|
voiceBtn.addEventListener('click', function() { |
|
|
isListening = !isListening; |
|
|
|
|
|
if (isListening) { |
|
|
listeningIndicator.classList.remove('hidden'); |
|
|
voiceBtn.classList.add('bg-red-600'); |
|
|
voiceBtn.innerHTML = '<i class="fas fa-stop"></i>'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const commands = [ |
|
|
"Set a reminder for my meeting tomorrow at 10 AM", |
|
|
"Call mom on speakerphone", |
|
|
"Activate morning routine", |
|
|
"Send my location to Sarah", |
|
|
"Enable sleep mode", |
|
|
"Check my emails" |
|
|
]; |
|
|
const randomCommand = commands[Math.floor(Math.random() * commands.length)]; |
|
|
commandInput.value = randomCommand; |
|
|
|
|
|
|
|
|
stopListening(); |
|
|
|
|
|
|
|
|
processCommand(randomCommand); |
|
|
}, 2000); |
|
|
} else { |
|
|
stopListening(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function stopListening() { |
|
|
isListening = false; |
|
|
listeningIndicator.classList.add('hidden'); |
|
|
voiceBtn.classList.remove('bg-red-600'); |
|
|
voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>'; |
|
|
} |
|
|
|
|
|
|
|
|
sendBtn.addEventListener('click', function() { |
|
|
const command = commandInput.value.trim(); |
|
|
if (command) { |
|
|
processCommand(command); |
|
|
commandInput.value = ''; |
|
|
} |
|
|
}); |
|
|
|
|
|
commandInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
const command = commandInput.value.trim(); |
|
|
if (command) { |
|
|
processCommand(command); |
|
|
commandInput.value = ''; |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
function processCommand(command) { |
|
|
|
|
|
assistantResponse.innerHTML = '<div class="flex space-x-2"><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.2s"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.4s"></div></div>'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const randomResponse = sampleResponses[Math.floor(Math.random() * sampleResponses.length)]; |
|
|
assistantResponse.innerHTML = `<p>${randomResponse}</p>`; |
|
|
|
|
|
|
|
|
assistantResponse.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); |
|
|
}, 1000 + Math.random() * 2000); |
|
|
} |
|
|
|
|
|
|
|
|
function runQuickAction(action) { |
|
|
let response = ""; |
|
|
|
|
|
switch(action) { |
|
|
case 'call': |
|
|
response = "Who would you like to call?"; |
|
|
break; |
|
|
case 'message': |
|
|
response = "Who should I message and what should I say?"; |
|
|
break; |
|
|
case 'reminder': |
|
|
response = "What should I remind you about and when?"; |
|
|
break; |
|
|
case 'email': |
|
|
response = "I'll open your email app. What would you like to do?"; |
|
|
break; |
|
|
} |
|
|
|
|
|
assistantResponse.innerHTML = `<p>${response}</p>`; |
|
|
commandInput.focus(); |
|
|
} |
|
|
|
|
|
|
|
|
function runTask(taskId) { |
|
|
let taskName = ""; |
|
|
|
|
|
switch(taskId) { |
|
|
case 1: |
|
|
taskName = "Morning Routine"; |
|
|
break; |
|
|
case 2: |
|
|
taskName = "Work Mode"; |
|
|
break; |
|
|
case 3: |
|
|
taskName = "Sleep Mode"; |
|
|
break; |
|
|
} |
|
|
|
|
|
assistantResponse.innerHTML = `<p>Running "${taskName}"... <i class="fas fa-spinner fa-spin ml-2"></i></p>`; |
|
|
|
|
|
setTimeout(() => { |
|
|
assistantResponse.innerHTML = `<p>"${taskName}" has been successfully activated!</p>`; |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
|
|
|
function showAddTaskModal() { |
|
|
addTaskModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideAddTaskModal() { |
|
|
addTaskModal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function addNewTask() { |
|
|
const taskName = document.getElementById('task-name').value.trim(); |
|
|
if (taskName) { |
|
|
|
|
|
const newTask = document.createElement('div'); |
|
|
newTask.className = 'task-card bg-gray-50 rounded-lg p-3 mb-2 border border-gray-200 transition-all duration-200 cursor-pointer slide-up'; |
|
|
newTask.innerHTML = ` |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h3 class="font-medium">${taskName}</h3> |
|
|
<p class="text-xs text-gray-500">Custom task</p> |
|
|
</div> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
document.getElementById('tasks-container').prepend(newTask); |
|
|
|
|
|
|
|
|
hideAddTaskModal(); |
|
|
document.getElementById('task-name').value = ''; |
|
|
|
|
|
|
|
|
assistantResponse.innerHTML = `<p>Your new task "${taskName}" has been created!</p>`; |
|
|
} |
|
|
} |
|
|
</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=muzaffarahmadmir/my-mobile-ai-agent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
