Add links to section

This commit is contained in:
nemunaire 2025-10-23 17:08:56 +07:00
commit 3588af3267
7 changed files with 55 additions and 30 deletions

View file

@ -19,6 +19,19 @@
}
</script>
<style>
.summary-card {
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.summary-card:hover {
background-color: #e2e6ea !important;
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
<div class="card shadow-lg bg-white">
<div class="card-body p-5 text-center">
<div class="mb-3">
@ -30,40 +43,52 @@
{#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">
<GradeDisplay grade={summary.dns_grade} score={summary.dns_score} />
<small class="text-muted d-block">DNS</small>
</div>
<a href="#dns-details" class="text-decoration-none">
<div class="p-2 bg-light rounded text-center summary-card">
<GradeDisplay grade={summary.dns_grade} score={summary.dns_score} />
<small class="text-muted d-block">DNS</small>
</div>
</a>
</div>
<div class="col-md-6 col-lg">
<div class="p-2 bg-light rounded text-center">
<GradeDisplay grade={summary.authentication_grade} score={summary.authentication_score} />
<small class="text-muted d-block">Authentication</small>
</div>
<a href="#authentication-details" class="text-decoration-none">
<div class="p-2 bg-light rounded text-center summary-card">
<GradeDisplay grade={summary.authentication_grade} score={summary.authentication_score} />
<small class="text-muted d-block">Authentication</small>
</div>
</a>
</div>
<div class="col-md-6 col-lg">
<div class="p-2 bg-light rounded text-center">
<GradeDisplay grade={summary.blacklist_grade} score={summary.blacklist_score} />
<small class="text-muted d-block">Blacklists</small>
</div>
<a href="#rbl-details" class="text-decoration-none">
<div class="p-2 bg-light rounded text-center summary-card">
<GradeDisplay grade={summary.blacklist_grade} score={summary.blacklist_score} />
<small class="text-muted d-block">Blacklists</small>
</div>
</a>
</div>
<div class="col-md-6 col-lg">
<div class="p-2 bg-light rounded text-center">
<GradeDisplay grade={summary.header_grade} score={summary.header_score} />
<small class="text-muted d-block">Headers</small>
</div>
<a href="#header-details" class="text-decoration-none">
<div class="p-2 bg-light rounded text-center summary-card">
<GradeDisplay grade={summary.header_grade} score={summary.header_score} />
<small class="text-muted d-block">Headers</small>
</div>
</a>
</div>
<div class="col-md-6 col-lg">
<div class="p-2 bg-light rounded text-center">
<GradeDisplay grade={summary.spam_grade} score={summary.spam_score} />
<small class="text-muted d-block">Spam Score</small>
</div>
<a href="#spam-details" class="text-decoration-none">
<div class="p-2 bg-light rounded text-center summary-card">
<GradeDisplay grade={summary.spam_grade} score={summary.spam_score} />
<small class="text-muted d-block">Spam Score</small>
</div>
</a>
</div>
<div class="col-md-6 col-lg">
<div class="p-2 bg-light rounded text-center">
<GradeDisplay grade={summary.content_grade} score={summary.content_score} />
<small class="text-muted d-block">Content</small>
</div>
<a href="#content-details" class="text-decoration-none">
<div class="p-2 bg-light rounded text-center summary-card">
<GradeDisplay grade={summary.content_grade} score={summary.content_score} />
<small class="text-muted d-block">Content</small>
</div>
</a>
</div>
</div>
{/if}