mirror of
https://github.com/riwiwa/muzi.git
synced 2026-02-28 11:56:57 -08:00
add settings page, better navigation
This commit is contained in:
183
static/style.css
183
static/style.css
@@ -1,17 +1,135 @@
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #222;
|
||||
color: #AFA;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: 70vw;
|
||||
margin: 0 auto;
|
||||
width: 70vw;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #222;
|
||||
color: #AFA;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: 70vw;
|
||||
margin: 0 auto;
|
||||
width: 70vw;
|
||||
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 {
|
||||
display: flex;
|
||||
@@ -146,6 +264,43 @@
|
||||
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 {
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
|
||||
@@ -1,52 +1,40 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/files/style.css" type="text/css">
|
||||
<title>
|
||||
muzi | {{.Username}}'s Profile
|
||||
</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>
|
||||
{{define "profile"}}
|
||||
<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-actions">
|
||||
<a href="/import" class="btn">Import Data</a>
|
||||
<div class="profile-top-blank">
|
||||
</div>
|
||||
<div class="history">
|
||||
<h3>Listening History</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Title</th>
|
||||
<th>Timestamp</th>
|
||||
</tr>
|
||||
{{$artists := .Artists}}
|
||||
{{$times := .Times}}
|
||||
{{range $index, $title := .Titles}}
|
||||
<tr>
|
||||
<td>{{index $artists $index}}</td>
|
||||
<td>{{$title}}</td>
|
||||
<td>{{index $times $index}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</table>
|
||||
</div>
|
||||
<div class="page_buttons">
|
||||
{{if gt .Page 1 }}
|
||||
<a href="/profile/{{.Username}}?page={{sub .Page 1}}">Prev Page</a>
|
||||
<div class="user-stats-top">
|
||||
<h3>{{formatInt .ScrobbleCount}}</h3> <p>Listens<p>
|
||||
<h3>{{formatInt .ArtistCount}}</h3> <p>Artists<p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history">
|
||||
<h3>Listening History</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Title</th>
|
||||
<th>Timestamp</th>
|
||||
</tr>
|
||||
{{$artists := .Artists}}
|
||||
{{$times := .Times}}
|
||||
{{range $index, $title := .Titles}}
|
||||
<tr>
|
||||
<td>{{index $artists $index}}</td>
|
||||
<td>{{$title}}</td>
|
||||
<td>{{formatTimestamp (index $times $index)}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
<a href="/profile/{{.Username}}?page={{add .Page 1}}">Next Page</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</table>
|
||||
</div>
|
||||
<div class="page_buttons">
|
||||
{{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}}
|
||||
|
||||
@@ -25,6 +25,9 @@ type ProfileData struct {
|
||||
Titles []string
|
||||
Times []string
|
||||
Page int
|
||||
Title string
|
||||
LoggedInUsername string
|
||||
TemplateName string
|
||||
}
|
||||
|
||||
// Render a page of the profile in the URL
|
||||
@@ -57,6 +60,9 @@ func profilePageHandler() http.HandlerFunc {
|
||||
var profileData ProfileData
|
||||
profileData.Username = username
|
||||
profileData.Page = pageInt
|
||||
profileData.Title = username + "'s Profile"
|
||||
profileData.LoggedInUsername = getLoggedInUsername(r)
|
||||
profileData.TemplateName = "profile"
|
||||
|
||||
err = db.Pool.QueryRow(
|
||||
r.Context(),
|
||||
@@ -100,7 +106,7 @@ func profilePageHandler() http.HandlerFunc {
|
||||
profileData.Times = append(profileData.Times, time.Time.String())
|
||||
}
|
||||
|
||||
err = templates.ExecuteTemplate(w, "profile.gohtml", profileData)
|
||||
err = templates.ExecuteTemplate(w, "base", profileData)
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
}
|
||||
|
||||
@@ -80,6 +80,7 @@ func Start() {
|
||||
r.Post("/import/spotify", importSpotifyHandler)
|
||||
r.Get("/import/lastfm/progress", importLastFMProgressHandler)
|
||||
r.Get("/import/spotify/progress", importSpotifyProgressHandler)
|
||||
r.Get("/settings", settingsPageHandler())
|
||||
fmt.Printf("WebUI starting on %s\n", addr)
|
||||
prot := http.NewCrossOriginProtection()
|
||||
http.ListenAndServe(addr, prot.Handler(r))
|
||||
|
||||
Reference in New Issue
Block a user