|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Jay's Mobile Wash AI Call Center</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> |
|
|
|
|
|
:root { |
|
|
--primary: #1e88e5; |
|
|
--secondary: #43a047; |
|
|
--background: #f5f5f5; |
|
|
--text: #333333; |
|
|
--card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
body.dark { |
|
|
--primary: #64b5f6; |
|
|
--secondary: #81c784; |
|
|
--background: #1a1a1a; |
|
|
--text: #e0e0e0; |
|
|
--card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); |
|
|
background-color: #121212; |
|
|
color: #e0e0e0; |
|
|
} |
|
|
|
|
|
.message-user { |
|
|
background-color: #e3f2fd; |
|
|
margin-right: 20%; |
|
|
} |
|
|
|
|
|
.message-bot { |
|
|
background-color: #f1f8e9; |
|
|
margin-left: 20%; |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
display: inline-block; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
margin-right: 5px; |
|
|
} |
|
|
|
|
|
.status-healthy { |
|
|
background-color: #4caf50; |
|
|
} |
|
|
|
|
|
.status-warning { |
|
|
background-color: #ff9800; |
|
|
} |
|
|
|
|
|
.status-error { |
|
|
background-color: #f44336; |
|
|
} |
|
|
|
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.tab-content.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.3s ease-in-out; |
|
|
} |
|
|
|
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
|
|
|
|
|
|
* { |
|
|
transition: background-color 0.2s ease, color 0.2s ease; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
body.dark ::-webkit-scrollbar-track { |
|
|
background: #333; |
|
|
} |
|
|
|
|
|
body.dark ::-webkit-scrollbar-thumb { |
|
|
background: #666; |
|
|
} |
|
|
|
|
|
body.dark ::-webkit-scrollbar-thumb:hover { |
|
|
background: #888; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen"> |
|
|
|
|
|
<header class="bg-blue-600 dark:bg-blue-900 text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h1 class="text-3xl md:text-4xl font-bold"><i class="fas fa-car mr-2"></i>Jay's Mobile Wash</h1> |
|
|
<p class="mt-1 text-blue-100 dark:text-blue-200">AI Call Center - Daylight Reveals Perfection</p> |
|
|
</div> |
|
|
<div> |
|
|
<button id="darkModeToggle" class="bg-gray-700 dark:bg-gray-300 text-white dark:text-gray-900 rounded-full w-10 h-10 flex items-center justify-center focus:outline-none hover:bg-gray-600 dark:hover:bg-gray-400"> |
|
|
<i class="fas fa-moon dark:hidden"></i> |
|
|
<i class="fas fa-sun hidden dark:block"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
|
|
|
<div class="flex overflow-x-auto mb-6 border-b border-gray-300 dark:border-gray-700"> |
|
|
<button onclick="openTab(event, 'chatTab')" class="tab-button px-4 py-3 font-medium border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 whitespace-nowrap active"> |
|
|
<i class="fas fa-comments mr-2"></i>Chat |
|
|
</button> |
|
|
<button onclick="openTab(event, 'voiceTab')" class="tab-button px-4 py-3 font-medium border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 whitespace-nowrap"> |
|
|
<i class="fas fa-microphone mr-2"></i>Voice |
|
|
</button> |
|
|
<button onclick="openTab(event, 'smsTab')" class="tab-button px-4 py-3 font-medium border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 whitespace-nowrap"> |
|
|
<i class="fas fa-sms mr-2"></i>SMS Response |
|
|
</button> |
|
|
<button onclick="openTab(event, 'dashboardTab')" class="tab-button px-4 py-3 font-medium border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 whitespace-nowrap"> |
|
|
<i class="fas fa-tachometer-alt mr-2"></i>Dashboard |
|
|
</button> |
|
|
<button onclick="openTab(event, 'setupTab')" class="tab-button px-4 py-3 font-medium border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 whitespace-nowrap"> |
|
|
<i class="fas fa-cog mr-2"></i>Setup Wizard |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div id="chatTab" class="tab-content active"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6"> |
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-robot mr-2 text-green-500"></i>Chat Assistant |
|
|
</h2> |
|
|
<div id="chatHistory" class="h-96 overflow-y-auto mb-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-700"> |
|
|
|
|
|
<div class="mb-4 p-3 rounded-lg"> |
|
|
<p class="text-gray-600 dark:text-gray-300 text-center">Welcome to Jay's Mobile Wash AI Call Center! How can I assist you today?</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<input type="text" id="chatInput" class="flex-1 p-3 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" placeholder="Type your message here..."> |
|
|
<button onclick="sendMessage()" class="bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white px-6 rounded-r-lg font-medium"> |
|
|
<i class="fas fa-paper-plane mr-2"></i>Send |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="voiceTab" class="tab-content"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6"> |
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-microphone-alt mr-2 text-purple-500"></i>Voice Generator |
|
|
</h2> |
|
|
<div class="mb-4"> |
|
|
<label class="block mb-2 font-medium">Enter text to generate voice:</label> |
|
|
<textarea id="voiceTextInput" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg h-32 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" placeholder="Type the text you want to hear..."></textarea> |
|
|
</div> |
|
|
<button onclick="generateVoice()" class="bg-purple-600 dark:bg-purple-700 hover:bg-purple-700 dark:hover:bg-purple-800 text-white px-6 py-3 rounded-lg font-medium"> |
|
|
<i class="fas fa-volume-up mr-2"></i>Generate Voice |
|
|
</button> |
|
|
|
|
|
<div class="mt-6 bg-gray-100 dark:bg-gray-700 p-4 rounded-lg"> |
|
|
<p id="voiceStatus" class="mb-2">Ready to generate audio.</p> |
|
|
<audio id="audioPlayer" controls class="w-full"></audio> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="smsTab" class="tab-content"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-6"> |
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-inbox mr-2 text-orange-500"></i>Pending SMS Messages |
|
|
</h2> |
|
|
<div class="mb-4 flex justify-between items-center"> |
|
|
<p id="smsStatus" class="text-gray-600 dark:text-gray-300">Loading pending messages...</p> |
|
|
<button onclick="loadPendingSMS()" class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg font-medium text-sm flex items-center"> |
|
|
<i class="fas fa-sync-alt mr-2"></i>Refresh |
|
|
</button> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table id="pendingSMSTable" class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden"> |
|
|
<thead class="bg-gray-100 dark:bg-gray-700"> |
|
|
<tr> |
|
|
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 dark:text-gray-300">From</th> |
|
|
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Message</th> |
|
|
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Time</th> |
|
|
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Action</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
|
|
|
<tr> |
|
|
<td colspan="4" class="py-4 px-4 text-center text-gray-500 dark:text-gray-400">No pending messages</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6"> |
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-reply mr-2 text-green-500"></i>Respond to Message |
|
|
</h2> |
|
|
<form onsubmit="event.preventDefault(); sendSMSResponse();"> |
|
|
<input type="hidden" id="smsId"> |
|
|
<div class="mb-4"> |
|
|
<label class="block mb-2 font-medium">To:</label> |
|
|
<p id="smsTo" class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">Select a message above</p> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block mb-2 font-medium">Response:</label> |
|
|
<textarea id="smsText" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg h-32 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" placeholder="Type your response here..."></textarea> |
|
|
</div> |
|
|
<button type="submit" class="bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-800 text-white px-6 py-3 rounded-lg font-medium"> |
|
|
<i class="fas fa-paper-plane mr-2"></i>Send Response |
|
|
</button> |
|
|
</form> |
|
|
<p id="smsResponseStatus" class="mt-4"></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="dashboardTab" class="tab-content"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6"> |
|
|
<h2 class="text-2xl font-semibold mb-6 flex items-center"> |
|
|
<i class="fas fa-chart-line mr-2 text-blue-500"></i>System Dashboard |
|
|
</h2> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-xl font-semibold">System Status</h3> |
|
|
<button onclick="loadSystemHealth()" class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg font-medium text-sm flex items-center"> |
|
|
<i class="fas fa-sync-alt mr-2"></i>Refresh |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<span id="systemStatus" class="status-indicator status-warning"></span> |
|
|
<span id="systemStatusText" class="ml-2 font-medium">Loading system status...</span> |
|
|
</div> |
|
|
|
|
|
<h4 class="font-medium mb-2">Components</h4> |
|
|
<table id="componentsTable" class="w-full"> |
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-600"> |
|
|
<tr> |
|
|
<td colspan="2" class="py-2 text-center text-gray-500 dark:text-gray-400">Loading component status...</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="bg-blue-100 dark:bg-blue-900 rounded-lg p-6 shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-200 dark:bg-blue-800 mr-4"> |
|
|
<i class="fas fa-sms text-blue-600 dark:text-blue-400 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">Pending SMS</p> |
|
|
<p id="pendingSMSCount" class="text-2xl font-semibold">0</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-green-100 dark:bg-green-900 rounded-lg p-6 shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-200 dark:bg-green-800 mr-4"> |
|
|
<i class="fas fa-phone-alt text-green-600 dark:text-green-400 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">Active Calls</p> |
|
|
<p id="activeCallsCount" class="text-2xl font-semibold">0</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-4">Recent Activity</h3> |
|
|
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4"> |
|
|
<p class="text-gray-500 dark:text-gray-400">Activity log coming soon...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="setupTab" class="tab-content"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6"> |
|
|
<h2 class="text-2xl font-semibold mb-6 flex items-center"> |
|
|
<i class="fas fa-wizard-magic mr-2 text-purple-500"></i>Setup Wizard |
|
|
</h2> |
|
|
|
|
|
<form onsubmit="event.preventDefault(); saveConfiguration();" class="space-y-6"> |
|
|
|
|
|
<div class="border-b border-gray-200 dark:border-gray-700 pb-6"> |
|
|
<h3 class="text-xl font-semibold mb-4">Twilio Configuration</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block mb-1 font-medium">Account SID</label> |
|
|
<input type="text" id="twilioSid" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" placeholder="ACxxxxxxxxxxxxxxxx"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-1 font-medium">Auth Token</label> |
|
|
<input type="password" id="twilioToken" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" placeholder="xxxxxxxxxxxxxx"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-1 font-medium">Twilio Phone Number</label> |
|
|
<input type="text" id="twilioPhone" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" placeholder="+15622289429"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-b border-gray-200 dark:border-gray-700 pb-6"> |
|
|
<h3 class="text-xl font-semibold mb-4">Personal Phone Integration</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="usePersonalNumber" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700"> |
|
|
<label for="usePersonalNumber" class="ml-2 block font-medium">Use Personal Phone for Outgoing Messages</label> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-1 font-medium">Your Verizon Phone Number</label> |
|
|
<input type="text" id="personalPhone" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" placeholder="+15551234567"> |
|
|
</div> |
|
|
<div class="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold mb-2">Important</h4> |
|
|
<p class="text-sm text-blue-700 dark:text-blue-300"> |
|
|
<span class="font-semibold">Verizon Call Forwarding:</span><br> |
|
|
• Dial *71 followed by your Twilio number to forward when busy<br> |
|
|
• Dial *72 followed by your Twilio number to forward when unanswered |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-b border-gray-200 dark:border-gray-700 pb-6"> |
|
|
<h3 class="text-xl font-semibold mb-4">Model & Platform</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="useGpu" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700"> |
|
|
<label for="useGpu" class="ml-2 block font-medium">Use GPU Acceleration (A100)</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="useCpu" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700" checked> |
|
|
<label for="useCpu" class="ml-2 block font-medium">Optimize for CPU (Zero GPU deployment)</label> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-1 font-medium">Hugging Face API Token</label> |
|
|
<input type="password" id="hfToken" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" placeholder="hf_xxxxxxxxxxxxxxxx"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-1 font-medium">Application Domain</label> |
|
|
<input type="text" id="domain" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" placeholder="yourusername-vocal-chat-bot.hf.space"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-4">Timing Settings</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block mb-1 font-medium">SMS Response Timeout (seconds)</label> |
|
|
<input type="number" id="smsTimeout" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" value="60" min="10" max="300"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-1 font-medium">Call Answer Delay (seconds)</label> |
|
|
<input type="number" id="callDelay" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" value="15" min="0" max="60"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white py-3 rounded-lg font-medium"> |
|
|
<i class="fas fa-save mr-2"></i>Save Configuration |
|
|
</button> |
|
|
<p id="setupStatus" class="mt-3"></p> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white mt-12"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<h2 class="text-2xl font-bold">Jay's Mobile Wash</h2> |
|
|
<p class="text-gray-400">AI Call Center Solution</p> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<p class="text-gray-400">Current Version: 1.0.0</p> |
|
|
<p class="text-gray-400">Deployed on Hugging Face Spaces</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 border-t border-gray-700 pt-6 text-center text-gray-400 text-sm"> |
|
|
<p>© 2025 Jay's Mobile Wash. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const darkModeToggle = document.getElementById('darkModeToggle'); |
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; |
|
|
const storedDarkMode = localStorage.getItem('darkMode'); |
|
|
|
|
|
|
|
|
if (storedDarkMode === 'enabled' || (storedDark |
|
|
<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=jjmandog/v" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
