Compare commits

...
2 Commits
Author SHA1 Message Date
Alex a636eca3bd Integra commit inicial del repo 2026-10-20 14:52:19 +02:00
Alex 84a4ea0ac3 Web inicial de Anda Que No Sabes Ná 2026-10-20 14:52:03 +02:00
10 changed files with 690 additions and 2 deletions
+6
View File
@@ -0,0 +1,6 @@
chan.html
feed.xml
thumb_*.jpg
avatar.jpg
banner.jpg
__pycache__/
+11
View File
@@ -0,0 +1,11 @@
FROM nginx:1.27-alpine
RUN apk add --no-cache python3 py3-pillow
COPY public/ /usr/share/nginx/html/
COPY build.py /app/build.py
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
ENV SITE_DIR=/usr/share/nginx/html
EXPOSE 80
HEALTHCHECK --interval=30s --timeout=3s CMD wget -qO- http://127.0.0.1/ >/dev/null || exit 1
ENTRYPOINT ["/entrypoint.sh"]
+6 -2
View File
@@ -1,3 +1,7 @@
# andaquenosabesna
# andaquenosabesna.thax.es
Web de Anda Que No Sabes Ná (andaquenosabesna.thax.es)
Web estática de *Anda Que No Sabes Ná*. Un contenedor nginx regenera `index.html`
cada 15 min leyendo el feed RSS de YouTube (`build.py`) y cachea las miniaturas en `img/`.
- Local: `SITE_DIR=public python3 build.py && python3 -m http.server -d public 8000`
- Contenedor: `docker build -t aqnsn-site . && docker run -p 8080:80 aqnsn-site`
+200
View File
@@ -0,0 +1,200 @@
"""Genera index.html a partir del feed RSS del canal (se ejecuta cada 15 min en el contenedor)."""
import html
import os
import shutil
import sys
import urllib.request
import xml.etree.ElementTree as ET
from PIL import Image, ImageStat
OUT = os.environ.get('SITE_DIR', 'public')
FEED = os.environ.get('FEED_URL', 'https://www.youtube.com/feeds/videos.xml?channel_id=UC8gVtzB3Lqm7nnfMhMvXGxQ')
MAX_VIDEOS = 15
NS = {'a': 'http://www.w3.org/2005/Atom', 'y': 'http://www.youtube.com/xml/schemas/2015'}
MESES = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic']
YT = 'https://www.youtube.com/@andaquenosabesna'
TT = 'https://www.tiktok.com/@andaquenosabesna'
IG = 'https://www.instagram.com/andaquenosabesna'
MAIL = 'andaquenosabesnada@gmail.com'
def fetch(url, timeout=20):
req = urllib.request.Request(url, headers={'User-Agent': 'Mozilla/5.0 (aqnsn-site)'})
return urllib.request.urlopen(req, timeout=timeout).read()
try:
root = ET.fromstring(fetch(FEED))
except Exception as exc: # sin red o feed caído: se conserva la web anterior
print('feed no disponible, se mantiene index.html:', exc, file=sys.stderr)
sys.exit(0)
videos = []
for e in root.findall('a:entry', NS)[:MAX_VIDEOS]:
d = e.find('a:published', NS).text[:10].split('-')
videos.append({
'id': e.find('y:videoId', NS).text,
'title': e.find('a:title', NS).text,
'date': f'{int(d[2])} {MESES[int(d[1]) - 1]} {d[0]}',
})
def sync_thumbs(vids):
img_dir = os.path.join(OUT, 'img')
os.makedirs(img_dir, exist_ok=True)
keep = {'avatar.jpg', 'banner.jpg'}
ok = []
for v in vids:
path = os.path.join(img_dir, v['id'] + '.jpg')
if not os.path.exists(path):
try:
open(path, 'wb').write(fetch(f"https://i.ytimg.com/vi/{v['id']}/hqdefault.jpg"))
except Exception as exc:
print('miniatura no descargada', v['id'], exc, file=sys.stderr)
continue
keep.add(v['id'] + '.jpg')
ok.append(v)
for f in os.listdir(img_dir):
if f not in keep:
os.remove(os.path.join(img_dir, f))
return ok
videos = sync_thumbs(videos)
if not videos:
sys.exit(0)
def is_short(vid):
"""Los Shorts llevan barras laterales desenfocadas: poca textura en los laterales."""
im = Image.open(os.path.join(OUT, 'img', vid + '.jpg')).convert('L')
w, h = im.size
return ImageStat.Stat(im.crop((0, 0, int(w * .18), h))).stddev[0] < 25
esc = html.escape
featured, rest = videos[0], videos[1:] # el feed viene del más nuevo al más antiguo
def url(v):
return f"https://www.youtube.com/watch?v={v['id']}"
def card(v, n):
return f'''
<a class="card reveal" style="--d:{(n % 3) * 70}ms" href="{url(v)}" target="_blank" rel="noopener">
<span class="thumb"><img src="img/{v['id']}.jpg" alt="" loading="lazy" width="480" height="360"{' class="short"' if is_short(v['id']) else ''}><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>{esc(v['date'])}</time><strong>{esc(v['title'])}</strong></span>
</a>'''
cards = ''.join(card(v, i) for i, v in enumerate(rest))
page = f'''<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anda Que No Sabes Ná · El programa nocturno 100% granaíno</title>
<meta name="description" content="Anda Que No Sabes Ná: el programa nocturno 100% granaíno. Conversaciones sobre educación, Egipto, lenguas, religiones y mucho más.">
<meta name="theme-color" content="#06080d">
<meta property="og:title" content="Anda Que No Sabes Ná">
<meta property="og:description" content="El programa nocturno 100% granaíno.">
<meta property="og:image" content="https://andaquenosabesna.thax.es/img/banner.jpg">
<meta property="og:type" content="website">
<link rel="icon" href="img/avatar.jpg">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="skip" href="#programas">Saltar al contenido</a>
<header class="top">
<a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
<nav aria-label="Principal">
<a href="#programas">Programas</a>
<a href="#programa">El programa</a>
<a href="#seguir">Seguir</a>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-bg" aria-hidden="true"></div>
<div class="hero-inner">
<img class="neon" src="img/avatar.jpg" alt="Anda Que No Sabes Ná" width="220" height="220">
<p class="kicker">Directo desde Granada, de noche</p>
<h1>El programa nocturno<br><em>100% granaíno</em></h1>
<p class="lead">Charlas sin guion sobre lo que sabemos, lo que no, y lo que creemos saber.</p>
<div class="cta">
<a class="btn primary" href="{YT}" target="_blank" rel="noopener">Ver en YouTube</a>
<a class="btn" href="#programas">Últimos programas</a>
</div>
</div>
<a class="scroll" href="#destacado" aria-label="Bajar"><span></span></a>
</section>
<section id="destacado" class="featured wrap reveal">
<a class="feat" href="{url(featured)}" target="_blank" rel="noopener">
<span class="thumb"><img src="img/{featured['id']}.jpg" alt="" width="480" height="360"><span class="play big" aria-hidden="true"></span></span>
<span class="feat-text">
<span class="tag">Último vídeo</span>
<strong>{esc(featured['title'])}</strong>
<time>{esc(featured['date'])}</time>
<span class="go">Ver el programa <i aria-hidden="true">→</i></span>
</span>
</a>
</section>
<section id="programas" class="wrap">
<div class="sec-head reveal">
<h2>Últimos <em>vídeos</em></h2>
<a class="more" href="{YT}/videos" target="_blank" rel="noopener">Todos los vídeos →</a>
</div>
<div class="grid">{cards}
</div>
</section>
<section id="programa" class="about wrap reveal">
<h2>De qué va</h2>
<p>Un programa de noche, con tertulia y sin prisa. Cada semana entra gente distinta, con su oficio y su manía, y se habla de lo que sale: de cómo se educa a un adolescente, de la vida en las calles de El Cairo, de si el árabe es tan antiguo como dicen, de qué tienen en común las religiones o de cómo se hace un truco de cartas.</p>
<ul class="chips" aria-label="Temas">
<li>Educación</li><li>Egipto</li><li>Lengua árabe</li><li>Religiones</li><li>Magia</li><li>Cultura granaína</li><li>Entrevistas</li>
</ul>
</section>
<section id="seguir" class="follow wrap reveal">
<h2>Síguenos</h2>
<div class="socials">
<a href="{YT}" target="_blank" rel="noopener"><b>YouTube</b><span>@andaquenosabesna</span></a>
<a href="{TT}" target="_blank" rel="noopener"><b>TikTok</b><span>@andaquenosabesna</span></a>
<a href="{IG}" target="_blank" rel="noopener"><b>Instagram</b><span>@andaquenosabesna</span></a>
</div>
</section>
</main>
<footer>
<div class="wrap foot">
<p>© 2026 Anda Que No Sabes Ná · Granada</p>
<p class="links"><a href="privacidad.html">Política de privacidad</a><a href="terminos.html">Condiciones del servicio</a><a href="mailto:{MAIL}">Contacto</a></p>
</div>
</footer>
<script>
(function () {{
var els = document.querySelectorAll('.reveal');
if (!('IntersectionObserver' in window) || matchMedia('(prefers-reduced-motion: reduce)').matches) {{
els.forEach(function (e) {{ e.classList.add('in'); }}); return;
}}
var io = new IntersectionObserver(function (items) {{
items.forEach(function (i) {{ if (i.isIntersecting) {{ i.target.classList.add('in'); io.unobserve(i.target); }} }});
}}, {{ threshold: 0.12 }});
els.forEach(function (e) {{ io.observe(e); }});
}})();
</script>
</body>
</html>
'''
tmp = os.path.join(OUT, 'index.html.tmp')
open(tmp, 'w', encoding='utf-8').write(page)
shutil.move(tmp, os.path.join(OUT, 'index.html'))
print('index.html', len(page), 'bytes;', len(videos), 'videos; destacado:', featured['id'])
+5
View File
@@ -0,0 +1,5 @@
#!/bin/sh
# Primer build al arrancar y después cada 15 minutos; si el feed falla se conserva la web anterior.
python3 /app/build.py || true
( while true; do sleep 900; python3 /app/build.py || true; done ) &
exec nginx -g 'daemon off;'
+13
View File
@@ -0,0 +1,13 @@
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
index index.html;
add_header X-Content-Type-Options nosniff;
add_header Referrer-Policy strict-origin-when-cross-origin;
location = /index.html { add_header Cache-Control "no-cache"; }
location = / { add_header Cache-Control "no-cache"; }
location /img/ { expires 7d; add_header Cache-Control "public"; }
location ~* \.(css)$ { add_header Cache-Control "no-cache"; }
location / { try_files $uri $uri/ =404; }
}
+159
View File
@@ -0,0 +1,159 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anda Que No Sabes Ná · El programa nocturno 100% granaíno</title>
<meta name="description" content="Anda Que No Sabes Ná: el programa nocturno 100% granaíno. Conversaciones sobre educación, Egipto, lenguas, religiones y mucho más.">
<meta name="theme-color" content="#06080d">
<meta property="og:title" content="Anda Que No Sabes Ná">
<meta property="og:description" content="El programa nocturno 100% granaíno.">
<meta property="og:image" content="https://andaquenosabesna.thax.es/img/banner.jpg">
<meta property="og:type" content="website">
<link rel="icon" href="img/avatar.jpg">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="skip" href="#programas">Saltar al contenido</a>
<header class="top">
<a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
<nav aria-label="Principal">
<a href="#programas">Programas</a>
<a href="#programa">El programa</a>
<a href="#seguir">Seguir</a>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-bg" aria-hidden="true"></div>
<div class="hero-inner">
<img class="neon" src="img/avatar.jpg" alt="Anda Que No Sabes Ná" width="220" height="220">
<p class="kicker">Directo desde Granada, de noche</p>
<h1>El programa nocturno<br><em>100% granaíno</em></h1>
<p class="lead">Charlas sin guion sobre lo que sabemos, lo que no, y lo que creemos saber.</p>
<div class="cta">
<a class="btn primary" href="https://www.youtube.com/@andaquenosabesna" target="_blank" rel="noopener">Ver en YouTube</a>
<a class="btn" href="#programas">Últimos programas</a>
</div>
</div>
<a class="scroll" href="#destacado" aria-label="Bajar"><span></span></a>
</section>
<section id="destacado" class="featured wrap reveal">
<a class="feat" href="https://www.youtube.com/watch?v=PxQHPd5YDLs" target="_blank" rel="noopener">
<span class="thumb"><img src="img/PxQHPd5YDLs.jpg" alt="" width="480" height="360"><span class="play big" aria-hidden="true"></span></span>
<span class="feat-text">
<span class="tag">Último vídeo</span>
<strong>La Tediosa Burocracia en la Educación</strong>
<time>19 oct 2026</time>
<span class="go">Ver el programa <i aria-hidden="true">→</i></span>
</span>
</a>
</section>
<section id="programas" class="wrap">
<div class="sec-head reveal">
<h2>Últimos <em>vídeos</em></h2>
<a class="more" href="https://www.youtube.com/@andaquenosabesna/videos" target="_blank" rel="noopener">Todos los vídeos →</a>
</div>
<div class="grid">
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=rLFSEqe77OY" target="_blank" rel="noopener">
<span class="thumb"><img src="img/rLFSEqe77OY.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>19 oct 2026</time><strong>¿Cómo dejas de comerte las uñas? El trauma útil de Palín</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=_-VaTy2fazY" target="_blank" rel="noopener">
<span class="thumb"><img src="img/_-VaTy2fazY.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>18 oct 2026</time><strong>DOMESTICAR ADOLESCENTES, PLANTAR TOMATES Y CONSTRUIR MINIATURAS | AQNSN Programa 3 - Galaxoide</strong></span>
</a>
<a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=jmV_Ao85RvI" target="_blank" rel="noopener">
<span class="thumb"><img src="img/jmV_Ao85RvI.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>14 oct 2026</time><strong>¿Cómo de antiguo es el Árabe?</strong></span>
</a>
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=DLcn8i9lV6Q" target="_blank" rel="noopener">
<span class="thumb"><img src="img/DLcn8i9lV6Q.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>13 oct 2026</time><strong>Todas las religiones son similares...</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=E_eULZSlWJs" target="_blank" rel="noopener">
<span class="thumb"><img src="img/E_eULZSlWJs.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>12 oct 2026</time><strong>La Vida de las Mujeres Egipcias en las zonas costeras</strong></span>
</a>
<a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=600_XwAHkv0" target="_blank" rel="noopener">
<span class="thumb"><img src="img/600_XwAHkv0.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>12 oct 2026</time><strong>Clases religiosas separadas, la política de las escuelas egipcias</strong></span>
</a>
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=XKSVhuk_lQI" target="_blank" rel="noopener">
<span class="thumb"><img src="img/XKSVhuk_lQI.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>11 oct 2026</time><strong>Poligamia en Egipto, de la antigüedad a la actualidad</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=voK4g7lIv4E" target="_blank" rel="noopener">
<span class="thumb"><img src="img/voK4g7lIv4E.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>11 oct 2026</time><strong>El Barrio Pijo de Egipto, Masr El Gedida, y sus tiendas de Oro</strong></span>
</a>
<a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=7zY2ey_ERlQ" target="_blank" rel="noopener">
<span class="thumb"><img src="img/7zY2ey_ERlQ.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>10 oct 2026</time><strong>Un Simple Teletransporte de Cartas...</strong></span>
</a>
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=yzTMyAKQnDQ" target="_blank" rel="noopener">
<span class="thumb"><img src="img/yzTMyAKQnDQ.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>10 oct 2026</time><strong>Las Franquicias se extienden en EGIPTO...</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=Q7qYQbvjMxQ" target="_blank" rel="noopener">
<span class="thumb"><img src="img/Q7qYQbvjMxQ.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>9 oct 2026</time><strong>El Mahshi y otras RECETAS EXÓTICAS de Egipto que PODRÍAN PERDERSE</strong></span>
</a>
<a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=DgTa9qX4xH0" target="_blank" rel="noopener">
<span class="thumb"><img src="img/DgTa9qX4xH0.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>9 oct 2026</time><strong>El barrio cristiano del Cairo que RECICLA BASURA</strong></span>
</a>
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=oAoEz2Kwmk8" target="_blank" rel="noopener">
<span class="thumb"><img src="img/oAoEz2Kwmk8.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>8 oct 2026</time><strong>Tiendas QUE NO CIERRAN en Egipto 🌇</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=mxP0dvn2HD4" target="_blank" rel="noopener">
<span class="thumb"><img src="img/mxP0dvn2HD4.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>6 oct 2026</time><strong>Árabe formal VS Árabe de la calle, ¿qué diferencias hay?</strong></span>
</a>
</div>
</section>
<section id="programa" class="about wrap reveal">
<h2>De qué va</h2>
<p>Un programa de noche, con tertulia y sin prisa. Cada semana entra gente distinta, con su oficio y su manía, y se habla de lo que sale: de cómo se educa a un adolescente, de la vida en las calles de El Cairo, de si el árabe es tan antiguo como dicen, de qué tienen en común las religiones o de cómo se hace un truco de cartas.</p>
<ul class="chips" aria-label="Temas">
<li>Educación</li><li>Egipto</li><li>Lengua árabe</li><li>Religiones</li><li>Magia</li><li>Cultura granaína</li><li>Entrevistas</li>
</ul>
</section>
<section id="seguir" class="follow wrap reveal">
<h2>Síguenos</h2>
<div class="socials">
<a href="https://www.youtube.com/@andaquenosabesna" target="_blank" rel="noopener"><b>YouTube</b><span>@andaquenosabesna</span></a>
<a href="https://www.tiktok.com/@andaquenosabesna" target="_blank" rel="noopener"><b>TikTok</b><span>@andaquenosabesna</span></a>
<a href="https://www.instagram.com/andaquenosabesna" target="_blank" rel="noopener"><b>Instagram</b><span>@andaquenosabesna</span></a>
</div>
</section>
</main>
<footer>
<div class="wrap foot">
<p>© 2026 Anda Que No Sabes Ná · Granada</p>
<p class="links"><a href="privacidad.html">Política de privacidad</a><a href="terminos.html">Condiciones del servicio</a><a href="mailto:andaquenosabesnada@gmail.com">Contacto</a></p>
</div>
</footer>
<script>
(function () {
var els = document.querySelectorAll('.reveal');
if (!('IntersectionObserver' in window) || matchMedia('(prefers-reduced-motion: reduce)').matches) {
els.forEach(function (e) { e.classList.add('in'); }); return;
}
var io = new IntersectionObserver(function (items) {
items.forEach(function (i) { if (i.isIntersecting) { i.target.classList.add('in'); io.unobserve(i.target); } });
}, { threshold: 0.12 });
els.forEach(function (e) { io.observe(e); });
})();
</script>
</body>
</html>
+59
View File
@@ -0,0 +1,59 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Política de privacidad · Anda Que No Sabes Ná</title>
<meta name="description" content="Política de privacidad de Anda Que No Sabes Ná y de su aplicación de publicación en YouTube, TikTok e Instagram.">
<meta name="theme-color" content="#06080d">
<link rel="icon" href="img/avatar.jpg">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="top">
<a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
<nav aria-label="Principal"><a href="/">Inicio</a><a href="terminos.html">Condiciones</a></nav>
</header>
<main class="legal">
<h1>Política de privacidad</h1>
<p class="upd">Última actualización: 20 de octubre de 2026</p>
<h2>1. Quién somos</h2>
<p><strong>Anda Que No Sabes Ná</strong> es un programa de pódcast y vídeo producido en Granada (España). Esta política cubre la web <a href="https://andaquenosabesna.thax.es">andaquenosabesna.thax.es</a> y la aplicación privada que usamos para publicar nuestros propios vídeos en YouTube, TikTok e Instagram.</p>
<p>Contacto para cualquier asunto de privacidad: <a href="mailto:andaquenosabesnada@gmail.com">andaquenosabesnada@gmail.com</a>.</p>
<h2>2. Esta web</h2>
<p>La web es estática. <strong>No usa cookies, no tiene analítica, no tiene formularios ni cuentas de usuario</strong> y no carga scripts, fuentes ni imágenes de terceros: las miniaturas están alojadas en este mismo sitio.</p>
<p>Como cualquier servidor web, nuestro servidor puede registrar de forma temporal la dirección IP, la fecha y la página solicitada, únicamente por seguridad y para detectar abusos. No usamos esos registros para identificar a nadie ni los compartimos.</p>
<p>Los enlaces a YouTube, TikTok e Instagram llevan a servicios de terceros, que tienen sus propias políticas de privacidad.</p>
<h2>3. Nuestra aplicación de publicación</h2>
<p>Usamos una aplicación de gestión de redes sociales de código abierto (Postiz), instalada en un servidor propio, para programar y publicar el contenido del programa. La aplicación está pensada para uso interno: <strong>solo la utiliza el propietario de las cuentas</strong> y no está abierta al público.</p>
<p>Para funcionar, la aplicación solicita autorización a las cuentas del propio programa y accede a:</p>
<ul>
<li><strong>YouTube / Google:</strong> información básica del perfil y del canal, y permiso para subir y gestionar vídeos y consultar estadísticas del canal propio.</li>
<li><strong>TikTok:</strong> información básica del perfil y permiso para publicar vídeos en la cuenta propia.</li>
<li><strong>Instagram:</strong> información básica del perfil y permiso para publicar contenido en la cuenta propia.</li>
</ul>
<p>Los tokens de acceso se guardan en una base de datos de nuestro servidor. <strong>No vendemos, alquilamos ni compartimos estos datos con nadie, no los usamos para publicidad ni los transferimos a terceros.</strong> Usamos los datos solo para publicar y programar el contenido del programa en sus propias cuentas.</p>
<h2>4. Servicios de API de YouTube</h2>
<p>La aplicación usa los Servicios de API de YouTube. Al utilizarla, aceptas quedar sujeto a los <a href="https://www.youtube.com/t/terms" target="_blank" rel="noopener">Términos del Servicio de YouTube</a>. La política de privacidad de Google está disponible en <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">policies.google.com/privacy</a>.</p>
<p>El uso que hace la aplicación de la información recibida de las API de Google se ajusta a la <a href="https://developers.google.com/terms/api-services-user-data-policy" target="_blank" rel="noopener">Política de datos de usuario de los Servicios de API de Google</a>, incluidos los requisitos de uso limitado.</p>
<p>Puedes revocar en cualquier momento el acceso de la aplicación a tu cuenta de Google desde <a href="https://myaccount.google.com/connections" target="_blank" rel="noopener">myaccount.google.com/connections</a>.</p>
<h2>5. TikTok e Instagram</h2>
<p>El acceso a TikTok se rige también por los <a href="https://www.tiktok.com/legal/page/row/terms-of-service/es" target="_blank" rel="noopener">Términos del Servicio de TikTok</a> y su política de privacidad. El acceso a Instagram, por las condiciones y la política de datos de Meta. Puedes revocar el acceso de la aplicación desde la configuración de seguridad de cada plataforma.</p>
<h2>6. Conservación y eliminación</h2>
<p>Conservamos los tokens solo mientras la cuenta esté conectada. Si desconectamos una cuenta o revocas el acceso, el token deja de ser válido y se elimina de nuestra base de datos. Si quieres que borremos cualquier dato asociado a ti, escríbenos al correo de contacto.</p>
<h2>7. Tus derechos</h2>
<p>Conforme al Reglamento General de Protección de Datos (RGPD) y a la normativa española, puedes ejercer tus derechos de acceso, rectificación, supresión, oposición, limitación y portabilidad escribiendo a <a href="mailto:andaquenosabesnada@gmail.com">andaquenosabesnada@gmail.com</a>. También puedes reclamar ante la Agencia Española de Protección de Datos (<a href="https://www.aepd.es" target="_blank" rel="noopener">aepd.es</a>).</p>
<h2>8. Cambios</h2>
<p>Si cambiamos esta política, publicaremos la nueva versión en esta misma página con su fecha de actualización.</p>
</main>
</body>
</html>
+176
View File
@@ -0,0 +1,176 @@
:root {
--bg: #06080d;
--bg2: #0b0f18;
--card: #0e1420;
--line: #1b2535;
--ink: #eaf6ff;
--muted: #8fa3b8;
--neon: #2ee6ff;
--neon-d: #12a9c2;
--amber: #ffb45a;
--radius: 16px;
--glow: 0 0 6px rgba(46, 230, 255, .8), 0 0 22px rgba(46, 230, 255, .45), 0 0 60px rgba(46, 230, 255, .25);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--neon); color: #001; padding: 8px 14px; border-radius: 8px; z-index: 99; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 6px; }
/* header */
.top {
position: fixed; inset: 0 0 auto 0; z-index: 20;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 10px max(16px, calc((100% - 1120px) / 2));
background: linear-gradient(#06080dd9, #06080d00);
backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .02em; }
.brand img { border-radius: 50%; box-shadow: 0 0 14px rgba(46, 230, 255, .5); }
.top nav { display: flex; gap: 22px; font-size: .95rem; color: var(--muted); }
.top nav a:hover { color: var(--neon); }
@media (max-width: 640px) { .brand span { display: none; } .top nav { gap: 16px; } }
/* hero */
.hero {
position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center;
overflow: hidden; padding: 110px 16px 80px;
}
.hero-bg {
position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 50% 38%, rgba(46, 230, 255, .16), transparent 70%),
linear-gradient(180deg, rgba(6, 8, 13, .78) 0%, rgba(6, 8, 13, .92) 65%, var(--bg) 100%),
url("img/banner.jpg") center / cover no-repeat;
filter: blur(2px) saturate(.9);
transform: scale(1.04);
animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: scale(1.1) translateY(-1.5%); } }
.hero-inner { position: relative; max-width: 760px; }
.neon {
width: clamp(130px, 22vw, 190px); margin: 0 auto 18px; border-radius: 50%;
border: 1px solid rgba(46, 230, 255, .35);
animation: flicker 6s infinite;
}
@keyframes flicker {
0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; box-shadow: 0 0 22px rgba(46, 230, 255, .55), 0 0 70px rgba(46, 230, 255, .3); }
20%, 63% { opacity: .8; box-shadow: 0 0 8px rgba(46, 230, 255, .3), 0 0 24px rgba(46, 230, 255, .12); }
}
.kicker { margin: 0 0 10px; text-transform: uppercase; letter-spacing: .28em; font-size: .78rem; color: var(--amber); }
h1 { margin: 0 0 18px; font-size: clamp(2rem, 6.4vw, 4rem); line-height: 1.08; letter-spacing: -.02em; }
h1 em { font-style: normal; color: var(--neon); text-shadow: var(--glow); }
.lead { margin: 0 auto 30px; max-width: 520px; color: #c3d3e3; font-size: 1.1rem; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
padding: 13px 26px; border-radius: 999px; border: 1px solid var(--line); background: #0e1420b3;
font-weight: 600; transition: .25s;
}
.btn:hover { border-color: var(--neon); color: var(--neon); transform: translateY(-2px); }
.btn.primary { background: var(--neon); color: #001a20; border-color: var(--neon); box-shadow: 0 0 24px rgba(46, 230, 255, .35); }
.btn.primary:hover { color: #001a20; box-shadow: 0 0 38px rgba(46, 230, 255, .6); }
.scroll { position: absolute; bottom: 24px; left: 50%; width: 26px; height: 42px; margin-left: -13px; border: 2px solid #ffffff55; border-radius: 14px; }
.scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--neon); animation: wheel 1.8s infinite; }
@keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(14px); } }
/* sections */
section { padding-block: 56px; }
h2 { margin: 0 0 22px; font-size: clamp(1.5rem, 3.6vw, 2.2rem); letter-spacing: -.01em; }
h2 em { font-style: normal; color: var(--neon); text-shadow: 0 0 18px rgba(46, 230, 255, .5); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.more { color: var(--muted); font-size: .95rem; }
.more:hover { color: var(--neon); }
/* thumbs */
.thumb { position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; background: #000; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); transition: transform .5s; }
.thumb img.short { --z: 2.15; transform-origin: 50% 32%; }
.play {
position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: .3s;
background: radial-gradient(circle, rgba(6, 8, 13, .1), rgba(6, 8, 13, .55));
}
.play::after {
content: ""; width: 54px; height: 54px; border-radius: 50%;
background: var(--neon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23001a20' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 60% no-repeat;
box-shadow: var(--glow);
}
.play.big::after { width: 76px; height: 76px; }
/* featured */
.feat {
display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(18px, 4vw, 40px); align-items: center;
padding: clamp(14px, 2.4vw, 22px); border: 1px solid var(--line); border-radius: 22px;
background: linear-gradient(135deg, var(--card), var(--bg2));
box-shadow: 0 30px 80px -40px rgba(46, 230, 255, .25);
}
.feat-text { display: grid; gap: 10px; }
.tag { justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #001a20; background: var(--amber); font-weight: 700; }
.feat-text strong { font-size: clamp(1.25rem, 2.8vw, 1.9rem); line-height: 1.2; }
.feat-text time, .meta time { color: var(--muted); font-size: .88rem; }
.go { color: var(--neon); font-weight: 600; }
.go i { display: inline-block; transition: transform .25s; font-style: normal; }
.feat:hover .go i { transform: translateX(6px); }
.feat:hover img, .card:hover img { transform: scale(calc(var(--z, 1) * 1.06)); }
.feat:hover .play, .card:hover .play { opacity: 1; }
@media (max-width: 760px) { .feat { grid-template-columns: 1fr; } }
/* grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.card {
display: grid; gap: 12px; padding: 10px 10px 16px; border-radius: var(--radius);
border: 1px solid transparent; transition: .3s; background: transparent;
}
.card:hover { background: var(--card); border-color: var(--line); transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(46, 230, 255, .35); }
.meta { display: grid; gap: 4px; padding-inline: 4px; }
.meta strong { font-size: 1rem; line-height: 1.3; font-weight: 600; }
/* about */
.about { max-width: 780px; }
.about p { color: #c3d3e3; font-size: 1.1rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 26px 0 0; }
.chips li { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .92rem; transition: .25s; }
.chips li:hover { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 16px rgba(46, 230, 255, .25); }
/* follow */
.socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.socials a {
display: grid; gap: 2px; padding: 22px 24px; border-radius: var(--radius);
border: 1px solid var(--line); background: linear-gradient(135deg, var(--card), var(--bg2)); transition: .3s;
}
.socials a:hover { border-color: var(--neon); transform: translateY(-4px); box-shadow: 0 0 28px rgba(46, 230, 255, .25); }
.socials b { font-size: 1.15rem; }
.socials span { color: var(--muted); font-size: .92rem; }
/* footer */
footer { margin-top: 40px; border-top: 1px solid var(--line); background: var(--bg2); padding-block: 28px; color: var(--muted); font-size: .92rem; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot p { margin: 0; }
.links { display: flex; gap: 20px; flex-wrap: wrap; }
.links a:hover { color: var(--neon); }
/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--d, 0ms), transform .7s ease var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.reveal { opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}
/* páginas legales */
.legal { max-width: 760px; margin: 0 auto; padding: 120px 16px 60px; }
.legal h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); text-align: left; }
.legal h2 { margin-top: 36px; font-size: 1.3rem; color: var(--neon); }
.legal p, .legal li { color: #c3d3e3; }
.legal a { color: var(--neon); text-decoration: underline; text-underline-offset: 3px; }
.legal .upd { color: var(--muted); font-size: .9rem; }
+55
View File
@@ -0,0 +1,55 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Condiciones del servicio · Anda Que No Sabes Ná</title>
<meta name="description" content="Condiciones del servicio de Anda Que No Sabes Ná y de su aplicación de publicación.">
<meta name="theme-color" content="#06080d">
<link rel="icon" href="img/avatar.jpg">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="top">
<a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
<nav aria-label="Principal"><a href="/">Inicio</a><a href="privacidad.html">Privacidad</a></nav>
</header>
<main class="legal">
<h1>Condiciones del servicio</h1>
<p class="upd">Última actualización: 20 de octubre de 2026</p>
<h2>1. Objeto</h2>
<p>Estas condiciones regulan el uso de la web <a href="https://andaquenosabesna.thax.es">andaquenosabesna.thax.es</a>, del programa <strong>Anda Que No Sabes Ná</strong> y de la aplicación privada con la que publicamos nuestro contenido en YouTube, TikTok e Instagram. Al usar la web aceptas estas condiciones.</p>
<h2>2. La web</h2>
<p>La web es informativa: presenta el programa y enlaza a nuestros vídeos y redes sociales. No requiere registro y no ofrece servicios de pago. Intentamos que la información sea correcta, pero puede cambiar o contener errores.</p>
<h2>3. La aplicación de publicación</h2>
<p>La aplicación es una herramienta de uso interno, instalada en un servidor propio, que sirve para programar y publicar el contenido del programa en las cuentas del propio programa. <strong>No está abierta al público ni ofrece a terceros ninguna funcionalidad.</strong> El tratamiento de datos asociado se describe en la <a href="privacidad.html">política de privacidad</a>.</p>
<h2>4. Servicios de terceros</h2>
<p>La publicación se realiza a través de plataformas de terceros, cuyas condiciones se aplican además de estas:</p>
<ul>
<li><a href="https://www.youtube.com/t/terms" target="_blank" rel="noopener">Términos del Servicio de YouTube</a></li>
<li><a href="https://www.tiktok.com/legal/page/row/terms-of-service/es" target="_blank" rel="noopener">Términos del Servicio de TikTok</a></li>
<li>Condiciones de uso de Instagram (Meta)</li>
</ul>
<h2>5. Propiedad intelectual</h2>
<p>Los vídeos, textos, imágenes, el nombre y el logotipo de Anda Que No Sabes Ná pertenecen a sus autores y a las personas que participan en el programa. No está permitido reproducirlos, distribuirlos ni usarlos con fines comerciales sin autorización previa por escrito. Puedes compartir los enlaces a nuestros vídeos libremente.</p>
<h2>6. Enlaces externos</h2>
<p>La web contiene enlaces a sitios de terceros. No controlamos su contenido ni somos responsables de sus políticas o prácticas.</p>
<h2>7. Limitación de responsabilidad</h2>
<p>La web se ofrece «tal cual», sin garantías de disponibilidad continua. En la medida permitida por la ley, no seremos responsables de los daños derivados de su uso o de la imposibilidad de acceder a ella. Las opiniones expresadas en el programa son de quienes las dicen.</p>
<h2>8. Cambios</h2>
<p>Podemos actualizar estas condiciones. La versión vigente es la publicada en esta página, con su fecha de actualización.</p>
<h2>9. Ley aplicable y contacto</h2>
<p>Estas condiciones se rigen por la legislación española. Para cualquier duda, escríbenos a <a href="mailto:andaquenosabesnada@gmail.com">andaquenosabesnada@gmail.com</a>.</p>
</main>
</body>
</html>