riwiwa/muzi
1
0
Fork 0
mirror of https://github.com/riwiwa/muzi.git synced 2026-02-28 11:56:57 -08:00
Code Issues Packages Projects Releases Wiki Activity

add settings page, better navigation

Browse Source
This commit is contained in:
riwiwa
2026-02-13 23:10:08 -08:00
parent 5c5b295961
commit b3c2446add
4 changed files with 214 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
static/style.css
View File

@@ -1,17 +1,135 @@
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #222; background-color: #222;
color: #AFA; color: #AFA;
align-content: center; align-content: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
max-width: 70vw; max-width: 70vw;
margin: 0 auto; margin: 0 auto;
width: 70vw; width: 70vw;
font-family: sans-serif; font-family: sans-serif;
} padding-top: 80px;
}
/* Hamburger Menu Button - left side */
.menu-button {
position: fixed;
top: 20px;
left: 20px;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 1000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
.menu-button span {
display: block;
width: 28px;
height: 3px;
background-color: #AFA;
border-radius: 2px;
transition: all 0.3s ease;
}
.menu-button.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 6px);
}
.menu-button.active span:nth-child(2) {
opacity: 0;
}
.menu-button.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -6px);
}
/* Slide-out Menu */
.side-menu {
position: fixed;
top: 0;
left: -280px;
width: 280px;
height: 100vh;
background-color: #1a1a1a;
z-index: 999;
transition: left 0.3s ease;
display: flex;
flex-direction: column;
padding-top: 60px;
}
.side-menu.active {
left: 0;
}
.menu-header {
padding: 20px;
border-bottom: 1px solid #333;
}
.menu-header h3 {
margin: 0;
color: #AFA;
font-size: 24px;
}
.menu-nav {
display: flex;
flex-direction: column;
padding: 10px 0;
}
.menu-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
color: #EEE;
text-decoration: none;
transition: background-color 0.2s;
}
.menu-item:hover {
background-color: #333;
}
.menu-item .menu-icon {
color: #FFF;
}
.menu-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
filter: invert(1) brightness(1.5);
}
/* Menu Overlay */
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu-overlay.active {
opacity: 1;
visibility: visible;
}
.page_buttons { .page_buttons {
display: flex; display: flex;
@@ -146,6 +264,43 @@
background: #444; background: #444;
} }
/* Settings Tab Navigation */
.settings-tabs {
display: flex;
flex-direction: row;
border-bottom: 1px solid #333;
margin-bottom: 20px;
}
.tab-button {
padding: 12px 24px;
background: none;
border: none;
color: #888;
font-size: 16px;
cursor: pointer;
position: relative;
transition: color 0.2s;
}
.tab-button:hover {
color: #AFA;
}
.tab-button.active {
color: #AFA;
}
.tab-button.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background-color: #AFA;
}
.progress-container { .progress-container {
margin-top: 15px; margin-top: 15px;
padding: 15px; padding: 15px;

86
templates/profile.gohtml
View File

@@ -1,52 +1,40 @@
<!doctype html> {{define "profile"}}
<html> <div class="profile-top">
<head> <img src="{{.Pfp}}" alt="{{.Username}}'s avatar">
<link rel="stylesheet" href="/files/style.css" type="text/css"> <div class="username-bio">
<title> <h1>{{.Username}}</h1>
muzi | {{.Username}}'s Profile <h2>{{.Bio}}</h2>
</title>
</head>
<body>
<div class="profile-top">
<img src="{{.Pfp}}" alt="{{.Username}}'s avatar">
<div class="username-bio">
<h1>{{.Username}}</h1>
<h2>{{.Bio}}</h2>
</div>
<div class="profile-top-blank">
</div>
<div class="user-stats-top">
<h3>{{formatInt .ScrobbleCount}}</h3> <p>Listens<p>
<h3>{{formatInt .ArtistCount}}</h3> <p>Artists<p>
</div>
</div> </div>
<div class="profile-actions"> <div class="profile-top-blank">
<a href="/import" class="btn">Import Data</a>
</div> </div>
<div class="history"> <div class="user-stats-top">
<h3>Listening History</h3> <h3>{{formatInt .ScrobbleCount}}</h3> <p>Listens<p>
<table> <h3>{{formatInt .ArtistCount}}</h3> <p>Artists<p>
<tr> </div>
<th>Artist</th> </div>
<th>Title</th> <div class="history">
<th>Timestamp</th> <h3>Listening History</h3>
</tr> <table>
{{$artists := .Artists}} <tr>
{{$times := .Times}} <th>Artist</th>
{{range $index, $title := .Titles}} <th>Title</th>
<tr> <th>Timestamp</th>
<td>{{index $artists $index}}</td> </tr>
<td>{{$title}}</td> {{$artists := .Artists}}
<td>{{index $times $index}}</td> {{$times := .Times}}
</tr> {{range $index, $title := .Titles}}
{{end}} <tr>
</table> <td>{{index $artists $index}}</td>
</div> <td>{{$title}}</td>
<div class="page_buttons"> <td>{{formatTimestamp (index $times $index)}}</td>
{{if gt .Page 1 }} </tr>
<a href="/profile/{{.Username}}?page={{sub .Page 1}}">Prev Page</a>
{{end}} {{end}}
<a href="/profile/{{.Username}}?page={{add .Page 1}}">Next Page</a> </table>
</div> </div>
</body> <div class="page_buttons">
</html> {{if gt .Page 1 }}
<a href="/profile/{{.Username}}?page={{sub .Page 1}}">Prev Page</a>
{{end}}
<a href="/profile/{{.Username}}?page={{add .Page 1}}">Next Page</a>
</div>
{{end}}

8
web/profile.go
View File

@@ -25,6 +25,9 @@ type ProfileData struct {
Titles []string Titles []string
Times []string Times []string
Page int Page int
Title string
LoggedInUsername string
TemplateName string
} }
// Render a page of the profile in the URL // Render a page of the profile in the URL
@@ -57,6 +60,9 @@ func profilePageHandler() http.HandlerFunc {
var profileData ProfileData var profileData ProfileData
profileData.Username = username profileData.Username = username
profileData.Page = pageInt profileData.Page = pageInt
profileData.Title = username + "'s Profile"
profileData.LoggedInUsername = getLoggedInUsername(r)
profileData.TemplateName = "profile"
err = db.Pool.QueryRow( err = db.Pool.QueryRow(
r.Context(), r.Context(),
@@ -100,7 +106,7 @@ func profilePageHandler() http.HandlerFunc {
profileData.Times = append(profileData.Times, time.Time.String()) profileData.Times = append(profileData.Times, time.Time.String())
} }
err = templates.ExecuteTemplate(w, "profile.gohtml", profileData) err = templates.ExecuteTemplate(w, "base", profileData)
if err != nil { if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError) http.Error(w, err.Error(), http.StatusInternalServerError)
} }

1
web/web.go
View File

@@ -80,6 +80,7 @@ func Start() {
r.Post("/import/spotify", importSpotifyHandler) r.Post("/import/spotify", importSpotifyHandler)
r.Get("/import/lastfm/progress", importLastFMProgressHandler) r.Get("/import/lastfm/progress", importLastFMProgressHandler)
r.Get("/import/spotify/progress", importSpotifyProgressHandler) r.Get("/import/spotify/progress", importSpotifyProgressHandler)
r.Get("/settings", settingsPageHandler())
fmt.Printf("WebUI starting on %s\n", addr) fmt.Printf("WebUI starting on %s\n", addr)
prot := http.NewCrossOriginProtection() prot := http.NewCrossOriginProtection()
http.ListenAndServe(addr, prot.Handler(r)) http.ListenAndServe(addr, prot.Handler(r))