Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>University of Dallas - Admission Email</title> | |
| <!-- Import Font Awesome for modern icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Fonts --> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" | |
| rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-blue: #1A3F70; | |
| --accent-blue: #4379B8; | |
| --bg-gray: #F4F7F9; | |
| --text-dark: #2D3748; | |
| --text-light: #718096; | |
| --white: #FFFFFF; | |
| --shadow: 0 15px 35px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-gray); | |
| color: var(--text-dark); | |
| line-height: 1.6; | |
| padding: 40px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| /* Floating Attribution - Moved to a subtle top position to comply with requirements without breaking email flow */ | |
| .top-attribution { | |
| width: 100%; | |
| max-width: 650px; | |
| text-align: right; | |
| margin-bottom: 15px; | |
| } | |
| .anycoder-link-minimal { | |
| text-decoration: none; | |
| color: var(--text-light); | |
| font-size: 12px; | |
| font-weight: 400; | |
| transition: var(--transition); | |
| } | |
| .anycoder-link-minimal:hover { | |
| color: var(--primary-blue); | |
| } | |
| /* Email Preview Container */ | |
| .email-container { | |
| max-width: 650px; | |
| width: 100%; | |
| background: var(--white); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| border: 1px solid #e2e8f0; | |
| /* Ensure no gap between header and content */ | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Email Header - Now fully integrated as the top of the wrapper */ | |
| .email-header { | |
| width: 100%; | |
| line-height: 0; /* Removes bottom white space from image */ | |
| border-radius: 0; /* Ensures it fits perfectly in the container corners */ | |
| } | |
| .email-header img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| transition: var(--transition); | |
| } | |
| /* Email Body */ | |
| .email-content { | |
| padding: 40px 50px; | |
| } | |
| .greeting { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 26px; | |
| color: var(--primary-blue); | |
| margin-bottom: 20px; | |
| } | |
| .body-text { | |
| font-size: 16px; | |
| color: var(--text-dark); | |
| margin-bottom: 25px; | |
| } | |
| .highlight-box { | |
| background: #f0f4f8; | |
| border-left: 4px solid var(--primary-blue); | |
| padding: 20px; | |
| margin: 25px 0; | |
| border-radius: 0 8px 8px 0; | |
| font-style: italic; | |
| color: var(--primary-blue); | |
| font-weight: 500; | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .highlight-box i { | |
| margin-right: 12px; | |
| margin-top: 4px; | |
| } | |
| /* Modern Button */ | |
| .cta-button { | |
| display: inline-block; | |
| background-color: var(--primary-blue); | |
| color: var(--white) ; | |
| padding: 16px 32px; | |
| text-decoration: none; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| font-size: 18px; | |
| transition: var(--transition); | |
| box-shadow: 0 4px 15px rgba(26, 63, 112, 0.3); | |
| text-align: center; | |
| } | |
| .cta-button:hover { | |
| background-color: #255391; | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(26, 63, 112, 0.4); | |
| } | |
| /* Signature Area */ | |
| .signature { | |
| margin-top: 40px; | |
| padding-top: 20px; | |
| border-top: 1px solid #edf2f7; | |
| } | |
| .sig-name { | |
| font-weight: 700; | |
| color: var(--primary-blue); | |
| display: block; | |
| margin-bottom: 4px; | |
| } | |
| .sig-title { | |
| font-size: 14px; | |
| color: var(--text-light); | |
| } | |
| /* Modern Social Icons */ | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| padding: 30px 0; | |
| background: #fcfcfc; | |
| } | |
| .social-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: var(--white); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--primary-blue); | |
| text-decoration: none; | |
| font-size: 18px; | |
| transition: var(--transition); | |
| border: 1px solid #e2e8f0; | |
| } | |
| .social-icon:hover { | |
| background: var(--primary-blue); | |
| color: white; | |
| transform: scale(1.1); | |
| } | |
| /* Footer Branding */ | |
| .email-footer { | |
| background: #f8fafc; | |
| text-align: center; | |
| padding: 40px 20px; | |
| border-top: 1px solid #e2e8f0; | |
| } | |
| .footer-logo { | |
| max-width: 300px; | |
| margin-bottom: 20px; | |
| opacity: 0.8; | |
| } | |
| .footer-tagline { | |
| font-size: 13px; | |
| color: var(--primary-blue); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 15px; | |
| display: block; | |
| } | |
| .unsubscribe-link { | |
| font-size: 12px; | |
| color: var(--text-light); | |
| text-decoration: underline; | |
| cursor: pointer; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 600px) { | |
| body { | |
| padding: 20px 10px; | |
| } | |
| .email-content { | |
| padding: 30px 20px; | |
| } | |
| .greeting { | |
| font-size: 22px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Subtle attribution placed outside the email wrapper to maintain email design integrity --> | |
| <div class="top-attribution"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link-minimal" target="_blank">Built with anycoder</a> | |
| </div> | |
| <div class="email-container"> | |
| <!-- Email Header: Integrated directly into the wrapper for fluid flow --> | |
| <div class="email-header"> | |
| <a href="https://udallas.edu/admissions-aid/undergraduate/index.php" target="_blank"> | |
| <img src="https://ugadmis.udallas.edu/www/images/Updated_Email_Header_0823%20(1).jpg" alt="University of Dallas Header"> | |
| </a> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="email-content"> | |
| <div class="greeting">Hi {{Person-First}},</div> | |
| <div class="body-text"> | |
| Congratulations again on your admission to the <strong style="color: var(--primary-blue);">University of Dallas</strong>! We are thrilled to have | |
| you join our community of scholars. | |
| </div> | |
| <div class="body-text"> | |
| To secure your place in the incoming class and begin your journey, please complete your deposit by | |
| <strong style="color: var(--primary-blue);">May 1</strong>. This will allow you to get a head start on your new student paperwork. | |
| </div> | |
| <div style="text-align: center; margin: 35px 0;"> | |
| <a href="{{Deposit-Payment-Link}}" class="cta-button">Make Your Deposit Now</a> | |
| </div> | |
| <div class="highlight-box"> | |
| <i class="fa-solid fa-graduation-cap"></i> | |
| <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 | |
| full-time enrollment at the University of Dallas.</span> | |
| </div> | |
| <div class="signature"> | |
| <p style="margin-bottom: 15px;">Sincerely,</p> | |
| <div class="sig-name">University of Dallas Admissions</div> | |
| <div class="sig-title">{{Staff-Assigned-Counselor}}</div> | |
| </div> | |
| </div> | |
| <!-- Social Media Section --> | |
| <div class="social-links"> | |
| <a href="https://www.facebook.com/udallas" class="social-icon" | |
| target="_blank"><i class="fa-brands fa-facebook-f"></i></a> | |
| <a href="https://www.instagram.com/universityofdallas/" class="social-icon" | |
| target="_blank"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="https://www.linkedin.com/school/university-of-dallas/" class="social-icon" | |
| target="_blank"><i class="fa-brands fa-linkedin-in"></i></a> | |
| <a href="https://x.com/uofdallas" class="social-icon" target="_blank"><i class="fa-brands fa-x-twitter"></i></a> | |
| <a href="https://www.youtube.com/@universityofdallas." class="social-icon" | |
| target="_blank"><i class="fa-brands fa-youtube"></i></a> | |
| </div> | |
| <!-- Footer Branding --> | |
| <div class="email-footer"> | |
| <img src="https://ugadmis.udallas.edu/www/images/Admission_Footer_0624.png" alt="University Footer" class="footer-logo"> | |
| <span class="footer-tagline">The Catholic University for Independent Thinkers</span> | |
| <div class="unsubscribe-link"> | |
| <a href="{{UnsubscribeLink}}" style="color: inherit; text-decoration: none;">Unsubscribe from these | |
| communications</a> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const container = document.querySelector('.email-container'); | |
| container.style.opacity = '0'; | |
| container.style.transform = 'translateY(20px)'; | |
| container.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out'; | |
| setTimeout(() => { | |
| container.style.opacity = '1'; | |
| container.style.transform = 'translateY(0)'; | |
| }, 100); | |
| }); | |
| </script> | |
| </body> | |
| </html> |