cancionero-web/res/templates/index.html
Carlos Galindo 03522304fa Rediseño de la interfaz y arreglos menores
- ¡Ahora con tema oscuro! Se activa según el navegador del usuario.
- URL de audios simplificada.
- Nuevos iconos para canciones con acordes/audios.
- Enlaces de la cabecera actualizados.
- Siempre mostramos los ajustes.
- Insertar espacio forzoso para separar algunas palabras que se juntaban.
- Soporte para canciones con dos líneas de acordes (e.g. Engrandece).
2023-09-08 00:37:38 +02:00

45 lines
1.3 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
{% include "head.html" with path="." only %}
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
{% include "header.html" with path="." %}
<main>
<h2>Índice</h2>
<ul class="songs">
{% for category in sorted_categories %}
<a href="#{{ category|slugify }}">
<li>{{ category|title }}</li>
</a>
{% endfor %}
</ul>
<p><strong>Leyenda</strong>: <img src="music.svg" class="music-icon"> tiene música grabada; <img src="guitar.svg" class="guitar-icon"> tiene acordes.</p>
<ol class="songs">
{% for category, songs in sorted_categories.items %}
<h3 id="{{ category|slugify }}">{{ category|title }}</h3>
{% for song in songs %}
<a href="{{ song.url }}">
<li>
<span class="number">{{ song.number }}.</span>
<span class="name">
{{ song.name }}
{% if song.author %} por {{ song.author }} {% endif %}
{% if song.origin %} basada en {{ song.origin }} {% endif %}
</span>
{% if song.has_audios %}
<img src="music.svg" class="music-icon filter-green">
{% endif %}
{% if song.chorded %}
<img src="guitar.svg" class="guitar-icon filter-green">
{% endif %}
</li>
</a>
{% endfor %}
{% endfor %}
</ol>
</main>
{% include "footer.html" %}
</body>
</html>