import osdef generate_confession_page(name, your_name, output_file="confession.html"):"""生成一个表白 HTML 页面参数:name (str): 你想表白的人的名字your_name (str): 你的名字output_file (str): 输出的 HTML 文件名"""html_content = f"""<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: {{love: {{100: '#ffe6ea',200: '#ffccd5',300: '#ffb3c0',400: '#ff99ab',500: '#ff8096',600: '#ff6681',700: '#ff4d6d',800: '#ff3358',900: '#ff1a43',950: '#e60029',}}}},fontFamily: {{romantic: ['Dancing Script', 'cursive', 'sans-serif'],main: ['Noto Sans SC', 'sans-serif']}},animation: {{'float': 'float 3s ease-in-out infinite','pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite','heartbeat': 'heartbeat 1.5s ease-in-out infinite','fade-in': 'fadeIn 1.5s ease-in forwards','slide-up': 'slideUp 1s ease-out forwards','appear': 'appear 0.5s ease-out forwards',}},keyframes: {{float: {{'0%, 100%': {{ transform: 'translateY(0)' }},'50%': {{ transform: 'translateY(-10px)' }},}},heartbeat: {{'0%, 100%': {{ transform: 'scale(1)' }},'14%': {{ transform: 'scale(1.1)' }},'28%': {{ transform: 'scale(1)' }},'42%': {{ transform: 'scale(1.1)' }},'70%': {{ transform: 'scale(1)' }},}},fadeIn: {{'0%': {{ opacity: '0' }},'100%': {{ opacity: '1' }},}},slideUp: {{'0%': {{ transform: 'translateY(20px)', opacity: '0' }},'100%': {{ transform: 'translateY(0)', opacity: '1' }},}},appear: {{'0%': {{ opacity: '0', transform: 'scale(0.8)' }},'100%': {{ opacity: '1', transform: 'scale(1)' }},}}}}}}}}}}</script><style type="text/tailwindcss">@layer utilities {{.text-shadow {{text-shadow: 0 2px 4px rgba(0,0,0,0.1);}}.text-shadow-lg {{text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);}}.bg-blur {{backdrop-filter: blur(8px);}}.gradient-text {{background-clip: text;-webkit-background-clip: text;color: transparent;}}.perspective {{perspective: 1000px;}}.preserve-3d {{transform-style: preserve-3d;}}.backface-hidden {{backface-visibility: hidden;}}.rotate-y-180 {{transform: rotateY(180deg);}}}}</style><link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet"></head><body class="bg-gradient-to-br from-love-100 to-love-200 min-h-screen overflow-x-hidden"><!-- 背景爱心 --><div class="fixed inset-0 pointer-events-none overflow-hidden"><div id="heartContainer" class="absolute inset-0"></div></div><div class="relative min-h-screen flex flex-col items-center justify-center px-4 py-12"><!-- 标题 --><div class="mb-8 text-center animate-fade-in opacity-0" style="animation-delay: 0.3s"><h1 class="text-[clamp(2.5rem,8vw,5rem)] font-romantic font-bold gradient-text bg-gradient-to-r from-love-700 to-love-900 text-shadow-lg mb-2">亲爱的{name}</h1><p class="text-[clamp(1rem,3vw,1.5rem)] text-love-800 font-main">有一句话，我一直想对你说...</p></div><!-- 主卡片 --><div class="w-full max-w-2xl perspective mb-12"><div id="loveCard" class="relative h-[400px] transition-transform duration-1000 preserve-3d cursor-pointer"><!-- 卡片正面 --><div class="absolute inset-0 bg-white rounded-2xl shadow-2xl p-8 backface-hidden flex flex-col items-center justify-center transform transition-all duration-500 hover:shadow-love-500/30 hover:shadow-xl"><div class="text-center mb-6 animate-float"><i class="fa fa-heart text-[clamp(3rem,10vw,6rem)] text-love-600 animate-heartbeat"></i></div><h2 class="text-[clamp(1.8rem,5vw,3rem)] font-romantic text-love-800 mb-4 animate-slide-up opacity-0" style="animation-delay: 0.6s">打开我</h2><p class="text-[clamp(1rem,3vw,1.2rem)] text-gray-700 max-w-md animate-slide-up opacity-0" style="animation-delay: 0.8s">这里有我想对你说的真心话...</p><div class="mt-8 animate-slide-up opacity-0" style="animation-delay: 1s"><i class="fa fa-hand-o-down text-love-700 text-2xl animate-bounce"></i></div></div><!-- 卡片背面 --><div class="absolute inset-0 bg-gradient-to-br from-love-300 to-love-600 rounded-2xl shadow-2xl p-8 backface-hidden flex flex-col items-center justify-center rotate-y-180"><div class="text-center"><h2 class="text-[clamp(1.8rem,5vw,3rem)] font-romantic text-white mb-6 animate-appear opacity-0" style="animation-delay: 0.3s">我爱你</h2><div class="bg-white/20 backdrop-blur-md rounded-xl p-6 mb-6 animate-appear opacity-0" style="animation-delay: 0.5s"><p class="text-white text-[clamp(1rem,3vw,1.2rem)] leading-relaxed">从见到你的第一眼起，我的心就像被施了魔法一般，不由自主地被你吸引。你的笑容如阳光般温暖，你的眼神如星辰般璀璨，你的存在让我的世界变得更加美好。我想和你一起走过四季，看遍世间美景，分享生活中的每一个喜怒哀乐。我爱你，不仅是因为你的美丽和才华，更是因为你是独一无二的你，是那个让我心动不已的人。希望你能接受我的心意，让我有机会成为你生命中的一部分，永远爱你，珍惜你。</p></div><div class="animate-appear opacity-0" style="animation-delay: 0.7s"><button id="acceptBtn" class="bg-white text-love-800 font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl hover:bg-love-100 transition-all duration-300 transform hover:-translate-y-1"><i class="fa fa-heart mr-2"></i>接受我的爱</button></div></div></div></div></div><!-- 底部装饰 --><div class="text-center animate-fade-in opacity-0" style="animation-delay: 1.2s"><p class="text-love-700 font-main">用我全部的爱 • {your_name}</p><div class="mt-4"><i class="fa fa-heart text-love-700 animate-pulse-slow"></i></div></div></div><!-- 接受爱的弹窗 --><div id="loveModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden"><div class="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full mx-4 transform transition-all duration-500 scale-95 opacity-0" id="modalContent"><div class="text-center"><div class="mb-4"><i class="fa fa-heart text-4xl text-love-800 animate-heartbeat"></i></div><h3 class="text-2xl font-romantic text-love-800 mb-4">我也爱你！</h3><p class="text-gray-700 mb-6">我愿意和你一起走过未来的每一天 ❤️</p><div class="flex justify-center"><button id="closeModal" class="bg-love-700 text-white font-bold py-2 px-6 rounded-full shadow-lg hover:bg-love-800 transition-all"><i class="fa fa-check mr-2"></i>确定</button></div></div></div></div><script>// 创建随机爱心function createHearts() {{const container = document.getElementById('heartContainer');const totalHearts = 20;for (let i = 0; i < totalHearts; i++) {{const heart = document.createElement('div');const size = Math.random() * 30 + 10;const posX = Math.random() * 100;const delay = Math.random() * 5;const duration = Math.random() * 10 + 10;heart.innerHTML = '<i class="fa fa-heart"></i>';heart.className = 'absolute text-love-400';heart.style.cssText = "left: " + posX + "%; bottom: -50px; font-size: " + size + "px; opacity: " + (Math.random() * 0.5 + 0.2) + "; transform: translateY(0); animation: float " + duration + "s ease-in-out " + delay + "s infinite;";container.appendChild(heart);}}}}// 卡片翻转document.getElementById('loveCard').addEventListener('click', function() {{this.classList.toggle('rotate-y-180');}});// 接受按钮document.getElementById('acceptBtn').addEventListener('click', function() {{document.getElementById('loveModal').classList.remove('hidden');setTimeout(() => {{document.getElementById('modalContent').classList.remove('scale-95', 'opacity-0');document.getElementById('modalContent').classList.add('scale-100', 'opacity-100');}}, 10);}});// 关闭弹窗document.getElementById('closeModal').addEventListener('click', function() {{const modalContent = document.getElementById('modalContent');modalContent.classList.remove('scale-100', 'opacity-100');modalContent.classList.add('scale-95', 'opacity-0');setTimeout(() => {{document.getElementById('loveModal').classList.add('hidden');}}, 300);}});// 初始化window.addEventListener('DOMContentLoaded', () => {{createHearts();// 自动触发动画元素显示setTimeout(() => {{const fadeElements = document.querySelectorAll('.animate-fade-in');fadeElements.forEach(el => el.style.opacity = '1');}}, 100);}});</script></body></html>"""try:with open(output_file, 'w', encoding='utf-8') as file:file.write(html_content)print(f"HTML 页面已成功生成到文件: {os.path.abspath(output_file)}")print(f"你可以在浏览器中打开此文件查看效果")except Exception as e:print(f"生成 HTML 页面时出错: {e}")if __name__ == "__main__":# 获取用户输入love_name = input("请输入你想表白的人的名字: ")your_name = input("请输入你的名字: ")# 生成页面generate_confession_page(love_name, your_name)
1. 核心功能模块
代码主要分为两个部分：
- HTML 模板：定义了整个表白页面的结构、样式和交互逻辑
- Python 函数：将用户输入的名字插入模板，并保存为文件
2. 代码详细解析
HTML 模板结构
模板采用了现代前端设计，包含以下关键元素
- 浪漫色彩方案：使用粉色系渐变背景和心形元素
- 交互式卡片：点击可翻转的卡片，正面提示 "打开我"，背面显示表白内容
- 动画效果：包含漂浮的爱心背景、文字淡入、心跳动画等
- 弹窗交互：点击 "接受我的爱" 按钮会弹出确认对话框
