O-Salgueiro/legal.html at main · Paco-Tilla/O-Salgueiro · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="gl">
<head>
<meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/>
<title data-i18n="page.title">Aviso Legal – Club O Salgueiro</title>
<style>
  :root{ --primary:#0b8457; --ring:rgba(11,132,87,.25) }
  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Helvetica,Arial,sans-serif;background:#fafafa;color:#1b1b1b}
  .container{max-width:900px;margin:0 auto;padding:0 1rem}
  header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee}
  .nav{display:flex;justify-content:space-between;align-items:center;height:64px}
  .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
  .logo{width:36px;height:36px;border-radius:50%;background:#0b8457;display:grid;place-items:center;color:#fff;font-weight:800}
  .lang button{border:1px solid #ddd;background:#fff;padding:.35rem .55rem;border-radius:.5rem;cursor:pointer}
  .lang button.active{border-color:#0b8457;box-shadow:0 0 0 3px var(--ring)}
  .card{background:#fff;border:1px solid #eee;border-radius:1rem;padding:1.25rem;box-shadow:0 6px 18px rgba(0,0,0,.04)}
  footer{background:#0e0f0f;color:#e9f4ef;margin-top:2rem} footer a{color:#e9f4ef}
</style>
</head>
<body>
<header><div class="container nav">
  <a class="brand" href="index.html#inicio"><span class="logo">🎾</span><span data-i18n="site.brand">Club O Salgueiro</span></a>
  <div class="lang"><button data-lang="gl" class="active" aria-pressed="true">GL</button><button data-lang="es">ES</button><button data-lang="en">EN</button></div>
</div></header>
<main class="container" style="padding:2rem 0">
  <h1 id="ttl">Aviso Legal</h1>
  <div class="card" id="content">
    <p><strong>Sociedade Deportiva O'Salgueiro</strong> informa que este sitio web ten finalidade informativa. Datos identificativos e contacto na sección <a href="index.html#contacto">Contacto</a>.</p>
  </div>
</main>
<footer><div class="container" style="padding:2rem 0">
  <a href="index.html#inicio" style="color:#e9f4ef">← Volver á portada</a>
  <p style="margin-top:1rem;color:#cfeede">© <span id="year"></span> Club O Salgueiro</p>
</div></footer>
<script>
const dict={
  gl:{'page.title':'Aviso Legal – Club O Salgueiro','h1':'Aviso Legal','body':`<p><strong>Sociedade Deportiva O'Salgueiro</strong> informa que este sitio web ten finalidade informativa. Datos identificativos e contacto na sección <a href="index.html#contacto">Contacto</a>.</p>`,'site.brand':'Club O Salgueiro'},
  es:{'page.title':'Aviso Legal – Club O Salgueiro','h1':'Aviso Legal','body':`<p><strong>Sociedad Deportiva O'Salgueiro</strong> informa que este sitio web tiene finalidad informativa. Datos identificativos y contacto en la sección <a href="index.html#contacto">Contacto</a>.</p>`,'site.brand':'Club O Salgueiro'},
  en:{'page.title':'Legal Notice – Club O Salgueiro','h1':'Legal Notice','body':`<p><strong>Sociedad Deportiva O'Salgueiro</strong> informs that this website is for informational purposes. Identification details and contact in the <a href="index.html#contacto">Contact</a> section.</p>`,'site.brand':'Club O Salgueiro'}
};
function applyLang(l){
  const s=dict[l]||dict.gl;
  document.documentElement.lang=l;
  document.title=s['page.title']||document.title;
  document.getElementById('ttl').textContent=s['h1']||'';
  document.getElementById('content').innerHTML=s['body']||'';
  document.querySelectorAll('.lang button').forEach(b=>{const a=b.getAttribute('data-lang')===l; b.classList.toggle('active',a); b.setAttribute('aria-pressed', a?'true':'false');});
  localStorage.setItem('lang', l);
}
document.querySelectorAll('.lang button').forEach(b=>b.addEventListener('click',()=>applyLang(b.getAttribute('data-lang'))));
document.getElementById('year').textContent=new Date().getFullYear();
applyLang(localStorage.getItem('lang')||'gl');
</script>
</body>
</html>