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

design
serr 2025-05-17 21:31:56 +03:00
parent 9643b76d92
commit 8619472986
4 changed files with 53 additions and 19 deletions

View File

@ -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;

View File

@ -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)
})

View File

@ -1,7 +1,7 @@
{{ define "footer" }}
<footer>
<div>
<img src="/assets/pic/UkkUKhV.gif?v={{ .version }}" width="100%" height="100%">
<div class="rotating-pic-container">
<img src="/assets/pic/UkkUKhV.gif?v={{ .version }}" class="rotating-pic">
</div>
<div>
<p>
@ -10,9 +10,19 @@
<p>
> 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/>
> <code>curl -X COUNT https://hikan.ru</code> - 24-hour server request count<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>

View File

@ -1,18 +1,11 @@
{{ define "header" }}
<header>
<div style="position: relative; width: 100%; height: 100%;">
<img src="/assets/pic/miffy.png?v={{ .version }}"
<div class="rotating-pic-container">
<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">
<p class="lastfm-text">
<div class="pulse-container">
<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 }}