Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SinfulScript Generator 🔞</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); | |
| } | |
| .nsfw-box { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(26, 26, 46, 0.7); | |
| border: 1px solid rgba(255, 0, 100, 0.3); | |
| } | |
| .nsfw-tag { | |
| background: linear-gradient(90deg, #ff0033, #ff6699); | |
| } | |
| .slider-thumb::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #ff0033; | |
| cursor: pointer; | |
| } | |
| textarea { | |
| min-height: 150px; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg text-gray-100 min-h-screen"> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> | |
| <div class="container mx-auto px-4 py-12 max-w-4xl"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-red-500"> | |
| SinfulScript Generator | |
| </h1> | |
| <p class="text-lg text-gray-300 max-w-2xl mx-auto"> | |
| Craft your perfect NSFW text prompt with complete control over every detail | |
| </p> | |
| <div class="mt-4"> | |
| <span class="inline-block px-3 py-1 rounded-full nsfw-tag text-white font-medium"> | |
| 18+ CONTENT ONLY | |
| </span> | |
| </div> | |
| </header> | |
| <main class="nsfw-box rounded-xl p-6 shadow-2xl"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Left Column - Controls --> | |
| <div class="space-y-6"> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-4 text-pink-300">Core Elements</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Primary Character</label> | |
| <input type="text" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="e.g., voluptuous elf, muscular werewolf"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Secondary Character</label> | |
| <input type="text" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="e.g., shy librarian, dominant CEO"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Setting</label> | |
| <input type="text" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="e.g., dungeon, penthouse, enchanted forest"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-4 text-pink-300">Category Selection</h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>BDSM</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Fantasy</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Romance</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Sci-Fi</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Historical</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Monster</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Furry</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Transformation</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Vanilla</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Public</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Taboo</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Other</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-4 text-pink-300">Intensity Controls</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Explicitness: <span id="explicitness-value" class="text-pink-400">5</span></label> | |
| <input type="range" min="1" max="10" value="5" class="w-full slider-thumb h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Romance: <span id="romance-value" class="text-pink-400">5</span></label> | |
| <input type="range" min="1" max="10" value="5" class="w-full slider-thumb h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Dominance: <span id="dominance-value" class="text-pink-400">5</span></label> | |
| <input type="range" min="1" max="10" value="5" class="w-full slider-thumb h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-4 text-pink-300">Additional Options</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">POV</label> | |
| <select class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent"> | |
| <option>First Person</option> | |
| <option>Second Person</option> | |
| <option>Third Person</option> | |
| <option>Observer</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Verbosity</label> | |
| <select class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent"> | |
| <option>Minimal</option> | |
| <option>Moderate</option> | |
| <option>Detailed</option> | |
| <option>Extremely Detailed</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded border-gray-600 bg-gray-700 text-pink-500 focus:ring-pink-500"> | |
| <span>Include Dialogue</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Output --> | |
| <div class="space-y-6"> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-4 text-pink-300">Generated Prompt</h2> | |
| <textarea id="output-prompt" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" readonly></textarea> | |
| </div> | |
| <div class="flex flex-col space-y-3"> | |
| <button id="generate-btn" class="w-full px-6 py-3 bg-gradient-to-r from-pink-600 to-red-600 rounded-lg font-medium hover:from-pink-700 hover:to-red-700 transition-all focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-gray-800"> | |
| Generate Prompt | |
| </button> | |
| <button id="copy-btn" class="w-full px-6 py-3 bg-gray-700 rounded-lg font-medium hover:bg-gray-600 transition-all focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800"> | |
| Copy to Clipboard | |
| </button> | |
| <button id="save-btn" class="w-full px-6 py-3 bg-blue-600 rounded-lg font-medium hover:bg-blue-700 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800 flex items-center justify-center space-x-2"> | |
| <i data-feather="save"></i> | |
| <span>Save Preset</span> | |
| </button> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-4 text-pink-300">Presets</h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-all">Dark Romance</button> | |
| <button class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-all">Fantasy Orgy</button> | |
| <button class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-all">Sci-Fi Breeding</button> | |
| <button class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-all">BDSM Dungeon</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="mt-12 text-center text-gray-400 text-sm"> | |
| <p>Warning: This tool generates adult content only. By using it you confirm you are 18+</p> | |
| <p class="mt-2">© 2023 SinfulScript Generator - All rights reserved</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xff0033, | |
| backgroundColor: 0x0f0f1a, | |
| points: 10.00, | |
| maxDistance: 25.00, | |
| spacing: 18.00 | |
| }); | |
| // Update slider values | |
| document.querySelectorAll('input[type="range"]').forEach(slider => { | |
| const valueSpan = document.getElementById(`${slider.id || slider.name}-value`); | |
| slider.addEventListener('input', () => { | |
| valueSpan.textContent = slider.value; | |
| }); | |
| }); | |
| // Generate button functionality | |
| document.getElementById('generate-btn').addEventListener('click', () => { | |
| const primaryChar = document.querySelector('input[placeholder*="Primary Character"]').value || "attractive protagonist"; | |
| const secondaryChar = document.querySelector('input[placeholder*="Secondary Character"]').value || "seductive partner"; | |
| const setting = document.querySelector('input[placeholder*="Setting"]').value || "intimate location"; | |
| const categories = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')) | |
| .map(cb => cb.nextElementSibling.textContent.trim()) | |
| .join(", "); | |
| const explicitness = document.querySelector('input[type="range"]').value; | |
| let prompt = `Describe a NSFW encounter between ${primaryChar} and ${secondaryChar} in ${setting}. `; | |
| prompt += `Categories: ${categories || "general"}. `; | |
| prompt += `Explicitness level: ${explicitness}/10. `; | |
| prompt += `Focus on sensory details and emotional responses. `; | |
| document.getElementById('output-prompt').value = prompt; | |
| }); | |
| // Copy button functionality | |
| document.getElementById('copy-btn').addEventListener('click', () => { | |
| const promptText = document.getElementById('output-prompt'); | |
| promptText.select(); | |
| document.execCommand('copy'); | |
| const originalText = document.getElementById('copy-btn').textContent; | |
| document.getElementById('copy-btn').textContent = 'Copied!'; | |
| setTimeout(() => { | |
| document.getElementById('copy-btn').textContent = originalText; | |
| }, 2000); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |