|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DeepCAL Oracle - Nigerian Logistics Assistant</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #4F46E5; |
|
|
--secondary: #10B981; |
|
|
--accent: #F59E0B; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #F3F4F6; |
|
|
} |
|
|
|
|
|
.chat-bubble { |
|
|
max-width: 80%; |
|
|
border-radius: 1.5rem; |
|
|
padding: 1rem 1.5rem; |
|
|
margin-bottom: 1rem; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.user-bubble { |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
align-self: flex-end; |
|
|
border-bottom-right-radius: 0.5rem; |
|
|
} |
|
|
|
|
|
.bot-bubble { |
|
|
background-color: white; |
|
|
color: #1F2937; |
|
|
align-self: flex-start; |
|
|
border-bottom-left-radius: 0.5rem; |
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.math-display { |
|
|
background-color: #F9FAFB; |
|
|
border-left: 4px solid var(--accent); |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
font-family: monospace; |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
.route-score { |
|
|
display: inline-block; |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 9999px; |
|
|
font-weight: 600; |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
|
|
|
.voice-btn { |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.voice-btn:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.pulsing { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-indigo-600 text-white py-4 px-6 shadow-md"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 bg-yellow-400 rounded-full flex items-center justify-center text-indigo-700 font-bold text-xl"> |
|
|
MO |
|
|
</div> |
|
|
<h1 class="text-xl font-bold">DeepCAL Oracle</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="voiceToggle" class="bg-white text-indigo-600 px-4 py-2 rounded-full font-medium flex items-center space-x-2"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
<span>Voice ON</span> |
|
|
</button> |
|
|
<button class="bg-indigo-700 hover:bg-indigo-800 px-4 py-2 rounded-full font-medium"> |
|
|
Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 container mx-auto py-6 px-4 flex flex-col md:flex-row gap-6"> |
|
|
|
|
|
<div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden flex flex-col"> |
|
|
|
|
|
<div class="bg-gray-50 px-6 py-4 border-b flex justify-between items-center"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Logistics Assistant</h2> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm text-gray-500">Mo is online</span> |
|
|
<div class="w-2 h-2 bg-green-500 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chatContainer" class="flex-1 p-6 overflow-y-auto flex flex-col"> |
|
|
|
|
|
<div class="chat-bubble bot-bubble"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center text-indigo-700 font-bold text-sm"> |
|
|
MO |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Welcome to DeepCAL Oracle!</p> |
|
|
<p class="mt-1">I be Mo, your logistics assistant with Nigerian flavor. How I fit help you today? You wan compare forwarders or check best route?</p> |
|
|
<div class="mt-3 flex flex-wrap gap-2"> |
|
|
<button class="quick-prompt bg-indigo-100 hover:bg-indigo-200 text-indigo-700 px-3 py-1 rounded-full text-sm"> |
|
|
Compare DHL and Kuehne & Nagel to Lagos |
|
|
</button> |
|
|
<button class="quick-prompt bg-indigo-100 hover:bg-indigo-200 text-indigo-700 px-3 py-1 rounded-full text-sm"> |
|
|
Fastest route to Accra this week |
|
|
</button> |
|
|
<button class="quick-prompt bg-indigo-100 hover:bg-indigo-200 text-indigo-700 px-3 py-1 rounded-full text-sm"> |
|
|
Cheapest option to Nairobi |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t p-4 bg-gray-50"> |
|
|
<div class="relative"> |
|
|
<textarea id="userInput" rows="2" class="w-full px-4 py-3 pr-16 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Ask me about shipping routes, forwarders, or logistics..."></textarea> |
|
|
<div class="absolute right-3 bottom-3 flex space-x-2"> |
|
|
<button id="voiceInputBtn" class="voice-btn bg-indigo-100 text-indigo-700 p-2 rounded-full"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button id="sendBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white p-2 rounded-full"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full md:w-96 bg-white rounded-xl shadow-md overflow-hidden flex flex-col"> |
|
|
|
|
|
<div class="bg-gray-50 px-6 |
|
|
</html> |
