portfolio/womendress.html at main · economist-bd/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bangladeshi Fashion Prompts | Md. Monjirul Hoque</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'], serif: ['Cinzel', 'serif'] },
                    colors: { brand: { gold: '#D4AF37', dark: '#0f0f0f', surface: '#1a1a1a' } }
                }
            }
        }
    </script>
    <style>
        .prompt-card:hover .copy-btn { opacity: 1; }
    </style>
</head>
<body class="bg-brand-dark text-gray-200 font-sans antialiased">

    <!-- Navigation -->
    <nav class="fixed w-full z-50 py-6 px-6 bg-brand-dark/95 backdrop-blur-sm border-b border-gray-800">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            <a href="index.html" class="text-xl md:text-2xl font-serif font-bold tracking-widest text-white">MONJIRUL.</a>
            <a href="index.html" class="text-xs tracking-widest text-brand-gold hover:text-white transition-colors uppercase"><i class="fas fa-arrow-left mr-2"></i> Back to Home</a>
        </div>
    </nav>

    <!-- Header -->
    <div class="pt-32 pb-12 px-4 text-center">
        <span class="text-brand-gold tracking-widest text-sm uppercase">AI Fashion</span>
        <h1 class="text-3xl md:text-5xl font-serif font-bold text-white mt-4">Bangladeshi Dress Prompts</h1>
        <p class="text-gray-400 mt-4 max-w-2xl mx-auto font-light">Curated collection of Midjourney & Stable Diffusion prompts featuring Bangladeshi women in traditional and modern attire.</p>
    </div>

    <!-- Notification Toast -->
    <div id="toast" class="fixed top-24 left-1/2 transform -translate-x-1/2 bg-brand-gold text-black px-6 py-3 rounded shadow-xl z-[60] transition-opacity duration-300 opacity-0 pointer-events-none font-bold tracking-wider text-sm">
        <i class="fas fa-check mr-2"></i> COPIED TO CLIPBOARD
    </div>

    <!-- Prompts Grid -->
    <section class="pb-12 px-4 max-w-7xl mx-auto">
        <div id="prompt-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            <!-- Prompts will be injected here by JS -->
        </div>

        <!-- Load More Button -->
        <div class="text-center mt-16">
            <button id="generate-btn" class="group relative px-8 py-4 bg-transparent border border-gray-600 hover:border-brand-gold transition-colors duration-300">
                <span class="text-white group-hover:text-brand-gold tracking-[0.2em] text-sm font-bold uppercase transition-colors">Generate 10 New Styles</span>
                <div class="absolute inset-0 border border-brand-gold scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
            </button>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-brand-dark border-t border-gray-900 py-10 text-center">
        <p class="text-gray-600 text-xs tracking-widest">© 2024 MD. MONJIRUL HOQUE.</p>
    </footer>

    <script>
        // --- Initial Data (20 Handcrafted Bangladeshi Fashion Prompts) ---
        const initialPrompts = [
            "A cinematic portrait of a beautiful Bangladeshi young woman wearing a red Jamdani saree, standing near Lalbagh Fort during golden hour, traditional gold jewelry, wind blowing through hair, warm lighting, ultra-realistic 8k --ar 2:3",
            "A young Bangladeshi girl in a vibrant yellow saree celebrating Pohela Boishakh, floral crown on head, painted face alpana, blurred Ramna Park background, festive atmosphere, bokeh effect --ar 2:3",
            "Elegant Bangladeshi woman wearing a navy blue muslin saree with intricate silver embroidery, standing on a rooftop in Dhaka at twilight, city lights in background, moody lighting, editorial fashion shot --ar 2:3",
            "A stylish young woman in a modern fusion salwar kameez, pastel colors, sitting in a trendy cafe in Gulshan, sipping tea, natural lighting, candid shot, sharp focus --ar 2:3",
            "Portrait of a Bangladeshi bride in a heavy red Benarasi saree, elaborate gold necklace and tikli, hands decorated with dark mehndi, looking down shyly, dramatic lighting, cultural richness --ar 2:3",
            "A university student wearing a cotton kurti and jeans, carrying a tote bag, walking through the Dhaka University campus, Curzon Hall in background, sunny day, realistic lifestyle photography --ar 2:3",
            "A village girl wearing a simple printed cotton saree, standing in a mustard field (shorshe khet), bright yellow flowers, blue sky, smiling naturally, vivid colors, national geographic style --ar 2:3",
            "Glamorous fashion shoot of a Bangladeshi model in a black lehenga with golden zari work, posing against a dark textured wall, rim lighting, high contrast, vogue magazine style --ar 2:3",
            "A young woman wearing a white saree with red borders (Sharee) for Ekushey February, holding flowers, Shaheed Minar in soft background, somber and respectful atmosphere, morning mist --ar 2:3",
            "Rainy day in Dhaka, a young woman in a blue georgette saree holding a colorful rickshaw art umbrella, wet streets reflecting neon lights, cinematic rain effect, cyberpunk vibes --ar 2:3",
            "A Sylheti girl in a tea garden, wearing a green salwar kameez, plucking tea leaves, lush green background, soft diffused sunlight, peaceful atmosphere --ar 2:3",
            "Chittagong tribal fashion, a young indigenous woman wearing traditional Pinon Hadi attire, colorful woven patterns, standing near a waterfall, nature portrait, raw beauty --ar 2:3",
            "Winter fashion in Dhaka, a girl wearing a stylish shawl over a saree, holding a clay cup of tea (cha), standing on a foggy morning street, soft focus, nostalgic vibe --ar 2:3",
            "A young corporate woman in a formal saree and blazer, walking confidently in a modern office glass corridor, cityscape view outside, professional look, sharp details --ar 2:3",
            "Fashion portrait of a girl wearing a Rickshaw paint inspired colorful dress, pop art background, vibrant colors, bold makeup, quirky and artistic style --ar 2:3",
            "A serene boat ride on the Padma river, a woman in a purple saree sitting on the boat deck, sunset reflecting on water, golden hour, wide angle cinematic shot --ar 2:3",
            "Night portrait of a girl in Old Dhaka, wearing a sparkly party dress, blurred lights of Puran Dhaka streets behind her, bokeh, vibrant night life atmosphere --ar 2:3",
            "A young woman playing the Ektara, wearing earthy toned linen kurti, sitting under a Banyan tree, folk music vibe, cultural and artistic composition --ar 2:3",
            "Vintage style portrait of a Bengali woman from the 1970s, wearing a simple cotton saree, retro hairstyle, black and white photography, grainy film texture --ar 2:3",
            "A futuristic Bangladeshi fashion concept, woman wearing a cyber-tech saree with glowing neon borders, standing in a sci-fi version of Dhaka, cyberpunk aesthetic, 8k render --ar 2:3"
        ];

        // --- Auto Generator Data Parts (Bangladeshi Themed) ---
        const attire = ["Red Jamdani Saree", "Blue Muslin Saree", "Green Katan Saree", "Yellow Cotton Saree", "Designer Salwar Kameez", "Embroidered Kurti with Jeans", "Heavy Bridal Lehenga", "Traditional Taant Saree", "Modern Fusion Gown", "Silk Saree with Blazer"];
        const details = ["wearing gold jewelry", "with mehndi on hands", "wearing a floral crown", "with a bindi on forehead", "wearing glass bangles", "carrying a clay tea cup", "holding a hand fan", "with wind-blown hair", "wearing stylish sunglasses", "with a nose pin"];
        const settings = ["at Lalbagh Fort", "in a mustard field", "on a Dhaka rooftop at sunset", "in a busy Old Dhaka street", "near Curzon Hall", "in a Sylhet tea garden", "on a boat in the river", "at a wedding reception", "in a modern cafe", "under a Banyan tree"];
        const styles = ["cinematic lighting", "golden hour", "editorial fashion photography", "candid lifestyle shot", "moody portrait", "vibrant colors", "soft focus dreamy look", "high contrast black and white", "retro vintage film look", "cyberpunk neon style"];
        const mood = ["elegant", "joyful", "mysterious", "confident", "shy", "nostalgic", "romantic", "bold", "serene", "festive"];

        // --- DOM Elements ---
        const grid = document.getElementById('prompt-grid');
        const generateBtn = document.getElementById('generate-btn');
        const toast = document.getElementById('toast');

        // --- Functions ---

        // 1. Random Picker
        function getRandom(arr) {
            return arr[Math.floor(Math.random() * arr.length)];
        }

        // 2. Generator Logic
        function generateAutoPrompts(count) {
            let newPrompts = [];
            for(let i=0; i<count; i++) {
                const dress = getRandom(attire);
                const detail = getRandom(details);
                const place = getRandom(settings);
                const style = getRandom(styles);
                const vibe = getRandom(mood);

                // Constructing the prompt string
                const prompt = `A ${vibe} portrait of a Bangladeshi young woman wearing a ${dress}, ${detail}, ${place}, ${style}, ultra-realistic, highly detailed, 8k resolution --ar 2:3`;
                newPrompts.push(prompt);
            }
            return newPrompts;
        }

        // 3. Render Card
        function createCard(text, index) {
            const div = document.createElement('div');
            div.className = 'prompt-card bg-brand-surface border border-gray-800 p-6 relative group hover:border-brand-gold/50 transition-all duration-300 cursor-pointer flex flex-col h-full animate-fade-in';
            // Animation delay for cascading effect
            div.style.animationDelay = `${(index % 10) * 0.05}s`;

            div.innerHTML = `
                <div class="flex justify-between items-start mb-4">
                    <span class="text-xs text-brand-gold uppercase tracking-wider font-bold">Style #${Math.floor(Math.random() * 9000) + 1000}</span>
                    <i class="fas fa-copy text-gray-500 group-hover:text-brand-gold transition-colors copy-btn opacity-50"></i>
                </div>
                <p class="text-gray-300 font-light text-sm leading-relaxed flex-grow font-sans select-all">${text}</p>
                <div class="mt-4 pt-4 border-t border-gray-800 text-xs text-gray-600 group-hover:text-gray-400 transition-colors uppercase tracking-widest flex justify-between">
                    <span>Midjourney v6</span>
                    <span>--ar 2:3</span>
                </div>
            `;

            // Click to copy logic
            div.addEventListener('click', () => {
                navigator.clipboard.writeText(text).then(() => {
                    showToast();
                    div.classList.add('border-brand-gold');
                    setTimeout(() => div.classList.remove('border-brand-gold'), 300);
                });
            });

            return div;
        }

        // 4. Toast Notification
        function showToast() {
            toast.classList.remove('opacity-0', 'translate-y-4');
            setTimeout(() => {
                toast.classList.add('opacity-0', 'translate-y-4');
            }, 2000);
        }

        // 5. Render Initial Prompts
        function renderInitial() {
            initialPrompts.forEach((prompt, index) => {
                grid.appendChild(createCard(prompt, index));
            });
        }

        // --- Event Listeners ---

        // Generate Button Click
        generateBtn.addEventListener('click', () => {
            // Button loading state
            const originalText = generateBtn.querySelector('span').innerText;
            generateBtn.querySelector('span').innerText = "GENERATING...";
            generateBtn.disabled = true;

            setTimeout(() => {
                const newPrompts = generateAutoPrompts(10);
                newPrompts.forEach((prompt, index) => {
                    grid.appendChild(createCard(prompt, index));
                });

                // Reset button
                generateBtn.querySelector('span').innerText = originalText;
                generateBtn.disabled = false;

                // Scroll slightly to show new content
                window.scrollBy({ top: 400, behavior: 'smooth' });
            }, 600); // Fake delay for effect
        });

        // Init
        renderInitial();

    </script>
</body>
</html>