diff --git a/web/src/app.css b/web/src/app.css new file mode 100644 index 0000000..ddae5b6 --- /dev/null +++ b/web/src/app.css @@ -0,0 +1,152 @@ +:root { + --bs-primary: #1cb487; + --bs-primary-rgb: 28, 180, 135; +} + +body { + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} + +/* Animations */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes pulse { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.fade-in { + animation: fadeIn 0.6s ease-out; +} + +.pulse { + animation: pulse 2s ease-in-out infinite; +} + +.spin { + animation: spin 1s linear infinite; +} + +/* Score styling */ +.score-excellent { + color: #198754; +} + +.score-good { + color: #20c997; +} + +.score-warning { + color: #ffc107; +} + +.score-poor { + color: #fd7e14; +} + +.score-bad { + color: #dc3545; +} + +/* Custom card styling */ +.card { + border: none; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: + transform 0.2s ease, + box-shadow 0.2s ease; +} + +.card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); +} + +/* Check status badges */ +.check-status { + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-size: 0.875rem; + font-weight: 500; +} + +.check-pass { + background-color: #d1e7dd; + color: #0f5132; +} + +.check-fail { + background-color: #f8d7da; + color: #842029; +} + +.check-warn { + background-color: #fff3cd; + color: #664d03; +} + +.check-info { + background-color: #cfe2ff; + color: #084298; +} + +/* Clipboard button */ +.clipboard-btn { + cursor: pointer; + transition: all 0.2s ease; +} + +.clipboard-btn:hover { + transform: scale(1.1); +} + +.clipboard-btn:active { + transform: scale(0.95); +} + +/* Progress bar animation */ +.progress-bar { + transition: width 0.6s ease; +} + +/* Hero section */ +.hero { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; +} + +/* Feature icons */ +.feature-icon { + width: 4rem; + height: 4rem; + border-radius: 0.75rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + margin-bottom: 1rem; +} diff --git a/web/src/lib/components/CheckCard.svelte b/web/src/lib/components/CheckCard.svelte new file mode 100644 index 0000000..bc5741c --- /dev/null +++ b/web/src/lib/components/CheckCard.svelte @@ -0,0 +1,74 @@ + + +
+
+
+
+ +
+
+
+
+
{check.name}
+ {check.category} +
+ {check.score.toFixed(1)} pts +
+ +

{check.message}

+ + {#if check.advice} + + {/if} + + {#if check.details} +
+ Technical Details + 
{check.details}
+
+ {/if} +
+
+
+
+ + diff --git a/web/src/lib/components/EmailAddressDisplay.svelte b/web/src/lib/components/EmailAddressDisplay.svelte new file mode 100644 index 0000000..aa79f9e --- /dev/null +++ b/web/src/lib/components/EmailAddressDisplay.svelte @@ -0,0 +1,46 @@ + + +
+
+ {email} + +
+ {#if copied} + + Copied to clipboard! + + {/if} +
+ + diff --git a/web/src/lib/components/FeatureCard.svelte b/web/src/lib/components/FeatureCard.svelte new file mode 100644 index 0000000..87baea4 --- /dev/null +++ b/web/src/lib/components/FeatureCard.svelte @@ -0,0 +1,33 @@ + + +
+
+ +
+
{title}
+

+ {description} +

+
+ + diff --git a/web/src/lib/components/HowItWorksStep.svelte b/web/src/lib/components/HowItWorksStep.svelte new file mode 100644 index 0000000..87d8544 --- /dev/null +++ b/web/src/lib/components/HowItWorksStep.svelte @@ -0,0 +1,17 @@ + + +
+
{step}
+
{title}
+

+ {description} +

+
diff --git a/web/src/lib/components/PendingState.svelte b/web/src/lib/components/PendingState.svelte new file mode 100644 index 0000000..a5075e8 --- /dev/null +++ b/web/src/lib/components/PendingState.svelte @@ -0,0 +1,115 @@ + + +
+
+
+
+
+ +
+ +

Waiting for Your Email

+

Send your test email to the address below:

+ +
+ +
+ + + + {#if test.status === "received"} + + {/if} + +
+ + Checking for email every 3 seconds... +
+
+
+ + +
+
+
+ What we'll check: +
+
+
+
    +
  • + SPF, DKIM, DMARC +
    • +
  • + DNS Records +
    • +
  • + SpamAssassin Score +
    • +
+
+
+
    +
  • + Blacklist Status +
    • +
  • + Content Quality +
    • +
  • + Header Validation +
    • +
+
+
+
+
+
+
+ + diff --git a/web/src/lib/components/ScoreCard.svelte b/web/src/lib/components/ScoreCard.svelte new file mode 100644 index 0000000..65aa706 --- /dev/null +++ b/web/src/lib/components/ScoreCard.svelte @@ -0,0 +1,71 @@ + + +
+
+

+ {score.toFixed(1)}/10 +

+

{getScoreLabel(score)}

+

Overall Deliverability Score

+ + {#if summary} +
+
+
+ Authentication + {summary.authentication_score.toFixed(1)}/3 +
+
+
+
+ Spam Score + {summary.spam_score.toFixed(1)}/2 +
+
+
+
+ Blacklists + {summary.blacklist_score.toFixed(1)}/2 +
+
+
+
+ Content + {summary.content_score.toFixed(1)}/2 +
+
+
+
+ Headers + {summary.header_score.toFixed(1)}/1 +
+
+
+ {/if} +
+
diff --git a/web/src/lib/components/SpamAssassinCard.svelte b/web/src/lib/components/SpamAssassinCard.svelte new file mode 100644 index 0000000..3d4872c --- /dev/null +++ b/web/src/lib/components/SpamAssassinCard.svelte @@ -0,0 +1,65 @@ + + +
+
+
+ SpamAssassin Analysis +
+
+
+
+
+ Score: + + {spamassassin.score.toFixed(2)} / {spamassassin.required_score.toFixed(1)} + +
+
+ Classified as: + + {spamassassin.is_spam ? "SPAM" : "HAM"} + +
+
+ + {#if spamassassin.tests && spamassassin.tests.length > 0} +
+ Tests Triggered: +
+ {#each spamassassin.tests as test} + {test} + {/each} +
+
+ {/if} + + {#if spamassassin.report} +
+ Full Report + 
{spamassassin.report}
+
+ {/if} +
+
+ + diff --git a/web/src/lib/components/index.ts b/web/src/lib/components/index.ts new file mode 100644 index 0000000..8da4188 --- /dev/null +++ b/web/src/lib/components/index.ts @@ -0,0 +1,8 @@ +// Component exports +export { default as FeatureCard } from "./FeatureCard.svelte"; +export { default as HowItWorksStep } from "./HowItWorksStep.svelte"; +export { default as ScoreCard } from "./ScoreCard.svelte"; +export { default as CheckCard } from "./CheckCard.svelte"; +export { default as SpamAssassinCard } from "./SpamAssassinCard.svelte"; +export { default as EmailAddressDisplay } from "./EmailAddressDisplay.svelte"; +export { default as PendingState } from "./PendingState.svelte"; diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte new file mode 100644 index 0000000..5d0514c --- /dev/null +++ b/web/src/routes/+error.svelte @@ -0,0 +1,150 @@ + + + + {status} - {getErrorTitle(status)} | happyDeliver + + +
+
+
+ +
+ +
+ + +

{status}

+ + +

{getErrorTitle(status)}

+ + +

{getErrorDescription(status)}

+ + + {#if message !== getErrorDescription(status)} + + {/if} + + +
+ + + Go Home + + +
+ + + {#if status === 404} +
+

Looking for something specific?

+
+ Home + Features + + Documentation + +
+
+ {/if} +
+
+
+ + diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte new file mode 100644 index 0000000..9ed83d4 --- /dev/null +++ b/web/src/routes/+layout.svelte @@ -0,0 +1,51 @@ + + +
+ + +
+ {@render children?.()} +
+ + +
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte new file mode 100644 index 0000000..f0709a1 --- /dev/null +++ b/web/src/routes/+page.svelte @@ -0,0 +1,216 @@ + + + + happyDeliver - Email Deliverability Testing + + + +
+
+
+
+

Test Your Email Deliverability

+

+ Get detailed insights into your email configuration, authentication, spam score, + and more. Open-source, self-hosted, and privacy-focused. +

+ + + {#if error} + + {/if} +
+
+
+
+ + +
+
+
+
+

Comprehensive Email Analysis

+

+ Your favorite deliverability tester, open-source and + self-hostable for complete privacy and control. +

+
+
+ +
+ {#each features as feature} +
+ +
+ {/each} +
+
+
+ + +
+
+
+
+

How It Works

+

+ Simple three-step process to test your email deliverability +

+
+
+ +
+ {#each steps as stepData} +
+ +
+ {/each} +
+ +
+ +
+
+
+ + diff --git a/web/src/routes/test/[test]/+page.svelte b/web/src/routes/test/[test]/+page.svelte new file mode 100644 index 0000000..f70bc53 --- /dev/null +++ b/web/src/routes/test/[test]/+page.svelte @@ -0,0 +1,143 @@ + + + + {test ? `Test ${test.id.slice(0, 8)} - happyDeliver` : "Loading..."} + + +
+ {#if loading} +
+ +

Loading test...

+
+ {:else if error} +
+
+ +
+
+ {:else if test && test.status !== "analyzed"} + + + {:else if report} + +
+ +
+
+ +
+
+ + +
+
+

Detailed Checks

+ {#each report.checks as check} + + {/each} +
+
+ + + {#if report.spamassassin} +
+
+ +
+
+ {/if} + + +
+
+ + + Test Another Email + +
+
+
+ {/if} +
+ +