happyDomain/happyDeliver
2
0
Fork 0
Code Issues 8 Pull requests 4 Projects Releases Packages Wiki Activity Actions

Add grades

Browse source
This commit is contained in:
nemunaire 2025-10-22 15:39:40 +07:00
commit a64b866cfa
25 changed files with 362 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

74
web/src/lib/components/ScoreCard.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts">
import type { ScoreSummary } from "$lib/api/types.gen";
import GradeDisplay from "./GradeDisplay.svelte";
interface Props {
grade: string;
@ -9,14 +10,6 @@
let { grade, score, summary }: Props = $props();
function getScoreClass(score: number): string {
if (score >= 90) return "score-excellent";
if (score >= 70) return "score-good";
if (score >= 50) return "score-warning";
if (score >= 30) return "score-poor";
return "score-bad";
}
function getScoreLabel(score: number): string {
if (score >= 90) return "Excellent";
if (score >= 70) return "Good";
@ -28,9 +21,9 @@
<div class="card shadow-lg bg-white">
<div class="card-body p-5 text-center">
<h1 class="display-1 fw-bold mb-3 {getScoreClass(score)}">
{grade}
</h1>
<div class="mb-3">
<GradeDisplay {grade} {score} size="large" />
</div>
<h3 class="fw-bold mb-2">{getScoreLabel(score)}</h3>
<p class="text-muted mb-4">Overall Deliverability Score</p>
@ -38,84 +31,37 @@
<div class="row g-3 text-start">
<div class="col-md-6 col-lg">
<div class="p-2 bg-light rounded text-center">
<strong
class="fs-2"
class:text-success={summary.dns_score >= 100}
class:text-warning={summary.dns_score < 100 &&
summary.dns_score >= 50}
class:text-danger={summary.dns_score < 50}
>
{summary.dns_score}%
</strong>
<GradeDisplay grade={summary.dns_grade} score={summary.dns_score} />
<small class="text-muted d-block">DNS</small>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="p-2 bg-light rounded text-center">
<strong
class="fs-2"
class:text-success={summary.authentication_score >= 100}
class:text-warning={summary.authentication_score < 100 &&
summary.authentication_score >= 50}
class:text-danger={summary.authentication_score < 50}
>
{summary.authentication_score}%
</strong>
<GradeDisplay grade={summary.authentication_grade} score={summary.authentication_score} />
<small class="text-muted d-block">Authentication</small>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="p-2 bg-light rounded text-center">
<strong
class="fs-2"
class:text-success={summary.blacklist_score >= 100}
class:text-warning={summary.blacklist_score < 100 &&
summary.blacklist_score >= 50}
class:text-danger={summary.blacklist_score < 50}
>
{summary.blacklist_score}%
</strong>
<GradeDisplay grade={summary.blacklist_grade} score={summary.blacklist_score} />
<small class="text-muted d-block">Blacklists</small>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="p-2 bg-light rounded text-center">
<strong
class="fs-2"
class:text-success={summary.header_score >= 100}
class:text-warning={summary.header_score < 100 &&
summary.header_score >= 50}
class:text-danger={summary.header_score < 50}
>
{summary.header_score}%
</strong>
<GradeDisplay grade={summary.header_grade} score={summary.header_score} />
<small class="text-muted d-block">Headers</small>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="p-2 bg-light rounded text-center">
<strong
class="fs-2"
class:text-success={summary.spam_score >= 100}
class:text-warning={summary.spam_score < 100 && summary.spam_score >= 50}
class:text-danger={summary.spam_score < 50}
>
{summary.spam_score}%
</strong>
<GradeDisplay grade={summary.spam_grade} score={summary.spam_score} />
<small class="text-muted d-block">Spam Score</small>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="p-2 bg-light rounded text-center">
<strong
class="fs-2"
class:text-success={summary.content_score >= 100}
class:text-warning={summary.content_score < 100 &&
summary.content_score >= 50}
class:text-danger={summary.content_score < 50}
>
{summary.content_score}%
</strong>
<GradeDisplay grade={summary.content_grade} score={summary.content_score} />
<small class="text-muted d-block">Content</small>
</div>
</div>