File size: 7,573 Bytes
7df1870 0d1315b 7df1870 0d1315b 7df1870 | 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 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SaaS Dashboard - 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>
<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 items-center justify-between">
<div class="flex items-center space-x-3">
<i data-feather="radio" class="w-8 h-8 text-blue-400"></i>
<h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">SaaS Dashboard</h1>
</div>
<div class="flex items-center space-x-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>
All Systems Online
</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>
</div>
</div>
</header>
<!-- Communication Channels -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Main Communication Panel -->
<div class="lg:col-span-2 space-y-6">
<div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-5 border border-gray-700/50 shadow-lg">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i data-feather="message-circle" class="w-5 h-5 mr-2 text-blue-400"></i>
Active Communications
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<a href="chat.html" class="block p-4 bg-purple-900/20 rounded-lg border border-purple-700/50 hover:border-purple-500/50 transition-all">
<div class="flex items-center space-x-3">
<i data-feather="cpu" class="w-6 h-6 text-purple-400"></i>
<div>
<h3 class="font-medium">AI Assistant</h3>
<p class="text-sm text-gray-400">Intelligent chat support</p>
</div>
</div>
</a>
<a href="video-call.html" class="block p-4 bg-blue-900/20 rounded-lg border border-blue-700/50 hover:border-blue-500/50 transition-all">
<div class="flex items-center space-x-3">
<i data-feather="video" class="w-6 h-6 text-blue-400"></i>
<div>
<h3 class="font-medium">Video Conference</h3>
<p class="text-sm text-gray-400">Team video calls</p>
</div>
</div>
</a>
<a href="fm-dashboard.html" class="block p-4 bg-green-900/20 rounded-lg border border-green-700/50 hover:border-green-500/50 transition-all">
<div class="flex items-center space-x-3">
<i data-feather="radio" class="w-6 h-6 text-green-400"></i>
<div>
<h3 class="font-medium">FM Radio</h3>
<p class="text-sm text-gray-400">Emergency FM channels</p>
</div>
</div>
</a>
<a href="bluetooth-walkie-talkie.html" class="block p-4 bg-cyan-900/20 rounded-lg border border-cyan-700/50 hover:border-cyan-500/50 transition-all">
<div class="flex items-center space-x-3">
<i data-feather="bluetooth" class="w-6 h-6 text-cyan-400"></i>
<div>
<h3 class="font-medium">Bluetooth Radio</h3>
<p class="text-sm text-gray-400">Walkie-talkie system</p>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="space-y-6">
<div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-5 border border-gray-700/50 shadow-lg">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i data-feather="zap" class="w-5 h-5 mr-2 text-yellow-400"></i>
Quick Actions
</h2>
<div class="space-y-3">
<button class="w-full btn-danger justify-start">
<i data-feather="alert-triangle" class="w-4 h-4 mr-3"></i>
Emergency Broadcast
</button>
<button class="w-full btn-primary justify-start">
<i data-feather="phone" class="w-4 h-4 mr-3"></i>
Call All Units
</button>
<button class="w-full btn-secondary justify-start">
<i data-feather="bell" class="w-4 h-4 mr-3"></i>
Alert System
</button>
</div>
</div>
</div>
</div>
</div>
<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: 0x3a82ff,
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();
// Handle browser back/forward buttons
window.addEventListener('popstate', function(event) {
location.reload();
});
history.pushState(null, null, location.href);
</script>
<script src="components/navbar.js"></script>
</body>
</html> |