<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户界面</title>
<style>
:root {
--bg-color: #FFA500;
--card-bg: rgba(255, 165, 0, 0.5);
--text-color: #fff;
--shadow-color: rgba(0, 0, 0, 0.5);
--button-blue: linear-gradient(135deg, #4facfe, #00f2fe);
--button-purple: linear-gradient(135deg, #4facfe, #7352ff);
--button-pink: linear-gradient(135deg, #ff4d79, #ff0072);
--button-blue-dark: linear-gradient(135deg, #1a73e8, #0d47a1);
--button-purple-dark: linear-gradient(135deg, #673ab7, #3f51b5);
--button-transparent: rgba(255, 255, 255, 0.2);
--border-color: rgba(255, 255, 255, 0.5);
}
body {
margin: 0;
padding: 0;
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Arial', sans-serif;
}
.particle-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.card {
background-color: var(--card-bg);
box-shadow: 0 4px 8px var(--shadow-color);
border-radius: 10px;
padding: 20px;
margin: 20px;
max-width: 400px;
margin: auto;
margin-top: 50px;
}
.card h1 {
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid var(--text-color);
}
.card p {
margin: 10px 0;
}
.card input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: transparent;
color: var(--text-color);
}
.card button {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid var(--border-color);
border-radius: 5px;
cursor: pointer;
background-color: var(--button-transparent);
color: var(--text-color);
transition: all 0.3s ease;
}
.card button:hover {
opacity: 0.8;
transform: translateY(-2px);
}
.toggle-mode {
display: none; /* 隐藏切换模式按钮 */
}
.card {
/* 修改卡片布局为居中 */
display: flex;
flex-direction: column;
align-items: center;
/* 其他样式保持不变 */
}
.card h1 {
/* 移除底部边框 */
border-bottom: none;
}
/* 新增软件名称样式 */
.software-name {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
/* 新增悬浮按钮样式 */
.floating-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--button-transparent);
color: var(--text-color);
border: 1px solid var(--border-color);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
transition: all 0.3s ease;
}
.floating-button:hover {
transform: scale(1.1);
}
.color-picker {
display: none;
position: fixed;
bottom: 80px;
right: 20px;
background-color: var(--card-bg);
padding: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px var(--shadow-color);
z-index: 1001;
}
.color-picker button {
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
margin: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.color-picker button:hover {
transform: scale(1.2);
}
/* 音乐播放器样式 */
.music-player {
display: none;
position: fixed;
bottom: 20px;
left: 20px;
background-color: var(--card-bg);
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 8px var(--shadow-color);
z-index: 1002;
width: 250px;
}
.music-player h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 16px;
}
.music-list {
max-height: 200px;
overflow-y: auto;
margin-bottom: 10px;
}
.music-item {
padding: 8px;
margin: 5px 0;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: background-color 0.3s;
}
.music-item:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.music-item.active {
background-color: rgba(255, 255, 255, 0.4);
font-weight: bold;
}
.music-controls {
display: flex;
justify-content: space-between;
}
.music-controls button {
width: 30%;
padding: 5px;
margin: 0 2px;
border: 1px solid var(--border-color);
border-radius: 5px;
cursor: pointer;
background-color: var(--button-transparent);
color: var(--text-color);
font-size: 12px;
}
.music-controls button:hover {
opacity: 0.8;
}
.music-status {
text-align: center;
margin-top: 5px;
font-size: 12px;
}
/* 购买按钮特殊样式 */
.buy-button {
background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
font-weight: bold;
}
.buy-button:hover {
background: linear-gradient(135deg, #ff5252, #d63031) !important;
}
</style>
</head>
<body>
<div class="particle-background" id="particle-background"></div>
<div class="card">
<div class="software-name" id="softwareName">系统安全验证</div>
<p><strong>设备ID:</strong> <span id="deviceID">正在获取...</span></p>
<div class="notice" id="notice">正在初始化安全协议...</div>
<input type="text" id="newCode" placeholder="输入新卡密">
<button onclick="Call_Wuai_Cloud(document.getElementById('newCode').value);">登录</button>
<!-- 删除了解绑卡密按钮 -->
<button class="buy-button" id="buyBtn">购买卡密</button>
<button onclick="getMusicList()">获取音乐列表</button>
</div>
<div class="floating-button" onclick="toggleColorPicker()">🎨</div>
<div class="color-picker" id="colorPicker">
<button style="background: linear-gradient(135deg, #4facfe, #7352ff);" onclick="changeBackgroundColor('linear-gradient(135deg, #4facfe, #7352ff)')"></button>
<button style="background: linear-gradient(135deg, #ff4d79, #ff0072);" onclick="changeBackgroundColor('linear-gradient(135deg, #ff4d79, #ff0072)')"></button>
<button style="background: linear-gradient(135deg, #a8e063, #56ab2f);" onclick="changeBackgroundColor('linear-gradient(135deg, #a8e063, #56ab2f)')"></button>
<button style="background: linear-gradient(135deg, #ffffff, #000000);" onclick="changeBackgroundColor('linear-gradient(135deg, #ffffff, #000000)')"></button>
<button style="background: rgba(0, 0, 0, 0.5);" onclick="changeBackgroundColor('rgba(0, 0, 0, 0.5)')"></button>
<button style="background: rgba(128, 0, 128, 0.5);" onclick="changeBackgroundColor('rgba(128, 0, 128, 0.5)')"></button>
<button style="background: linear-gradient(135deg, #8e9eab, #eef2f3);" onclick="changeBackgroundColor('linear-gradient(135deg, #8e9eab, #eef2f3)')"></button>
</div>
<!-- 音乐播放器 -->
<div class="music-player" id="musicPlayer">
<h3>音乐列表</h3>
<div class="music-list" id="musicList"></div>
<div class="music-controls">
<button onclick="playPrevious()">上一首</button>
<button onclick="togglePlayPause()">播放/暂停</button>
<button onclick="playNext()">下一首</button>
</div>
<div class="music-status" id="musicStatus">未选择音乐</div>
</div>
<script src="https://jjy.hxywl.top/js/particles.min.js"></script>
<script>
// 初始化函数
function init() {
// 初始化粒子背景
initParticles();
// 初始化PanGolin接口
initPanGolin();
// 初始化颜色选择器
initColorPicker();
// 初始化音乐播放器
initMusicPlayer();
// 绑定购买按钮事件
bindBuyButton();
}
// 初始化粒子背景
function initParticles() {
if (typeof particlesJS !== 'undefined') {
particlesJS('particle-background', {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#ffffff'
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#000000'
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: '#ffffff',
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 6,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'repulse'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
repulse: {
distance: 100,
duration: 0.4
},
push: {
particles_nb: 4
}
}
},
retina_detect: true
});
}
}
// 初始化PanGolin接口
function initPanGolin() {
if (typeof PanGolin !== 'undefined') {
// 设置标题和通知
document.getElementById("softwareName").innerHTML = PanGolin.GetTitle();
document.getElementById("notice").innerHTML = PanGolin.GetNotice();
// 设置设备ID - 修改前缀为"中纸片-"
const deviceId = PanGolin.GetDeviceId ? PanGolin.GetDeviceId() : generateDeviceId();
document.getElementById("deviceID").textContent = deviceId;
} else {
// 模拟PanGolin对象用于测试
console.log("PanGolin对象未定义，使用模拟数据");
document.getElementById("deviceID").textContent = generateDeviceId();
}
}
// 生成设备ID - 修改前缀为"中纸片-"
function generateDeviceId() {
return '中纸片-' + Math.random().toString(36).substr(2, 9).toUpperCase();
}
// 绑定购买按钮事件
function bindBuyButton() {
const buyBtn = document.getElementById('buyBtn');
if (buyBtn) {
buyBtn.addEventListener('click', function() {
console.log("购买卡密按钮被点击");
Call_Pay();
});
}
}
// 初始化颜色选择器
function initColorPicker() {
// 读取存储并应用背景颜色
if (typeof Wuai_Cloud !== 'undefined' && Wuai_Cloud.getReadstorage) {
const storedColor = Wuai_Cloud.getReadstorage(1);
if (storedColor) {
document.body.style.background = storedColor;
document.documentElement.style.setProperty('--card-bg', storedColor);
}
}
}
// 切换调色板显示
function toggleColorPicker() {
const colorPicker = document.getElementById('colorPicker');
colorPicker.style.display = colorPicker.style.display === 'block' ? 'none' : 'block';
// 写入存储
if (typeof Wuai_Cloud !== 'undefined' && Wuai_Cloud.getWritestorage) {
Wuai_Cloud.getWritestorage(1, document.body.style.background);
}
}
// 改变背景颜色
function changeBackgroundColor(color) {
document.body.style.background = color;
document.documentElement.style.setProperty('--card-bg', color);
toggleColorPicker(); // 关闭调色板
// 写入存储
if (typeof Wuai_Cloud !== 'undefined' && Wuai_Cloud.getWritestorage) {
Wuai_Cloud.getWritestorage(1, color);
}
}
// 音乐播放器相关变量
let currentMusicList = [];
let currentMusicIndex = -1;
let isPlaying = false;
let audioElement = null;
let musicPlayerVisible = false;
// 初始化音乐播放器
function initMusicPlayer() {
// 读取存储的音乐播放状态
if (typeof Wuai_Cloud !== 'undefined' && Wuai_Cloud.getReadstorage) {
const musicState = Wuai_Cloud.getReadstorage('musicState');
if (musicState) {
try {
const state = JSON.parse(musicState);
if (state.musicList) {
currentMusicList = state.musicList;
updateMusicList();
}
if (state.currentMusicIndex !== undefined) {
currentMusicIndex = state.currentMusicIndex;
updateActiveMusic();
}
if (state.isPlaying !== undefined) {
isPlaying = state.isPlaying;
updatePlayPauseButton();
}
} catch (e) {
console.error('解析音乐状态失败:', e);
}
}
}
}
// 获取音乐列表
function getMusicList() {
// 模拟从服务器获取音乐列表，每首歌设置独立的URL
currentMusicList = [
{ id: 1, title: "春天里", artist: "汪峰", duration: "4:30", url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" },
{ id: 2, title: "夜空中最亮的星", artist: "逃跑计划", duration: "4:12", url: "https://music.163.com/song/media/outer/url?id=25704904.mp3" },
{ id: 3, title: "平凡之路", artist: "朴树", duration: "5:01", url: "https://music.163.com/song/media/outer/url?id=25706206.mp3" },
{ id: 4, title: "海阔天空", artist: "Beyond", duration: "5:26", url: "https://music.163.com/song/media/outer/url?id=25706237.mp3" },
{ id: 5, title: "晴天", artist: "周杰伦", duration: "4:29", url: "https://music.163.com/song/media/outer/url?id=25706268.mp3" }
];
// 显示或隐藏音乐播放器
toggleMusicPlayerVisibility();
// 更新音乐列表
updateMusicList();
// 保存音乐列表到存储
saveMusicState();
}
// 切换音乐播放器显示状态
function toggleMusicPlayerVisibility() {
const musicPlayer = document.getElementById('musicPlayer');
musicPlayerVisible = !musicPlayerVisible;
musicPlayer.style.display = musicPlayerVisible ? 'block' : 'none';
}
// 更新音乐列表显示
function updateMusicList() {
const musicListElement = document.getElementById('musicList');
musicListElement.innerHTML = '';
currentMusicList.forEach((music, index) => {
const musicItem = document.createElement('div');
musicItem.className = 'music-item';
if (index === currentMusicIndex) {
musicItem.classList.add('active');
}
musicItem.textContent = `${music.title} - ${music.artist} (${music.duration})`;
musicItem.onclick = () => playMusic(index);
musicListElement.appendChild(musicItem);
});
}
// 更新当前播放的音乐高亮
function updateActiveMusic() {
const musicItems = document.querySelectorAll('.music-item');
musicItems.forEach((item, index) => {
if (index === currentMusicIndex) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
}
// 播放指定索引的音乐
function playMusic(index) {
if (index < 0 || index >= currentMusicList.length) return;
currentMusicIndex = index;
updateActiveMusic();
// 如果已经有音频元素，先停止播放
if (audioElement) {
audioElement.pause();
}
// 使用当前选中音乐的URL
audioElement = new Audio(currentMusicList[index].url);
// 更新状态显示
const statusElement = document.getElementById('musicStatus');
statusElement.textContent = `正在播放: ${currentMusicList[index].title} - ${currentMusicList[index].artist}`;
// 开始播放
audioElement.play().then(() => {
isPlaying = true;
updatePlayPauseButton();
}).catch(error => {
console.error('播放失败:', error);
statusElement.textContent = `播放失败: ${error.message}`;
});
// 监听播放结束事件
audioElement.addEventListener('ended', function() {
playNext();
});
// 保存音乐状态
saveMusicState();
}
// 播放上一首
function playPrevious() {
if (currentMusicList.length === 0) return;
let newIndex = currentMusicIndex - 1;
if (newIndex < 0) {
newIndex = currentMusicList.length - 1;
}
playMusic(newIndex);
}
// 播放下一首
function playNext() {
if (currentMusicList.length === 0) return;
let newIndex = currentMusicIndex + 1;
if (newIndex >= currentMusicList.length) {
newIndex = 0;
}
playMusic(newIndex);
}
// 切换播放/暂停状态
function togglePlayPause() {
if (currentMusicIndex === -1 || !audioElement) {
// 如果没有选择音乐，播放第一首
if (currentMusicList.length > 0) {
playMusic(0);
}
return;
}
if (isPlaying) {
audioElement.pause();
isPlaying = false;
} else {
audioElement.play();
isPlaying = true;
}
updatePlayPauseButton();
saveMusicState();
}
// 更新播放/暂停按钮状态
function updatePlayPauseButton() {
const button = document.querySelector('.music-controls button:nth-child(2)');
if (button) {
button.textContent = isPlaying ? '暂停' : '播放';
}
}
// 保存音乐播放状态到存储
function saveMusicState() {
const state = {
musicList: currentMusicList,
currentMusicIndex: currentMusicIndex,
isPlaying: isPlaying
};
if (typeof Wuai_Cloud !== 'undefined' && Wuai_Cloud.getWritestorage) {
Wuai_Cloud.getWritestorage('musicState', JSON.stringify(state));
}
}
// PanGolin接口函数
function Call_Verify(data) {
if (typeof PanGolin !== 'undefined' && PanGolin.Verify) {
PanGolin.Verify(data);
} else {
console.log("验证调用:", data);
// 模拟验证
setTimeout(() => {
alert('验证成功！');
}, 1000);
}
}
function Call_Wuai_Cloud(data) {
// 调用验证函数
Call_Verify(data);
}
function Call_Pay() {
console.log("Call_Pay函数被调用");
if (typeof PanGolin !== 'undefined') {
if (PanGolin.Pay) {
console.log("调用PanGolin.Pay()");
PanGolin.Pay();
} else if (PanGolin.BuyCard) {
console.log("调用PanGolin.BuyCard()");
PanGolin.BuyCard();
} else {
console.log("PanGolin没有购买相关方法");
// 备用方案
alert('正在跳转到购买页面...');
window.open('https://example.com/buy', '_blank');
}
} else {
console.log("PanGolin未定义，使用备用方案");
// 测试环境下的处理
alert('购买功能：正在跳转到购买页面...');
window.open('https://example.com/buy', '_blank');
}
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->