Update enrollment details for 2026: Enhance ProgramPage with additional eligibility criteria and benefits, and improve main page with updated enrollment information.
This commit is contained in:
117
src/error.html
Normal file
117
src/error.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>%sveltekit.status% • %sveltekit.error.message%</title>
|
||||
<meta name="robots" content="noindex" />
|
||||
<style>
|
||||
:root {
|
||||
--page-bg: #eef3ff;
|
||||
--text-strong: #0f1f3a;
|
||||
--text: #2b3a55;
|
||||
--text-muted: #60708a;
|
||||
--accent-blue: #1f4a86;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(1000px 500px at 10% 0%, rgba(31, 74, 134, 0.14), transparent 60%),
|
||||
radial-gradient(900px 480px at 90% 10%, rgba(244, 208, 29, 0.16), transparent 55%),
|
||||
radial-gradient(800px 420px at 30% 100%, rgba(43, 179, 74, 0.12), transparent 55%),
|
||||
var(--page-bg);
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 56rem;
|
||||
margin: 0 auto;
|
||||
padding: 3.5rem 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(15, 31, 58, 0.08);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 1px 0 rgba(15, 31, 58, 0.04);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.kicker {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.5rem 0 0;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.75rem 0 0;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1.75rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 14px;
|
||||
background: var(--accent-blue);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
color: var(--text-strong);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
border: 1px solid rgba(15, 31, 58, 0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="card">
|
||||
<div class="kicker">Erro %sveltekit.status%</div>
|
||||
<h1>%sveltekit.error.message%</h1>
|
||||
<p>
|
||||
Se o problema persistir, volte para a página inicial e tente novamente mais tarde.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<a class="primary" href="/">Ir para a página inicial</a>
|
||||
<button class="secondary" type="button" onclick="location.reload()">Recarregar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
92
src/routes/+error.svelte
Normal file
92
src/routes/+error.svelte
Normal file
@@ -0,0 +1,92 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
|
||||
const isNotFound = $derived(page.status === 404);
|
||||
const isServerError = $derived(page.status >= 500);
|
||||
|
||||
const title = $derived(isNotFound ? 'Página não encontrada' : 'Não foi possível carregar esta página');
|
||||
const description = $derived(
|
||||
isNotFound
|
||||
? 'O endereço pode estar incorreto, ou a página foi movida/removida.'
|
||||
: 'Ocorreu um erro ao processar sua solicitação. Tente novamente em alguns instantes.'
|
||||
);
|
||||
|
||||
// Evita expor detalhes quando o erro é inesperado (SvelteKit usa "Internal Error").
|
||||
const safeDetails = $derived(
|
||||
!isNotFound && page.error?.message && page.error.message !== 'Internal Error' ? page.error.message : null
|
||||
);
|
||||
|
||||
function goBack() {
|
||||
if (typeof history !== 'undefined') history.back();
|
||||
}
|
||||
|
||||
function reload() {
|
||||
if (typeof location !== 'undefined') location.reload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{page.status} • {title} • Secretaria de Esportes de Pernambuco</title>
|
||||
<meta name="robots" content="noindex" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-dvh bg-(--page-bg)">
|
||||
<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
|
||||
<section class="overflow-hidden rounded-3xl bg-white/80 shadow-sm ring-1 ring-black/5">
|
||||
<div class="px-6 py-10 sm:px-10 sm:py-12">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
|
||||
Erro {page.status}
|
||||
</p>
|
||||
<h1 class="mt-2 text-2xl font-extrabold tracking-tight text-(--text-strong) sm:text-3xl">
|
||||
{title}
|
||||
</h1>
|
||||
<p class="mt-3 max-w-2xl text-sm leading-relaxed text-(--text)">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
{#if safeDetails}
|
||||
<div class="mt-5 rounded-2xl bg-white/70 p-4 ring-1 ring-black/5">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Detalhes</p>
|
||||
<p class="mt-2 text-sm text-(--text)">{safeDetails}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-8 flex flex-wrap items-center gap-3">
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center justify-center rounded-xl bg-(--accent-blue) px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-(--accent-blue)/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--accent-blue) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
|
||||
>
|
||||
Ir para a página inicial
|
||||
</a>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={goBack}
|
||||
class="inline-flex items-center justify-center rounded-xl bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
|
||||
>
|
||||
Voltar
|
||||
</button>
|
||||
|
||||
{#if isServerError}
|
||||
<button
|
||||
type="button"
|
||||
onclick={reload}
|
||||
class="inline-flex items-center justify-center rounded-xl bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
|
||||
>
|
||||
Tentar novamente
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="mt-8 rounded-2xl bg-white/70 p-5 ring-1 ring-black/5">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Dica</p>
|
||||
<p class="mt-2 text-sm text-(--text)">
|
||||
Se você chegou aqui por um link antigo, volte para a página inicial e escolha o programa no card
|
||||
correspondente.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user