File size: 24,818 Bytes
e1a63f9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DFT Agent - 密度泛函理论计算平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#6366f1',
                        accent: '#8b5cf6',
                        dark: '#1e293b',
                        light: '#f8fafc'
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 6s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            min-height: 100vh;
        }
        
        .molecule-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }
        
        .molecule-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2);
        }
        
        .terminal-output {
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            background: rgba(15, 23, 42, 0.9);
            border-radius: 0.5rem;
        }
        
        .atom-pulse {
            animation: pulse-slow 2s infinite;
        }
        
        .glow-border {
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
        }
        
        .progress-bar {
            height: 4px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            animation: progress-animation 2s infinite linear;
            background-size: 200% 100%;
        }
        
        @keyframes progress-animation {
            0% { background-position: 100% 0; }
            100% { background-position: -100% 0; }
        }
        
        .orbital-animation {
            animation: float 8s ease-in-out infinite;
        }
        
        .orbital-animation:nth-child(2) {
            animation-delay: 1s;
        }
        
        .orbital-animation:nth-child(3) {
            animation-delay: 2s;
        }
    </style>
</head>
<body class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
    <div class="max-w-6xl mx-auto">
        <!-- 页眉 -->
        <header class="text-center mb-12">
            <div class="flex items-center justify-center mb-4">
                <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-3">
                    <i class="fas fa-atom text-white text-xl"></i>
                </div>
                <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">DFT Agent</h1>
            </div>
            <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                密度泛函理论计算平台 - 输入分子结构,实时获取DFT计算结果
            </p>
        </header>

        <!-- 主内容区 -->
        <main class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 输入区域 -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl p-6 molecule-card">
                    <h2 class="text-xl font-semibold text-slate-800 mb-4 flex items-center">
                        <i class="fas fa-keyboard mr-2 text-secondary"></i>计算输入
                    </h2>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-slate-700 mb-2">输入分子结构</label>
                        <div class="relative">
                            <input 
                                type="text" 
                                id="molecule-input" 
                                placeholder="例如: 计算LiNa的能量" 
                                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition"
                            >
                            <button 
                                id="calculate-btn"
                                class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-primary to-secondary text-white px-4 py-1.5 rounded-lg hover:opacity-90 transition"
                            >
                                计算
                            </button>
                        </div>
                    </div>
                    
                    <div class="mt-8">
                        <h3 class="text-lg font-medium text-slate-800 mb-3 flex items-center">
                            <i class="fas fa-history mr-2 text-secondary"></i>最近计算
                        </h3>
                        <ul class="space-y-2">
                            <li class="flex items-center justify-between bg-slate-50 p-3 rounded-lg">
                                <span class="text-slate-700">H₂O</span>
                                <span class="text-sm text-slate-500">-76.42 eV</span>
                            </li>
                            <li class="flex items-center justify-between bg-slate-50 p-3 rounded-lg">
                                <span class="text-slate-700">CO₂</span>
                                <span class="text-sm text-slate-500">-187.65 eV</span>
                            </li>
                            <li class="flex items-center justify-between bg-slate-50 p-3 rounded-lg">
                                <span class="text-slate-700">CH₄</span>
                                <span class="text-sm text-slate-500">-40.52 eV</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="bg-white rounded-2xl p-6 molecule-card mt-8">
                    <h2 class="text-xl font-semibold text-slate-800 mb-4 flex items-center">
                        <i class="fas fa-info-circle mr-2 text-secondary"></i>DFT计算说明
                    </h2>
                    <p class="text-slate-600 mb-3">
                        密度泛函理论(DFT)是一种量子力学计算方法,用于研究多电子体系的电子结构。
                    </p>
                    <ul class="text-slate-600 space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>输入分子式(如H₂O, CO₂)</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>系统自动生成分子结构</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>实时显示计算过程</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>获取HOMO/LUMO轨道可视化</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 输出区域 -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-2xl p-6 molecule-card">
                    <h2 class="text-xl font-semibold text-slate-800 mb-4 flex items-center">
                        <i class="fas fa-microchip mr-2 text-secondary"></i>计算过程
                    </h2>
                    
                    <div id="calculation-status" class="mb-6">
                        <div class="flex items-center mb-2">
                            <div class="w-6 h-6 rounded-full bg-primary flex items-center justify-center mr-2">
                                <i class="fas fa-play text-white text-xs"></i>
                            </div>
                            <span class="text-slate-800">准备开始计算...</span>
                        </div>
                        <div class="progress-bar w-full rounded-full"></div>
                    </div>
                    
                    <div class="terminal-output p-4 rounded-lg mb-6">
                        <div id="terminal-content" class="text-green-400 text-sm h-64 overflow-y-auto">
                            <div>> DFT Agent 已就绪</div>
                            <div>> 等待用户输入...</div>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                        <div class="bg-slate-50 rounded-lg p-4">
                            <h3 class="font-medium text-slate-700 mb-2 flex items-center">
                                <i class="fas fa-cube mr-2 text-secondary"></i>分子结构
                            </h3>
                            <div id="molecule-structure" class="flex items-center justify-center h-48">
                                <div class="text-center text-slate-400">
                                    <i class="fas fa-molecule text-4xl mb-2"></i>
                                    <p>等待分子结构数据...</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-slate-50 rounded-lg p-4">
                            <h3 class="font-medium text-slate-700 mb-2 flex items-center">
                                <i class="fas fa-bolt mr-2 text-secondary"></i>能量信息
                            </h3>
                            <div id="energy-info" class="h-48 flex items-center justify-center">
                                <div class="text-center text-slate-400">
                                    <i class="fas fa-battery-quarter text-4xl mb-2"></i>
                                    <p>计算完成后显示能量数据</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <h3 class="font-medium text-slate-700 mb-3 flex items-center">
                            <i class="fas fa-orbit mr-2 text-secondary"></i>分子轨道
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-slate-50 rounded-lg p-4">
                                <h4 class="text-sm font-medium text-slate-600 mb-2">HOMO (最高占据分子轨道)</h4>
                                <div id="homo-orbital" class="flex items-center justify-center h-40">
                                    <div class="text-center text-slate-400">
                                        <i class="fas fa-circle-notch text-3xl mb-2 orbital-animation"></i>
                                        <p class="text-sm">计算中...</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-slate-50 rounded-lg p-4">
                                <h4 class="text-sm font-medium text-slate-600 mb-2">LUMO (最低未占分子轨道)</h4>
                                <div id="lumo-orbital" class="flex items-center justify-center h-40">
                                    <div class="text-center text-slate-400">
                                        <i class="fas fa-circle-notch text-3xl mb-2 orbital-animation" style="animation-delay: 0.5s"></i>
                                        <p class="text-sm">计算中...</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex justify-end">
                        <button id="export-btn" class="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition flex items-center">
                            <i class="fas fa-download mr-2"></i>导出结果
                        </button>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- 页脚 -->
        <footer class="mt-12 text-center text-slate-500 text-sm">
            <p>DFT Agent - 密度泛函理论计算平台 © 2023 | 量子化学计算工具</p>
            <p class="mt-1">本系统仅用于科研和教育目的</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const moleculeInput = document.getElementById('molecule-input');
            const calculateBtn = document.getElementById('calculate-btn');
            const terminalContent = document.getElementById('terminal-content');
            const moleculeStructure = document.getElementById('molecule-structure');
            const energyInfo = document.getElementById('energy-info');
            const homoOrbital = document.getElementById('homo-orbital');
            const lumoOrbital = document.getElementById('lumo-orbital');
            
            // 模拟分子结构图
            const moleculeImages = {
                'LiNa': '<div class="text-center"><div class="relative mx-auto w-32 h-32"><div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">Li</div><div class="absolute top-1/2 right-1/4 transform -translate-y-1/2 w-20 h-20 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold">Na</div><div class="absolute inset-0 flex items-center justify-center"><div class="w-full h-1 bg-slate-300"></div></div></div><p class="mt-2 text-slate-700">Li-Na 分子结构</p></div>',
                'H2O': '<div class="text-center"><div class="relative mx-auto w-32 h-32"><div class="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-12 h-12 rounded-full bg-red-500 flex items-center justify-center text-white font-bold">O</div><div class="absolute bottom-1/4 left-1/4 w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">H</div><div class="absolute bottom-1/4 right-1/4 w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">H</div><div class="absolute inset-0 flex items-center justify-center"><div class="w-1/2 h-1 bg-slate-300 transform rotate-45 origin-bottom"></div><div class="w-1/2 h-1 bg-slate-300 transform -rotate-45 origin-bottom"></div></div></div><p class="mt-2 text-slate-700">H₂O 分子结构</p></div>',
                'default': '<div class="text-center"><div class="relative mx-auto w-32 h-32"><div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold">M</div></div><p class="mt-2 text-slate-700">分子结构图</p></div>'
            };
            
            // 模拟能量数据
            const energyData = {
                'LiNa': {
                    total: '-5.42 eV',
                    fermi: '-2.15 eV',
                    homo: '-3.78 eV',
                    lumo: '-1.25 eV'
                },
                'H2O': {
                    total: '-76.42 eV',
                    fermi: '-7.18 eV',
                    homo: '-9.25 eV',
                    lumo: '-0.87 eV'
                },
                'default': {
                    total: '-0.00 eV',
                    fermi: '-0.00 eV',
                    homo: '-0.00 eV',
                    lumo: '-0.00 eV'
                }
            };
            
            // 模拟轨道图
            const orbitalImages = {
                'homo': '<div class="text-center"><div class="relative mx-auto w-32 h-32"><div class="absolute inset-0 rounded-full border-4 border-green-500 opacity-70"></div><div class="absolute inset-8 rounded-full border-4 border-green-500 opacity-50"></div><div class="absolute inset-16 rounded-full border-4 border-green-500 opacity-30"></div><div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-green-500"></div></div><p class="mt-2 text-slate-700">HOMO 轨道</p></div>',
                'lumo': '<div class="text-center"><div class="relative mx-auto w-32 h-32"><div class="absolute inset-0 rounded-full border-4 border-blue-500 opacity-70 transform rotate-45"></div><div class="absolute inset-8 rounded-full border-4 border-blue-500 opacity-50 transform rotate-45"></div><div class="absolute inset-16 rounded-full border-4 border-blue-500 opacity-30 transform rotate-45"></div><div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-blue-500"></div></div><p class="mt-2 text-slate-700">LUMO 轨道</p></div>'
            };
            
            // 添加终端输出
            function addTerminalOutput(message) {
                const newLine = document.createElement('div');
                newLine.textContent = '> ' + message;
                newLine.className = 'terminal-line';
                terminalContent.appendChild(newLine);
                terminalContent.scrollTop = terminalContent.scrollHeight;
            }
            
            // 模拟计算过程
            function simulateCalculation(molecule) {
                // 重置显示
                moleculeStructure.innerHTML = '<div class="text-center text-slate-400"><i class="fas fa-spinner fa-spin text-3xl mb-2"></i><p>生成分子结构...</p></div>';
                energyInfo.innerHTML = '<div class="text-center text-slate-400"><i class="fas fa-spinner fa-spin text-3xl mb-2"></i><p>计算能量数据...</p></div>';
                homoOrbital.innerHTML = '<div class="text-center text-slate-400"><i class="fas fa-spinner fa-spin text-3xl mb-2"></i><p>计算HOMO轨道...</p></div>';
                lumoOrbital.innerHTML = '<div class="text-center text-slate-400"><i class="fas fa-spinner fa-spin text-3xl mb-2"></i><p>计算LUMO轨道...</p></div>';
                
                // 清空终端
                terminalContent.innerHTML = '';
                
                // 开始模拟计算过程
                addTerminalOutput(`开始计算: ${molecule}`);
                
                setTimeout(() => {
                    addTerminalOutput('解析分子式...');
                    addTerminalOutput('生成初始几何结构...');
                    
                    // 显示分子结构
                    setTimeout(() => {
                        moleculeStructure.innerHTML = moleculeImages[molecule] || moleculeImages['default'];
                        addTerminalOutput('分子结构生成完成');
                    }, 1500);
                    
                    setTimeout(() => {
                        addTerminalOutput('初始化DFT计算参数...');
                        addTerminalOutput('使用PBE交换关联泛函');
                        addTerminalOutput('设置截断能量: 500 eV');
                    }, 3000);
                    
                    setTimeout(() => {
                        addTerminalOutput('开始自洽场迭代...');
                        
                        // 模拟迭代过程
                        for (let i = 1; i <= 5; i++) {
                            setTimeout(() => {
                                addTerminalOutput(`SCF迭代 ${i}: 能量变化 = ${(0.05 - i*0.01).toFixed(4)} eV`);
                            }, 3000 + i*1000);
                        }
                    }, 5000);
                    
                    setTimeout(() => {
                        addTerminalOutput('自洽场收敛完成');
                        addTerminalOutput('计算总能...');
                        
                        // 显示能量信息
                        const energy = energyData[molecule] || energyData['default'];
                        energyInfo.innerHTML = `
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-slate-600">总能量:</span>
                                    <span class="font-medium">${energy.total}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-slate-600">费米能级:</span>
                                    <span class="font-medium">${energy.fermi}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-slate-600">HOMO能量:</span>
                                    <span class="font-medium">${energy.homo}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-slate-600">LUMO能量:</span>
                                    <span class="font-medium">${energy.lumo}</span>
                                </div>
                                <div class="mt-4 pt-2 border-t border-slate-200">
                                    <span class="text-sm text-slate-500">带隙: ${(parseFloat(energy.lumo) - parseFloat(energy.homo)).toFixed(2)} eV</span>
                                </div>
                            </div>
                        `;
                        
                        addTerminalOutput('计算分子轨道...');
                    }, 10000);
                    
                    setTimeout(() => {
                        addTerminalOutput('可视化HOMO/LUMO轨道...');
                        
                        // 显示轨道图
                        homoOrbital.innerHTML = orbitalImages['homo'];
                        lumoOrbital.innerHTML = orbitalImages['lumo'];
                        
                        addTerminalOutput('计算完成!');
                    }, 12000);
                }, 500);
            }
            
            // 计算按钮事件
            calculateBtn.addEventListener('click', function() {
                const molecule = moleculeInput.value.trim();
                if (!molecule) {
                    alert('请输入分子式');
                    return;
                }
                
                // 简单提取分子式
                let mol = 'default';
                if (molecule.includes('LiNa') || molecule.includes('lina')) mol = 'LiNa';
                if (molecule.includes('H2O') || molecule.includes('水') || molecule.includes('water')) mol = 'H2O';
                
                simulateCalculation(mol);
            });
            
            // 示例:模拟输入
            moleculeInput.value = '计算LiNa的能量';
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Yyk040316/dftagent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>