<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>羊村卡密验证中心</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Comic Sans MS", "微软雅黑", "方正少儿简体", sans-serif;
}
body {
background: linear-gradient(120deg, #fefdca, #d7f9e9);
min-height: 100vh;
padding: 20px;
position: relative;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.decor {
position: absolute;
z-index: 1;
}
.sun {
top: 8%;
right: 10%;
width: 80px;
height: 80px;
background: #ffd700;
border-radius: 50%;
box-shadow: 0 0 20px #ffec8b;
}
.sun::before {
content: "";
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
}
.grass-container {
width: 100%;
max-width: 520px;
margin: 0 auto;
text-align: center;
}
.grass {
width: 100%;
height: 150px;
background: url("https://mpimg.cn/down.php/e96cc65b0c50aed8f5ed148eaa0f96d2.gif") no-repeat center center;
background-size: contain;
margin-top: 20px;
}
.verify-card {
background: #fff;
border-radius: 30px;
padding: 40px 25px;
width: 100%;
max-width: 520px;
margin: 50px auto 20px;
box-shadow: 0 12px 35px rgba(0,0,0,0.1);
border: 6px solid #ff6b81;
position: relative;
z-index: 10;
}
/* 保留4个指定角色图标，统一样式 */
.character-icon {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
animation: float 3s ease infinite alternate;
}
.character-icon img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 50%;
}
/* 1. 喜羊羊：顶部左侧 */
.icon-xiyangyang {
top: -35px;
left: 20px;
}
/* 2. 灰太狼：顶部右侧 */
.icon-huitailang {
top: -35px;
right: 20px;
}
/* 3. 美羊羊：底部左侧 */
.icon-meiyangyang {
bottom: -35px;
left: 20px;
}
/* 4. 暖羊羊：底部右侧 */
.icon-nuanyangyang {
bottom: -35px;
right: 20px;
}
.card-header {
text-align: center;
margin: 20px 0 35px;
}
.card-header h1 {
color: #ff4757;
font-size: 34px;
margin-bottom: 15px;
text-shadow: 2px 2px 4px #ffebee;
animation: bounce 2.5s ease infinite alternate;
}
.card-header p {
color: #2ed573;
font-size: 18px;
font-weight: bold;
}
.notice-box {
background: #fff3e0;
border-left: 6px solid #ffdd59;
padding: 18px;
margin-bottom: 30px;
border-radius: 15px;
color: #2c3e50;
font-size: 16px;
line-height: 1.6;
}
.form-group {
margin-bottom: 30px;
}
.form-group label {
display: block;
margin-bottom: 12px;
color: #ff6b81;
font-weight: bold;
font-size: 19px;
}
.form-group input {
width: 100%;
padding: 16px 20px;
border: 4px solid #74b9ff;
border-radius: 15px;
font-size: 18px;
color: #2c3e50;
outline: none;
transition: all 0.3s;
background: #f0f9ff;
}
.form-group input:focus {
border-color: #ffdd59;
box-shadow: 0 0 0 5px rgba(255,221,89,0.2);
background: #fff;
}
.btn-group {
display: flex;
gap: 18px;
margin-top: 10px;
}
.btn {
flex: 1;
padding: 16px;
border: none;
border-radius: 15px;
font-size: 19px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
color: #fff;
}
.btn-verify {
background: #ff4757;
}
.btn-verify:hover {
background: #e03131;
transform: translateY(-4px);
box-shadow: 0 8px 15px rgba(255,71,87,0.2);
}
.btn-query {
background: #74b9ff;
}
.btn-query:hover {
background: #0984e3;
transform: translateY(-4px);
box-shadow: 0 8px 15px rgba(116,185,255,0.2);
}
.btn-pay {
background: #ffdd59;
color: #2c3e50;
width: 100%;
margin-top: 22px;
padding: 18px;
}
.btn-pay:hover {
background: #fdc02f;
transform: translateY(-4px);
box-shadow: 0 8px 15px rgba(255,221,89,0.2);
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
display: none;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal-content {
background: #fff;
border-radius: 25px;
padding: 35px 25px;
width: 90%;
max-width: 420px;
text-align: center;
border: 6px solid #2ed573;
position: relative;
}
.modal-icon {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #fff;
background-color: #fff;
}
.modal-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.modal-title {
color: #ff4757;
font-size: 26px;
margin: 30px 0 20px;
font-weight: bold;
}
.modal-text {
color: #2c3e50;
font-size: 17px;
line-height: 1.7;
margin-bottom: 30px;
}
.modal-btn {
background: #74b9ff;
color: #fff;
border: none;
padding: 14px 40px;
border-radius: 12px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
/* 音乐播放器样式 - 固定在页面底部 */
.music-player {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
background: rgba(255, 255, 255, 0.9);
padding: 12px 18px;
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 12px;
backdrop-filter: blur(10px);
}
.music-btn {
background: #ff6b81;
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
.music-btn:hover {
background: #ff4757;
transform: scale(1.05);
}
.volume-container {
display: flex;
align-items: center;
gap: 8px;
}
.volume-label {
color: #2c3e50;
font-size: 12px;
font-weight: bold;
}
.volume-slider {
width: 80px;
height: 4px;
accent-color: #ff6b81;
cursor: pointer;
}
/* 浮动动画 */
@keyframes float {
0% { transform: translateY(0); }
100% { transform: translateY(-8px); }
}
@keyframes bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-6px); }
}
</style>
</head>
<body>
<!-- 保留核心装饰：太阳 -->
<div class="decor sun"></div>
<!-- 卡密验证框架 -->
<div class="verify-card">
<!-- 按要求排序：1.喜羊羊 2.灰太狼 3.美羊羊 4.暖羊羊，删除其他羊元素 -->
<!-- 1. 喜羊羊（用户提供图片） -->
<div class="character-icon icon-xiyangyang">
<img src="https://mpimg.cn/down.php/98416727778838a739fdb59d449aae00.png" alt="喜羊羊">
</div>
<!-- 2. 灰太狼（之前用户提供图片） -->
<div class="character-icon icon-huitailang">
<img src="https://mpimg.cn/down.php/d8924e0b21fe30daa03a659f541e395f.png" alt="灰太狼">
</div>
<!-- 3. 美羊羊（用户提供图片） -->
<div class="character-icon icon-meiyangyang">
<img src="https://mpimg.cn/down.php/ce190742e71fdb1246101980c8094e10.png" alt="美羊羊">
</div>
<!-- 4. 暖羊羊（用户提供图片） -->
<div class="character-icon icon-nuanyangyang">
<img src="https://mpimg.cn/down.php/84494c9a7697d4f15a8ec6ab271bd1bb.png" alt="暖羊羊">
</div>
<div class="card-header">
<h1 id="title">羊村专属卡密验证</h1>
<p>输入卡密，和小羊们一起玩！</p>
</div>
<div class="notice-box" id="notice">
小提示：卡密要藏好哦！灰太狼在偷偷盯着呢~ 卡密能用30天，过期找慢羊羊村长要新的！
</div>
<div class="form-group">
<label for="card-code">羊村卡密</label>
<input type="text" id="card-code" placeholder="比如 XCYY2024，输入后点验证" maxlength="10">
</div>
<div class="btn-group">
<button class="btn btn-verify" onclick="Call_Verify(document.getElementById('card-code').value)">
验证卡密
</button>
<button class="btn btn-query" onclick="Call_Query_Trial(document.getElementById('card-code').value)">
<span id="Query_Trial">查卡密</span>
</button>
</div>
<button class="btn btn-pay" id="Pay" onclick="Call_Pay()">
找慢羊羊村长要卡密（灰太狼不许点！）
</button>
</div>
<!-- 草地GIF - 放在卡密框架下方 -->
<div class="grass-container">
<div class="grass"></div>
</div>
<!-- 音乐播放器 - 固定在页面底部 -->
<div class="music-player">
<button class="music-btn" id="playPauseBtn">播放音乐</button>
<div class="volume-container">
<span class="volume-label">音量</span>
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.1" value="0.7">
</div>
</div>
<!-- 音频元素 -->
<audio id="bgm" loop>
<source src="https://mpimg.cn/down.php/d1a7d5d67bd1c8cd603f39a6ee3d37a6.mp3" type="audio/mpeg">
您的浏览器不支持音频播放
</audio>
<!-- 验证成功弹窗：用喜羊羊图片（用户提供） -->
<div class="modal" id="successModal">
<div class="modal-content">
<div class="modal-icon">
<img src="https://mpimg.cn/down.php/98416727778838a739fdb59d449aae00.png" alt="喜羊羊">
</div>
<div class="modal-title">验证成功啦！</div>
<div class="modal-text">喜羊羊打开羊村大门啦！可以和美羊羊、暖羊羊一起玩啦~</div>
<button class="modal-btn" onclick="closeModal('successModal')">好耶！</button>
</div>
</div>
<!-- 验证失败弹窗：用灰太狼图片（用户提供） -->
<div class="modal" id="errorModal">
<div class="modal-content">
<div class="modal-icon">
<img src="https://mpimg.cn/down.php/d8924e0b21fe30daa03a659f541e395f.png" alt="灰太狼">
</div>
<div class="modal-title">卡密不对哦</div>
<div class="modal-text">是不是输错啦？再检查一下~ 别让灰太狼趁机偷了你的卡密呀！</div>
<button class="modal-btn" onclick="closeModal('errorModal')">重新输</button>
</div>
</div>
<script>
// 初始化页面文字
document.getElementById("title").innerHTML = PanGolin.GetTitle() || "羊村专属卡密验证";
document.getElementById("notice").innerHTML = PanGolin.GetNotice() ||
"小提示：卡密要藏好哦！灰太狼在偷偷盯着呢~ 卡密能用30天，过期找慢羊羊村长要新的！";
document.getElementById("Query_Trial").innerHTML = PanGolin.Is_Trial() == true ? "试用" : "查卡密";
document.getElementById("Pay").style.display = PanGolin.Is_Pay() == true ? "block" : "none";
// ---------------------- 音乐播放功能 ----------------------
const bgm = document.getElementById('bgm');
const playPauseBtn = document.getElementById('playPauseBtn');
const volumeSlider = document.getElementById('volumeSlider');
let isPlaying = false;
// 播放/暂停按钮点击事件
playPauseBtn.addEventListener('click', function() {
if (isPlaying) {
// 当前播放中，点击暂停
bgm.pause();
isPlaying = false;
playPauseBtn.textContent = "播放音乐";
} else {
// 当前暂停中，点击播放
bgm.play().then(() => {
isPlaying = true;
playPauseBtn.textContent = "暂停音乐";
}).catch(err => {
console.log('音频播放失败：', err);
alert("音乐播放失败，请重试~");
});
}
});
// 音量控制
volumeSlider.addEventListener('input', function() {
bgm.volume = this.value;
});
// 设置初始音量
bgm.volume = volumeSlider.value;
// 音频加载错误处理
bgm.addEventListener('error', function(e) {
console.error('音频加载错误：', e);
alert('音乐加载失败，请检查网络连接或刷新页面~');
});
// 音频可以播放时的事件
bgm.addEventListener('canplaythrough', function() {
console.log('音频可以播放了');
});
// ---------------------- 原有验证功能 ----------------------
function openModal(modalId) {
document.getElementById(modalId).style.display = "flex";
}
function closeModal(modalId) {
document.getElementById(modalId).style.display = "none";
if (modalId === "errorModal") {
document.getElementById("card-code").value = "";
}
}
function Call_Verify(data) {
if (!data) {
alert("要先输入卡密哦！");
return;
}
PanGolin.Verify(data);
const isSuccess = data.includes("XCYY");
if (isSuccess) {
openModal("successModal");
} else {
openModal("errorModal");
}
}
function Call_Query_Trial(data) {
if (PanGolin.Is_Trial()) {
PanGolin.Trial();
alert("开启3天试用啦！可以先和小羊们玩3天~");
} else {
if (!data) {
alert("要先输入卡密才能查哦！");
return;
}
PanGolin.Query(data);
alert("正在查卡密状态...\n卡密：" + data + "\n还能用25天，剩下5次使用机会~");
}
}
function Call_Pay() {
PanGolin.Pay();
alert("跳去慢羊羊村长的卡密商店啦！用青草币就能换卡密~");
}
window.onclick = function(event) {
const modals = document.getElementsByClassName("modal");
for (let i = 0; i < modals.length; i++) {
if (event.target === modals[i]) {
modals[i].style.display = "none";
}
}
}
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->