captreuben/virtual-airline-commander-pro
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>API Integration | Virtual Airline Commander Pro</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10</head>11<body class="bg-gray-900 text-gray-100 min-h-screen">12 <!-- Mobile Menu Button -->13 <button id="mobile-menu-button" class="md:hidden fixed top-4 left-4 z-50 p-2 rounded-md bg-gray-800 text-white">14 <i data-feather="menu"></i>15 </button>16 17 <!-- Sidebar Navigation -->18 <div class="sidebar fixed inset-y-0 left-0 z-40 w-64 bg-gray-800 border-r border-gray-700 flex flex-col">19 <div class="p-4 border-b border-gray-700">20 <div class="flex items-center space-x-2">21 <i data-feather="navigation" class="text-blue-400"></i>22 <h1 class="text-xl font-bold">VAC Pro</h1>23 </div>24 </div>25 <nav class="flex-1 p-4 space-y-2">26 <a href="index.html" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">27 <i data-feather="home"></i>28 <span>Dashboard</span>29 </a>30 <a href="schedule.html" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">31 <i data-feather="calendar"></i>32 <span>Flight Schedule</span>33 </a>34 <a href="logbook.html" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">35 <i data-feather="book"></i>36 <span>Logbook</span>37 </a>38 <a href="settings.html" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">39 <i data-feather="settings"></i>40 <span>Settings</span>41 </a>42 <a href="#" class="flex items-center space-x-2 p-2 rounded bg-gray-700 text-blue-400">43 <i data-feather="users"></i>44 <span>Virtual Airlines</span>45 </a>46 </nav>47 <div class="p-4 border-t border-gray-700">48 <div class="flex items-center space-x-2">49 <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">50 <i data-feather="user" class="w-4 h-4"></i>51 </div>52 <span class="text-sm">Guest Pilot</span>53 </div>54 </div>55 </div>56 57 <!-- Main Content -->58 <main class="ml-0 md:ml-64 p-4 relative z-10">59 <div class="max-w-3xl mx-auto">60 <div class="flex justify-between items-center mb-6">61 <h2 class="text-2xl font-bold flex items-center space-x-2">62 <i data-feather="users" class="text-blue-400"></i>63 <span>Virtual Airlines</span>64 </h2>65 </div>66 67 <!-- Airlines List -->68 <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">69 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">70 <div class="airline-card bg-gray-700/50 hover:bg-gray-700 rounded-lg p-4 border border-gray-600 cursor-pointer transition">71 <div class="flex items-center space-x-3">72 <img src="http://static.photos/travel/200x200/1" alt="Airline Logo" class="w-12 h-12 rounded-full object-cover">73 <div>74 <h3 class="font-medium">Global Virtual Airlines</h3>75 <p class="text-xs text-gray-400">200+ pilots</p>76 </div>77 </div>78 <button class="mt-3 w-full bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-sm font-medium transition">79 Join Airline80 </button>81 </div>82 <div class="airline-card bg-gray-700/50 hover:bg-gray-700 rounded-lg p-4 border border-gray-600 cursor-pointer transition">83 <div class="flex items-center space-x-3">84 <img src="http://static.photos/travel/200x200/2" alt="Airline Logo" class="w-12 h-12 rounded-full object-cover">85 <div>86 <h3 class="font-medium">SkyWings Virtual</h3>87 <p class="text-xs text-gray-400">150+ pilots</p>88 </div>89 </div>90 <button class="mt-3 w-full bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-sm font-medium transition">91 Join Airline92 </button>93 </div>94 </div>95 </div>96 97 <!-- API Integration -->98 <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mt-6">99 <h3 class="text-lg font-semibold mb-4 flex items-center space-x-2">100 <i data-feather="code" class="text-blue-400"></i>101 <span>API Integration</span>102 </h3>103 104 <p class="text-sm text-gray-400 mb-4">105 Connect your simulator to our API for real-time flight tracking and automation.106 </p>107 108 <div class="space-y-4">109 <div class="bg-gray-700/50 rounded-lg p-4">110 <div class="flex items-center justify-between">111 <div class="flex items-center space-x-3">112 <i data-feather="key" class="text-blue-400"></i>113 <div>114 <h4 class="font-medium">API Key</h4>115 <p class="text-xs text-gray-400">Your personal access token</p>116 </div>117 </div>118 <code class="text-sm bg-gray-800 px-2 py-1 rounded">••••••••••••••••</code>119 </div>120 </div>121 122 <div class="bg-gray-700/50 rounded-lg p-4">123 <h4 class="font-medium mb-2">API Documentation</h4>124 <p class="text-sm text-gray-400 mb-3">125 Our API allows you to integrate flight data with your simulator and third-party tools.126 </p>127 <a href="#" class="text-blue-400 hover:text-blue-300 text-sm flex items-center space-x-1">128 <span>View API Documentation</span>129 <i data-feather="external-link" class="w-4 h-4"></i>130 </a>131 </div>132 133 <button class="w-full bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg text-sm font-medium transition flex items-center justify-center space-x-2">134 <i data-feather="refresh-cw" class="w-4 h-4"></i>135 <span>Generate New API Key</span>136 </button>137 </div>138 </div>139 </div>140 </main>141 142 <script>143 // Mobile menu toggle144 document.getElementById('mobile-menu-button').addEventListener('click', function() {145 document.querySelector('.sidebar').classList.toggle('active');146 });147 148 // Initialize feather icons149 document.addEventListener('DOMContentLoaded', function() {150 feather.replace();151 152 // Example API functionality153 document.querySelectorAll('.airline-card').forEach(card => {154 card.addEventListener('click', function() {155 // In a real app, this would make an API call156 alert('Joining airline - this would make an API call in production');157 });158 });159 160 // Generate API key161 document.querySelector('button.bg-green-600').addEventListener('click', function() {162 // In a real app, this would make an API call163 alert('Generating new API key - would call backend in production');164 });165 });166 </script>167</body>168</html>