diff --git a/index.html b/index.html index d733f14..509fa42 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ -
Please provide your Muapi.ai API key to start creating high-aesthetic images.
+Create stunning, high-aesthetic images in seconds
+ `; + container.appendChild(hero); + + // ========================================== + // 2. PROMPT BAR (Tailwind Refactor) + // ========================================== + const promptWrapper = document.createElement('div'); + promptWrapper.className = 'w-full max-w-4xl relative z-40 animate-fade-in-up'; + promptWrapper.style.animationDelay = '0.2s'; + + const bar = document.createElement('div'); + bar.className = 'w-full bg-[#111]/90 backdrop-blur-xl border border-white/10 rounded-[1.5rem] md:rounded-[2.5rem] p-3 md:p-5 flex flex-col gap-3 md:gap-5 shadow-3xl'; + + // Top Row: Input + const topRow = document.createElement('div'); + topRow.className = 'flex items-start gap-5 px-2'; + + topRow.innerHTML = ` + + `; + + const textarea = document.createElement('textarea'); + textarea.placeholder = 'Describe the scene you imagine'; + textarea.className = 'flex-1 bg-transparent border-none text-white text-base md:text-xl placeholder:text-muted focus:outline-none resize-none pt-2.5 leading-relaxed min-h-[40px]'; + textarea.rows = 1; + textarea.oninput = () => { + textarea.style.height = 'auto'; + textarea.style.height = textarea.scrollHeight + 'px'; + }; + + topRow.appendChild(textarea); + bar.appendChild(topRow); + + // Bottom Row: Controls + const bottomRow = document.createElement('div'); + bottomRow.className = 'flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4 px-2 pt-4 border-t border-white/5'; + + const controlsLeft = document.createElement('div'); + controlsLeft.className = 'flex items-center gap-1.5 md:gap-2.5 relative overflow-x-auto no-scrollbar pb-1 md:pb-0'; + + const createControlBtn = (icon, label, id) => { + const btn = document.createElement('button'); + btn.id = id; + btn.className = 'flex items-center gap-1.5 md:gap-2.5 px-3 md:px-4 py-2 md:py-2.5 bg-white/5 hover:bg-white/10 rounded-xl md:rounded-2xl transition-all border border-white/5 group whitespace-nowrap'; + btn.innerHTML = ` + ${icon} + ${label} + + `; + return btn; + }; + + const modelBtn = createControlBtn(` +