<!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 href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#8C1515', // 深红色，代表酒与激情
secondary: '#D4AF37', // 金色，代表诗意与辉煌
tertiary: '#E8C39E', // 米色，代表纸张与书卷
background: '#F9F5F0', // 浅米色，背景色
textDark: '#333333', // 深灰色，文本颜色
},
fontFamily: {
sans: ['Noto Sans SC', 'sans-serif'],
serif: ['Noto Serif SC', 'serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.poem-line {
transition: all 0.5s ease;
}
.poem-line:hover {
transform: translateY(-5px);
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.ink-splash {
position: absolute;
border-radius: 50%;
transform: scale(0);
opacity: 0.6;
background: radial-gradient(circle, rgba(140,21,21,0.8) 0%, rgba(140,21,21,0.4) 50%, rgba(140,21,21,0) 100%);
animation: splash 1.5s ease-out forwards;
}
.scroll-decoration {
background-image: linear-gradient(135deg, #D4AF37 0%, #F9F5F0 50%, #8C1515 100%);
background-size: 200% 200%;
animation: gradient 15s ease infinite;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes splash {
0% {
transform: scale(0);
opacity: 0.6;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 自定义滑块样式 */
input[type="range"] {
-webkit-appearance: none;
height: 6px;
border-radius: 3px;
background: #e0e0e0;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #8C1515;
cursor: pointer;
transition: background .3s;
}
input[type="range"]::-webkit-slider-thumb:hover {
background: #D4AF37;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-background text-textDark min-h-screen flex flex-col">
<!-- 页面背景装饰 -->
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
<div class="absolute top-1/4 left-1/4 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
<div class="absolute bottom-1/3 right-1/4 w-80 h-80 bg-secondary/5 rounded-full blur-3xl"></div>
<div class="absolute top-1/2 right-1/3 w-72 h-72 bg-tertiary/5 rounded-full blur-3xl"></div>
</div>
<!-- 页面头部 -->
<header class="bg-primary text-white py-12 relative overflow-hidden z-10">
<div class="absolute inset-0 bg-[url('https://picsum.photos/seed/libai/1920/400')] bg-cover bg-center opacity-10"></div>
<div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-primary/70"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="flex flex-col items-center">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-serif font-bold text-center text-shadow mb-2">
李白式醉话体
</h1>
<p class="text-[clamp(1.2rem,2vw,1.5rem)] text-center max-w-2xl opacity-90">
三行诗创作器
</p>
<div class="mt-6 w-24 h-1 bg-secondary rounded-full"></div>
</div>
</div>
</header>
<main class="flex-grow container mx-auto px-4 py-16 relative z-10">
<!-- 创作区 -->
<section class="mb-16">
<div class="bg-white rounded-xl shadow-xl p-8 md:p-10 max-w-4xl mx-auto border-l-4 border-primary relative overflow-hidden">
<div class="absolute -right-10 -top-10 w-40 h-40 bg-secondary/5 rounded-full blur-2xl"></div>
<div class="absolute -left-10 -bottom-10 w-40 h-40 bg-primary/5 rounded-full blur-2xl"></div>
<h2 class="text-2xl md:text-3xl font-serif font-bold mb-8 text-primary text-center">
诗酒趁年华
</h2>
<!-- 主题选择 -->
<div class="mb-8">
<label class="block text-lg font-medium mb-3">创作主题</label>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<button class="theme-btn py-3 px-4 rounded-lg bg-primary/5 hover:bg-primary/10 border border-primary/20 transition-colors duration-200 flex items-center justify-center" data-theme="明月">
<i class="fa fa-moon-o text-primary mr-2"></i> 明月
</button>
<button class="theme-btn py-3 px-4 rounded-lg bg-primary/5 hover:bg-primary/10 border border-primary/20 transition-colors duration-200 flex items-center justify-center" data-theme="美酒">
<i class="fa fa-glass text-primary mr-2"></i> 美酒
</button>
<button class="theme-btn py-3 px-4 rounded-lg bg-primary/5 hover:bg-primary/10 border border-primary/20 transition-colors duration-200 flex items-center justify-center" data-theme="山水">
<i class="fa fa-tree text-primary mr-2"></i> 山水
</button>
<button class="theme-btn py-3 px-4 rounded-lg bg-primary/5 hover:bg-primary/10 border border-primary/20 transition-colors duration-200 flex items-center justify-center" data-theme="豪情">
<i class="fa fa-bolt text-primary mr-2"></i> 豪情
</button>
<button class="theme-btn py-3 px-4 rounded-lg bg-primary/5 hover:bg-primary/10 border border-primary/20 transition-colors duration-200 flex items-center justify-center" data-theme="孤独">
<i class="fa fa-user text-primary mr-2"></i> 孤独
</button>
<button class="theme-btn py-3 px-4 rounded-lg bg-primary/5 hover:bg-primary/10 border border-primary/20 transition-colors duration-200 flex items-center justify-center" data-theme="自由">
<i class="fa fa-bird text-primary mr-2"></i> 自由
</button>
</div>
<div class="mt-4">
<label class="block text-lg font-medium mb-2">自定义主题</label>
<input type="text" id="custom-theme" placeholder="输入你想要的主题..." class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
</div>
</div>
<!-- 风格设置 -->
<div class="mb-8">
<label class="block text-lg font-medium mb-3">风格强度</label>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="text-sm text-gray-600 mb-1 block">李白风格</label>
<div class="flex items-center">
<i class="fa fa-quote-right text-primary mr-2"></i>
<input type="range" id="libai-style" min="0" max="100" value="70" class="w-full">
<span id="libai-value" class="ml-2 min-w-[3rem] text-center">70%</span>
</div>
</div>
<div>
<label class="text-sm text-gray-600 mb-1 block">醉话程度</label>
<div class="flex items-center">
<i class="fa fa-flask text-primary mr-2"></i>
<input type="range" id="drunk-level" min="0" max="100" value="50" class="w-full">
<span id="drunk-value" class="ml-2 min-w-[3rem] text-center">50%</span>
</div>
</div>
</div>
</div>
<!-- 创作按钮 -->
<div class="text-center mb-8">
<button id="create-poem" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-lg transition-colors duration-200 text-lg font-medium flex items-center justify-center mx-auto">
<i class="fa fa-pencil-square-o mr-2"></i> 以酒为墨，挥毫成诗
</button>
</div>
<!-- 创作状态 -->
<div id="loading-indicator" class="hidden text-center py-4">
<div class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-primary mx-auto mb-2"></div>
<p class="text-gray-600">正在酝酿诗意...</p>
</div>
<!-- 错误提示 -->
<div id="error-message" class="hidden bg-red-50 border border-red-200 text-red-600 py-3 px-4 rounded-lg mb-4">
<i class="fa fa-exclamation-circle mr-2"></i>
<span>创作失败，请重试</span>
</div>
</div>
</section>
<!-- 诗歌展示区 -->
<section class="mb-16">
<div class="bg-white rounded-xl shadow-xl p-8 md:p-10 max-w-4xl mx-auto border-l-4 border-secondary relative overflow-hidden">
<div class="absolute top-0 right-0 w-24 h-24 bg-secondary/5 rounded-bl-full blur-xl"></div>
<h2 class="text-2xl md:text-3xl font-serif font-bold mb-6 text-primary text-center">
生成的诗
</h2>
<div id="poem-container" class="min-h-[200px] flex flex-col items-center justify-center">
<div id="poem-placeholder" class="text-center text-gray-400 py-10">
<i class="fa fa-book text-4xl mb-4 opacity-30"></i>
<p class="text-lg">点击上方"以酒为墨，挥毫成诗"按钮开始创作</p>
</div>
<div id="poem-content" class="hidden w-full">
<div class="poem-display relative mx-auto max-w-md">
<div class="absolute -left-4 top-0 text-secondary/30 text-4xl font-serif">「</div>
<div id="line-1" class="poem-line text-xl md:text-2xl font-serif text-center mb-4 py-2">
示例诗句一行
</div>
<div id="line-2" class="poem-line text-xl md:text-2xl font-serif text-center mb-4 py-2">
示例诗句二行
</div>
<div id="line-3" class="poem-line text-xl md:text-2xl font-serif text-center py-2">
示例诗句三行
</div>
<div class="absolute -right-4 bottom-0 text-secondary/30 text-4xl font-serif">」</div>
</div>
<div class="mt-8 text-center">
<span id="poem-signature" class="text-sm text-gray-500">—— 李白式·醉笔</span>
</div>
<div class="mt-8 flex justify-center space-x-4">
<button id="regenerate-btn" class="bg-primary/10 hover:bg-primary/20 text-primary px-5 py-2 rounded-lg transition-colors duration-200 flex items-center">
<i class="fa fa-refresh mr-2"></i> 换一首
</button>
<button id="save-btn" class="bg-secondary/10 hover:bg-secondary/20 text-secondary px-5 py-2 rounded-lg transition-colors duration-200 flex items-center">
<i class="fa fa-save mr-2"></i> 保存
</button>
<button id="share-btn" class="bg-tertiary/10 hover:bg-tertiary/20 text-tertiary px-5 py-2 rounded-lg transition-colors duration-200 flex items-center">
<i class="fa fa-share-alt mr-2"></i> 分享
</button>
</div>
</div>
</div>
</div>
</section>
<!-- 已保存的诗歌 -->
<section>
<div class="bg-white rounded-xl shadow-xl p-8 md:p-10 max-w-4xl mx-auto border-l-4 border-tertiary">
<h2 class="text-2xl font-serif font-bold mb-6 text-primary">
已保存的诗
</h2>
<div id="saved-poems" class="grid grid-cols-1 gap-6">
<div id="no-saved-poems" class="text-center text-gray-400 py-10">
<i class="fa fa-inbox text-4xl mb-4 opacity-30"></i>
<p class="text-lg">暂无保存的诗歌</p>
</div>
<!-- 已保存的诗歌将在这里动态显示 -->
</div>
</div>
</section>
</main>
<footer class="bg-primary text-white py-10 mt-16 relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://picsum.photos/seed/poetry/1920/300')] bg-cover bg-center opacity-10"></div>
<div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-primary/70"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="text-center">
<h2 class="text-xl font-serif mb-4">李白式醉话体三行诗创作器</h2>
<p class="max-w-2xl mx-auto mb-6 text-sm opacity-80">
本工具结合豆包AI，尝试重现李白诗歌的豪放与浪漫，让每一首诗都带着"天子呼来不上船"的洒脱
</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-white hover:text-secondary transition-colors duration-200">
<i class="fa fa-book mr-1"></i> 诗歌库
</a>
<a href="#" class="text-white hover:text-secondary transition-colors duration-200">
<i class="fa fa-info-circle mr-1"></i> 使用指南
</a>
<a href="#" class="text-white hover:text-secondary transition-colors duration-200">
<i class="fa fa-paint-brush mr-1"></i> 创作灵感
</a>
</div>
<p class="mt-8 text-xs opacity-70">
© 2023 李白式醉话体三行诗创作器 | 灵感源自盛唐诗人李白
</p>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 创作数据
const poemData = {
theme: '明月',
libaiStyle: 70,
drunkLevel: 50,
savedPoems: []
};
// DOM元素
const themeButtons = document.querySelectorAll('.theme-btn');
const customThemeInput = document.getElementById('custom-theme');
const libaiStyleSlider = document.getElementById('libai-style');
const libaiStyleValue = document.getElementById('libai-value');
const drunkLevelSlider = document.getElementById('drunk-level');
const drunkLevelValue = document.getElementById('drunk-value');
const createPoemBtn = document.getElementById('create-poem');
const poemPlaceholder = document.getElementById('poem-placeholder');
const poemContent = document.getElementById('poem-content');
const poemLines = [
document.getElementById('line-1'),
document.getElementById('line-2'),
document.getElementById('line-3')
];
const poemSignature = document.getElementById('poem-signature');
const loadingIndicator = document.getElementById('loading-indicator');
const errorMessage = document.getElementById('error-message');
const regenerateBtn = document.getElementById('regenerate-btn');
const saveBtn = document.getElementById('save-btn');
const shareBtn = document.getElementById('share-btn');
const savedPoemsContainer = document.getElementById('saved-poems');
const noSavedPoems = document.getElementById('no-saved-poems');
// 更新风格强度显示
libaiStyleSlider.addEventListener('input', () => {
poemData.libaiStyle = parseInt(libaiStyleSlider.value);
libaiStyleValue.textContent = `${poemData.libaiStyle}%`;
});
// 更新醉话程度显示
drunkLevelSlider.addEventListener('input', () => {
poemData.drunkLevel = parseInt(drunkLevelSlider.value);
drunkLevelValue.textContent = `${poemData.drunkLevel}%`;
});
// 主题按钮点击事件
themeButtons.forEach(button => {
button.addEventListener('click', () => {
// 移除所有按钮的活跃状态
themeButtons.forEach(btn => {
btn.className = 'theme-btn py-3 px-4 rounded-lg bg-primary/5 hover:bg-primary/10 border border-primary/20 transition-colors duration-200 flex items-center justify-center';
});
// 添加当前按钮的活跃状态
button.className = 'theme-btn py-3 px-4 rounded-lg bg-primary/10 hover:bg-primary/20 border border-primary transition-colors duration-200 flex items-center justify-center';
// 更新主题
poemData.theme = button.getAttribute('data-theme');
customThemeInput.value = '';
});
});
// 自定义主题输入
customThemeInput.addEventListener('input', () => {
if (customThemeInput.value.trim()) {
// 移除所有按钮的活跃状态
themeButtons.forEach(btn => {
btn.className = 'theme-btn py-3 px-4 rounded-lg bg-primary/5 hover:bg-primary/10 border border-primary/20 transition-colors duration-200 flex items-center justify-center';
});
// 更新主题
poemData.theme = customThemeInput.value.trim();
}
});
// 创建诗歌按钮点击事件
createPoemBtn.addEventListener('click', createPoem);
regenerateBtn.addEventListener('click', createPoem);
// 保存诗歌按钮点击事件
saveBtn.addEventListener('click', savePoem);
// 分享诗歌按钮点击事件
shareBtn.addEventListener('click', sharePoem);
// 创建诗歌函数
function createPoem() {
// 显示加载状态
loadingIndicator.classList.remove('hidden');
poemPlaceholder.classList.add('hidden');
poemContent.classList.add('hidden');
errorMessage.classList.add('hidden');
// 隐藏已保存诗歌的空状态提示
noSavedPoems.classList.add('hidden');
// 生成随机诗句（实际应用中应调用豆包AI API）
setTimeout(() => {
try {
// 这里应该是调用豆包AI的API
// 以下为模拟生成的诗句
const themes = {
'明月': ['醉揽九天月', '举杯邀素娥', '月落满衣霜'],
'美酒': ['玉壶盛绿蚁', '醉卧酒垆旁', '销愁斗十千'],
'山水': ['飞流三千尺', '云深不知处', '轻舟过万山'],
'豪情': ['仰天大笑去', '横扫万里风', '肝胆照昆仑'],
'孤独': ['独酌无相亲', '举杯对孤影', '天地一沙鸥'],
'自由': ['散发弄扁舟', '心随万里风', '四海为吾家']
};
let lines = [];
// 如果是预定义主题，从预设中随机选择
if (themes[poemData.theme]) {
// 根据李白风格强度决定是否使用预设诗句
if (Math.random() < (poemData.libaiStyle / 100)) {
// 使用预设诗句
lines = [...themes[poemData.theme]];
// 根据醉话程度随机打乱顺序
if (poemData.drunkLevel > 30 && Math.random() < (poemData.drunkLevel / 100 - 0.3)) {
const swapIndex = Math.floor(Math.random() * 2);
[lines[swapIndex], lines[swapIndex + 1]] = [lines[swapIndex + 1], lines[swapIndex]];
}
} else {
// 生成新诗句
lines = generateRandomLines(poemData.theme, poemData.libaiStyle, poemData.drunkLevel);
}
} else {
// 自定义主题，生成新诗句
lines = generateRandomLines(poemData.theme, poemData.libaiStyle, poemData.drunkLevel);
}
// 显示生成的诗句
poemLines.forEach((line, index) => {
line.textContent = lines[index];
// 添加墨迹动画效果
createInkSplash(line);
});
// 添加作者签名
poemSignature.textContent = `—— 李白式·醉笔 (${poemData.theme})`;
// 显示诗歌内容
poemContent.classList.remove('hidden');
} catch (error) {
console.error('生成诗歌出错:', error);
// 显示错误信息
errorMessage.classList.remove('hidden');
} finally {
// 隐藏加载状态
loadingIndicator.classList.add('hidden');
}
}, 1500); // 模拟API调用延迟
}
// 生成随机诗句（模拟豆包AI生成）
function generateRandomLines(theme, libaiStyle, drunkLevel) {
// 基础词汇库
const nouns = ['青山', '绿水', '白云', '明月', '金樽', '玉盘', '长剑', '天涯', '孤帆', '秋风', '古道', '夕阳', '白发', '红颜', '美酒', '诗卷'];
const verbs = ['醉卧', '狂歌', '独酌', '笑看', '遥望', '长叹', '轻抚', '高歌', '漫卷', '横剑', '纵马', '举杯', '泼墨', '挥毫', '踏歌', '舞剑'];
const adjectives = ['苍茫', '寂寥', '豪迈', '潇洒', '孤独', '清冷', '壮阔', '雄浑', '飘逸', '悠远', '苍凉', '峥嵘', '璀璨', '斑斓', '朦胧', '氤氲'];
const endings = ['天地宽', '岁月长', '心自闲', '醉千年', '意难平', '梦魂牵', '泪满襟', '笑红尘', '志未酬', '情未了', '路漫漫', '水云间', '照无眠', '若等闲', '似云烟', '舞蹁跹'];
// 根据主题增强特定词汇
let themedNouns = [...nouns];
let themedVerbs = [...verbs];
switch(theme) {
case '明月':
themedNouns = [...themedNouns, '桂魄', '玉盘', '清辉', '素娥', '广寒', '琼楼'];
themedVerbs = [...themedVerbs, '邀月', '揽月', '问月', '赏月', '对月', '吟月'];
break;
case '美酒':
themedNouns = [...themedNouns, '绿蚁', '金樽', '玉液', '琥珀', '琼浆', '杜康'];
themedVerbs = [...themedVerbs, '举杯', '痛饮', '狂饮', '醉倒', '沽酒', '赊酒'];
break;
case '山水':
themedNouns = [...themedNouns, '奇峰', '秀水', '深渊', '峻岭', '飞瀑', '流泉', '云雾'];
themedVerbs = [...themedVerbs, '登临', '俯瞰', '远眺', '穿行', '坐观', '卧听'];
break;
case '豪情':
themedNouns = [...themedNouns, '肝胆', '意气', '风雷', '云霄', '昆仑', '长虹', '鲲鹏'];
themedVerbs = [...themedVerbs, '横扫', '叱咤', '纵横', '高歌', '大笑', '扬鞭', '踏破'];
break;
case '孤独':
themedNouns = [...themedNouns, '孤影', '独酌', '寒江', '残月', '空山', '荒村', '古道'];
themedVerbs = [...themedVerbs, '独倚', '独坐', '独行', '孤吟', '悲叹', '怅望'];
break;
case '自由':
themedNouns = [...themedNouns, '扁舟', '闲云', '野鹤', '长风', '天涯', '海角', '烟霞'];
themedVerbs = [...themedVerbs, '遨游', '不羁', '放浪', '漂泊', '驰骋', '逍遥', '自在'];
break;
default:
// 自定义主题，添加相关词汇
themedNouns = [...themedNouns, theme, `${theme}影`, `${theme}魂`, `${theme}光`, `${theme}色`];
themedVerbs = [...themedVerbs, `醉${theme}`, `梦${theme}`, `思${theme}`, `恋${theme}`, `寻${theme}`];
break;
}
// 生成诗句
const lines = [];
// 第一行
if (Math.random() < (libaiStyle / 100)) {
// 李白风格较强的句式
lines.push(`${getRandomItem(verbs)}${getRandomItem(adjectives)}${getRandomItem(themedNouns)}`);
} else {
// 普通句式
lines.push(`${getRandomItem(adjectives)}${getRandomItem(themedNouns)}${getRandomItem(verbs)}远`);
}
// 第二行
if (Math.random() < (libaiStyle / 100)) {
// 李白风格较强的句式
lines.push(`${getRandomItem(verbs)}${getRandomItem(themedNouns)}${getRandomItem(endings)}`);
} else {
// 普通句式
lines.push(`${getRandomItem(themedNouns)}${getRandomItem(verbs)}${getRandomItem(adjectives)}天`);
}
// 第三行
if (Math.random() < (libaiStyle / 100)) {
// 李白风格较强的句式
lines.push(`但使${getRandomItem(themedNouns)}${getRandomItem(verbs)}在，${getRandomItem(verbs)}${getRandomItem(themedNouns)}笑流年`);
} else {
// 普通句式
lines.push(`${getRandomItem(verbs)}${getRandomItem(themedNouns)}${getRandomItem(endings)}，${getRandomItem(adjectives)}${getRandomItem(themedNouns)}${getRandomItem(verbs)}间`);
}
// 根据醉话程度添加一些随机效果
if (drunkLevel > 50) {
// 醉话程度较高，可能会有一些不连贯或奇特的表达
if (Math.random() < (drunkLevel / 100 - 0.5)) {
// 随机替换一个词为更奇特的词
const randomLine = Math.floor(Math.random() * 3);
const randomWordIndex = Math.floor(Math.random() * lines[randomLine].length);
lines[randomLine] = lines[randomLine].substring(0, randomWordIndex) +
getRandomItem(['狂', '癫', '醉', '幻', '梦', '仙', '魂', '魄']) +
lines[randomLine].substring(randomWordIndex + 1);
}
// 可能会有一些重复或颠倒
if (Math.random() < (drunkLevel / 100 - 0.5)) {
const randomLine = Math.floor(Math.random() * 3);
lines[randomLine] = lines[randomLine].split('').reverse().join('');
}
}
return lines;
}
// 随机获取数组中的一个元素
function getRandomItem(array) {
return array[Math.floor(Math.random() * array.length)];
}
// 创建墨迹动画效果
function createInkSplash(element) {
// 确保元素已渲染
if (!element.getBoundingClientRect().width) {
return;
}
// 获取元素位置和尺寸
const rect = element.getBoundingClientRect();
const x = Math.random() * rect.width * 0.6 + rect.width * 0.2;
const y = Math.random() * rect.height * 0.6 + rect.height * 0.2;
// 创建墨迹元素
const inkDrop = document.createElement('div');
inkDrop.className = 'ink-splash';
inkDrop.style.width = `${Math.random() * 30 + 20}px`;
inkDrop.style.height = `${Math.random() * 30 + 20}px`;
inkDrop.style.left = `${x - parseInt(inkDrop.style.width) / 2}px`;
inkDrop.style.top = `${y - parseInt(inkDrop.style.height) / 2}px`;
// 设置定位上下文
element.style.position = 'relative';
element.appendChild(inkDrop);
// 动画结束后移除元素
setTimeout(() => {
if (element.contains(inkDrop)) {
element.removeChild(inkDrop);
}
}, 1500);
}
// 保存诗歌
function savePoem() {
const poem = {
id: Date.now(),
lines: poemLines.map(line => line.textContent),
theme: poemData.theme,
timestamp: new Date().toLocaleString()
};
// 添加到已保存诗歌数组
poemData.savedPoems.push(poem);
// 更新已保存诗歌列表
renderSavedPoems();
// 显示保存成功提示
showNotification('诗歌已保存');
}
// 分享诗歌
function sharePoem() {
// 创建分享内容
const poemText = poemLines.map(line => line.textContent).join('\n') +
`\n\n—— 李白式·醉笔 (${poemData.theme})` +
`\n\n#李白式醉话体 #三行诗 #AI创作`;
// 复制到剪贴板
navigator.clipboard.writeText(poemText).then(() => {
showNotification('诗歌已复制到剪贴板');
}).catch(err => {
console.error('复制失败:', err);
showNotification('复制失败，请手动复制', 'error');
});
}})
</script>
</body>
</html>
</html>
index.html
index.html