music-assistant-server
3.9 KB•HTML
error.html
3.9 KB • 150 lines • xml
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Music Assistant - Error</title>
7 <link rel="stylesheet" href="resources/common.css">
8 <style>
9 body {
10 min-height: 100vh;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 padding: 20px;
15 }
16
17 .error-container {
18 background: var(--panel);
19 border-radius: 16px;
20 box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12),
21 0 0 0 1px var(--border);
22 padding: 48px 40px;
23 width: 100%;
24 max-width: 520px;
25 text-align: center;
26 }
27
28 .logo {
29 text-align: center;
30 margin-bottom: 36px;
31 }
32
33 .logo-icon {
34 width: 72px;
35 height: 72px;
36 margin: 0 auto 16px;
37 }
38
39 .logo-icon img {
40 width: 100%;
41 height: 100%;
42 object-fit: contain;
43 }
44
45 .logo h1 {
46 color: var(--fg);
47 font-size: 24px;
48 font-weight: 600;
49 letter-spacing: -0.5px;
50 margin-bottom: 6px;
51 }
52
53 .error-icon {
54 width: 64px;
55 height: 64px;
56 margin: 0 auto 24px;
57 background: var(--error-bg);
58 border-radius: 50%;
59 display: flex;
60 align-items: center;
61 justify-content: center;
62 }
63
64 .error-icon svg {
65 width: 32px;
66 height: 32px;
67 color: var(--error-text);
68 }
69
70 .error-title {
71 color: var(--fg);
72 font-size: 20px;
73 font-weight: 600;
74 margin-bottom: 12px;
75 }
76
77 .error-message {
78 color: var(--text-secondary);
79 font-size: 15px;
80 line-height: 1.6;
81 margin-bottom: 32px;
82 display: block;
83 background: transparent;
84 border: none;
85 padding: 0;
86 }
87
88 .btn {
89 display: inline-block;
90 padding: 15px 32px;
91 border: none;
92 border-radius: 10px;
93 font-size: 15px;
94 font-weight: 600;
95 cursor: pointer;
96 transition: all 0.2s ease;
97 letter-spacing: 0.3px;
98 text-decoration: none;
99 }
100
101 .btn-primary {
102 background: var(--primary);
103 color: white;
104 }
105
106 .btn-primary:hover {
107 filter: brightness(1.1);
108 box-shadow: 0 8px 24px var(--primary-glow);
109 transform: translateY(-1px);
110 }
111
112 .btn-primary:active {
113 transform: translateY(0);
114 filter: brightness(0.95);
115 }
116
117 .help-text {
118 margin-top: 24px;
119 color: var(--text-tertiary);
120 font-size: 13px;
121 }
122 </style>
123</head>
124<body>
125 <div class="error-container">
126 <div class="logo">
127 <div class="logo-icon">
128 <img src="logo.png" alt="Music Assistant">
129 </div>
130 <h1>Music Assistant</h1>
131 </div>
132
133 <div class="error-icon">
134 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
135 <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
136 </svg>
137 </div>
138
139 <h2 class="error-title" id="errorTitle">Access Denied</h2>
140 <p class="error-message" id="errorMessage">{{ERROR_MESSAGE}}</p>
141
142 <a href="/" class="btn btn-primary">Go to Home</a>
143
144 <p class="help-text">
145 If you believe this is an error, please contact your administrator.
146 </p>
147 </div>
148</body>
149</html>
150