<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
:root {
--bg-color: #0a0a0a;
--card-bg: rgba(255, 255, 255, 0.9);
--text-color: #fff;
--shadow-color: rgba(0, 0, 0, 0.5);
--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;
transition: background 0.3s;
}
.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;
display: flex;
flex-direction: column;
align-items: center;
transition: background 0.3s;
}
.card h1 {
margin: 0;
padding-bottom: 10px;
border-bottom: none;
}
.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;
}
.card button:hover {
opacity: 0.8;
}
.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;
font-size: 20px;
}
.color-picker {
display: none;
position: fixed;
bottom: 80px;
right: 20px;
background-color: var(--card-bg);
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 8px var(--shadow-color);
z-index: 1001;
width: 220px;
}
.color-picker button {
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
margin: 5px;
cursor: pointer;
transition: transform 0.2s;
}
.color-picker button:hover {
transform: scale(1.1);
}
.rgb-controls {
margin-top: 10px;
width: 100%;
}
.rgb-slider {
display: flex;
align-items: center;
margin: 8px 0;
}
.rgb-slider label {
width: 20px;
font-weight: bold;
margin-right: 10px;
}
.rgb-slider input[type="range"] {
flex: 1;
-webkit-appearance: none;
height: 6px;
border-radius: 3px;
background: linear-gradient(to right, #000, var(--slider-color));
outline: none;
}
.rgb-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--slider-color);
cursor: pointer;
}
.rgb-value {
display: block;
text-align: center;
margin-top: 10px;
font-size: 12px;
background: rgba(0,0,0,0.2);
padding: 5px;
border-radius: 4px;
}
.preset-colors {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
margin-top: 10px;
}
.preset-title {
grid-column: span 4;
text-align: center;
font-size: 12px;
margin: 5px 0;
color: var(--text-color);
opacity: 0.7;
}
</style>
</head>
<body>
<div class="card">
<div class="notice" id="notice"></div>
<input type="text" id="code" placeholder="输入新卡密">
<button onclick="Call_Verify(code.value);">登录</button>
<button onclick="Call_Query_Trial(code.value);">查询卡密</button>
<button onclick="Call_Pay()">购买卡密</button>
</div>
<div class="floating-button" onclick="toggleColorPicker()">调色</div>
<div class="color-picker" id="colorPicker">
<div class="preset-title">预设颜色</div>
<div class="preset-colors">
<button style="background: rgb(255, 0, 0)" onclick="applyPresetColor(255, 0, 0)"></button>
<button style="background: rgb(0, 255, 0)" onclick="applyPresetColor(0, 255, 0)"></button>
<button style="background: rgb(0, 0, 255)" onclick="applyPresetColor(0, 0, 255)"></button>
<button style="background: rgb(255, 255, 0)" onclick="applyPresetColor(255, 255, 0)"></button>
<button style="background: rgb(0, 255, 255)" onclick="applyPresetColor(0, 255, 255)"></button>
<button style="background: rgb(255, 0, 255)" onclick="applyPresetColor(255, 0, 255)"></button>
<button style="background: rgb(255, 165, 0)" onclick="applyPresetColor(255, 165, 0)"></button>
<button style="background: rgb(128, 0, 128)" onclick="applyPresetColor(128, 0, 128)"></button>
</div>
<div class="rgb-controls">
<div class="rgb-slider">
<label style="color: #ff0000">R</label>
<input type="range" min="0" max="255" value="255" id="rSlider" oninput="updateCustomColor()">
</div>
<div class="rgb-slider">
<label style="color: #00ff00">G</label>
<input type="range" min="0" max="255" value="255" id="gSlider" oninput="updateCustomColor()">
</div>
<div class="rgb-slider">
<label style="color: #0000ff">B</label>
<input type="range" min="0" max="255" value="255" id="bSlider" oninput="updateCustomColor()">
</div>
<div class="rgb-value" id="rgbValue">RGB(255,255,255)</div>
</div>
</div>
<script>
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
});
document.getElementById("title").innerHTML = PanGolin.GetTitle();
document.getElementById("notice").innerHTML = PanGolin.GetNotice();
document.getElementById("Query_Trial").innerHTML = PanGolin.Is_Trial() ? "试用" : "查码";
document.getElementById("Pay").style.display = PanGolin.Is_Pay() ? "block" : "none";
function Call_Verify(data) {
PanGolin.Verify(data);
}
function Call_Query_Trial(data) {
if (PanGolin.Is_Trial()) PanGolin.Trial();
else PanGolin.Query(data);
}
function Call_Pay() {
PanGolin.Pay();
}
function mStart(obj) {
obj.style.opacity = "0.8";
}
function mUp(obj) {
obj.style.opacity = "1";
}
function toggleColorPicker() {
const colorPicker = document.getElementById('colorPicker');
colorPicker.style.display = colorPicker.style.display === 'block' ? 'none' : 'block';
}
function applyPresetColor(r, g, b) {
document.getElementById('rSlider').value = r;
document.getElementById('gSlider').value = g;
document.getElementById('bSlider').value = b;
updateCustomColor();
}
function updateCustomColor() {
const r = document.getElementById('rSlider').value;
const g = document.getElementById('gSlider').value;
const b = document.getElementById('bSlider').value;
document.getElementById('rgbValue').textContent = `RGB(${r},${g},${b})`;
const color = `rgb(${r},${g},${b})`;
document.documentElement.style.setProperty('--card-bg', color);
document.documentElement.style.setProperty('--bg-color', color);
document.documentElement.style.setProperty('--slider-color-r', `rgb(${r},0,0)`);
document.documentElement.style.setProperty('--slider-color-g', `rgb(0,${g},0)`);
document.documentElement.style.setProperty('--slider-color-b', `rgb(0,0,${b})`);
}
function rgbToHex(r, g, b) {
return "#" + [r, g, b].map(x => {
const hex = x.toString(16);
return hex.length === 1 ? "0" + hex : hex;
}).join('');
}
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->