Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NirmitAI - AI Image Generator</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> | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| background: linear-gradient(to bottom right, #f0f7ff, #fff1f9, #fdf9e8); | |
| color: #1d1d1f; | |
| } | |
| .apple-nav { | |
| background-color: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: saturate(180%) blur(20px); | |
| -webkit-backdrop-filter: saturate(180%) blur(20px); | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .apple-container { | |
| max-width: 980px; | |
| margin: 0 auto; | |
| } | |
| .apple-button { | |
| background: linear-gradient(to right, #3498db, #5d68e2); | |
| color: white; | |
| border-radius: 980px; | |
| transition: all 0.3s ease; | |
| } | |
| .apple-button:hover { | |
| background: linear-gradient(to right, #2980b9, #4a57d1); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(93, 104, 226, 0.4); | |
| } | |
| .secondary-button { | |
| background: linear-gradient(to right, #ff7eb3, #ff758c); | |
| color: white; | |
| border-radius: 980px; | |
| transition: all 0.3s ease; | |
| } | |
| .secondary-button:hover { | |
| background: linear-gradient(to right, #f76ca8, #f76480); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255, 123, 179, 0.4); | |
| } | |
| .apple-section { | |
| padding: 80px 0; | |
| } | |
| .apple-headline { | |
| font-size: 56px; | |
| line-height: 1.07143; | |
| font-weight: 600; | |
| letter-spacing: -0.005em; | |
| background: linear-gradient(to right, #3498db, #9b59b6, #e74c3c); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .apple-subheadline { | |
| font-size: 28px; | |
| line-height: 1.10722; | |
| font-weight: 400; | |
| letter-spacing: 0.004em; | |
| } | |
| .apple-card { | |
| background-color: white; | |
| border-radius: 18px; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); | |
| overflow: hidden; | |
| transition: transform 0.5s ease, box-shadow 0.5s ease; | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .apple-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); | |
| } | |
| .input-field { | |
| background-color: #f5f5f7; | |
| border: 1px solid #d2d2d7; | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| background-color: white; | |
| border-color: #5d68e2; | |
| box-shadow: 0 0 0 4px rgba(93, 104, 226, 0.2); | |
| outline: none; | |
| } | |
| .select-wrapper { | |
| position: relative; | |
| } | |
| .select-wrapper::after { | |
| content: ''; | |
| position: absolute; | |
| right: 15px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 10px; | |
| height: 10px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231d1d1f' d='M0 0l5 5 5-5z'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| pointer-events: none; | |
| } | |
| .custom-select { | |
| appearance: none; | |
| background-color: #f5f5f7; | |
| border: 1px solid #d2d2d7; | |
| border-radius: 12px; | |
| padding: 12px 35px 12px 12px; | |
| width: 100%; | |
| font-size: 17px; | |
| color: #1d1d1f; | |
| transition: all 0.3s ease; | |
| } | |
| .custom-select:focus { | |
| background-color: white; | |
| border-color: #5d68e2; | |
| box-shadow: 0 0 0 4px rgba(93, 104, 226, 0.2); | |
| outline: none; | |
| } | |
| .image-container { | |
| background: linear-gradient(135deg, #f9f0ff 0%, #e4f1fe 100%); | |
| border-radius: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); | |
| } | |
| .image-result { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| opacity: 0; | |
| transition: opacity 1s ease; | |
| } | |
| .image-result.show { | |
| opacity: 1; | |
| } | |
| .apple-divider { | |
| height: 1px; | |
| background: linear-gradient(to right, transparent, #d2d2d7, transparent); | |
| margin: 40px 0; | |
| } | |
| .apple-footer { | |
| background-color: rgba(245, 245, 247, 0.8); | |
| color: #6e6e73; | |
| font-size: 12px; | |
| padding: 20px 0; | |
| border-top: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| @media (max-width: 768px) { | |
| .apple-headline { | |
| font-size: 40px; | |
| } | |
| .apple-subheadline { | |
| font-size: 24px; | |
| } | |
| .apple-section { | |
| padding: 40px 0; | |
| } | |
| } | |
| .coming-soon { | |
| height: 300px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, #f9f0ff 0%, #e4f1fe 100%); | |
| border-radius: 18px; | |
| font-size: 28px; | |
| font-weight: 500; | |
| color: #6e6e73; | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); | |
| } | |
| .loading-indicator { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-top-color: white; | |
| animation: spin 1s linear infinite; | |
| margin-right: 10px; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .scale-in { | |
| animation: scaleIn 0.5s ease forwards; | |
| } | |
| @keyframes scaleIn { | |
| from { transform: scale(0.95); opacity: 0; } | |
| to { transform: scale(1); opacity: 1; } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .service-icon-1 { | |
| background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); | |
| } | |
| .service-icon-2 { | |
| background: linear-gradient(135deg, #b721ff 0%, #21d4fd 100%); | |
| } | |
| .service-icon-3 { | |
| background: linear-gradient(135deg, #ff8177 0%, #ff867a 100%); | |
| } | |
| .nav-link { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: linear-gradient(to right, #3498db, #9b59b6); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| /* Added colorful sections */ | |
| .services-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4f1fe 100%); | |
| } | |
| .courses-bg { | |
| background: linear-gradient(135deg, #fff0f5 0%, #fff6e5 100%); | |
| } | |
| .robotics-bg { | |
| background: linear-gradient(135deg, #e8f5e9 0%, #e0f7fa 100%); | |
| } | |
| .community-bg { | |
| background: linear-gradient(135deg, #f3e5f5 0%, #e8eaf6 100%); | |
| } | |
| .gradient-text-blue { | |
| background: linear-gradient(to right, #4facfe, #00f2fe); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .gradient-text-purple { | |
| background: linear-gradient(to right, #b721ff, #21d4fd); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .gradient-text-red { | |
| background: linear-gradient(to right, #ff8177, #ff867a); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .gradient-text-green { | |
| background: linear-gradient(to right, #16a085, #3498db); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="apple-nav fixed top-0 left-0 right-0 z-50 py-3"> | |
| <div class="apple-container px-6 flex justify-between items-center"> | |
| <a href="#" class="text-xl font-semibold flex items-center"> | |
| <span style="background: linear-gradient(to right, #3498db, #9b59b6); -webkit-background-clip: text; background-clip: text; color: transparent;">NirmitAI</span> | |
| </a> | |
| <div class="hidden md:flex space-x-8 text-sm font-medium"> | |
| <a href="#services" class="nav-link text-gray-800 hover:text-gray-600 transition">Services</a> | |
| <a href="#courses" class="nav-link text-gray-800 hover:text-gray-600 transition">Courses</a> | |
| <a href="#robotics" class="nav-link text-gray-800 hover:text-gray-600 transition">Robotics</a> | |
| <a href="#community" class="nav-link text-gray-800 hover:text-gray-600 transition">Community</a> | |
| </div> | |
| <button class="apple-button px-5 py-2 text-sm font-medium">Sign In</button> | |
| <button class="md:hidden text-gray-800"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-16 scale-in"> | |
| <div class="apple-container px-6"> | |
| <div class="text-center mb-16"> | |
| <h1 class="apple-headline mb-4">Creativity, reimagined.</h1> | |
| <p class="apple-subheadline text-gray-500 mb-8">Generate stunning imagery with the power of AI.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div class="apple-card p-8 fade-in" style="animation-delay: 0.2s"> | |
| <h2 class="text-2xl font-semibold mb-6">Create your image</h2> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Describe your image</label> | |
| <textarea id="prompt-input" class="input-field w-full px-4 py-3 text-gray-800" rows="3" placeholder="A minimalist workspace with an Apple MacBook..."></textarea> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Model</label> | |
| <div class="select-wrapper"> | |
| <select id="model-select" class="custom-select"> | |
| <option>Flux Pro</option> | |
| <option>Flux Ultra</option> | |
| <option>Fooocus</option> | |
| <option>Flux Schnell </option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Style</label> | |
| <div class="select-wrapper"> | |
| <select id="style-select" class="custom-select"> | |
| <option>Digital Art</option> | |
| <option>Photorealistic</option> | |
| <option>Watercolor</option> | |
| <option>Anime</option> | |
| <option>Cyberpunk</option> | |
| <option>Fantasy</option> | |
| <option>Steampunk</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Aspect Ratio</label> | |
| <div class="select-wrapper"> | |
| <select id="aspect-select" class="custom-select"> | |
| <option>Square (1:1)</option> | |
| <option>Landscape (16:9)</option> | |
| <option>Portrait (9:16)</option> | |
| <option>Widescreen (21:9)</option> | |
| <option>Tall (4:5)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="generate-btn" class="apple-button w-full py-3 font-medium text-base">Generate Image</button> | |
| <button id="download-btn" class="secondary-button w-full py-3 font-medium text-base mt-4 hidden">Download Image</button> | |
| </div> | |
| <div class="image-container fade-in" style="animation-delay: 0.4s"> | |
| <div id="image-placeholder" class="text-gray-400 text-center px-8"> | |
| <div class="mb-4"> | |
| <i class="fas fa-image text-5xl"></i> | |
| </div> | |
| <p>Your generated image will appear here</p> | |
| </div> | |
| <img id="generated-image" class="image-result hidden" src="" alt="Generated AI image"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="apple-section services-bg"> | |
| <div class="apple-container px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-semibold mb-4">Intelligent <span class="gradient-text-blue">Services</span></h2> | |
| <p class="text-xl text-gray-500">Powerful AI tools to enhance your creative workflow</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="apple-card p-8 transition-all hover:scale-105"> | |
| <div class="w-12 h-12 service-icon-1 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-image text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Image Generation</h3> | |
| <p class="text-gray-500">Create stunning visuals from text prompts with our state-of-the-art AI models.</p> | |
| </div> | |
| <div class="apple-card p-8 transition-all hover:scale-105"> | |
| <div class="w-12 h-12 service-icon-2 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-globe text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Website Generation</h3> | |
| <p class="text-gray-500">Generate complete one-page websites from simple descriptions using AI.</p> | |
| </div> | |
| <div class="apple-card p-8 transition-all hover:scale-105"> | |
| <div class="w-12 h-12 service-icon-3 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">AI Consulting</h3> | |
| <p class="text-gray-500">Get expert guidance on implementing AI solutions for your business needs.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Courses Section --> | |
| <section id="courses" class="apple-section courses-bg"> | |
| <div class="apple-container px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-semibold mb-4">Learn <span class="gradient-text-purple">AI</span></h2> | |
| <p class="text-xl text-gray-500">Expand your knowledge with our expert-led courses</p> | |
| </div> | |
| <div class="coming-soon">Coming Soon</div> | |
| </div> | |
| </section> | |
| <!-- Robotics Section --> | |
| <section id="robotics" class="apple-section robotics-bg"> | |
| <div class="apple-container px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-semibold mb-4">AI <span class="gradient-text-green">Robotics</span></h2> | |
| <p class="text-xl text-gray-500">The future of intelligent machines</p> | |
| </div> | |
| <div class="coming-soon">Coming Soon</div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="apple-section community-bg"> | |
| <div class="apple-container px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-semibold mb-4">Join Our <span class="gradient-text-red">Community</span></h2> | |
| <p class="text-xl text-gray-500">Connect with like-minded AI enthusiasts</p> | |
| </div> | |
| <div class="coming-soon">Coming Soon</div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="apple-footer"> | |
| <div class="apple-container px-6"> | |
| <div class="apple-divider"></div> | |
| <div class="grid md:grid-cols-4 gap-8 py-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-800 mb-4">NirmitAI</h3> | |
| <p class="mb-4">Empowering creativity through artificial intelligence.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-800 mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-gray-800 transition">AI Image Generation</a></li> | |
| <li><a href="#" class="hover:text-gray-800 transition">Website Generation</a></li> | |
| <li><a href="#" class="hover:text-gray-800 transition">AI Consulting</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-800 mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-gray-800 transition">About Us</a></li> | |
| <li><a href="#" class="hover:text-gray-800 transition">Careers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-800 mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-gray-800 transition">Contact Us</a></li> | |
| <li><a href="#" class="hover:text-gray-800 transition">Help Center</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="apple-divider"></div> | |
| <div class="py-4 flex flex-col md:flex-row justify-between items-center"> | |
| <p>© 2025 NirmitAI. All rights reserved.</p> | |
| <div class="flex space-x-4 mt-4 md:mt-0"> | |
| <a href="#" class="hover:text-gray-800 transition">Privacy Policy</a> | |
| <a href="#" class="hover:text-gray-800 transition">Terms of Use</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const downloadBtn = document.getElementById('download-btn'); | |
| const promptInput = document.getElementById('prompt-input'); | |
| const generatedImage = document.getElementById('generated-image'); | |
| const imagePlaceholder = document.getElementById('image-placeholder'); | |
| // Sample AI-generated images for demo | |
| const sampleImages = [ | |
| 'https://source.unsplash.com/random/800x800/?colorful,workspace,apple', | |
| 'https://source.unsplash.com/random/800x800/?vibrant,design,apple', | |
| 'https://source.unsplash.com/random/800x800/?creative,technology,apple', | |
| 'https://source.unsplash.com/random/800x800/?modern,colorful,apple', | |
| 'https://source.unsplash.com/random/800x800/?bright,tech,apple' | |
| ]; | |
| generateBtn.addEventListener('click', function() { | |
| const prompt = promptInput.value.trim(); | |
| if (!prompt) { | |
| alert('Please enter a prompt to generate an image'); | |
| return; | |
| } | |
| // Show loading state | |
| const originalBtnText = generateBtn.textContent; | |
| generateBtn.innerHTML = '<div class="loading-indicator"></div> Generating...'; | |
| generateBtn.disabled = true; | |
| // Simulate API call delay | |
| setTimeout(function() { | |
| // Get a random sample image | |
| const randomImage = sampleImages[Math.floor(Math.random() * sampleImages.length)]; | |
| generatedImage.src = randomImage; | |
| // Hide placeholder, show image | |
| imagePlaceholder.classList.add('hidden'); | |
| generatedImage.classList.remove('hidden'); | |
| generatedImage.classList.add('show'); | |
| // Show download button | |
| downloadBtn.classList.remove('hidden'); | |
| // Reset generate button | |
| generateBtn.innerHTML = originalBtnText; | |
| generateBtn.disabled = false; | |
| }, 2000); | |
| }); | |
| // Download functionality | |
| downloadBtn.addEventListener('click', function() { | |
| // In a real app, this would download the actual generated image | |
| alert('In a real application, this would download your generated image'); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </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=sumitbondd/nirmitai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |