modified: templates/playlists.html

This commit is contained in:
SimolZimol
2025-06-04 17:45:13 +02:00
parent 63fd03fc8f
commit fbd0552985

View File

@@ -112,16 +112,55 @@
margin-top: 18px; margin-top: 18px;
word-break: break-all; word-break: break-all;
} }
.top-bar {
width: 100%;
padding: 10px 0;
background: rgba(25, 20, 20, 0.85);
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.top-bar-section {
display: flex;
align-items: center;
}
.top-bar-section.left {
margin-left: 30px;
}
.top-bar-section.center {
flex-grow: 1;
justify-content: center;
}
.top-bar-section.right {
margin-right: 30px;
}
</style> </style>
</head> </head>
<body> <body>
<a href="{{ url_for('logout') }}" class="logout-btn" style="position:absolute;top:20px;right:30px;"> <div class="top-bar">
{{ translations['logout'] if translations['logout'] else 'Logout' }} <div class="top-bar-section left">
</a> <button class="btn" onclick="openInvitePopup()">
<button class="btn" onclick="openInvitePopup()" style="position:absolute;top:20px;left:30px;"> {{ translations['invite_guest'] if translations['invite_guest'] else 'Invite Guest' }}
{{ translations['invite_guest'] if translations['invite_guest'] else 'Invite Guest' }} </button>
</button> </div>
<div class="playlist-container"> <div class="top-bar-section center">
{% if user %}
<img src="{{ user.images[0].url if user.images and user.images[0] }}" style="width:32px;border-radius:50%;vertical-align:middle;margin-right:8px;">
<span>{{ user.display_name }}</span>
{% endif %}
</div>
<div class="top-bar-section right">
<a href="{{ url_for('logout') }}" class="btn btn-danger">
{{ translations['logout'] if translations['logout'] else 'Logout' }}
</a>
</div>
</div>
<div class="playlist-container" style="margin-top:80px;">
<h2>{{ translations['choose_playlist'] }}</h2> <h2>{{ translations['choose_playlist'] }}</h2>
<ul> <ul>
{% for pl in playlists %} {% for pl in playlists %}
@@ -143,13 +182,6 @@
</div> </div>
</div> </div>
{% if user %}
<div style="text-align:right;">
<img src="{{ user.images[0].url if user.images and user.images[0] }}" style="width:32px;border-radius:50%;vertical-align:middle;">
<span>{{ user.display_name }}</span>
</div>
{% endif %}
<script> <script>
function openInvitePopup() { function openInvitePopup() {
document.getElementById('invitePopup').style.display = 'flex'; document.getElementById('invitePopup').style.display = 'flex';