|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>创意素材生成平台</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: '#6366f1', |
|
|
secondary: '#8b5cf6', |
|
|
dark: '#1e293b', |
|
|
light: '#f8fafc' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Noto Sans SC', sans-serif; |
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-5px) scale(1.02); |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.card-front, .card-back { |
|
|
backface-visibility: hidden; |
|
|
} |
|
|
|
|
|
.card-back { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
|
|
|
.flipped .card-front { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
|
|
|
.flipped .card-back { |
|
|
transform: rotateY(0deg); |
|
|
} |
|
|
|
|
|
.generated-content { |
|
|
animation: fadeIn 0.5s ease forwards; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } |
|
|
} |
|
|
|
|
|
.editor-container { |
|
|
background: linear-gradient(45deg, #1e293b, #0f172a); |
|
|
border: 1px solid #334155; |
|
|
} |
|
|
|
|
|
.waveform { |
|
|
height: 100px; |
|
|
background: linear-gradient(90deg, #8b5cf6, #6366f1); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.waveform::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: |
|
|
linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); |
|
|
animation: wave 1.5s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes wave { |
|
|
0% { transform: translateX(-100%); } |
|
|
100% { transform: translateX(100%); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="text-light"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="py-4 px-6 bg-dark/80 backdrop-blur-sm border-b border-slate-700 sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center"> |
|
|
<i class="fas fa-magic text-white"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">创意素材生成平台</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 transition"> |
|
|
<i class="fas fa-save mr-2"></i>保存项目 |
|
|
</button> |
|
|
<button class="px-4 py-2 rounded-lg bg-secondary hover:bg-secondary/90 transition"> |
|
|
<i class="fas fa-share-alt mr-2"></i>分享 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow py-8 px-4"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-3"> |
|
|
<h2 class="text-2xl font-bold mb-6">已生成素材</h2> |
|
|
|
|
|
|
|
|
<div class="mb-8 bg-slate-800/50 backdrop-blur rounded-xl p-6 border border-slate-700"> |
|
|
<h3 class="text-xl font-bold mb-4">生成新素材</h3> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4"> |
|
|
<button onclick="generateCharacter()" class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-user text-primary"></i> |
|
|
</div> |
|
|
<span>生成角色</span> |
|
|
</button> |
|
|
|
|
|
<button onclick="generateText()" class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-font text-secondary"></i> |
|
|
</div> |
|
|
<span>生成文字</span> |
|
|
</button> |
|
|
|
|
|
<button onclick="generateAudio()" class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-volume-up text-primary"></i> |
|
|
</div> |
|
|
<span>生成声音</span> |
|
|
</button> |
|
|
|
|
|
<button onclick="generateImage()" class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-image text-secondary"></i> |
|
|
</div> |
|
|
<span>生成图片</span> |
|
|
</button> |
|
|
|
|
|
<button onclick="generateVideo()" class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-video text-primary"></i> |
|
|
</div> |
|
|
<span>生成视频</span> |
|
|
</button> |
|
|
|
|
|
<button onclick="generateRandom()" class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-2"> |
|
|
<i class="fas fa-random text-secondary"></i> |
|
|
</div> |
|
|
<span>随机生成</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="card relative h-80 cursor-pointer"> |
|
|
<div class="card-front absolute w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 flex flex-col"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<span class="bg-primary text-xs px-2 py-1 rounded-full">角色</span> |
|
|
<h3 class="text-xl font-bold mt-2">星际探险家 - 莉娜</h3> |
|
|
</div> |
|
|
<button class="text-slate-400 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex-grow flex items-center justify-center"> |
|
|
<div class="relative"> |
|
|
<div class="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 mx-auto flex items-center justify-center"> |
|
|
<i class="fas fa-user-astronaut text-3xl text-white"></i> |
|
|
</div> |
|
|
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-secondary text-xs px-2 py-1 rounded-full whitespace-nowrap"> |
|
|
已生成 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-4"> |
|
|
<p class="text-slate-300 text-sm">25岁 | 星际探险队队长 | 勇敢机智</p> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-3"> |
|
|
<button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center"> |
|
|
<i class="fas fa-music"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center"> |
|
|
<i class="fas fa-image"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center"> |
|
|
<i class="fas fa-film"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-secondary transition flex items-center justify-center"> |
|
|
<i class="fas fa-pen"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card-back absolute w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 flex flex-col"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold">编辑角色</h3> |
|
|
<button class="text-slate-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex-grow"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm text-slate-400 mb-1">角色名称</label> |
|
|
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2" value="莉娜"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm text-slate-400 mb-1">角色描述</label> |
|
|
<textarea class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 h-20">25岁的星际探险队队长，勇敢机智，擅长解决危机，对未知充满好奇。</textarea> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm text-slate-400 mb-1">年龄</label> |
|
|
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2" value="25"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-slate-400 mb-1">职业</label> |
|
|
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2" value="探险队长"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end mt-4"> |
|
|
<button class="px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 mr-2"> |
|
|
取消 |
|
|
</button> |
|
|
<button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-secondary hover:opacity-90"> |
|
|
保存更改 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card relative h-80 cursor-pointer"> |
|
|
<div class="card-front absolute w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 flex flex-col"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<span class="bg-secondary text-xs px-2 py-1 rounded-full">文字</span> |
|
|
<h3 class="text-xl font-bold mt-2">星际迷航：新世界</h3> |
|
|
</div> |
|
|
<button class="text-slate-400 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex-grow overflow-y-auto"> |
|
|
<p class="text-slate-300 text-sm"> |
|
|
在遥远的未来，莉娜船长带领她的团队探索未知星系。他们发现了一个充满奇异生命形态的星球，但很快意识到这个星球正面临毁灭性灾难。莉娜必须利用她的智慧和勇气，在有限的时间内找到拯救这个外星文明的方法... |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-3"> |
|
|
<button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center"> |
|
|
<i class="fas fa-music"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center"> |
|
|
<i class="fas fa-image"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center"> |
|
|
<i class="fas fa-film"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-secondary transition flex items-center justify-center"> |
|
|
<i class="fas fa-pen"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<span class="bg-primary text-xs px-2 py-1 rounded-full">声音</span> |
|
|
<h3 class="text-xl font-bold mt-2">莉娜角色配音</h3> |
|
|
</div> |
|
|
<button class="text-slate-400 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="waveform rounded-lg mb-4"></div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="text-sm text-slate-400">00:25 / 01:45</div> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-red-500 transition flex items-center justify-center"> |
|
|
<i class="fas fa-stop"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-secondary transition flex items-center justify-center"> |
|
|
<i class="fas fa-pen"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<span class="bg-secondary text-xs px-2 py-1 rounded-full">图片</span> |
|
|
<h3 class="text-xl font-bold mt-2">外星丛林场景</h3> |
|
|
</div> |
|
|
<button class="text-slate-400 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-purple-900/30 to-indigo-900/30 rounded-xl h-40 mb-4 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-mountain-sun text-4xl text-indigo-500 mb-2"></i> |
|
|
<p class="text-sm text-slate-400">图片生成中...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button class="px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 transition"> |
|
|
重新生成 |
|
|
</button> |
|
|
<button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-secondary hover:opacity-90 transition"> |
|
|
下载图片 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="py-6 px-4 border-t border-slate-700 mt-8"> |
|
|
<div class="max-w-7xl mx-auto text-center text-slate-500 text-sm"> |
|
|
<p>© 2023 创意素材生成平台 | 让创作更简单，让灵感更丰富</p> |
|
|
<div class="mt-2 flex justify-center space-x-4"> |
|
|
<a href="#" class="hover:text-slate-300 transition">使用条款</a> |
|
|
<a href="#" class="hover:text-slate-300 transition">隐私政策</a> |
|
|
<a href="#" class="hover:text-slate-300 transition">帮助中心</a> |
|
|
<a href="#" class="hover:text-slate-300 transition">联系我们</a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const TONGYI_API_KEY = 'YOUR_API_KEY'; |
|
|
const TONGYI_API_URL = 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation'; |
|
|
|
|
|
|
|
|
async function generateCharacter() { |
|
|
const loadingIndicator = document.createElement('div'); |
|
|
loadingIndicator.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50'; |
|
|
loadingIndicator.innerHTML = ` |
|
|
<div class="bg-slate-800 p-6 rounded-xl flex flex-col items-center"> |
|
|
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div> |
|
|
<p>正在生成角色...</p> |
|
|
</div> |
|
|
`; |
|
|
document.body.appendChild(loadingIndicator); |
|
|
|
|
|
try { |
|
|
const prompt = `请生成一个科幻主题的角色，包含以下信息： |
|
|
1. 角色名称 |
|
|
2. 年龄 |
|
|
3. 职业 |
|
|
4. 性格特点 |
|
|
5. 简短背景故事 |
|
|
请用JSON格式返回数据`; |
|
|
|
|
|
const response = await fetch(TONGYI_API_URL, { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
'Authorization': `Bearer ${TONGYI_API_KEY}` |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
"model": "qwen-turbo", |
|
|
"input": { |
|
|
"messages": [ |
|
|
{ |
|
|
"role": "user", |
|
|
"content": prompt |
|
|
} |
|
|
] |
|
|
} |
|
|
}) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
if (data.output && data.output.text) { |
|
|
try { |
|
|
const characterData = JSON.parse(data.output.text); |
|
|
updateCharacterCard(characterData); |
|
|
} catch (e) { |
|
|
console.error('Error parsing response:', e); |
|
|
alert('生成成功但格式解析失败，请查看控制台'); |
|
|
} |
|
|
} else { |
|
|
throw new Error('API返回数据格式异常'); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('生成角色失败:', error); |
|
|
alert('生成角色失败，请查看控制台'); |
|
|
} finally { |
|
|
document.body.removeChild(loadingIndicator); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateCharacterCard(data) { |
|
|
const card = document.querySelector('.card .card-front'); |
|
|
if (!card) return; |
|
|
|
|
|
card.querySelector('h3').textContent = data.name || '未知角色'; |
|
|
card.querySelector('p').textContent = `${data.age || '未知年龄'} | ${data.profession || '未知职业'} | ${data.personality || '未知性格'}`; |
|
|
|
|
|
|
|
|
card.classList.add('generated-content'); |
|
|
setTimeout(() => { |
|
|
card.style.opacity = 1; |
|
|
card.style.transform = 'translateY(0)'; |
|
|
}, 100); |
|
|
} |
|
|
|
|
|
async function generateText() { |
|
|
|
|
|
} |
|
|
|
|
|
async function generateAudio() { |
|
|
|
|
|
} |
|
|
|
|
|
async function generateImage() { |
|
|
|
|
|
} |
|
|
|
|
|
async function generateVideo() { |
|
|
|
|
|
} |
|
|
|
|
|
async function generateRandom() { |
|
|
|
|
|
const mockData = { |
|
|
name: "测试角色", |
|
|
age: "30", |
|
|
profession: "太空工程师", |
|
|
personality: "严谨务实", |
|
|
background: "负责飞船维护的资深工程师，对机械有着特殊感情" |
|
|
}; |
|
|
updateCharacterCard(mockData); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.card').forEach(card => { |
|
|
card.addEventListener('click', function(e) { |
|
|
|
|
|
if (e.target.tagName === 'BUTTON' || e.target.closest('button')) { |
|
|
return; |
|
|
} |
|
|
this.classList.toggle('flipped'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
document.querySelectorAll('.generated-content').forEach(el => { |
|
|
el.style.opacity = 1; |
|
|
el.style.transform = 'translateY(0)'; |
|
|
}); |
|
|
}, 500); |
|
|
</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=chaojie/n2v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
