583 lines
13 KiB
Svelte
583 lines
13 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { page } from '$app/stores';
|
|
import { goto } from '$app/navigation';
|
|
import { browser } from '$app/environment';
|
|
import Header from '$lib/components/Header.svelte';
|
|
import Footer from '$lib/components/Footer.svelte';
|
|
|
|
const policies = {
|
|
termos: {
|
|
title: 'Políticas e Termos',
|
|
file: 'politicas/termos.md'
|
|
},
|
|
privacidade: {
|
|
title: 'Política de Privacidade',
|
|
file: 'politicas/privacidade.md'
|
|
},
|
|
};
|
|
|
|
const menuItems = [
|
|
{ href: '/politicas-e-termos', label: 'Termos e condições de uso', key: 'termos' },
|
|
{ href: '/politicas-e-termos', label: 'Política de Privacidade', key: 'privacidade' },
|
|
];
|
|
|
|
let currentPolicy = 'termos';
|
|
let content = '';
|
|
let loading = true;
|
|
let error = null;
|
|
|
|
function parseMarkdown(markdown) {
|
|
let html = markdown
|
|
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
|
|
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
|
|
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
|
|
|
|
.replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
|
|
|
|
.replace(/\*(.*)\*/gim, '<em>$1</em>')
|
|
|
|
.replace(/\[([^\]]*)\]\(([^\)]*)\)/gim, '<a href="$2" >$1</a>')
|
|
|
|
.replace(/\n\n/gim, '</p><p>')
|
|
.replace(/\n/gim, '<br>')
|
|
|
|
.replace(/^\- (.*$)/gim, '<li>$1</li>')
|
|
.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
|
|
|
|
.replace(/^> (.*$)/gim, '<blockquote>$1</blockquote>')
|
|
|
|
.replace(/```([\s\S]*?)```/gim, '<pre><code>$1</code></pre>')
|
|
.replace(/`([^`]*)`/gim, '<code>$1</code>');
|
|
|
|
if (!html.startsWith('<h') && !html.startsWith('<p') && !html.startsWith('<ul') && !html.startsWith('<ol')) {
|
|
html = '<p>' + html + '</p>';
|
|
}
|
|
|
|
return html;
|
|
}
|
|
|
|
async function loadMarkdownContent(policyKey) {
|
|
try {
|
|
loading = true;
|
|
error = null;
|
|
|
|
const policy = policies[policyKey];
|
|
if (!policy) {
|
|
throw new Error('Política não encontrada');
|
|
}
|
|
|
|
// ✅ Só fazer fetch no browser
|
|
if (!browser) {
|
|
content = `
|
|
<h1>${policy.title}</h1>
|
|
<p><em>Carregando conteúdo...</em></p>
|
|
`;
|
|
loading = false;
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(`/${policy.file}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Erro ao carregar ${policy.file}: ${response.status}`);
|
|
}
|
|
|
|
const markdownText = await response.text();
|
|
content = parseMarkdown(markdownText);
|
|
} catch (err) {
|
|
error = err.message;
|
|
console.error('Erro ao carregar markdown:', err);
|
|
|
|
content = `
|
|
<h1>${policies[policyKey]?.title || 'Documento'}</h1>
|
|
<p><em>Conteúdo em atualização...</em></p>
|
|
<p>Para dúvidas, entre em contato:
|
|
<a href="mailto:suporte@basspago.com.br">suporte@basspago.com.br</a></p>
|
|
`;
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
function navigateToPolicy(policyKey) {
|
|
if (currentPolicy !== policyKey) {
|
|
currentPolicy = policyKey;
|
|
}
|
|
}
|
|
|
|
$: if (currentPolicy) {
|
|
loadMarkdownContent(currentPolicy);
|
|
}
|
|
|
|
$: {
|
|
const pathname = $page.url.pathname;
|
|
const policyKey = pathname.split('/').pop();
|
|
if (policyKey && policies[policyKey] && policyKey !== currentPolicy) {
|
|
currentPolicy = policyKey;
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
const pathname = $page.url.pathname;
|
|
const policyKey = pathname.split('/').pop();
|
|
|
|
if (policyKey && policies[policyKey]) {
|
|
currentPolicy = policyKey;
|
|
} else {
|
|
currentPolicy = 'termos';
|
|
goto('/politicas-e-termos');
|
|
}
|
|
});
|
|
|
|
$: currentTitle = policies[currentPolicy]?.title || 'Políticas e Termos';
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{currentTitle} - BassPago</title>
|
|
<meta name="description" content="{currentTitle} da BassPago. Conheça nossos regulamentos e políticas." />
|
|
</svelte:head>
|
|
|
|
<Header />
|
|
|
|
<!-- Header Section -->
|
|
<section class="policies-terms-section">
|
|
<div class="policies-terms__container">
|
|
<div class="policies-terms__header">
|
|
<h1>{currentTitle}</h1>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Layout -->
|
|
<section class="policies-layout">
|
|
<!-- Sidebar Navigation -->
|
|
<div class="policies-sidebar">
|
|
<nav>
|
|
<h2 class="sidebar-title">Regulamentos</h2>
|
|
<ul>
|
|
{#each menuItems as item}
|
|
<li class:active={item.key === currentPolicy}>
|
|
<a
|
|
href="/politicas-e-termos"
|
|
on:click|preventDefault={() => navigateToPolicy(item.key)}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="policies-main-content">
|
|
<section class="policy-article">
|
|
{#if loading}
|
|
<div class="loading-state">
|
|
<div class="loading-spinner"></div>
|
|
<p>Carregando conteúdo...</p>
|
|
</div>
|
|
{:else if error}
|
|
<div class="error-state">
|
|
<h2>Erro ao carregar conteúdo</h2>
|
|
<p>{error}</p>
|
|
<button on:click={() => loadMarkdownContent(currentPolicy)} class="retry-button">
|
|
Tentar novamente
|
|
</button>
|
|
</div>
|
|
{:else}
|
|
<div id="markdown-content">
|
|
{@html content}
|
|
</div>
|
|
{/if}
|
|
</section>
|
|
</main>
|
|
</section>
|
|
|
|
<Footer />
|
|
|
|
<style>
|
|
/* =========================
|
|
POLÍTICAS PAGE STYLES
|
|
========================= */
|
|
|
|
/* Header Section */
|
|
.policies-terms-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
min-height: 200px; /* ✅ Reduzido de 280px para 200px */
|
|
padding: 120px 20px 20px; /* ✅ Reduzido padding inferior de 40px para 20px */
|
|
background: #fff;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.policies-terms__container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.policies-terms__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: clamp(18px, 4vw, 30px);
|
|
}
|
|
|
|
.policies-terms__header h1 {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 400;
|
|
color: #000;
|
|
font-size: clamp(2rem, 6vw, 52px);
|
|
line-height: 1.08;
|
|
max-width: 540px;
|
|
letter-spacing: -1px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Layout principal */
|
|
.policies-layout {
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
justify-content: center;
|
|
background: #fff;
|
|
padding: 40px 20px 60px; /* ✅ Reduzido padding superior de 180px para 40px */
|
|
}
|
|
|
|
/* Sidebar */
|
|
.policies-sidebar {
|
|
width: 260px;
|
|
min-width: 150px;
|
|
background: #fff;
|
|
position: sticky;
|
|
top: 120px; /* ✅ Ajustado para ficar abaixo do header */
|
|
height: calc(100vh - 140px); /* ✅ Ajustado altura */
|
|
padding: 20px 18px 36px 0; /* ✅ Reduzido padding superior */
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-size: 1.08rem;
|
|
font-weight: 500;
|
|
margin-bottom: 22px;
|
|
color: #222;
|
|
}
|
|
|
|
.policies-sidebar ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.policies-sidebar li a {
|
|
color: #111;
|
|
font-size: 1rem;
|
|
text-decoration: none;
|
|
opacity: 0.88;
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
display: block;
|
|
transition: background 0.15s, color 0.15s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.policies-sidebar li.active a,
|
|
.policies-sidebar li a:hover {
|
|
color: #000;
|
|
opacity: 1;
|
|
font-weight: 600;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Conteúdo principal */
|
|
.policies-main-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 0 7vw 48px 48px;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.policy-article {
|
|
font-size: 1.13rem;
|
|
line-height: 1.6;
|
|
color: #111;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
/* Estados de loading e erro */
|
|
.loading-state,
|
|
.error-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.loading-state p {
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid #1976d2;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.error-state {
|
|
background: #fff3e0;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #ff9800;
|
|
padding: 30px;
|
|
}
|
|
|
|
.error-state h2 {
|
|
color: #e65100;
|
|
margin: 0 0 10px 0;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.error-state p {
|
|
color: #bf360c;
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
.retry-button {
|
|
background: #1976d2;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.retry-button:hover {
|
|
background: #1565c0;
|
|
}
|
|
|
|
/* Content styling */
|
|
#markdown-content {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
/* Global styles for content */
|
|
:global(#markdown-content h1) {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: #000;
|
|
margin: 0 0 20px 0; /* ✅ Removido margin superior */
|
|
line-height: 1.2;
|
|
}
|
|
|
|
:global(#markdown-content h2) {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #111;
|
|
margin: 25px 0 15px 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
:global(#markdown-content h3) {
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
color: #222;
|
|
margin: 20px 0 10px 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
:global(#markdown-content h4) {
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin: 15px 0 8px 0;
|
|
}
|
|
|
|
:global(#markdown-content p) {
|
|
margin: 0 0 16px 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
:global(#markdown-content ul),
|
|
:global(#markdown-content ol) {
|
|
padding-left: 24px;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
:global(#markdown-content li) {
|
|
margin-bottom: 8px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
:global(#markdown-content strong) {
|
|
font-weight: 600;
|
|
color: #000;
|
|
}
|
|
|
|
:global(#markdown-content em) {
|
|
font-style: italic;
|
|
color: #555;
|
|
}
|
|
|
|
:global(#markdown-content blockquote) {
|
|
border-left: 4px solid #ddd;
|
|
padding: 16px;
|
|
margin: 20px 0;
|
|
color: #666;
|
|
font-style: italic;
|
|
background: #f9f9f9;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
:global(#markdown-content code) {
|
|
background: #f5f5f5;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
color: #d63384;
|
|
}
|
|
|
|
:global(#markdown-content pre) {
|
|
background: #f8f9fa;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
margin: 20px 0;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
:global(#markdown-content pre code) {
|
|
background: none;
|
|
padding: 0;
|
|
color: #212529;
|
|
}
|
|
|
|
:global(#markdown-content table) {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
:global(#markdown-content th),
|
|
:global(#markdown-content td) {
|
|
border: 1px solid #ddd;
|
|
padding: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
:global(#markdown-content th) {
|
|
background: #f5f5f5;
|
|
font-weight: 600;
|
|
}
|
|
|
|
:global(#markdown-content a) {
|
|
color: #1976d2;
|
|
text-decoration: none;
|
|
}
|
|
|
|
:global(#markdown-content a:hover) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Responsivo */
|
|
@media (max-width: 900px) {
|
|
.policies-layout {
|
|
flex-direction: column;
|
|
padding: 20px 20px 60px; /* ✅ Reduzido padding superior */
|
|
}
|
|
|
|
.policies-sidebar {
|
|
position: static;
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: auto;
|
|
border-right: none;
|
|
border-bottom: 1px solid #ededed;
|
|
padding: 0px 20px 20px;
|
|
overflow-x: auto;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
.policies-sidebar ul {
|
|
gap: 8px;
|
|
overflow-x: auto;
|
|
padding-bottom: 4px;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.policies-sidebar li a {
|
|
font-size: 0.97rem;
|
|
padding: 8px 12px;
|
|
white-space: nowrap;
|
|
border-radius: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.policies-sidebar li.active a {
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
.policies-main-content {
|
|
padding: 18px 4vw;
|
|
max-width: 98vw;
|
|
}
|
|
|
|
#markdown-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.policies-terms-section {
|
|
padding: 100px 20px 15px; /* ✅ Reduzido para mobile */
|
|
min-height: 150px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.policies-terms__header h1 {
|
|
max-width: 95vw;
|
|
text-align: left;
|
|
}
|
|
|
|
.policies-sidebar ul {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.policies-sidebar li a {
|
|
white-space: normal;
|
|
}
|
|
|
|
.policies-terms-section {
|
|
padding: 90px 20px 10px; /* ✅ Ainda mais reduzido para mobile pequeno */
|
|
min-height: 120px;
|
|
}
|
|
}
|
|
</style> |