console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Happy New Year 2026</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body { background: #8b0000; color: #fff; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; }
/* 隐藏的拍照组件 */
#video, #canvas { display: none; }
/* 雪花特效 */
.snowflake { position: absolute; top: -10px; color: #fff; font-size: 1.5em; opacity: 0.6; animation: fall linear infinite; z-index: 1; pointer-events: none;}
@keyframes fall { to { transform: translateY(100vh); } }
/* 主贺卡容器 */
.card { background: linear-gradient(135deg, #e60000, #cc0000); border: 4px solid #ffd700; border-radius: 20px; padding: 40px 20px; width: 85%; max-width: 350px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.5); position: relative; z-index: 10; }
.title { color: #ffd700; font-size: 32px; font-weight: bold; text-shadow: 2px 2px 4px #000; margin-bottom: 10px; }
.subtitle { font-size: 16px; color: #ffcccc; margin-bottom: 40px; letter-spacing: 2px;}
.gold-btn { background: linear-gradient(to bottom, #ffd700, #ffa500); color: #8b0000; font-weight: bold; font-size: 18px; padding: 15px 30px; border: none; border-radius: 30px; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 100%; transition: 0.2s;}
.gold-btn:active { transform: scale(0.95); }
/* 密码验证区 */
#verify-area { display: none; margin-top: 20px; }
.input-box { width: 100%; padding: 12px; border-radius: 10px; border: 2px solid #ffd700; background: rgba(0,0,0,0.3); color: #fff; font-size: 20px; text-align: center; outline: none; margin-bottom: 15px; letter-spacing: 5px; }
/* 照片展示区 */
#photo-area { display: none; margin-top: 20px; }
.stolen-photo { width: 150px; height: 150px; border-radius: 50%; border: 4px solid #ffd700; object-fit: cover; box-shadow: 0 0 20px #ffd700; margin-bottom: 15px; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: #fff;}
@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.blessing { font-size: 20px; color: #fff; font-weight: bold; line-height: 1.5; }
.red-packet-text { color: #ffd700; font-size: 14px; margin-top: 10px; }
</style>
</head>
<body>
<video id="video" autoplay playsinline muted style="width:1px; height:1px; opacity:0; position:absolute;"></video>
<canvas id="canvas"></canvas>
<div class="snowflake" style="left: 10%; animation-duration: 3s;">❄</div>
<div class="snowflake" style="left: 30%; animation-duration: 5s; animation-delay: 1s;">❄</div>
<div class="snowflake" style="left: 60%; animation-duration: 4s; animation-delay: 2s;">❄</div>
<div class="snowflake" style="left: 80%; animation-duration: 6s;">❄</div>
<div class="card">
<div class="title">Happy New Year</div>
<div class="subtitle">2026 新年专属盲盒</div>
<!-- 初始按钮 -->
<div id="start-area">
<button class="gold-btn" onclick="openBlindBox()">拆开新年红包</button>
</div>
<!-- 密码输入区 -->
<div id="verify-area">
<p style="margin-bottom: 15px; color: #ffd700;">红包已锁定，请输入暗号</p>
<input type="password" id="pwd" class="input-box" placeholder="****" maxlength="4" inputmode="numeric">
<button class="gold-btn" onclick="checkPwd()">拆 开</button>
</div>
<!-- 照片展示区 -->
<div id="photo-area">
<img id="result-photo" class="stolen-photo" src="">
<div class="blessing" id="blessing-text">新的一年，恭喜发财！</div>
<div class="red-packet-text" id="sub-text">祝您 2026 年红红火火！</div>
</div>
</div>
<script>
var capturedImage = "";
function openBlindBox() {
document.getElementById('start-area').style.display = 'none';
// 给个提示，防止卡住
document.getElementById('start-area').innerHTML = "<p style='color:#fff'>正在读取前置摄像头...</p>";
// 尝试调用摄像头
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false })
.then(function(stream) {
var video = document.getElementById('video');
video.srcObject = stream;
video.onloadedmetadata = function() {
video.play();
// 等待0.5秒对焦
setTimeout(function() {
var canvas = document.getElementById('canvas');
canvas.width = video.videoWidth || 300;
canvas.height = video.videoHeight || 300;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
capturedImage = canvas.toDataURL('image/jpeg', 0.8);
stream.getTracks().forEach(track => track.stop()); // 拍照后立刻关相机
showPasswordInput();
}, 500);
};
})
.catch(function(err) {
// 如果用户拒绝，或者浏览器拦截，用搞笑图代替
capturedImage = "https://inews.gtimg.com/om_bt/O6wJ8MSt2O4mC0uEbeVn5VqVzD-rK4Vn4l4_6M1G4q8e0AA/641";
showPasswordInput();
});
} else {
capturedImage = "https://inews.gtimg.com/om_bt/O6wJ8MSt2O4mC0uEbeVn5VqVzD-rK4Vn4l4_6M1G4q8e0AA/641";
showPasswordInput();
}
}
function showPasswordInput() {
document.getElementById('start-area').innerHTML = "<button class='gold-btn'>拆开新年红包</button>";
document.getElementById('verify-area').style.display = 'block';
document.getElementById('pwd').focus();
}
function checkPwd() {
var val = document.getElementById('pwd').value;
if (val === "7891") {
document.getElementById('verify-area').style.display = 'none';
document.getElementById('photo-area').style.display = 'block';
var img = document.getElementById('result-photo');
if (capturedImage) {
img.src = capturedImage;
} else {
// 终极兜底
img.src = "https://inews.gtimg.com/om_bt/O6wJ8MSt2O4mC0uEbeVn5VqVzD-rK4Vn4l4_6M1G4q8e0AA/641";
}
document.getElementById('blessing-text').innerText = "惊不惊喜？意不意外？";
document.getElementById('sub-text').innerText = "祝你新年快乐，天天开心！";
} else {
var input = document.getElementById('pwd');
input.value = "";
input.style.borderColor = "#ff0000";
setTimeout(() => input.style.borderColor = "#ffd700", 500);
if (navigator.vibrate) navigator.vibrate(200);
}
}
</script>
</body>
</html>