111 lines
4.7 KiB
Svelte
111 lines
4.7 KiB
Svelte
<script lang="ts">
|
|
import type { ScoreSummary } from "$lib/api/types.gen";
|
|
|
|
interface Props {
|
|
grade: string;
|
|
score: number;
|
|
summary?: ScoreSummary;
|
|
}
|
|
|
|
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";
|
|
if (score >= 50) return "Fair";
|
|
if (score >= 30) return "Poor";
|
|
return "Critical";
|
|
}
|
|
</script>
|
|
|
|
<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>
|
|
<h3 class="fw-bold mb-2">{getScoreLabel(score)}</h3>
|
|
<p class="text-muted mb-4">Overall Deliverability Score</p>
|
|
|
|
{#if summary}
|
|
<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.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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<small class="text-muted d-block">Content</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|