Merge pull request #8 from Koha9/codex/add-notification-popup-with-bootstrap

Add bootstrap toast for messages

app/main.py

@@ -85,7 +85,7 @@ async def login(
             {
                 "request": request,
                 "message": "连接成功",
-                "success": True,
+                "message_type": "success",
                 "theme": server_config.theme,
                 "path": "/login",
                 "token": token,
@@ -100,7 +100,7 @@ async def login(
             {
                 "request": request,
                 "message": f"连接失败：{str(e)}",
-                "success": False,
+                "message_type": "danger",
                 "theme": server_config.theme,
                 "path": "/login",
                 "scheme": scheme,
@@ -128,6 +128,7 @@ async def set_playlist(
         {
             "request": request,
             "message": f"设置成功：地址 {address}，间隔 {interval} 分钟",
+            "message_type": "info",
             "theme": server_config.theme,
             "path": "/playlist",
         },

app/static/styles.css

@@ -1,3 +1,20 @@
 .custom-sidebar {
     max-width: 300px !important; /* 设置最大宽度为 300px */
-}
+}
+
+/* Toast with frosted glass effect */
+.glass-toast {
+    backdrop-filter: blur(5px);
+}
+
+.glass-toast-success {
+    background-color: rgba(var(--bs-success-rgb), 0.75) !important;
+}
+
+.glass-toast-danger {
+    background-color: rgba(var(--bs-danger-rgb), 0.75) !important;
+}
+
+.glass-toast-info {
+    background-color: rgba(var(--bs-info-rgb), 0.75) !important;
+}

app/templates/base.html

@@ -87,6 +87,18 @@
             <main class="col ms-sm-auto px-md-4 py-4">
                 {% block content %}{% endblock %}
             </main>
+            {% if message %}
+            <div class="position-fixed top-0 start-50 translate-middle-x p-3 w-75" style="z-index: 1055; margin-top: 20px;">
+                <div id="messageToast" class="toast text-bg-{{ message_type | default('info') }} border-0 glass-toast glass-toast-{{ message_type | default('info') }} w-100" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="d-flex">
+                        <div class="toast-body">
+                            {{ message }}
+                        </div>
+                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                </div>
+            </div>
+            {% endif %}
         </div>
     </div>
 
@@ -106,6 +118,14 @@
             // listen for system theme changes
             window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyAutoTheme);
         }
+        // show toast message
+        document.addEventListener('DOMContentLoaded', () => {
+            const toastEl = document.getElementById('messageToast');
+            if (toastEl) {
+                const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
+                toast.show();
+            }
+        });
     </script>
 </body>
 

app/templates/login.html

@@ -35,9 +35,6 @@
     <button type="submit" class="btn btn-primary">连接</button>
 </form>
 
-{% if message %}
-<div class="alert alert-{{ 'success' if success else 'danger' }} mt-4">{{ message }}</div>
-{% endif %}
 <script>
     document.addEventListener('DOMContentLoaded', () => {
         const tokenInput = document.getElementById('token');

app/templates/playlist.html

@@ -20,7 +20,4 @@
     <button type="submit" class="btn btn-success">保存设置</button>
 </form>
 
-{% if message %}
-<div class="alert alert-info mt-4">{{ message }}</div>
-{% endif %}
 {% endblock %}