| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>WebApp Showcase Wizardry</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.globe.min.js"></script> |
| | <style> |
| | .dropzone { |
| | border: 2px dashed #2ECC71; |
| | transition: all 0.3s ease; |
| | } |
| | .dropzone.dragover { |
| | background-color: rgba(46, 204, 113, 0.1); |
| | transform: scale(1.02); |
| | } |
| | .app-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
| | } |
| | #vanta-bg { |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | z-index: -1; |
| | opacity: 0.3; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-900 text-gray-100"> |
| | <div id="vanta-bg"></div> |
| | |
| | <div class="flex h-screen overflow-hidden"> |
| | |
| | <aside class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col"> |
| | <div class="p-6"> |
| | <h1 class="text-2xl font-bold text-lime-400 flex items-center"> |
| | <i data-feather="zap" class="mr-2"></i> WizShow |
| | </h1> |
| | <p class="text-gray-400 mt-1 text-sm">Your web app showcase platform</p> |
| | <button id="sidebar-toggle" class="mt-4 text-gray-400 hover:text-white"> |
| | <i data-feather="chevron-left"></i> |
| | </button> |
| | </div> |
| | <nav class="flex-1 px-4"> |
| | <ul class="space-y-2"> |
| | <li> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg bg-gray-700 text-lime-400"> |
| | <i data-feather="layout" class="mr-3"></i> Dashboard |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors"> |
| | <i data-feather="upload" class="mr-3"></i> Upload |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors"> |
| | <i data-feather="grid" class="mr-3"></i> Browse |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors"> |
| | <i data-feather="settings" class="mr-3"></i> Settings |
| | </a> |
| | </li> |
| | </ul> |
| | </nav> |
| | |
| | <div class="p-4 border-t border-gray-700"> |
| | <div class="flex items-center"> |
| | <img src="http://static.photos/people/200x200/42" alt="User" class="w-10 h-10 rounded-full"> |
| | <div class="ml-3"> |
| | <p class="font-medium">John Doe</p> |
| | <p class="text-gray-400 text-xs">Admin</p> |
| | </div> |
| | </div> |
| | </div> |
| | </aside> |
| | |
| | |
| | <main class="flex-1 overflow-y-auto p-8"> |
| | <header class="flex justify-between items-center mb-8"> |
| | <div class="relative w-96"> |
| | <input type="search" placeholder="Search applications..." |
| | class="w-full bg-gray-800 border border-gray-700 rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-transparent"> |
| | <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> |
| | </div> |
| | <button id="upload-btn" class="bg-lime-500 hover:bg-lime-600 text-white px-6 py-2 rounded-lg flex items-center transition-colors"> |
| | <i data-feather="upload" class="mr-2"></i> Upload |
| | </button> |
| | </header> |
| | |
| | <section> |
| | <h2 class="text-xl font-semibold mb-6">Featured Applications</h2> |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
| | |
| | <div class="app-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-lime-400"> |
| | <div class="h-48 bg-gradient-to-r from-blue-500 to-blue-600 relative"> |
| | <span class="absolute top-4 left-4 bg-gray-900 bg-opacity-50 text-white text-xs px-2 py-1 rounded">React</span> |
| | </div> |
| | <div class="p-4"> |
| | <h3 class="font-bold text-lg mb-1">E-Commerce Dashboard</h3> |
| | <p class="text-gray-400 text-sm mb-3">Interactive product management system</p> |
| | <div class="flex flex-wrap gap-2 mb-4"> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">Dashboard</span> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">React</span> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">Analytics</span> |
| | </div> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center"> |
| | <i data-feather="eye" class="text-gray-400 mr-1 w-4 h-4"></i> |
| | <span class="text-gray-400 text-xs">1.2k</span> |
| | </div> |
| | <button class="text-blue-400 hover:text-blue-300 text-sm flex items-center"> |
| | Preview <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="app-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-lime-400"> |
| | <div class="h-48 bg-gradient-to-r from-purple-500 to-purple-600 relative"> |
| | <span class="absolute top-4 left-4 bg-gray-900 bg-opacity-50 text-white text-xs px-2 py-1 rounded">Vue</span> |
| | </div> |
| | <div class="p-4"> |
| | <h3 class="font-bold text-lg mb-1">Task Manager</h3> |
| | <p class="text-gray-400 text-sm mb-3">Collaborative team task organization</p> |
| | <div class="flex flex-wrap gap-2 mb-4"> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">Productivity</span> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">Vue</span> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">Team</span> |
| | </div> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center"> |
| | <i data-feather="eye" class="text-gray-400 mr-1 w-4 h-4"></i> |
| | <span class="text-gray-400 text-xs">856</span> |
| | </div> |
| | <button class="text-blue-400 hover:text-blue-300 text-sm flex items-center"> |
| | Preview <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="app-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-lime-400"> |
| | <div class="h-48 bg-gradient-to-r from-amber-500 to-amber-600 relative"> |
| | <span class="absolute top-4 left-4 bg-gray-900 bg-opacity-50 text-white text-xs px-2 py-1 rounded">Angular</span> |
| | </div> |
| | <div class="p-4"> |
| | <h3 class="font-bold text-lg mb-1">Fitness Tracker</h3> |
| | <p class="text-gray-400 text-sm mb-3">Personal health and workout monitoring</p> |
| | <div class="flex flex-wrap gap-2 mb-4"> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">Health</span> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">Angular</span> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">Charts</span> |
| | </div> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center"> |
| | <i data-feather="eye" class="text-gray-400 mr-1 w-4 h-4"></i> |
| | <span class="text-gray-400 text-xs">1.5k</span> |
| | </div> |
| | <button class="text-blue-400 hover:text-blue-300 text-sm flex items-center"> |
| | Preview <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="app-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-lime-400"> |
| | <div class="h-48 bg-gradient-to-r from-emerald-500 to-emerald-600 relative"> |
| | <span class="absolute top-4 left-4 bg-gray-900 bg-opacity-50 text-white text-xs px-2 py-1 rounded">Svelte</span> |
| | </div> |
| | <div class="p-4"> |
| | <h3 class="font-bold text-lg mb-1">Recipe Explorer</h3> |
| | <p class="text-gray-400 text-sm mb-3">Interactive cooking recipe database</p> |
| | <div class="flex flex-wrap gap-2 mb-4"> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">Food</span> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">Svelte</span> |
| | <span class="bg-gray-700 text-xs px-2 py-1 rounded">API</span> |
| | </div> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center"> |
| | <i data-feather="eye" class="text-gray-400 mr-1 w-4 h-4"></i> |
| | <span class="text-gray-400 text-xs">2.3k</span> |
| | </div> |
| | <button class="text-blue-400 hover:text-blue-300 text-sm flex items-center"> |
| | Preview <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| | </main> |
| | </div> |
| | |
| | |
| | <div id="upload-modal" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center hidden"> |
| | <div class="bg-gray-800 rounded-xl w-full max-w-2xl border border-gray-700"> |
| | <div class="p-6 border-b border-gray-700 flex justify-between items-center"> |
| | <h3 class="text-xl font-semibold">Upload Web Application</h3> |
| | <button id="close-modal" class="text-gray-400 hover:text-white"> |
| | <i data-feather="x"></i> |
| | </button> |
| | </div> |
| | <div class="p-6"> |
| | <div id="dropzone" class="dropzone rounded-lg h-64 flex flex-col items-center justify-center p-8 text-center cursor-pointer"> |
| | <i data-feather="upload-cloud" class="w-12 h-12 text-lime-400 mb-4"></i> |
| | <h4 class="text-lg font-medium mb-2">Drag and drop files here</h4> |
| | <p class="text-gray-400 mb-4">or click to browse your files</p> |
| | <input type="file" class="hidden" multiple> |
| | <button class="bg-lime-500 hover:bg-lime-600 text-white px-6 py-2 rounded-lg transition-colors"> |
| | Select Files |
| | </button> |
| | </div> |
| | |
| | <div class="mt-6"> |
| | <h4 class="font-medium mb-3">Project Details</h4> |
| | <div class="space-y-4"> |
| | <div> |
| | <label class="block text-gray-400 text-sm mb-1">Project Name</label> |
| | <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-transparent"> |
| | </div> |
| | <div> |
| | <label class="block text-gray-400 text-sm mb-1">Description</label> |
| | <textarea rows="3" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-transparent"></textarea> |
| | </div> |
| | <div> |
| | <label class="block text-gray-400 text-sm mb-1">Tags</label> |
| | <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-transparent" placeholder="Separate tags with commas"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="p-4 border-t border-gray-700 flex justify-end"> |
| | <button class="px-6 py-2 rounded-lg border border-gray-600 hover:bg-gray-700 mr-3 transition-colors"> |
| | Cancel |
| | </button> |
| | <button class="bg-lime-500 hover:bg-lime-600 text-white px-6 py-2 rounded-lg transition-colors"> |
| | Upload Project |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <script> |
| | |
| | document.addEventListener('DOMContentLoaded', () => { |
| | const savedState = localStorage.getItem('sidebarState'); |
| | const sidebar = document.querySelector('aside'); |
| | if (savedState === 'closed') { |
| | sidebar.classList.add('hidden'); |
| | } |
| | |
| | |
| | document.getElementById('sidebar-toggle').addEventListener('click', () => { |
| | sidebar.classList.toggle('hidden'); |
| | localStorage.setItem('sidebarState', sidebar.classList.contains('hidden') ? 'closed' : 'open'); |
| | |
| | |
| | const toggleIcon = document.querySelector('#sidebar-toggle i'); |
| | if (sidebar.classList.contains('hidden')) { |
| | feather.icons['chevron-right'].replace(toggleIcon); |
| | } else { |
| | feather.icons['chevron-left'].replace(toggleIcon); |
| | } |
| | }); |
| | }); |
| | |
| | |
| | VANTA.GLOBE({ |
| | el: "#vanta-bg", |
| | mouseControls: true, |
| | touchControls: true, |
| | gyroControls: false, |
| | minHeight: 200.00, |
| | minWidth: 200.00, |
| | scale: 1.00, |
| | scaleMobile: 1.00, |
| | color: 0x2ecc71, |
| | backgroundColor: 0x1a1a1a |
| | }); |
| | |
| | const uploadBtn = document.getElementById('upload-btn'); |
| | const uploadModal = document.getElementById('upload-modal'); |
| | const closeModal = document.getElementById('close-modal'); |
| | const dropzone = document.getElementById('dropzone'); |
| | uploadBtn.addEventListener('click', () => { |
| | uploadBtn.setAttribute('aria-label', 'Open upload modal'); |
| | uploadModal.classList.remove('hidden'); |
| | document.body.style.overflow = 'hidden'; |
| | }); |
| | |
| | |
| | document.querySelector('#upload-btn').setAttribute('aria-label', 'Upload New Web Application'); |
| | document.querySelector('#close-modal').setAttribute('aria-label', 'Close upload modal'); |
| | uploadModal.classList.remove('hidden'); |
| | document.body.style.overflow = 'hidden'; |
| | }); |
| | |
| | closeModal.addEventListener('click', () => { |
| | uploadModal.classList.add('hidden'); |
| | document.body.style.overflow = 'auto'; |
| | }); |
| | |
| | |
| | dropzone.addEventListener('dragover', (e) => { |
| | e.preventDefault(); |
| | dropzone.classList.add('dragover'); |
| | }); |
| | |
| | dropzone.addEventListener('dragleave', () => { |
| | dropzone.classList.remove('dragover'); |
| | }); |
| | dropzone.addEventListener('drop', (e) => { |
| | e.preventDefault(); |
| | dropzone.classList.remove('dragover'); |
| | const files = e.dataTransfer.files; |
| | |
| | |
| | const allowedTypes = [ |
| | 'text/html', |
| | 'text/css', |
| | 'application/javascript', |
| | 'application/zip' |
| | ]; |
| | |
| | const validFiles = Array.from(files).filter(file => |
| | allowedTypes.some(type => file.type.includes(type.replace('*', ''))) |
| | ); |
| | |
| | if (validFiles.length === 0) { |
| | alert('Please upload valid web application files (HTML, CSS, JS or ZIP)'); |
| | return; |
| | } |
| | |
| | console.log('Valid files dropped:', validFiles); |
| | |
| | }); |
| | |
| | feather.replace(); |
| | |
| | |
| | const searchInput = document.querySelector('input[type="search"]'); |
| | const appCards = document.querySelectorAll('.app-card'); |
| | |
| | searchInput.addEventListener('input', (e) => { |
| | const searchTerm = e.target.value.toLowerCase(); |
| | |
| | appCards.forEach(card => { |
| | const title = card.querySelector('h3').textContent.toLowerCase(); |
| | const description = card.querySelector('p').textContent.toLowerCase(); |
| | const tags = Array.from(card.querySelectorAll('.bg-gray-700')) |
| | .map(tag => tag.textContent.toLowerCase()); |
| | |
| | const isVisible = title.includes(searchTerm) || |
| | description.includes(searchTerm) || |
| | tags.some(tag => tag.includes(searchTerm)); |
| | |
| | card.style.display = isVisible ? 'block' : 'none'; |
| | }); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| |
|
