Hugging Face's logo

Spaces:
JayStormX8
/
v3-opsv
Running

App Files Community
JayStormX8 commited on
Commit
aff294d
·
verified ·
1 Parent(s): d8e9ffa

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +464 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: V3 Opsv
3
- emoji: ⚡
4
- colorFrom: pink
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: v3-opsv
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,464 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>One Page Strategic Vision</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
10
+ <style>
11
+ .section-card {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .section-card:hover {
15
+ transform: translateY(-2px);
16
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
17
+ }
18
+ textarea {
19
+ min-height: 80px;
20
+ }
21
+ .owner-input {
22
+ position: relative;
23
+ }
24
+ .owner-input:after {
25
+ content: "Owner";
26
+ position: absolute;
27
+ right: 10px;
28
+ top: 50%;
29
+ transform: translateY(-50%);
30
+ color: #6b7280;
31
+ font-size: 0.75rem;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50">
36
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
37
+ <div class="text-center mb-8">
38
+ <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2">One Page Strategic Vision</h1>
39
+ <p class="text-gray-600">Define your company's strategic direction in one comprehensive document</p>
40
+
41
+ <div class="flex justify-center space-x-4 mt-6">
42
+ <button id="savePdf" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center">
43
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
44
+ <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" />
45
+ </svg>
46
+ Save to PDF
47
+ </button>
48
+ <button id="saveJson" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md flex items-center">
49
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
50
+ <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" />
51
+ </svg>
52
+ Download as JSON
53
+ </button>
54
+ </div>
55
+ </div>
56
+
57
+ <div id="formContainer" class="space-y-6">
58
+ <!-- 1. Core Purpose & Values -->
59
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
60
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">1. Core Purpose & Values</h2>
61
+ <div class="grid md:grid-cols-2 gap-6">
62
+ <div>
63
+ <label class="block text-sm font-medium text-gray-700 mb-1">Core Purpose</label>
64
+ <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>
65
+ </div>
66
+ <div>
67
+ <label class="block text-sm font-medium text-gray-700 mb-1">Core Values</label>
68
+ <div class="space-y-3">
69
+ <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)">
70
+ <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)">
71
+ <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)">
72
+ </div>
73
+ </div>
74
+ </div>
75
+ <div class="mt-4">
76
+ <label class="block text-sm font-medium text-gray-700 mb-1">Overall Owner</label>
77
+ <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">
78
+ </div>
79
+ </div>
80
+
81
+ <!-- 2. 2024 Revenue Goal -->
82
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
83
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">2. 2024 Revenue Goal</h2>
84
+ <div class="grid md:grid-cols-3 gap-4">
85
+ <div>
86
+ <label class="block text-sm font-medium text-gray-700 mb-1">Monthly Revenue ($)</label>
87
+ <div class="flex">
88
+ <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">
89
+ <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">
90
+ </div>
91
+ </div>
92
+ <div>
93
+ <label class="block text-sm font-medium text-gray-700 mb-1">Quarterly Revenue ($)</label>
94
+ <div class="flex">
95
+ <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">
96
+ <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">
97
+ </div>
98
+ </div>
99
+ <div>
100
+ <label class="block text-sm font-medium text-gray-700 mb-1">Yearly Revenue ($)</label>
101
+ <div class="flex">
102
+ <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">
103
+ <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">
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- 3. 2024 Profit Goal -->
110
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
111
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">3. 2024 Profit Goal</h2>
112
+ <div class="grid md:grid-cols-3 gap-4">
113
+ <div>
114
+ <label class="block text-sm font-medium text-gray-700 mb-1">Monthly Profit ($)</label>
115
+ <div class="flex">
116
+ <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">
117
+ <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">
118
+ </div>
119
+ </div>
120
+ <div>
121
+ <label class="block text-sm font-medium text-gray-700 mb-1">Quarterly Profit ($)</label>
122
+ <div class="flex">
123
+ <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">
124
+ <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">
125
+ </div>
126
+ </div>
127
+ <div>
128
+ <label class="block text-sm font-medium text-gray-700 mb-1">Yearly Profit ($)</label>
129
+ <div class="flex">
130
+ <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">
131
+ <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">
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- 4. 10-Year Sky's the Limit Goal -->
138
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
139
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">4. 10-Year Sky's the Limit Goal</h2>
140
+ <div class="space-y-4">
141
+ <div>
142
+ <label class="block text-sm font-medium text-gray-700 mb-1">Vision Statement</label>
143
+ <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">
144
+ </div>
145
+ <div>
146
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
147
+ <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>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- 5. 3-Year Goal -->
153
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
154
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">5. 3-Year Goal</h2>
155
+ <div class="space-y-4">
156
+ <div>
157
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal Summary</label>
158
+ <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">
159
+ </div>
160
+ <div>
161
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
162
+ <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>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- 6. 1-Year Goals -->
168
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
169
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">6. 1-Year Goals</h2>
170
+ <div class="space-y-4">
171
+ <div>
172
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal 1</label>
173
+ <div class="flex">
174
+ <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">
175
+ <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">
176
+ </div>
177
+ </div>
178
+ <div>
179
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal 2</label>
180
+ <div class="flex">
181
+ <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%">
182
+ <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">
183
+ </div>
184
+ </div>
185
+ <div>
186
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal 3</label>
187
+ <div class="flex">
188
+ <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">
189
+ <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">
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- 7. 90-Day Goals -->
196
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
197
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">7. 90-Day Goals</h2>
198
+ <div class="space-y-4">
199
+ <div>
200
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal 1</label>
201
+ <div class="flex">
202
+ <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">
203
+ <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">
204
+ </div>
205
+ </div>
206
+ <div>
207
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal 2</label>
208
+ <div class="flex">
209
+ <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">
210
+ <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">
211
+ </div>
212
+ </div>
213
+ <div>
214
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal 3</label>
215
+ <div class="flex">
216
+ <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">
217
+ <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">
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- 8. Quarterly Planning -->
224
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
225
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">8. Quarterly Planning</h2>
226
+ <div class="grid md:grid-cols-2 gap-6">
227
+ <div class="space-y-4">
228
+ <div>
229
+ <label class="block text-sm font-medium text-gray-700 mb-1">Quarterly Theme</label>
230
+ <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'">
231
+ </div>
232
+ <div>
233
+ <label class="block text-sm font-medium text-gray-700 mb-1">Quarterly Team Reward</label>
234
+ <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'">
235
+ </div>
236
+ </div>
237
+ <div>
238
+ <label class="block text-sm font-medium text-gray-700 mb-1">Critical #</label>
239
+ <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'">
240
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
241
+ <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>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- 9. Monthly Goals -->
247
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
248
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">9. Monthly Goals</h2>
249
+ <div class="space-y-4">
250
+ <div>
251
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal 1</label>
252
+ <div class="flex">
253
+ <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">
254
+ <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">
255
+ </div>
256
+ </div>
257
+ <div>
258
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal 2</label>
259
+ <div class="flex">
260
+ <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%">
261
+ <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">
262
+ </div>
263
+ </div>
264
+ <div>
265
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal 3</label>
266
+ <div class="flex">
267
+ <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">
268
+ <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">
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- 10. Branding & Differentiation -->
275
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
276
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">10. Branding & Differentiation</h2>
277
+ <div class="grid md:grid-cols-2 gap-6">
278
+ <div>
279
+ <label class="block text-sm font-medium text-gray-700 mb-1">Differentiating Activities</label>
280
+ <div class="space-y-3">
281
+ <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')">
282
+ <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')">
283
+ <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')">
284
+ </div>
285
+ </div>
286
+ <div>
287
+ <label class="block text-sm font-medium text-gray-700 mb-1">X-Factor</label>
288
+ <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>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- 11. Strategic Context -->
294
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
295
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">11. Strategic Context</h2>
296
+ <div class="grid md:grid-cols-3 gap-4">
297
+ <div>
298
+ <label class="block text-sm font-medium text-gray-700 mb-1">Trends</label>
299
+ <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>
300
+ </div>
301
+ <div>
302
+ <label class="block text-sm font-medium text-gray-700 mb-1">Strengths</label>
303
+ <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>
304
+ </div>
305
+ <div>
306
+ <label class="block text-sm font-medium text-gray-700 mb-1">Weaknesses</label>
307
+ <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>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- 12. Ideal Client Profile -->
313
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
314
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">12. Ideal Client Profile</h2>
315
+ <div class="grid md:grid-cols-2 gap-6">
316
+ <div>
317
+ <label class="block text-sm font-medium text-gray-700 mb-1">Who & Where</label>
318
+ <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>
319
+ </div>
320
+ <div>
321
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description of Ideal Client</label>
322
+ <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>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- 13. Problem We Solve & Product/Service -->
328
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
329
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">13. Problem We Solve & Product/Service</h2>
330
+ <div class="grid md:grid-cols-2 gap-6">
331
+ <div>
332
+ <label class="block text-sm font-medium text-gray-700 mb-1">Problem Description</label>
333
+ <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>
334
+ </div>
335
+ <div>
336
+ <label class="block text-sm font-medium text-gray-700 mb-1">Offer / Service Description</label>
337
+ <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>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- 14. Brand Promise -->
343
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
344
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">14. Brand Promise</h2>
345
+ <div class="grid md:grid-cols-2 gap-6">
346
+ <div>
347
+ <label class="block text-sm font-medium text-gray-700 mb-1">What Clients Get</label>
348
+ <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>
349
+ </div>
350
+ <div>
351
+ <label class="block text-sm font-medium text-gray-700 mb-1">Brand Promise KPIs</label>
352
+ <div class="space-y-3">
353
+ <div class="flex">
354
+ <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')">
355
+ <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">
356
+ </div>
357
+ <div class="flex">
358
+ <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')">
359
+ <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">
360
+ </div>
361
+ <div class="flex">
362
+ <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')">
363
+ <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">
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- 15. One-Phrase Strategy -->
371
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
372
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">15. One-Phrase Strategy</h2>
373
+ <div>
374
+ <label class="block text-sm font-medium text-gray-700 mb-1">Strategy Statement</label>
375
+ <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'">
376
+ </div>
377
+ </div>
378
+
379
+ <!-- 16. Economic Engine -->
380
+ <div class="section-card bg-white p-6 rounded-lg shadow-md">
381
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4 border-b pb-2">16. Economic Engine</h2>
382
+ <div>
383
+ <label class="block text-sm font-medium text-gray-700 mb-1">Profit per X</label>
384
+ <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'">
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="flex justify-center space-x-4 mt-10 mb-10">
390
+ <button id="savePdfBottom" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center">
391
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
392
+ <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" />
393
+ </svg>
394
+ Save to PDF
395
+ </button>
396
+ <button id="saveJsonBottom" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md flex items-center">
397
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
398
+ <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" />
399
+ </svg>
400
+ Download as JSON
401
+ </button>
402
+ </div>
403
+ </div>
404
+
405
+ <script>
406
+ document.addEventListener('DOMContentLoaded', function() {
407
+ // PDF Generation
408
+ const { jsPDF } = window.jspdf;
409
+
410
+ function saveAsPdf() {
411
+ const element = document.getElementById('formContainer');
412
+ const opt = {
413
+ margin: 10,
414
+ filename: 'Strategic_Vision.pdf',
415
+ image: { type: 'jpeg', quality: 0.98 },
416
+ html2canvas: { scale: 2 },
417
+ jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
418
+ };
419
+
420
+ html2canvas(element, {
421
+ scale: 2,
422
+ logging: true,
423
+ useCORS: true
424
+ }).then(canvas => {
425
+ const imgData = canvas.toDataURL('image/jpeg');
426
+ const pdf = new jsPDF('p', 'mm', 'a4');
427
+ const imgProps = pdf.getImageProperties(imgData);
428
+ const pdfWidth = pdf.internal.pageSize.getWidth() - 20;
429
+ const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
430
+
431
+ pdf.addImage(imgData, 'JPEG', 10, 10, pdfWidth, pdfHeight);
432
+ pdf.save('Strategic_Vision.pdf');
433
+ });
434
+ }
435
+
436
+ function saveAsJson() {
437
+ const formData = {};
438
+ const inputs = document.querySelectorAll('input, textarea');
439
+
440
+ inputs.forEach(input => {
441
+ if (input.name) {
442
+ formData[input.name] = input.value;
443
+ }
444
+ });
445
+
446
+ const dataStr = JSON.stringify(formData, null, 2);
447
+ const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
448
+
449
+ const exportFileDefaultName = 'Strategic_Vision.json';
450
+ const linkElement = document.createElement('a');
451
+ linkElement.setAttribute('href', dataUri);
452
+ linkElement.setAttribute('download', exportFileDefaultName);
453
+ linkElement.click();
454
+ }
455
+
456
+ // Event listeners for buttons
457
+ document.getElementById('savePdf').addEventListener('click', saveAsPdf);
458
+ document.getElementById('saveJson').addEventListener('click', saveAsJson);
459
+ document.getElementById('savePdfBottom').addEventListener('click', saveAsPdf);
460
+ document.getElementById('saveJsonBottom').addEventListener('click', saveAsJson);
461
+ });
462
+ </script>
463
+ <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>
464
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a professional, responsive HTML form tool titled "One Page Strategic Vision" designed for business founders to input their strategic company plan. The tool should be structured into clearly marked sections, each with labeled input fields (text inputs, textareas, and numbers). Style it for visual clarity using modern CSS (Tailwind preferred) or Bootstrap as fallback. Each section should be grouped in cards or dividers with spacing and headers. Include the following sections and fields, ensuring every **Goal and KPI field includes an Owner field**: --- 1. **Core Purpose & Values** - Core Purpose (textarea) - Core Values: - Value 1 (text) - Value 2 (text) - Value 3 (text) - Overall Owner (text) 2. **2024 Revenue Goal** - Monthly Revenue (number) + Owner (text) - Quarterly Revenue (number) + Owner (text) - Yearly Revenue (number) + Owner (text) 3. **2024 Profit Goal** - Monthly Profit (number) + Owner (text) - Quarterly Profit (number) + Owner (text) - Yearly Profit (number) + Owner (text) 4. **10-Year Sky’s the Limit Goal** - Vision Statement (text) - Description (textarea) 5. **3-Year Goal** - Goal Summary (text) - Description (textarea) 6. **1-Year Goals** - Goal 1 (text) + Owner (text) - Goal 2 (text) + Owner (text) - Goal 3 (text) + Owner (text) 7. **90-Day Goals** - Goal 1 (text) + Owner (text) - Goal 2 (text) + Owner (text) - Goal 3 (text) + Owner (text) 8. **Quarterly Planning** - Quarterly Theme (text) - Quarterly Team Reward (text) - Critical # (text) + Description (textarea) 9. **Monthly Goals** - Goal 1 (text) + Owner (text) - Goal 2 (text) + Owner (text) - Goal 3 (text) + Owner (text) 10. **Branding & Differentiation** - Differentiating Activities: - Activity 1 (text) - Activity 2 (text) - Activity 3 (text) - X-Factor (textarea) 11. **Strategic Context** - Trends (textarea) - Strengths (textarea) - Weaknesses (textarea) 12. **Ideal Client Profile** - Who & Where (textarea) - Description of Ideal Client (textarea) 13. **Problem We Solve & Product/Service** - Problem Description (textarea) - Offer / Service Description (textarea) 14. **Brand Promise** - What Clients Get (textarea) - Brand Promise KPIs: - KPI 1 (text) + Owner (text) - KPI 2 (text) + Owner (text) - KPI 3 (text) + Owner (text) 15. **One-Phrase Strategy** - Strategy Statement (text) 16. **Economic Engine** - Profit per X (text) --- Additional Requirements: - Include “Save to PDF” and “Download as JSON” buttons at the top and bottom. - Ensure all inputs are labeled, with placeholder examples (e.g., “$100,000 / month”, “John Smith”, “Become #1 in market”). - Use responsive layout with grid or flexbox, mobile-friendly design. - Code output must be a **complete standalone HTML file** with embedded Tailwind CSS (CDN) and JavaScript. Do not include explanations.