deploy: e31bb2b40e

en/blog/index.html

@@ -54,7 +54,10 @@
                     by: "by",
                     options: "Options",
                     hideBackground: "Hide background",
-                    back: "back"
+                    back: "back",
+                    permissionIssue: "Permission issue",
+                    permissionIssueNotificationContent: "Unable to continue playing background music, please enable audio <b>autoplay</b> for this website.",
+                    notificationDefaultHint: "<b>Click to dismiss</b>",
                 }
         </script>
     </div>

en/index.html

@@ -54,7 +54,10 @@
                     by: "by",
                     options: "Options",
                     hideBackground: "Hide background",
-                    back: "back"
+                    back: "back",
+                    permissionIssue: "Permission issue",
+                    permissionIssueNotificationContent: "Unable to continue playing background music, please enable audio <b>autoplay</b> for this website.",
+                    notificationDefaultHint: "<b>Click to dismiss</b>",
                 }
         </script>
     </div>

en/misc/88x31/index.html

@@ -54,7 +54,10 @@
                     by: "by",
                     options: "Options",
                     hideBackground: "Hide background",
-                    back: "back"
+                    back: "back",
+                    permissionIssue: "Permission issue",
+                    permissionIssueNotificationContent: "Unable to continue playing background music, please enable audio <b>autoplay</b> for this website.",
+                    notificationDefaultHint: "<b>Click to dismiss</b>",
                 }
         </script>
     </div>

en/misc/bookmarks/index.html

@@ -54,7 +54,10 @@
                     by: "by",
                     options: "Options",
                     hideBackground: "Hide background",
-                    back: "back"
+                    back: "back",
+                    permissionIssue: "Permission issue",
+                    permissionIssueNotificationContent: "Unable to continue playing background music, please enable audio <b>autoplay</b> for this website.",
+                    notificationDefaultHint: "<b>Click to dismiss</b>",
                 }
         </script>
     </div>

en/misc/index.html

@@ -54,7 +54,10 @@
                     by: "by",
                     options: "Options",
                     hideBackground: "Hide background",
-                    back: "back"
+                    back: "back",
+                    permissionIssue: "Permission issue",
+                    permissionIssueNotificationContent: "Unable to continue playing background music, please enable audio <b>autoplay</b> for this website.",
+                    notificationDefaultHint: "<b>Click to dismiss</b>",
                 }
         </script>
     </div>

global/blog/index.html

@@ -54,7 +54,10 @@
                     by: "",
                     options: "",
                     hideBackground: "",
-                    back: ""
+                    back: "",
+                    permissionIssue: "",
+                    permissionIssueNotificationContent: "",
+                    notificationDefaultHint: "",
                 }
         </script>
     </div>

global/index.html

@@ -54,7 +54,10 @@
                     by: "",
                     options: "",
                     hideBackground: "",
-                    back: ""
+                    back: "",
+                    permissionIssue: "",
+                    permissionIssueNotificationContent: "",
+                    notificationDefaultHint: "",
                 }
         </script>
     </div>

global/misc/index.html

@@ -54,7 +54,10 @@
                     by: "",
                     options: "",
                     hideBackground: "",
-                    back: ""
+                    back: "",
+                    permissionIssue: "",
+                    permissionIssueNotificationContent: "",
+                    notificationDefaultHint: "",
                 }
         </script>
     </div>

index.html

@@ -54,7 +54,10 @@
                     by: "by",
                     options: "Options",
                     hideBackground: "Hide background",
-                    back: "back"
+                    back: "back",
+                    permissionIssue: "Permission issue",
+                    permissionIssueNotificationContent: "Unable to continue playing background music, please enable audio <b>autoplay</b> for this website.",
+                    notificationDefaultHint: "<b>Click to dismiss</b>",
                 }
         </script>
     </div>

posts/android-developer-verification/index.html

@@ -54,7 +54,10 @@
                     by: "by",
                     options: "Options",
                     hideBackground: "Hide background",
-                    back: "back"
+                    back: "back",
+                    permissionIssue: "Permission issue",
+                    permissionIssueNotificationContent: "Unable to continue playing background music, please enable audio <b>autoplay</b> for this website.",
+                    notificationDefaultHint: "<b>Click to dismiss</b>",
                 }
         </script>
     </div>
@@ -76,7 +79,7 @@
     <article>
         <div id="postHeader">
             <h1>On the Recent Changes to App Distribution Requirements in the Android System by Google.</h1>
-            <p>Adrian Victor - 8/29/2025</p>
+            <p>Adrian Victor - <b>8/29/2025</b> (last edited in 4/23/2026)</p>
             
             Also available in other languages:
             

posts/instalando-fl-studio-no-linux/index.html

@@ -54,7 +54,10 @@
                     by: "por",
                     options: "Opções",
                     hideBackground: "Esconder imagem de fundo",
-                    back: "voltar"
+                    back: "voltar",
+                    permissionIssue: "Problema de permissão",
+                    permissionIssueNotificationContent: "Não foi possivel continuar tocando a música de fundo, por favor habilite <b>reprodução automática</b> de áudio para esse website.",
+                    notificationDefaultHint: "<b>Clique para ignorar</b>",
                 }
         </script>
     </div>
@@ -76,7 +79,7 @@
     <article>
         <div id="postHeader">
             <h1>Instalando FL Studio no Linux.</h1>
-            <p>Adrian Victor - 4/19/2026</p>
+            <p>Adrian Victor - <b>4/19/2026</b> (editado por último em 4/23/2026)</p>
             
             Também disponível em outros idiomas:
             

posts/installing-fl-studio-on-linux/index.html

@@ -54,7 +54,10 @@
                     by: "by",
                     options: "Options",
                     hideBackground: "Hide background",
-                    back: "back"
+                    back: "back",
+                    permissionIssue: "Permission issue",
+                    permissionIssueNotificationContent: "Unable to continue playing background music, please enable audio <b>autoplay</b> for this website.",
+                    notificationDefaultHint: "<b>Click to dismiss</b>",
                 }
         </script>
     </div>
@@ -76,7 +79,7 @@
     <article>
         <div id="postHeader">
             <h1>Installing FL Studio on linux.</h1>
-            <p>Adrian Victor - 4/19/2026</p>
+            <p>Adrian Victor - <b>4/19/2026</b> (last edited in 4/23/2026)</p>
             
             Also available in other languages:
             

posts/verificacao-de-desenvolvedor-no-android/index.html

@@ -54,7 +54,10 @@
                     by: "por",
                     options: "Opções",
                     hideBackground: "Esconder imagem de fundo",
-                    back: "voltar"
+                    back: "voltar",
+                    permissionIssue: "Problema de permissão",
+                    permissionIssueNotificationContent: "Não foi possivel continuar tocando a música de fundo, por favor habilite <b>reprodução automática</b> de áudio para esse website.",
+                    notificationDefaultHint: "<b>Clique para ignorar</b>",
                 }
         </script>
     </div>
@@ -76,7 +79,7 @@
     <article>
         <div id="postHeader">
             <h1>Sobre as recentes mudanças nos requisitos de distribuição de apps no sistema Android feitas pela Google.</h1>
-            <p>Adrian Victor - 8/29/2025</p>
+            <p>Adrian Victor - <b>8/29/2025</b> (editado por último em 4/23/2026)</p>
             
             Também disponível em outros idiomas:
             

pt/blog/index.html

@@ -54,7 +54,10 @@
                     by: "por",
                     options: "Opções",
                     hideBackground: "Esconder imagem de fundo",
-                    back: "voltar"
+                    back: "voltar",
+                    permissionIssue: "Problema de permissão",
+                    permissionIssueNotificationContent: "Não foi possivel continuar tocando a música de fundo, por favor habilite <b>reprodução automática</b> de áudio para esse website.",
+                    notificationDefaultHint: "<b>Clique para ignorar</b>",
                 }
         </script>
     </div>

pt/index.html

@@ -54,7 +54,10 @@
                     by: "por",
                     options: "Opções",
                     hideBackground: "Esconder imagem de fundo",
-                    back: "voltar"
+                    back: "voltar",
+                    permissionIssue: "Problema de permissão",
+                    permissionIssueNotificationContent: "Não foi possivel continuar tocando a música de fundo, por favor habilite <b>reprodução automática</b> de áudio para esse website.",
+                    notificationDefaultHint: "<b>Clique para ignorar</b>",
                 }
         </script>
     </div>

pt/misc/88x31/index.html

@@ -54,7 +54,10 @@
                     by: "por",
                     options: "Opções",
                     hideBackground: "Esconder imagem de fundo",
-                    back: "voltar"
+                    back: "voltar",
+                    permissionIssue: "Problema de permissão",
+                    permissionIssueNotificationContent: "Não foi possivel continuar tocando a música de fundo, por favor habilite <b>reprodução automática</b> de áudio para esse website.",
+                    notificationDefaultHint: "<b>Clique para ignorar</b>",
                 }
         </script>
     </div>

pt/misc/bookmarks/index.html

@@ -54,7 +54,10 @@
                     by: "por",
                     options: "Opções",
                     hideBackground: "Esconder imagem de fundo",
-                    back: "voltar"
+                    back: "voltar",
+                    permissionIssue: "Problema de permissão",
+                    permissionIssueNotificationContent: "Não foi possivel continuar tocando a música de fundo, por favor habilite <b>reprodução automática</b> de áudio para esse website.",
+                    notificationDefaultHint: "<b>Clique para ignorar</b>",
                 }
         </script>
     </div>

pt/misc/index.html

@@ -54,7 +54,10 @@
                     by: "por",
                     options: "Opções",
                     hideBackground: "Esconder imagem de fundo",
-                    back: "voltar"
+                    back: "voltar",
+                    permissionIssue: "Problema de permissão",
+                    permissionIssueNotificationContent: "Não foi possivel continuar tocando a música de fundo, por favor habilite <b>reprodução automática</b> de áudio para esse website.",
+                    notificationDefaultHint: "<b>Clique para ignorar</b>",
                 }
         </script>
     </div>

school/api-rodrigoribeiro/index.html

@@ -54,7 +54,10 @@
                     by: "por",
                     options: "Opções",
                     hideBackground: "Esconder imagem de fundo",
-                    back: "voltar"
+                    back: "voltar",
+                    permissionIssue: "Problema de permissão",
+                    permissionIssueNotificationContent: "Não foi possivel continuar tocando a música de fundo, por favor habilite <b>reprodução automática</b> de áudio para esse website.",
+                    notificationDefaultHint: "<b>Clique para ignorar</b>",
                 }
         </script>
     </div>

school/guia-ifc-novatos/index.html

@@ -54,7 +54,10 @@
                     by: "por",
                     options: "Opções",
                     hideBackground: "Esconder imagem de fundo",
-                    back: "voltar"
+                    back: "voltar",
+                    permissionIssue: "Problema de permissão",
+                    permissionIssueNotificationContent: "Não foi possivel continuar tocando a música de fundo, por favor habilite <b>reprodução automática</b> de áudio para esse website.",
+                    notificationDefaultHint: "<b>Clique para ignorar</b>",
                 }
         </script>
     </div>
@@ -76,7 +79,7 @@
     <article>
         <div id="postHeader">
             <h1>Guia para novatos no IFC.</h1>
-            <p>Adrian Victor - 1/12/2026</p>
+            <p>Adrian Victor - <b>1/12/2026</b> (editado por último em )</p>
             
         </div>
         

school/telnet-en/index.html

@@ -54,7 +54,10 @@
                     by: "by",
                     options: "Options",
                     hideBackground: "Hide background",
-                    back: "back"
+                    back: "back",
+                    permissionIssue: "Permission issue",
+                    permissionIssueNotificationContent: "Unable to continue playing background music, please enable audio <b>autoplay</b> for this website.",
+                    notificationDefaultHint: "<b>Click to dismiss</b>",
                 }
         </script>
     </div>
@@ -76,7 +79,7 @@
     <article>
         <div id="postHeader">
             <h1>Telnet</h1>
-            <p>Adrian Victor &amp; Arthur Borges - 8/26/2025</p>
+            <p>Adrian Victor &amp; Arthur Borges - <b>8/26/2025</b> (last edited in )</p>
             
         </div>
         

school/telnet-pt/index.html

@@ -54,7 +54,10 @@
                     by: "por",
                     options: "Opções",
                     hideBackground: "Esconder imagem de fundo",
-                    back: "voltar"
+                    back: "voltar",
+                    permissionIssue: "Problema de permissão",
+                    permissionIssueNotificationContent: "Não foi possivel continuar tocando a música de fundo, por favor habilite <b>reprodução automática</b> de áudio para esse website.",
+                    notificationDefaultHint: "<b>Clique para ignorar</b>",
                 }
         </script>
     </div>
@@ -76,7 +79,7 @@
     <article>
         <div id="postHeader">
             <h1>Telnet</h1>
-            <p>Adrian Victor &amp; Arthur Borges - 8/26/2025</p>
+            <p>Adrian Victor &amp; Arthur Borges - <b>8/26/2025</b> (editado por último em )</p>
             
         </div>
         

static/main.css

@@ -184,8 +184,7 @@ aside.metromenu {
     width: 30vw;
     background-color: black;
     height: 100vh;
-    transition: 0.2s;
+    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
-    transition-timing-function: cubic-bezier(0.1, 0.2, 0.3, 0.955);
     padding: 2em;
 }
 
@@ -213,6 +212,28 @@ aside.metromenu #content {
 
 /* Global classes and IDs */
 
+.notificationBox {
+    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
+    width: fit-content;
+    position: fixed;
+    bottom: 2em;
+    left: 0;
+    background-color: black;
+    transform: translateX(-100%);
+    padding: 1em;
+    outline: thin solid var(--theme-color);
+    margin-right: 8em;
+    max-width: 40em;
+}
+
+.notificationBox.shown {
+    transform: none;
+}
+
+.notificationBox h1 {
+    font-size: x-large;
+}
+
 li.inlineList {
     display: inline;
 }

static/scripts/music.js

@@ -1,4 +1,5 @@
 // This script handles the playback of music in the header's miniplayer ;)
+import { showNotification } from './notification.js';
 const body = document.querySelector("body");
 
 const musicdiv = document.getElementById("music");
@@ -42,7 +43,7 @@ optionsAside.classList.add("metromenu");
     <div id="playlist"></div>
     <div>
         <p>Volume</p>
-        <input id="volume" oninput="setVolume(this.value / 100)" type="range" min="0" max="100"></input>
+        <input id="volume" type="range" min="0" max="100"></input>
     </div>
         <div class="checkbox">
             <p>${headeri18n.hideBackground}</p>
@@ -54,6 +55,9 @@ optionsAside.classList.add("metromenu");
 }
 body.appendChild(optionsAside);
 
+document.getElementById("volume").addEventListener("input", (e) => {
+    setVolume(e.target.value / 100);
+}); // dirty workaround to replace inline function calling in the volume input
 
 const toggleIMG = document.querySelector('#sound');
 toggleIMG.addEventListener('click', () => {
@@ -146,11 +150,21 @@ let audio = new Audio(`/static/music/${audioSelect.value}`);
 
 const savedTime = localStorage.getItem("audioTime");
 const savedVolume = localStorage.getItem("volume");
+
+if (savedVolume !== null) {
+    audio.volume = parseFloat(savedVolume);
+} else {
+    audio.volume = 0.8;
+}
+
 const wasPlaying = localStorage.getItem("audioPlaying") === 'true';
 
 function play() {
-    audio.volume = localStorage.getItem("volume");
+    audio.volume = localStorage.getItem("volume") ?? 0.8;
-    audio.play();
+    audio.play().catch(() => {
+            stop();
+            showNotification(headeri18n.permissionIssue, headeri18n.permissionIssueNotificationContent, 5000);
+        });;
     localStorage.setItem("audioPlaying", "true")
     toggleIMG.src = "/static/images/sound-on.png"
     console.log(`[Music Player] playing ${audioSelect.value}`)

static/scripts/notification.js

@@ -0,0 +1,45 @@
+import { registerElementHint } from "./tips.js";
+
+const notificationBox = document.createElement('div');
+notificationBox.classList.add('notificationBox');
+
+export async function showNotification(title, subtitle, time, hint) {
+    if (!hint) {
+        hint = headeri18n.notificationDefaultHint;
+    }
+    const notificationBox = document.createElement('div');
+    notificationBox.classList.add('notificationBox');
+    notificationBox.dataset.tip = hint;
+    
+    const notificationTitle = document.createElement('h1');
+    notificationTitle.innerHTML = title;
+    
+    const notificationSubtitle = document.createElement('p');
+    notificationSubtitle.innerHTML = subtitle;
+    
+    notificationBox.appendChild(notificationTitle);
+    notificationBox.appendChild(notificationSubtitle);
+    document.querySelector('body').appendChild(notificationBox);
+    
+    registerElementHint(notificationBox);
+
+    let clicked = false;
+
+    notificationBox.addEventListener('click', () => {
+        hideNotification(notificationBox);
+    })
+    
+    requestAnimationFrame(() => {
+        notificationBox.classList.add('shown');
+    });
+    await new Promise(r => setTimeout(r, time));
+    if (!clicked) {
+        hideNotification(notificationBox);
+    }
+}
+
+async function hideNotification(notificationBox) {
+    notificationBox.classList.remove('shown');
+    await new Promise(r => setTimeout(r, 1000));
+    notificationBox.remove();
+}

static/scripts/tips.js

@@ -1,8 +1,4 @@
 const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-if (isMobile) {
-  return;
-}
-
 const body = document.querySelector('body');
 const elements = document.querySelectorAll('[data-tip]');
 const hint = document.querySelector("#headerSubtitle");
@@ -10,7 +6,25 @@ const hintPanelDefaultText = hint.innerHTML;
 let fixedHint;
 let currentObserver;
 
+if (!isMobile) {
   elements.forEach(el => {
+    registerElementHint(el);
+  })  
+}
+
+function cleanup() {
+  hint.innerHTML = hintPanelDefaultText;
+  hint.classList.remove('fixed');
+  if (fixedHint) {
+    fixedHint.remove();
+  }
+  if (currentObserver) {
+    currentObserver.disconnect();
+    currentObserver = null;
+  }
+}
+
+export function registerElementHint(el) {
   el.addEventListener('mouseenter', function() {
       cleanup();
       
@@ -39,16 +53,4 @@ elements.forEach(el => {
     el.addEventListener('mouseleave', function() {
       cleanup();
     });
-})
-
-function cleanup() {
-  hint.innerHTML = hintPanelDefaultText;
-  hint.classList.remove('fixed');
-  if (fixedHint) {
-    fixedHint.remove();
-  }
-  if (currentObserver) {
-    currentObserver.disconnect();
-    currentObserver = null;
-  }
 }