| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MorphoWeb 3D - Templates & Extensions</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <style> |
| .template-card { |
| transition: all 0.3s ease; |
| } |
| .template-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| .category-filter.active { |
| background-color: #4f46e5; |
| color: white; |
| } |
| .preview-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(79, 70, 229, 0.8); |
| opacity: 0; |
| transition: opacity 0.3s; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| .template-card:hover .preview-overlay { |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen"> |
| <nav class="bg-white shadow-sm py-4 px-6"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="package" class="text-indigo-600"></i> |
| <h1 class="text-xl font-bold">Templates & Extensions</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="index.html" class="hover:text-indigo-600">Home</a> |
| <a href="marketplace.html" class="hover:text-indigo-600">Marketplace</a> |
| </div> |
| </div> |
| </nav> |
|
|
| <div class="container mx-auto px-6 py-12"> |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12"> |
| <div> |
| <h2 class="text-3xl font-bold mb-2">Premium Templates</h2> |
| <p class="text-gray-600">Jumpstart your projects with professionally designed templates</p> |
| </div> |
| <div class="mt-4 md:mt-0"> |
| <div class="flex space-x-2 bg-gray-200 p-1 rounded-lg"> |
| <button class="category-filter px-4 py-2 rounded-md active" data-category="all">All</button> |
| <button class="category-filter px-4 py-2 rounded-md" data-category="portfolio">Portfolios</button> |
| <button class="category-filter px-4 py-2 rounded-md" data-category="ecommerce">E-commerce</button> |
| <button class="category-filter px-4 py-2 rounded-md" data-category="business">Business</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> |
| |
| <div class="template-card bg-white rounded-xl overflow-hidden shadow-md" data-categories="portfolio"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/1" alt="Portfolio Template" class="w-full h-48 object-cover"> |
| <div class="preview-overlay"> |
| <button class="bg-white text-indigo-600 px-6 py-2 rounded-md font-medium"> |
| Preview Template |
| </button> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="font-bold text-xl">Neon Portfolio</h3> |
| <div class="flex items-center text-sm bg-green-100 text-green-800 px-2 py-1 rounded-full"> |
| <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.9 |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">Modern portfolio with 3D elements and interactive sections</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">3D</span> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Responsive</span> |
| </div> |
| <span class="font-bold text-indigo-600">$24.99</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="template-card bg-white rounded-xl overflow-hidden shadow-md" data-categories="ecommerce"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/2" alt="E-commerce Template" class="w-full h-48 object-cover"> |
| <div class="preview-overlay"> |
| <button class="bg-white text-indigo-600 px-6 py-2 rounded-md font-medium"> |
| Preview Template |
| </button> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="font-bold text-xl">ShopSphere</h3> |
| <div class="flex items-center text-sm bg-green-100 text-green-800 px-2 py-1 rounded-full"> |
| <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.8 |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">Complete e-commerce solution with 3D product views</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">AR</span> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Cart</span> |
| </div> |
| <span class="font-bold text-indigo-600">$39.99</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="template-card bg-white rounded-xl overflow-hidden shadow-md" data-categories="business"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/3" alt="Business Template" class="w-full h-48 object-cover"> |
| <div class="preview-overlay"> |
| <button class="bg-white text-indigo-600 px-6 py-2 rounded-md font-medium"> |
| Preview Template |
| </button> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="font-bold text-xl">CorporatePro</h3> |
| <div class="flex items-center text-sm bg-green-100 text-green-800 px-2 py-1 rounded-full"> |
| <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.7 |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">Professional business template with interactive elements</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">3D</span> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Team</span> |
| </div> |
| <span class="font-bold text-indigo-600">$29.99</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="template-card bg-white rounded-xl overflow-hidden shadow-md" data-categories="portfolio"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/4" alt="Portfolio Template" class="w-full h-48 object-cover"> |
| <div class="preview-overlay"> |
| <button class="bg-white text-indigo-600 px-6 py-2 rounded-md font-medium"> |
| Preview Template |
| </button> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="font-bold text-xl">MinimalFolio</h3> |
| <div class="flex items-center text-sm bg-green-100 text-green-800 px-2 py-1 rounded-full"> |
| <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.9 |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">Clean portfolio with subtle 3D animations</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Minimal</span> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Gallery</span> |
| </div> |
| <span class="font-bold text-indigo-600">$19.99</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="template-card bg-white rounded-xl overflow-hidden shadow-md" data-categories="ecommerce"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/5" alt="E-commerce Template" class="w-full h-48 object-cover"> |
| <div class="preview-overlay"> |
| <button class="bg-white text-indigo-600 px-6 py-2 rounded-md font-medium"> |
| Preview Template |
| </button> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="font-bold text-xl">VR Store</h3> |
| <div class="flex items-center text-sm bg-green-100 text-green-800 px-2 py-1 rounded-full"> |
| <i data-feather="star" class="w-4 h-4 mr-1"></i> 5.0 |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">Immersive VR shopping experience template</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">VR</span> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">360°</span> |
| </div> |
| <span class="font-bold text-indigo-600">$49.99</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="template-card bg-white rounded-xl overflow-hidden shadow-md" data-categories="business"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/6" alt="Business Template" class="w-full h-48 object-cover"> |
| <div class="preview-overlay"> |
| <button class="bg-white text-indigo-600 px-6 py-2 rounded-md font-medium"> |
| Preview Template |
| </button> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="font-bold text-xl">TechDashboard</h3> |
| <div class="flex items-center text-sm bg-green-100 text-green-800 px-2 py-1 rounded-full"> |
| <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.6 |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">Interactive admin dashboard with 3D data visualization</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Charts</span> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Analytics</span> |
| </div> |
| <span class="font-bold text-indigo-600">$34.99</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-8 mb-12"> |
| <h2 class="text-3xl font-bold mb-6 flex items-center"> |
| <i data-feather="zap" class="text-purple-600 mr-3"></i> |
| Powerful Extensions |
| </h2> |
| <p class="text-gray-600 mb-8 max-w-3xl"> |
| Extend your website's functionality with our premium extensions. From AI assistants to advanced animation tools, we've got you covered. |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="bg-gray-50 rounded-lg p-6"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mb-4"> |
| <i data-feather="code" class="text-indigo-600"></i> |
| </div> |
| <h3 class="font-bold mb-2">AI Code Assistant</h3> |
| <p class="text-sm text-gray-600 mb-4">Real-time code suggestions and optimizations</p> |
| <button class="text-indigo-600 text-sm font-medium flex items-center"> |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> |
| </button> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-lg p-6"> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-4"> |
| <i data-feather="database" class="text-green-600"></i> |
| </div> |
| <h3 class="font-bold mb-2">API Connector</h3> |
| <p class="text-sm text-gray-600 mb-4">Connect to any REST API with visual interface</p> |
| <button class="text-indigo-600 text-sm font-medium flex items-center"> |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> |
| </button> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-lg p-6"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-4"> |
| <i data-feather="bar-chart-2" class="text-purple-600"></i> |
| </div> |
| <h3 class="font-bold mb-2">3D Analytics</h3> |
| <p class="text-sm text-gray-600 mb-4">Interactive 3D data visualization tools</p> |
| <button class="text-indigo-600 text-sm font-medium flex items-center"> |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> |
| </button> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-lg p-6"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-4"> |
| <i data-feather="film" class="text-blue-600"></i> |
| </div> |
| <h3 class="font-bold mb-2">Animation Studio</h3> |
| <p class="text-sm text-gray-600 mb-4">Advanced timeline-based animations</p> |
| <button class="text-indigo-600 text-sm font-medium flex items-center"> |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h2 class="text-3xl font-bold mb-6 flex items-center"> |
| <i data-feather="users" class="text-green-600 mr-3"></i> |
| Community Templates |
| </h2> |
| <p class="text-gray-600 mb-6 max-w-3xl"> |
| Browse thousands of free templates created by our community. Customize them to fit your needs. |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <img src="http://static.photos/technology/640x360/7" alt="Community Template" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold mb-2">Personal Blog</h3> |
| <p class="text-sm text-gray-600 mb-3">Free minimalist blog template</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center text-sm text-gray-500"> |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> |
| <span>SarahK</span> |
| </div> |
| <button class="text-indigo-600 text-sm font-medium"> |
| Download |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <img src="http://static.photos/technology/640x360/8" alt="Community Template" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold mb-2">Restaurant Menu</h3> |
| <p class="text-sm text-gray-600 mb-3">Interactive food menu with 3D elements</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center text-sm text-gray-500"> |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> |
| <span>ChefDev</span> |
| </div> |
| <button class="text-indigo-600 text-sm font-medium"> |
| Download |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <img src="http://static.photos/technology/640x360/9" alt="Community Template" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold mb-2">Event Landing</h3> |
| <p class="text-sm text-gray-600 mb-3">Conference or event landing page</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center text-sm text-gray-500"> |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> |
| <span>EventPro</span> |
| </div> |
| <button class="text-indigo-600 text-sm font-medium"> |
| Download |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.category-filter').forEach(button => { |
| button.addEventListener('click', () => { |
| document.querySelectorAll('.category-filter').forEach(btn => { |
| btn.classList.remove('active'); |
| }); |
| button.classList.add('active'); |
| |
| const category = button.dataset.category; |
| const templates = document.querySelectorAll('.template-card'); |
| |
| templates.forEach(template => { |
| if (category === 'all' || template.dataset.categories.includes(category)) { |
| template.style.display = 'block'; |
| } else { |
| template.style.display = 'none'; |
| } |
| }); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.preview-overlay button').forEach(button => { |
| button.addEventListener('click', (e) => { |
| e.stopPropagation(); |
| |
| alert('Opening template preview...'); |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
