File size: 5,704 Bytes
439a409 99d9682 439a409 2404656 ffe44f7 439a409 424fe85 439a409 ffe44f7 439a409 99d9682 a8ffa2e 439a409 ffe44f7 439a409 a8ffa2e 439a409 ffe44f7 439a409 424fe85 ffe44f7 424fe85 99d9682 ffe44f7 99d9682 424fe85 99d9682 b623888 99d9682 8c9360a ffe44f7 439a409 8c9360a | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Assistant - ComSync Pro</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-900 text-gray-100">
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
<script src="components/navbar.js"></script>
<custom-navbar></custom-navbar>
<div class="relative z-10 min-h-screen p-4 md:p-6">
<!-- Header -->
<header class="bg-gray-800/80 backdrop-blur-md rounded-xl p-4 mb-6 border border-gray-700/50 shadow-lg">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div class="flex items-center space-x-3">
<i data-feather="cpu" class="w-8 h-8 text-purple-400"></i>
<h1 class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">AI Assistant</h1>
</div>
<div class="flex flex-wrap items-center gap-4">
<div class="status-pill flex items-center px-3 py-1 rounded-full text-sm bg-green-900/30 text-green-400">
<i data-feather="check-circle" class="w-4 h-4 mr-1"></i>
<span id="connection-status">Connected</span>
</div>
<div class="flex items-center space-x-1">
<i data-feather="clock" class="w-5 h-5"></i>
<span class="text-sm" id="current-time">14:45:32</span>
</div>
<button class="settings-btn p-2 bg-gray-700/50 hover:bg-gray-600/50 rounded-lg transition-all">
<i data-feather="settings" class="w-5 h-5"></i>
</button>
</div>
</div>
</header>
<!-- Chat Container -->
<div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-5 border border-gray-700/50 shadow-lg max-w-4xl mx-auto">
<div class="flex flex-col h-[calc(100vh-220px)]">
<!-- Chat Header -->
<div class="mb-4 pb-4 border-b border-gray-700">
<h2 class="text-xl font-semibold flex items-center">
<i data-feather="cpu" class="w-5 h-5 mr-2 text-purple-400"></i>
Gemma v4 AI Assistant
</h2>
<p class="text-sm text-gray-400 mt-1">Ask anything related to operations, logistics, or emergency procedures</p>
</div>
<!-- Chat Component -->
<chat-component id="chatComponent"></chat-component>
<div class="mt-4">
<p class="text-xs text-gray-500 text-center mt-2">Powered by Meta-Gemma/gemma-v4-8b-instruct</p>
</div>
</div>
</div>
</div>
<script src="components/chat-component.js"></script>
<script>
// Initialize Vanta.js background
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x8b5cf6,
backgroundColor: 0x111827,
points: 10.00,
maxDistance: 22.00,
spacing: 18.00
});
// Update current time
function updateTime() {
const now = new Date();
document.getElementById('current-time').textContent = now.toLocaleTimeString();
}
setInterval(updateTime, 1000);
updateTime();
// Initialize Feather Icons
feather.replace();
// Connection status simulation
let isConnected = true;
function updateConnectionStatus() {
const statusElement = document.getElementById('connection-status');
if (isConnected) {
statusElement.textContent = 'Connected';
statusElement.parentElement.className = 'status-pill flex items-center px-3 py-1 rounded-full text-sm bg-green-900/30 text-green-400';
} else {
statusElement.textContent = 'Disconnected';
statusElement.parentElement.className = 'status-pill flex items-center px-3 py-1 rounded-full text-sm bg-red-900/30 text-red-400';
}
}
// Simulate connection issues randomly
setInterval(() => {
if (Math.random() > 0.95) { // Less frequent for better UX
isConnected = !isConnected;
updateConnectionStatus();
}
}, 30000);
// Settings handler
document.querySelector('.settings-btn').addEventListener('click', function() {
alert('🤖 AI Assistant Settings:\n\n• Response Speed: Normal\n• Context Awareness: Enabled\n• Mission Integration: Active\n• Emergency Detection: Enabled\n\nSettings would open in a full implementation.');
});
// Navigation history
window.addEventListener('popstate', function(event) {
location.reload();
});
history.pushState(null, null, location.href);
</script>
</body>
</html>
|