hack85993-collab · October 10, 2025 14:57
diff --git a/index.html b/index.html
 DOCTYPE html>

 <html lang="en">

 <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Helping Mind - Professional Logo Design</title>

    <style>

        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap');

        

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        

        body {

            font-family: 'Poppins', sans-serif;

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            color: #333;

            overflow-x: hidden;

        }

        

        .header {

            background: rgba(255, 255, 255, 0.95);

            padding: 20px 50px;

            box-shadow: 0 4px 20px rgba(0,0,0,0.1);

            position: sticky;

            top: 0;

            z-index: 1000;

            backdrop-filter: blur(10px);

        }

        

        .logo-container {

            display: flex;

            align-items: center;

            gap: 15px;

        }

        

        .logo {

            width: 60px;

            height: 60px;

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 28px;

            font-weight: 700;

            color: white;

            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

            animation: pulse 2s infinite;

        }

        

        @keyframes pulse {

            0%, 100% { transform: scale(1); }

            50% { transform: scale(1.05); }

        }

        

        .logo-text {

            font-family: 'Playfair Display', serif;

            font-size: 32px;

            font-weight: 700;

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        

        .hero {

            padding: 100px 50px;

            text-align: center;

            color: white;

        }

        

        .hero h1 {

            font-family: 'Playfair Display', serif;

            font-size: 64px;

            margin-bottom: 20px;

            animation: fadeInDown 1s;

        }

        

        @keyframes fadeInDown {

            from {

                opacity: 0;

                transform: translateY(-30px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }

        

        .hero p {

            font-size: 22px;

            margin-bottom: 40px;

            opacity: 0.95;

            animation: fadeInUp 1s;

        }

        

        @keyframes fadeInUp {

            from {

                opacity: 0;

                transform: translateY(30px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }

        

        .container {

            max-width: 1200px;

            margin: 0 auto;

            padding: 50px;

        }

        

        .section {

            background: white;

            border-radius: 20px;

            padding: 60px;

            margin-bottom: 40px;

            box-shadow: 0 10px 40px rgba(0,0,0,0.1);

            animation: fadeIn 1s;

        }

        

        @keyframes fadeIn {

            from { opacity: 0; }

            to { opacity: 1; }

        }

        

        .section h2 {

            font-family: 'Playfair Display', serif;

            font-size: 42px;

            margin-bottom: 30px;

            color: #667eea;

            text-align: center;

        }

        

        .ai-generator {

            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

            padding: 40px;

            border-radius: 15px;

            margin-top: 30px;

        }

        

        .input-group {

            margin-bottom: 20px;

        }

        

        .input-group label {

            display: block;

            font-weight: 600;

            margin-bottom: 10px;

            color: #333;

        }

        

        .input-group input, .input-group select {

            width: 100%;

            padding: 15px;

            border: 2px solid #ddd;

            border-radius: 10px;

            font-size: 16px;

            font-family: 'Poppins', sans-serif;

            transition: all 0.3s;

        }

        

        .input-group input:focus, .input-group select:focus {

            outline: none;

            border-color: #667eea;

            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);

        }

        

        .btn {

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            color: white;

            padding: 15px 40px;

            border: none;

            border-radius: 50px;

            font-size: 18px;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s;

            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

        }

        

        .btn:hover {

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);

        }

        

        .logo-preview {

            margin-top: 30px;

            min-height: 250px;

            background: white;

            border-radius: 15px;

            display: flex;

            align-items: center;

            justify-content: center;

            border: 3px dashed #ddd;

            padding: 30px;

        }

        

        .generated-logo {

            width: 200px;

            height: 200px;

            border-radius: 20px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 72px;

            font-weight: 700;

            color: white;

            box-shadow: 0 10px 30px rgba(0,0,0,0.2);

        }

        

        .features {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 30px;

            margin-top: 40px;

        }

        

        .feature-card {

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            padding: 40px;

            border-radius: 15px;

            color: white;

            text-align: center;

            transition: all 0.3s;

        }

        

        .feature-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);

        }

        

        .feature-card h3 {

            font-size: 24px;

            margin-bottom: 15px;

        }

        

        .premium-cta {

            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

            color: white;

            padding: 60px;

            border-radius: 20px;

            text-align: center;

            margin-top: 40px;

        }

        

        .premium-cta h2 {

            color: white;

            font-size: 48px;

            margin-bottom: 20px;

        }

        

        .whatsapp-btn {

            background: #25D366;

            color: white;

            padding: 20px 50px;

            border: none;

            border-radius: 50px;

            font-size: 20px;

            font-weight: 600;

            cursor: pointer;

            display: inline-flex;

            align-items: center;

            gap: 10px;

            transition: all 0.3s;

            margin-top: 20px;

        }

        

        .whatsapp-btn:hover {

            background: #128C7E;

            transform: scale(1.05);

        }

        

        .gallery {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

            gap: 20px;

            margin-top: 40px;

        }

        

        .gallery-item {

            height: 250px;

            border-radius: 15px;

            overflow: hidden;

            box-shadow: 0 5px 20px rgba(0,0,0,0.1);

            transition: all 0.3s;

        }

        

        .gallery-item:hover {

            transform: scale(1.05);

            box-shadow: 0 10px 30px rgba(0,0,0,0.2);

        }

        

        .gallery-item img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }

    </style>

 </head>

 <body>

    <div class="header">

        <div class="logo-container">

            <div class="logo">HM</div>

            <div class="logo-text">Helping Mind</div>

        </div>

    </div>

    

    <div class="hero">

        <h1>Transform Your Brand Identity</h1>

        <p>Create stunning logos in seconds with our AI-powered design tool</p>

    </div>

    

    <div class="container">

        <div class="section">

            <h2>Free AI Logo Generator</h2>

            <p style="text-align: center; font-size: 18px; color: #666; margin-bottom: 30px;">

                Create your basic logo instantly with our smart AI tool

            </p>

            

            <div class="ai-generator">

                <div class="input-group">

                    <label>Business Name</label>

                    <input type="text" id="businessName" placeholder="Enter your business name">

                </div>

                

                <div class="input-group">

                    <label>Industry Type</label>

                    <select id="industry">

                        <option value="">Select Industry</option>

                        <option value="tech">Technology</option>

                        <option value="food">Food & Restaurant</option>

                        <option value="fashion">Fashion & Beauty</option>

                        <option value="fitness">Health & Fitness</option>

                        <option value="education">Education</option>

                        <option value="finance">Finance</option>

                        <option value="creative">Creative & Art</option>

                        <option value="other">Other</option>

                    </select>

                </div>

                

                <div class="input-group">

                    <label>Preferred Color</label>

                    <select id="color">

                        <option value="">Select Color</option>

                        <option value="#667eea">Purple</option>

                        <option value="#f093fb">Pink</option>

                        <option value="#4facfe">Blue</option>

                        <option value="#43e97b">Green</option>

                        <option value="#fa709a">Red</option>

                        <option value="#feca57">Yellow</option>

                        <option value="#ff6348">Orange</option>

                    </select>

                </div>

                

                <center>

                    <button class="btn" onclick="generateLogo()">Generate Logo</button>

                </center>

                

                <div class="logo-preview" id="logoPreview">

                    <p style="color: #999;">Your generated logo will appear here</p>

                </div>

            </div>

        </div>

        

        <div class="section">

            <h2>Why Choose Helping Mind?</h2>

            <div class="features">

                <div class="feature-card">

                    <h3>🎨 Creative Designs</h3>

                    <p>Unique and professional logos tailored to your brand identity</p>

                </div>

                <div class="feature-card">

                    <h3>⚡ Instant Results</h3>

                    <p>Get your basic logo in seconds with our AI technology</p>

                </div>

                <div class="feature-card">

                    <h3>💎 Premium Quality</h3>

                    <p>High-resolution logos suitable for all your branding needs</p>

                </div>

            </div>

        </div>

        

        <div class="premium-cta">

            <h2>Need a Premium Logo?</h2>

            <p style="font-size: 20px; margin-bottom: 10px;">

                Get a custom-designed professional logo with unlimited revisions

            </p>

            <p style="font-size: 18px; opacity: 0.9;">

                ✓ Multiple concepts ✓ Source files ✓ Brand guidelines ✓ Full commercial rights

            </p>

            <button class="whatsapp-btn" onclick="contactWhatsApp()">

                📱 Contact on WhatsApp

            </button>

        </div>

        

        <div class="section">

            <h2>Our Design Portfolio</h2>

            <div class="gallery">

                <div class="gallery-item" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">

                    <div style="text-align: center; color: white;">

                        <div style="font-size: 64px; font-weight: 700;">TM</div>

                        <div style="font-size: 18px; margin-top: 10px;">Tech Master</div>

                    </div>

                </div>

                <div class="gallery-item" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center;">

                    <div style="text-align: center; color: white;">

                        <div style="font-size: 64px; font-weight: 700;">FB</div>

                        <div style="font-size: 18px; margin-top: 10px;">Food Bistro</div>

                    </div>

                </div>

                <div class="gallery-item" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); display: flex; align-items: center; justify-content: center;">

                    <div style="text-align: center; color: white;">

                        <div style="font-size: 64px; font-weight: 700;">FS</div>

                        <div style="font-size: 18px; margin-top: 10px;">Fitness Studio</div>

                    </div>

                </div>

                <div class="gallery-item" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); display: flex; align-items: center; justify-content: center;">

                    <div style="text-align: center; color: white;">

                        <div style="font-size: 64px; font-weight: 700;">EA</div>

                        <div style="font-size: 18px; margin-top: 10px;">Edu Academy</div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    

    <script>

        function generateLogo() {

            const name = document.getElementById('businessName').value;

            const industry = document.getElementById('industry').value;

            const color = document.getElementById('color').value;

            

            if (!name) {

                alert('Please enter your business name');

                return;

            }

            

            if (!industry) {

                alert('Please select an industry');

                return;

            }

            

            if (!color) {

                alert('Please select a color');

                return;

            }

            

            const initials = name.split(' ')

                .map(word => word.charAt(0).toUpperCase())

                .join('')

                .substring(0, 2);

            

            const preview = document.getElementById('logoPreview');

            

            const gradients = {

                '#667eea': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',

                '#f093fb': 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',

                '#4facfe': 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',

                '#43e97b': 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',

                '#fa709a': 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',

                '#feca57': 'linear-gradient(135deg, #feca57 0%, #f7971e 100%)',

                '#ff6348': 'linear-gradient(135deg, #ff6348 0%, #d84315 100%)'

            };

            

            preview.innerHTML = `

                <div>

                    <div class="generated-logo" style="background: ${gradients[color]};">

                        ${initials}

                    </div>

                    <p style="margin-top: 20px; font-size: 24px; font-weight: 600; color: #333;">${name}</p>

                    <p style="color: #666; margin-top: 10px;">Basic logo generated! For premium designs with full customization,</p>

                    <button class="btn" style="margin-top: 20px;" onclick="contactWhatsApp()">Get Premium Version</button>

                </div>

            `;

        }

        

        function contactWhatsApp() {

            const message = encodeURIComponent('Hi! I am interested in getting a premium logo design from Helping Mind.');

            window.open(`https://wa.me/?text=${message}`, '_blank');

        }

    </script>

 </body>

 </html>// ... existing JavaScript

 function contactWhatsApp() {

    // 1. Replace 'YOUR_WHATSAPP_NUMBER' with your full number including country code (e.g., 91XXXXXXXXXX)

    const whatsappNumber = 'YOUR_WHATSAPP_NUMBER'; 

    const message = encodeURIComponent('Hi! I am interested in getting a premium logo design from Helping Mind.');

    

    // 2. Update the window.open URL

    window.open(`https://wa.me/${whatsappNumber}?text=${message}`, '_blank');

 }

 // ... rest of the JavaScript// Before

 const preview = document.getElementById('logoPreview');// After

 const preview = document.getElementById('logoPreview');

 // Remove the dashed border once a logo is generated

 preview.style.border = 'none'; 

 preview.style.padding = '0'; // Adjust padding if needed
diff --git a/untitled.markdown b/untitled.markdown
	DOCTYPE html>

	<html lang="en">

	<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Helping Mind - Professional Logo Design</title>

	<style>

	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap');



	* {

	margin: 0;

	padding: 0;

	box-sizing: border-box;

	}



	body {

	font-family: 'Poppins', sans-serif;

	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

	color: #333;

	overflow-x: hidden;

	}



	.header {

	background: rgba(255, 255, 255, 0.95);

	padding: 20px 50px;

	box-shadow: 0 4px 20px rgba(0,0,0,0.1);

	position: sticky;

	top: 0;

	z-index: 1000;

	backdrop-filter: blur(10px);

	}



	.logo-container {

	display: flex;

	align-items: center;

	gap: 15px;

	}



	.logo {

	width: 60px;

	height: 60px;

	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 28px;

	font-weight: 700;

	color: white;

	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

	animation: pulse 2s infinite;

	}



	@keyframes pulse {

	0%, 100% { transform: scale(1); }

	50% { transform: scale(1.05); }

	}



	.logo-text {

	font-family: 'Playfair Display', serif;

	font-size: 32px;

	font-weight: 700;

	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

	background-clip: text;

	}



	.hero {

	padding: 100px 50px;

	text-align: center;

	color: white;

	}



	.hero h1 {

	font-family: 'Playfair Display', serif;

	font-size: 64px;

	margin-bottom: 20px;

	animation: fadeInDown 1s;

	}



	@keyframes fadeInDown {

	from {

	opacity: 0;

	transform: translateY(-30px);

	}

	to {

	opacity: 1;

	transform: translateY(0);

	}

	}



	.hero p {

	font-size: 22px;

	margin-bottom: 40px;

	opacity: 0.95;

	animation: fadeInUp 1s;

	}



	@keyframes fadeInUp {

	from {

	opacity: 0;

	transform: translateY(30px);

	}

	to {

	opacity: 1;

	transform: translateY(0);

	}

	}



	.container {

	max-width: 1200px;

	margin: 0 auto;

	padding: 50px;

	}



	.section {

	background: white;

	border-radius: 20px;

	padding: 60px;

	margin-bottom: 40px;

	box-shadow: 0 10px 40px rgba(0,0,0,0.1);

	animation: fadeIn 1s;

	}



	@keyframes fadeIn {

	from { opacity: 0; }

	to { opacity: 1; }

	}



	.section h2 {

	font-family: 'Playfair Display', serif;

	font-size: 42px;

	margin-bottom: 30px;

	color: #667eea;

	text-align: center;

	}



	.ai-generator {

	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

	padding: 40px;

	border-radius: 15px;

	margin-top: 30px;

	}



	.input-group {

	margin-bottom: 20px;

	}



	.input-group label {

	display: block;

	font-weight: 600;

	margin-bottom: 10px;

	color: #333;

	}



	.input-group input, .input-group select {

	width: 100%;

	padding: 15px;

	border: 2px solid #ddd;

	border-radius: 10px;

	font-size: 16px;

	font-family: 'Poppins', sans-serif;

	transition: all 0.3s;

	}



	.input-group input:focus, .input-group select:focus {

	outline: none;

	border-color: #667eea;

	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);

	}



	.btn {

	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

	color: white;

	padding: 15px 40px;

	border: none;

	border-radius: 50px;

	font-size: 18px;

	font-weight: 600;

	cursor: pointer;

	transition: all 0.3s;

	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

	}



	.btn:hover {

	transform: translateY(-2px);

	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);

	}



	.logo-preview {

	margin-top: 30px;

	min-height: 250px;

	background: white;

	border-radius: 15px;

	display: flex;

	align-items: center;

	justify-content: center;

	border: 3px dashed #ddd;

	padding: 30px;

	}



	.generated-logo {

	width: 200px;

	height: 200px;

	border-radius: 20px;

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 72px;

	font-weight: 700;

	color: white;

	box-shadow: 0 10px 30px rgba(0,0,0,0.2);

	}



	.features {

	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

	gap: 30px;

	margin-top: 40px;

	}



	.feature-card {

	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

	padding: 40px;

	border-radius: 15px;

	color: white;

	text-align: center;

	transition: all 0.3s;

	}



	.feature-card:hover {

	transform: translateY(-10px);

	box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);

	}



	.feature-card h3 {

	font-size: 24px;

	margin-bottom: 15px;

	}



	.premium-cta {

	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

	color: white;

	padding: 60px;

	border-radius: 20px;

	text-align: center;

	margin-top: 40px;

	}



	.premium-cta h2 {

	color: white;

	font-size: 48px;

	margin-bottom: 20px;

	}



	.whatsapp-btn {

	background: #25D366;

	color: white;

	padding: 20px 50px;

	border: none;

	border-radius: 50px;

	font-size: 20px;

	font-weight: 600;

	cursor: pointer;

	display: inline-flex;

	align-items: center;

	gap: 10px;

	transition: all 0.3s;

	margin-top: 20px;

	}



	.whatsapp-btn:hover {

	background: #128C7E;

	transform: scale(1.05);

	}



	.gallery {

	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

	gap: 20px;

	margin-top: 40px;

	}



	.gallery-item {

	height: 250px;

	border-radius: 15px;

	overflow: hidden;

	box-shadow: 0 5px 20px rgba(0,0,0,0.1);

	transition: all 0.3s;

	}



	.gallery-item:hover {

	transform: scale(1.05);

	box-shadow: 0 10px 30px rgba(0,0,0,0.2);

	}



	.gallery-item img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	}

	</style>

	</head>

	<body>

	<div class="header">

	<div class="logo-container">

	<div class="logo">HM</div>

	<div class="logo-text">Helping Mind</div>

	</div>

	</div>



	<div class="hero">

	<h1>Transform Your Brand Identity</h1>

	<p>Create stunning logos in seconds with our AI-powered design tool</p>

	</div>



	<div class="container">

	<div class="section">

	<h2>Free AI Logo Generator</h2>

	<p style="text-align: center; font-size: 18px; color: #666; margin-bottom: 30px;">

	Create your basic logo instantly with our smart AI tool

	</p>



	<div class="ai-generator">

	<div class="input-group">

	<label>Business Name</label>

	<input type="text" id="businessName" placeholder="Enter your business name">

	</div>



	<div class="input-group">

	<label>Industry Type</label>

	<select id="industry">

	<option value="">Select Industry</option>

	<option value="tech">Technology</option>

	<option value="food">Food & Restaurant</option>

	<option value="fashion">Fashion & Beauty</option>

	<option value="fitness">Health & Fitness</option>

	<option value="education">Education</option>

	<option value="finance">Finance</option>

	<option value="creative">Creative & Art</option>

	<option value="other">Other</option>

	</select>

	</div>



	<div class="input-group">

	<label>Preferred Color</label>

	<select id="color">

	<option value="">Select Color</option>

	<option value="#667eea">Purple</option>

	<option value="#f093fb">Pink</option>

	<option value="#4facfe">Blue</option>

	<option value="#43e97b">Green</option>

	<option value="#fa709a">Red</option>

	<option value="#feca57">Yellow</option>

	<option value="#ff6348">Orange</option>

	</select>

	</div>



	<center>

	<button class="btn" onclick="generateLogo()">Generate Logo</button>

	</center>



	<div class="logo-preview" id="logoPreview">

	<p style="color: #999;">Your generated logo will appear here</p>

	</div>

	</div>

	</div>



	<div class="section">

	<h2>Why Choose Helping Mind?</h2>

	<div class="features">

	<div class="feature-card">

	<h3>🎨 Creative Designs</h3>

	<p>Unique and professional logos tailored to your brand identity</p>

	</div>

	<div class="feature-card">

	<h3>⚡ Instant Results</h3>

	<p>Get your basic logo in seconds with our AI technology</p>

	</div>

	<div class="feature-card">

	<h3>💎 Premium Quality</h3>

	<p>High-resolution logos suitable for all your branding needs</p>

	</div>

	</div>

	</div>



	<div class="premium-cta">

	<h2>Need a Premium Logo?</h2>

	<p style="font-size: 20px; margin-bottom: 10px;">

	Get a custom-designed professional logo with unlimited revisions

	</p>

	<p style="font-size: 18px; opacity: 0.9;">

	✓ Multiple concepts ✓ Source files ✓ Brand guidelines ✓ Full commercial rights

	</p>

	<button class="whatsapp-btn" onclick="contactWhatsApp()">

	📱 Contact on WhatsApp

	</button>

	</div>



	<div class="section">

	<h2>Our Design Portfolio</h2>

	<div class="gallery">

	<div class="gallery-item" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">

	<div style="text-align: center; color: white;">

	<div style="font-size: 64px; font-weight: 700;">TM</div>

	<div style="font-size: 18px; margin-top: 10px;">Tech Master</div>

	</div>

	</div>

	<div class="gallery-item" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center;">

	<div style="text-align: center; color: white;">

	<div style="font-size: 64px; font-weight: 700;">FB</div>

	<div style="font-size: 18px; margin-top: 10px;">Food Bistro</div>

	</div>

	</div>

	<div class="gallery-item" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); display: flex; align-items: center; justify-content: center;">

	<div style="text-align: center; color: white;">

	<div style="font-size: 64px; font-weight: 700;">FS</div>

	<div style="font-size: 18px; margin-top: 10px;">Fitness Studio</div>

	</div>

	</div>

	<div class="gallery-item" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); display: flex; align-items: center; justify-content: center;">

	<div style="text-align: center; color: white;">

	<div style="font-size: 64px; font-weight: 700;">EA</div>

	<div style="font-size: 18px; margin-top: 10px;">Edu Academy</div>

	</div>

	</div>

	</div>

	</div>

	</div>



	<script>

	function generateLogo() {

	const name = document.getElementById('businessName').value;

	const industry = document.getElementById('industry').value;

	const color = document.getElementById('color').value;



	if (!name) {

	alert('Please enter your business name');

	return;

	}



	if (!industry) {

	alert('Please select an industry');

	return;

	}



	if (!color) {

	alert('Please select a color');

	return;

	}



	const initials = name.split(' ')

	.map(word => word.charAt(0).toUpperCase())

	.join('')

	.substring(0, 2);



	const preview = document.getElementById('logoPreview');



	const gradients = {

	'#667eea': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',

	'#f093fb': 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',

	'#4facfe': 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',

	'#43e97b': 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',

	'#fa709a': 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',

	'#feca57': 'linear-gradient(135deg, #feca57 0%, #f7971e 100%)',

	'#ff6348': 'linear-gradient(135deg, #ff6348 0%, #d84315 100%)'

	};



	preview.innerHTML = `

	<div>

	<div class="generated-logo" style="background: ${gradients[color]};">

	${initials}

	</div>

	<p style="margin-top: 20px; font-size: 24px; font-weight: 600; color: #333;">${name}</p>

	<p style="color: #666; margin-top: 10px;">Basic logo generated! For premium designs with full customization,</p>

	<button class="btn" style="margin-top: 20px;" onclick="contactWhatsApp()">Get Premium Version</button>

	</div>

	`;

	}



	function contactWhatsApp() {

	const message = encodeURIComponent('Hi! I am interested in getting a premium logo design from Helping Mind.');

	window.open(`https://wa.me/?text=${message}`, '_blank');

	}

	</script>

	</body>

	</html>// ... existing JavaScript

	function contactWhatsApp() {

	// 1. Replace 'YOUR_WHATSAPP_NUMBER' with your full number including country code (e.g., 91XXXXXXXXXX)

	const whatsappNumber = 'YOUR_WHATSAPP_NUMBER';

	const message = encodeURIComponent('Hi! I am interested in getting a premium logo design from Helping Mind.');



	// 2. Update the window.open URL

	window.open(`https://wa.me/${whatsappNumber}?text=${message}`, '_blank');

	}

	// ... rest of the JavaScript// Before

	const preview = document.getElementById('logoPreview');// After

	const preview = document.getElementById('logoPreview');

	// Remove the dashed border once a logo is generated

	preview.style.border = 'none';

	preview.style.padding = '0'; // Adjust padding if needed