Spaces:
Running
Running
File size: 35,651 Bytes
aff294d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 |
<!DOCTYPE html>
<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> |