Spaces:

thetwistedpixie
/

anycoder-9cb50c91

Running

App Files Files Community

thetwistedpixie commited on Dec 8, 2025

Commit

509d375

verified ·

1 Parent(s): 3bc14c5

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +692 -538

index.html CHANGED Viewed

@@ -1,560 +1,714 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Father & Son Image Creator</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        body {
-            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
-            color: white;
-            min-height: 100vh;
-            padding: 20px;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 20px 0;
-            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
-            margin-bottom: 30px;
-        }
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-        .logo i {
-            font-size: 2.5rem;
-            color: #ffd700;
-        }
-        .logo h1 {
-            font-size: 2rem;
-            font-weight: 700;
-        }
-        .anycoder-link {
-            color: #ffd700;
-            text-decoration: none;
-            font-weight: 600;
-            transition: all 0.3s ease;
-        }
-        .anycoder-link:hover {
-            text-decoration: underline;
-            transform: scale(1.05);
-        }
-        .main-content {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 30px;
-            margin-bottom: 40px;
-        }
-        @media (max-width: 768px) {
-            .main-content {
-                grid-template-columns: 1fr;
-            }
-        }
-        .controls {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-        }
-        .controls h2 {
-            margin-bottom: 20px;
-            font-size: 1.8rem;
-            color: #ffd700;
-            text-align: center;
-        }
-        .setting-group {
-            margin-bottom: 25px;
-        }
-        .setting-group label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 600;
-        }
-        .setting-group select, .setting-group input {
-            width: 100%;
-            padding: 12px 15px;
-            border-radius: 10px;
-            border: none;
-            background: rgba(255, 255, 255, 0.9);
-            font-size: 1rem;
-        }
-        .setting-group textarea {
-            width: 100%;
-            height: 100px;
-            padding: 12px 15px;
-            border-radius: 10px;
-            border: none;
-            background: rgba(255, 255, 255, 0.9);
-            font-size: 1rem;
-            resize: vertical;
-        }
-        .button-group {
-            display: flex;
-            gap: 15px;
-            margin-top: 30px;
-        }
-        .btn {
-            flex: 1;
-            padding: 15px;
-            border: none;
-            border-radius: 10px;
-            font-size: 1.1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-        }
-        .btn-primary {
-            background: #ffd700;
-            color: #1e3c72;
-        }
-        .btn-primary:hover {
-            background: #ffed4e;
-            transform: translateY(-3px);
-            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
-        }
-        .btn-secondary {
-            background: rgba(255, 255, 255, 0.2);
-            color: white;
-        }
-        .btn-secondary:hover {
-            background: rgba(255, 255, 255, 0.3);
-            transform: translateY(-3px);
-        }
-        .preview {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-        .preview h2 {
-            margin-bottom: 20px;
-            font-size: 1.8rem;
-            color: #ffd700;
-            text-align: center;
-        }
-        .image-container {
-            width: 100%;
-            height: 400px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 15px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-            margin-bottom: 20px;
-            border: 2px dashed rgba(255, 255, 255, 0.2);
-        }
-        .image-placeholder {
-            text-align: center;
-            color: rgba(255, 255, 255, 0.5);
-        }
-        .image-placeholder i {
-            font-size: 4rem;
-            margin-bottom: 15px;
-            color: rgba(255, 255, 255, 0.3);
-        }
-        .generated-image {
-            max-width: 100%;
-            max-height: 100%;
-            border-radius: 10px;
-            display: none;
-        }
-        .image-info {
-            width: 100%;
-            padding: 15px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
-            margin-top: 15px;
-        }
-        .image-info h3 {
-            margin-bottom: 10px;
-            color: #ffd700;
-        }
-        .gallery {
-            margin-top: 40px;
-        }
-        .gallery h2 {
-            text-align: center;
-            margin-bottom: 30px;
-            font-size: 2rem;
-            color: #ffd700;
-        }
-        .gallery-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 20px;
-        }
-        .gallery-item {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 15px;
-            overflow: hidden;
-            transition: transform 0.3s ease;
-            cursor: pointer;
-        }
-        .gallery-item:hover {
-            transform: translateY(-5px);
-        }
-        .gallery-img {
-            width: 100%;
-            height: 200px;
-            background: rgba(255, 255, 255, 0.05);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: rgba(255, 255, 255, 0.5);
-        }
-        .gallery-info {
-            padding: 15px;
-        }
-        .gallery-info h4 {
-            margin-bottom: 5px;
-        }
-        .loading {
-            display: none;
-            text-align: center;
-            padding: 20px;
-        }
-        .loading-spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top-color: #ffd700;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 15px;
-        }
-        @keyframes spin {
-            to {
-                transform: rotate(360deg);
-            }
-        }
-        .notification {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            background: #4CAF50;
-            color: white;
-            padding: 15px 25px;
-            border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-            display: none;
-            z-index: 1000;
-        }
-        .notification.error {
-            background: #f44336;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <div class="logo">
-                <i class="fas fa-users"></i>
-                <h1>Father & Son Image Creator</h1>
-            </div>
-            <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
         </div>
-        <div class="main-content">
-            <div class="controls">
-                <h2>Create Your Father & Son Image</h2>
-                <div class="setting-group">
-                    <label for="scene">Scene/Situation</label>
-                    <select id="scene">
-                        <option value="playing">Playing in the Park</option>
-                        <option value="fishing">Fishing Trip</option>
-                        <option value="sports">Playing Sports</option>
-                        <option value="reading">Reading Together</option>
-                        <option value="cooking">Cooking Together</option>
-                        <option value="workshop">Working in Workshop</option>
-                        <option value="beach">Day at the Beach</option>
-                        <option value="hiking">Hiking Adventure</option>
-                        <option value="camping">Camping Trip</option>
-                        <option value="celebration">Special Celebration</option>
-                    </select>
-                </div>
-                <div class="setting-group">
-                    <label for="style">Art Style</label>
-                    <select id="style">
-                        <option value="realistic">Realistic</option>
-                        <option value="cartoon">Cartoon</option>
-                        <option value="watercolor">Watercolor</option>
-                        <option value="digital">Digital Art</option>
-                        <option value="oil">Oil Painting</option>
-                        <option value="sketch">Pencil Sketch</option>
-                    </select>
-                </div>
-                <div class="setting-group">
-                    <label for="time">Time of Day</label>
-                    <select id="time">
-                        <option value="day">Daytime</option>
-                        <option value="sunset">Sunset</option>
-                        <option value="night">Night</option>
-                        <option value="morning">Morning</option>
-                    </select>
-                </div>
-                <div class="setting-group">
-                    <label for="season">Season</label>
-                    <select id="season">
-                        <option value="spring">Spring</option>
-                        <option value="summer">Summer</option>
-                        <option value="autumn">Autumn</option>
-                        <option value="winter">Winter</option>
-                    </select>
-                </div>
-                <div class="setting-group">
-                    <label for="custom">Custom Description</label>
-                    <textarea id="custom" placeholder="Describe your own father and son scenario..."></textarea>
-                </div>
-                <div class="button-group">
-                    <button class="btn btn-primary" id="generate-btn">
-                        <i class="fas fa-magic"></i> Generate Image
-                    </button>
-                    <button class="btn btn-secondary" id="save-btn">
-                        <i class="fas fa-download"></i> Save Image
-                    </button>
-                </div>
-            </div>
-            <div class="preview">
-                <h2>Image Preview</h2>
-                <div class="image-container">
-                    <div class="image-placeholder" id="image-placeholder">
-                        <i class="fas fa-image"></i>
-                        <p>Your father and son image will appear here</p>
-                    </div>
-                    <img id="generated-image" class="generated-image" alt="Generated father and son image">
-                </div>
-                <div class="loading" id="loading">
-                    <div class="loading-spinner"></div>
-                    <p>Creating your special father and son moment...</p>
-                </div>
-                <div class="image-info" id="image-info">
-                    <h3>Image Details</h3>
-                    <p id="image-details">No image generated yet</p>
-                </div>
-            </div>
         </div>
-        <div class="gallery">
-            <h2>Inspiration Gallery</h2>
-            <div class="gallery-grid">
-                <div class="gallery-item" data-scene="fishing">
-                    <div class="gallery-img">
-                        <i class="fas fa-fish"></i>
-                    </div>
-                    <div class="gallery-info">
-                        <h4>Fishing Adventure</h4>
-                        <p>Father teaching son to fish</p>
-                    </div>
-                </div>
-                <div class="gallery-item" data-scene="sports">
-                    <div class="gallery-img">
-                        <i class="fas fa-baseball-ball"></i>
-                    </div>
-                    <div class="gallery-info">
-                        <h4>Baseball Practice</h4>
-                        <p>Playing catch in the backyard</p>
-                    </div>
-                </div>
-                <div class="gallery-item" data-scene="reading">
-                    <div class="gallery-img">
-                        <i class="fas fa-book"></i>
-                    </div>
-                    <div class="gallery-info">
-                        <h4>Bedtime Stories</h4>
-                        <p>Reading together before bed</p>
-                    </div>
-                </div>
-                <div class="gallery-item" data-scene="workshop">
-                    <div class="gallery-img">
-                        <i class="fas fa-tools"></i>
-                    </div>
-                    <div class="gallery-info">
-                        <h4>Workshop Time</h4>
-                        <p>Building something together</p>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
-    <div class="notification" id="notification"></div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const generateBtn = document.getElementById('generate-btn');
-            const saveBtn = document.getElementById('save-btn');
-            const generatedImage = document.getElementById('generated-image');
-            const imagePlaceholder = document.getElementById('image-placeholder');
-            const loading = document.getElementById('loading');
-            const notification = document.getElementById('notification');
-            const imageDetails = document.getElementById('image-details');
-            const galleryItems = document.querySelectorAll('.gallery-item');
-            // Sample base64 encoded placeholder images (in a real app, these would be actual images)
-            const sampleImages = {
-                playing: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ffd700'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ffd700'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3EFather %26 Son Playing%3C/text%3E%3C/svg%3E",
-                fishing: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ffd700'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ffd700'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3EFishing Trip%3C/text%3E%3C/svg%3E",
-                sports: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ffd700'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ffd700'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3ESports Day%3C/text%3E%3C/svg%3E",
-                reading: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ffd700'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ffd700'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3EReading Time%3C/text%3E%3C/svg%3E"
-            };
-            // Generate image function
-            function generateImage() {
-                const scene = document.getElementById('scene').value;
-                const style = document.getElementById('style').value;
-                const time = document.getElementById('time').value;
-                const season = document.getElementById('season').value;
-                const custom = document.getElementById('custom').value;
-                // Show loading
-                loading.style.display = 'block';
-                imagePlaceholder.style.display = 'none';
-                generatedImage.style.display = 'none';
-                // Simulate image generation with timeout
-                setTimeout(() => {
-                    // Hide loading
-                    loading.style.display = 'none';
-                    // Show generated image (using sample data for demo)
-                    generatedImage.src = sampleImages[scene] || sampleImages.playing;
-                    generatedImage.style.display = 'block';
-                    // Update image details
-                    const sceneText = document.getElementById('scene').options[document.getElementById('scene').selectedIndex].text;
-                    const styleText = document.getElementById('style').options[document.getElementById('style').selectedIndex].text;
-                    const timeText = document.getElementById('time').options[document.getElementById('time').selectedIndex].text;
-                    const seasonText = document.getElementById('season').options[document.getElementById('season').selectedIndex].text;
-                    let details = `Scene: ${sceneText}, Style: ${styleText}, Time: ${timeText}, Season: ${seasonText}`;
-                    if (custom) {
-                        details += `, Custom: ${custom}`;
-                    }
-                    imageDetails.textContent = details;
-                    // Show success notification
-                    showNotification('Father and son image created successfully!', 'success');
-                }, 2000);
-            }
-            // Save image function
-            function saveImage() {
-                if (generatedImage.style.display === 'block') {
-                    // In a real app, this would download the actual image
-                    showNotification('Image saved to your gallery!', 'success');
-                } else {
-                    showNotification('Please generate an image first', 'error');
-                }
-            }
-            // Show notification
-            function showNotification(message, type) {
-                notification.textContent = message;
-                notification.className = 'notification';
-                if (type === 'error') {
-                    notification.classList.add('error');
-                }
-                notification.style.display = 'block';
-                setTimeout(() => {
-                    notification.style.display = 'none';
-                }, 3000);
-            }
-            // Gallery item click handler
-            galleryItems.forEach(item => {
-                item.addEventListener('click', function() {
-                    const scene = this.getAttribute('data-scene');
-                    document.getElementById('scene').value = scene;
-                    generateImage();
-                });
-            });
-            // Event listeners
-            generateBtn.addEventListener('click', generateImage);
-            saveBtn.addEventListener('click', saveImage);
-            // Generate a default image on page load
-            generateImage();
         });
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Father & Son Image Creator</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    body {
+      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+      color: white;
+      min-height: 100vh;
+      padding: 20px;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 0;
+      border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+      margin-bottom: 30px;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+    }
+    .logo i {
+      font-size: 2.5rem;
+      color: #ffd700;
+    }
+    .logo h1 {
+      font-size: 2rem;
+      font-weight: 700;
+    }
+    .anycoder-link {
+      color: #ffd700;
+      text-decoration: none;
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
+    .anycoder-link:hover {
+      text-decoration: underline;
+      transform: scale(1.05);
+    }
+    .warning-banner {
+      background: rgba(255, 0, 0, 0.2);
+      border: 1px solid rgba(255, 0, 0, 0.4);
+      border-radius: 10px;
+      padding: 15px;
+      margin-bottom: 30px;
+      text-align: center;
+      backdrop-filter: blur(5px);
+    }
+    .warning-banner i {
+      color: #ff6b6b;
+      margin-right: 10px;
+    }
+    .main-content {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 30px;
+      margin-bottom: 40px;
+    }
+    @media (max-width: 768px) {
+      .main-content {
+        grid-template-columns: 1fr;
+      }
+    }
+    .controls {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      border-radius: 20px;
+      padding: 30px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    }
+    .controls h2 {
+      margin-bottom: 20px;
+      font-size: 1.8rem;
+      color: #ffd700;
+      text-align: center;
+    }
+    .setting-group {
+      margin-bottom: 25px;
+    }
+    .setting-group label {
+      display: block;
+      margin-bottom: 8px;
+      font-weight: 600;
+    }
+    .setting-group select,
+    .setting-group input {
+      width: 100%;
+      padding: 12px 15px;
+      border-radius: 10px;
+      border: none;
+      background: rgba(255, 255, 255, 0.9);
+      font-size: 1rem;
+    }
+    .setting-group textarea {
+      width: 100%;
+      height: 100px;
+      padding: 12px 15px;
+      border-radius: 10px;
+      border: none;
+      background: rgba(255, 255, 255, 0.9);
+      font-size: 1rem;
+      resize: vertical;
+    }
+    .button-group {
+      display: flex;
+      gap: 15px;
+      margin-top: 30px;
+    }
+    .btn {
+      flex: 1;
+      padding: 15px;
+      border: none;
+      border-radius: 10px;
+      font-size: 1.1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+    }
+    .btn-primary {
+      background: #ffd700;
+      color: #1e3c72;
+    }
+    .btn-primary:hover {
+      background: #ffed4e;
+      transform: translateY(-3px);
+      box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
+    }
+    .btn-secondary {
+      background: rgba(255, 255, 255, 0.2);
+      color: white;
+    }
+    .btn-secondary:hover {
+      background: rgba(255, 255, 255, 0.3);
+      transform: translateY(-3px);
+    }
+    .preview {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      border-radius: 20px;
+      padding: 30px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .preview h2 {
+      margin-bottom: 20px;
+      font-size: 1.8rem;
+      color: #ffd700;
+      text-align: center;
+    }
+    .image-container {
+      width: 100%;
+      height: 400px;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      margin-bottom: 20px;
+      border: 2px dashed rgba(255, 255, 255, 0.2);
+    }
+    .image-placeholder {
+      text-align: center;
+      color: rgba(255, 255, 255, 0.5);
+    }
+    .image-placeholder i {
+      font-size: 4rem;
+      margin-bottom: 15px;
+      color: rgba(255, 255, 255, 0.3);
+    }
+    .generated-image {
+      max-width: 100%;
+      max-height: 100%;
+      border-radius: 10px;
+      display: none;
+    }
+    .image-info {
+      width: 100%;
+      padding: 15px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 10px;
+      margin-top: 15px;
+    }
+    .image-info h3 {
+      margin-bottom: 10px;
+      color: #ffd700;
+    }
+    .gallery {
+      margin-top: 40px;
+    }
+    .gallery h2 {
+      text-align: center;
+      margin-bottom: 30px;
+      font-size: 2rem;
+      color: #ffd700;
+    }
+    .gallery-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 20px;
+    }
+    .gallery-item {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 15px;
+      overflow: hidden;
+      transition: transform 0.3s ease;
+      cursor: pointer;
+    }
+    .gallery-item:hover {
+      transform: translateY(-5px);
+    }
+    .gallery-img {
+      width: 100%;
+      height: 200px;
+      background: rgba(255, 255, 255, 0.05);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: rgba(255, 255, 255, 0.5);
+    }
+    .gallery-info {
+      padding: 15px;
+    }
+    .gallery-info h4 {
+      margin-bottom: 5px;
+    }
+    .loading {
+      display: none;
+      text-align: center;
+      padding: 20px;
+    }
+    .loading-spinner {
+      width: 50px;
+      height: 50px;
+      border: 5px solid rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      border-top-color: #ffd700;
+      animation: spin 1s linear infinite;
+      margin: 0 auto 15px;
+    }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    .notification {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      background: #4CAF50;
+      color: white;
+      padding: 15px 25px;
+      border-radius: 10px;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+      display: none;
+      z-index: 1000;
+    }
+    .notification.error {
+      background: #f44336;
+    }
+    .nsfw-toggle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+    .nsfw-toggle input[type="checkbox"] {
+      display: none;
+    }
+    .nsfw-toggle label {
+      position: relative;
+      display: inline-block;
+      width: 60px;
+      height: 30px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 50px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    .nsfw-toggle label:after {
+      content: '';
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      width: 20px;
+      height: 20px;
+      background: #ff6b6b;
+      border-radius: 50%;
+      transition: all 0.3s ease;
+    }
+    .nsfw-toggle input[type="checkbox"]:checked + label {
+      background: rgba(255, 107, 107, 0.3);
+    }
+    .nsfw-toggle input[type="checkbox"]:checked + label:after {
+      left: 35px;
+      background: #ffd700;
+    }
+    .age-verification {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(30, 60, 114, 0.95);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 2000;
+      backdrop-filter: blur(10px);
+    }
+    .verification-box {
+      background: rgba(255, 255, 255, 0.1);
+      padding: 40px;
+      border-radius: 20px;
+      max-width: 500px;
+      text-align: center;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    }
+    .verification-box h2 {
+      margin-bottom: 20px;
+      color: #ffd700;
+    }
+    .verification-box p {
+      margin-bottom: 30px;
+      line-height: 1.6;
+    }
+    .verification-buttons {
+      display: flex;
+      gap: 15px;
+    }
+    .verification-btn {
+      flex: 1;
+      padding: 12px;
+      border: none;
+      border-radius: 10px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    .verification-btn.confirm {
+      background: #ffd700;
+      color: #1e3c72;
+    }
+    .verification-btn.confirm:hover {
+      background: #ffed4e;
+    }
+    .verification-btn.deny {
+      background: rgba(255, 255, 255, 0.2);
+      color: white;
+    }
+    .verification-btn.deny:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  </style>
+</head>
+<body>
+  <div class="age-verification" id="age-verification">
+    <div class="verification-box">
+      <h2>Age Verification Required</h2>
+      <p>This application may contain content that is not suitable for all audiences. You must be at least 18 years old to access this content.</p>
+      <p>By clicking "I am 18 or older", you confirm that you are of legal age to view adult content.</p>
+      <div class="verification-buttons">
+        <button class="verification-btn confirm" id="confirm-age">I am 18 or older</button>
+        <button class="verification-btn deny" id="deny-age">Exit</button>
+      </div>
+    </div>
+  </div>
+  <div class="container">
+    <div class="header">
+      <div class="logo">
+        <i class="fas fa-users"></i>
+        <h1>Father & Son Image Creator</h1>
+      </div>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
+    </div>
+    <div class="warning-banner">
+      <i class="fas fa-exclamation-triangle"></i>
+      <span>This application simulates NSFW content generation. In a production environment, this would require proper age verification and content moderation.</span>
+    </div>
+    <div class="main-content">
+      <div class="controls">
+        <h2>Create Your Father & Son Image</h2>
+        <div class="nsfw-toggle">
+          <input type="checkbox" id="nsfw-toggle">
+          <label for="nsfw-toggle"></label>
+          <span>NSFW Content</span>
+        </div>
+        <div class="setting-group">
+          <label for="scene">Scene/Situation</label>
+          <select id="scene">
+            <option value="intimate">Intimate Moment</option>
+            <option value="bonding">Deep Bonding</option>
+            <option value="emotional">Emotional Connection</option>
+            <option value="sensitive">Sensitive Interaction</option>
+          </select>
+        </div>
+        <div class="setting-group">
+          <label for="style">Art Style</label>
+          <select id="style">
+            <option value="realistic">Realistic</option>
+            <option value="sensual">Sensual Art</option>
+            <option value="erotic">Erotic Art</option>
+            <option value="romantic">Romantic</option>
+          </select>
+        </div>
+        <div class="setting-group">
+          <label for="intensity">Content Intensity</label>
+          <select id="intensity">
+            <option value="mild">Mild</option>
+            <option value="moderate">Moderate</option>
+            <option value="explicit">Explicit</option>
+          </select>
+        </div>
+        <div class="setting-group">
+          <label for="custom">Custom Description</label>
+          <textarea id="custom" placeholder="Describe your own father and son scenario..."></textarea>
+        </div>
+        <div class="button-group">
+          <button class="btn btn-primary" id="generate-btn">
+            <i class="fas fa-magic"></i> Generate Image
+          </button>
+          <button class="btn btn-secondary" id="save-btn">
+            <i class="fas fa-download"></i> Save Image
+          </button>
+        </div>
+      </div>
+      <div class="preview">
+        <h2>Image Preview</h2>
+        <div class="image-container">
+          <div class="image-placeholder" id="image-placeholder">
+            <i class="fas fa-image"></i>
+            <p>Your father and son image will appear here</p>
+          </div>
+          <img id="generated-image" class="generated-image" alt="Generated father and son image">
         </div>
+        <div class="loading" id="loading">
+          <div class="loading-spinner"></div>
+          <p>Creating your special father and son moment...</p>
         </div>
+        <div class="image-info" id="image-info">
+          <h3>Image Details</h3>
+          <p id="image-details">No image generated yet</p>
         </div>
+      </div>
     </div>
+    <div class="gallery">
+      <h2>Inspiration Gallery</h2>
+      <div class="gallery-grid">
+        <div class="gallery-item" data-scene="intimate">
+          <div class="gallery-img">
+            <i class="fas fa-heart"></i>
+          </div>
+          <div class="gallery-info">
+            <h4>Intimate Bonding</h4>
+            <p>Deep father-son connection</p>
+          </div>
+        </div>
+        <div class="gallery-item" data-scene="bonding">
+          <div class="gallery-img">
+            <i class="fas fa-hands"></i>
+          </div>
+          <div class="gallery-info">
+            <h4>Emotional Support</h4>
+            <p>Father providing comfort</p>
+          </div>
+        </div>
+        <div class="gallery-item" data-scene="emotional">
+          <div class="gallery-img">
+            <i class="fas fa-hands-holding"></i>
+          </div>
+          <div class="gallery-info">
+            <h4>Vulnerable Moment</h4>
+            <p>Sharing feelings together</p>
+          </div>
+        </div>
+        <div class="gallery-item" data-scene="sensitive">
+          <div class="gallery-img">
+            <i class="fas fa-user-friends"></i>
+          </div>
+          <div class="gallery-info">
+            <h4>Sensitive Connection</h4>
+            <p>Deep emotional understanding</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="notification" id="notification"></div>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const ageVerification = document.getElementById('age-verification');
+      const confirmAgeBtn = document.getElementById('confirm-age');
+      const denyAgeBtn = document.getElementById('deny-age');
+      const generateBtn = document.getElementById('generate-btn');
+      const saveBtn = document.getElementById('save-btn');
+      const generatedImage = document.getElementById('generated-image');
+      const imagePlaceholder = document.getElementById('image-placeholder');
+      const loading = document.getElementById('loading');
+      const notification = document.getElementById('notification');
+      const imageDetails = document.getElementById('image-details');
+      const galleryItems = document.querySelectorAll('.gallery-item');
+      const nsfwToggle = document.getElementById('nsfw-toggle');
+      // Sample base64 encoded placeholder images (in a real app, these would be actual images)
+      const sampleImages = {
+        intimate: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ff6b6b'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ff6b6b'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3EIntimate Father %26 Son%3C/text%3E%3C/svg%3E",
+        bonding: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ff6b6b'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ff6b6b'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3EBonding Experience%3C/text%3E%3C/svg%3E",
+        emotional: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ff6b6b'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ff6b6b'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3EEmotional Connection%3C/text%3E%3C/svg%3E",
+        sensitive: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ff6b6b'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ff6b6b'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3ESensitive Interaction%3C/text%3E%3C/svg%3E"
+      };
+      // Age verification handlers
+      confirmAgeBtn.addEventListener('click', function() {
+        ageVerification.style.display = 'none';
+        document.body.style.overflow = 'auto';
+      });
+      denyAgeBtn.addEventListener('click', function() {
+        window.location.href = 'https://www.google.com';
+      });
+      // Generate image function
+      function generateImage() {
+        const scene = document.getElementById('scene').value;
+        const style = document.getElementById('style').value;
+        const intensity = document.getElementById('intensity').value;
+        const custom = document.getElementById('custom').value;
+        // Show loading
+        loading.style.display = 'block';
+        imagePlaceholder.style.display = 'none';
+        generatedImage.style.display = 'none';
+        // Simulate image generation with timeout
+        setTimeout(() => {
+          // Hide loading
+          loading.style.display = 'none';
+          // Show generated image (using sample data for demo)
+          generatedImage.src = sampleImages[scene] || sampleImages.intimate;
+          generatedImage.style.display = 'block';
+          // Update image details
+          const sceneText = document.getElementById('scene').options[document.getElementById('scene').selectedIndex].text;
+          const styleText = document.getElementById('style').options[document.getElementById('style').selectedIndex].text;
+          const intensityText = document.getElementById('intensity').options[document.getElementById('intensity').selectedIndex].text;
+          let details = `Scene: ${sceneText}, Style: ${styleText}, Intensity: ${intensityText}`;
+          if (custom) {
+            details += `, Custom: ${custom}`;
+          }
+          imageDetails.textContent = details;
+          // Show success notification
+          showNotification('Father and son image created successfully!', 'success');
+        }, 2000);
+      }
+      // Save image function
+      function saveImage() {
+        if (generatedImage.style.display === 'block') {
+          // In a real app, this would download the actual image
+          showNotification('Image saved to your gallery!', 'success');
+        } else {
+          showNotification('Please generate an image first', 'error');
+        }
+      }
+      // Show notification
+      function showNotification(message, type) {
+        notification.textContent = message;
+        notification.className = 'notification';
+        if (type === 'error') {
+          notification.classList.add('error');
+        }
+        notification.style.display = 'block';
+        setTimeout(() => {
+          notification.style.display = 'none';
+        }, 3000);
+      }
+      // Gallery item click handler
+      galleryItems.forEach(item => {
+        item.addEventListener('click', function() {
+          const scene = this.getAttribute('data-scene');
+          document.getElementById('scene').value = scene;
+          generateImage();
         });
+      });
+      // NSFW toggle handler
+      nsfwToggle.addEventListener('change', function() {
+        if (this.checked) {
+          showNotification('NSFW content enabled', 'success');
+        } else {
+          showNotification('NSFW content disabled', 'success');
+        }
+      });
+      // Event listeners
+      generateBtn.addEventListener('click', generateImage);
+      saveBtn.addEventListener('click', saveImage);
+      // Generate a default image on page load (after age verification)
+      // generateImage(); // Commented out to wait for age verification
+    });
+  </script>
 </body>
 </html>