Spaces:

Nuzwa
/

_Small_Biz_Boost_

Running

App Files Files Community

Nuzwa commited on Sep 23, 2025

Commit

58b156d

verified ·

1 Parent(s): 662014c

Update index.html

Browse files

Files changed (1) hide show

index.html +120 -199

index.html CHANGED Viewed

@@ -1,245 +1,166 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Small Biz Boost</title>
   <style>
-    :root {
-      --primary-blue: #0F1C49;
-      --accent-orange: #FF8F00;
-      --bold-red: #E53935;
-      --cool-white: #F1F1F1;
-      --card-bg: #ffffff;
-      --card-radius: 8px;
-      --card-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    }
     body {
       margin: 0;
-      font-family: Arial, sans-serif;
-      background-color: var(--cool-white);
-      color: var(--primary-blue);
-    }
-    .header {
-      background-color: var(--primary-blue);
-      color: var(--cool-white);
-      padding: 20px;
-      text-align: center;
-    }
-    .header h1 {
-      margin: 0;
-      font-size: 26px;
-      font-weight: bold;
-    }
-    .header p {
-      margin: 5px 0 0;
-      font-size: 16px;
     }
     .container {
-      width: 100%;
-      max-width: 800px;
-      margin: 20px auto;
-      padding: 20px;
-      box-sizing: border-box;
     }
-    .card {
-      background-color: var(--card-bg);
-      border-radius: var(--card-radius);
-      box-shadow: var(--card-shadow);
-      margin-bottom: 20px;
-      padding: 20px;
-    }
-    .card h2 {
-      font-size: 20px;
-      color: var(--accent-orange);
-      margin-top: 0;
-      font-weight: bold;
     }
     label {
       display: block;
-      margin-bottom: 8px;
       font-weight: bold;
     }
     input[type="text"], select {
       width: 100%;
-      padding: 10px;
-      margin-bottom: 15px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      box-sizing: border-box;
     }
-    .btn {
-      background-color: var(--accent-orange);
-      color: var(--cool-white);
-      border: none;
       width: 100%;
-      padding: 14px 0;
-      font-size: 17px;
       font-weight: bold;
-      border-radius: 4px;
       cursor: pointer;
-      margin-top: 10px;
     }
-    .btn:hover {
-      background-color: var(--bold-red);
     }
-    .results {
-      background-color: #fafafa;
       padding: 20px;
-      border-radius: var(--card-radius);
-      margin-top: 20px;
       display: none;
     }
-    #otherSkillField {
       display: none;
     }
   </style>
 </head>
 <body>
-  <div class="header">
-    <h1>Small Biz Boost</h1>
-    <p>Refine Your Business Idea</p>
-  </div>
   <div class="container">
-    <form id="bizForm">
-      <div class="card">
-        <h2>Step 1: Business Idea</h2>
-        <label for="idea">Enter your business idea</label>
-        <input type="text" id="idea" name="idea" placeholder="e.g., Online store, Food service" required />
-      </div>
-      <div class="card">
-        <h2>Step 2: Budget</h2>
-        <label for="budget">Select your budget</label>
-        <select id="budget" name="budget">
-          <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 Amount</option>
-        </select>
-        <input type="text" id="budgetCustom" name="budgetCustom" placeholder="Enter custom amount" style="display:none;" />
-      </div>
-      <div class="card">
-        <h2>Step 3: Skills</h2>
-        <label for="skills">Select your main skill</label>
-        <select id="skills" name="skills">
-          <option value="writing">Writing</option>
-          <option value="design">Design</option>
-          <option value="marketing">Marketing</option>
-          <option value="coding">Coding</option>
-          <option value="other">Other</option>
-        </select>
-        <input type="text" id="otherSkillField" name="otherSkill" placeholder="Enter your skill" />
-      </div>
-      <div class="card">
-        <h2>Step 4: Time Commitment</h2>
-        <label for="time">How much time per day?</label>
-        <select id="time" name="time">
-          <option value="less than 1 hour">Less than 1 hour/day</option>
-          <option value="1-2 hours">1-2 hours/day</option>
-          <option value="2-4 hours">2-4 hours/day</option>
-          <option value="full-time">Full-time</option>
-        </select>
-      </div>
-      <div class="card">
-        <h2>Step 5: Business Type</h2>
-        <label for="type">Choose your business type</label>
-        <select id="type" name="type">
-          <option value="physical">Physical</option>
-          <option value="online">Online</option>
-          <option value="hybrid">Hybrid</option>
-        </select>
-      </div>
-      <button type="submit" class="btn">Generate Prompt</button>
-    </form>
-    <div id="results" class="results">
-      <h2>Your Generated Prompt</h2>
-      <div id="planContent"></div>
-      <button type="button" id="copyBtn" class="btn" style="display:none;">Copy & Paste Now</button>
-    </div>
-  </div>
-  <script>
-    document.getElementById('budget').addEventListener('change', function () {
-      document.getElementById('budgetCustom').style.display = this.value === 'custom' ? 'block' : 'none';
-    });
-    document.getElementById('skills').addEventListener('change', function () {
-      document.getElementById('otherSkillField').style.display = this.value === 'other' ? 'block' : 'none';
-    });
-    let typingInterval;
-    function typeWriter(text, element, callback) {
-        let i = 0;
-        element.innerHTML = '';
-        if (typingInterval) clearInterval(typingInterval);
-        typingInterval = setInterval(() => {
-            if (i < text.length) {
-                element.innerHTML += text.charAt(i);
-                i++;
-            } else {
-                clearInterval(typingInterval);
-                if (callback) callback();
-            }
-        }, 30); // Typing speed
     }
-    document.getElementById('bizForm').addEventListener('submit', function (e) {
-      e.preventDefault();
-      const idea = document.getElementById('idea').value;
-      const budgetValue = document.getElementById('budget').value;
-      const budget = budgetValue === 'custom'
-        ? document.getElementById('budgetCustom').value
-        : document.querySelector('#budget option:checked').textContent;
-      const skillChoice = document.getElementById('skills').value;
-      const otherSkill = document.getElementById('otherSkillField').value;
-      const skills = skillChoice === 'other' ? otherSkill : skillChoice;
-      const time = document.querySelector('#time option:checked').textContent;
-      const type = document.getElementById('type').value;
-      const prompt = `Generate a detailed business plan.
-Business Idea: ${idea}
-Budget: ${budget}
-Primary Skill: ${skills}
-Daily Time Commitment: ${time}
-Business Type: ${type}
-The plan should include:
-1.  **Product Intro:** A brief, compelling description.
-2.  **Target Customers:** Who are the ideal buyers?
-3.  **Pricing & Branding:** Suggested pricing and brand identity ideas.
-4.  **Social Media Plan:** Strategies for Facebook, Instagram, and TikTok.
-5.  **Sales Channels:** Where to sell the product/service.
-6.  **Startup Costs:** A breakdown of initial expenses.
-7.  **30-Day Action Plan:** Step-by-step tasks for the first month.
-8.  **Final Tips:** Advice for success.`;
-      const resultsDiv = document.getElementById('results');
-      const planContentDiv = document.getElementById('planContent');
-      const copyBtn = document.getElementById('copyBtn');
-      resultsDiv.style.display = 'block';
-      copyBtn.style.display = 'none';
-      typeWriter(prompt, planContentDiv, () => {
-          copyBtn.style.display = 'block';
-      });
-    });
-    document.getElementById('copyBtn').addEventListener('click', function() {
-        const promptText = document.getElementById('planContent').innerText;
-        navigator.clipboard.writeText(promptText).then(() => {
-            this.innerText = 'Copied!';
-            setTimeout(() => {
-                this.innerText = 'Copy & Paste Now';
-            }, 2000);
-        }).catch(err => {
-            alert('Failed to copy. Please try again.');
-        });
-    });
   </script>
 </body>
-</html>

 <!DOCTYPE html>
+<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>