Hugging Face's logo

Spaces:
Boody123
/
my-space
Running

App Files Community
Boody123 commited on
Commit
e102615
·
verified ·
1 Parent(s): 3d57d39

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +669 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Space
3
- emoji: 🔥
4
  colorFrom: yellow
5
- colorTo: green
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: my-space
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,669 @@
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>Excel Mastery - The Future of Spreadsheets</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-10px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+ .floating {
16
+ animation: float 6s ease-in-out infinite;
17
+ }
18
+ .slide {
19
+ display: none;
20
+ opacity: 0;
21
+ transition: opacity 0.5s ease;
22
+ }
23
+ .slide.active {
24
+ display: block;
25
+ opacity: 1;
26
+ }
27
+ .cell-highlight {
28
+ background-color: rgba(100, 255, 100, 0.3);
29
+ transition: all 0.3s ease;
30
+ }
31
+ .robot-eye {
32
+ box-shadow: 0 0 15px 5px rgba(0, 150, 255, 0.7);
33
+ }
34
+ .progress-bar {
35
+ transition: width 0.5s ease;
36
+ }
37
+ .excel-icon {
38
+ text-shadow: 0 0 10px rgba(0, 150, 255, 0.7);
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gray-900 text-gray-100 font-sans overflow-x-hidden">
43
+ <!-- Robot Assistant -->
44
+ <div class="fixed bottom-8 right-8 z-50 floating">
45
+ <div class="relative">
46
+ <div class="w-24 h-32 bg-blue-600 rounded-full relative">
47
+ <!-- Robot Head -->
48
+ <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 w-16 h-16 bg-blue-500 rounded-full flex justify-center items-center">
49
+ <!-- Eyes -->
50
+ <div class="flex space-x-2">
51
+ <div class="robot-eye w-4 h-4 bg-white rounded-full"></div>
52
+ <div class="robot-eye w-4 h-4 bg-white rounded-full"></div>
53
+ </div>
54
+ </div>
55
+ <!-- Body -->
56
+ <div class="pt-8 px-2">
57
+ <div class="text-center text-xs font-bold">EXCEL-BOT 3000</div>
58
+ <div class="text-center text-xxs mt-1">Your spreadsheet assistant</div>
59
+ </div>
60
+ </div>
61
+ <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-blue-700 rounded-full"></div>
62
+ </div>
63
+ </div>
64
+
65
+ <!-- Presentation Container -->
66
+ <div class="container mx-auto px-4 py-12 max-w-6xl relative">
67
+ <!-- Header -->
68
+ <header class="text-center mb-12">
69
+ <div class="flex justify-center items-center mb-4">
70
+ <i class="fas fa-file-excel text-6xl text-green-500 excel-icon mr-4"></i>
71
+ <h1 class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-green-400">
72
+ Excel Mastery
73
+ </h1>
74
+ </div>
75
+ <p class="text-xl text-blue-300">The complete guide to spreadsheet domination</p>
76
+ </header>
77
+
78
+ <!-- Navigation -->
79
+ <div class="flex justify-between items-center mb-8 bg-gray-800 rounded-lg p-2">
80
+ <button id="prev-btn" class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-500 transition">
81
+ <i class="fas fa-arrow-left mr-2"></i> Previous
82
+ </button>
83
+ <div class="flex-1 mx-4">
84
+ <div class="w-full bg-gray-700 rounded-full h-4">
85
+ <div id="progress-bar" class="progress-bar h-4 bg-gradient-to-r from-blue-500 to-green-500 rounded-full" style="width: 10%"></div>
86
+ </div>
87
+ </div>
88
+ <button id="next-btn" class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-500 transition">
89
+ Next <i class="fas fa-arrow-right ml-2"></i>
90
+ </button>
91
+ </div>
92
+
93
+ <!-- Slides -->
94
+ <div class="slides-container bg-gray-800 rounded-xl p-8 min-h-96 shadow-xl border border-gray-700">
95
+ <!-- Slide 1 - Introduction -->
96
+ <div class="slide active" data-slide="1">
97
+ <div class="flex flex-col md:flex-row items-center">
98
+ <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8">
99
+ <h2 class="text-3xl font-bold mb-4 text-blue-400">Welcome to Excel Mastery</h2>
100
+ <p class="mb-4 text-lg">Microsoft Excel is the most powerful spreadsheet software used by over 750 million people worldwide.</p>
101
+ <p class="mb-6">This presentation will transform you from beginner to spreadsheet expert with the help of our AI assistant.</p>
102
+ <div class="bg-gray-700 p-4 rounded-lg border-l-4 border-blue-500">
103
+ <p class="font-bold text-blue-300">Did you know?</p>
104
+ <p>Excel was first released in 1985 and has since become the industry standard for data analysis.</p>
105
+ </div>
106
+ </div>
107
+ <div class="md:w-1/2">
108
+ <div class="bg-gray-900 p-6 rounded-lg border border-gray-700">
109
+ <div class="grid grid-cols-5 gap-1 mb-2">
110
+ <div class="bg-blue-900 p-2 text-center font-bold text-xs">A</div>
111
+ <div class="bg-blue-900 p-2 text-center font-bold text-xs">B</div>
112
+ <div class="bg-blue-900 p-2 text-center font-bold text-xs">C</div>
113
+ <div class="bg-blue-900 p-2 text-center font-bold text-xs">D</div>
114
+ <div class="bg-blue-900 p-2 text-center font-bold text-xs">E</div>
115
+ </div>
116
+ <div class="grid grid-cols-5 gap-1">
117
+ <div class="bg-gray-700 p-2 text-center border border-gray-600">1</div>
118
+ <div class="bg-gray-700 p-2 text-center border border-gray-600">Data</div>
119
+ <div class="bg-gray-700 p-2 text-center border border-gray-600">Analysis</div>
120
+ <div class="bg-gray-700 p-2 text-center border border-gray-600">Made</div>
121
+ <div class="bg-gray-700 p-2 text-center border border-gray-600">Easy</div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Slide 2 - When to Use Excel -->
129
+ <div class="slide" data-slide="2">
130
+ <h2 class="text-3xl font-bold mb-6 text-blue-400">When to Use Excel</h2>
131
+ <div class="grid md:grid-cols-2 gap-6">
132
+ <div class="bg-gray-700 p-6 rounded-lg border-l-4 border-green-500">
133
+ <h3 class="text-xl font-bold mb-3 text-green-300"><i class="fas fa-check-circle mr-2"></i> Perfect For</h3>
134
+ <ul class="space-y-2">
135
+ <li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Financial calculations and budgeting</li>
136
+ <li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Data organization and sorting</li>
137
+ <li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Creating charts and visualizations</li>
138
+ <li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Simple databases and lists</li>
139
+ <li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Quick calculations and formulas</li>
140
+ </ul>
141
+ </div>
142
+ <div class="bg-gray-700 p-6 rounded-lg border-l-4 border-red-500">
143
+ <h3 class="text-xl font-bold mb-3 text-red-300"><i class="fas fa-times-circle mr-2"></i> Not Ideal For</h3>
144
+ <ul class="space-y-2">
145
+ <li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Large-scale database management</li>
146
+ <li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Complex relational data</li>
147
+ <li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Collaborative real-time editing</li>
148
+ <li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> High-performance computing</li>
149
+ <li class="flex items-start"><i class="fas fa-caret-right mt-1 mr-2 text-blue-300"></i> Advanced statistical analysis</li>
150
+ </ul>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Slide 3 - Excel Interface -->
156
+ <div class="slide" data-slide="3">
157
+ <h2 class="text-3xl font-bold mb-6 text-blue-400">Excel Interface Breakdown</h2>
158
+ <div class="bg-gray-900 p-6 rounded-lg border border-gray-700 mb-6">
159
+ <div class="flex flex-wrap gap-4 justify-center">
160
+ <div class="interface-item bg-blue-900 px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-800 transition" data-highlight="ribbon">
161
+ <i class="fas fa-bars mr-2"></i> Ribbon
162
+ </div>
163
+ <div class="interface-item bg-blue-900 px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-800 transition" data-highlight="formula-bar">
164
+ <i class="fas fa-square-root-alt mr-2"></i> Formula Bar
165
+ </div>
166
+ <div class="interface-item bg-blue-900 px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-800 transition" data-highlight="worksheet">
167
+ <i class="fas fa-table mr-2"></i> Worksheet
168
+ </div>
169
+ <div class="interface-item bg-blue-900 px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-800 transition" data-highlight="status-bar">
170
+ <i class="fas fa-info-circle mr-2"></i> Status Bar
171
+ </div>
172
+ <div class="interface-item bg-blue-900 px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-800 transition" data-highlight="quick-access">
173
+ <i class="fas fa-bolt mr-2"></i> Quick Access
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <div class="bg-gray-800 p-6 rounded-lg border border-gray-700 relative min-h-64">
178
+ <div id="excel-interface-demo" class="relative">
179
+ <!-- Ribbon -->
180
+ <div id="ribbon" class="bg-blue-800 text-white p-2 mb-2 rounded-t-lg flex justify-between items-center">
181
+ <div class="flex space-x-4">
182
+ <span>Home</span>
183
+ <span>Insert</span>
184
+ <span>Page Layout</span>
185
+ <span>Formulas</span>
186
+ <span>Data</span>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Formula Bar -->
191
+ <div id="formula-bar" class="bg-gray-700 p-1 mb-2 flex items-center">
192
+ <span class="bg-gray-600 px-2 py-1 mr-2 rounded">A1</span>
193
+ <div class="flex-1 bg-white text-black p-1 rounded">=SUM(B2:B5)</div>
194
+ </div>
195
+
196
+ <!-- Worksheet -->
197
+ <div id="worksheet" class="grid grid-cols-8 gap-px bg-gray-600">
198
+ <!-- Column headers -->
199
+ <div class="bg-blue-900 p-1 text-center font-bold text-xs">A</div>
200
+ <div class="bg-blue-900 p-1 text-center font-bold text-xs">B</div>
201
+ <div class="bg-blue-900 p-1 text-center font-bold text-xs">C</div>
202
+ <div class="bg-blue-900 p-1 text-center font-bold text-xs">D</div>
203
+ <div class="bg-blue-900 p-1 text-center font-bold text-xs">E</div>
204
+ <div class="bg-blue-900 p-1 text-center font-bold text-xs">F</div>
205
+ <div class="bg-blue-900 p-1 text-center font-bold text-xs">G</div>
206
+ <div class="bg-blue-900 p-1 text-center font-bold text-xs">H</div>
207
+
208
+ <!-- Row 1 -->
209
+ <div class="bg-gray-700 p-1 text-center border border-gray-600">1</div>
210
+ <div class="bg-gray-700 p-1 border border-gray-600">Sales</div>
211
+ <div class="bg-gray-700 p-1 border border-gray-600">Q1</div>
212
+ <div class="bg-gray-700 p-1 border border-gray-600">Q2</div>
213
+ <div class="bg-gray-700 p-1 border border-gray-600">Q3</div>
214
+ <div class="bg-gray-700 p-1 border border-gray-600">Q4</div>
215
+ <div class="bg-gray-700 p-1 border border-gray-600">Total</div>
216
+ <div class="bg-gray-700 p-1 border border-gray-600">Avg</div>
217
+
218
+ <!-- Row 2 -->
219
+ <div class="bg-gray-700 p-1 text-center border border-gray-600">2</div>
220
+ <div class="bg-gray-700 p-1 border border-gray-600">North</div>
221
+ <div class="bg-gray-700 p-1 border border-gray-600">$12,345</div>
222
+ <div class="bg-gray-700 p-1 border border-gray-600">$15,678</div>
223
+ <div class="bg-gray-700 p-1 border border-gray-600">$18,901</div>
224
+ <div class="bg-gray-700 p-1 border border-gray-600">$21,234</div>
225
+ <div class="bg-gray-700 p-1 border border-gray-600 font-bold">=SUM(B2:E2)</div>
226
+ <div class="bg-gray-700 p-1 border border-gray-600">=AVERAGE(B2:E2)</div>
227
+ </div>
228
+
229
+ <!-- Status Bar -->
230
+ <div id="status-bar" class="bg-gray-700 p-1 mt-2 rounded-b-lg flex justify-between text-xs">
231
+ <div>Ready</div>
232
+ <div class="flex space-x-4">
233
+ <span>Sum: $68,158.00</span>
234
+ <span>Average: $17,039.50</span>
235
+ <span>Count: 4</span>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Slide 4 - Basic Navigation -->
243
+ <div class="slide" data-slide="4">
244
+ <h2 class="text-3xl font-bold mb-6 text-blue-400">Basic Navigation & Selection</h2>
245
+ <div class="grid md:grid-cols-2 gap-6">
246
+ <div>
247
+ <h3 class="text-xl font-bold mb-4 text-green-300">Selection Techniques</h3>
248
+ <div class="space-y-4">
249
+ <div class="bg-gray-700 p-4 rounded-lg">
250
+ <div class="font-bold text-blue-300 mb-2">Single Cell</div>
251
+ <p>Click on any cell to select it</p>
252
+ <div class="mt-2 bg-gray-800 p-2 rounded text-xs font-mono">A1</div>
253
+ </div>
254
+ <div class="bg-gray-700 p-4 rounded-lg">
255
+ <div class="font-bold text-blue-300 mb-2">Range of Cells</div>
256
+ <p>Click and drag to select multiple cells</p>
257
+ <div class="mt-2 bg-gray-800 p-2 rounded text-xs font-mono">A1:D10</div>
258
+ </div>
259
+ <div class="bg-gray-700 p-4 rounded-lg">
260
+ <div class="font-bold text-blue-300 mb-2">Entire Row/Column</div>
261
+ <p>Click on row number or column letter</p>
262
+ <div class="mt-2 bg-gray-800 p-2 rounded text-xs font-mono">1:1 (Row 1)<br>A:A (Column A)</div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <div>
267
+ <h3 class="text-xl font-bold mb-4 text-green-300">Keyboard Shortcuts</h3>
268
+ <div class="space-y-4">
269
+ <div class="bg-gray-700 p-4 rounded-lg">
270
+ <div class="font-bold text-blue-300 mb-2">Navigation</div>
271
+ <div class="grid grid-cols-2 gap-2 text-sm">
272
+ <div><span class="font-bold">Arrow keys:</span> Move cell</div>
273
+ <div><span class="font-bold">Ctrl+Arrow:</span> Jump to edge</div>
274
+ <div><span class="font-bold">Home:</span> Row start</div>
275
+ <div><span class="font-bold">Ctrl+Home:</span> A1</div>
276
+ </div>
277
+ </div>
278
+ <div class="bg-gray-700 p-4 rounded-lg">
279
+ <div class="font-bold text-blue-300 mb-2">Selection</div>
280
+ <div class="grid grid-cols-2 gap-2 text-sm">
281
+ <div><span class="font-bold">Shift+Arrow:</span> Extend selection</div>
282
+ <div><span class="font-bold">Ctrl+Shift+Arrow:</span> Select to edge</div>
283
+ <div><span class="font-bold">Ctrl+A:</span> Select all</div>
284
+ <div><span class="font-bold">Ctrl+Space:</span> Select column</div>
285
+ </div>
286
+ </div>
287
+ <div class="bg-gray-700 p-4 rounded-lg">
288
+ <div class="font-bold text-blue-300 mb-2">Special</div>
289
+ <div class="grid grid-cols-2 gap-2 text-sm">
290
+ <div><span class="font-bold">F2:</span> Edit cell</div>
291
+ <div><span class="font-bold">Ctrl+Enter:</span> Fill selection</div>
292
+ <div><span class="font-bold">Alt+Enter:</span> New line in cell</div>
293
+ <div><span class="font-bold">Ctrl+D:</span> Fill down</div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Slide 5 - Basic Formulas -->
302
+ <div class="slide" data-slide="5">
303
+ <h2 class="text-3xl font-bold mb-6 text-blue-400">Essential Excel Formulas</h2>
304
+ <div class="grid md:grid-cols-3 gap-4 mb-8">
305
+ <div class="bg-gray-700 p-4 rounded-lg border-t-4 border-blue-500">
306
+ <div class="font-bold text-lg mb-2">SUM</div>
307
+ <div class="text-sm mb-3">Adds all numbers in a range</div>
308
+ <div class="bg-gray-800 p-2 rounded font-mono text-sm">=SUM(A1:A10)</div>
309
+ </div>
310
+ <div class="bg-gray-700 p-4 rounded-lg border-t-4 border-green-500">
311
+ <div class="font-bold text-lg mb-2">AVERAGE</div>
312
+ <div class="text-sm mb-3">Calculates the average</div>
313
+ <div class="bg-gray-800 p-2 rounded font-mono text-sm">=AVERAGE(B2:B20)</div>
314
+ </div>
315
+ <div class="bg-gray-700 p-4 rounded-lg border-t-4 border-yellow-500">
316
+ <div class="font-bold text-lg mb-2">IF</div>
317
+ <div class="text-sm mb-3">Conditional logic</div>
318
+ <div class="bg-gray-800 p-2 rounded font-mono text-sm">=IF(A1>100,"High","Low")</div>
319
+ </div>
320
+ <div class="bg-gray-700 p-4 rounded-lg border-t-4 border-purple-500">
321
+ <div class="font-bold text-lg mb-2">VLOOKUP</div>
322
+ <div class="text-sm mb-3">Vertical lookup</div>
323
+ <div class="bg-gray-800 p-2 rounded font-mono text-sm">=VLOOKUP(A1,B:C,2,FALSE)</div>
324
+ </div>
325
+ <div class="bg-gray-700 p-4 rounded-lg border-t-4 border-red-500">
326
+ <div class="font-bold text-lg mb-2">COUNTIF</div>
327
+ <div class="text-sm mb-3">Conditional counting</div>
328
+ <div class="bg-gray-800 p-2 rounded font-mono text-sm">=COUNTIF(A:A,">100")</div>
329
+ </div>
330
+ <div class="bg-gray-700 p-4 rounded-lg border-t-4 border-pink-500">
331
+ <div class="font-bold text-lg mb-2">CONCATENATE</div>
332
+ <div class="text-sm mb-3">Combine text</div>
333
+ <div class="bg-gray-800 p-2 rounded font-mono text-sm">=CONCAT(A1," ",B1)</div>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="bg-gray-900 p-6 rounded-lg border border-gray-700">
338
+ <h3 class="text-xl font-bold mb-4 text-green-300">Formula Demo</h3>
339
+ <div class="grid grid-cols-5 gap-1 mb-4">
340
+ <div class="bg-blue-900 p-2 text-center font-bold text-xs">A</div>
341
+ <div class="bg-blue-900 p-2 text-center font-bold text-xs">B</div>
342
+ <div class="bg-blue-900 p-2 text-center font-bold text-xs">C</div>
343
+ <div class="bg-blue-900 p-2 text-center font-bold text-xs">D</div>
344
+ <div class="bg-blue-900 p-2 text-center font-bold text-xs">E</div>
345
+ </div>
346
+ <div class="grid grid-cols-5 gap-1">
347
+ <div class="bg-gray-700 p-2 text-center border border-gray-600">1</div>
348
+ <div class="bg-gray-700 p-2 border border-gray-600">Item</div>
349
+ <div class="bg-gray-700 p-2 border border-gray-600">Price</div>
350
+ <div class="bg-gray-700 p-2 border border-gray-600">Qty</div>
351
+ <div class="bg-gray-700 p-2 border border-gray-600">Total</div>
352
+
353
+ <div class="bg-gray-700 p-2 text-center border border-gray-600">2</div>
354
+ <div class="bg-gray-700 p-2 border border-gray-600">Widget</div>
355
+ <div class="bg-gray-700 p-2 border border-gray-600">$19.99</div>
356
+ <div class="bg-gray-700 p-2 border border-gray-600">5</div>
357
+ <div class="bg-gray-700 p-2 border border-gray-600 font-bold">=B2*C2</div>
358
+
359
+ <div class="bg-gray-700 p-2 text-center border border-gray-600">3</div>
360
+ <div class="bg-gray-700 p-2 border border-gray-600">Gadget</div>
361
+ <div class="bg-gray-700 p-2 border border-gray-600">$29.99</div>
362
+ <div class="bg-gray-700 p-2 border border-gray-600">3</div>
363
+ <div class="bg-gray-700 p-2 border border-gray-600 font-bold">=B3*C3</div>
364
+
365
+ <div class="bg-gray-700 p-2 text-center border border-gray-600">4</div>
366
+ <div class="bg-gray-700 p-2 border border-gray-600">Total</div>
367
+ <div class="bg-gray-700 p-2 border border-gray-600"></div>
368
+ <div class="bg-gray-700 p-2 border border-gray-600">=SUM(C2:C3)</div>
369
+ <div class="bg-gray-700 p-2 border border-gray-600 font-bold">=SUM(D2:D3)</div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <!-- Slide 6 - Data Visualization -->
375
+ <div class="slide" data-slide="6">
376
+ <h2 class="text-3xl font-bold mb-6 text-blue-400">Data Visualization</h2>
377
+ <div class="grid md:grid-cols-2 gap-6 mb-8">
378
+ <div>
379
+ <h3 class="text-xl font-bold mb-4 text-green-300">Chart Types</h3>
380
+ <div class="space-y-4">
381
+ <div class="bg-gray-700 p-4 rounded-lg">
382
+ <div class="font-bold text-blue-300 mb-2">Column/Bar Charts</div>
383
+ <p>Compare values across categories</p>
384
+ </div>
385
+ <div class="bg-gray-700 p-4 rounded-lg">
386
+ <div class="font-bold text-blue-300 mb-2">Line Charts</div>
387
+ <p>Show trends over time</p>
388
+ </div>
389
+ <div class="bg-gray-700 p-4 rounded-lg">
390
+ <div class="font-bold text-blue-300 mb-2">Pie Charts</div>
391
+ <p>Display parts of a whole</p>
392
+ </div>
393
+ <div class="bg-gray-700 p-4 rounded-lg">
394
+ <div class="font-bold text-blue-300 mb-2">Scatter Plots</div>
395
+ <p>Show relationships between variables</p>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ <div>
400
+ <h3 class="text-xl font-bold mb-4 text-green-300">Conditional Formatting</h3>
401
+ <div class="space-y-4">
402
+ <div class="bg-gray-700 p-4 rounded-lg">
403
+ <div class="font-bold text-blue-300 mb-2">Data Bars</div>
404
+ <p>Visualize values as proportional bars</p>
405
+ </div>
406
+ <div class="bg-gray-700 p-4 rounded-lg">
407
+ <div class="font-bold text-blue-300 mb-2">Color Scales</div>
408
+ <p>Gradient colors based on value</p>
409
+ </div>
410
+ <div class="bg-gray-700 p-4 rounded-lg">
411
+ <div class="font-bold text-blue-300 mb-2">Icon Sets</div>
412
+ <p>Use icons to represent data ranges</p>
413
+ </div>
414
+ <div class="bg-gray-700 p-4 rounded-lg">
415
+ <div class="font-bold text-blue-300 mb-2">Custom Rules</div>
416
+ <p>Highlight cells based on your criteria</p>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="bg-gray-900 p-6 rounded-lg border border-gray-700">
423
+ <h3 class="text-xl font-bold mb-4 text-green-300">Chart Example</h3>
424
+ <div class="flex flex-col md:flex-row items-center">
425
+ <div class="md:w-1/2 mb-6 md:mb-0">
426
+ <div class="bg-gray-800 p-4 rounded-lg">
427
+ <div class="h-64 flex items-end space-x-4">
428
+ <div class="flex-1 bg-blue-500 h-3/4 rounded-t flex items-end justify-center">
429
+ <div class="text-xs -mb-6 transform rotate-90 origin-left">Q1 $12,345</div>
430
+ </div>
431
+ <div class="flex-1 bg-green-500 h-full rounded-t flex items-end justify-center">
432
+ <div class="text-xs -mb-6 transform rotate-90 origin-left">Q2 $15,678</div>
433
+ </div>
434
+ <div class="flex-1 bg-yellow-500 h-5/6 rounded-t flex items-end justify-center">
435
+ <div class="text-xs -mb-6 transform rotate-90 origin-left">Q3 $18,901</div>
436
+ </div>
437
+ <div class="flex-1 bg-red-500 h-4/5 rounded-t flex items-end justify-center">
438
+ <div class="text-xs -mb-6 transform rotate-90 origin-left">Q4 $21,234</div>
439
+ </div>
440
+ </div>
441
+ <div class="flex justify-between mt-2 text-xs">
442
+ <span>Q1</span>
443
+ <span>Q2</span>
444
+ <span>Q3</span>
445
+ <span>Q4</span>
446
+ </div>
447
+ <div class="text-center mt-2 font-bold">Quarterly Sales</div>
448
+ </div>
449
+ </div>
450
+ <div class="md:w-1/2">
451
+ <div class="bg-gray-800 p-4 rounded-lg">
452
+ <div class="h-64 flex items-center justify-center">
453
+ <div class="relative w-48 h-48">
454
+ <div class="absolute inset-0 rounded-full border-8 border-blue-500" style="clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 50%)"></div>
455
+ <div class="absolute inset-0 rounded-full border-8 border-green-500" style="clip-path: polygon(50% 50%, 100% 0%, 100% 100%, 0% 100%, 50% 50%)"></div>
456
+ <div class="absolute inset-0 rounded-full border-8 border-yellow-500" style="clip-path: polygon(50% 50%, 0% 100%, 0% 0%, 100% 0%, 50% 50%)"></div>
457
+ </div>
458
+ </div>
459
+ <div class="flex justify-center space-x-4 mt-2 text-xs">
460
+ <div class="flex items-center"><div class="w-3 h-3 bg-blue-500 mr-1"></div> Q1</div>
461
+ <div class="flex items-center"><div class="w-3 h-3 bg-green-500 mr-1"></div> Q2</div>
462
+ <div class="flex items-center"><div class="w-3 h-3 bg-yellow-500 mr-1"></div> Q3</div>
463
+ </div>
464
+ <div class="text-center mt-1 font-bold">Sales Distribution</div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+
471
+ <!-- Slide 7 - Advanced Features -->
472
+ <div class="slide" data-slide="7">
473
+ <h2 class="text-3xl font-bold mb-6 text-blue-400">Advanced Excel Features</h2>
474
+ <div class="grid md:grid-cols-2 gap-6">
475
+ <div>
476
+ <h3 class="text-xl font-bold mb-4 text-green-300">PivotTables</h3>
477
+ <div class="bg-gray-700 p-4 rounded-lg mb-6">
478
+ <p class="mb-3">PivotTables summarize large datasets quickly and allow for interactive data exploration.</p>
479
+ <div class="bg-gray-800 p-3 rounded">
480
+ <div class="text-sm font-bold mb-1">How to create:</div>
481
+ <ol class="list-decimal list-inside text-sm space-y-1">
482
+ <li>Select your data range</li>
483
+ <li>Go to Insert > PivotTable</li>
484
+ <li>Choose where to place it</li>
485
+ <li>Drag fields to areas</li>
486
+ </ol>
487
+ </div>
488
+ </div>
489
+
490
+ <h3 class="text-xl font-bold mb-4 text-green-300">Data Validation</h3>
491
+ <div class="bg-gray-700 p-4 rounded-lg">
492
+ <p class="mb-3">Control what data can be entered into cells to prevent errors.</p>
493
+ <div class="bg-gray-800 p-3 rounded">
494
+ <div class="text-sm font-bold mb-1">Options include:</div>
495
+ <ul class="list-disc list-inside text-sm space-y-1">
496
+ <li>Whole numbers within a range</li>
497
+ <li>Decimal numbers</li>
498
+ <li>List of allowed values</li>
499
+ <li>Custom formulas</li>
500
+ </ul>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ <div>
505
+ <h3 class="text-xl font-bold mb-4 text-green-300">Macros & VBA</h3>
506
+ <div class="bg-gray-700 p-4 rounded-lg mb-6">
507
+ <p class="mb-3">Automate repetitive tasks by recording macros or writing VBA code.</p>
508
+ <div class="bg-gray-800 p-3 rounded">
509
+ <div class="text-sm font-bold mb-1">Example Macro Uses:</div>
510
+ <ul class="list-disc list-inside text-sm space-y-1">
511
+ <li>Format reports automatically</li>
512
+ <li>Import and clean data</li>
513
+ <li>Create custom functions</li>
514
+ <li>Build user forms</li>
515
+ </ul>
516
+ </div>
517
+ </div>
518
+
519
+ <h3 class="text-xl font-bold mb-4 text-green-300">Power Query</h3>
520
+ <div class="bg-gray-700 p-4 rounded-lg">
521
+ <p class="mb-3">Import, transform, and combine data from multiple sources with ease.</p>
522
+ <div class="bg-gray-800 p-3 rounded">
523
+ <div class="text-sm font-bold mb-1">Key Features:</div>
524
+ <ul class="list-disc list-inside text-sm space-y-1">
525
+ <li>Connect to databases, web, files</li>
526
+ <li>Clean and reshape data</li>
527
+ <li>Create reusable queries</li>
528
+ <li>Automatically refresh</li>
529
+ </ul>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <!-- Slide 8 - Conclusion -->
537
+ <div class="slide" data-slide="8">
538
+ <div class="text-center py-12">
539
+ <i class="fas fa-file-excel text-8xl text-green-500 excel-icon mb-6"></i>
540
+ <h2 class="text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-green-400">
541
+ Excel Mastery Achieved!
542
+ </h2>
543
+ <p class="text-xl mb-8 max-w-2xl mx-auto">
544
+ You've now learned the essential skills to work efficiently with Excel.
545
+ Remember, practice is key to becoming truly proficient!
546
+ </p>
547
+
548
+ <div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto mb-10">
549
+ <div class="bg-gray-700 p-6 rounded-lg">
550
+ <div class="text-4xl text-blue-400 mb-3">
551
+ <i class="fas fa-book"></i>
552
+ </div>
553
+ <h3 class="font-bold mb-2">Keep Learning</h3>
554
+ <p class="text-sm">Explore advanced functions and features as you grow more comfortable.</p>
555
+ </div>
556
+ <div class="bg-gray-700 p-6 rounded-lg">
557
+ <div class="text-4xl text-green-400 mb-3">
558
+ <i class="fas fa-keyboard"></i>
559
+ </div>
560
+ <h3 class="font-bold mb-2">Use Shortcuts</h3>
561
+ <p class="text-sm">Keyboard shortcuts will dramatically increase your productivity.</p>
562
+ </div>
563
+ <div class="bg-gray-700 p-6 rounded-lg">
564
+ <div class="text-4xl text-yellow-400 mb-3">
565
+ <i class="fas fa-project-diagram"></i>
566
+ </div>
567
+ <h3 class="font-bold mb-2">Apply Knowledge</h3>
568
+ <p class="text-sm">Start using Excel for your own projects to reinforce what you've learned.</p>
569
+ </div>
570
+ </div>
571
+
572
+ <div class="bg-gray-800 p-6 rounded-lg max-w-2xl mx-auto border border-gray-700">
573
+ <h3 class="font-bold text-lg mb-3">Next Steps</h3>
574
+ <ul class="space-y-2 text-left">
575
+ <li class="flex items-start"><i class="fas fa-robot mt-1 mr-2 text-blue-300"></i> Try our AI-powered Excel assistant for personalized tips</li>
576
+ <li class="flex items-start"><i class="fas fa-certificate mt-1 mr-2 text-green-300"></i> Consider Microsoft Office certification</li>
577
+ <li class="flex items-start"><i class="fas fa-users mt-1 mr-2 text-yellow-300"></i> Join Excel communities to learn from others</li>
578
+ </ul>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+
585
+ <script>
586
+ document.addEventListener('DOMContentLoaded', function() {
587
+ const slides = document.querySelectorAll('.slide');
588
+ const prevBtn = document.getElementById('prev-btn');
589
+ const nextBtn = document.getElementById('next-btn');
590
+ const progressBar = document.getElementById('progress-bar');
591
+ let currentSlide = 0;
592
+ const totalSlides = slides.length;
593
+
594
+ // Initialize first slide
595
+ slides[currentSlide].classList.add('active');
596
+ updateProgress();
597
+
598
+ // Next button click
599
+ nextBtn.addEventListener('click', function() {
600
+ if (currentSlide < totalSlides - 1) {
601
+ slides[currentSlide].classList.remove('active');
602
+ currentSlide++;
603
+ slides[currentSlide].classList.add('active');
604
+ updateProgress();
605
+ }
606
+ });
607
+
608
+ // Previous button click
609
+ prevBtn.addEventListener('click', function() {
610
+ if (currentSlide > 0) {
611
+ slides[currentSlide].classList.remove('active');
612
+ currentSlide--;
613
+ slides[currentSlide].classList.add('active');
614
+ updateProgress();
615
+ }
616
+ });
617
+
618
+ // Update progress bar
619
+ function updateProgress() {
620
+ const progress = ((currentSlide + 1) / totalSlides) * 100;
621
+ progressBar.style.width = `${progress}%`;
622
+
623
+ // Update button states
624
+ prevBtn.disabled = currentSlide === 0;
625
+ nextBtn.disabled = currentSlide === totalSlides - 1;
626
+ }
627
+
628
+ // Keyboard navigation
629
+ document.addEventListener('keydown', function(e) {
630
+ if (e.key === 'ArrowRight') {
631
+ nextBtn.click();
632
+ } else if (e.key === 'ArrowLeft') {
633
+ prevBtn.click();
634
+ }
635
+ });
636
+
637
+ // Interface highlight interaction
638
+ const interfaceItems = document.querySelectorAll('.interface-item');
639
+ interfaceItems.forEach(item => {
640
+ item.addEventListener('click', function() {
641
+ const target = this.getAttribute('data-highlight');
642
+ const element = document.getElementById(target);
643
+
644
+ // Reset all highlights first
645
+ document.querySelectorAll('.cell-highlight').forEach(el => {
646
+ el.classList.remove('cell-highlight');
647
+ });
648
+
649
+ // Highlight the selected element
650
+ if (element) {
651
+ element.classList.add('cell-highlight');
652
+
653
+ // Scroll to the element if needed
654
+ element.scrollIntoView({ behavior: 'smooth', block: 'center' });
655
+ }
656
+ });
657
+ });
658
+
659
+ // Robot eye animation
660
+ setInterval(() => {
661
+ const eyes = document.querySelectorAll('.robot-eye');
662
+ eyes.forEach(eye => {
663
+ eye.style.boxShadow = `0 0 ${5 + Math.random() * 10}px ${3 + Math.random() * 7}px rgba(0, ${150 + Math.random() * 105}, 255, 0.7)`;
664
+ });
665
+ }, 1000);
666
+ });
667
+ </script>
668
+ <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=Boody123/my-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
669
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ I want you to create a presentation about Microsoft excel how to use it when to use it it’s parts everything selecting make it modern and technological robots