Hugging Face's logo

Spaces:
SS-2005
/
scn-consultation-api
Runtime error

App Files Community
SS-2005 commited on
Commit
34bfc70
·
verified ·
1 Parent(s): 2b2cdac

Upload 7 files

Browse files
Files changed (7) hide show
  1. src/template/slide/code_slide.html +291 -0
  2. src/template/slide/content_slide.html +492 -0
  3. src/template/slide/image_slide.html +615 -0
  4. src/template/slide/thank_you.html +264 -0
  5. src/template/slide/title_slide.html +113 -0
  6. src/template/slide/visualization_base.html +198 -0
  7. src/template/slide/welcome_slide.html +452 -0
src/template/slide/code_slide.html ADDED
@@ -0,0 +1,291 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>{{ slide_title }}</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ font-family: 'Segoe UI', Arial, sans-serif;
13
+ }
14
+
15
+ body {
16
+ display: flex;
17
+ justify-content: center;
18
+ align-items: center;
19
+ min-height: 100vh;
20
+ background: #f5f5f5;
21
+ margin: 0;
22
+ padding: 0;
23
+ }
24
+
25
+ .slide {
26
+ width: 1920px;
27
+ height: 1080px;
28
+ position: relative;
29
+ overflow: hidden;
30
+ background: white;
31
+ }
32
+
33
+ /* Animated background particles */
34
+ .bg-svg {
35
+ position: absolute;
36
+ top: 0;
37
+ left: 0;
38
+ width: 100%;
39
+ height: 100%;
40
+ z-index: 0;
41
+ opacity: 0;
42
+ transition: opacity 1s ease-in 0.5s;
43
+ }
44
+
45
+ .slide.animate .bg-svg {
46
+ opacity: 1;
47
+ }
48
+
49
+ /* Semicircle layers */
50
+ .circle-large {
51
+ position: absolute;
52
+ top: 50%;
53
+ left: 0;
54
+ width: 950px;
55
+ height: 1240px;
56
+ background: {{ circle_large_color }};
57
+ border-radius: 50%;
58
+ transform: translate(-135%, -50%);
59
+ z-index: 1;
60
+ transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
61
+ }
62
+
63
+ .circle-small {
64
+ position: absolute;
65
+ top: 50%;
66
+ left: 0;
67
+ width: 830px;
68
+ height: 1130px;
69
+ background: {{ circle_small_color }};
70
+ border-radius: 50%;
71
+ transform: translate(-140%, -50%);
72
+ z-index: 2;
73
+ transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
74
+ }
75
+
76
+ .slide.animate .circle-large {
77
+ transform: translate(-35%, -50%);
78
+ }
79
+
80
+ .slide.animate .circle-small {
81
+ transform: translate(-40%, -50%);
82
+ }
83
+
84
+ /* Title container */
85
+ .title-container {
86
+ position: absolute;
87
+ top: 50%;
88
+ left: 250px;
89
+ transform: translate(-50%, -50%);
90
+ text-align: center;
91
+ z-index: 3;
92
+ width: 540px;
93
+ display: flex;
94
+ justify-content: center;
95
+ align-items: center;
96
+ opacity: 0;
97
+ transition: opacity 0.8s ease-in 1.2s;
98
+ }
99
+
100
+ .slide.animate .title-container {
101
+ opacity: 1;
102
+ }
103
+
104
+ .title {
105
+ font-size: clamp(1.2rem, 4vh, 5rem);
106
+ font-weight: 700;
107
+ color: #030303;
108
+ line-height: 1.2;
109
+ word-break: break-word;
110
+ text-align: center;
111
+ max-width: 90%;
112
+ }
113
+
114
+ /* Content Section with Code */
115
+ .content {
116
+ position: absolute;
117
+ top: 50%;
118
+ left: 672px;
119
+ transform: translateY(-50%);
120
+ z-index: 3;
121
+ width: 1112px;
122
+ color: #222;
123
+ }
124
+
125
+ .subtitle {
126
+ font-size: 34px;
127
+ color: #000000;
128
+ margin-bottom: 1.5rem;
129
+ opacity: 0;
130
+ transform: translateY(-20px);
131
+ transition: all 0.6s ease-out 2s;
132
+ }
133
+ .slide.animate .subtitle {
134
+ opacity: 1;
135
+ transform: translateY(0);
136
+ }
137
+
138
+ .code-container {
139
+ background: #f8f9fa;
140
+ border: 2px solid #e3e8ef;
141
+ border-radius: 10px;
142
+ padding: 25px;
143
+ box-shadow: 0 2px 8px rgba(47, 111, 236, 0.1);
144
+ opacity: 0;
145
+ transform: translateY(20px);
146
+ transition: all 0.8s ease-out 2.5s;
147
+ }
148
+
149
+ .slide.animate .code-container {
150
+ opacity: 1;
151
+ transform: translateY(0);
152
+ }
153
+
154
+ .code-header {
155
+ display: flex;
156
+ align-items: center;
157
+ justify-content: space-between;
158
+ margin-bottom: 20px;
159
+ padding-bottom: 15px;
160
+ border-bottom: 2px solid #e3e8ef;
161
+ }
162
+
163
+ .code-title {
164
+ font-size: 20px;
165
+ font-weight: 600;
166
+ color: {{ code_title_color }};
167
+ display: flex;
168
+ align-items: center;
169
+ gap: 8px;
170
+ }
171
+
172
+ .code-icon {
173
+ width: 20px;
174
+ height: 20px;
175
+ }
176
+
177
+ .code-block {
178
+ font-family: 'Fira Code', 'JetBrains Mono', 'Source Code Pro', 'Consolas', 'Monaco', 'Courier New', monospace;
179
+ font-size: 19px;
180
+ line-height: 1.8;
181
+ color: #2d3748;
182
+ letter-spacing: 0.5px;
183
+ }
184
+
185
+ .code-line {
186
+ display: block;
187
+ padding: 2px 0;
188
+ opacity: 0;
189
+ transform: translateX(-20px);
190
+ transition: all 0.4s ease-out;
191
+ }
192
+
193
+ .slide.animate .code-line:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_1_delay }}; }
194
+ .slide.animate .code-line:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_2_delay }}; }
195
+ .slide.animate .code-line:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_3_delay }}; }
196
+ .slide.animate .code-line:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_4_delay }}; }
197
+ .slide.animate .code-line:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_5_delay }}; }
198
+ .slide.animate .code-line:nth-child(6) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_6_delay }}; }
199
+ .slide.animate .code-line:nth-child(7) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_7_delay }}; }
200
+ .slide.animate .code-line:nth-child(8) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_8_delay }}; }
201
+ .slide.animate .code-line:nth-child(9) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_9_delay }}; }
202
+ .slide.animate .code-line:nth-child(10) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_10_delay }}; }
203
+ .slide.animate .code-line:nth-child(11) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_11_delay }}; }
204
+ .slide.animate .code-line:nth-child(12) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_12_delay }}; }
205
+ .slide.animate .code-line:nth-child(13) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_13_delay }}; }
206
+ .slide.animate .code-line:nth-child(14) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_14_delay }}; }
207
+ .slide.animate .code-line:nth-child(15) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_15_delay }}; }
208
+
209
+ {{ pygments_css }}
210
+
211
+ .corner-logo {
212
+ position: absolute;
213
+ bottom: 20px;
214
+ right: 20px;
215
+ width: 50px;
216
+ height: auto;
217
+ z-index: 4;
218
+ opacity: 0;
219
+ transition: opacity 0.5s ease-in {{ logo_delay }};
220
+ }
221
+
222
+ .slide.animate .corner-logo {
223
+ opacity: 1;
224
+ }
225
+
226
+
227
+ @keyframes float {
228
+ 0%, 100% { transform: translateY(0px); }
229
+ 50% { transform: translateY(-10px); }
230
+ }
231
+
232
+ @keyframes pulse {
233
+ 0%, 100% { opacity: 0.3; }
234
+ 50% { opacity: 0.6; }
235
+ }
236
+
237
+ .particle {
238
+ animation: float 3s ease-in-out infinite, pulse 2s ease-in-out infinite;
239
+ }
240
+ </style>
241
+ </head>
242
+ <body>
243
+
244
+ <div class="slide" id="slide">
245
+ <!-- Animated background particles -->
246
+ <svg class="bg-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
247
+ </svg>
248
+
249
+ <!-- Semicircle shapes -->
250
+ <div class="circle-large"></div>
251
+ <div class="circle-small"></div>
252
+
253
+ <!-- Title inside semicircle -->
254
+ <div class="title-container">
255
+ <h1 class="title">{{ main_title }}</h1>
256
+ </div>
257
+
258
+ <!-- Right side content with code -->
259
+ <div class="content">
260
+ <p class="subtitle">{{ subtitle_text }}</p>
261
+ <div class="code-container">
262
+ <div class="code-header">
263
+ <div class="code-title">
264
+ <svg class="code-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
265
+ <path d="M8 6L4 10L8 14" stroke="{{ code_title_color }}" stroke-width="2" stroke-linecap="round"/>
266
+ <path d="M16 6L20 10L16 14" stroke="{{ code_title_color }}" stroke-width="2" stroke-linecap="round"/>
267
+ </svg>
268
+ {{ code_header_title }}
269
+ </div>
270
+ </div>
271
+ <div class="code-block">
272
+ {{ code_content }}
273
+ </div>
274
+ </div>
275
+ </div>
276
+ <img src="{{ logo_path }}" alt="Corner Logo" class="corner-logo">
277
+ </div>
278
+
279
+ <script>
280
+ window.addEventListener('load', () => {
281
+ const slide = document.getElementById('slide');
282
+
283
+ // Start animation immediately
284
+ setTimeout(() => {
285
+ slide.classList.add('animate');
286
+ }, 100);
287
+ });
288
+ </script>
289
+
290
+ </body>
291
+ </html>
src/template/slide/content_slide.html ADDED
@@ -0,0 +1,492 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>{{ slide_title }}</title>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.css" integrity="sha384-WcoG4HRXMzYzfCgiyfrySxx90XSl2rxY5mnVY5TwtWE6KLrArNKn0T/mOgNL0Mmi" crossorigin="anonymous">
8
+ <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.js" integrity="sha384-J+9dG2KMoiR9hqcFao0IBLwxt6zpcyN68IgwzsCSkbreXUjmNVRhPFTssqdSGjwQ" crossorigin="anonymous"></script>
9
+ <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"></script>
10
+ <style>
11
+ * {
12
+ margin: 0;
13
+ padding: 0;
14
+ box-sizing: border-box;
15
+ font-family: 'Segoe UI', Arial, sans-serif;
16
+ }
17
+
18
+ body {
19
+ display: flex;
20
+ justify-content: center;
21
+ align-items: center;
22
+ min-height: 100vh;
23
+ background: #f5f5f5;
24
+ margin: 0;
25
+ padding: 0;
26
+ }
27
+
28
+ .slide {
29
+ width: 1920px;
30
+ height: 1080px;
31
+ position: relative;
32
+ overflow: hidden;
33
+ background: white;
34
+ }
35
+
36
+ /* Semicircle layers - initially off-screen */
37
+ .circle-large {
38
+ position: absolute;
39
+ top: 50%;
40
+ left: 0;
41
+ width: 950px;
42
+ height: 1240px;
43
+ background: {{ circle_large_color }};
44
+ border-radius: 50%;
45
+ transform: translate(-135%, -50%);
46
+ z-index: 1;
47
+ transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
48
+ }
49
+
50
+ .circle-small {
51
+ position: absolute;
52
+ top: 50%;
53
+ left: 0;
54
+ width: 830px;
55
+ height: 1130px;
56
+ background: {{ circle_small_color }};
57
+ border-radius: 50%;
58
+ transform: translate(-140%, -50%);
59
+ z-index: 2;
60
+ transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
61
+ }
62
+
63
+ /* Animated state */
64
+ .slide.animate .circle-large {
65
+ transform: translate(-35%, -50%);
66
+ }
67
+
68
+ .slide.animate .circle-small {
69
+ transform: translate(-40%, -50%);
70
+ }
71
+
72
+ /* Title - initially hidden */
73
+ .title-container {
74
+ position: absolute;
75
+ top: 50%;
76
+ left: 250px;
77
+ transform: translate(-50%, -50%);
78
+ text-align: center;
79
+ z-index: 3;
80
+ width: 540px;
81
+ display: flex;
82
+ justify-content: center;
83
+ align-items: center;
84
+ opacity: 0;
85
+ transition: opacity 0.8s ease-in 0.5s;
86
+ }
87
+
88
+ .slide.animate .title-container {
89
+ opacity: 1;
90
+ }
91
+
92
+ .title {
93
+ font-size: clamp(1.2rem, 4vh, 5rem);
94
+ font-weight: 700;
95
+ color: #000000;
96
+ line-height: 1.2;
97
+ word-break: break-word;
98
+ text-align: center;
99
+ max-width: 90%;
100
+ }
101
+
102
+ /* Content Section */
103
+ .content {
104
+ position: absolute;
105
+ top: 50%;
106
+ left: 672px;
107
+ transform: translateY(-50%);
108
+ z-index: 3;
109
+ width: 1150px;
110
+ color: #222;
111
+ max-height: 800px;
112
+ overflow: hidden;
113
+ }
114
+
115
+ .subtitle {
116
+ font-size: 34px;
117
+ color: #000000;
118
+ margin-bottom: 1.5rem;
119
+ opacity: 0;
120
+ transform: translateX(20px);
121
+ transition: all 0.6s ease-out 1s;
122
+ }
123
+
124
+ .slide.animate .subtitle {
125
+ opacity: 1;
126
+ transform: translateX(0);
127
+ }
128
+
129
+ .bullet-list {
130
+ display: flex;
131
+ flex-direction: column;
132
+ gap: 20px;
133
+ margin-top: 20px;
134
+ }
135
+
136
+ .bullet-item {
137
+ display: flex;
138
+ align-items: flex-start;
139
+ gap: 15px;
140
+ padding: 18px 0;
141
+ opacity: 0;
142
+ transform: translateX(-50px);
143
+ transition: all 0.6s ease-out;
144
+ }
145
+
146
+ .bullet-icon {
147
+ width: 10px;
148
+ height: 10px;
149
+ min-width: 10px;
150
+ background: {{ bullet_color }};
151
+ border-radius: 50%;
152
+ margin-top: 20px; /* Pushes the bullet down for better vertical alignment */
153
+ }
154
+
155
+ .bullet-text {
156
+ font-size: 28px; /* Reduced font size for more space */
157
+ color: #000000;
158
+ line-height: 1.6;
159
+ font-weight: 500;
160
+ width: 100%;
161
+ max-width: 1050px;
162
+ }
163
+
164
+ /* Individual bullet timing */
165
+ .slide.animate .bullet-item:nth-child(1) {
166
+ opacity: 1;
167
+ transform: translateX(0);
168
+ transition-delay: {{ bullet_1_delay }};
169
+ }
170
+
171
+ .slide.animate .bullet-item:nth-child(2) {
172
+ opacity: 1;
173
+ transform: translateX(0);
174
+ transition-delay: {{ bullet_2_delay }};
175
+ }
176
+
177
+ .slide.animate .bullet-item:nth-child(3) {
178
+ opacity: 1;
179
+ transform: translateX(0);
180
+ transition-delay: {{ bullet_3_delay }};
181
+ }
182
+
183
+ .slide.animate .bullet-item:nth-child(4) {
184
+ opacity: 1;
185
+ transform: translateX(0);
186
+ transition-delay: {{ bullet_4_delay }};
187
+ }
188
+
189
+ .slide.animate .bullet-item:nth-child(5) {
190
+ opacity: 1;
191
+ transform: translateX(0);
192
+ transition-delay: {{ bullet_5_delay }};
193
+ }
194
+
195
+ .slide.animate .bullet-item:nth-child(6) {
196
+ opacity: 1;
197
+ transform: translateX(0);
198
+ transition-delay: {{ bullet_6_delay }};
199
+ }
200
+
201
+ /* Inline code within bullets */
202
+ .inline-code-span {
203
+ background-color: #f0f0f0;
204
+ padding: 2px 6px;
205
+ border-radius: 3px;
206
+ font-family: 'Consolas', 'Monaco', monospace;
207
+ font-size: 0.95em;
208
+ color: #d63384;
209
+ }
210
+
211
+ .bullet-content code {
212
+ background-color: #f0f0f0;
213
+ padding: 2px 6px;
214
+ border-radius: 3px;
215
+ font-family: 'Consolas', 'Monaco', monospace;
216
+ font-size: 0.95em;
217
+ color: #d63384;
218
+ }
219
+
220
+ /* Inline code snippet (small code) - Styled like the dedicated code slide */
221
+ .inline-code-section {
222
+ background: #f8f9fa;
223
+ border: 2px solid #e3e8ef;
224
+ border-radius: 10px;
225
+ padding: 25px;
226
+ margin-top: 1.5rem;
227
+ box-shadow: 0 2px 8px rgba(47, 111, 236, 0.1);
228
+ opacity: 0;
229
+ transform: translateY(20px);
230
+ transition: all 0.6s ease-out {{ code_snippet_delay }};
231
+ }
232
+
233
+ .slide.animate .inline-code-section {
234
+ opacity: 1;
235
+ transform: translateY(0);
236
+ }
237
+
238
+ .inline-code-header {
239
+ display: flex;
240
+ align-items: center;
241
+ justify-content: space-between;
242
+ margin-bottom: 20px;
243
+ padding-bottom: 15px;
244
+ border-bottom: 2px solid #e3e8ef;
245
+ }
246
+
247
+ .inline-code-title {
248
+ font-size: 20px;
249
+ font-weight: 600;
250
+ color: {{ bullet_color }};
251
+ display: flex;
252
+ align-items: center;
253
+ gap: 8px;
254
+ }
255
+
256
+ .inline-code-icon {
257
+ width: 20px;
258
+ height: 20px;
259
+ }
260
+
261
+ .inline-code-block {
262
+ font-family: 'Fira Code', 'JetBrains Mono', 'Source Code Pro', 'Consolas', 'Monaco', 'Courier New', monospace;
263
+ font-size: 19px;
264
+ line-height: 1.7;
265
+ color: #2d3748;
266
+ }
267
+
268
+ .inline-code-block .code-line {
269
+ display: block;
270
+ }
271
+
272
+ /* === PYGMENTS SYNTAX HIGHLIGHTING FOR INLINE CODE === */
273
+ {{ pygments_css }}
274
+
275
+ .corner-logo {
276
+ position: absolute;
277
+ bottom: 20px;
278
+ right: 20px;
279
+ width: 50px;
280
+ height: auto;
281
+ z-index: 4;
282
+ opacity: 0;
283
+ transition: opacity 0.5s ease-in {{ logo_delay }};
284
+ }
285
+
286
+ .slide.animate .corner-logo {
287
+ opacity: 1;
288
+ }
289
+
290
+ /* Word highlighting styles - Professional continuous highlight */
291
+ .word {
292
+ display: inline;
293
+ transition: all 0.3s ease;
294
+ padding: 2px 0px;
295
+ border-radius: 3px;
296
+ margin: 0;
297
+ background-color: transparent;
298
+ color: inherit;
299
+ font-weight: inherit;
300
+ position: relative;
301
+ }
302
+
303
+ /* Continuous professional highlight - stays until end */
304
+ /* Golden Yellow - Energetic & Positive */
305
+ .word.highlighted {
306
+ background: linear-gradient(120deg, rgba(251, 191, 36, 0.25) 0%, rgba(245, 158, 11, 0.35) 100%);
307
+ color: #78350f; /* Dark Amber */
308
+ font-weight: 500; /* Matched font-weight to prevent width change */
309
+ padding: 3px 2px; /* Adjusted padding for a better visual */
310
+ border-radius: 4px;
311
+ box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
312
+ }
313
+
314
+ /* Active animation */
315
+ @keyframes glow {
316
+ 0%, 100% { transform: scale(1); }
317
+ 50% { transform: scale(1.5); }
318
+ }
319
+
320
+ .bullet-item.active .bullet-icon {
321
+ animation: glow 0.8s ease-in-out;
322
+ }
323
+
324
+ @keyframes pulse-bg {
325
+ 0%, 100% { opacity: 1; }
326
+ 50% { opacity: 0.7; }
327
+ }
328
+
329
+ .bullet-item.active {
330
+ animation: pulse-bg 0.8s ease-in-out;
331
+ }
332
+ </style>
333
+ </head>
334
+ <body>
335
+
336
+ <div class="slide" id="slide">
337
+ <!-- Semicircle shapes -->
338
+ <div class="circle-large"></div>
339
+ <div class="circle-small"></div>
340
+
341
+ <!-- Title inside semicircle -->
342
+ <div class="title-container">
343
+ <h1 class="title">{{ main_title }}</h1>
344
+ </div>
345
+
346
+ <!-- Right side content -->
347
+ <div class="content">
348
+ <p class="subtitle">{{ subtitle_text }}</p>
349
+ <div class="bullet-list">
350
+ {% if enable_word_highlighting %}
351
+ <!-- Word-by-word rendering with highlighting -->
352
+ {% for bullet_data in bullets_with_highlights %}
353
+ {% if bullet_data.text %}
354
+ {% set outer_index = loop.index0 %}
355
+ <div class="bullet-item" data-bullet-index="{{ outer_index }}">
356
+ <div class="bullet-icon"></div>
357
+ <div class="bullet-text">
358
+ {% for word_obj in bullet_data.word_data %}
359
+ <span class="word"
360
+ data-start="{{ word_obj.start }}"
361
+ data-end="{{ word_obj.end }}"
362
+ data-bullet="{{ outer_index }}"
363
+ data-word-index="{{ loop.index0 }}"
364
+ data-highlight="{{ 'true' if word_obj.highlight else 'false' }}">{{ word_obj.word | safe }}</span>{% if not loop.last %}<span> </span>{% endif %}
365
+ {% endfor %}
366
+ </div>
367
+ </div>
368
+ {% endif %}
369
+ {% endfor %}
370
+ {% else %}
371
+ <!-- Fallback: Regular bullet rendering -->
372
+ {% if bullet_point_1 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_1|safe }}</div></div>{% endif %}
373
+ {% if bullet_point_2 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_2|safe }}</div></div>{% endif %}
374
+ {% if bullet_point_3 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_3|safe }}</div></div>{% endif %}
375
+ {% if bullet_point_4 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_4|safe }}</div></div>{% endif %}
376
+ {% if bullet_point_5 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_5|safe }}</div></div>{% endif %}
377
+ {% if bullet_point_6 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_6|safe }}</div></div>{% endif %}
378
+ {% endif %}
379
+ </div>
380
+
381
+ {% if has_code_snippet %}
382
+ <div class="inline-code-section">
383
+ <div class="inline-code-header">
384
+ <div class="inline-code-title">
385
+ <svg class="inline-code-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
386
+ <path d="M8 6L4 10L8 14" stroke="{{ bullet_color }}" stroke-width="2" stroke-linecap="round"/>
387
+ <path d="M16 6L20 10L16 14" stroke="{{ bullet_color }}" stroke-width="2" stroke-linecap="round"/>
388
+ </svg>
389
+ {{ code_snippet_label }}
390
+ </div>
391
+ </div>
392
+ <div class="inline-code-block">
393
+ {{ code_snippet_content|safe }}
394
+ </div>
395
+ </div>
396
+ {% endif %}
397
+ </div>
398
+
399
+ <!-- Bottom-right logo -->
400
+ <img src="{{ logo_path }}" alt="Corner Logo" class="corner-logo">
401
+ </div>
402
+
403
+ <script>
404
+ // Configuration
405
+ const ENABLE_WORD_HIGHLIGHTING = {{ 'true' if enable_word_highlighting else 'false' }};
406
+ const BULLET_DELAYS = {{ bullet_highlight_delays }};
407
+ const AUDIO_START_DELAY = 2500; // 2.5 seconds - matches animation delay before narration
408
+
409
+ // Auto-play animation on page load
410
+ window.addEventListener('load', () => {
411
+ const slide = document.getElementById('slide');
412
+
413
+ // Start animation immediately
414
+ setTimeout(() => {
415
+ slide.classList.add('animate');
416
+
417
+ if (ENABLE_WORD_HIGHLIGHTING) {
418
+ // Word-level highlighting based on audio timings
419
+ highlightWordsWithTiming();
420
+ } else {
421
+ // Fallback: Bullet-level highlighting
422
+ highlightBulletsOnly();
423
+ }
424
+ }, 100);
425
+ });
426
+
427
+ function highlightWordsWithTiming() {
428
+ const wordsToHighlight = document.querySelectorAll('.word[data-highlight="true"]');
429
+ console.log(`[Word Highlighting] Found ${wordsToHighlight.length} word instances to highlight.`);
430
+
431
+ wordsToHighlight.forEach((word, index) => {
432
+ const startTime = parseFloat(word.dataset.start) * 1000; // Convert to ms from audio
433
+
434
+ // Apply audio delay for better sync
435
+ const adjustedStartTime = Math.max(0, startTime + AUDIO_START_DELAY);
436
+
437
+ // Schedule highlight
438
+ setTimeout(() => {
439
+ word.classList.add('highlighted');
440
+ // Optional: log the highlight action for debugging
441
+ // console.log(`[Highlight] "${word.textContent.trim()}" at ${(adjustedStartTime/1000).toFixed(2)}s (bullet ${word.dataset.bullet})`);
442
+ }, adjustedStartTime);
443
+ });
444
+
445
+ // Animate the bullet icons
446
+ const bullets = document.querySelectorAll('.bullet-item');
447
+ bullets.forEach((bullet, index) => {
448
+ if (index < BULLET_DELAYS.length) {
449
+ setTimeout(() => {
450
+ bullet.classList.add('active');
451
+ setTimeout(() => bullet.classList.remove('active'), 2000); // Animation duration
452
+ }, BULLET_DELAYS[index]);
453
+ }
454
+ });
455
+ }
456
+
457
+ function highlightBulletsOnly() {
458
+ // Fallback bullet highlighting logic
459
+ const bullets = document.querySelectorAll('.bullet-points li');
460
+
461
+ bullets.forEach((bullet, index) => {
462
+ if (index < BULLET_DELAYS.length) {
463
+ setTimeout(() => {
464
+ bullet.classList.add('active');
465
+ setTimeout(() => bullet.classList.remove('active'), 1500);
466
+ }, BULLET_DELAYS[index]);
467
+ }
468
+ });
469
+ }
470
+
471
+ function setHighlightTheme(theme) {
472
+ const highlightedWords = document.querySelectorAll('.word.highlighted');
473
+ highlightedWords.forEach(word => {
474
+ word.classList.remove('blue-theme', 'green-theme', 'purple-theme');
475
+ if (theme !== 'default') {
476
+ word.classList.add(`${theme}-theme`);
477
+ }
478
+ });
479
+ }
480
+ </script>
481
+ <script>
482
+ document.addEventListener("DOMContentLoaded", function() {
483
+ renderMathInElement(document.body, {
484
+ delimiters: [
485
+ {left: "$$", right: "$$", display: true},
486
+ {left: "$", right: "$", display: false}
487
+ ]
488
+ });
489
+ });
490
+ </script>
491
+ </body>
492
+ </html>
src/template/slide/image_slide.html ADDED
@@ -0,0 +1,615 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>{{ slide_title }}</title>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.css" integrity="sha384-WcoG4HRXMzYzfCgiyfrySxx90XSl2rxY5mnVY5TwtWE6KLrArNKn0T/mOgNL0Mmi" crossorigin="anonymous">
8
+ <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.js" integrity="sha384-J+9dG2KMoiR9hqcFao0IBLwxt6zpcyN68IgwzsCSkbreXUjmNVRhPFTssqdSGjwQ" crossorigin="anonymous"></script>
9
+ <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"></script>
10
+ <style>
11
+ * {
12
+ margin: 0;
13
+ padding: 0;
14
+ box-sizing: border-box;
15
+ font-family: 'Segoe UI', Arial, sans-serif;
16
+ }
17
+
18
+ body {
19
+ display: flex;
20
+ justify-content: center;
21
+ align-items: center;
22
+ min-height: 100vh;
23
+ background: #f5f5f5;
24
+ margin: 0;
25
+ padding: 0;
26
+ }
27
+
28
+ .slide {
29
+ width: 1920px;
30
+ height: 1080px;
31
+ position: relative;
32
+ overflow: hidden;
33
+ background: white;
34
+ }
35
+
36
+ /* Left vertical accent bar */
37
+ .vertical-accent {
38
+ position: absolute;
39
+ left: 0;
40
+ top: 0;
41
+ bottom: 0;
42
+ width: 60px;
43
+ background: linear-gradient(180deg, {{ accent_color_1|default('#2f6fec') }} 0%, {{ accent_color_2|default('#1a5acc') }} 100%);
44
+ z-index: 3;
45
+ opacity: 0;
46
+ transform: scaleY(0);
47
+ transform-origin: top;
48
+ transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
49
+ }
50
+
51
+ .slide.animate .vertical-accent {
52
+ opacity: 1;
53
+ transform: scaleY(1);
54
+ }
55
+
56
+ /* Decorative elements on vertical bar */
57
+ .accent-dots {
58
+ position: absolute;
59
+ left: 0;
60
+ top: 50%;
61
+ transform: translateY(-50%);
62
+ width: 60px;
63
+ height: 200px;
64
+ display: flex;
65
+ flex-direction: column;
66
+ align-items: center;
67
+ justify-content: space-around;
68
+ padding: 20px 0;
69
+ z-index: 4;
70
+ }
71
+
72
+ .accent-dot {
73
+ width: 8px;
74
+ height: 8px;
75
+ background: rgba(255, 255, 255, 0.4);
76
+ border-radius: 50%;
77
+ opacity: 0;
78
+ transform: scale(0);
79
+ transition: all 0.4s ease-out;
80
+ }
81
+
82
+ .slide.animate .accent-dot {
83
+ opacity: 1;
84
+ transform: scale(1);
85
+ }
86
+
87
+ .slide.animate .accent-dot:nth-child(1) { transition-delay: 1.5s; }
88
+ .slide.animate .accent-dot:nth-child(2) { transition-delay: 1.7s; }
89
+ .slide.animate .accent-dot:nth-child(3) { transition-delay: 1.9s; }
90
+ .slide.animate .accent-dot:nth-child(4) { transition-delay: 2.1s; }
91
+ .slide.animate .accent-dot:nth-child(5) { transition-delay: 2.3s; }
92
+
93
+ .accent-line {
94
+ position: absolute;
95
+ left: 0;
96
+ bottom: 100px;
97
+ width: 60px;
98
+ height: 3px;
99
+ background: rgba(255, 255, 255, 0.3);
100
+ opacity: 0;
101
+ transform: scaleX(0);
102
+ transform-origin: left;
103
+ transition: all 0.6s ease-out 2.5s;
104
+ z-index: 4;
105
+ }
106
+
107
+ .slide.animate .accent-line {
108
+ opacity: 1;
109
+ transform: scaleX(1);
110
+ }
111
+
112
+ /* Decorative circles */
113
+ .deco-circle {
114
+ position: absolute;
115
+ border-radius: 50%;
116
+ z-index: 0;
117
+ opacity: 0;
118
+ transition: opacity 0.8s ease-out;
119
+ }
120
+
121
+ .slide.animate .deco-circle {
122
+ opacity: 1;
123
+ }
124
+
125
+ /* Main title section - top */
126
+ .header-section {
127
+ position: absolute;
128
+ top: 60px;
129
+ left: 120px;
130
+ right: 100px;
131
+ z-index: 2;
132
+ }
133
+
134
+ .main-title {
135
+ font-size: {{ title_font_size|default('64px') }};
136
+ font-weight: 800;
137
+ color: {{ title_color|default('#1a1a1a') }};
138
+ margin-bottom: 10px;
139
+ opacity: 0;
140
+ transform: translateY(-30px);
141
+ transition: all 0.8s ease-out 0.6s;
142
+ }
143
+
144
+ .slide.animate .main-title {
145
+ opacity: 1;
146
+ transform: translateY(0);
147
+ }
148
+
149
+ .title-accent {
150
+ width: 120px;
151
+ height: 6px;
152
+ background: linear-gradient(90deg, {{ accent_color_1|default('#2f6fec') }}, {{ accent_color_3|default('#8ab4f8') }});
153
+ border-radius: 3px;
154
+ opacity: 0;
155
+ transform: scaleX(0);
156
+ transform-origin: left;
157
+ transition: all 0.6s ease-out 1s;
158
+ }
159
+
160
+ .slide.animate .title-accent {
161
+ opacity: 1;
162
+ transform: scaleX(1);
163
+ }
164
+
165
+ /* Large image section - center left */
166
+ .image-section {
167
+ position: absolute;
168
+ top: 50%;
169
+ left: 120px;
170
+ transform: translateY(-50%);
171
+ width: {{ image_width|default('920px') }};
172
+ height: {{ image_height|default('613px') }};
173
+ z-index: 2;
174
+ opacity: 0;
175
+ transform: translateY(-50%) translateX(-50px);
176
+ transition: all 1s ease-out 1.3s;
177
+ }
178
+
179
+ .slide.animate .image-section {
180
+ opacity: 1;
181
+ transform: translateY(-50%) translateX(0);
182
+ }
183
+
184
+ .image-container {
185
+ position: relative;
186
+ width: 100%;
187
+ height: 100%;
188
+ border-radius: 16px;
189
+ overflow: hidden;
190
+ box-shadow: 0 30px 70px rgba(0, 0, 0, 0.2);
191
+ }
192
+
193
+ .main-image {
194
+ width: 100%;
195
+ height: 100%;
196
+ object-fit: cover;
197
+ }
198
+
199
+ /* Gradient overlay on image bottom */
200
+ .image-gradient {
201
+ position: absolute;
202
+ bottom: 0;
203
+ left: 0;
204
+ right: 0;
205
+ height: 120px;
206
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
207
+ z-index: 1;
208
+ }
209
+
210
+ /* Right content panel */
211
+ .content-panel {
212
+ position: absolute;
213
+ top: 200px;
214
+ right: 100px;
215
+ width: 760px;
216
+ z-index: 2;
217
+ }
218
+
219
+ .subtitle {
220
+ font-size: {{ subtitle_font_size|default('28px') }};
221
+ color: {{ subtitle_color|default('#2f6fec') }};
222
+ font-weight: 700;
223
+ margin-bottom: 30px;
224
+ opacity: 0;
225
+ transform: translateX(30px);
226
+ transition: all 0.8s ease-out 1.6s;
227
+ }
228
+
229
+ .slide.animate .subtitle {
230
+ opacity: 1;
231
+ transform: translateX(0);
232
+ }
233
+
234
+ /* Bullet points - vertical list */
235
+ .bullet-list {
236
+ display: flex;
237
+ flex-direction: column;
238
+ gap: 20px;
239
+ margin-top: 20px;
240
+ }
241
+
242
+ .bullet-item {
243
+ display: flex;
244
+ align-items: flex-start;
245
+ gap: 15px;
246
+ padding: 18px 0;
247
+ opacity: 0;
248
+ transform: translateX(50px);
249
+ transition: all 0.6s ease-out;
250
+ }
251
+
252
+ .bullet-icon {
253
+ width: 10px;
254
+ height: 10px;
255
+ min-width: 10px;
256
+ background: {{ bullet_icon_color|default('#2f6fec') }};
257
+ border-radius: 50%;
258
+ margin-top: 20px; /* Pushes the bullet down for better vertical alignment */
259
+ }
260
+
261
+ .bullet-text {
262
+ font-size: {{ bullet_font_size|default('29px') }};
263
+ color: {{ bullet_text_color|default('#333') }};
264
+ line-height: 1.6;
265
+ font-weight: 500;
266
+ }
267
+
268
+ .bullet-text .katex-display {
269
+ margin-top: 0.5em;
270
+ margin-bottom: 0.5em;
271
+ }
272
+
273
+ .bullet-text code {
274
+ background-color: #f0f0f0;
275
+ padding: 2px 6px;
276
+ border-radius: 3px;
277
+ font-family: 'Consolas', 'Monaco', monospace;
278
+ font-size: 0.95em;
279
+ color: #d63384;
280
+ }
281
+
282
+ .slide.animate .bullet-item:nth-child(1) {
283
+ opacity: 1;
284
+ transform: translateX(0);
285
+ transition-delay: {{ bullet_1_delay|default('1.9s') }};
286
+ }
287
+
288
+ .slide.animate .bullet-item:nth-child(2) {
289
+ opacity: 1;
290
+ transform: translateX(0);
291
+ transition-delay: {{ bullet_2_delay|default('2.2s') }};
292
+ }
293
+
294
+ .slide.animate .bullet-item:nth-child(3) {
295
+ opacity: 1;
296
+ transform: translateX(0);
297
+ transition-delay: {{ bullet_3_delay|default('2.5s') }};
298
+ }
299
+
300
+ .slide.animate .bullet-item:nth-child(4) {
301
+ opacity: 1;
302
+ transform: translateX(0);
303
+ transition-delay: {{ bullet_4_delay|default('2.8s') }};
304
+ }
305
+
306
+ .slide.animate .bullet-item:nth-child(5) {
307
+ opacity: 1;
308
+ transform: translateX(0);
309
+ transition-delay: {{ bullet_5_delay|default('3.1s') }};
310
+ }
311
+
312
+ .slide.animate .bullet-item:nth-child(6) {
313
+ opacity: 1;
314
+ transform: translateX(0);
315
+ transition-delay: {{ bullet_6_delay|default('3.4s') }};
316
+ }
317
+
318
+ /* Hover effect */
319
+ .bullet-item:hover {
320
+ transform: translateX(5px);
321
+ }
322
+
323
+ /* Active animation */
324
+ @keyframes glow {
325
+ 0%, 100% { transform: scale(1); }
326
+ 50% { transform: scale(1.5); }
327
+ }
328
+
329
+ .bullet-item.active .bullet-icon {
330
+ animation: glow 0.8s ease-in-out;
331
+ }
332
+
333
+ @keyframes pulse-bg {
334
+ 0%, 100% { opacity: 1; }
335
+ 50% { opacity: 0.7; }
336
+ }
337
+
338
+ .bullet-item.active {
339
+ animation: pulse-bg 0.8s ease-in-out;
340
+ }
341
+
342
+ /* Word highlighting styles - Professional continuous highlight */
343
+ .word {
344
+ display: inline;
345
+ transition: all 0.3s ease;
346
+ padding: 2px 0px;
347
+ border-radius: 3px;
348
+ margin: 0;
349
+ background-color: transparent;
350
+ color: inherit;
351
+ font-weight: inherit;
352
+ position: relative;
353
+ }
354
+
355
+ /* Continuous professional highlight - stays until end */
356
+ /* Golden Yellow - Energetic & Positive */
357
+ .word.highlighted {
358
+ background: linear-gradient(120deg, rgba(251, 191, 36, 0.25) 0%, rgba(245, 158, 11, 0.35) 100%);
359
+ color: #78350f; /* Dark Amber */
360
+ font-weight: 600;
361
+ padding: 2px 1px;
362
+ border-radius: 4px;
363
+ box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
364
+ }
365
+
366
+ /* Inline code snippet (small code) - Styled like the dedicated code slide */
367
+ .inline-code-section {
368
+ background: #f8f9fa;
369
+ border: 2px solid #e3e8ef;
370
+ border-radius: 10px;
371
+ padding: 25px;
372
+ margin-top: 1.5rem;
373
+ box-shadow: 0 2px 8px rgba(47, 111, 236, 0.1);
374
+ opacity: 0;
375
+ transform: translateY(20px);
376
+ transition: all 0.6s ease-out {{ code_snippet_delay }};
377
+ }
378
+
379
+ .slide.animate .inline-code-section {
380
+ opacity: 1;
381
+ transform: translateY(0);
382
+ }
383
+
384
+ .inline-code-header {
385
+ display: flex;
386
+ align-items: center;
387
+ justify-content: space-between;
388
+ margin-bottom: 20px;
389
+ padding-bottom: 15px;
390
+ border-bottom: 2px solid #e3e8ef;
391
+ }
392
+
393
+ .inline-code-title {
394
+ font-size: 20px;
395
+ font-weight: 600;
396
+ color: {{ bullet_icon_color|default('#2f6fec') }};
397
+ display: flex;
398
+ align-items: center;
399
+ gap: 8px;
400
+ }
401
+
402
+ .inline-code-icon {
403
+ width: 20px;
404
+ height: 20px;
405
+ }
406
+
407
+ .inline-code-block {
408
+ font-family: 'Fira Code', 'JetBrains Mono', 'Source Code Pro', 'Consolas', 'Monaco', 'Courier New', monospace;
409
+ font-size: 19px;
410
+ line-height: 1.7;
411
+ color: #2d3748;
412
+ }
413
+
414
+ .inline-code-block .code-line {
415
+ display: block;
416
+ }
417
+
418
+ /* === PYGMENTS SYNTAX HIGHLIGHTING FOR INLINE CODE === */
419
+ {{ pygments_css }}
420
+
421
+ .corner-logo {
422
+ position: absolute;
423
+ bottom: 20px;
424
+ right: 20px;
425
+ width: 50px;
426
+ height: auto;
427
+ z-index: 4;
428
+ opacity: 0;
429
+ transition: opacity 0.5s ease-in {{ logo_delay }};
430
+ }
431
+
432
+ .slide.animate .corner-logo {
433
+ opacity: 1;
434
+ }
435
+ </style>
436
+ </head>
437
+ <body>
438
+
439
+ <div class="slide" id="slide">
440
+ <!-- Left vertical accent bar -->
441
+ <div class="vertical-accent"></div>
442
+
443
+ <!-- Decorative elements on accent bar -->
444
+ <div class="accent-dots">
445
+ <div class="accent-dot"></div>
446
+ <div class="accent-dot"></div>
447
+ <div class="accent-dot"></div>
448
+ <div class="accent-dot"></div>
449
+ <div class="accent-dot"></div>
450
+ </div>
451
+ <div class="accent-line"></div>
452
+
453
+ <!-- Header with title -->
454
+ <div class="header-section">
455
+ <h1 class="main-title">{{ main_title }}</h1>
456
+ <div class="title-accent"></div>
457
+ </div>
458
+
459
+ <!-- Large image on left -->
460
+ <div class="image-section">
461
+ <div class="image-container">
462
+ <img src="{{ image_path }}" alt="{{ image_alt|default('Tech Course') }}" class="main-image">
463
+ <div class="image-gradient"></div>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Right content panel -->
468
+ <div class="content-panel">
469
+ <h2 class="subtitle">{{ subtitle_text }}</h2>
470
+
471
+ <div class="bullet-list">
472
+ {% if enable_word_highlighting %}
473
+ <!-- Word-by-word rendering with highlighting -->
474
+ {% for bullet_data in bullets_with_highlights %}
475
+ {% if bullet_data.text %}
476
+ {% set outer_index = loop.index0 %}
477
+ <div class="bullet-item" data-bullet-index="{{ outer_index }}">
478
+ <div class="bullet-icon"></div>
479
+ <div class="bullet-text">
480
+ {% for word_obj in bullet_data.word_data %}
481
+ <span class="word"
482
+ data-start="{{ word_obj.start }}"
483
+ data-end="{{ word_obj.end }}"
484
+ data-bullet="{{ outer_index }}"
485
+ data-word-index="{{ loop.index0 }}"
486
+ data-highlight="{{ 'true' if word_obj.highlight else 'false' }}">{{ word_obj.word | safe }}</span>{% if not loop.last %}<span> </span>{% endif %}
487
+ {% endfor %}
488
+ </div>
489
+ </div>
490
+ {% endif %}
491
+ {% endfor %}
492
+ {% else %}
493
+ <!-- Fallback: Regular bullet rendering -->
494
+ {% if bullet_point_1 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_1|safe }}</div></div>{% endif %}
495
+ {% if bullet_point_2 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_2|safe }}</div></div>{% endif %}
496
+ {% if bullet_point_3 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_3|safe }}</div></div>{% endif %}
497
+ {% if bullet_point_4 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_4|safe }}</div></div>{% endif %}
498
+ {% if bullet_point_5 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_5|safe }}</div></div>{% endif %}
499
+ {% if bullet_point_6 %}<div class="bullet-item"><div class="bullet-icon"></div><div class="bullet-text">{{ bullet_point_6|safe }}</div></div>{% endif %}
500
+ {% endif %}
501
+ </div>
502
+
503
+ {% if has_code_snippet %}
504
+ <div class="inline-code-section">
505
+ <div class="inline-code-header">
506
+ <div class="inline-code-title">
507
+ <svg class="inline-code-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
508
+ <path d="M8 6L4 10L8 14" stroke="{{ bullet_icon_color|default('#2f6fec') }}" stroke-width="2" stroke-linecap="round"/>
509
+ <path d="M16 6L20 10L16 14" stroke="{{ bullet_icon_color|default('#2f6fec') }}" stroke-width="2" stroke-linecap="round"/>
510
+ </svg>
511
+ {{ code_snippet_label }}
512
+ </div>
513
+ </div>
514
+ <div class="inline-code-block">
515
+ {{ code_snippet_content|safe }}
516
+ </div>
517
+ </div>
518
+ {% endif %}
519
+ </div>
520
+
521
+ <!-- Bottom-right logo -->
522
+ <img src="{{ logo_path }}" alt="Corner Logo" class="corner-logo">
523
+ </div>
524
+
525
+ <script>
526
+ // Configuration
527
+ const ENABLE_WORD_HIGHLIGHTING = {{ 'true' if enable_word_highlighting else 'false' }};
528
+ const BULLET_DELAYS = {{ bullet_highlight_delays }};
529
+ const AUDIO_START_DELAY = 2500; // 2.5 seconds - matches animation delay before narration
530
+ const EARLY_HIGHLIGHT_OFFSET = 0;
531
+
532
+ // Auto-play animation on page load
533
+ window.addEventListener('load', () => {
534
+ const slide = document.getElementById('slide');
535
+
536
+ // Start animation immediately
537
+ setTimeout(() => {
538
+ slide.classList.add('animate');
539
+
540
+ if (ENABLE_WORD_HIGHLIGHTING) {
541
+ // Word-level highlighting based on audio timings
542
+ highlightWordsWithTiming();
543
+ } else {
544
+ // Fallback: Bullet-level highlighting
545
+ highlightBulletsOnly();
546
+ }
547
+ }, 100);
548
+ });
549
+
550
+ function highlightWordsWithTiming() {
551
+ const wordsToHighlight = document.querySelectorAll('.word[data-highlight="true"]');
552
+ console.log(`[Word Highlighting] Found ${wordsToHighlight.length} word instances to highlight.`);
553
+
554
+ wordsToHighlight.forEach((word, index) => {
555
+ const startTime = parseFloat(word.dataset.start) * 1000; // Convert to ms from audio
556
+
557
+ // Apply audio delay for better sync
558
+ const adjustedStartTime = Math.max(0, startTime + AUDIO_START_DELAY);
559
+
560
+ // Schedule highlight
561
+ setTimeout(() => {
562
+ word.classList.add('highlighted');
563
+ // Optional: log the highlight action for debugging
564
+ // console.log(`[Highlight] "${word.textContent.trim()}" at ${(adjustedStartTime/1000).toFixed(2)}s (bullet ${word.dataset.bullet})`);
565
+ }, adjustedStartTime);
566
+ });
567
+
568
+ // Animate the bullet icons
569
+ const bullets = document.querySelectorAll('.bullet-item');
570
+ bullets.forEach((bullet, index) => {
571
+ if (index < BULLET_DELAYS.length) {
572
+ setTimeout(() => {
573
+ bullet.classList.add('active');
574
+ setTimeout(() => bullet.classList.remove('active'), 2000); // Animation duration
575
+ }, BULLET_DELAYS[index]);
576
+ }
577
+ });
578
+ }
579
+
580
+ function highlightBulletsOnly() {
581
+ // Fallback bullet highlighting logic
582
+ const bullets = document.querySelectorAll('.bullet-points li');
583
+
584
+ bullets.forEach((bullet, index) => {
585
+ if (index < BULLET_DELAYS.length) {
586
+ setTimeout(() => {
587
+ bullet.classList.add('active');
588
+ setTimeout(() => bullet.classList.remove('active'), 1500);
589
+ }, BULLET_DELAYS[index]);
590
+ }
591
+ });
592
+ }
593
+
594
+ function setHighlightTheme(theme) {
595
+ const highlightedWords = document.querySelectorAll('.word.highlighted');
596
+ highlightedWords.forEach(word => {
597
+ word.classList.remove('blue-theme', 'green-theme', 'purple-theme');
598
+ if (theme !== 'default') {
599
+ word.classList.add(`${theme}-theme`);
600
+ }
601
+ });
602
+ }
603
+ </script>
604
+ <script>
605
+ document.addEventListener("DOMContentLoaded", function() {
606
+ renderMathInElement(document.body, {
607
+ delimiters: [
608
+ {left: "$$", right: "$$", display: true},
609
+ {left: "$", right: "$", display: false}
610
+ ]
611
+ });
612
+ });
613
+ </script>
614
+ </body>
615
+ </html>
src/template/slide/thank_you.html ADDED
@@ -0,0 +1,264 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Thank You Slide</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ font-family: 'Segoe UI', Arial, sans-serif;
13
+ }
14
+
15
+ body {
16
+ display: flex;
17
+ justify-content: center;
18
+ align-items: center;
19
+ min-height: 100vh;
20
+ background: #f5f5f5;
21
+ overflow: hidden;
22
+ }
23
+
24
+ .slide {
25
+ width: 1920px;
26
+ height: 1080px;
27
+ position: relative;
28
+ overflow: hidden;
29
+ background: white;
30
+ }
31
+
32
+ /* Animated circles that swipe from left */
33
+ .circle-large {
34
+ position: absolute;
35
+ top: 50%;
36
+ left: 0;
37
+ width: 2700px;
38
+ height: 2700px;
39
+ background: linear-gradient(135deg, #dbe8ff 0%, #b3d4ff 100%);
40
+ border-radius: 50%;
41
+ transform: translate(-100%, -50%);
42
+ z-index: 1;
43
+ animation: swiperLarge 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s forwards;
44
+ }
45
+
46
+ .circle-small {
47
+ position: absolute;
48
+ top: 50%;
49
+ left: 0;
50
+ width: 2376px;
51
+ height: 2376px;
52
+ background: linear-gradient(135deg, #2f6fec 0%, #1e5dd8 100%);
53
+ border-radius: 50%;
54
+ transform: translate(-100%, -50%);
55
+ z-index: 2;
56
+ animation: swiperSmall 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.35s forwards;
57
+ }
58
+
59
+ @keyframes swiperLarge {
60
+ to {
61
+ transform: translate(10%, -50%);
62
+ }
63
+ }
64
+
65
+ @keyframes swiperSmall {
66
+ to {
67
+ transform: translate(15%, -50%);
68
+ }
69
+ }
70
+
71
+ /* Thank You Content */
72
+ .thankyou-content {
73
+ position: absolute;
74
+ top: 50%;
75
+ left: 50%;
76
+ transform: translate(-50%, -50%);
77
+ text-align: center;
78
+ z-index: 10;
79
+ }
80
+
81
+ .thankyou-main {
82
+ font-size: 5rem;
83
+ font-weight: 800;
84
+ color: #ffffff;
85
+ margin-bottom: 2rem;
86
+ opacity: 0;
87
+ transform: scale(0.7);
88
+ filter: blur(10px);
89
+ letter-spacing: -0.02em;
90
+ text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 8px 60px rgba(0, 0, 0, 0.3);
91
+ animation: revealText 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards;
92
+ }
93
+
94
+ @keyframes revealText {
95
+ 0% {
96
+ opacity: 0;
97
+ transform: scale(0.7);
98
+ filter: blur(10px);
99
+ }
100
+ 100% {
101
+ opacity: 1;
102
+ transform: scale(1);
103
+ filter: blur(0);
104
+ }
105
+ }
106
+
107
+ .thankyou-divider {
108
+ width: 150px;
109
+ height: 4px;
110
+ background: linear-gradient(90deg, transparent, white, transparent);
111
+ margin: 0 auto 2rem;
112
+ opacity: 0;
113
+ transform: scaleX(0);
114
+ animation: expandLine 0.8s ease-out 2.2s forwards;
115
+ }
116
+
117
+ @keyframes expandLine {
118
+ to {
119
+ opacity: 1;
120
+ transform: scaleX(1);
121
+ }
122
+ }
123
+
124
+ .thankyou-subtitle {
125
+ font-size: 2.8rem;
126
+ color: rgba(255, 255, 255, 0.95);
127
+ font-weight: 300;
128
+ letter-spacing: 0.1em;
129
+ text-transform: uppercase;
130
+ opacity: 0;
131
+ transform: translateY(30px);
132
+ animation: fadeInUp 0.8s ease-out 2.5s forwards;
133
+ }
134
+
135
+ @keyframes fadeInUp {
136
+ to {
137
+ opacity: 1;
138
+ transform: translateY(0);
139
+ }
140
+ }
141
+
142
+ .thankyou-message {
143
+ font-size: 1.6rem;
144
+ color: rgba(255, 255, 255, 0.85);
145
+ font-weight: 400;
146
+ margin-top: 2rem;
147
+ opacity: 0;
148
+ transform: translateY(20px);
149
+ line-height: 1.6;
150
+ animation: fadeInUp 0.8s ease-out 2.8s forwards;
151
+ }
152
+
153
+ /* Animated particles */
154
+ .particles {
155
+ position: absolute;
156
+ top: 0;
157
+ left: 0;
158
+ width: 100%;
159
+ height: 100%;
160
+ z-index: 5;
161
+ pointer-events: none;
162
+ }
163
+
164
+ .particle {
165
+ position: absolute;
166
+ width: 8px;
167
+ height: 8px;
168
+ background: white;
169
+ border-radius: 50%;
170
+ opacity: 0;
171
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
172
+ animation: floatParticle 3s ease-out forwards;
173
+ }
174
+
175
+ @keyframes floatParticle {
176
+ 0% {
177
+ opacity: 0;
178
+ transform: translateY(0) scale(0);
179
+ }
180
+ 10% {
181
+ opacity: 1;
182
+ transform: translateY(-30px) scale(1);
183
+ }
184
+ 100% {
185
+ opacity: 0;
186
+ transform: translateY(-200px) scale(0.3);
187
+ }
188
+ }
189
+
190
+ /* Subtle glow effects */
191
+ .glow-circle {
192
+ position: absolute;
193
+ top: 50%;
194
+ left: 50%;
195
+ width: 600px;
196
+ height: 600px;
197
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
198
+ border-radius: 50%;
199
+ transform: translate(-50%, -50%) scale(0);
200
+ z-index: 3;
201
+ opacity: 0;
202
+ animation: pulseGlow 2s ease-out 1.7s forwards;
203
+ }
204
+
205
+ @keyframes pulseGlow {
206
+ 0% {
207
+ opacity: 0;
208
+ transform: translate(-50%, -50%) scale(0);
209
+ }
210
+ 50% {
211
+ opacity: 1;
212
+ transform: translate(-50%, -50%) scale(1.2);
213
+ }
214
+ 100% {
215
+ opacity: 0.6;
216
+ transform: translate(-50%, -50%) scale(1);
217
+ }
218
+ }
219
+ </style>
220
+ </head>
221
+ <body>
222
+
223
+ <div class="slide">
224
+ <!-- Animated circles -->
225
+ <div class="circle-large"></div>
226
+ <div class="circle-small"></div>
227
+
228
+ <!-- Glow effect -->
229
+ <div class="glow-circle"></div>
230
+
231
+ <!-- Particles container -->
232
+ <div class="particles" id="particles"></div>
233
+
234
+ <!-- Thank You Content -->
235
+ <div class="thankyou-content">
236
+ <h1 class="thankyou-main">Thank You</h1>
237
+ <div class="thankyou-divider"></div>
238
+ <p class="thankyou-message">Questions & Discussion</p>
239
+ </div>
240
+ </div>
241
+
242
+ <script>
243
+ // Create particles on load
244
+ function createParticles() {
245
+ const particlesContainer = document.getElementById('particles');
246
+
247
+ for (let i = 0; i < 40; i++) {
248
+ const particle = document.createElement('div');
249
+ particle.className = 'particle';
250
+ particle.style.left = `${20 + Math.random() * 60}%`;
251
+ particle.style.top = `${30 + Math.random() * 40}%`;
252
+ particle.style.animationDelay = `${1.7 + Math.random() * 1}s`;
253
+ particlesContainer.appendChild(particle);
254
+ }
255
+ }
256
+
257
+ // Auto-start animation when page loads
258
+ window.addEventListener('load', () => {
259
+ createParticles();
260
+ });
261
+ </script>
262
+
263
+ </body>
264
+ </html>
src/template/slide/title_slide.html ADDED
@@ -0,0 +1,113 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>{{ slide_title }}</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ .body {
15
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
+ width: 1920px;
18
+ height: 1080px;
19
+ overflow: hidden;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ }
24
+
25
+ .slide-container {
26
+ width: 100%;
27
+ height: 100%;
28
+ position: relative;
29
+ background: white;
30
+ }
31
+
32
+ .background-circle-large {
33
+ position: absolute;
34
+ top: -200px;
35
+ right: -200px;
36
+ width: 800px;
37
+ height: 800px;
38
+ background: {{ circle_large_color }};
39
+ border-radius: 50%;
40
+ opacity: 0.3;
41
+ }
42
+
43
+ .background-circle-small {
44
+ position: absolute;
45
+ bottom: -150px;
46
+ left: -150px;
47
+ width: 500px;
48
+ height: 500px;
49
+ background: {{ circle_small_color }};
50
+ border-radius: 50%;
51
+ opacity: 0.2;
52
+ }
53
+
54
+ .content {
55
+ position: relative;
56
+ z-index: 10;
57
+ width: 100%;
58
+ height: 100%;
59
+ display: flex;
60
+ flex-direction: column;
61
+ align-items: center;
62
+ justify-content: center;
63
+ text-align: center;
64
+ padding: 100px;
65
+ }
66
+
67
+ .main-title {
68
+ font-size: 96px;
69
+ font-weight: 700;
70
+ color: #1a202c;
71
+ margin-bottom: 40px;
72
+ animation: fadeInUp 1s ease-out;
73
+ }
74
+
75
+ .subtitle {
76
+ font-size: 48px;
77
+ color: #4a5568;
78
+ animation: fadeInUp 1.3s ease-out;
79
+ }
80
+
81
+ .logo {
82
+ position: absolute;
83
+ bottom: 60px;
84
+ right: 80px;
85
+ width: 200px;
86
+ height: auto;
87
+ opacity: 0;
88
+ animation: fadeIn 1s ease-out {{ logo_delay }} forwards;
89
+ }
90
+
91
+ @keyframes fadeInUp {
92
+ from {
93
+ opacity: 0;
94
+ transform: translateY(30px);
95
+ }
96
+ to {
97
+ opacity: 1;
98
+ transform: translateY(0);
99
+ }
100
+ }
101
+
102
+ @keyframes fadeIn {
103
+ to {
104
+ opacity: 1;
105
+ }
106
+ }
107
+ </style>
108
+ </head>
109
+ <body>
110
+ <div class="slide-container">
111
+ </div>
112
+ </body>
113
+ </html>
src/template/slide/visualization_base.html ADDED
@@ -0,0 +1,198 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>{{ main_title }}</title>
7
+ <style>
8
+ @import url('[https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap](https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap)');
9
+
10
+ :root {
11
+ --bg-color: #f0f4f9;
12
+ --slide-bg: linear-gradient(135deg, #ffffff 0%, #eef5fc 100%);
13
+ --title-color: #1a3a6e;
14
+ /* --subtitle-color: #3b5998; -- No longer needed */
15
+ --text-color: #333;
16
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
17
+ --border: 1px solid rgba(255, 255, 255, 0.5);
18
+ --radius: 12px;
19
+ --font-main: 'Poppins', sans-serif;
20
+
21
+ /* These are placeholders Claude will replace */
22
+ --circle-large-color: {{ circle_large_color }};
23
+ --circle-small-color: {{ circle_small_color }};
24
+ --bullet-color: {{ bullet_color }};
25
+ }
26
+
27
+ * {
28
+ box-sizing: border-box;
29
+ margin: 0;
30
+ padding: 0;
31
+ }
32
+
33
+ body, html {
34
+ width: 1920px;
35
+ height: 1080px;
36
+ display: flex;
37
+ justify-content: center;
38
+ align-items: center;
39
+ font-family: var(--font-main);
40
+ background-color: var(--bg-color);
41
+ overflow: hidden;
42
+ }
43
+
44
+ .slide-container {
45
+ width: 1920px;
46
+ height: 1080px;
47
+ background: var(--slide-bg);
48
+ border-radius: var(--radius);
49
+ box-shadow: var(--shadow);
50
+ border: var(--border);
51
+ padding: 60px 80px;
52
+ display: flex;
53
+ flex-direction: column;
54
+ overflow: hidden;
55
+ position: relative;
56
+ }
57
+
58
+ /* Decorative Circles */
59
+ .circle {
60
+ position: absolute;
61
+ border-radius: 50%;
62
+ opacity: 0.1;
63
+ background: linear-gradient(45deg, var(--circle-large-color), var(--circle-small-color));
64
+ z-index: 1;
65
+ }
66
+ .circle-1 { width: 300px; height: 300px; top: -100px; left: -100px; }
67
+ .circle-2 { width: 450px; height: 450px; bottom: -150px; right: -150px; opacity: 0.15; }
68
+ .circle-3 { width: 150px; height: 150px; bottom: 100px; left: 20%; opacity: 0.05; }
69
+
70
+ header {
71
+ z-index: 10;
72
+ }
73
+
74
+ .main-title {
75
+ font-size: 72px;
76
+ font-weight: 700;
77
+ color: var(--title-color);
78
+ margin-bottom: 10px; /* You might want to adjust this padding/margin */
79
+ }
80
+
81
+ /* .subtitle {
82
+ font-size: 36px;
83
+ font-weight: 400;
84
+ color: var(--subtitle-color);
85
+ border-left: 5px solid var(--bullet-color);
86
+ padding-left: 20px;
87
+ }
88
+ */
89
+
90
+ /*
91
+ .logo {
92
+ position: absolute;
93
+ top: 60px;
94
+ right: 80px;
95
+ width: 180px;
96
+ z-index: 10;
97
+ }
98
+ */
99
+
100
+ .content-area {
101
+ flex-grow: 1;
102
+ margin-top: 40px;
103
+ z-index: 5;
104
+ position: relative;
105
+ display: flex; /* Make it a flex container */
106
+ gap: 20px; /* Add some space between avatar and viz */
107
+ }
108
+
109
+ .avatar-placeholder {
110
+ width: 500px; /* Set a fixed width for the empty space */
111
+ height: 100%;
112
+ flex-shrink: 0; /* Prevent it from shrinking */
113
+ }
114
+
115
+ .visualization-wrapper {
116
+ flex-grow: 1; /* This will take up the remaining space */
117
+ height: 100%;
118
+ position: relative;
119
+ }
120
+
121
+ .bullet-points {
122
+ list-style: none;
123
+ padding-left: 20px;
124
+ margin-top: 30px;
125
+ max-width: 800px;
126
+ }
127
+
128
+ .bullet-points li {
129
+ font-size: 28px;
130
+ color: var(--text-color);
131
+ margin-bottom: 25px;
132
+ line-height: 1.6;
133
+ display: flex;
134
+ align-items: flex-start;
135
+ }
136
+
137
+ .bullet-points li::before {
138
+ content: '•';
139
+ color: var(--bullet-color);
140
+ font-size: 40px;
141
+ font-weight: 700;
142
+ margin-right: 20px;
143
+ line-height: 0.8;
144
+ }
145
+
146
+ /* Canvas container styles (for Claude to use) */
147
+ .visualization-container {
148
+ width: 100%;
149
+ height: 100%;
150
+ }
151
+
152
+ .canvas-wrapper {
153
+ width: 100%;
154
+ height: 100%;
155
+ border-radius: var(--radius);
156
+ box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
157
+ background: #fff;
158
+ position: relative;
159
+ overflow: hidden;
160
+ }
161
+
162
+ canvas {
163
+ width: 100%;
164
+ height: 100%;
165
+ display: block;
166
+ }
167
+
168
+ </style>
169
+ </head>
170
+ <body>
171
+ <div class="slide-container">
172
+ <div class="circle circle-1"></div>
173
+ <div class="circle circle-2"></div>
174
+ <div class="circle circle-3"></div>
175
+
176
+ <header>
177
+ <h1 class="main-title">{{ main_title }}</h1>
178
+ </header>
179
+
180
+ <main class="content-area">
181
+
182
+ <div class="avatar-placeholder"></div>
183
+
184
+ <div class="visualization-wrapper">
185
+
186
+ <ul class="bullet-points">
187
+ <li>{{ bullet_point_1 }}</li>
188
+ <li>{{ bullet_point_2 }}</li>
189
+ <li>{{ bullet_point_3 }}</li>
190
+ <li>{{ bullet_point_4 }}</li>
191
+ </ul>
192
+
193
+ </div>
194
+
195
+ </main>
196
+ </div>
197
+ </body>
198
+ </html>
src/template/slide/welcome_slide.html ADDED
@@ -0,0 +1,452 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Animated Welcome Slide</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body, html {
15
+ width: 100%;
16
+ height: 100%;
17
+ overflow: hidden;
18
+ background: #fff;
19
+ font-family: 'Segoe UI', sans-serif;
20
+ }
21
+
22
+ .welcome-slide {
23
+ width: 100%;
24
+ height: 100vh;
25
+ position: relative;
26
+ overflow: hidden;
27
+ background: #fff;
28
+ }
29
+
30
+ /* Top Left Concentric Semi Circle - Increased from 250px to 380px */
31
+ .top-left-arc {
32
+ position: absolute;
33
+ top: 0;
34
+ left: 0;
35
+ width: 380px;
36
+ height: 380px;
37
+ border-radius: 50%;
38
+ background: #2f6fec;
39
+ overflow: hidden;
40
+ transform: translate(-20%, -20%) scale(0);
41
+ animation: popIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s forwards;
42
+ }
43
+
44
+ .top-left-arc::after {
45
+ content: "";
46
+ position: absolute;
47
+ top: 0;
48
+ left: 0;
49
+ width: 380px;
50
+ height: 380px;
51
+ background: repeating-radial-gradient(
52
+ circle at top left,
53
+ transparent 0,
54
+ transparent 14px,
55
+ white 15px,
56
+ white 16px
57
+ );
58
+ border-radius: 50%;
59
+ }
60
+
61
+ /* Top Center Striped Circle - Increased from 260px to 400px */
62
+ .striped-circle {
63
+ position: absolute;
64
+ top: -30px;
65
+ left: 50%;
66
+ transform: translate(-50%, -50%) rotate(0deg) scale(0);
67
+ width: 400px;
68
+ height: 400px;
69
+ border-radius: 50%;
70
+ background: repeating-linear-gradient(
71
+ 45deg,
72
+ #dbe8ff 0px,
73
+ #dbe8ff 15px,
74
+ white 15px,
75
+ white 30px
76
+ );
77
+ mix-blend-mode: multiply;
78
+ animation: spinScale 1s ease-out 0.4s forwards;
79
+ }
80
+
81
+ /* Top Right Circle with Triangle - Increased from 300px to 450px */
82
+ .top-right-circle {
83
+ position: absolute;
84
+ top: 40px;
85
+ right: -80px;
86
+ width: 450px;
87
+ height: 450px;
88
+ border-radius: 50%;
89
+ background: #2f6fec;
90
+ transform: translate(200%, -50%) scale(0);
91
+ animation: slideInBounce 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s forwards;
92
+ }
93
+
94
+ .top-right-triangle {
95
+ position: absolute;
96
+ top: -200px;
97
+ right: -350px;
98
+ width: 0;
99
+ height: 0;
100
+ border-left: 220px solid transparent;
101
+ border-right: 370px solid transparent;
102
+ border-bottom: 220px solid #f0f5ff;
103
+ transform: rotate(-30deg) translateY(-100px);
104
+ opacity: 0;
105
+ animation: dropIn 0.7s ease-out 0.6s forwards;
106
+ }
107
+
108
+ /* Left Middle White Circle - Increased from 180px to 280px */
109
+ .white-circle {
110
+ position: absolute;
111
+ top: 200px;
112
+ left: 150px;
113
+ width: 280px;
114
+ height: 280px;
115
+ border-radius: 50%;
116
+ background: #f0f5ff;
117
+ transform: scale(0);
118
+ animation: pulse 0.8s ease-out 0.5s forwards;
119
+ }
120
+
121
+ /* Right Middle Cube - Increased from 100px to 150px */
122
+ .cube {
123
+ position: absolute;
124
+ top: 300px;
125
+ right: 220px;
126
+ width: 150px;
127
+ height: 150px;
128
+ border: 2px solid #dbe8ff;
129
+ opacity: 0;
130
+ transform: rotate(-90deg) scale(0);
131
+ animation: rotateFadeIn 0.8s ease-out 0.7s forwards;
132
+ }
133
+
134
+ .cube::before,
135
+ .cube::after {
136
+ content: '';
137
+ position: absolute;
138
+ width: 150px;
139
+ height: 150px;
140
+ border: 2px solid #dbe8ff;
141
+ }
142
+
143
+ .cube::before {
144
+ transform: translate(30px, -30px);
145
+ }
146
+
147
+ .cube::after {
148
+ width: 30px;
149
+ height: 180px;
150
+ top: -30px;
151
+ left: 150px;
152
+ border: none;
153
+ border-left: 2px solid #dbe8ff;
154
+ }
155
+
156
+ /* Bottom Right Blue Circle - Increased from 220px to 350px */
157
+ .bottom-right-circle {
158
+ position: absolute;
159
+ bottom: -120px;
160
+ right: -120px;
161
+ width: 350px;
162
+ height: 350px;
163
+ border-radius: 50%;
164
+ background: #2f6fec;
165
+ transform: scale(0);
166
+ animation: elasticGrow 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s forwards;
167
+ }
168
+
169
+ /* Bottom Center Blue Circle - Increased from 200px to 320px */
170
+ .bottom-center-circle {
171
+ position: absolute;
172
+ bottom: -200px;
173
+ left: 45%;
174
+ transform: translateX(-50%) scale(0);
175
+ width: 320px;
176
+ height: 320px;
177
+ border-radius: 50%;
178
+ background: #2f6fec;
179
+ animation: bounceIn 0.9s ease-out 0.8s forwards;
180
+ }
181
+
182
+ /* Bottom Left Triangle Polygon - Increased from 250px to 380px */
183
+ .bottom-left-polygon {
184
+ position: absolute;
185
+ bottom: 0;
186
+ left: 0;
187
+ width: 380px;
188
+ height: 270px;
189
+ background: #f0f5ff;
190
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
191
+ transform: translateX(-100%);
192
+ animation: slideInLeft 0.7s ease-out 0.4s forwards;
193
+ }
194
+
195
+ /* Bottom Left Dots - Increased from 8px to 12px */
196
+ .dots {
197
+ position: absolute;
198
+ bottom: 180px;
199
+ left: 130px;
200
+ display: grid;
201
+ grid-template-columns: repeat(4, 12px);
202
+ grid-gap: 12px;
203
+ }
204
+
205
+ .dots div {
206
+ width: 12px;
207
+ height: 12px;
208
+ background: #dbe8ff;
209
+ border-radius: 50%;
210
+ transform: scale(0);
211
+ animation: popDots 0.4s ease-out forwards;
212
+ }
213
+
214
+ .dots div:nth-child(1) { animation-delay: 1s; }
215
+ .dots div:nth-child(2) { animation-delay: 1.05s; }
216
+ .dots div:nth-child(3) { animation-delay: 1.1s; }
217
+ .dots div:nth-child(4) { animation-delay: 1.15s; }
218
+ .dots div:nth-child(5) { animation-delay: 1.05s; }
219
+ .dots div:nth-child(6) { animation-delay: 1.1s; }
220
+ .dots div:nth-child(7) { animation-delay: 1.15s; }
221
+ .dots div:nth-child(8) { animation-delay: 1.2s; }
222
+ .dots div:nth-child(9) { animation-delay: 1.1s; }
223
+ .dots div:nth-child(10) { animation-delay: 1.15s; }
224
+ .dots div:nth-child(11) { animation-delay: 1.2s; }
225
+ .dots div:nth-child(12) { animation-delay: 1.25s; }
226
+
227
+ /* Center Content */
228
+ .center-content {
229
+ position: absolute;
230
+ top: 50%;
231
+ left: 50%;
232
+ transform: translate(-50%, -50%);
233
+ text-align: center;
234
+ opacity: 0;
235
+ animation: fadeInUp 1s ease-out 0.9s forwards;
236
+ }
237
+
238
+ .center-content .logo {
239
+ height: 120px;
240
+ margin-bottom: 30px;
241
+ transform: translateY(30px) scale(0.8);
242
+ opacity: 0;
243
+ animation: logoFloat 1s ease-out 1s forwards;
244
+ }
245
+
246
+ /* Title - Increased from 3vw to 4.5vw */
247
+ .title {
248
+ font-size: 4.5vw;
249
+ font-weight: 700;
250
+ color: #2f6fec;
251
+ margin-bottom: 15px;
252
+ transform: translateY(20px);
253
+ opacity: 0;
254
+ animation: textReveal 0.8s ease-out 1.2s forwards;
255
+ }
256
+
257
+ /* Subtitle - Increased from 1.4vw to 2.2vw */
258
+ .subtitle {
259
+ font-size: 2.2vw;
260
+ color: #444;
261
+ transform: translateY(20px);
262
+ opacity: 0;
263
+ animation: textReveal 0.8s ease-out 1.4s forwards;
264
+ }
265
+
266
+ /* Animations */
267
+ @keyframes popIn {
268
+ 0% {
269
+ transform: translate(-20%, -20%) scale(0);
270
+ }
271
+ 70% {
272
+ transform: translate(-20%, -20%) scale(1.1);
273
+ }
274
+ 100% {
275
+ transform: translate(-20%, -20%) scale(1);
276
+ }
277
+ }
278
+
279
+ @keyframes spinScale {
280
+ 0% {
281
+ transform: translate(-50%, -50%) rotate(0deg) scale(0);
282
+ opacity: 0;
283
+ }
284
+ 100% {
285
+ transform: translate(-50%, -50%) rotate(180deg) scale(1);
286
+ opacity: 1;
287
+ }
288
+ }
289
+
290
+ @keyframes slideInBounce {
291
+ 0% {
292
+ transform: translate(200%, -50%) scale(0);
293
+ }
294
+ 60% {
295
+ transform: translate(10%, -50%) scale(1.05);
296
+ }
297
+ 100% {
298
+ transform: translate(10%, -50%) scale(1);
299
+ }
300
+ }
301
+
302
+ @keyframes dropIn {
303
+ 0% {
304
+ transform: rotate(-30deg) translateY(-100px);
305
+ opacity: 0;
306
+ }
307
+ 60% {
308
+ transform: rotate(-30deg) translateY(10px);
309
+ opacity: 1;
310
+ }
311
+ 100% {
312
+ transform: rotate(-30deg) translateY(0);
313
+ opacity: 1;
314
+ }
315
+ }
316
+
317
+ @keyframes pulse {
318
+ 0% {
319
+ transform: scale(0);
320
+ opacity: 0;
321
+ }
322
+ 50% {
323
+ transform: scale(1.15);
324
+ opacity: 0.8;
325
+ }
326
+ 100% {
327
+ transform: scale(1);
328
+ opacity: 1;
329
+ }
330
+ }
331
+
332
+ @keyframes rotateFadeIn {
333
+ 0% {
334
+ transform: rotate(-90deg) scale(0);
335
+ opacity: 0;
336
+ }
337
+ 100% {
338
+ transform: rotate(0deg) scale(1);
339
+ opacity: 1;
340
+ }
341
+ }
342
+
343
+ @keyframes elasticGrow {
344
+ 0% {
345
+ transform: scale(0);
346
+ }
347
+ 50% {
348
+ transform: scale(1.2);
349
+ }
350
+ 75% {
351
+ transform: scale(0.9);
352
+ }
353
+ 100% {
354
+ transform: scale(1);
355
+ }
356
+ }
357
+
358
+ @keyframes bounceIn {
359
+ 0% {
360
+ transform: translateX(-50%) scale(0) translateY(50px);
361
+ }
362
+ 60% {
363
+ transform: translateX(-50%) scale(1.1) translateY(-10px);
364
+ }
365
+ 100% {
366
+ transform: translateX(-50%) scale(1) translateY(0);
367
+ }
368
+ }
369
+
370
+ @keyframes slideInLeft {
371
+ 0% {
372
+ transform: translateX(-100%);
373
+ }
374
+ 100% {
375
+ transform: translateX(0);
376
+ }
377
+ }
378
+
379
+ @keyframes popDots {
380
+ 0% {
381
+ transform: scale(0);
382
+ opacity: 0;
383
+ }
384
+ 50% {
385
+ transform: scale(1.3);
386
+ opacity: 1;
387
+ }
388
+ 100% {
389
+ transform: scale(1);
390
+ opacity: 1;
391
+ }
392
+ }
393
+
394
+ @keyframes fadeInUp {
395
+ to {
396
+ opacity: 1;
397
+ transform: translate(-50%, -50%);
398
+ }
399
+ }
400
+
401
+ @keyframes logoFloat {
402
+ 0% {
403
+ transform: translateY(30px) scale(0.8);
404
+ opacity: 0;
405
+ }
406
+ 60% {
407
+ transform: translateY(-5px) scale(1.05);
408
+ opacity: 1;
409
+ }
410
+ 100% {
411
+ transform: translateY(0) scale(1);
412
+ opacity: 1;
413
+ }
414
+ }
415
+
416
+ @keyframes textReveal {
417
+ 0% {
418
+ transform: translateY(20px);
419
+ opacity: 0;
420
+ }
421
+ 100% {
422
+ transform: translateY(0);
423
+ opacity: 1;
424
+ }
425
+ }
426
+ </style>
427
+ </head>
428
+ <body>
429
+ <div class="welcome-slide">
430
+ <div class="top-left-arc"></div>
431
+ <div class="striped-circle"></div>
432
+ <div class="top-right-circle"></div>
433
+ <div class="top-right-triangle"></div>
434
+ <div class="white-circle"></div>
435
+ <div class="cube"></div>
436
+ <div class="bottom-right-circle"></div>
437
+ <div class="bottom-center-circle"></div>
438
+ <div class="bottom-left-polygon"></div>
439
+ <div class="dots">
440
+ <div></div><div></div><div></div><div></div>
441
+ <div></div><div></div><div></div><div></div>
442
+ <div></div><div></div><div></div><div></div>
443
+ </div>
444
+
445
+ <div class="center-content">
446
+ <img src="{{ logo_path }}" alt="Logo" class="logo">
447
+ <h1 class="title">{{ main_title }}</h1>
448
+ <h2 class="subtitle">{{ subtitle_text }}</h2>
449
+ </div>
450
+ </div>
451
+ </body>
452
+ </html>