Fix formatting of favicon links in HTML template

base/static/css/main.css

@@ -77,11 +77,6 @@ article.message {
 }
 
 #hero {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     background: radial-gradient(
         circle 50vh at calc(100vw - 4rem) 50%,
         var(--pico-primary-background),
@@ -90,19 +85,41 @@ article.message {
         color-mix(in hsl, var(--pico-primary-background) 30%, var(--pico-background-color)) 60%,
         color-mix(in hsl, var(--pico-primary-background) 10%, var(--pico-background-color)) 80%,
         var(--pico-background-color));
-    display: grid;
-    grid-template-rows: 1fr min-content;
-    align-items: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    overflow-y: auto;
     padding: 4rem;
 
-    .big-logo {
-        font-size: 8rem;
+    main {
+        display: contents;
     }
-
-    h1 {
-        font-size: 4rem;
+    section {
+        max-width: 20rem;
     }
 }
+.full-page {
+    height: 100%;
+        display: grid;
+        grid-template-rows: 1fr;
+        align-items: center;
+        margin-bottom: 4rem;
+
+        &.r {
+            -ms-grid-column-align: end;
+        }
+        .big-logo {
+            font-size: 8rem;
+        }
+
+        h1 {
+            font-size: 4rem;
+        }
+}
+
 
 h1,
 h2,
@@ -201,3 +218,7 @@ table.results, table.musics {
         }
     }
 }
+
+.brand-name {
+    color: var(--pico-primary);
+}

base/static/favicon/favicon.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256" height="256" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="Gradient" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="0%" style="stop-color:#AA40BF;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#AA40BF;stop-opacity:1" />
+    </linearGradient>
+    <filter id="alpha-to-white">
+      <feColorMatrix in="SourceGraphic" type="matrix"
+                     values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+    </filter>
+    <g id="child-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="16px" width="16px"><path d="M18.7134 8.12811L18.4668 8.69379C18.2864 9.10792 17.7136 9.10792 17.5331 8.69379L17.2866 8.12811C16.8471 7.11947 16.0555 6.31641 15.0677 5.87708L14.308 5.53922C13.8973 5.35653 13.8973 4.75881 14.308 4.57612L15.0252 4.25714C16.0384 3.80651 16.8442 2.97373 17.2761 1.93083L17.5293 1.31953C17.7058 0.893489 18.2942 0.893489 18.4706 1.31953L18.7238 1.93083C19.1558 2.97373 19.9616 3.80651 20.9748 4.25714L21.6919 4.57612C22.1027 4.75881 22.1027 5.35653 21.6919 5.53922L20.9323 5.87708C19.9445 6.31641 19.1529 7.11947 18.7134 8.12811ZM7 3H12V6H9V17C9 19.2091 7.20914 21 5 21C2.79086 21 1 19.2091 1 17C1 14.7909 2.79086 13 5 13C5.72857 13 6.41165 13.1948 7 13.5351V3ZM18 13.5351V11H20V17C20 19.2091 18.2091 21 16 21C13.7909 21 12 19.2091 12 17C12 14.7909 13.7909 13 16 13C16.7286 13 17.4117 13.1948 18 13.5351Z" /></svg></g>
+  </defs>
+  <rect
+      width="256"
+      height="256"
+      fill="url(#Gradient)"
+      ry="128"
+      x="0"
+      y="0" />
+  <use xlink:href="#child-svg" filter="url(#alpha-to-white)"
+       transform="matrix(8,0,0,8,64,64)" />
+</svg>

base/static/favicon/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#aa40bf",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

base/templates/base.html

@@ -11,7 +11,7 @@
                 Musik
             {% endblock title %}
         </title>
-        <link rel="icon" href="{% static "logo.svg" %}">
+        {% include "favicon.html" %}
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap"

base/templates/favicon.html

@@ -0,0 +1,8 @@
+{% load static %}
+<meta name="theme-color" content="#aa40bf">
+<link rel="icon" type="image/png" href="{% static "favicon/favicon-96x96.png" %}" sizes="96x96">
+<link rel="icon" type="image/svg+xml" href="{% static "favicon/favicon.svg" %}">
+<link rel="shortcut icon" href="{% static "favicon/favicon.ico" %}">
+<link rel="apple-touch-icon" sizes="180x180" href="{% static "favicon/apple-touch-icon.png" %}">
+<meta name="apple-mobile-web-app-title" content="Musik">
+<link rel="manifest" href="{% static "favicon/site.webmanifest" %}">

base/templates/footer.html

@@ -1 +1 @@
-Musik {{ VERSION }} – © <a href="https://code.edgarpierre.fr/edpibu/musik">Edgar P. Burkhart</a> – <a href="{% url "legal" %}">Mentions légales</a>
+Musik {{ VERSION }} – © <a href="https://code.edgarpierre.fr/edpibu/musik">Edgar P. Burkhart</a> – <a href="{% url "legal" %}">Mentions légales et confidentialité</a>

base/templates/hero.html

@@ -1,11 +1,25 @@
 {% load static %}
 <div id="hero">
     <main>
-        <i class="ri-music-ai-fill big-logo"></i>
-        <h1>Musik</h1>
-        <p>
-            <a href="{% url "home" %}" role="button"><i class="ri-play-fill"></i> Jouer</a>
-        </p>
+        <div class="full-page">
+            <div>
+                <i class="ri-music-ai-fill big-logo"></i>
+                <h1>Musik</h1>
+                <p>
+                    <a href="{% url "home" %}" role="button"><i class="ri-play-fill"></i> Jouer</a>
+                </p>
+            </div>
+        </div>
+        <div class="full-page r">
+            <section>
+                <h2>
+                    <span class="brand-name"><i class="ri-music-ai-fill"></i> Musik</span> Le jeu où ta playlist devient ton arme secrète !
+                </h2>
+                <p>
+                    Invite ta bande, ajoute tes sons fétiches, et c’est parti ! Une playlist Youtube apparaît, mélangeant les coups de cœur de tout le monde. Le jeu ? Écoute, devine qui a choisi quoi, et découvre les secrets musicaux de tes potes. Entre pièges, révélations et fous rires, Musik c’est le jeu parfait pour tester vos oreilles… et vos amitiés. Prêt à jouer le DJ incognito ?
+                </p>
+            </section>
+        </div>
     </main>
     <footer>
         {% include "footer.html" %}

base/templates/privacy.html

@@ -16,6 +16,7 @@
         Youtube est une marque de Google LLC.
     </p>
     <p>
-        La suppression des données stockée par le service Musik pour son utilisation peut être demandée par email à  <a href="mailto:contact@edgarpierre.fr">Edgar P. Burkhart</a>.
+        Les données saisies dans Musik (groupes créés, listes de musiques) sont conservées jusqu'à demande de suppression. La suppression du compte entraîne la suppression de l'ensemble des données qui y sont liées.
+        La suppression du compte peut être demandée dans les paramètres du compte. La suppression des données est immédiate et définitive.
     </p>
 {% endblock content %}

musik/settings.py

@@ -13,7 +13,7 @@ https://docs.djangoproject.com/en/5.2/ref/settings/
 import os
 from pathlib import Path
 
-VERSION = "0.4.2"
+VERSION = "0.4.4"
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "musik"
-version = "0.4.2"
+version = "0.4.4"
 description = "Le jeu de Musik."
 readme = "README.md"
 requires-python = ">=3.12"

uv.lock

@@ -423,7 +423,7 @@ wheels = [
 
 [[package]]
 name = "musik"
-version = "0.4.2"
+version = "0.4.4"
 source = { virtual = "." }
 dependencies = [
     { name = "celery" },