Spaces:
Running
Running
| <html><head><base href="https://websim.ai/productnaminghub" /><title>Product Naming Pro - Craft Catchy Names for Your Innovations</title><style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f7f9fc; | |
| } | |
| h1, h2 { | |
| color: #2c3e50; | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 2.5em; | |
| margin-bottom: 20px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .container { | |
| background-color: #ffffff; | |
| border-radius: 15px; | |
| padding: 30px; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| textarea, input[type="text"] { | |
| width: 100%; | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| border: 1px solid #bdc3c7; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| } | |
| button { | |
| background-color: #3498db; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 16px; | |
| margin: 4px 2px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| transition: background-color 0.3s, transform 0.1s; | |
| } | |
| button:hover { | |
| background-color: #2980b9; | |
| transform: scale(1.05); | |
| } | |
| #output { | |
| margin-top: 20px; | |
| padding: 20px; | |
| background-color: #f9f9f9; | |
| border-left: 5px solid #3498db; | |
| border-radius: 5px; | |
| font-style: italic; | |
| } | |
| .footer { | |
| margin-top: 30px; | |
| text-align: center; | |
| font-size: 0.9em; | |
| color: #7f8c8d; | |
| } | |
| #productDescription { | |
| min-height: 100px; | |
| } | |
| .name-suggestion { | |
| background-color: #e8f6f3; | |
| border: 1px solid #1abc9c; | |
| border-radius: 5px; | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .name-suggestion h3 { | |
| margin-top: 0; | |
| color: #16a085; | |
| } | |
| .keywords-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .keyword { | |
| background-color: #ecf0f1; | |
| padding: 5px 10px; | |
| border-radius: 20px; | |
| font-size: 14px; | |
| } | |
| </style></head><body> | |
| <div class="container"> | |
| <h1>Product Naming Pro</h1> | |
| <p>Welcome to Product Naming Pro, where we transform your product descriptions and keywords into catchy, memorable names that will make your brand stand out! Let our AI-powered naming engine inspire your next big product launch.</p> | |
| <h2>Describe Your Product:</h2> | |
| <textarea id="productDescription" placeholder="Enter a brief description of your product..."></textarea> | |
| <h2>Enter Keywords (comma-separated):</h2> | |
| <input type="text" id="keywords" placeholder="e.g., innovative, eco-friendly, smart"> | |
| <button onclick="generateNames()">Generate Names</button> | |
| <div id="output"></div> | |
| <h2>Why Choose Product Naming Pro?</h2> | |
| <ul> | |
| <li>AI-powered name generation based on product features and market trends</li> | |
| <li>Customizable options to match your brand voice</li> | |
| <li>Instant trademark availability check</li> | |
| <li>Multilingual name suggestions for global markets</li> | |
| <li>Expert analysis of name memorability and impact</li> | |
| </ul> | |
| </div> | |
| <div class="footer"> | |
| <p>© 2023 Product Naming Pro | <a href="https://websim.ai/productnaminghub/about">About</a> | <a href="https://websim.ai/productnaminghub/contact">Contact</a></p> | |
| </div> | |
| <script> | |
| function generateNames() { | |
| const description = document.getElementById('productDescription').value; | |
| const keywords = document.getElementById('keywords').value.split(',').map(k => k.trim()); | |
| const outputDiv = document.getElementById('output'); | |
| if (!description) { | |
| outputDiv.innerHTML = "<p>Please enter a product description.</p>"; | |
| return; | |
| } | |
| outputDiv.innerHTML = "<p>Generating names...</p>"; | |
| // Simulating API call and response | |
| setTimeout(() => { | |
| const names = generateProductNames(description, keywords); | |
| let output = "<h2>Name Suggestions:</h2>"; | |
| output += "<div class='keywords-container'>"; | |
| keywords.forEach(keyword => { | |
| output += `<span class="keyword">${keyword}</span>`; | |
| }); | |
| output += "</div>"; | |
| names.forEach(name => { | |
| output += ` | |
| <div class="name-suggestion"> | |
| <h3>${name.name}</h3> | |
| <p>${name.description}</p> | |
| </div> | |
| `; | |
| }); | |
| outputDiv.innerHTML = output; | |
| }, 2000); | |
| } | |
| function generateProductNames(description, keywords) { | |
| // This is a mock function to simulate AI-generated names | |
| // In a real-world scenario, this would call an actual AI model or API | |
| const prefixes = ["Neo", "Eco", "Smart", "Ultra", "Flex", "Zen", "Quantum", "Hyper", "Vita", "Lumi"]; | |
| const suffixes = ["X", "Pro", "Max", "Plus", "Lite", "Go", "Elite", "Prime", "Fusion", "Wave"]; | |
| const names = []; | |
| for (let i = 0; i < 5; i++) { | |
| const prefix = prefixes[Math.floor(Math.random() * prefixes.length)]; | |
| const suffix = suffixes[Math.floor(Math.random() * suffixes.length)]; | |
| const keyword = keywords[Math.floor(Math.random() * keywords.length)]; | |
| const name = `${prefix}${keyword.charAt(0).toUpperCase() + keyword.slice(1)}${suffix}`; | |
| names.push({ | |
| name: name, | |
| description: `This name combines the futuristic "${prefix}" with the key feature "${keyword}" and the powerful "${suffix}" to create a memorable and impactful brand.` | |
| }); | |
| } | |
| return names; | |
| } | |
| </script> | |
| </body></html> |