Apps Store Apps Hub </div> <div class='grid lg:grid-cols-3 gap-8'> <section class='lg:col-span-2 p-6 rounded-2xl shadow-xl card-bg-gradient transition-all duration-300 hover:shadow-2xl'> <h2 class='text-2xl font-bold mb-6 text-gray-800'>Upload Your App</h2> <form id='appUploadForm' class='space-y-6'> <div> <label for='appName' class='block text-sm font-medium text-gray-700 mb-1'>App Name</label><br /> <input type='text' id='appName' name='appName' placeholder='e.g., Pixel Painter' required class='w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 shadow-sm'> </div> <div> <label for='packageName' class='block text-sm font-medium text-gray-700 mb-1'>Package Name</label><br /> <input type='text' id='packageName' name='packageName' placeholder='e.g., com.example.pixelpainter' required class='w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 shadow-sm'> </div> <div> <label for='shortDetails' class='block text-sm font-medium text-gray-700 mb-1'>Short Details (max 100 characters)</label><br /> <textarea id='shortDetails' name='shortDetails' rows='2' maxlength='100' placeholder='A brief, catchy description.' required class='w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 shadow-sm resize-none'></textarea> </div> <div> <label for='longDetails' class='block text-sm font-medium text-gray-700 mb-1'>Long Details</label><br /> <textarea id='longDetails' name='longDetails' rows='5' placeholder='A detailed description of your app's features.' required class='w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 shadow-sm resize-none'></textarea> </div> <div> <label for='appCategory' class='block text-sm font-medium text-gray-700 mb-1'>App Category</label><br /> <select id='appCategory' name='appCategory' required class='w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 shadow-sm'><option value='' disabled selected>Select a category</option><option value='Government App'>Government App</option><option value='Private App'>Private App</option><option value='Games'>Games</option><option value='Software App'>Software App</option><option value='Others'>Others</option></select> </div> <div> <label for='appIcon' class='block text-sm font-medium text-gray-700 mb-2'>App Icon</label><br /> <label for='appIcon' class='inline-flex items-center px-4 py-2 border border-transparent rounded-xl shadow-sm text-sm font-medium text-purple-700 bg-purple-50 hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 cursor-pointer transition-colors duration-200'><br /> Select App Icon<br /> </label><br /> <input type='file' id='appIcon' name='appIcon' accept='image/*' required class='hidden'></p> <div id='iconPreviewContainer' class='mt-2 w-20 h-20 rounded-xl overflow-hidden border-2 border-gray-300 shadow-md flex items-center justify-center bg-gray-100'> <span class='text-gray-400 text-sm'>Icon</span> </div> </p></div> <div> <label for='appImages' class='block text-sm font-medium text-gray-700 mb-2'>App Images (3 to 8 images)</label><br /> <label for='appImages' class='inline-flex items-center px-4 py-2 border border-transparent rounded-xl shadow-sm text-sm font-medium text-green-700 bg-green-50 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 cursor-pointer transition-colors duration-200'><br /> Select App Images<br /> </label><br /> <input type='file' id='appImages' name='appImages' accept='image/*' multiple required class='hidden'></p> <div id='imagesPreviewContainer' class='mt-2 grid grid-cols-2 md:grid-cols-4 gap-2'> </div> </p></div> <div> <label for='apkFile' class='block text-sm font-medium text-gray-700 mb-2'>App Package (.apk file)</label><br /> <label for='apkFile' class='inline-flex items-center px-4 py-2 border border-transparent rounded-xl shadow-sm text-sm font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer transition-colors duration-200'><br /> Select APK File<br /> </label><br /> <input type='file' id='apkFile' name='apkFile' accept='.apk' required class='hidden'> </div> <p> <button type='submit' class='w-full py-3 px-6 rounded-xl text-white font-bold text-lg shadow-lg transform transition-transform duration-200 active:scale-95 upload-button-gradient hover:shadow-xl'><br /> Save & Upload App<br /> </button></p> <div id='messageBox' class='mt-4 p-4 rounded-xl text-center font-medium transition-opacity duration-300 opacity-0'></div> </p></form> <div class='mt-8 p-4 rounded-2xl shadow-md border-2 border-dashed border-gray-300 bg-gray-100 text-center transition-all duration-200 hover:border-solid hover:border-gray-400'> <p class='text-gray-500 font-bold mb-2'>Sponsored Content</p> <p> <img decoding="async" src="https://placehold.co/400x100/e0e2e5/8a8a8a?text=Boost+Your+App+Downloads" alt="Sponsored Ad Placeholder" class="w-full rounded-lg mb-2" title="Apps Store"><br /> <a href='#' class='mt-2 inline-block text-blue-500 hover:underline text-sm font-semibold'>Get Started</a> </div> </section> <section class='lg:col-span-1 p-6 rounded-2xl shadow-xl card-bg-gradient transition-all duration-300 hover:shadow-2xl'> <h2 class='text-2xl font-bold mb-6 text-gray-800'>Featured Apps & Ads</h2> <div class='bg-white p-4 rounded-2xl shadow-md transition-all duration-200 hover:shadow-xl hover:-translate-y-1'> <div class='flex items-center space-x-4 mb-4'> <div class='w-16 h-16 rounded-xl colorful-bg-gradient flex items-center justify-center text-white text-3xl font-bold shadow-lg'></div> <div> <h3 class='text-xl font-bold text-gray-800'>Pixel Painter</h3> <p class='text-sm text-gray-500'>A fun and easy pixel art app.</p> </p></div> </p></div> <p class='text-gray-600 mb-4 text-sm leading-relaxed'>Unleash your creativity with this simple yet powerful pixel art editor. Create stunning digital art on the go, with a wide range of tools and a friendly interface designed for everyone.</p> <p> <button class='w-full py-3 rounded-xl text-white font-bold shadow-lg download-button-gradient hover:shadow-xl'><br /> Download<br /> </button> </div> <div class='mt-6 p-4 rounded-2xl shadow-md border-2 border-dashed border-gray-300 bg-gray-100 text-center transition-all duration-200 hover:border-solid hover:border-gray-400'> <p class='text-gray-500 font-bold mb-2'>Advertisement</p> <p> <img decoding="async" src="https://placehold.co/400x150/f0f2f5/8a8a8a?text=Your+Ad+Here" alt="Ad Placeholder" class="w-full rounded-lg mb-2" title="Apps Store"></p> <h4 class='text-lg font-bold text-gray-800'>New App Coming Soon!</h4> <p class='text-sm text-gray-600'>Discover the next big thing in mobile gaming.</p> <p> <a href='#' class='mt-2 inline-block text-blue-500 hover:underline text-sm font-semibold'>Learn More</a> </div> </section></div> <section class='mt-8 p-6 rounded-2xl shadow-xl card-bg-gradient transition-all duration-300 hover:shadow-2xl'> <h2 class='text-2xl font-bold mb-6 text-gray-800'>Recently Added</h2> <div class='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6' id='appCardsContainer'> <div class='bg-white p-4 rounded-2xl shadow-md flex flex-col items-center text-center transition-all duration-200 hover:shadow-xl hover:-translate-y-1'> <p class='text-gray-500 font-bold mb-2'>Advertisement</p> <p> <img decoding="async" src="https://placehold.co/200x200/e0e2e5/8a8a8a?text=Get+Noticed" alt="Ad Placeholder" class="w-20 h-20 rounded-2xl mb-2" title="Apps Store"></p> <h3 class='text-lg font-bold text-gray-800'>Exclusive Deals</h3> <p class='text-sm text-gray-500'>Upgrade to Premium for a seamless experience!</p> <div class='mt-4'> <a href='#' class='inline-block py-2 px-4 rounded-xl text-white font-bold shadow-lg upload-button-gradient hover:shadow-xl'><br /> Learn More<br /> </a> </div> </p></div> <div class='bg-white p-4 rounded-2xl shadow-md flex flex-col items-center text-center transition-all duration-200 hover:shadow-xl hover:-translate-y-1' data-app-data='{"appName":"Space Dash","appShortDetails":"An action-packed arcade space adventure.","appCategory":"Games","appLongDetails":"An action-packed arcade space adventure with stunning graphics and challenging levels.","appIcon":"","appImages":[]}'> <div class='w-20 h-20 rounded-2xl colorful-bg-gradient flex items-center justify-center text-white text-3xl font-bold shadow-lg mb-2'></div> <h3 class='text-lg font-bold text-gray-800'>Space Dash</h3> <p class='text-sm text-gray-500 line-clamp-2'>An action-packed arcade space adventure.</p> <div class='mt-4 flex space-x-2'> <button class='flex-1 py-2 rounded-xl text-white font-bold shadow-lg download-button-gradient hover:shadow-xl w-24'><br /> Download<br /> </button><br /> <button class='app-details-btn flex-1 py-2 px-4 rounded-xl text-gray-700 font-bold bg-gray-200 shadow-md hover:bg-gray-300 transition-colors w-24'><br /> Detaill<br /> </button> </div> </p></div> <div class='bg-white p-4 rounded-2xl shadow-md flex flex-col items-center text-center transition-all duration-200 hover:shadow-xl hover:-translate-y-1' data-app-data='{"appName":"Mindful Me","appShortDetails":"Daily guided meditations and relaxation sounds.","appCategory":"Others","appLongDetails":"A peaceful app designed to help you find inner calm. Includes a variety of guided meditations, soothing soundscapes, and breathing exercises.","appIcon":"","appImages":[]}'> <div class='w-20 h-20 rounded-2xl colorful-bg-gradient flex items-center justify-center text-white text-3xl font-bold shadow-lg mb-2'></div> <h3 class='text-lg font-bold text-gray-800'>Mindful Me</h3> <p class='text-sm text-gray-500 line-clamp-2'>Daily guided meditations and relaxation sounds.</p> <div class='mt-4 flex space-x-2'> <button class='flex-1 py-2 rounded-xl text-white font-bold shadow-lg download-button-gradient hover:shadow-xl w-24'><br /> Download<br /> </button><br /> <button class='app-details-btn flex-1 py-2 px-4 rounded-xl text-gray-700 font-bold bg-gray-200 shadow-md hover:bg-gray-300 transition-colors w-24'><br /> Detaill<br /> </button> </div> </p></div> <div class='bg-white p-4 rounded-2xl shadow-md flex flex-col items-center text-center transition-all duration-200 hover:shadow-xl hover:-translate-y-1' data-app-data='{"appName":"Recipe Rover","appShortDetails":"Find and save recipes from across the web.","appCategory":"Software App","appLongDetails":"Your go-to app for finding and saving recipes. Search for recipes by ingredients, cuisine, or meal type, and save your favorites to your personal collection.","appIcon":"","appImages":[]}'> <div class='w-20 h-20 rounded-2xl colorful-bg-gradient flex items-center justify-center text-white text-3xl font-bold shadow-lg mb-2'> ️ </div> <h3 class='text-lg font-bold text-gray-800'>Recipe Rover</h3> <p class='text-sm text-gray-500 line-clamp-2'>Find and save recipes from across the web.</p> <div class='mt-4 flex space-x-2'> <button class='flex-1 py-2 rounded-xl text-white font-bold shadow-lg download-button-gradient hover:shadow-xl w-24'><br /> Download<br /> </button><br /> <button class='app-details-btn flex-1 py-2 px-4 rounded-xl text-gray-700 font-bold bg-gray-200 shadow-md hover:bg-gray-300 transition-colors w-24'><br /> Detaill<br /> </button> </div> </p></div> <div class='bg-white p-4 rounded-2xl shadow-md flex flex-col items-center text-center transition-all duration-200 hover:shadow-xl hover:-translate-y-1' data-app-data='{"appName":"Snap Filter","appShortDetails":"Add unique filters to your photos instantly.","appCategory":"Software App","appLongDetails":"Transform your photos with a wide range of unique and creative filters. Apply filters, adjust colors, and share your masterpieces with friends directly from the app.","appIcon":"","appImages":[]}'> <div class='w-20 h-20 rounded-2xl colorful-bg-gradient flex items-center justify-center text-white text-3xl font-bold shadow-lg mb-2'></div> <h3 class='text-lg font-bold text-gray-800'>Snap Filter</h3> <p class='text-sm text-gray-500 line-clamp-2'>Add unique filters to your photos instantly.</p> <div class='mt-4 flex space-x-2'> <button class='flex-1 py-2 rounded-xl text-white font-bold shadow-lg download-button-gradient hover:shadow-xl w-24'><br /> Download<br /> </button><br /> <button class='app-details-btn flex-1 py-2 px-4 rounded-xl text-gray-700 font-bold bg-gray-200 shadow-md hover:bg-gray-300 transition-colors w-24'><br /> Detaill<br /> </button> </div> </p></div> </p></div> </section></div> <div id='appDetailsModal' class='modal'> <div class='modal-content card-bg-gradient max-w-2xl'> <h2 id='modal-app-name' class='text-3xl font-bold mb-4 text-gray-800 text-center'></h2> <div class='flex flex-col sm:flex-row items-center sm:space-x-8 mb-6'> <div id='modal-app-icon' class='w-24 h-24 rounded-2xl shadow-lg mb-4 sm:mb-0 colorful-bg-gradient flex items-center justify-center text-white text-4xl font-bold'></div> <div class='text-center sm:text-left'> <p id='modal-app-category' class='text-sm text-gray-500 mt-1'> <p id='modal-app-short-details' class='text-lg text-gray-600 italic mt-2'> </p></div> </p></div> <p id='modal-app-long-details' class='text-gray-700 leading-relaxed mb-6'> <div id='modal-app-images-container' class='grid grid-cols-2 md:grid-cols-3 gap-2 mt-4'> </div> <div class='flex justify-between space-x-4 mt-6'> <button id='modal-back-btn' class='flex-1 py-3 rounded-xl text-gray-700 font-bold bg-gray-200 shadow-md hover:bg-gray-300 transition-colors'><br /> Back<br /> </button><br /> <button id='modal-download-btn' class='flex-1 py-3 rounded-xl text-white font-bold shadow-lg download-button-gradient hover:shadow-xl'><br /> Download<br /> </button> </div> </p></div> </p></div> <p> <script> document.addEventListener('DOMContentLoaded', () => { const form = document.getElementById('appUploadForm'); const iconInput = document.getElementById('appIcon'); const imagesInput = document.getElementById('appImages'); const iconPreviewContainer = document.getElementById('iconPreviewContainer'); const imagesPreviewContainer = document.getElementById('imagesPreviewContainer'); const messageBox = document.getElementById('messageBox'); const appDetailsModal = document.getElementById('appDetailsModal'); const appCardsContainer = document.getElementById('appCardsContainer'); const modalAppImagesContainer = document.getElementById('modal-app-images-container');</p> <p> const showMessage = (message, isError = false) => { messageBox.textContent = message; messageBox.style.opacity = '1'; messageBox.classList.remove('bg-red-200', 'text-red-800', 'bg-green-200', 'text-green-800'); if (isError) { messageBox.classList.add('bg-red-200', 'text-red-800'); } else { messageBox.classList.add('bg-green-200', 'text-green-800'); } setTimeout(() => { messageBox.style.opacity = '0'; }, 5000); };</p> <p> iconInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { const img = document.createElement('img'); img.src = e.target.result; img.alt = 'App Icon Preview'; img.classList.add('w-full', 'h-full', 'object-cover', 'rounded-xl'); iconPreviewContainer.innerHTML = ''; iconPreviewContainer.appendChild(img); }; reader.readAsDataURL(file); } else { iconPreviewContainer.innerHTML = '<span class='text-gray-400 text-sm'>Icon</span>'; } });</p> <p> imagesInput.addEventListener('change', (event) => { const files = event.target.files; imagesPreviewContainer.innerHTML = '';</p> <p> if (files.length < 3 || files.length > 8) { showMessage(`Please select between 3 and 8 images. You selected ${files.length}.`, true); imagesInput.value = ''; return; }</p> <p> for (const file of files) { const reader = new FileReader(); reader.onload = (e) => { const container = document.createElement('div'); container.classList.add('w-full', 'aspect-video', 'rounded-xl', 'overflow-hidden', 'shadow-md'); const img = document.createElement('img'); img.src = e.target.result; img.alt = 'App Image Preview'; img.classList.add('w-full', 'h-full', 'object-cover', 'rounded-xl'); container.appendChild(img); imagesPreviewContainer.appendChild(container); }; reader.readAsDataURL(file); } });</p> <p> form.addEventListener('submit', (event) => { event.preventDefault();</p> <p> const formData = new FormData(form); const appName = formData.get('appName'); const apkFile = formData.get('apkFile'); const appCategory = formData.get('appCategory'); const appLongDetails = formData.get('longDetails'); const appShortDetails = formData.get('shortDetails');</p> <p> const appImages = Array.from(imagesPreviewContainer.querySelectorAll('img')).map(img => img.src); const appIcon = iconPreviewContainer.querySelector('img') ? iconPreviewContainer.querySelector('img').src : '';</p> <p> const appData = { appName, appShortDetails, appCategory, appLongDetails, appIcon, appImages };</p> <p> const appCard = document.createElement('div'); appCard.classList.add('bg-white', 'p-4', 'rounded-2xl', 'shadow-md', 'flex', 'flex-col', 'items-center', 'text-center', 'transition-all', 'duration-200', 'hover:shadow-xl', 'hover:-translate-y-1');</p> <p> const iconHtml = appIcon ? `<img src='${appIcon}' alt='App Icon' class='w-20 h-20 rounded-2xl shadow-lg mb-2 object-cover'>` : `</p> <div class='w-20 h-20 rounded-2xl colorful-bg-gradient flex items-center justify-center text-white text-3xl font-bold shadow-lg mb-2'></div> <p>`;</p> <p> appCard.innerHTML = ` ${iconHtml}</p> <h3 class='text-lg font-bold text-gray-800'>${appName}</h3> <p class='text-sm text-gray-500 line-clamp-2'>${appShortDetails}</p> <p class='text-xs text-gray-400 mt-1'>Category: ${appCategory}</p> <div class='mt-4 flex space-x-2'> <button class='flex-1 py-2 rounded-xl text-white font-bold shadow-lg download-button-gradient hover:shadow-xl w-24'> Download </button> <button class='app-details-btn flex-1 py-2 px-4 rounded-xl text-gray-700 font-bold bg-gray-200 shadow-md hover:bg-gray-300 transition-colors w-24'> Detaill </button> </div> <p> `; appCard.dataset.appData = JSON.stringify(appData);</p> <p> appCardsContainer.prepend(appCard);</p> <p> showMessage(`Successfully uploaded '${appName}'!`, false);</p> <p> form.reset(); iconPreviewContainer.innerHTML = '<span class='text-gray-400 text-sm'>Icon</span>'; imagesPreviewContainer.innerHTML = ''; });</p> <p> document.addEventListener('click', (event) => { if (event.target.classList.contains('app-details-btn')) { const card = event.target.closest('div[data-app-data]'); const appData = JSON.parse(card.dataset.appData);</p> <p> document.getElementById('modal-app-name').textContent = appData.appName; document.getElementById('modal-app-category').textContent = `Category: ${appData.appCategory}`; document.getElementById('modal-app-short-details').textContent = appData.appShortDetails; document.getElementById('modal-app-long-details').textContent = appData.appLongDetails;</p> <p> const modalIconContainer = document.getElementById('modal-app-icon'); if (appData.appIcon) { modalIconContainer.innerHTML = `<img src='${appData.appIcon}' alt='App Icon' class='w-full h-full object-cover rounded-2xl'>`; } else { modalIconContainer.innerHTML = `</p> <div class='w-full h-full colorful-bg-gradient flex items-center justify-center text-white text-4xl font-bold'></div> <p>`; }</p> <p> modalAppImagesContainer.innerHTML = ''; if (appData.appImages && appData.appImages.length > 0) { appData.appImages.forEach(src => { const img = document.createElement('img'); img.src = src; img.alt = 'App Screenshot'; img.classList.add('w-full', 'h-auto', 'rounded-xl', 'shadow-md', 'object-cover'); modalAppImagesContainer.appendChild(img); }); }</p> <p> appDetailsModal.style.display = 'flex'; appDetailsModal.classList.add('active'); }</p> <p> if (event.target.textContent === 'Download') { const downloadBtn = event.target; downloadBtn.textContent = 'Downloading...'; downloadBtn.disabled = true; setTimeout(() => { downloadBtn.textContent = 'Downloaded!'; showMessage('Download complete!', false); setTimeout(() => { downloadBtn.textContent = 'Download'; downloadBtn.disabled = false; }, 2000); }, 1500); } });</p> <p> document.getElementById('modal-back-btn').addEventListener('click', () => { appDetailsModal.classList.remove('active'); setTimeout(() => { appDetailsModal.style.display = 'none'; }, 300); }); }); </script><br /> </body><br /> </html><br /> “>
