Spaces:

Clearpaths
/

anycoder-6447a9bb

Running

App Files Files Community

Clearpaths commited on Apr 21

Commit

70aa7f9

verified ·

1 Parent(s): 9cb3199

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +327 -19

index.html CHANGED Viewed

@@ -1,19 +1,327 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Enhanced Email Template Designer</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 10px 25px 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: 20px;
+        }
+        /* Header Branding Section */
+        header {
+            max-width: 800px;
+            margin: 0 auto 30px auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px;
+            background: var(--white);
+            border-radius: 12px;
+            box-shadow: var(--shadow);
+        }
+        .branding-text {
+            font-weight: 700;
+            color: var(--primary-blue);
+            font-size: 1.1rem;
+        }
+        .anycoder-link {
+            text-decoration: none;
+            color: var(--accent-blue);
+            font-size: 0.85rem;
+            font-weight: 600;
+            transition: var(--transition);
+            padding: 8px 16px;
+            border: 2px solid var(--accent-blue);
+            border-radius: 20px;
+        }
+        .anycoder-link:hover {
+            background: var(--accent-blue);
+            color: white;
+        }
+        /* Email Preview Container */
+        .email-container {
+            max-width: 650px;
+            margin: 0 auto;
+            background: var(--white);
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: var(--shadow);
+            border: 1px solid #e2e8f0;
+        }
+        /* Email Header */
+        .email-header {
+            position: relative;
+            width: 100%;
+            overflow: hidden;
+        }
+        .email-header img {
+            width: 100%;
+            display: block;
+            transition: var(--transition);
+        }
+        .email-header:hover img {
+            transform: scale(1.02);
+        }
+        /* Email Body */
+        .email-content {
+            padding: 40px 50px;
+        }
+        .greeting {
+            font-family: 'Playfair Display', serif;
+            font-size: 24px;
+            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;
+        }
+        /* Modern Button */
+        .cta-button {
+            display: inline-block;
+            background-color: var(--primary-blue);
+            color: var(--white) !important;
+            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) {
+            .email-content {
+                padding: 30px 20px;
+            }
+            header {
+                flex-direction: column;
+                gap: 15px;
+                text-align: center;
+            }
+            .greeting {
+                font-size: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="branding-text">Email Template Enhancer</div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
+    </header>
+    <div class="email-container">
+        <!-- Header Image -->
+        <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>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>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" style="margin-right: 10px;"></i>
+                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.
+            </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>
+        // Simple interaction to simulate dynamic content loading
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log("Email Template Loaded Successfully");
+            // Add a subtle fade-in effect to the container
+            const container = document.querySelector('.email-container');
+            container.style.opacity = '0';
+            container.style.transition = 'opacity 0.8s ease-in';
+            setTimeout(() => {
+                container.style.opacity = '1';
+            }, 100);
+        });
+    </script>
+</body>
+</html>