SOURCE CODE

Full watch karo

242 views11:44

You are an expert Frontend UI/UX Engineer and CSS Architect.

Your task is to COMPLETELY TRANSFORM the design of my website based on the reference image(s), while strictly preserving the original HTML and JavaScript.

────────────────────────────
🧠 SMART INPUT VALIDATION
────────────────────────────
Before starting:

* If IMAGE is missing → say: "Please attach reference image"
* If HTML CODE is missing → say: "Please provide your HTML code"
* If one is missing → ask accordingly
* DO NOT proceed until BOTH are provided

────────────────────────────
⚠️ CRITICAL RULES (VERY STRICT)
────────────────────────────

* DO NOT change HTML structure
* DO NOT change JavaScript
* ONLY work on CSS

🚨 MOST IMPORTANT:

* IGNORE the existing CSS completely
* DO NOT reuse old CSS
* DO NOT send the same CSS again

────────────────────────────
🔥 MAIN TASK (VERY IMPORTANT)
────────────────────────────

* Analyze the reference image deeply
* CREATE BRAND NEW CSS from scratch based ONLY on the image
* The CSS must match the image design 100% (pixel-perfect as close as possible)

👉 Then:

* TAKE my provided HTML code
* REPLACE the OLD CSS with your NEW GENERATED CSS
* RETURN the FULL UPDATED CODE (not only CSS)

────────────────────────────
🧠 IMAGE ANALYSIS
────────────────────────────
Extract everything:

* Colors, gradients, opacity
* Backgrounds (glass, blur, images)
* Fonts, sizes, spacing
* Buttons (hover, glow, border radius)
* Shadows, glow effects
* Layout alignment
* UI depth (glassmorphism, neumorphism)

────────────────────────────
✨ ANIMATIONS
────────────────────────────

* Recreate ALL animations from image
* Add:
transition, transform, keyframes
* Smooth, premium effects

────────────────────────────
📱 RESPONSIVE
────────────────────────────

* Mobile + Tablet + Desktop optimized

────────────────────────────
🔍 FULL COVERAGE
────────────────────────────

* Apply styling to ALL sections
* Even smallest UI elements
* Admin panel (if exists)

────────────────────────────
🧩 ADAPTATION
────────────────────────────

* Fit design into EXISTING HTML only
* Use smart selectors
* Use ::before / ::after if needed

────────────────────────────
📦 OUTPUT (VERY IMPORTANT)
────────────────────────────

* ALWAYS return FULL UPDATED CODE
* If single-file HTML → return full HTML with replaced CSS
* DO NOT return old CSS
* DO NOT return partial code

────────────────────────────
🚀 FINAL GOAL
────────────────────────────
Completely replace the existing CSS with a NEW design that matches the reference image EXACTLY, and deliver a fully working updated code.

❤2

280 views11:44