mistpe commited on
Commit
3725528
·
verified ·
1 Parent(s): 2c9aab3

Update app/templates/base.html

Browse files
Files changed (1) hide show
  1. app/templates/base.html +400 -399
app/templates/base.html CHANGED
@@ -1,400 +1,401 @@
1
- <!DOCTYPE html>
2
- <html lang="zh">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>{% block title %}个人博客{% endblock %}</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
8
- <style>
9
- :root {
10
- --primary-blue: #6391C5;
11
- --light-blue: #B3CFEF;
12
- --warm-cream: #FEEEDA;
13
- --soft-purple: #C5CDFD;
14
- --text-dark: #2C3E50;
15
- --bg-light: #F8FAFC;
16
- --sidebar-width: 280px;
17
- --header-height: 70px;
18
- }
19
-
20
- * {
21
- margin: 0;
22
- padding: 0;
23
- box-sizing: border-box;
24
- }
25
-
26
- body {
27
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
28
- line-height: 1.6;
29
- color: var(--text-dark);
30
- background-color: var(--bg-light);
31
- min-height: 100vh;
32
- }
33
-
34
- /* 布局容器 */
35
- .app-container {
36
- display: flex;
37
- min-height: 100vh;
38
- }
39
-
40
- /* 侧边栏样式 */
41
- .sidebar {
42
- width: var(--sidebar-width);
43
- height: 100vh;
44
- position: fixed;
45
- left: 0;
46
- top: 0;
47
- background: white;
48
- border-right: 2px solid rgba(99, 145, 197, 0.1);
49
- display: flex;
50
- flex-direction: column;
51
- transition: transform 0.3s ease;
52
- z-index: 100;
53
- }
54
-
55
- .sidebar-header {
56
- padding: 2rem;
57
- border-bottom: 2px solid rgba(99, 145, 197, 0.1);
58
- }
59
-
60
- .logo {
61
- display: flex;
62
- align-items: center;
63
- gap: 1rem;
64
- text-decoration: none;
65
- color: var(--primary-blue);
66
- font-size: 1.5rem;
67
- font-weight: 600;
68
- }
69
-
70
- .logo i {
71
- font-size: 2rem;
72
- background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
73
- -webkit-background-clip: text;
74
- -webkit-text-fill-color: transparent;
75
- transition: transform 0.3s ease;
76
- }
77
-
78
- .logo:hover i {
79
- transform: rotate(-10deg);
80
- }
81
-
82
- .sidebar-content {
83
- flex: 1;
84
- padding: 2rem 1rem;
85
- overflow-y: auto;
86
- }
87
-
88
- .nav-group {
89
- margin-bottom: 2rem;
90
- }
91
-
92
- .nav-group-title {
93
- font-size: 0.875rem;
94
- font-weight: 600;
95
- color: #64748B;
96
- text-transform: uppercase;
97
- letter-spacing: 0.05em;
98
- padding: 0 1rem;
99
- margin-bottom: 1rem;
100
- }
101
-
102
- .nav-links {
103
- display: flex;
104
- flex-direction: column;
105
- gap: 0.5rem;
106
- }
107
-
108
- .nav-link {
109
- display: flex;
110
- align-items: center;
111
- gap: 1rem;
112
- padding: 0.875rem 1rem;
113
- color: var(--text-dark);
114
- text-decoration: none;
115
- border-radius: 12px;
116
- transition: all 0.3s ease;
117
- font-weight: 500;
118
- position: relative;
119
- overflow: hidden;
120
- }
121
-
122
- .nav-link::before {
123
- content: '';
124
- position: absolute;
125
- left: 0;
126
- top: 0;
127
- width: 4px;
128
- height: 100%;
129
- background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
130
- opacity: 0;
131
- transition: opacity 0.3s ease;
132
- }
133
-
134
- .nav-link:hover {
135
- background: linear-gradient(to right, rgba(99, 145, 197, 0.1), transparent);
136
- }
137
-
138
- .nav-link:hover::before {
139
- opacity: 1;
140
- }
141
-
142
- .nav-link i {
143
- font-size: 1.25rem;
144
- color: var(--primary-blue);
145
- transition: transform 0.3s ease;
146
- }
147
-
148
- .nav-link:hover i {
149
- transform: translateX(4px);
150
- }
151
-
152
- .nav-link span {
153
- font-size: 1.0625rem;
154
- }
155
-
156
- .sidebar-footer {
157
- padding: 1.5rem;
158
- border-top: 2px solid rgba(99, 145, 197, 0.1);
159
- display: flex;
160
- align-items: center;
161
- gap: 1rem;
162
- }
163
-
164
- /* 顶部栏样式 */
165
- .top-header {
166
- display: none;
167
- position: fixed;
168
- top: 0;
169
- left: 0;
170
- right: 0;
171
- height: var(--header-height);
172
- background: white;
173
- border-bottom: 2px solid rgba(99, 145, 197, 0.1);
174
- padding: 0 1.5rem;
175
- z-index: 99;
176
- }
177
-
178
- .header-content {
179
- height: 100%;
180
- display: flex;
181
- align-items: center;
182
- justify-content: space-between;
183
- }
184
-
185
- .header-nav {
186
- display: flex;
187
- align-items: center;
188
- gap: 1.5rem;
189
- }
190
-
191
- .menu-toggle {
192
- display: none;
193
- background: none;
194
- border: none;
195
- color: var(--primary-blue);
196
- font-size: 1.5rem;
197
- cursor: pointer;
198
- padding: 0.5rem;
199
- border-radius: 8px;
200
- transition: all 0.3s ease;
201
- }
202
-
203
- .menu-toggle:hover {
204
- background: rgba(99, 145, 197, 0.1);
205
- }
206
-
207
- /* 主内容区域 */
208
- .main-content {
209
- flex: 1;
210
- margin-left: var(--sidebar-width);
211
- padding: 2rem;
212
- position: relative;
213
- min-height: 100vh;
214
- }
215
-
216
- /* 响应式设计 */
217
- @media (max-width: 768px) {
218
- .sidebar {
219
- transform: translateX(-100%);
220
- }
221
-
222
- .sidebar.active {
223
- transform: translateX(0);
224
- }
225
-
226
- .top-header {
227
- display: block;
228
- }
229
-
230
- .menu-toggle {
231
- display: block;
232
- }
233
-
234
- .main-content {
235
- margin-left: 0;
236
- margin-top: var(--header-height);
237
- padding: 1.5rem;
238
- }
239
- }
240
-
241
- /* 遮罩层 */
242
- .overlay {
243
- display: none;
244
- position: fixed;
245
- top: 0;
246
- left: 0;
247
- right: 0;
248
- bottom: 0;
249
- background: rgba(0, 0, 0, 0.5);
250
- backdrop-filter: blur(4px);
251
- z-index: 98;
252
- opacity: 0;
253
- transition: opacity 0.3s ease;
254
- }
255
-
256
- .overlay.active {
257
- display: block;
258
- opacity: 1;
259
- }
260
-
261
- /* 滚动条美化 */
262
- ::-webkit-scrollbar {
263
- width: 8px;
264
- }
265
-
266
- ::-webkit-scrollbar-track {
267
- background: transparent;
268
- }
269
-
270
- ::-webkit-scrollbar-thumb {
271
- background: var(--light-blue);
272
- border-radius: 4px;
273
- }
274
-
275
- ::-webkit-scrollbar-thumb:hover {
276
- background: var(--primary-blue);
277
- }
278
- </style>
279
- {% block extra_css %}{% endblock %}
280
- </head>
281
- <body>
282
- <div class="app-container">
283
- <!-- 顶部栏(移动端) -->
284
- <header class="top-header">
285
- <div class="header-content">
286
- <button class="menu-toggle" id="menuToggle">
287
- <i class="fas fa-bars"></i>
288
- </button>
289
- <a href="{{ url_for('main.index') }}" class="logo">
290
- <i class="fas fa-feather"></i>
291
- <span>博客</span>
292
- </a>
293
- <nav class="header-nav">
294
- <a href="{{ url_for('main.index') }}" class="nav-link">
295
- <i class="fas fa-home"></i>
296
- <span>首页</span>
297
- </a>
298
- {% if session.get('logged_in') %}
299
- <a href="{{ url_for('admin.dashboard') }}" class="nav-link">
300
- <i class="fas fa-cog"></i>
301
- <span>管理</span>
302
- </a>
303
- {% endif %}
304
- </nav>
305
- </div>
306
- </header>
307
-
308
- <!-- 遮罩层 -->
309
- <div class="overlay" id="overlay"></div>
310
-
311
- <!-- 侧边栏 -->
312
- <aside class="sidebar" id="sidebar">
313
- <div class="sidebar-header">
314
- <a href="{{ url_for('main.index') }}" class="logo">
315
- <i class="fas fa-feather"></i>
316
- <span>Wisdom Hub</span>
317
- </a>
318
- </div>
319
-
320
- <div class="sidebar-content">
321
- <nav class="nav-group">
322
- <h3 class="nav-group-title">导航</h3>
323
- <div class="nav-links">
324
- <a href="{{ url_for('main.index') }}" class="nav-link">
325
- <i class="fas fa-home"></i>
326
- <span>首页</span>
327
- </a>
328
- {% if session.get('logged_in') %}
329
- <a href="{{ url_for('admin.dashboard') }}" class="nav-link">
330
- <i class="fas fa-cog"></i>
331
- <span>管理中心</span>
332
- </a>
333
- {% endif %}
334
- </div>
335
- </nav>
336
-
337
- {% if session.get('logged_in') %}
338
- <nav class="nav-group">
339
- <h3 class="nav-group-title">内容管理</h3>
340
- <div class="nav-links">
341
- <a href="{{ url_for('admin.editor') }}" class="nav-link">
342
- <i class="fas fa-edit"></i>
343
- <span>写文章</span>
344
- </a>
345
- </div>
346
- </nav>
347
- {% endif %}
348
- </div>
349
-
350
- <div class="sidebar-footer">
351
- {% if session.get('logged_in') %}
352
- <form action="{{ url_for('admin.login') }}" method="POST" style="width: 100%;">
353
- <button type="submit" class="nav-link" style="width: 100%; text-align: left; background: none; border: none; cursor: pointer;">
354
- <i class="fas fa-sign-out-alt"></i>
355
- <span>退出登录</span>
356
- </button>
357
- </form>
358
- {% else %}
359
- <a href="{{ url_for('admin.login') }}" class="nav-link">
360
- <i class="fas fa-sign-in-alt"></i>
361
- <span>登录</span>
362
- </a>
363
- {% endif %}
364
- </div>
365
- </aside>
366
-
367
- <!-- 主内容区域 -->
368
- <main class="main-content">
369
- {% block content %}{% endblock %}
370
- </main>
371
- </div>
372
-
373
- <script>
374
- // 移动端菜单控制
375
- const menuToggle = document.getElementById('menuToggle');
376
- const sidebar = document.getElementById('sidebar');
377
- const overlay = document.getElementById('overlay');
378
-
379
- function toggleMenu() {
380
- sidebar.classList.toggle('active');
381
- overlay.classList.toggle('active');
382
- document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
383
- }
384
-
385
- menuToggle.addEventListener('click', toggleMenu);
386
- overlay.addEventListener('click', toggleMenu);
387
-
388
- // 监听窗口大小变化,自动处理侧边栏状态
389
- window.addEventListener('resize', () => {
390
- if (window.innerWidth > 768 && sidebar.classList.contains('active')) {
391
- sidebar.classList.remove('active');
392
- overlay.classList.remove('active');
393
- document.body.style.overflow = '';
394
- }
395
- });
396
- </script>
397
-
398
- {% block extra_js %}{% endblock %}
399
- </body>
 
400
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>{% block title %}个人博客{% endblock %}</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-blue: #6391C5;
11
+ --light-blue: #B3CFEF;
12
+ --warm-cream: #FEEEDA;
13
+ --soft-purple: #C5CDFD;
14
+ --text-dark: #2C3E50;
15
+ --bg-light: #F8FAFC;
16
+ --sidebar-width: 280px;
17
+ --header-height: 70px;
18
+ }
19
+
20
+ * {
21
+ margin: 0;
22
+ padding: 0;
23
+ box-sizing: border-box;
24
+ }
25
+
26
+ body {
27
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
28
+ line-height: 1.6;
29
+ color: var(--text-dark);
30
+ background-color: var(--bg-light);
31
+ min-height: 100vh;
32
+ }
33
+
34
+ /* 布局容器 */
35
+ .app-container {
36
+ display: flex;
37
+ min-height: 100vh;
38
+ }
39
+
40
+ /* 侧边栏样式 */
41
+ .sidebar {
42
+ width: var(--sidebar-width);
43
+ height: 100vh;
44
+ position: fixed;
45
+ left: 0;
46
+ top: 0;
47
+ background: white;
48
+ border-right: 2px solid rgba(99, 145, 197, 0.1);
49
+ display: flex;
50
+ flex-direction: column;
51
+ transition: transform 0.3s ease;
52
+ z-index: 100;
53
+ }
54
+
55
+ .sidebar-header {
56
+ padding: 2rem;
57
+ border-bottom: 2px solid rgba(99, 145, 197, 0.1);
58
+ }
59
+
60
+ .logo {
61
+ display: flex;
62
+ align-items: center;
63
+ gap: 1rem;
64
+ text-decoration: none;
65
+ color: var(--primary-blue);
66
+ font-size: 1.5rem;
67
+ font-weight: 600;
68
+ }
69
+
70
+ .logo i {
71
+ font-size: 2rem;
72
+ background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
73
+ -webkit-background-clip: text;
74
+ -webkit-text-fill-color: transparent;
75
+ transition: transform 0.3s ease;
76
+ }
77
+
78
+ .logo:hover i {
79
+ transform: rotate(-10deg);
80
+ }
81
+
82
+ .sidebar-content {
83
+ flex: 1;
84
+ padding: 2rem 1rem;
85
+ overflow-y: auto;
86
+ }
87
+
88
+ .nav-group {
89
+ margin-bottom: 2rem;
90
+ }
91
+
92
+ .nav-group-title {
93
+ font-size: 0.875rem;
94
+ font-weight: 600;
95
+ color: #64748B;
96
+ text-transform: uppercase;
97
+ letter-spacing: 0.05em;
98
+ padding: 0 1rem;
99
+ margin-bottom: 1rem;
100
+ }
101
+
102
+ .nav-links {
103
+ display: flex;
104
+ flex-direction: column;
105
+ gap: 0.5rem;
106
+ }
107
+
108
+ .nav-link {
109
+ display: flex;
110
+ align-items: center;
111
+ gap: 1rem;
112
+ padding: 0.875rem 1rem;
113
+ color: var(--text-dark);
114
+ text-decoration: none;
115
+ border-radius: 12px;
116
+ transition: all 0.3s ease;
117
+ font-weight: 500;
118
+ position: relative;
119
+ overflow: hidden;
120
+ }
121
+
122
+ .nav-link::before {
123
+ content: '';
124
+ position: absolute;
125
+ left: 0;
126
+ top: 0;
127
+ width: 4px;
128
+ height: 100%;
129
+ background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
130
+ opacity: 0;
131
+ transition: opacity 0.3s ease;
132
+ }
133
+
134
+ .nav-link:hover {
135
+ background: linear-gradient(to right, rgba(99, 145, 197, 0.1), transparent);
136
+ }
137
+
138
+ .nav-link:hover::before {
139
+ opacity: 1;
140
+ }
141
+
142
+ .nav-link i {
143
+ font-size: 1.25rem;
144
+ color: var(--primary-blue);
145
+ transition: transform 0.3s ease;
146
+ }
147
+
148
+ .nav-link:hover i {
149
+ transform: translateX(4px);
150
+ }
151
+
152
+ .nav-link span {
153
+ font-size: 1.0625rem;
154
+ }
155
+
156
+ .sidebar-footer {
157
+ padding: 1.5rem;
158
+ border-top: 2px solid rgba(99, 145, 197, 0.1);
159
+ display: flex;
160
+ align-items: center;
161
+ gap: 1rem;
162
+ }
163
+
164
+ /* 顶部栏样式 */
165
+ .top-header {
166
+ display: none;
167
+ position: fixed;
168
+ top: 0;
169
+ left: 0;
170
+ right: 0;
171
+ height: var(--header-height);
172
+ background: white;
173
+ border-bottom: 2px solid rgba(99, 145, 197, 0.1);
174
+ padding: 0 1.5rem;
175
+ z-index: 99;
176
+ }
177
+
178
+ .header-content {
179
+ height: 100%;
180
+ display: flex;
181
+ align-items: center;
182
+ justify-content: space-between;
183
+ }
184
+
185
+ .header-nav {
186
+ display: flex;
187
+ align-items: center;
188
+ gap: 1.5rem;
189
+ }
190
+
191
+ .menu-toggle {
192
+ display: none;
193
+ background: none;
194
+ border: none;
195
+ color: var(--primary-blue);
196
+ font-size: 1.5rem;
197
+ cursor: pointer;
198
+ padding: 0.5rem;
199
+ border-radius: 8px;
200
+ transition: all 0.3s ease;
201
+ }
202
+
203
+ .menu-toggle:hover {
204
+ background: rgba(99, 145, 197, 0.1);
205
+ }
206
+
207
+ /* 主内容区域 */
208
+ .main-content {
209
+ flex: 1;
210
+ margin-left: var(--sidebar-width);
211
+ padding: 2rem;
212
+ position: relative;
213
+ min-height: 100vh;
214
+ }
215
+
216
+ /* 响应式设计 */
217
+ @media (max-width: 768px) {
218
+ .sidebar {
219
+ transform: translateX(-100%);
220
+ }
221
+
222
+ .sidebar.active {
223
+ transform: translateX(0);
224
+ }
225
+
226
+ .top-header {
227
+ display: block;
228
+ }
229
+
230
+ .menu-toggle {
231
+ display: block;
232
+ }
233
+
234
+ .main-content {
235
+ margin-left: 0;
236
+ margin-top: var(--header-height);
237
+ padding: 1.5rem;
238
+ max-width: 100vh;
239
+ }
240
+ }
241
+
242
+ /* 遮罩层 */
243
+ .overlay {
244
+ display: none;
245
+ position: fixed;
246
+ top: 0;
247
+ left: 0;
248
+ right: 0;
249
+ bottom: 0;
250
+ background: rgba(0, 0, 0, 0.5);
251
+ backdrop-filter: blur(4px);
252
+ z-index: 98;
253
+ opacity: 0;
254
+ transition: opacity 0.3s ease;
255
+ }
256
+
257
+ .overlay.active {
258
+ display: block;
259
+ opacity: 1;
260
+ }
261
+
262
+ /* 滚动条美化 */
263
+ ::-webkit-scrollbar {
264
+ width: 8px;
265
+ }
266
+
267
+ ::-webkit-scrollbar-track {
268
+ background: transparent;
269
+ }
270
+
271
+ ::-webkit-scrollbar-thumb {
272
+ background: var(--light-blue);
273
+ border-radius: 4px;
274
+ }
275
+
276
+ ::-webkit-scrollbar-thumb:hover {
277
+ background: var(--primary-blue);
278
+ }
279
+ </style>
280
+ {% block extra_css %}{% endblock %}
281
+ </head>
282
+ <body>
283
+ <div class="app-container">
284
+ <!-- 顶部栏(移动端) -->
285
+ <header class="top-header">
286
+ <div class="header-content">
287
+ <button class="menu-toggle" id="menuToggle">
288
+ <i class="fas fa-bars"></i>
289
+ </button>
290
+ <a href="{{ url_for('main.index') }}" class="logo">
291
+ <i class="fas fa-feather"></i>
292
+ <span>博客</span>
293
+ </a>
294
+ <nav class="header-nav">
295
+ <a href="{{ url_for('main.index') }}" class="nav-link">
296
+ <i class="fas fa-home"></i>
297
+ <span>首页</span>
298
+ </a>
299
+ {% if session.get('logged_in') %}
300
+ <a href="{{ url_for('admin.dashboard') }}" class="nav-link">
301
+ <i class="fas fa-cog"></i>
302
+ <span>管理</span>
303
+ </a>
304
+ {% endif %}
305
+ </nav>
306
+ </div>
307
+ </header>
308
+
309
+ <!-- 遮罩层 -->
310
+ <div class="overlay" id="overlay"></div>
311
+
312
+ <!-- 侧边栏 -->
313
+ <aside class="sidebar" id="sidebar">
314
+ <div class="sidebar-header">
315
+ <a href="{{ url_for('main.index') }}" class="logo">
316
+ <i class="fas fa-feather"></i>
317
+ <span>Wisdom Hub</span>
318
+ </a>
319
+ </div>
320
+
321
+ <div class="sidebar-content">
322
+ <nav class="nav-group">
323
+ <h3 class="nav-group-title">导航</h3>
324
+ <div class="nav-links">
325
+ <a href="{{ url_for('main.index') }}" class="nav-link">
326
+ <i class="fas fa-home"></i>
327
+ <span>首页</span>
328
+ </a>
329
+ {% if session.get('logged_in') %}
330
+ <a href="{{ url_for('admin.dashboard') }}" class="nav-link">
331
+ <i class="fas fa-cog"></i>
332
+ <span>管理中心</span>
333
+ </a>
334
+ {% endif %}
335
+ </div>
336
+ </nav>
337
+
338
+ {% if session.get('logged_in') %}
339
+ <nav class="nav-group">
340
+ <h3 class="nav-group-title">内容管理</h3>
341
+ <div class="nav-links">
342
+ <a href="{{ url_for('admin.editor') }}" class="nav-link">
343
+ <i class="fas fa-edit"></i>
344
+ <span>写文章</span>
345
+ </a>
346
+ </div>
347
+ </nav>
348
+ {% endif %}
349
+ </div>
350
+
351
+ <div class="sidebar-footer">
352
+ {% if session.get('logged_in') %}
353
+ <form action="{{ url_for('admin.login') }}" method="POST" style="width: 100%;">
354
+ <button type="submit" class="nav-link" style="width: 100%; text-align: left; background: none; border: none; cursor: pointer;">
355
+ <i class="fas fa-sign-out-alt"></i>
356
+ <span>退出登录</span>
357
+ </button>
358
+ </form>
359
+ {% else %}
360
+ <a href="{{ url_for('admin.login') }}" class="nav-link">
361
+ <i class="fas fa-sign-in-alt"></i>
362
+ <span>登录</span>
363
+ </a>
364
+ {% endif %}
365
+ </div>
366
+ </aside>
367
+
368
+ <!-- 主内容区域 -->
369
+ <main class="main-content">
370
+ {% block content %}{% endblock %}
371
+ </main>
372
+ </div>
373
+
374
+ <script>
375
+ // 移动端菜单控制
376
+ const menuToggle = document.getElementById('menuToggle');
377
+ const sidebar = document.getElementById('sidebar');
378
+ const overlay = document.getElementById('overlay');
379
+
380
+ function toggleMenu() {
381
+ sidebar.classList.toggle('active');
382
+ overlay.classList.toggle('active');
383
+ document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
384
+ }
385
+
386
+ menuToggle.addEventListener('click', toggleMenu);
387
+ overlay.addEventListener('click', toggleMenu);
388
+
389
+ // 监听窗口大小变化,自动处理侧边栏状态
390
+ window.addEventListener('resize', () => {
391
+ if (window.innerWidth > 768 && sidebar.classList.contains('active')) {
392
+ sidebar.classList.remove('active');
393
+ overlay.classList.remove('active');
394
+ document.body.style.overflow = '';
395
+ }
396
+ });
397
+ </script>
398
+
399
+ {% block extra_js %}{% endblock %}
400
+ </body>
401
  </html>