<!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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#F97316',
neutral: '#F3F4F6',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.rotate-hover {
transition: transform 0.5s ease;
}
.rotate-hover:hover {
transform: rotate(360deg);
}
.scale-hover {
transition: transform 0.3s ease;
}
.scale-hover:hover {
transform: scale(1.05);
}
.grid-masonry {
grid-template-rows: masonry;
}
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
<!-- 导航栏 -->
<nav id="navbar" class="fixed w-full bg-white/90 backdrop-blur-sm z-50 transition-all duration-300 shadow-sm">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-primary">
<img src="https://img.vinua.cn/images/681c00c8c4498.jpeg" alt="哈利头像" class="w-full h-full object-cover">
</div>
<h1 class="text-xl font-bold text-primary">哈利的小窝</h1>
</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="text-gray-700 hover:text-primary transition-colors font-medium">首页</a>
<a href="#about" class="text-gray-700 hover:text-primary transition-colors font-medium">关于哈利</a>
<a href="#gallery" class="text-gray-700 hover:text-primary transition-colors font-medium">照片墙</a>
<a href="#videos" class="text-gray-700 hover:text-primary transition-colors font-medium">视频集</a>
<a href="#stories" class="text-gray-700 hover:text-primary transition-colors font-medium">生活趣事</a>
<a href="#contact" class="text-gray-700 hover:text-primary transition-colors font-medium">联系我们</a>
</div>
<div class="md:hidden">
<button id="menu-toggle" class="text-gray-700 focus:outline-none">
<i class="fa-solid fa-bars text-xl"></i>
</button>
</div>
</div>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100 shadow-lg">
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
<a href="#home" class="text-gray-700 hover:text-primary transition-colors py-2 font-medium">首页</a>
<a href="#about" class="text-gray-700 hover:text-primary transition-colors py-2 font-medium">关于哈利</a>
<a href="#gallery" class="text-gray-700 hover:text-primary transition-colors py-2 font-medium">照片墙</a>
<a href="#videos" class="text-gray-700 hover:text-primary transition-colors py-2 font-medium">视频集</a>
<a href="#stories" class="text-gray-700 hover:text-primary transition-colors py-2 font-medium">生活趣事</a>
<a href="#contact" class="text-gray-700 hover:text-primary transition-colors py-2 font-medium">联系我们</a>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-blue-50 to-indigo-50">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center justify-between gap-8">
<div class="md:w-1/2 text-center md:text-left">
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-800 leading-tight mb-4">
你好，我是<span class="text-primary">哈利</span>
</h1>
<p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 mb-8">
一只爱睡觉的小狗儿，每天的生活就是吃了睡，睡了吃，偶尔卖卖萌。
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
<a href="#about" class="px-6 py-3 bg-primary text-white rounded-lg shadow-lg hover:shadow-xl transition-all hover:bg-primary/90 flex items-center justify-center">
<i class="fa-solid fa-paw mr-2"></i>了解更多
</a>
<a href="#gallery" class="px-6 py-3 bg-white text-primary border border-primary rounded-lg shadow-md hover:shadow-lg transition-all hover:bg-gray-50 flex items-center justify-center">
<i class="fa-solid fa-images mr-2"></i>查看照片
</a>
</div>
</div>
<div class="md:w-1/2 text-center">
<a href="https://www.douyin.com/user/MS4wLjABAAAAof5K8DTdMAsnFb8W3rK-98JaVErwxga8eXNy5ll8HINrXHql7H2VJhk2Q3rFqXSC" target="_blank" rel="noopener noreferrer">
<div class="w-64 h-64 md:w-80 md:h-80 mx-auto rounded-full overflow-hidden border-8 border-white shadow-2xl rotate-hover">
<img src="https://img.vinua.cn/images/681c00c8c4498.jpeg" alt="哈利头像" class="w-full h-full object-cover">
</div>
</a>
</div>
</div>
</div>
</section>
<!-- 关于哈利 -->
<section id="about" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">关于哈利</h2>
<div class="w-20 h-1 bg-primary mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div class="rounded-xl overflow-hidden shadow-lg scale-hover">
<img src="https://img.vinua.cn/images/681c0256238a0.jpg" alt="哈利的照片" class="w-full h-auto">
</div>
<div>
<h3 class="text-2xl font-bold text-gray-800 mb-4">大家好，我是哈利！</h3>
<p class="text-gray-600 mb-6">
我是一只可爱的小狗，出生于2023年春天。我有一身柔软的毛发和一双水汪汪的大眼睛，最喜欢的事情就是睡觉和玩耍。
</p>
<p class="text-gray-600 mb-6">
每天早晨，我都会在主人的床边等待他醒来，然后一起去公园散步。我特别喜欢追逐蝴蝶和和其他小狗交朋友。
</p>
<p class="text-gray-600 mb-8">
回到家后，我会找一个阳光充足的地方睡个午觉，这是我一天中最享受的时光。有时候我也会调皮捣蛋，比如咬坏主人的拖鞋，但他从来不会真的生气。
</p>
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-bold text-primary mb-2">品种</h4>
<p>金毛寻回犬</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-bold text-primary mb-2">年龄</h4>
<p>2岁</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-bold text-primary mb-2">体重</h4>
<p>25公斤</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-bold text-primary mb-2">爱好</h4>
<p>睡觉、散步、玩球</p>
</div>
</div>
<a href="about.html" class="inline-flex items-center text-primary font-medium hover:underline">
了解更多关于我的故事 <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</section>
<!-- 照片墙 -->
<section id="gallery" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">哈利的照片墙</h2>
<p class="text-gray-600 max-w-2xl mx-auto">收集了哈利日常生活中的精彩瞬间，每次刷新都会随机展示哦！</p>
<div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" id="photo-gallery">
<!-- 照片将通过JavaScript随机排序后插入 -->
</div>
<div class="text-center mt-10">
<a href="gallery.html" class="px-6 py-3 bg-primary text-white rounded-lg shadow-md hover:shadow-lg transition-all hover:bg-primary/90 inline-flex items-center">
<i class="fa-solid fa-images mr-2"></i>查看更多照片
</a>
</div>
</div>
</section>
<!-- 视频集 -->
<section id="videos" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">哈利的视频集</h2>
<p class="text-gray-600 max-w-2xl mx-auto">记录哈利日常生活中的可爱瞬间和有趣故事</p>
<div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="video-gallery">
<!-- 视频将通过JavaScript随机排序后插入 -->
</div>
<div class="text-center mt-10">
<a href="videos.html" class="px-6 py-3 bg-primary text-white rounded-lg shadow-md hover:shadow-lg transition-all hover:bg-primary/90 inline-flex items-center">
<i class="fa-solid fa-film mr-2"></i>查看更多视频
</a>
</div>
</div>
</section>
<!-- 生活趣事 -->
<section id="stories" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">哈利的生活趣事</h2>
<p class="text-gray-600 max-w-2xl mx-auto">哈利日常生活中的点点滴滴，都是我们最珍贵的回忆</p>
<div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all scale-hover">
<div class="h-48 overflow-hidden">
<img src="https://img.vinua.cn/images/681c0255bebbc.jpg" alt="哈利的趣事" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">哈利的第一次旅行</h3>
<p class="text-gray-600 mb-4">今天带哈利去了海边，这是他第一次看到大海。他兴奋地在沙滩上跑来跑去，还追着海浪玩...</p>
<a href="story1.html" class="text-primary font-medium hover:underline inline-flex items-center">
阅读全文 <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all scale-hover">
<div class="h-48 overflow-hidden">
<img src="https://img.vinua.cn/images/681c02557d22f.jpg" alt="哈利的趣事" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">哈利的生日派对</h3>
<p class="text-gray-600 mb-4">今天是哈利的生日，我们为他举办了一个小型派对。他收到了很多礼物，最喜欢的是一个毛绒玩具...</p>
<a href="story2.html" class="text-primary font-medium hover:underline inline-flex items-center">
阅读全文 <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all scale-hover">
<div class="h-48 overflow-hidden">
<img src="https://img.vinua.cn/images/681c0254c631d.jpg" alt="哈利的趣事" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">哈利学技能</h3>
<p class="text-gray-600 mb-4">最近在教哈利一些新技能，他学得很快，已经会坐、握手和躺下了。每次完成一个指令...</p>
<a href="story3.html" class="text-primary font-medium hover:underline inline-flex items-center">
阅读全文 <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="stories.html" class="px-6 py-3 bg-primary text-white rounded-lg shadow-md hover:shadow-lg transition-all hover:bg-primary/90 inline-flex items-center">
<i class="fa-solid fa-book mr-2"></i>查看更多趣事
</a>
</div>
</div>
</section>
<!-- 联系我们 -->
<section id="contact" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">联系我们</h2>
<p class="text-gray-600 max-w-2xl mx-auto">如果你想了解更多关于哈利的信息，或者想和我们交流养宠经验，欢迎随时联系我们</p>
<div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="bg-gray-50 p-8 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-gray-800 mb-6">给我们留言</h3>
<form id="contact-form" class="space-y-6">
<div>
<label for="name" class="block text-gray-700 font-medium mb-2">你的名字</label>
<input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring focus:ring-primary/30 transition-all" placeholder="请输入你的名字" required>
</div>
<div>
<label for="email" class="block text-gray-700 font-medium mb-2">电子邮箱</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring focus:ring-primary/30 transition-all" placeholder="请输入你的电子邮箱" required>
</div>
<div>
<label for="message" class="block text-gray-700 font-medium mb-2">留言内容</label>
<textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring focus:ring-primary/30 transition-all" placeholder="请输入你想对我们说的话" required></textarea>
</div>
<button type="submit" class="w-full px-6 py-3 bg-primary text-white rounded-lg shadow-md hover:shadow-lg transition-all hover:bg-primary/90 flex items-center justify-center">
<i class="fa-solid fa-paper-plane mr-2"></i>发送留言
</button>
</form>
</div>
<div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md mb-8">
<h3 class="text-xl font-bold text-gray-800 mb-6">联系方式</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
<i class="fa-solid fa-envelope"></i>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">电子邮箱</h4>
<p class="text-gray-600">harry@example.com</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
<i class="fa-solid fa-phone"></i>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">电话</h4>
<p class="text-gray-600">+86 123 4567 8901</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
<i class="fa-solid fa-map-marker-alt"></i>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">地址</h4>
<p class="text-gray-600">北京市朝阳区幸福路123号哈利之家</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-gray-800 mb-6">关注我们</h3>
<div class="flex space-x-4">
<a href="#" class="w-12 h-12 rounded-full bg-[#1DA1F2]/10 flex items-center justify-center text-[#1DA1F2] hover:bg-[#1DA1F2]/20 transition-colors">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" class="w-12 h-12 rounded-full bg-[#4267B2]/10 flex items-center justify-center text-[#4267B2] hover:bg-[#4267B2]/20 transition-colors">
<i class="fa-brands fa-facebook"></i>
</a>
<a href="https://www.douyin.com/user/MS4wLjABAAAAof5K8DTdMAsnFb8W3rK-98JaVErwxga8eXNy5ll8HINrXHql7H2VJhk2Q3rFqXSC" target="_blank" rel="noopener noreferrer" class="w-12 h-12 rounded-full bg-[#FE2C55]/10 flex items-center justify-center text-[#FE2C55] hover:bg-[#FE2C55]/20 transition-colors">
<i class="fa-brands fa-tiktok"></i>
</a>
<a href="#" class="w-12 h-12 rounded-full bg-[#E1306C]/10 flex items-center justify-center text-[#E1306C] hover:bg-[#E1306C]/20 transition-colors">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">哈利的小窝</h3>
<p class="text-gray-400 mb-4">记录一只爱睡觉的小狗的日常生活</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa-brands fa-facebook"></i>
</a>
<a href="https://www.douyin.com/user/MS4wLjABAAAAof5K8DTdMAsnFb8W3rK-98JaVErwxga8eXNy5ll8HINrXHql7H2VJhk2Q3rFqXSC" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors">
<i class="fa-brands fa-tiktok"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-4">快速链接</h3>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于哈利</a></li>
<li><a href="#gallery" class="text-gray-400 hover:text-white transition-colors">照片墙</a></li>
<li><a href="#videos" class="text-gray-400 hover:text-white transition-colors">视频集</a></li>
<li><a href="#stories" class="text-gray-400 hover:text-white transition-colors">生活趣事</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">联系方式</h3>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fa-solid fa-envelope mr-2 text-gray-400"></i>
<a href="mailto:harry@example.com" class="text-gray-400 hover:text-white transition-colors">harry@example.com</a>
</li>
<li class="flex items-center">
<i class="fa-solid fa-phone mr-2 text-gray-400"></i>
<a href="tel:+8612345678901" class="text-gray-400 hover:text-white transition-colors">+86 123 4567 8901</a>
</li>
<li class="flex items-center">
<i class="fa-solid fa-map-marker-alt mr-2 text-gray-400"></i>
<span class="text-gray-400">北京市朝阳区幸福路123号哈利之家</span>
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">订阅更新</h3>
<p class="text-gray-400 mb-4">订阅我们的邮件，获取哈利的最新动态</p>
<form class="flex">
<input type="email" placeholder="输入你的邮箱" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-800">
<button type="submit" class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-r-lg transition-colors">
<i class="fa-solid fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-gray-700 mt-10 pt-6 text-center text-gray-400">
<p id="copyright-year">2025年 哈利官网 宋佳乐博客技术支持</p>
</div>
</div>
</footer>
<!-- 图片放大器模态框 -->
<div id="image-modal" class="fixed inset-0 bg-black/80 z-50 hidden flex items-center justify-center">
<button id="close-modal" class="absolute top-6 right-6 text-white text-3xl hover:text-gray-300 transition-colors">
<i class="fa-solid fa-times"></i>
</button>
<div class="container mx-auto px-4 text-center">
<img id="modal-image" src="" alt="放大的图片" class="max-h-[80vh] mx-auto">
<p id="modal-caption" class="text-white mt-4"></p>
</div>
</div>
<!-- 视频模态框 -->
<div id="video-modal" class="fixed inset-0 bg-black/80 z-50 hidden flex items-center justify-center">
<button id="close-video-modal" class="absolute top-6 right-6 text-white text-3xl hover:text-gray-300 transition-colors">
<i class="fa-solid fa-times"></i>
</button>
<div class="container mx-auto px-4 max-w-4xl">
<div class="aspect-video bg-black">
<iframe id="video-frame" width="100%" height="100%" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p id="video-caption" class="text-white mt-4"></p>
</div>
</div>
<!-- 成功消息模态框 -->
<div id="success-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
<div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 shadow-2xl transform transition-all">
<div class="text-center">
<div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
<i class="fa-solid fa-check text-green-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">留言发送成功！</h3>
<p class="text-gray-600 mb-6">感谢你的留言，我们会尽快回复你。</p>
<button id="close-success-modal" class="px-6 py-3 bg-primary text-white rounded-lg shadow-md hover:shadow-lg transition-all hover:bg-primary/90">
确定
</button>
</div>
</div>
</div>
<script>
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 100) {
navbar.classList.add('py-2', 'shadow-md');
navbar.classList.remove('py-3', 'shadow-sm');
} else {
navbar.classList.add('py-3', 'shadow-sm');
navbar.classList.remove('py-2', 'shadow-md');
}
});
// 移动端菜单切换
document.getElementById('menu-toggle').addEventListener('click', function() {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// 关闭移动菜单
document.getElementById('mobile-menu').classList.add('hidden');
}
});
});
// 照片墙随机展示
const photoGallery = document.getElementById('photo-gallery');
const photoUrls = [
'https://img.vinua.cn/images/681c02579e96e.jpg',
'https://img.vinua.cn/images/681c0256238a0.jpg',
'https://img.vinua.cn/images/681c0255bebbc.jpg',
'https://img.vinua.cn/images/681c02556efcf.jpg',
'https://img.vinua.cn/images/681c02557d22f.jpg',
'https://img.vinua.cn/images/681c0254c631d.jpg'
];
// 随机排序照片
const shuffledPhotos = [...photoUrls].sort(() => Math.random() - 0.5);
// 插入照片
shuffledPhotos.forEach((url, index) => {
const photoCard = document.createElement('div');
photoCard.className = 'bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all scale-hover cursor-pointer';
photoCard.innerHTML = `
<div class="h-60 overflow-hidden">
<img src="${url}" alt="哈利照片 ${index + 1}" class="w-full h-full object-cover">
</div>
<div class="p-4">
<h3 class="font-bold text-gray-800">哈利的日常 ${index + 1}</h3>
<p class="text-gray-600 text-sm">点击查看大图</p>
</div>
`;
// 添加点击事件
photoCard.addEventListener('click', () => {
openImageModal(url, `哈利的日常 ${index + 1}`);
});
photoGallery.appendChild(photoCard);
});
// 视频集随机展示
const videoGallery = document.getElementById('video-gallery');
const videoData = [
{
url: 'https://www.douyin.com/video/7501357841001876794',
title: '哈利的第一次游泳',
description: '哈利第一次接触水，既紧张又兴奋，看看他是如何适应的吧！',
thumbnail: 'https://picsum.photos/seed/video1/400/225'
},
{
url: 'https://www.douyin.com/video/7491998744305552698',
title: '哈利的生日派对',
description: '哈利两岁啦！我们为他举办了一个小型派对，他收到了很多礼物。',
thumbnail: 'https://picsum.photos/seed/video2/400/225'
},
{
url: 'https://www.douyin.com/video/7500181711356644665',
title: '哈利学技能',
description: '哈利最近在学习新技能，看看他是如何学会坐、握手和躺下的。',
thumbnail: 'https://picsum.photos/seed/video3/400/225'
},
{
url: 'https://www.douyin.com/video/7472770502608637243',
title: '哈利的美食时间',
description: '哈利是个小吃货，看看他面对美食时的可爱表情。',
thumbnail: 'https://picsum.photos/seed/video4/400/225'
},
{
url: 'https://www.douyin.com/video/7467968978384735548',
title: '哈利的玩具世界',
description: '哈利有很多玩具，他最喜欢哪一个呢？',
thumbnail: 'https://picsum.photos/seed/video5/400/225'
},
{
url: 'https://www.douyin.com/video/7454599426531740988',
title: '哈利的早晨',
description: '哈利的一天是如何开始的？早起散步，享受阳光。',
thumbnail: 'https://picsum.photos/seed/video6/400/225'
}
];
// 随机排序视频
const shuffledVideos = [...videoData].sort(() => Math.random() - 0.5);
// 插入视频
shuffledVideos.forEach((video, index) => {
const videoCard = document.createElement('div');
videoCard.className = 'bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all scale-hover cursor-pointer';
// 从抖音URL中提取视频ID
const videoIdMatch = video.url.match(/video\/(\d+)/);
const videoId = videoIdMatch ? videoIdMatch[1] : '';
// 构建抖音嵌入URL
const embedUrl = `https://www.douyin.com/embed/video/${videoId}`;
videoCard.innerHTML = `
<div class="relative h-48 overflow-hidden">
<img src="${video.thumbnail}" alt="${video.title}" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black/30 flex items-center justify-center">
<div class="w-16 h-16 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center">
<i class="fa-solid fa-play text-white text-2xl"></i>
</div>
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-gray-800">${video.title}</h3>
<p class="text-gray-600 text-sm">${video.description}</p>
</div>
`;
// 添加点击事件
videoCard.addEventListener('click', () => {
openVideoModal(embedUrl, video.title);
});
videoGallery.appendChild(videoCard);
});
// 图片放大器功能
const imageModal = document.getElementById('image-modal');
const modalImage = document.getElementById('modal-image');
const modalCaption = document.getElementById('modal-caption');
const closeModal = document.getElementById('close-modal');
function openImageModal(imageUrl, caption) {
modalImage.src = imageUrl;
modalCaption.textContent = caption;
imageModal.classList.remove('hidden');
imageModal.classList.add('flex');
document.body.style.overflow = 'hidden';
}
closeModal.addEventListener('click', () => {
imageModal.classList.add('hidden');
imageModal.classList.remove('flex');
document.body.style.overflow = '';
});
// 点击模态框背景关闭
imageModal.addEventListener('click', (e) => {
if (e.target === imageModal) {
imageModal.classList.add('hidden');
imageModal.classList.remove('flex');
document.body.style.overflow = '';
}
});
// 视频模态框功能
const videoModal = document.getElementById('video-modal');
const videoFrame = document.getElementById('video-frame');
const videoCaption = document.getElementById('video-caption');
const closeVideoModal = document.getElementById('close-video-modal');
function openVideoModal(videoUrl, caption) {
videoFrame.src = videoUrl;
videoCaption.textContent = caption;
videoModal.classList.remove('hidden');
videoModal.classList.add('flex');
document.body.style.overflow = 'hidden';
}
closeVideoModal.addEventListener('click', () => {
videoFrame.src = ''; // 清空src以停止视频播放
videoModal.classList.add('hidden');
videoModal.classList.remove('flex');
document.body.style.overflow = '';
});
// 点击模态框背景关闭
videoModal.addEventListener('click', (e) => {
if (e.target === videoModal) {
videoFrame.src = ''; // 清空src以停止视频播放
videoModal.classList.add('hidden');
videoModal.classList.remove('flex');
document.body.style.overflow = '';
}
});
// 表单提交功能
const contactForm = document.getElementById('contact-form');
const successModal = document.getElementById('success-modal');
const closeSuccessModal = document.getElementById('close-success-modal');
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// 模拟表单提交
setTimeout(() => {
contactForm.reset();
successModal.classList.remove('hidden');
successModal.classList.add('flex');
}, 500);
});
closeSuccessModal.addEventListener('click', () => {
successModal.classList.add('hidden');
successModal.classList.remove('flex');
});
// 点击模态框背景关闭
successModal.addEventListener('click', (e) => {
if (e.target === successModal) {
successModal.classList.add('hidden');
successModal.classList.remove('flex');
}
});
// 设置当前年份
document.addEventListener('DOMContentLoaded', function() {
const currentYear = new Date().getFullYear();
document.getElementById('copyright-year').textContent = `${currentYear}年 哈利官网 宋佳乐博客技术支持`;
});
</script>
</body>
</html>
亲，沙发正空着，还不快来抢？
我要评论 / 展开表单