Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Small Biz Boost</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: sans-serif; | |
| background-color: #ffffff; | |
| color: #6A1B9A; | |
| } | |
| .container { | |
| max-width: 450px; | |
| margin: 40px auto; | |
| background: #f9f9f9; | |
| padding: 30px; | |
| border-radius: 15px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| border-top: 5px solid #8A2BE2; | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #8A2BE2; | |
| font-size: 2em; | |
| } | |
| label { | |
| display: block; | |
| margin-top: 20px; | |
| font-weight: bold; | |
| } | |
| input[type="text"], select { | |
| width: 100%; | |
| padding: 20px; | |
| margin-top: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| font-size: 1em; | |
| } | |
| button { | |
| width: 100%; | |
| padding: 20px; | |
| margin-top: 20px; | |
| font-size: 1.5em; | |
| font-weight: bold; | |
| color: #ffffff; | |
| background-color: #B388FF; | |
| border: 1px solid #D1C4E9; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| button:hover { | |
| background-color: #8A2BE2; | |
| } | |
| #resultBox { | |
| margin-top: 30px; | |
| background: #F3E5F5; | |
| padding: 20px; | |
| border-radius: 8px; | |
| font-size: 1.2em; | |
| display: none; | |
| white-space: pre-line; | |
| } | |
| #budgetCustomField, #skillCustomField { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Small Biz Boost</h1> | |
| <label for="idea">Business Idea</label> | |
| <input type="text" id="idea" placeholder="e.g. Online store" /> | |
| <label for="budget">Select Budget</label> | |
| <select id="budget" onchange="toggleBudgetCustom()"> | |
| <option value="Low">Low (10-20k PKR)</option> | |
| <option value="Medium">Medium (20-50k PKR)</option> | |
| <option value="High">High (50k+ PKR)</option> | |
| <option value="custom">Custom</option> | |
| </select> | |
| <input type="text" id="budgetCustomField" placeholder="Enter your custom budget" /> | |
| <label for="skill">Your Skill</label> | |
| <select id="skill" onchange="toggleSkillCustom()"> | |
| <option value="Writing">Writing</option> | |
| <option value="Design">Design</option> | |
| <option value="Marketing">Marketing</option> | |
| <option value="Coding">Coding</option> | |
| <option value="custom">Custom</option> | |
| </select> | |
| <input type="text" id="skillCustomField" placeholder="Enter your custom skill" /> | |
| <label for="time">Time Commitment</label> | |
| <select id="time"> | |
| <option value="Less than 1 hour/day">Less than 1 hour/day</option> | |
| <option value="1-2 hours/day">1-2 hours/day</option> | |
| <option value="2-4 hours/day">2-4 hours/day</option> | |
| <option value="Full-time">Full-time</option> | |
| </select> | |
| <label for="type">Business Type</label> | |
| <select id="type"> | |
| <option value="Physical">Physical</option> | |
| <option value="Online">Online</option> | |
| <option value="Hybrid">Hybrid</option> | |
| </select> | |
| <button onclick="generatePrompt()">Generate Prompt</button> | |
| <div id="resultBox"></div> | |
| <button id="copyBtn" onclick="copyAndOpenGPT()" style="display:none;">Copy & Paste Now</button> | |
| </div> | |
| <script> | |
| function toggleBudgetCustom() { | |
| const budget = document.getElementById("budget").value; | |
| document.getElementById("budgetCustomField").style.display = budget === "custom" ? "block" : "none"; | |
| } | |
| function toggleSkillCustom() { | |
| const skill = document.getElementById("skill").value; | |
| document.getElementById("skillCustomField").style.display = skill === "custom" ? "block" : "none"; | |
| } | |
| function typeWriter(text, element, delay = 30) { | |
| let i = 0; | |
| element.innerHTML = ""; | |
| function type() { | |
| if (i < text.length) { | |
| element.innerHTML += text.charAt(i); | |
| i++; | |
| setTimeout(type, delay); | |
| } | |
| } | |
| type(); | |
| } | |
| function generatePrompt() { | |
| const idea = document.getElementById("idea").value; | |
| const budgetSel = document.getElementById("budget").value; | |
| const budget = budgetSel === "custom" ? document.getElementById("budgetCustomField").value : budgetSel; | |
| const skillSel = document.getElementById("skill").value; | |
| const skill = skillSel === "custom" ? document.getElementById("skillCustomField").value : skillSel; | |
| const time = document.getElementById("time").value; | |
| const type = document.getElementById("type").value; | |
| const prompt = `I want a business plan for this idea: ${idea}, with a budget of ${budget}. My skill is ${skill}, I can give ${time}, and I want a ${type} business.`; | |
| const resultBox = document.getElementById("resultBox"); | |
| resultBox.style.display = "block"; | |
| typeWriter(prompt, resultBox); | |
| navigator.clipboard.writeText(prompt); | |
| document.getElementById("copyBtn").style.display = "block"; | |
| } | |
| function copyAndOpenGPT() { | |
| window.open("https://chatgpt.com/g/g-67f362bab1e481919229b855c99e8ce0-small-biz-boost-urdu", "_blank"); | |
| } | |
| </script> | |
| </body> | |
| </html> | |