добавил вращение изображений, пофиксил index out of range в получении треков с lastfm, добавил открывающийся по нажатию блок с дополнительной системной информацией

assets/css/styles.css

@@ -75,11 +75,36 @@ pre {
     min-width: calc(100% - 20px);
 }
 
-.lastfm-container {
+details > summary {
+    cursor: zoom-in;
+}
+
+details[open] > summary {
+    cursor: zoom-out;
+}
+
+.rotating-pic-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.rotating-pic {
+    width: 100%;
+    height: 100%;
+    animation: swing 1.5s ease-in-out infinite alternate;
+}
+
+@keyframes swing {
+    0% { transform: rotate(-10deg); }
+    100% { transform: rotate(10deg); }
+}
+
+.pulse-container {
     text-align: center;
 }
 
-.lastfm-text {
+.pulse-text {
     font-weight: bold;
     color: purple;
     animation: scalePulse 2s infinite ease-in-out;

mvc/controllers/lastfm.go

@@ -17,7 +17,13 @@ func LastfmHandler(app *models.App) http.HandlerFunc {
 			log.Println(err)
 		}
 
-		data := fmt.Sprintf("%s - %s", resp.RecentTracks.Track[0].Name, resp.RecentTracks.Track[0].Artist.Name)
+		var data string
+		if len(resp.RecentTracks.Track) > 0 {
+			track := resp.RecentTracks.Track[0]
+			data = fmt.Sprintf("%s - %s", track.Name, track.Artist.Name)
+		} else {
+			data = "lastfm strange error..."
+		}
 
 		sendLastfm(w, data)
 	})

mvc/views/blocks/footer.gohtml

@@ -1,7 +1,7 @@
 {{ define "footer" }}
 <footer>
-    <div>
+    <div class="rotating-pic-container">
-        <img src="/assets/pic/UkkUKhV.gif?v={{ .version }}" width="100%" height="100%">
+        <img src="/assets/pic/UkkUKhV.gif?v={{ .version }}" class="rotating-pic">
     </div>
     <div>
         <p>
@@ -11,8 +11,18 @@
             > unix timestamp of page rendering: <code>{{ .renderingTimestamp }}</code><br/>
             > <code>curl -X LIMINAL https://hikan.ru</code> - what do you know about liminal spaces<br/>
             > <code>curl -X COUNT https://hikan.ru</code> - 24-hour server request count<br/>    
-            > this site code repository - <a href="https://git.hikan.ru/serr/hikan.ru" target="_blank">git.hikan.ru/serr/hikan.ru</a><br/>      
         </p>
+        <p>
+            <details>
+                <summary class="pulse-text">click here if you want more system details</summary>
+                <p>
+                    > to check the latest changes to the site you can use it (someday i hope to add a cool log page):
+                    <pre>curl -s "https://git.hikan.ru/api/v1/repos/serr/hikan.ru/commits?limit=10" | jq -r '.[] | .commit.author.date + " | " + (.commit.message | rtrimstr("\n"))'</pre> 
+                    or look in the repository <a href="https://git.hikan.ru/serr/hikan.ru" target="_blank">git.hikan.ru/serr/hikan.ru</a>
+                </p>
+            </details>
+        </p>
+    
     </div>
     <div>
         <p>

mvc/views/blocks/header.gohtml

@@ -1,18 +1,11 @@
 {{ define "header" }}
 <header>
-    <div style="position: relative; width: 100%; height: 100%;">
+    <div class="rotating-pic-container">
-        <img src="/assets/pic/miffy.png?v={{ .version }}" 
+        <img class="rotating-pic" src="/assets/pic/miffy.png?v={{ .version }}" 
             style="width: 100%; height: 100%;">
-        
-        <img src="/assets/pic/sparkling.gif?v={{ .version }}" 
-            style="position: absolute; 
-                    top: 0; 
-                    right: 0; 
-                    width: 50%; 
-                    height: 50%;">
     </div>
-    <div class="lastfm-container">
+    <div class="pulse-container">
-        <p class="lastfm-text">
+        <p class="pulse-text">
             <code>🎵&nbsp;last played track: </code><code id="lastfm">waiting for a response from lastfm...</code><code>&nbsp;🎵</code>
         </p>
     </div>
@@ -50,7 +43,7 @@
 
         updateLastfm();
         
-        setInterval(updateLastfm, 10000);
+        setInterval(updateLastfm, 20000);
     </script>
 </header>
 {{ end }}