Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>One Page Strategic Vision</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> | |
| <style> | |
| .section-card { | |
| transition: all 0.3s ease; | |
| } | |
| .section-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| textarea { | |
| min-height: 80px; | |
| } | |
| .owner-input { | |
| position: relative; | |
| } | |
| .owner-input:after { | |
| content: "Owner"; | |
| position: absolute; | |
| right: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: #6b7280; | |
| font-size: 0.75rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2">One Page Strategic Vision</h1> | |
| <p class="text-gray-600">Define your company's strategic direction in one comprehensive document</p> | |
| <div class="flex justify-center space-x-4 mt-6"> | |
| <button id="savePdf" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" /> | |
| </svg> | |
| Save to PDF | |
| </button> | |
| <button id="saveJson" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> | |
| </svg> | |
| Download as JSON | |
| </button> | |
| </div> | |
| </div> | |
| <div id="formContainer" class="space-y-6"> | |
| <!-- 1. Core Purpose & Values --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">1. Core Purpose & Values</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Core Purpose</label> | |
| <textarea name="corePurpose" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Why does your company exist? (e.g., 'To empower small businesses through technology')"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Core Values</label> | |
| <div class="space-y-3"> | |
| <input type="text" name="value1" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Value 1 (e.g., Integrity)"> | |
| <input type="text" name="value2" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Value 2 (e.g., Innovation)"> | |
| <input type="text" name="value3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Value 3 (e.g., Customer Focus)"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Overall Owner</label> | |
| <input type="text" name="corePurposeOwner" class="w-full md:w-1/2 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Name of responsible person"> | |
| </div> | |
| </div> | |
| <!-- 2. 2024 Revenue Goal --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">2. 2024 Revenue Goal</h2> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Monthly Revenue ($)</label> | |
| <div class="flex"> | |
| <input type="number" name="monthlyRevenue" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="10000"> | |
| <input type="text" name="monthlyRevenueOwner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quarterly Revenue ($)</label> | |
| <div class="flex"> | |
| <input type="number" name="quarterlyRevenue" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="30000"> | |
| <input type="text" name="quarterlyRevenueOwner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Yearly Revenue ($)</label> | |
| <div class="flex"> | |
| <input type="number" name="yearlyRevenue" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="120000"> | |
| <input type="text" name="yearlyRevenueOwner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 3. 2024 Profit Goal --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">3. 2024 Profit Goal</h2> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Monthly Profit ($)</label> | |
| <div class="flex"> | |
| <input type="number" name="monthlyProfit" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="5000"> | |
| <input type="text" name="monthlyProfitOwner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quarterly Profit ($)</label> | |
| <div class="flex"> | |
| <input type="number" name="quarterlyProfit" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="15000"> | |
| <input type="text" name="quarterlyProfitOwner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Yearly Profit ($)</label> | |
| <div class="flex"> | |
| <input type="number" name="yearlyProfit" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="60000"> | |
| <input type="text" name="yearlyProfitOwner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 4. 10-Year Sky's the Limit Goal --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">4. 10-Year Sky's the Limit Goal</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Vision Statement</label> | |
| <input type="text" name="visionStatement" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Become #1 in our market"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea name="visionDescription" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Describe your ambitious 10-year vision in detail"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 5. 3-Year Goal --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">5. 3-Year Goal</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Goal Summary</label> | |
| <input type="text" name="threeYearGoal" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Expand to 3 new markets"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea name="threeYearDescription" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Detailed plan for achieving 3-year goal"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 6. 1-Year Goals --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">6. 1-Year Goals</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Goal 1</label> | |
| <div class="flex"> | |
| <input type="text" name="oneYearGoal1" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Launch new product line"> | |
| <input type="text" name="oneYearGoal1Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Goal 2</label> | |
| <div class="flex"> | |
| <input type="text" name="oneYearGoal2" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Increase customer retention by 20%"> | |
| <input type="text" name="oneYearGoal2Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Goal 3</label> | |
| <div class="flex"> | |
| <input type="text" name="oneYearGoal3" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Build team of 10 employees"> | |
| <input type="text" name="oneYearGoal3Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 7. 90-Day Goals --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">7. 90-Day Goals</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Goal 1</label> | |
| <div class="flex"> | |
| <input type="text" name="ninetyDayGoal1" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Complete product prototype"> | |
| <input type="text" name="ninetyDayGoal1Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Goal 2</label> | |
| <div class="flex"> | |
| <input type="text" name="ninetyDayGoal2" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Hire 2 new team members"> | |
| <input type="text" name="ninetyDayGoal2Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Goal 3</label> | |
| <div class="flex"> | |
| <input type="text" name="ninetyDayGoal3" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Secure 3 new clients"> | |
| <input type="text" name="ninetyDayGoal3Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 8. Quarterly Planning --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">8. Quarterly Planning</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quarterly Theme</label> | |
| <input type="text" name="quarterlyTheme" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g., 'Product Launch Quarter'"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quarterly Team Reward</label> | |
| <input type="text" name="quarterlyReward" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g., 'Team retreat to Hawaii'"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Critical #</label> | |
| <input type="text" name="criticalNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 mb-2" placeholder="e.g., '25 new customers'"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea name="criticalNumberDescription" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Why this number is critical"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 9. Monthly Goals --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">9. Monthly Goals</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Goal 1</label> | |
| <div class="flex"> | |
| <input type="text" name="monthlyGoal1" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Complete market research"> | |
| <input type="text" name="monthlyGoal1Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Goal 2</label> | |
| <div class="flex"> | |
| <input type="text" name="monthlyGoal2" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Increase social media following by 10%"> | |
| <input type="text" name="monthlyGoal2Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Goal 3</label> | |
| <div class="flex"> | |
| <input type="text" name="monthlyGoal3" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Generate 50 qualified leads"> | |
| <input type="text" name="monthlyGoal3Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 10. Branding & Differentiation --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">10. Branding & Differentiation</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Differentiating Activities</label> | |
| <div class="space-y-3"> | |
| <input type="text" name="differentiatingActivity1" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Activity 1 (e.g., '24/7 customer support')"> | |
| <input type="text" name="differentiatingActivity2" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Activity 2 (e.g., 'Lifetime guarantee')"> | |
| <input type="text" name="differentiatingActivity3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Activity 3 (e.g., 'Personalized onboarding')"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">X-Factor</label> | |
| <textarea name="xFactor" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="What makes your company truly unique?"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 11. Strategic Context --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">11. Strategic Context</h2> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Trends</label> | |
| <textarea name="trends" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Industry trends affecting your business"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Strengths</label> | |
| <textarea name="strengths" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Your company's key strengths"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Weaknesses</label> | |
| <textarea name="weaknesses" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Areas needing improvement"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 12. Ideal Client Profile --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">12. Ideal Client Profile</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Who & Where</label> | |
| <textarea name="idealClientWho" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Demographics, location, industry, etc."></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description of Ideal Client</label> | |
| <textarea name="idealClientDescription" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Psychographics, needs, pain points"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 13. Problem We Solve & Product/Service --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">13. Problem We Solve & Product/Service</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Problem Description</label> | |
| <textarea name="problemDescription" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="What problem does your company solve?"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Offer / Service Description</label> | |
| <textarea name="serviceDescription" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="How your product/service solves the problem"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 14. Brand Promise --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">14. Brand Promise</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">What Clients Get</label> | |
| <textarea name="clientBenefits" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="The guaranteed outcome clients can expect"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Brand Promise KPIs</label> | |
| <div class="space-y-3"> | |
| <div class="flex"> | |
| <input type="text" name="brandKpi1" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="KPI 1 (e.g., '95% satisfaction')"> | |
| <input type="text" name="brandKpi1Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" name="brandKpi2" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="KPI 2 (e.g., '24h response time')"> | |
| <input type="text" name="brandKpi2Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" name="brandKpi3" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="KPI 3 (e.g., 'Money-back guarantee')"> | |
| <input type="text" name="brandKpi3Owner" class="w-32 px-3 py-2 border-t border-r border-b border-gray-300 rounded-r-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Owner"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 15. One-Phrase Strategy --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">15. One-Phrase Strategy</h2> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Strategy Statement</label> | |
| <input type="text" name="strategyStatement" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g., 'Dominate the premium segment through superior service'"> | |
| </div> | |
| </div> | |
| <!-- 16. Economic Engine --> | |
| <div class="section-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">16. Economic Engine</h2> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Profit per X</label> | |
| <input type="text" name="profitPerX" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g., 'Profit per customer', 'Profit per location'"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center space-x-4 mt-10 mb-10"> | |
| <button id="savePdfBottom" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" /> | |
| </svg> | |
| Save to PDF | |
| </button> | |
| <button id="saveJsonBottom" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> | |
| </svg> | |
| Download as JSON | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // PDF Generation | |
| const { jsPDF } = window.jspdf; | |
| function saveAsPdf() { | |
| const element = document.getElementById('formContainer'); | |
| const opt = { | |
| margin: 10, | |
| filename: 'Strategic_Vision.pdf', | |
| image: { type: 'jpeg', quality: 0.98 }, | |
| html2canvas: { scale: 2 }, | |
| jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } | |
| }; | |
| html2canvas(element, { | |
| scale: 2, | |
| logging: true, | |
| useCORS: true | |
| }).then(canvas => { | |
| const imgData = canvas.toDataURL('image/jpeg'); | |
| const pdf = new jsPDF('p', 'mm', 'a4'); | |
| const imgProps = pdf.getImageProperties(imgData); | |
| const pdfWidth = pdf.internal.pageSize.getWidth() - 20; | |
| const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; | |
| pdf.addImage(imgData, 'JPEG', 10, 10, pdfWidth, pdfHeight); | |
| pdf.save('Strategic_Vision.pdf'); | |
| }); | |
| } | |
| function saveAsJson() { | |
| const formData = {}; | |
| const inputs = document.querySelectorAll('input, textarea'); | |
| inputs.forEach(input => { | |
| if (input.name) { | |
| formData[input.name] = input.value; | |
| } | |
| }); | |
| const dataStr = JSON.stringify(formData, null, 2); | |
| const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr); | |
| const exportFileDefaultName = 'Strategic_Vision.json'; | |
| const linkElement = document.createElement('a'); | |
| linkElement.setAttribute('href', dataUri); | |
| linkElement.setAttribute('download', exportFileDefaultName); | |
| linkElement.click(); | |
| } | |
| // Event listeners for buttons | |
| document.getElementById('savePdf').addEventListener('click', saveAsPdf); | |
| document.getElementById('saveJson').addEventListener('click', saveAsJson); | |
| document.getElementById('savePdfBottom').addEventListener('click', saveAsPdf); | |
| document.getElementById('saveJsonBottom').addEventListener('click', saveAsJson); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JayStormX8/v3-opsv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |