Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BuildHub - Unified Platform Builds</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .build-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .device-selector.active { | |
| border-color: #667eea; | |
| background-color: #f0f4ff; | |
| } | |
| .download-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .download-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-cubes text-2xl"></i> | |
| <span class="text-xl font-bold">BuildHub</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200 transition">Dashboard</a> | |
| <a href="#" class="hover:text-gray-200 transition">Builds</a> | |
| <a href="#" class="hover:text-gray-200 transition">Teams</a> | |
| <a href="#" class="hover:text-gray-200 transition">Settings</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <div class="mb-8 text-center"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Platform Builds</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Browse and install the latest builds for testing across different environments</p> | |
| </div> | |
| <!-- Filters --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0"> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-700 mb-2">Filter Builds</h2> | |
| <div class="flex flex-wrap gap-3"> | |
| <select id="platform-select" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="all">All Platforms</option> | |
| <option value="ios">iOS</option> | |
| <option value="android">Android</option> | |
| <option value="windows">Windows</option> | |
| </select> | |
| <select id="env-select" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="all">All Environments</option> | |
| <option value="staging">Staging</option> | |
| <option value="qa">QA</option> | |
| <option value="production">Production</option> | |
| </select> | |
| <select id="version-select" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="all">All Versions</option> | |
| <option value="1.0">1.0.x</option> | |
| <option value="2.0">2.0.x</option> | |
| <option value="3.0">3.0.x</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search builds..." class="pl-10 pr-4 py-2 border rounded-lg w-full md:w-64 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Device Selector --> | |
| <div class="mb-8"> | |
| <h2 class="text-lg font-semibold text-gray-700 mb-4">Select Your Device</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="device-selector active p-4 border-2 rounded-lg cursor-pointer transition flex flex-col items-center" data-device="ios"> | |
| <i class="fab fa-apple text-4xl text-gray-700 mb-2"></i> | |
| <span class="font-medium">iOS Device</span> | |
| </div> | |
| <div class="device-selector p-4 border-2 rounded-lg cursor-pointer transition flex flex-col items-center" data-device="android"> | |
| <i class="fab fa-android text-4xl text-green-500 mb-2"></i> | |
| <span class="font-medium">Android Device</span> | |
| </div> | |
| <div class="device-selector p-4 border-2 rounded-lg cursor-pointer transition flex flex-col items-center" data-device="windows"> | |
| <i class="fab fa-windows text-4xl text-blue-500 mb-2"></i> | |
| <span class="font-medium">Windows Device</span> | |
| </div> | |
| <div class="device-selector p-4 border-2 rounded-lg cursor-pointer transition flex flex-col items-center" data-device="mac"> | |
| <i class="fas fa-laptop text-4xl text-gray-600 mb-2"></i> | |
| <span class="font-medium">Mac Device</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Builds List --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800">Available Builds</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-500">Sort by:</span> | |
| <select class="text-sm border-0 focus:ring-0"> | |
| <option>Newest First</option> | |
| <option>Oldest First</option> | |
| <option>Version</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Build Card 1 --> | |
| <div class="build-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-2 rounded-lg mr-3"> | |
| <i class="fab fa-apple text-indigo-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">iOS App</h3> | |
| <span class="text-sm text-gray-500">Staging Environment</span> | |
| </div> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Latest</span> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600 mb-2">Version: <span class="font-semibold">2.3.5</span></p> | |
| <p class="text-gray-600 mb-2">Build: <span class="font-mono">#2356</span></p> | |
| <p class="text-gray-600">Released: <span class="font-semibold">2 hours ago</span></p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">New Features</span> | |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Bug Fixes</span> | |
| </div> | |
| <button class="download-btn bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Install | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Build Card 2 --> | |
| <div class="build-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-3"> | |
| <i class="fab fa-android text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">Android App</h3> | |
| <span class="text-sm text-gray-500">QA Environment</span> | |
| </div> | |
| </div> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Beta</span> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600 mb-2">Version: <span class="font-semibold">3.0.1</span></p> | |
| <p class="text-gray-600 mb-2">Build: <span class="font-mono">#3012</span></p> | |
| <p class="text-gray-600">Released: <span class="font-semibold">1 day ago</span></p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">Performance</span> | |
| </div> | |
| <button class="download-btn bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Install | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Build Card 3 --> | |
| <div class="build-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-2 rounded-lg mr-3"> | |
| <i class="fab fa-windows text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">Windows App</h3> | |
| <span class="text-sm text-gray-500">Staging Environment</span> | |
| </div> | |
| </div> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">Stable</span> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600 mb-2">Version: <span class="font-semibold">1.5.2</span></p> | |
| <p class="text-gray-600 mb-2">Build: <span class="font-mono">#1520</span></p> | |
| <p class="text-gray-600">Released: <span class="font-semibold">3 days ago</span></p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Security</span> | |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Bug Fixes</span> | |
| </div> | |
| <button class="download-btn bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Install | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Build Card 4 --> | |
| <div class="build-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-2 rounded-lg mr-3"> | |
| <i class="fab fa-apple text-indigo-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">iOS App</h3> | |
| <span class="text-sm text-gray-500">Production Environment</span> | |
| </div> | |
| </div> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">Public</span> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600 mb-2">Version: <span class="font-semibold">2.2.0</span></p> | |
| <p class="text-gray-600 mb-2">Build: <span class="font-mono">#2201</span></p> | |
| <p class="text-gray-600">Released: <span class="font-semibold">1 week ago</span></p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Stable</span> | |
| </div> | |
| <button class="download-btn bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Install | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Build Card 5 --> | |
| <div class="build-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-3"> | |
| <i class="fab fa-android text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">Android App</h3> | |
| <span class="text-sm text-gray-500">Staging Environment</span> | |
| </div> | |
| </div> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Alpha</span> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600 mb-2">Version: <span class="font-semibold">3.1.0</span></p> | |
| <p class="text-gray-600 mb-2">Build: <span class="font-mono">#3105</span></p> | |
| <p class="text-gray-600">Released: <span class="font-semibold">4 hours ago</span></p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Experimental</span> | |
| <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">New UI</span> | |
| </div> | |
| <button class="download-btn bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Install | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Build Card 6 --> | |
| <div class="build-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-2 rounded-lg mr-3"> | |
| <i class="fab fa-windows text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">Windows App</h3> | |
| <span class="text-sm text-gray-500">QA Environment</span> | |
| </div> | |
| </div> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Beta</span> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600 mb-2">Version: <span class="font-semibold">1.6.0</span></p> | |
| <p class="text-gray-600 mb-2">Build: <span class="font-mono">#1603</span></p> | |
| <p class="text-gray-600">Released: <span class="font-semibold">2 days ago</span></p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Features</span> | |
| </div> | |
| <button class="download-btn bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Install | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-8"> | |
| <nav class="inline-flex rounded-md shadow"> | |
| <a href="#" class="px-4 py-2 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50"> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-indigo-600 font-medium">1</a> | |
| <a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">2</a> | |
| <a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">3</a> | |
| <a href="#" class="px-4 py-2 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50"> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">BuildHub</h3> | |
| <p class="text-gray-400">The unified platform for managing and distributing your application builds across teams and environments.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API Reference</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Changelog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-slack text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin text-xl"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2023 BuildHub. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Installation Modal --> | |
| <div id="install-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Install Build</h3> | |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-4"> | |
| <div id="modal-platform-icon" class="bg-indigo-100 p-3 rounded-lg mr-3"> | |
| <i class="fab fa-apple text-indigo-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 id="modal-build-name" class="font-bold text-gray-800">iOS App</h4> | |
| <p id="modal-build-env" class="text-sm text-gray-500">Staging Environment</p> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <p class="text-gray-600"><span class="font-medium">Version:</span> <span id="modal-build-version">2.3.5</span></p> | |
| <p class="text-gray-600"><span class="font-medium">Build Number:</span> <span id="modal-build-number">#2356</span></p> | |
| <p class="text-gray-600"><span class="font-medium">Release Date:</span> <span id="modal-build-date">2 hours ago</span></p> | |
| <p class="text-gray-600"><span class="font-medium">Size:</span> <span id="modal-build-size">45.2 MB</span></p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Installation Method</label> | |
| <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Direct Download</option> | |
| <option>TestFlight (iOS only)</option> | |
| <option>Enterprise Distribution</option> | |
| </select> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancel-install" class="px-4 py-2 border rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button> | |
| <button id="confirm-install" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Install Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Device selector functionality | |
| document.querySelectorAll('.device-selector').forEach(selector => { | |
| selector.addEventListener('click', function() { | |
| document.querySelectorAll('.device-selector').forEach(el => el.classList.remove('active')); | |
| this.classList.add('active'); | |
| // Filter builds based on selected device | |
| const device = this.dataset.device; | |
| filterBuilds(device); | |
| }); | |
| }); | |
| // Filter builds based on selected device | |
| function filterBuilds(device) { | |
| const builds = document.querySelectorAll('.build-card'); | |
| builds.forEach(build => { | |
| const platformIcon = build.querySelector('.fa-apple, .fa-android, .fa-windows, .fa-laptop'); | |
| if (device === 'all' || | |
| (device === 'ios' && platformIcon.classList.contains('fa-apple')) || | |
| (device === 'android' && platformIcon.classList.contains('fa-android')) || | |
| (device === 'windows' && platformIcon.classList.contains('fa-windows')) || | |
| (device === 'mac' && platformIcon.classList.contains('fa-laptop'))) { | |
| build.classList.remove('hidden'); | |
| } else { | |
| build.classList.add('hidden'); | |
| } | |
| }); | |
| } | |
| // Install button functionality | |
| document.querySelectorAll('.download-btn').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const card = this.closest('.build-card'); | |
| const platformIcon = card.querySelector('.fa-apple, .fa-android, .fa-windows, .fa-laptop'); | |
| const modalPlatformIcon = document.getElementById('modal-platform-icon'); | |
| // Clear previous platform classes | |
| modalPlatformIcon.className = 'bg-indigo-100 p-3 rounded-lg mr-3'; | |
| if (platformIcon.classList.contains('fa-apple')) { | |
| modalPlatformIcon.classList.add('bg-indigo-100'); | |
| modalPlatformIcon.querySelector('i').className = 'fab fa-apple text-indigo-600 text-xl'; | |
| } else if (platformIcon.classList.contains('fa-android')) { | |
| modalPlatformIcon.className = 'bg-green-100 p-3 rounded-lg mr-3'; | |
| modalPlatformIcon.querySelector('i').className = 'fab fa-android text-green-600 text-xl'; | |
| } else if (platformIcon.classList.contains('fa-windows')) { | |
| modalPlatformIcon.className = 'bg-blue-100 p-3 rounded-lg mr-3'; | |
| modalPlatformIcon.querySelector('i').className = 'fab fa-windows text-blue-600 text-xl'; | |
| } | |
| // Populate modal with build info | |
| document.getElementById('modal-build-name').textContent = card.querySelector('h3').textContent; | |
| document.getElementById('modal-build-env').textContent = card.querySelector('span.text-sm').textContent; | |
| document.getElementById('modal-build-version').textContent = card.querySelectorAll('p.text-gray-600')[0].textContent.split(': ')[1]; | |
| document.getElementById('modal-build-number').textContent = card.querySelectorAll('p.text-gray-600')[1].textContent.split(': ')[1]; | |
| document.getElementById('modal-build-date').textContent = card.querySelectorAll('p.text-gray-600')[2].textContent.split(': ')[1]; | |
| // Show modal | |
| document.getElementById('install-modal').classList.remove('hidden'); | |
| }); | |
| }); | |
| // Close modal functionality | |
| document.getElementById('close-modal').addEventListener('click', function() { | |
| document.getElementById('install-modal').classList.add('hidden'); | |
| }); | |
| document.getElementById('cancel-install').addEventListener('click', function() { | |
| document.getElementById('install-modal').classList.add('hidden'); | |
| }); | |
| // Confirm installation | |
| document.getElementById('confirm-install').addEventListener('click', function() { | |
| alert('Installation started! Depending on your platform, you may need to follow additional steps.'); | |
| document.getElementById('install-modal').classList.add('hidden'); | |
| }); | |
| // Platform select filter | |
| document.getElementById('platform-select').addEventListener('change', function() { | |
| const platform = this.value; | |
| const builds = document.querySelectorAll('.build-card'); | |
| builds.forEach(build => { | |
| const platformIcon = build.querySelector('.fa-apple, .fa-android, .fa-windows'); | |
| if (platform === 'all' || | |
| (platform === 'ios' && platformIcon.classList.contains('fa-apple')) || | |
| (platform === 'android' && platformIcon.classList.contains('fa-android')) || | |
| (platform === 'windows' && platformIcon.classList.contains('fa-windows'))) { | |
| build.classList.remove('hidden'); | |
| } else { | |
| build.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Environment select filter | |
| document.getElementById('env-select').addEventListener('change', function() { | |
| const env = this.value; | |
| const builds = document.querySelectorAll('.build-card'); | |
| builds.forEach(build => { | |
| const envText = build.querySelector('span.text-sm').textContent.toLowerCase(); | |
| if (env === 'all' || envText.includes(env)) { | |
| build.classList.remove('hidden'); | |
| } else { | |
| build.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Version select filter | |
| document.getElementById('version-select').addEventListener('change', function() { | |
| const version = this.value; | |
| const builds = document.querySelectorAll('.build-card'); | |
| builds.forEach(build => { | |
| const versionText = build.querySelectorAll('p.text-gray-600')[0].textContent.split(': ')[1]; | |
| if (version === 'all' || versionText.startsWith(version)) { | |
| build.classList.remove('hidden'); | |
| } else { | |
| build.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <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=krishgokul92/buildhub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |