Dark UI card with title "Luffy Psychedelic Image Generator" and "Generate Image" button.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Luffy Psychedelic Image Generator</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Inter', sans-serif; background-color: #1a202c; /* Dark background */ color: #e2e8f0; /* Light text */ display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; box-sizing: border-box; } .container { background-color: #2d3748; /* Slightly lighter dark background for the card */ border-radius: 1.5rem; /* More rounded corners */ padding: 2.5rem; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25); /* Stronger shadow */ max-width: 600px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 1.5rem; } h1 { color: #63b3ed; /* A nice blue for the title */ font-size: 2.25rem; /* Larger title */ font-weight: 700; margin-bottom: 1rem; } button { background-image: linear-gradient(to right, #8b5cf6, #ec4899); /* Gradient button */ color: white; padding: 0.75rem 1.5rem; border-radius: 0.75rem; /* Rounded button corners */ font-weight: 600; cursor: pointer; transition: all 0.3s ease; border: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); position: relative; /* For loading spinner */ overflow: hidden; /* For loading spinner */ } button:hover { box-shadow: 0 6px 8px rgba(0, See more
