Spaces:
Running
Running
| <html lang="zh"> | |
| <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"> | |
| <style> | |
| .heartbeat { | |
| animation: heartbeat 1.5s ease-in-out infinite; | |
| } | |
| @keyframes heartbeat { | |
| 0% { transform: scale(1); } | |
| 25% { transform: scale(1.1); } | |
| 50% { transform: scale(1); } | |
| 75% { transform: scale(1.1); } | |
| 100% { transform: scale(1); } | |
| } | |
| .float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .message-bubble { | |
| position: relative; | |
| border-radius: 20px; | |
| } | |
| .message-bubble:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| border-width: 10px 10px 0; | |
| border-style: solid; | |
| border-color: #f3f4f6 transparent; | |
| display: block; | |
| width: 0; | |
| transform: translateX(-50%); | |
| } | |
| .fade-in { | |
| animation: fadeIn 2s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-pink-50 to-purple-100 min-h-screen flex flex-col items-center justify-center p-4 overflow-hidden"> | |
| <!-- Floating hearts background --> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <div class="absolute top-1/4 left-1/4 text-red-400 opacity-30 float" style="animation-delay: 0s;"> | |
| <i class="fas fa-heart text-4xl"></i> | |
| </div> | |
| <div class="absolute top-1/3 right-1/4 text-pink-400 opacity-30 float" style="animation-delay: 1s;"> | |
| <i class="fas fa-heart text-3xl"></i> | |
| </div> | |
| <div class="absolute bottom-1/4 left-1/3 text-rose-400 opacity-30 float" style="animation-delay: 2s;"> | |
| <i class="fas fa-heart text-5xl"></i> | |
| </div> | |
| <div class="absolute bottom-1/3 right-1/3 text-purple-400 opacity-30 float" style="animation-delay: 3s;"> | |
| <i class="fas fa-heart text-2xl"></i> | |
| </div> | |
| </div> | |
| <div class="relative z-10 max-w-md w-full space-y-8 fade-in"> | |
| <!-- Main card --> | |
| <div class="bg-white bg-opacity-90 backdrop-blur-sm rounded-3xl shadow-xl overflow-hidden"> | |
| <div class="p-8 text-center"> | |
| <div class="heartbeat inline-block mb-6"> | |
| <div class="w-32 h-32 rounded-full bg-gradient-to-br from-pink-200 to-rose-200 flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-heart text-6xl text-rose-500"></i> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-rose-500 to-purple-600 mb-4"> | |
| 想你 | |
| </h1> | |
| <div class="message-bubble bg-gray-50 p-6 mb-6 inline-block max-w-xs"> | |
| <p class="text-gray-700">每分每秒都在思念你<br>像星星陪伴月亮那样</p> | |
| </div> | |
| <div class="flex justify-center space-x-4"> | |
| <button onclick="sendLove()" class="bg-rose-500 hover:bg-rose-600 text-white font-medium py-3 px-6 rounded-full transition transform hover:scale-105 shadow-lg"> | |
| <i class="fas fa-heart mr-2"></i>发送爱心 | |
| </button> | |
| <button onclick="showMessage()" class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-6 rounded-full transition transform hover:scale-105 shadow-lg"> | |
| <i class="fas fa-comment-dots mr-2"></i>悄悄话 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Love meter --> | |
| <div class="bg-white bg-opacity-90 backdrop-blur-sm rounded-3xl p-6 shadow-xl"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">思念指数</span> | |
| <span id="lovePercent" class="text-sm font-bold text-rose-500">87%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-3"> | |
| <div id="loveMeter" class="h-3 rounded-full bg-gradient-to-r from-pink-400 to-rose-500" style="width: 87%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 text-center">对你的思念与日俱增...</p> | |
| </div> | |
| </div> | |
| <!-- Message modal --> | |
| <div id="messageModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-20"> | |
| <div class="bg-white rounded-2xl p-6 max-w-sm w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modalContent"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-gray-800">我的悄悄话</h3> | |
| <button onclick="hideMessageModal()" class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="bg-pink-50 rounded-xl p-4 mb-4"> | |
| <p class="text-pink-800" id="randomMessage">你是我心中最特别的存在</p> | |
| </div> | |
| <button onclick="newMessage()" class="w-full bg-rose-500 hover:bg-rose-600 text-white font-medium py-2 px-4 rounded-lg transition"> | |
| <i class="fas fa-sync-alt mr-2"></i>换一句 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Hearts container --> | |
| <div id="heartsContainer" class="fixed inset-0 pointer-events-none"></div> | |
| <script> | |
| // Love meter animation | |
| function updateLoveMeter() { | |
| const loveMeter = document.getElementById('loveMeter'); | |
| const lovePercent = document.getElementById('lovePercent'); | |
| const currentWidth = parseInt(loveMeter.style.width) || 87; | |
| const newWidth = Math.min(currentWidth + Math.floor(Math.random() * 5), 100); | |
| loveMeter.style.width = newWidth + '%'; | |
| lovePercent.textContent = newWidth + '%'; | |
| // Change color when reaching certain percentages | |
| if (newWidth > 95) { | |
| loveMeter.className = 'h-3 rounded-full bg-gradient-to-r from-rose-600 to-purple-600'; | |
| } else if (newWidth > 85) { | |
| loveMeter.className = 'h-3 rounded-full bg-gradient-to-r from-rose-500 to-pink-600'; | |
| } else { | |
| loveMeter.className = 'h-3 rounded-full bg-gradient-to-r from-pink-400 to-rose-500'; | |
| } | |
| } | |
| setInterval(updateLoveMeter, 3000); | |
| // Send love function | |
| function sendLove() { | |
| const container = document.getElementById('heartsContainer'); | |
| for (let i = 0; i < 10; i++) { | |
| const heart = document.createElement('div'); | |
| heart.innerHTML = '<i class="fas fa-heart text-rose-500"></i>'; | |
| heart.className = 'absolute text-xl opacity-0 animate-heart'; | |
| // Random position at bottom | |
| const startLeft = Math.random() * 100; | |
| heart.style.left = startLeft + '%'; | |
| heart.style.bottom = '0'; | |
| // Random animation | |
| const duration = 2 + Math.random() * 3; | |
| const endTop = Math.random() * 70; | |
| const endLeft = startLeft + (Math.random() * 20 - 10); | |
| heart.style.animation = ` | |
| fadeInOut 0.5s ease-out forwards, | |
| floatUp ${duration}s ease-in forwards | |
| `; | |
| // Keyframes | |
| const style = document.createElement('style'); | |
| style.innerHTML = ` | |
| @keyframes fadeInOut { | |
| 0% { opacity: 0; transform: scale(0.5); } | |
| 50% { opacity: 1; transform: scale(1); } | |
| 100% { opacity: 0; transform: scale(0.5) translateY(-${endTop}vh) translateX(${endLeft - startLeft}%); } | |
| } | |
| @keyframes floatUp { | |
| to { bottom: ${endTop}vh; left: ${endLeft}%; } | |
| } | |
| `; | |
| container.appendChild(heart); | |
| container.appendChild(style); | |
| // Remove after animation | |
| setTimeout(() => { | |
| heart.remove(); | |
| style.remove(); | |
| }, duration * 1000); | |
| } | |
| // Update love meter | |
| const loveMeter = document.getElementById('loveMeter'); | |
| const currentWidth = parseInt(loveMeter.style.width) || 87; | |
| const newWidth = Math.min(currentWidth + 3, 100); | |
| loveMeter.style.width = newWidth + '%'; | |
| document.getElementById('lovePercent').textContent = newWidth + '%'; | |
| } | |
| // Message modal | |
| const messages = [ | |
| "你是我心中最特别的存在", | |
| "遇见你是最美好的意外", | |
| "你的笑容是我最大的幸福", | |
| "想牵着你的手走过四季", | |
| "你让我的世界变得完整", | |
| "每天最期待听到你的声音", | |
| "你是我生命中最亮的星星", | |
| "思念如马，自别离，未停蹄", | |
| "你一笑，我的世界都亮了", | |
| "想变成风，温柔地环绕你" | |
| ]; | |
| function showMessage() { | |
| const modal = document.getElementById('messageModal'); | |
| const content = document.getElementById('modalContent'); | |
| modal.classList.remove('hidden'); | |
| setTimeout(() => { | |
| content.classList.remove('scale-95', 'opacity-0'); | |
| content.classList.add('scale-100', 'opacity-100'); | |
| }, 10); | |
| // Show random message | |
| document.getElementById('randomMessage').textContent = | |
| messages[Math.floor(Math.random() * messages.length)]; | |
| } | |
| function hideMessageModal() { | |
| const content = document.getElementById('modalContent'); | |
| content.classList.remove('scale-100', 'opacity-100'); | |
| content.classList.add('scale-95', 'opacity-0'); | |
| setTimeout(() => { | |
| document.getElementById('messageModal').classList.add('hidden'); | |
| }, 300); | |
| } | |
| function newMessage() { | |
| document.getElementById('randomMessage').textContent = | |
| messages[Math.floor(Math.random() * messages.length)]; | |
| } | |
| </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=KLj123456789/kt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |