Spaces:
Running
Running
create an apps store for me, name it apps store. keep the primary colors , orange, black, gray and white.
f90e29b verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AppVault | Apps</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#FF6B35', | |
| secondary: '#292929', | |
| accent: '#555555', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .app-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="bg-secondary w-64 min-h-full text-white p-4 flex flex-col"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h1 class="text-xl font-bold">AppVault</h1> | |
| <i data-feather="menu" class="cursor-pointer lg:hidden"></i> | |
| </div> | |
| <nav class="flex-1"> | |
| <div class="space-y-2"> | |
| <a href="dashboard.html" class="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10"> | |
| <i data-feather="grid"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="apps.html" class="flex items-center space-x-2 bg-primary bg-opacity-20 px-3 py-2 rounded-lg"> | |
| <i data-feather="package"></i> | |
| <span>Apps</span> | |
| </a> | |
| <a href="users.html" class="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10"> | |
| <i data-feather="users"></i> | |
| <span>Users</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="mt-auto"> | |
| <div class="flex items-center space-x-2 p-2 hover:bg-white hover:bg-opacity-10 rounded-lg cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white"> | |
| <i data-feather="user"></i> | |
| </div> | |
| <span class="text-sm">Admin</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-y-auto p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-secondary">Manage Apps</h2> | |
| <div class="flex space-x-3"> | |
| <div class="relative"> | |
| <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> | |
| <input type="text" placeholder="Search apps..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition"> | |
| </div> | |
| <button onclick="openAddAppModal()" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition flex items-center"> | |
| <i data-feather="plus" class="mr-2"></i> Add App | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Filter --> | |
| <div class="flex flex-wrap items-center mb-6 gap-2"> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white rounded-lg border border-gray-300 py-2 pl-3 pr-8 focus:ring-2 focus:ring-primary focus:border-transparent transition"> | |
| <option>All Categories</option> | |
| <option>Web Apps</option> | |
| <option>Mobile Apps</option> | |
| <option>API Services</option> | |
| <option>USSD Services</option> | |
| </select> | |
| <i data-feather="chevron-down" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i> | |
| </div> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white rounded-lg border border-gray-300 py-2 pl-3 pr-8 focus:ring-2 focus:ring-primary focus:border-transparent transition"> | |
| <option>Sort by: Newest</option> | |
| <option>Sort by: Oldest</option> | |
| <option>Sort by: Most Used</option> | |
| <option>Sort by: A-Z</option> | |
| </select> | |
| <i data-feather="chevron-down" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="inline-flex items-center space-x-1 bg-white rounded-lg border border-gray-300 p-1"> | |
| <button class="p-1 rounded-md hover:bg-gray-100"> | |
| <i data-feather="grid" class="text-secondary"></i> | |
| </button> | |
| <button class="p-1 rounded-md hover:bg-gray-100"> | |
| <i data-feather="list" class="text-gray-400"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Cards --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- App Card 1 --> | |
| <div class="app-card bg-white rounded-xl shadow overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <img src="http://static.photos/technology/640x360/1" alt="App Image" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-secondary mb-1">Finance Dashboard</h3> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-2 py-1 rounded">Web App</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3 line-clamp-2">Comprehensive financial analytics and reporting tool for business insights.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> 248 | |
| </div> | |
| <a href="https://finance.example.com" target="_blank" class="text-primary text-sm font-medium hover:underline">Launch App</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Card 2 --> | |
| <div class="app-card bg-white rounded-xl shadow overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <img src="http://static.photos/finance/640x360/2" alt="App Image" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-secondary mb-1">Weather API</h3> | |
| <span class="bg-secondary bg-opacity-10 text-secondary text-xs px-2 py-1 rounded">API</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3 line-clamp-2">Real-time weather data and forecasts for any location worldwide.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> 187 | |
| </div> | |
| <a href="https://api.weather.example.com" target="_blank" class="text-primary text-sm font-medium hover:underline">View Docs</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Card 3 --> | |
| <div class="app-card bg-white rounded-xl shadow overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <img src="http://static.photos/workspace/640x360/3" alt="App Image" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-secondary mb-1">Customer Portal</h3> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-2 py-1 rounded">Web App</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3 line-clamp-2">Self-service portal for customers to manage accounts and tickets.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> 512 | |
| </div> | |
| <a href="https://portal.example.com" target="_blank" class="text-primary text-sm font-medium hover:underline">Launch App</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Card 4 --> | |
| <div class="app-card bg-white rounded-xl shadow overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <img src="http://static.photos/retail/640x360/4" alt="App Image" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-secondary mb-1">USSD Banking</h3> | |
| <span class="bg-accent bg-opacity-10 text-accent text-xs px-2 py-1 rounded">USSD</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3 line-clamp-2">Mobile banking service accessible via USSD code on any phone.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> 1,024 | |
| </div> | |
| <span class="text-primary text-sm font-medium">Dial *123#</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Card 5 --> | |
| <div class="app-card bg-white rounded-xl shadow overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <img src="http://static.photos/medical/640x360/5" alt="App Image" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-secondary mb-1">Health Tracker</h3> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-2 py-1 rounded">Mobile App</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3 line-clamp-2">Monitor health metrics and connect with healthcare providers.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> 763 | |
| </div> | |
| <a href="https://play.google.com/store/apps" target="_blank" class="text-primary text-sm font-medium hover:underline">Download</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Card 6 --> | |
| <div class="app-card bg-white rounded-xl shadow overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <img src="http://static.photos/education/640x360/6" alt="App Image" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-secondary mb-1">E-Learning</h3> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-2 py-1 rounded">Web App</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3 line-clamp-2">Interactive online courses and training modules for employees.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> 432 | |
| </div> | |
| <a href="https://elearning.example.com" target="_blank" class="text-primary text-sm font-medium hover:underline">Launch App</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-8"> | |
| <nav class="inline-flex items-center space-x-1"> | |
| <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50"> | |
| <i data-feather="chevron-left"></i> | |
| </button> | |
| <button class="px-3 py-1 rounded bg-primary text-white">1</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">2</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">3</button> | |
| <span class="px-2 text-gray-500">...</span> | |
| <button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">8</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50"> | |
| <i data-feather="chevron-right"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add App Modal --> | |
| <div id="addAppModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> | |
| <div class="flex justify-between items-center border-b p-4"> | |
| <h3 class="text-lg font-semibold text-secondary">Add New App</h3> | |
| <button onclick="closeAddAppModal()" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <form id="addAppForm" class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="appName" class="block text-sm font-medium text-gray-700 mb-1">App Name*</label> | |
| <input type="text" id="appName" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition"> | |
| </div> | |
| <div> | |
| <label for="appCategory" class="block text-sm font-medium text-gray-700 mb-1">Category*</label> | |
| <select id="appCategory" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition"> | |
| <option value="">Select category</option> | |
| <option value="web">Web App</option> | |
| <option value="mobile">Mobile App</option> | |
| <option value="api">API Service</option> | |
| <option value="ussd">USSD Service</option> | |
| </select> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="appDescription" class="block text-sm font-medium text-gray-700 mb-1">Description*</label> | |
| <textarea id="appDescription" rows="3" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition"></textarea> | |
| </div> | |
| <div> | |
| <label for="appUrl" class="block text-sm font-medium text-gray-700 mb-1">URL/Endpoint*</label> | |
| <input type="url" id="appUrl" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition"> | |
| </div> | |
| <div> | |
| <label for="appUSSD" class="block text-sm font-medium text-gray-700 mb-1">USSD Code (if applicable)</label> | |
| <input type="text" id="appUSSD" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">App Image</label> | |
| <div class="mt-1 flex items-center"> | |
| <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100 mr-3"> | |
| <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" /> | |
| </svg> | |
| </span> | |
| <button type="button" class="bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| Upload | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-3"> | |
| <button type="button" onclick="closeAddAppModal()" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition"> | |
| Cancel | |
| </button> | |
| <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-opacity-90 transition flex items-center"> | |
| <i data-feather="save" class="mr-2"></i> Save App | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| function openAddAppModal() { | |
| document.getElementById('addAppModal').classList.remove('hidden'); | |
| } | |
| function closeAddAppModal() { | |
| document.getElementById('addAppModal').classList.add('hidden'); | |
| } | |
| document.getElementById('addAppForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Here you would normally handle the form submission | |
| alert('App added successfully!'); | |
| closeAddAppModal(); | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |