Hugging Face's logo

Spaces:
Clearpaths
/
anycoder-6447a9bb
Running

App Files Community
Clearpaths commited on
Commit
853c56c
·
verified ·
1 Parent(s): c393a26

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +319 -317
index.html CHANGED
@@ -1,327 +1,329 @@
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>Enhanced Email Template Designer</title>
7
- <!-- Import Font Awesome for modern icons -->
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <!-- Google Fonts -->
10
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
11
-
12
- <style>
13
- :root {
14
- --primary-blue: #1A3F70;
15
- --accent-blue: #4379B8;
16
- --bg-gray: #F4F7F9;
17
- --text-dark: #2D3748;
18
- --text-light: #718096;
19
- --white: #FFFFFF;
20
- --shadow: 0 10px 25px rgba(0,0,0,0.1);
21
- --transition: all 0.3s ease;
22
- }
23
-
24
- * {
25
- box-sizing: border-box;
26
- margin: 0;
27
- padding: 0;
28
- }
29
-
30
- body {
31
- font-family: 'Inter', sans-serif;
32
- background-color: var(--bg-gray);
33
- color: var(--text-dark);
34
- line-height: 1.6;
35
- padding: 20px;
36
- }
37
-
38
- /* Header Branding Section */
39
- header {
40
- max-width: 800px;
41
- margin: 0 auto 30px auto;
42
- display: flex;
43
- justify-content: space-between;
44
- align-items: center;
45
- padding: 15px;
46
- background: var(--white);
47
- border-radius: 12px;
48
- box-shadow: var(--shadow);
49
- }
50
-
51
- .branding-text {
52
- font-weight: 700;
53
- color: var(--primary-blue);
54
- font-size: 1.1rem;
55
- }
56
-
57
- .anycoder-link {
58
- text-decoration: none;
59
- color: var(--accent-blue);
60
- font-size: 0.85rem;
61
- font-weight: 600;
62
- transition: var(--transition);
63
- padding: 8px 16px;
64
- border: 2px solid var(--accent-blue);
65
- border-radius: 20px;
66
- }
67
-
68
- .anycoder-link:hover {
69
- background: var(--accent-blue);
70
- color: white;
71
- }
72
-
73
- /* Email Preview Container */
74
- .email-container {
75
- max-width: 650px;
76
- margin: 0 auto;
77
- background: var(--white);
78
- border-radius: 16px;
79
- overflow: hidden;
80
- box-shadow: var(--shadow);
81
- border: 1px solid #e2e8f0;
82
- }
83
-
84
- /* Email Header */
85
- .email-header {
86
- position: relative;
87
- width: 100%;
88
- overflow: hidden;
89
- }
90
-
91
- .email-header img {
92
- width: 100%;
93
- display: block;
94
- transition: var(--transition);
95
- }
96
-
97
- .email-header:hover img {
98
- transform: scale(1.02);
99
- }
100
-
101
- /* Email Body */
102
- .email-content {
103
- padding: 40px 50px;
104
- }
105
-
106
- .greeting {
107
- font-family: 'Playfair Display', serif;
108
- font-size: 24px;
109
- color: var(--primary-blue);
110
- margin-bottom: 20px;
111
- }
112
-
113
- .body-text {
114
- font-size: 16px;
115
- color: var(--text-dark);
116
- margin-bottom: 25px;
117
- }
118
-
119
- .highlight-box {
120
- background: #f0f4f8;
121
- border-left: 4px solid var(--primary-blue);
122
- padding: 20px;
123
- margin: 25px 0;
124
- border-radius: 0 8px 8px 0;
125
- font-style: italic;
126
- color: var(--primary-blue);
127
- font-weight: 500;
128
- }
129
-
130
- /* Modern Button */
131
- .cta-button {
132
- display: inline-block;
133
- background-color: var(--primary-blue);
134
- color: var(--white) !important;
135
- padding: 16px 32px;
136
- text-decoration: none;
137
- border-radius: 8px;
138
- font-weight: 600;
139
- font-size: 18px;
140
- transition: var(--transition);
141
- box-shadow: 0 4px 15px rgba(26, 63, 112, 0.3);
142
- text-align: center;
143
- }
144
-
145
- .cta-button:hover {
146
- background-color: #255391;
147
- transform: translateY(-2px);
148
- box-shadow: 0 6px 20px rgba(26, 63, 112, 0.4);
149
- }
150
-
151
- /* Signature Area */
152
- .signature {
153
- margin-top: 40px;
154
- padding-top: 20px;
155
- border-top: 1px solid #edf2f7;
156
- }
157
-
158
- .sig-name {
159
- font-weight: 700;
160
- color: var(--primary-blue);
161
- display: block;
162
- margin-bottom: 4px;
163
- }
164
-
165
- .sig-title {
166
- font-size: 14px;
167
- color: var(--text-light);
168
- }
169
-
170
- /* Modern Social Icons */
171
- .social-links {
172
- display: flex;
173
- justify-content: center;
174
- gap: 15px;
175
- padding: 30px 0;
176
- background: #fcfcfc;
177
- }
178
-
179
- .social-icon {
180
- width: 40px;
181
- height: 40px;
182
- border-radius: 50%;
183
- background: var(--white);
184
- display: flex;
185
- align-items: center;
186
- justify-content: center;
187
- color: var(--primary-blue);
188
- text-decoration: none;
189
- font-size: 18px;
190
- transition: var(--transition);
191
- border: 1px solid #e2e8f0;
192
- }
193
-
194
- .social-icon:hover {
195
- background: var(--primary-blue);
196
- color: white;
197
- transform: scale(1.1);
198
- }
199
-
200
- /* Footer Branding */
201
- .email-footer {
202
- background: #f8fafc;
203
- text-align: center;
204
- padding: 40px 20px;
205
- border-top: 1px solid #e2e8f0;
206
- }
207
-
208
- .footer-logo {
209
- max-width: 300px;
210
- margin-bottom: 20px;
211
- opacity: 0.8;
212
- }
213
-
214
- .footer-tagline {
215
- font-size: 13px;
216
- color: var(--primary-blue);
217
- font-weight: 600;
218
- text-transform: uppercase;
219
- letter-spacing: 1px;
220
- margin-bottom: 15px;
221
- display: block;
222
- }
223
-
224
- .unsubscribe-link {
225
- font-size: 12px;
226
- color: var(--text-light);
227
- text-decoration: underline;
228
- cursor: pointer;
229
- }
230
-
231
- /* Responsive Design */
232
- @media (max-width: 600px) {
233
- .email-content {
234
- padding: 30px 20px;
235
- }
236
- header {
237
- flex-direction: column;
238
- gap: 15px;
239
- text-align: center;
240
- }
241
- .greeting {
242
- font-size: 20px;
243
- }
244
- }
245
- </style>
246
  </head>
 
247
  <body>
248
 
249
- <header>
250
- <div class="branding-text">Email Template Enhancer</div>
251
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
252
- </header>
253
-
254
- <div class="email-container">
255
- <!-- Header Image -->
256
- <div class="email-header">
257
- <a href="https://udallas.edu/admissions-aid/undergraduate/index.php" target="_blank">
258
- <img src="https://ugadmis.udallas.edu/www/images/Updated_Email_Header_0823%20(1).jpg" alt="University of Dallas Header">
259
- </a>
260
- </div>
261
-
262
- <!-- Main Content -->
263
- <div class="email-content">
264
- <div class="greeting">Hi {{Person-First}},</div>
265
-
266
- <div class="body-text">
267
- Congratulations again on your admission to the <strong>University of Dallas</strong>! We are thrilled to have you join our community of scholars.
268
- </div>
269
-
270
- <div class="body-text">
271
- To secure your place in the incoming class and begin your journey, please complete your deposit by <strong>May 1</strong>. This will allow you to get a head start on your new student paperwork.
272
- </div>
273
-
274
- <div style="text-align: center; margin: 35px 0;">
275
- <a href="{{Deposit-Payment-Link}}" class="cta-button">Make Your Deposit Now</a>
276
- </div>
277
-
278
- <div class="highlight-box">
279
- <i class="fa-solid fa-graduation-cap" style="margin-right: 10px;"></i>
280
- Don’t forget, you’ll also receive a <strong>$1,000 Campus Visit Grant</strong> toward your first-year cost of full-time enrollment at the University of Dallas.
281
- </div>
282
-
283
- <div class="signature">
284
- <p style="margin-bottom: 15px;">Sincerely,</p>
285
- <div class="sig-name">University of Dallas Admissions</div>
286
- <div class="sig-title">{{Staff-Assigned-Counselor}}</div>
287
- </div>
288
- </div>
289
-
290
- <!-- Social Media Section -->
291
- <div class="social-links">
292
- <a href="https://www.facebook.com/udallas" class="social-icon" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
293
- <a href="https://www.instagram.com/universityofdallas/" class="social-icon" target="_blank"><i class="fa-brands fa-instagram"></i></a>
294
- <a href="https://www.linkedin.com/school/university-of-dallas/" class="social-icon" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
295
- <a href="https://x.com/uofdallas" class="social-icon" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
296
- <a href="https://www.youtube.com/@universityofdallas." class="social-icon" target="_blank"><i class="fa-brands fa-youtube"></i></a>
297
- </div>
298
-
299
- <!-- Footer Branding -->
300
- <div class="email-footer">
301
- <img src="https://ugadmis.udallas.edu/www/images/Admission_Footer_0624.png" alt="University Footer" class="footer-logo">
302
-
303
- <span class="footer-tagline">The Catholic University for Independent Thinkers</span>
304
-
305
- <div class="unsubscribe-link">
306
- <a href="{{UnsubscribeLink}}" style="color: inherit; text-decoration: none;">Unsubscribe from these communications</a>
307
- </div>
308
- </div>
309
  </div>
310
 
311
- <script>
312
- // Simple interaction to simulate dynamic content loading
313
- document.addEventListener('DOMContentLoaded', () => {
314
- console.log("Email Template Loaded Successfully");
315
-
316
- // Add a subtle fade-in effect to the container
317
- const container = document.querySelector('.email-container');
318
- container.style.opacity = '0';
319
- container.style.transition = 'opacity 0.8s ease-in';
320
-
321
- setTimeout(() => {
322
- container.style.opacity = '1';
323
- }, 100);
324
- });
325
- </script>
 
 
 
 
 
 
 
 
 
 
 
326
  </body>
 
327
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>University of Dallas - Admission Email</title>
8
+ <!-- Import Font Awesome for modern icons -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <!-- Google Fonts -->
11
+ <link
12
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap"
13
+ rel="stylesheet">
14
+
15
+ <style>
16
+ :root {
17
+ --primary-blue: #1A3F70;
18
+ --accent-blue: #4379B8;
19
+ --bg-gray: #F4F7F9;
20
+ --text-dark: #2D3748;
21
+ --text-light: #718096;
22
+ --white: #FFFFFF;
23
+ --shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
24
+ --transition: all 0.3s ease;
25
+ }
26
+
27
+ * {
28
+ box-sizing: border-box;
29
+ margin: 0;
30
+ padding: 0;
31
+ }
32
+
33
+ body {
34
+ font-family: 'Inter', sans-serif;
35
+ background-color: var(--bg-gray);
36
+ color: var(--text-dark);
37
+ line-height: 1.6;
38
+ padding: 40px 20px;
39
+ display: flex;
40
+ flex-direction: column;
41
+ align-items: center;
42
+ }
43
+
44
+ /* Floating Attribution - Moved to a subtle top position to comply with requirements without breaking email flow */
45
+ .top-attribution {
46
+ width: 100%;
47
+ max-width: 650px;
48
+ text-align: right;
49
+ margin-bottom: 15px;
50
+ }
51
+ .anycoder-link-minimal {
52
+ text-decoration: none;
53
+ color: var(--text-light);
54
+ font-size: 12px;
55
+ font-weight: 400;
56
+ transition: var(--transition);
57
+ }
58
+ .anycoder-link-minimal:hover {
59
+ color: var(--primary-blue);
60
+ }
61
+
62
+ /* Email Preview Container */
63
+ .email-container {
64
+ max-width: 650px;
65
+ width: 100%;
66
+ background: var(--white);
67
+ border-radius: 16px;
68
+ overflow: hidden;
69
+ box-shadow: var(--shadow);
70
+ border: 1px solid #e2e8f0;
71
+ /* Ensure no gap between header and content */
72
+ display: flex;
73
+ flex-direction: column;
74
+ }
75
+
76
+ /* Email Header - Now fully integrated as the top of the wrapper */
77
+ .email-header {
78
+ width: 100%;
79
+ line-height: 0; /* Removes bottom white space from image */
80
+ border-radius: 0; /* Ensures it fits perfectly in the container corners */
81
+ }
82
+
83
+ .email-header img {
84
+ width: 100%;
85
+ height: auto;
86
+ display: block;
87
+ transition: var(--transition);
88
+ }
89
+
90
+ /* Email Body */
91
+ .email-content {
92
+ padding: 40px 50px;
93
+ }
94
+
95
+ .greeting {
96
+ font-family: 'Playfair Display', serif;
97
+ font-size: 26px;
98
+ color: var(--primary-blue);
99
+ margin-bottom: 20px;
100
+ }
101
+
102
+ .body-text {
103
+ font-size: 16px;
104
+ color: var(--text-dark);
105
+ margin-bottom: 25px;
106
+ }
107
+
108
+ .highlight-box {
109
+ background: #f0f4f8;
110
+ border-left: 4px solid var(--primary-blue);
111
+ padding: 20px;
112
+ margin: 25px 0;
113
+ border-radius: 0 8px 8px 0;
114
+ font-style: italic;
115
+ color: var(--primary-blue);
116
+ font-weight: 500;
117
+ display: flex;
118
+ align-items: flex-start;
119
+ }
120
+
121
+ .highlight-box i {
122
+ margin-right: 12px;
123
+ margin-top: 4px;
124
+ }
125
+
126
+ /* Modern Button */
127
+ .cta-button {
128
+ display: inline-block;
129
+ background-color: var(--primary-blue);
130
+ color: var(--white) !important;
131
+ padding: 16px 32px;
132
+ text-decoration: none;
133
+ border-radius: 8px;
134
+ font-weight: 600;
135
+ font-size: 18px;
136
+ transition: var(--transition);
137
+ box-shadow: 0 4px 15px rgba(26, 63, 112, 0.3);
138
+ text-align: center;
139
+ }
140
+
141
+ .cta-button:hover {
142
+ background-color: #255391;
143
+ transform: translateY(-2px);
144
+ box-shadow: 0 6px 20px rgba(26, 63, 112, 0.4);
145
+ }
146
+
147
+ /* Signature Area */
148
+ .signature {
149
+ margin-top: 40px;
150
+ padding-top: 20px;
151
+ border-top: 1px solid #edf2f7;
152
+ }
153
+
154
+ .sig-name {
155
+ font-weight: 700;
156
+ color: var(--primary-blue);
157
+ display: block;
158
+ margin-bottom: 4px;
159
+ }
160
+
161
+ .sig-title {
162
+ font-size: 14px;
163
+ color: var(--text-light);
164
+ }
165
+
166
+ /* Modern Social Icons */
167
+ .social-links {
168
+ display: flex;
169
+ justify-content: center;
170
+ gap: 15px;
171
+ padding: 30px 0;
172
+ background: #fcfcfc;
173
+ }
174
+
175
+ .social-icon {
176
+ width: 40px;
177
+ height: 40px;
178
+ border-radius: 50%;
179
+ background: var(--white);
180
+ display: flex;
181
+ align-items: center;
182
+ justify-content: center;
183
+ color: var(--primary-blue);
184
+ text-decoration: none;
185
+ font-size: 18px;
186
+ transition: var(--transition);
187
+ border: 1px solid #e2e8f0;
188
+ }
189
+
190
+ .social-icon:hover {
191
+ background: var(--primary-blue);
192
+ color: white;
193
+ transform: scale(1.1);
194
+ }
195
+
196
+ /* Footer Branding */
197
+ .email-footer {
198
+ background: #f8fafc;
199
+ text-align: center;
200
+ padding: 40px 20px;
201
+ border-top: 1px solid #e2e8f0;
202
+ }
203
+
204
+ .footer-logo {
205
+ max-width: 300px;
206
+ margin-bottom: 20px;
207
+ opacity: 0.8;
208
+ }
209
+
210
+ .footer-tagline {
211
+ font-size: 13px;
212
+ color: var(--primary-blue);
213
+ font-weight: 600;
214
+ text-transform: uppercase;
215
+ letter-spacing: 1px;
216
+ margin-bottom: 15px;
217
+ display: block;
218
+ }
219
+
220
+ .unsubscribe-link {
221
+ font-size: 12px;
222
+ color: var(--text-light);
223
+ text-decoration: underline;
224
+ cursor: pointer;
225
+ }
226
+
227
+ /* Responsive Design */
228
+ @media (max-width: 600px) {
229
+ body {
230
+ padding: 20px 10px;
231
+ }
232
+ .email-content {
233
+ padding: 30px 20px;
234
+ }
235
+ .greeting {
236
+ font-size: 22px;
237
+ }
238
+ }
239
+ </style>
 
 
 
 
 
 
 
240
  </head>
241
+
242
  <body>
243
 
244
+ <!-- Subtle attribution placed outside the email wrapper to maintain email design integrity -->
245
+ <div class="top-attribution">
246
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link-minimal" target="_blank">Built with anycoder</a>
247
+ </div>
248
+
249
+ <div class="email-container">
250
+ <!-- Email Header: Integrated directly into the wrapper for fluid flow -->
251
+ <div class="email-header">
252
+ <a href="https://udallas.edu/admissions-aid/undergraduate/index.php" target="_blank">
253
+ <img src="https://ugadmis.udallas.edu/www/images/Updated_Email_Header_0823%20(1).jpg" alt="University of Dallas Header">
254
+ </a>
255
+ </div>
256
+
257
+ <!-- Main Content -->
258
+ <div class="email-content">
259
+ <div class="greeting">Hi {{Person-First}},</div>
260
+
261
+ <div class="body-text">
262
+ Congratulations again on your admission to the <strong style="color: var(--primary-blue);">University of Dallas</strong>! We are thrilled to have
263
+ you join our community of scholars.
264
+ </div>
265
+
266
+ <div class="body-text">
267
+ To secure your place in the incoming class and begin your journey, please complete your deposit by
268
+ <strong style="color: var(--primary-blue);">May 1</strong>. This will allow you to get a head start on your new student paperwork.
269
+ </div>
270
+
271
+ <div style="text-align: center; margin: 35px 0;">
272
+ <a href="{{Deposit-Payment-Link}}" class="cta-button">Make Your Deposit Now</a>
273
+ </div>
274
+
275
+ <div class="highlight-box">
276
+ <i class="fa-solid fa-graduation-cap"></i>
277
+ <span>Don’t forget, you’ll also receive a <strong style="color: var(--primary-blue);">$1,000 Campus Visit Grant</strong> toward your first-year cost of
278
+ full-time enrollment at the University of Dallas.</span>
279
+ </div>
280
+
281
+ <div class="signature">
282
+ <p style="margin-bottom: 15px;">Sincerely,</p>
283
+ <div class="sig-name">University of Dallas Admissions</div>
284
+ <div class="sig-title">{{Staff-Assigned-Counselor}}</div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Social Media Section -->
289
+ <div class="social-links">
290
+ <a href="https://www.facebook.com/udallas" class="social-icon"
291
+ target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
292
+ <a href="https://www.instagram.com/universityofdallas/" class="social-icon"
293
+ target="_blank"><i class="fa-brands fa-instagram"></i></a>
294
+ <a href="https://www.linkedin.com/school/university-of-dallas/" class="social-icon"
295
+ target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
296
+ <a href="https://x.com/uofdallas" class="social-icon" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
297
+ <a href="https://www.youtube.com/@universityofdallas." class="social-icon"
298
+ target="_blank"><i class="fa-brands fa-youtube"></i></a>
 
 
 
 
 
299
  </div>
300
 
301
+ <!-- Footer Branding -->
302
+ <div class="email-footer">
303
+ <img src="https://ugadmis.udallas.edu/www/images/Admission_Footer_0624.png" alt="University Footer" class="footer-logo">
304
+
305
+ <span class="footer-tagline">The Catholic University for Independent Thinkers</span>
306
+
307
+ <div class="unsubscribe-link">
308
+ <a href="{{UnsubscribeLink}}" style="color: inherit; text-decoration: none;">Unsubscribe from these
309
+ communications</a>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <script>
315
+ document.addEventListener('DOMContentLoaded', () => {
316
+ const container = document.querySelector('.email-container');
317
+ container.style.opacity = '0';
318
+ container.style.transform = 'translateY(20px)';
319
+ container.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out';
320
+
321
+ setTimeout(() => {
322
+ container.style.opacity = '1';
323
+ container.style.transform = 'translateY(0)';
324
+ }, 100);
325
+ });
326
+ </script>
327
  </body>
328
+
329
  </html>