奇安信攻防社区

有没有大神能做充电宝授权程序

分类：话题讨论

默认排序时间排序

1 个回答

Dave_ 1天前

<!DOCTYPE html>

<head>

<title>充电宝授权程序</title>

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#3B82F6',

secondary: '#10B981',

accent: '#F59E0B',

danger: '#EF4444',

dark: '#1E293B',

light: '#F8FAFC'

fontFamily: {

sans: ['Inter', 'system-ui', 'sans-serif'],

}

</script>

@layer utilities {

.content-auto {

content-visibility: auto;

}

.animate-pulse-slow {

animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}

.bg-gradient-primary {

background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);

}

</style>

</head>

<h1 class="text-xl font-bold text-dark">充电宝授权系统</h1>

</div>

<i class="fa fa-question-circle mr-1"></i>帮助

</button>

<i class="fa fa-cog mr-1"></i>设置

</button>

</div>

</header>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p class="text-gray-500">请输入您的账号信息进行身份验证</p>

</div>

<div>

</div>

<input type="text" id="username" name="username" required

class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"

placeholder="请输入用户名">

</div>

<div>

</div>

<input type="password" id="password" name="password" required

class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"

placeholder="请输入密码">

</button>

</div>

<input type="checkbox" id="rememberMe" name="rememberMe"

class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">

<label for="rememberMe" class="ml-2 block text-sm text-gray-700">记住我的登录状态</label>

</div>

<button type="submit" id="authSubmit"

class="w-full bg-gradient-primary text-white py-3 px-4 rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center">

</button>

</form>

<p>还没有账号? <a href="#" class="text-primary hover:underline">立即注册</a></p>

</div>

<p class="text-gray-500">请连接充电宝设备并完成识别</p>

</div>

</div>

<p id="deviceStatus" class="text-gray-600 mb-4">等待连接设备...</p>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</button>

</button>

</div>

<h2 class="text-2xl font-bold text-dark mb-2">获取信息密钥</h2>

<p class="text-gray-500">正在为您的设备生成访问密钥</p>

</div>

</div>

<p class="text-gray-600 mb-4">正在生成密钥...</p>

</div>

</div>

<div>

<p class="text-sm text-gray-500">此密钥用于访问充电宝的信息接口</p>

</div>

已生成

</span>

</div>

-- 密钥将显示在这里 --

</div>

</button>

</div>

<p><i class="fa fa-info-circle text-primary mr-1"></i> 密钥有效期为7天，请妥善保管</p>

<p><i class="fa fa-exclamation-circle text-accent mr-1"></i> 请勿向他人泄露您的密钥</p>

</div>

</button>

</button>

</div>

</main>

</button>

</div>

<div>

<h4 class="font-medium text-dark mb-2">如何获取充电宝信息密钥？</h4>

<li>输入您的账号信息进行身份验证</li>

<li>将充电宝连接到设备并完成识别</li>

<li>系统将自动生成信息密钥</li>

<li>复制密钥用于访问充电宝的信息接口</li>

</ol>

</div>

<div>

<h4 class="font-medium text-dark mb-2">密钥有效期是多久？</h4>

<p class="text-gray-600 text-sm">每个生成的密钥有效期为7天，过期后需要重新生成。</p>

</div>

<div>

<p class="text-gray-600 text-sm">请联系客服热线：400-123-4567 或发送邮件至 support@powerbank.com</p>

</div>

</div>

</footer>

// DOM 元素

const step1 = document.getElementById('step1');

const step2 = document.getElementById('step2');

const step3 = document.getElementById('step3');

const step1Content = document.getElementById('step1Content');

const step2Content = document.getElementById('step2Content');

const step3Content = document.getElementById('step3Content');

const progressBar = document.getElementById('progressBar');

const authForm = document.getElementById('authForm');

const togglePassword = document.getElementById('togglePassword');

const passwordInput = document.getElementById('password');

const backToStep1 = document.getElementById('backToStep1');

const backToStep2 = document.getElementById('backToStep2');

const identifyDevice = document.getElementById('identifyDevice');

const deviceStatus = document.getElementById('deviceStatus');

const deviceInfo = document.getElementById('deviceInfo');

const connectionProgress = document.getElementById('connectionProgress');

const connectionProgressBar = document.getElementById('connectionProgressBar');

const deviceModel = document.getElementById('deviceModel');

const deviceSerial = document.getElementById('deviceSerial');

const deviceFirmware = document.getElementById('deviceFirmware');

const deviceBattery = document.getElementById('deviceBattery');

const keyProgressBar = document.getElementById('keyProgressBar');

const keyProgressText = document.getElementById('keyProgressText');

const keyGeneration = document.getElementById('keyGeneration');

const keyResult = document.getElementById('keyResult');

const keyValue = document.getElementById('keyValue');

const copyKey = document.getElementById('copyKey');

const finishProcess = document.getElementById('finishProcess');

const helpBtn = document.getElementById('helpBtn');

const helpModal = document.getElementById('helpModal');

const closeHelp = document.getElementById('closeHelp');

const statusBar = document.getElementById('statusBar');

const statusIcon = document.getElementById('statusIcon');

const statusMessage = document.getElementById('statusMessage');

// 显示状态消息

function showStatus(message, isError = false) {

statusMessage.textContent = message;

statusIcon.className = isError ? 'fa fa-exclamation-circle text-danger mr-3' : 'fa fa-info-circle text-primary mr-3';

statusBar.className = isError ? 'mb-8 p-4 bg-red-50 border border-red-200 rounded-lg' : 'mb-8 p-4 bg-blue-50 border border-blue-200 rounded-lg';

statusBar.classList.remove('hidden');

// 3秒后自动隐藏

setTimeout(() => {

statusBar.classList.add('hidden');

}, 3000);

}

// 切换密码可见性

togglePassword.addEventListener('click', () => {

const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';

passwordInput.setAttribute('type', type);

togglePassword.querySelector('i').classList.toggle('fa-eye');

togglePassword.querySelector('i').classList.toggle('fa-eye-slash');

});

// 步骤1表单提交

authForm.addEventListener('submit', (e) => {

e.preventDefault();

const username = document.getElementById('username').value;

const password = passwordInput.value;

if (!username || !password) {

showStatus('请输入用户名和密码', true);

return;

}

// 模拟认证过程

const submitBtn = document.getElementById('authSubmit');

const originalText = submitBtn.innerHTML;

submitBtn.disabled = true;

submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>验证中...';

setTimeout(() => {

// 模拟认证成功

goToStep(2);

submitBtn.disabled = false;

submitBtn.innerHTML = originalText;

showStatus('身份验证成功，正在进入设备识别阶段');

}, 1500);

});

// 切换到指定步骤

function goToStep(step) {

// 隐藏所有步骤内容

step1Content.classList.add('hidden');

step2Content.classList.add('hidden');

step3Content.classList.add('hidden');

// 重置所有步骤样式

[step1, step2, step3].forEach(el => {

el.querySelector('div').classList.remove('bg-primary', 'text-white');

el.querySelector('div').classList.add('bg-gray-300', 'text-gray-600');

el.querySelector('p').classList.remove('text-primary');

el.querySelector('p').classList.add('text-gray-500');

});

// 设置当前步骤样式

if (step >= 1) {

step1.querySelector('div').classList.remove('bg-gray-300', 'text-gray-600');

step1.querySelector('div').classList.add('bg-primary', 'text-white');

step1.querySelector('p').classList.remove('text-gray-500');

step1.querySelector('p').classList.add('text-primary');

}

if (step >= 2) {

step2.querySelector('div').classList.remove('bg-gray-300', 'text-gray-600');

step2.querySelector('div').classList.add('bg-primary', 'text-white');

step2.querySelector('p').classList.remove('text-gray-500');

step2.querySelector('p').classList.add('text-primary');

}

if (step >= 3) {

step3.querySelector('div').classList.remove('bg-gray-300', 'text-gray-600');

step3.querySelector('div').classList.add('bg-primary', 'text-white');

step3.querySelector('p').classList.remove('text-gray-500');

step3.querySelector('p').classList.add('text-primary');

}

// 更新进度条

progressBar.style.width = `${(step - 1) * 50}%`;

// 显示当前步骤内容

if (step === 1) step1Content.classList.remove('hidden');

if (step === 2) step2Content.classList.remove('hidden');

if (step === 3) step3Content.classList.remove('hidden');

}

// 返回步骤1

backToStep1.addEventListener('click', () => {

goToStep(1);

});

// 返回步骤2

backToStep2.addEventListener('click', () => {

goToStep(2);

});

// 识别设备

identifyDevice.addEventListener('click', () => {

// 模拟设备连接过程

identifyDevice.disabled = true;

identifyDevice.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>识别中...';

deviceStatus.textContent = '正在识别设备...';

connectionProgress.classList.remove('hidden');

let progress = 0;

const progressInterval = setInterval(() => {

progress += 5;

connectionProgressBar.style.width = `${progress}%`;

if (progress >= 100) {

clearInterval(progressInterval);

// 显示设备信息

deviceModel.textContent = 'PowerBank Pro X10';

deviceSerial.textContent = 'PB202305120045';

deviceFirmware.textContent = 'v2.3.1';

deviceBattery.textContent = '87%';

deviceStatus.textContent = '设备识别成功';

deviceInfo.classList.remove('hidden');

// 延迟进入下一步

setTimeout(() => {

goToStep(3);

identifyDevice.disabled = false;

identifyDevice.innerHTML = '<span>确认设备</span><i class="fa fa-check ml-2"></i>';

generateKey();

showStatus('设备识别成功，正在生成信息密钥');

}, 1000);

}

}, 100);

});

// 生成密钥

function generateKey() {

let progress = 0;

const progressInterval = setInterval(() => {

progress += 5;

keyProgressBar.style.width = `${progress}%`;

if (progress <= 30) {

keyProgressText.textContent = '正在验证设备权限...';

} else if (progress <= 60) {

keyProgressText.textContent = '正在生成加密密钥...';

} else if (progress <= 90) {

keyProgressText.textContent = '正在完成密钥配置...';

} else {

keyProgressText.textContent = '密钥生成完成';

}

if (progress >= 100) {

clearInterval(progressInterval);

// 生成随机密钥

const key = generateRandomKey();

keyValue.textContent = key;

// 显示结果

setTimeout(() => {

keyGeneration.classList.add('hidden');

keyResult.classList.remove('hidden');

}, 500);

}

}, 150);

}

// 生成随机密钥

function generateRandomKey() {

const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

let key = '';

for (let i = 0; i < 32; i++) {

key += chars.charAt(Math.floor(Math.random() * chars.length));

if ((i + 1) % 8 === 0 && i !== 31) {

key += '-';

}

return key;

}

// 复制密钥

copyKey.addEventListener('click', () => {

const key = keyValue.textContent;

navigator.clipboard.writeText(key).then(() => {

const originalIcon = copyKey.innerHTML;

copyKey.innerHTML = '<i class="fa fa-check"></i>';

setTimeout(() => {

copyKey.innerHTML = originalIcon;

}, 2000);

showStatus('密钥已复制到剪贴板');

}).catch(err => {

showStatus('复制失败，请手动复制', true);

console.error('复制失败:', err);

});

// 完成流程

finishProcess.addEventListener('click', () => {

if (confirm('操作已完成，是否返回初始页面？')) {

// 重置所有状态

goToStep(1);

authForm.reset();

passwordInput.setAttribute('type', 'password');

togglePassword.querySelector('i').classList.remove('fa-eye');

togglePassword.querySelector('i').classList.add('fa-eye-slash');

deviceInfo.classList.add('hidden');

connectionProgress.classList.add('hidden');

connectionProgressBar.style.width = '0%';

keyGeneration.classList.remove('hidden');

keyResult.classList.add('hidden');

keyProgressBar.style.width = '0%';

keyProgressText.textContent = '处理中，请稍候...';

showStatus('已返回初始页面，可以开始新的授权流程');

}

});

// 帮助模态框

helpBtn.addEventListener('click', () => {

helpModal.classList.remove('hidden');

});

closeHelp.addEventListener('click', () => {

helpModal.classList.add('hidden');

});

// 点击模态框外部关闭

helpModal.addEventListener('click', (e) => {

if (e.target === helpModal) {

helpModal.classList.add('hidden');

}

});

// 初始化页面

document.addEventListener('DOMContentLoaded', () => {

goToStep(1);

});

</script>

</body>

</html>

有没有大神能做充电宝授权程序

1 个回答

相似问题