InfStarMC/infstarweb
1
0
Fork 0
mirror of https://github.com/Coldsmiles/infstarweb.git synced 2026-04-23 02:30:41 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
99bf3f05c6d1a59060786725dda8e01bde80a1c9
infstarweb/pigwei.html
zhangyuheng ba7137a64e init
2026-02-10 13:01:46 +08:00

718 lines
28 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>薇薇变小猪倒计时</title>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Nunito:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #fff9f0;
--card-bg: #ffffff;
--primary-text: #5d4037;
--secondary-text: #8d6e63;
--accent-pink: #ffc4d6;
--accent-cream: #ffe4b5;
--accent-blue: #e0f7fa;
--shadow-soft: 0 10px 30px rgba(255, 196, 214, 0.3);
--shadow-inset: inset 2px 2px 5px rgba(209, 169, 169, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Nunito', 'ZCOOL KuaiLe', sans-serif;
background-color: var(--bg-color);
background-image:
radial-gradient(circle at 10% 20%, rgba(255, 196, 214, 0.2) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(255, 228, 181, 0.3) 0%, transparent 20%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: var(--primary-text);
overflow: hidden;
}
.container {
position: relative;
background: var(--card-bg);
padding: 3rem 2rem;
border-radius: 30px;
box-shadow: var(--shadow-soft);
text-align: center;
max-width: 600px;
width: 90%;
border: 4px solid #fff;
animation: float 6s ease-in-out infinite;
}
h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
color: var(--primary-text);
text-shadow: 2px 2px 0px var(--accent-pink);
letter-spacing: 2px;
}
.subtitle {
font-size: 1.1rem;
color: var(--secondary-text);
margin-bottom: 2.5rem;
background: var(--accent-cream);
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: bold;
}
.countdown-wrapper {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.time-box {
background: linear-gradient(145deg, #fff0f5, #ffffff);
width: 90px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 20px;
box-shadow: 5px 5px 15px #f0dada, -5px -5px 15px #ffffff;
position: relative;
transition: transform 0.3s ease;
}
.time-box:hover {
transform: translateY(-5px);
}
.number {
font-size: 2.5rem;
font-weight: 700;
color: #ff8fa3;
line-height: 1;
}
.label {
font-size: 0.9rem;
color: var(--secondary-text);
margin-top: 5px;
}
.progress-container {
margin-top: 2rem;
width: 100%;
background-color: #fff0f0;
border-radius: 15px;
height: 20px;
position: relative;
overflow: hidden;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--accent-pink), #ff9eb5);
width: 0%;
border-radius: 15px;
transition: width 1s ease-in-out;
position: relative;
}
/* Pig Decoration */
.pig-mascot {
width: 120px;
height: 120px;
margin: -60px auto 10px;
position: relative;
z-index: 10;
}
.pig-svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 5px 10px rgba(255, 150, 170, 0.3));
animation: wiggle 3s ease-in-out infinite;
}
.footer-text {
margin-top: 2rem;
font-size: 0.9rem;
color: #bcaaa4;
}
/* Floating shapes background */
.shape {
position: absolute;
opacity: 0.3;
z-index: -1;
animation: floatBackground 10s infinite linear;
}
.shape-1 { top: 10%; left: 5%; font-size: 6rem; animation-duration: 15s; }
.shape-2 { bottom: 15%; right: 10%; font-size: 4rem; animation-duration: 20s; animation-delay: -5s; }
.shape-3 { top: 40%; right: 5%; font-size: 8rem; animation-duration: 12s; animation-delay: -2s; }
.shape-4 { bottom: 5%; left: 15%; font-size: 5.5rem; animation-duration: 18s; animation-delay: -7s; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}
@keyframes floatBackground {
0% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
100% { transform: translateY(0) rotate(0deg); }
}
@media (max-width: 480px) {
.time-box {
width: 70px;
height: 80px;
}
.number {
font-size: 1.8rem;
}
h1 {
font-size: 1.8rem;
}
}
/* 互动彩蛋样式 */
.speech-bubble {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%) scale(0);
background: #fff;
padding: 8px 15px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
font-size: 0.9rem;
color: var(--primary-text);
white-space: nowrap;
opacity: 0;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
pointer-events: none;
z-index: 20;
font-weight: bold;
border: 2px solid var(--accent-pink);
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-width: 8px 8px 0;
border-style: solid;
border-color: var(--accent-pink) transparent transparent transparent;
}
.speech-bubble.show {
transform: translateX(-50%) scale(1);
opacity: 1;
}
.click-particle {
position: absolute;
pointer-events: none;
animation: particleFloat 0.8s forwards;
font-size: 1.5rem;
z-index: 100;
user-select: none;
}
@keyframes particleFloat {
0% { transform: translateY(0) scale(0.5); opacity: 1; }
50% { transform: translateY(-30px) scale(1.2); opacity: 1; }
100% { transform: translateY(-60px) scale(1); opacity: 0; }
}
</style>
</head>
<body>
<!-- Background Decorations -->
<div class="shape shape-1">🍬</div>
<div class="shape shape-2">🧋</div>
<div class="shape shape-3">💖</div>
<div class="shape shape-4">🧁</div>
<div class="container">
<div class="pig-mascot">
<!-- Simple Cute Pig SVG -->
<svg class="pig-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="45" fill="#FFC4D6"/> <!-- Head -->
<circle cx="30" cy="35" r="5" fill="#5D4037"/> <!-- Left Eye -->
<circle cx="70" cy="35" r="5" fill="#5D4037"/> <!-- Right Eye -->
<!-- Snout -->
<ellipse cx="50" cy="55" rx="18" ry="12" fill="#FF9EB5"/>
<circle cx="44" cy="55" r="3" fill="#FFF"/>
<circle cx="56" cy="55" r="3" fill="#FFF"/>
<!-- Ears -->
<path d="M15 25 Q 5 5 25 15 Z" fill="#FF9EB5"/>
<path d="M85 25 Q 95 5 75 15 Z" fill="#FF9EB5"/>
<!-- Blush -->
<circle cx="20" cy="55" r="5" fill="#FF9EB5" opacity="0.6"/>
<circle cx="80" cy="55" r="5" fill="#FF9EB5" opacity="0.6"/>
</svg>
<div class="speech-bubble" id="speech-bubble">哼哼~</div>
</div>
<h1>薇薇变小猪倒计时</h1>
<div class="subtitle">距离变小猪还有...</div>
<div class="countdown-wrapper">
<div class="time-box">
<span class="number" id="days">00</span>
<span class="label">Days</span>
</div>
<div class="time-box">
<span class="number" id="hours">00</span>
<span class="label">Hours</span>
</div>
<div class="time-box">
<span class="number" id="minutes">00</span>
<span class="label">Mins</span>
</div>
<div class="time-box">
<span class="number" id="seconds">00</span>
<span class="label">Secs</span>
</div>
</div>
<div style="text-align: left; margin-bottom: 5px; padding-left: 5px; color: var(--secondary-text); font-size: 0.9rem; display: flex; justify-content: space-between;">
<span>Loading Happiness...</span>
<span id="percent-text">0.000%</span>
</div>
<div class="progress-container">
<div class="progress-bar" id="progress"></div>
</div>
</div>
<!-- Desktop Pet Pig (Top-Down) -->
<div id="pet-pig" style="position: absolute; left: 50px; top: 50px; width: 70px; height: 70px; z-index: 999; pointer-events: none; transition: transform 0.1s linear;">
<div class="pet-body" style="width: 100%; height: 100%; position: relative;">
<svg viewBox="0 0 100 100" style="width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));">
<!-- Feet (Animated) -->
<ellipse cx="25" cy="40" rx="7" ry="9" fill="#FF9EB5" class="pet-foot fl" />
<ellipse cx="75" cy="40" rx="7" ry="9" fill="#FF9EB5" class="pet-foot fr" />
<ellipse cx="25" cy="75" rx="7" ry="9" fill="#FF9EB5" class="pet-foot bl" />
<ellipse cx="75" cy="75" rx="7" ry="9" fill="#FF9EB5" class="pet-foot br" />
<!-- Tail -->
<path d="M50 82 Q 40 85 45 92 T 55 95" fill="none" stroke="#FF9EB5" stroke-width="4" stroke-linecap="round" />
<!-- Main Body -->
<ellipse cx="50" cy="60" rx="32" ry="34" fill="#FFC4D6" />
<!-- Head -->
<circle cx="50" cy="35" r="26" fill="#FFC4D6" />
<!-- Ears (Now Behind Head) -->
<path d="M 36 54 Q 10 42 24 38 Z" fill="#FF9EB5" stroke="#FF9EB5" stroke-width="2" stroke-linejoin="round"/>
<path d="M 64 54 Q 90 42 76 38 Z" fill="#FF9EB5" stroke="#FF9EB5" stroke-width="2" stroke-linejoin="round"/>
<!-- Snout -->
<ellipse cx="50" cy="20" rx="14" ry="10" fill="#FF9EB5" />
<circle cx="45" cy="18" r="2.5" fill="#FFF" />
<circle cx="55" cy="18" r="2.5" fill="#FFF" />
<!-- Eyes -->
<circle cx="36" cy="34" r="3" fill="#5D4037" class="pet-eye" />
<circle cx="64" cy="34" r="3" fill="#5D4037" class="pet-eye" />
</svg>
<div id="pet-status" style="position: absolute; top: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; background: rgba(255,255,255,0.9); padding: 4px 8px; border-radius: 10px; opacity: 0; transition: opacity 0.3s; pointer-events: none; font-weight: bold; color: #5d4037;">
Zzz...
</div>
</div>
</div>
<!-- Feed Button -->
<button id="feed-btn" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000; background: #FFC4D6; border: none; padding: 10px 15px; border-radius: 20px; font-family: 'ZCOOL KuaiLe', sans-serif; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); font-size: 1rem; color: #5D4037;">
🍬 投喂
</button>
<script>
// Desktop Pet Logic
(function() {
const pet = document.getElementById('pet-pig');
const petBody = pet.querySelector('.pet-body');
const petStatus = document.getElementById('pet-status');
// Feet selectors
const footFL = pet.querySelector('.fl');
const footFR = pet.querySelector('.fr');
const footBL = pet.querySelector('.bl');
const footBR = pet.querySelector('.br');
let petX = 50;
let petY = 50;
let targetX = 50;
let targetY = 50;
let speed = 2.5;
let state = 'idle'; // idle, moving, sleeping, eating
let idleTimer = null;
let lastInteractionStr = Date.now();
let isSleeping = false;
function updatePetPosition() {
pet.style.left = (petX - 35) + 'px'; // Center anchor (70px width)
pet.style.top = (petY - 35) + 'px';
}
updatePetPosition();
function gameLoop() {
const now = Date.now();
if (state === 'moving') {
const dx = targetX - petX;
const dy = targetY - petY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > speed) {
const angle = Math.atan2(dy, dx);
petX += Math.cos(angle) * speed;
petY += Math.sin(angle) * speed;
// Rotate pet (Facing UP is 0 rotation in drawn SVG logic?
// Actually atan2(0,-1) is -PI/2. atan2(1,0) is 0.
// If we want movement direction to be UP (Top of screen), angle is -90deg.
// SVG is drawn facing UP. So -90deg should correspond to 0 rotation.
// So rotation = angle + 90deg.
let rotation = (angle * 180 / Math.PI) + 90;
petBody.style.transform = `rotate(${rotation}deg)`;
// Walk animation (Trot gait)
// FL and BR move together, FR and BL move together
const walkCycle = (now / 150) * Math.PI * 2;
const offset = Math.sin(walkCycle) * 6;
footFL.setAttribute('cy', 40 + offset);
footBR.setAttribute('cy', 75 + offset);
footFR.setAttribute('cy', 40 - offset);
footBL.setAttribute('cy', 75 - offset);
lastInteractionStr = now;
isSleeping = false;
petStatus.style.opacity = 0;
} else {
// Arrived at destination
if (window.currentFood) {
// Start eating
state = 'eating';
petStatus.innerText = "Yum!";
petStatus.style.opacity = 1;
resetFeet();
// Remove the food element
const food = window.currentFood;
window.currentFood = null;
// Eat effect
food.style.transition = 'all 0.3s';
food.style.transform = 'scale(0.5)';
food.style.opacity = 0;
setTimeout(() => food.remove(), 300);
// Wiggle effect for Eating
let startTime = Date.now();
// Capture the current rotation from the transform style
// Format is usually "rotate(Xdeg)" or similar
let currentTransform = petBody.style.transform || "";
let rotationPart = "";
if (currentTransform.includes("rotate")) {
rotationPart = currentTransform.match(/rotate\([^)]+\)/)[0];
} else {
rotationPart = "rotate(0deg)";
}
const eatAnim = setInterval(() => {
if (Date.now() - startTime > 2000) {
clearInterval(eatAnim);
state = 'idle';
petStatus.style.opacity = 0;
lastInteractionStr = Date.now();
// Reset scale but keep rotation logic for next move
petBody.style.transform = rotationPart;
}
// Combine rotation with scale wiggle
petBody.style.transform = `${rotationPart} scale(${1 + Math.sin(Date.now()/50)*0.1})`;
}, 16);
} else {
state = 'idle';
resetFeet();
}
}
} else if (state === 'idle') {
if (now - lastInteractionStr > 10000 && !isSleeping) { // 10s idle to sleep
startSleep();
}
if (!isSleeping && Math.random() < 0.008) {
wander();
}
}
updatePetPosition();
requestAnimationFrame(gameLoop);
}
function resetFeet() {
footFL.setAttribute('cy', 40);
footFR.setAttribute('cy', 40);
footBL.setAttribute('cy', 75);
footBR.setAttribute('cy', 75);
}
function startSleep() {
isSleeping = true;
state = 'sleeping';
petStatus.innerText = "Zzz...";
petStatus.style.opacity = 1;
// Sleep eyes
pet.querySelectorAll('.pet-eye').forEach(eye => {
eye.style.transformOrigin = 'center';
eye.style.transform = 'scaleY(0.1)';
});
}
function wakeUp() {
if (!isSleeping) return;
isSleeping = false;
state = 'idle';
lastInteractionStr = Date.now();
petStatus.style.opacity = 0;
pet.querySelectorAll('.pet-eye').forEach(eye => {
eye.style.transform = 'scaleY(1)';
});
}
function wander() {
const margin = 50;
const maxX = window.innerWidth - margin;
const maxY = window.innerHeight - margin;
targetX = margin + Math.random() * (maxX - margin * 2);
targetY = margin + Math.random() * (maxY - margin * 2);
state = 'moving';
}
window.movePetTo = function(x, y) {
if (state === 'eating') return;
wakeUp();
targetX = x;
targetY = y;
state = 'moving';
};
const feedBtn = document.getElementById('feed-btn');
feedBtn.addEventListener('click', (e) => {
e.stopPropagation();
// Prevent multiple feeds
if (window.currentFood || state === 'eating') return;
if(isSleeping) wakeUp();
// Random position for food
const margin = 50;
const maxX = window.innerWidth - margin;
const maxY = window.innerHeight - margin;
const foodX = margin + Math.random() * (maxX - margin * 2);
const foodY = margin + Math.random() * (maxY - margin * 2);
// Move pet to food
targetX = foodX;
targetY = foodY;
state = 'moving';
// Spawn food visual at target location
const food = document.createElement('div');
food.innerText = ['🍬','🍭','🍫'][Math.floor(Math.random()*3)];
food.style.position = 'absolute';
food.style.left = foodX + 'px';
food.style.top = foodY + 'px';
food.style.fontSize = '25px';
food.style.zIndex = 998; // Below pet so pet appears to cover it when eating
food.style.pointerEvents = 'none';
food.className = 'pet-food';
document.body.appendChild(food);
// Check distance to food in game loop to trigger eating
// We need a way to know we are moving to food.
// Let's attach the food element to the state or a variable
window.currentFood = food;
});
requestAnimationFrame(gameLoop);
})();
// Original script continues...
function updateCountdown() {
const targetDate = new Date('October 5, 2026 00:00:00').getTime();
const now = new Date().getTime();
const gap = targetDate - now;
if (gap < 0) {
// If the date has passed
document.getElementById('days').innerText = "00";
document.getElementById('hours').innerText = "00";
document.getElementById('minutes').innerText = "00";
document.getElementById('seconds').innerText = "00";
document.querySelector('.footer-text').innerText = "薇薇已经变成小猪啦！🎉";
return;
}
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
const days = Math.floor(gap / day);
const hours = Math.floor((gap % day) / hour);
const minutes = Math.floor((gap % hour) / minute);
const seconds = Math.floor((gap % minute) / second);
document.getElementById('days').innerText = days < 10 ? '0' + days : days;
document.getElementById('hours').innerText = hours < 10 ? '0' + hours : hours;
document.getElementById('minutes').innerText = minutes < 10 ? '0' + minutes : minutes;
document.getElementById('seconds').innerText = seconds < 10 ? '0' + seconds : seconds;
// Calculate progress (Assuming start date is around now roughly for visual effect,
// or we can set a fixed start date like "engagement date".
// Let's set a hypothetical start date to make the bar look nice.
// e.g. Start of 2025 or today)
// For a meaningful progress bar, let's say the "countdown" started 1 year before?
// Or simple visual effect:
// Let's make it a "year progress" or just a visual filler.
// Actually, let's define a start date to calculate percentage completed.
// Let's assume the planning started today (Jan 7, 2026) for context, or earlier.
// Let's pick Jan 1, 2026 as start for the bar.
const startDate = new Date('January 1, 2026 00:00:00').getTime();
const totalDuration = targetDate - startDate;
const timeElapsed = now - startDate;
let percentage = (timeElapsed / totalDuration) * 100;
// Update text
let textPercent = percentage;
if (textPercent < 0) textPercent = 0;
if (textPercent > 100) textPercent = 100;
document.getElementById('percent-text').innerText = textPercent.toFixed(5) + '%';
// Clamp percentage between 0 and 100
if (percentage < 0) percentage = 5; // Minimal fill
if (percentage > 100) percentage = 100;
document.getElementById('progress').style.width = percentage + '%';
}
setInterval(updateCountdown, 1000);
updateCountdown(); // Initial call
// 互动功能：点击屏幕爆出可爱元素
document.addEventListener('click', function(e) {
// 定义一组可爱的 emoji
const emojis = ['❤️', '📱', '💻', '✨', '🌸', '💍', '🎀', '🔑'];
const particle = document.createElement('div');
particle.className = 'click-particle';
particle.innerText = emojis[Math.floor(Math.random() * emojis.length)];
// 设置位置
particle.style.left = e.pageX + 'px';
particle.style.top = e.pageY + 'px';
// 随机旋转一点角度
const rotate = (Math.random() - 0.5) * 60;
particle.style.transform = `rotate(${rotate}deg)`;
document.body.appendChild(particle);
// 动画结束后移除元素
setTimeout(() => {
particle.remove();
}, 800);
// 如果存在桌宠，则触发移动
if (window.movePetTo) {
window.movePetTo(e.pageX, e.pageY);
}
});
// 互动功能：戳戳小猪
const pig = document.querySelector('.pig-mascot');
const bubble = document.getElementById('speech-bubble');
const pigSvg = document.querySelector('.pig-svg');
const messages = [
"薇薇要喝奶茶 🧋！",
"薇薇今天也很可爱！",
"哼哼~ 给我火锅吃！",
"要一直幸福哦！",
"本猪猪在监督倒计时！",
"❤️ 爱你哟 ❤️",
"不要戳我啦！痒~"
];
let isTalking = false;
pig.addEventListener('click', function(e) {
e.stopPropagation(); // 防止触发背景点击特效
if (isTalking) return;
isTalking = true;
// 随机显示一句话
const msg = messages[Math.floor(Math.random() * messages.length)];
bubble.innerText = msg;
bubble.classList.add('show');
// 加速摇摆
const originalAnimation = getComputedStyle(pigSvg).animation;
pigSvg.style.animation = 'wiggle 0.2s ease-in-out infinite';
// 2秒后恢复
setTimeout(() => {
bubble.classList.remove('show');
pigSvg.style.animation = ''; // 恢复 CSS 中定义的动画
isTalking = false;
}, 2000);
// 同时在小猪头顶爆几个爱心
for(let i=0; i<3; i++) {
setTimeout(() => {
const rect = pig.getBoundingClientRect();
const particle = document.createElement('div');
particle.className = 'click-particle';
particle.innerText = '❤️';
particle.style.left = (rect.left + rect.width/2 + (Math.random()-0.5)*50) + 'px';
particle.style.top = (rect.top + rect.height/2 + (Math.random()-0.5)*50) + 'px';
// 修正绝对定位相对于文档的坐标
particle.style.left = (rect.left + window.scrollX + rect.width/2 + (Math.random()-0.5)*50) + 'px';
particle.style.top = (rect.top + window.scrollY + rect.height/2 - 30) + 'px';
document.body.appendChild(particle);
setTimeout(() => particle.remove(), 800);
}, i * 100);
}
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink