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,36 +6,11 @@ const hintPanelDefaultText = hint.innerHTML;
 let fixedHint;
 let currentObserver;
 
-elements.forEach(el => {
+if (!isMobile) {
-  el.addEventListener('mouseenter', function() {
+  elements.forEach(el => {
-    cleanup();
+    registerElementHint(el);
-    
+  })  
-    if (currentObserver) {
+}
-      currentObserver.disconnect();
-    }
-    
-    currentObserver = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (!entry.isIntersecting) {
-          fixedHint = document.createElement('p');
-          fixedHint.id = "fixedHint";
-          fixedHint.innerHTML = el.dataset.tip;
-          fixedHint.setAttribute('aria-hidden', 'true');
-          body.appendChild(fixedHint);
-        } else {
-          hint.innerHTML = el.dataset.tip;
-        }
-      })
-    });
-    
-    hint.innerHTML = el.dataset.tip;
-    currentObserver.observe(hint);
-  });
-  
-  el.addEventListener('mouseleave', function() {
-    cleanup();
-  });
-})
 
 function cleanup() {
   hint.innerHTML = hintPanelDefaultText;
@@ -52,3 +23,34 @@ function cleanup() {
     currentObserver = null;
   }
 }
+
+export function registerElementHint(el) {
+  el.addEventListener('mouseenter', function() {
+      cleanup();
+      
+      if (currentObserver) {
+        currentObserver.disconnect();
+      }
+      
+      currentObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (!entry.isIntersecting) {
+            fixedHint = document.createElement('p');
+            fixedHint.id = "fixedHint";
+            fixedHint.innerHTML = el.dataset.tip;
+            fixedHint.setAttribute('aria-hidden', 'true');
+            body.appendChild(fixedHint);
+          } else {
+            hint.innerHTML = el.dataset.tip;
+          }
+        })
+      });
+      
+      hint.innerHTML = el.dataset.tip;
+      currentObserver.observe(hint);
+    });
+    
+    el.addEventListener('mouseleave', function() {
+      cleanup();
+    });
+}