第 1-100 行（共100行）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>视频背景验证</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
/* 视频背景 */
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.video-background video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 半透明遮罩，提高文字可读性 */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
z-index: -1;
}
/* 登录窗口 */
.login-container {
width: 90%;
max-width: 400px;
background-color: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border-radius: 15px;
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
color: white;
text-align: center;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.08);
}
h1 {
font-size: 28px;
margin-bottom: 8px;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
p {
opacity: 0.9;
margin-bottom: 30px;
font-size: 14px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.input-field {
width: 100%;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 15px;
border-radius: 8px;
color: white;
font-size: 16px;
margin-bottom: 20px;
}
.input-field::placeholder {
color: rgba(255, 255, 255, 0.7);
}
第 101-200 行（共100行）
.input-field:focus {
outline: none;
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
button {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 14px;
border-radius: 8px;
color: white;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.login-btn {
background: rgba(99, 102, 241, 0.3);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
button:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.15);
}
.login-btn:hover {
background: rgba(99, 102, 241, 0.5);
}
svg {
margin-right: 8px;
}
.footer {
margin-top: 30px;
font-size: 12px;
opacity: 0.7;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* 适配移动设备 */
@media (max-width: 768px) {
.login-container {
padding: 25px 20px;
}
}
/* 添加声音控制按钮 */
.sound-toggle {
position: absolute;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: white;
z-index: 100;
border: none;
outline: none;
transition: all 0.3s;
}
.sound-toggle:hover {
background: rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<!-- 视频背景 -->
<div class="video-background">
<video autoplay loop playsinline>
<source src="http://154.12.89.171/1.mp4" type="video/mp4">
</video>
</div>
<!-- 声音开关按钮 -->
<button class="sound-toggle" id="soundToggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path><path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path></svg>
</button>
<!-- 半透明遮罩 -->
<div class="overlay"></div>
第 201-300 行（共100行）
<!-- 登录窗口 -->
<div class="login-container">
<h1>卡密登录</h1>
<p>请输入您的授权卡密</p>
<input type="text" class="input-field" id="code" placeholder="请输入卡密">
<div class="buttons">
<button class="login-btn" onclick="Call_Verify(code.value)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
登录系统
</button>
<button onclick="Call_Query_Trial(code.value)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
获取卡密
</button>
</div>
<div class="footer">
© 2025云科技
</div>
</div>
<script>
// 保持与原有文件相同的调用方式
function Call_Verify(text) {
RuoLv.onButtonClick(0, text);
}
function Call_Query_Trial(text) {
RuoLv.onButtonClick(1, text);
}
// 处理声音和视频
const videoElement = document.querySelector('video');
const soundToggle = document.getElementById('soundToggle');
// 默认设置为非静音状态
videoElement.muted = false;
// 强制自动播放视频
function forcePlayVideo() {
// 尝试直接播放
var playPromise = videoElement.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
console.log("视频成功播放");
videoElement.muted = false;
}).catch(error => {
console.log("无法自动播放:", error);
// 尝试先静音播放然后取消静音
videoElement.muted = true;
videoElement.play().then(() => {
setTimeout(() => {
videoElement.muted = false;
}, 500);
});
});
}
}
// 声音按钮点击事件
soundToggle.addEventListener('click', function() {
if (videoElement.muted) {
// 开启声音
videoElement.muted = false;
soundToggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path><path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path></svg>';
} else {
// 关闭声音
videoElement.muted = true;
soundToggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>';
}
});
// 尝试在页面加载时立即播放视频
document.addEventListener('DOMContentLoaded', forcePlayVideo);
// 当第一次有用户交互时确保声音开启
function enableSound() {
videoElement.muted = false;
if (videoElement.paused) {
videoElement.play();
}
}
// 监听各种可能的用户交互
document.addEventListener('click', enableSound, {once: true});
document.addEventListener('touchstart', enableSound, {once: true});
document.addEventListener('keydown', enableSound, {once: true});
// 应对iOS和Safari的特殊处理
videoElement.addEventListener('canplay', function() {
// iOS需要特殊处理
videoElement.play();
videoElement.muted = false;
});
// 视频加载失败时的处理
videoElement.addEventListener('error', function() {
console.log('视频加载失败');
第 301-328 行（共28行）
// 添加渐变背景作为备用
document.body.style.background = 'linear-gradient(135deg, #4568dc, #b06ab3)';
document.querySelector('.video-background').style.display = 'none';
soundToggle.style.display = 'none';
});
// 确保视频适应窗口大小
window.addEventListener('resize', function() {
const video = document.querySelector('video');
if (window.innerWidth / window.innerHeight > video.videoWidth / video.videoHeight) {
// 如果窗口比例大于视频比例，则宽度100%，高度自适应
video.style.width = '100%';
video.style.height = 'auto';
} else {
// 如果窗口比例小于视频比例，则高度100%，宽度自适应
video.style.width = 'auto';
video.style.height = '100%';
}
});
// 页面加载后立即执行一次适应
window.addEventListener('load', function() {
const evt = new Event('resize');
window.dispatchEvent(evt);
});
</script>
</body>
</html> 
用户评论
0 条评论暂无评论
成为第一个评论此应用的用户吧！