Spaces:

yang186
/

company

Running

App Files Files Community

company / index.html

yang186

点击登录按钮，登录成功后跳转到功能页面，功能页面可返回登录页面，功能页面有3个按钮，按钮名字分别为111、222、333 - Follow Up Deployment

bed32f8 verified 9 months ago

raw

history blame contribute delete

15.4 kB

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>手机验证码登录</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

	body {
	font-family: 'Noto Sans SC', sans-serif;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	min-height: 100vh;
	}

	.input-field {
	transition: all 0.3s ease;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}

	.input-field:focus {
	box-shadow: 0 4px 10px rgba(79, 70, 229, 0.1);
	}

	.btn-primary {
	background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
	transition: all 0.3s ease;
	}

	.btn-primary:hover {
	background: linear-gradient(90deg, #4338ca 0%, #6d28d9 100%);
	transform: translateY(-2px);
	}

	.btn-primary:active {
	transform: translateY(0);
	}

	.verification-btn {
	transition: all 0.3s ease;
	}

	.verification-btn:disabled {
	background-color: #e5e7eb;
	color: #9ca3af;
	cursor: not-allowed;
	}

	.countdown {
	color: #4f46e5;
	font-weight: 500;
	}

	.logo {
	animation: float 3s ease-in-out infinite;
	}

	@keyframes float {
	0%, 100% {
	transform: translateY(0);
	}
	50% {
	transform: translateY(-10px);
	}
	}

	.slide-in {
	animation: slideIn 0.5s ease-out forwards;
	}

	@keyframes slideIn {
	from {
	opacity: 0;
	transform: translateY(20px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}
	</style>
	</head>
	<body class="flex items-center justify-center p-4">
	<div class="login-container">
	<div class="w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden slide-in">
	<!-- 顶部装饰 -->
	<div class="h-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

	<div class="p-8">
	<!-- Logo和标题 -->
	<div class="flex flex-col items-center mb-8">
	<div class="logo bg-indigo-100 p-4 rounded-full mb-4">
	<i class="fas fa-mobile-alt text-indigo-600 text-3xl"></i>
	</div>
	<h1 class="text-2xl font-bold text-gray-800">大件运输企业端</h1>
	<p class="text-gray-500 mt-2">使用手机号验证码登录</p>
	</div>

	<!-- 登录表单 -->
	<form id="loginForm" class="space-y-6">
	<!-- 手机号输入 -->
	<div>
	<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">经办人手机号码</label>
	<div class="relative rounded-md shadow-sm">
	<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
	<span class="text-gray-500 sm:text-sm">+86</span>
	</div>
	<input
	type="tel"
	id="phone"
	name="phone"
	maxlength="11"
	pattern="^1[3-9]\d{9}$"
	class="input-field block w-full pl-12 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
	placeholder="请输入手机号码"
	required
	>
	<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
	<i class="fas fa-check-circle text-green-500 opacity-0" id="phoneValidIcon"></i>
	</div>
	</div>
	<p class="mt-1 text-xs text-red-500 hidden" id="phoneError">请输入有效的手机号码</p>
	</div>

	<!-- 验证码输入 -->
	<div>
	<label for="verificationCode" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
	<div class="flex space-x-2">
	<input
	type="text"
	id="verificationCode"
	name="verificationCode"
	maxlength="6"
	class="input-field flex-1 block w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
	placeholder="请输入6位验证码"
	required
	>
	<button
	type="button"
	id="sendCodeBtn"
	class="verification-btn px-4 py-3 border border-transparent text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
	>
	获取验证码
	</button>
	</div>
	<p class="mt-1 text-xs text-gray-500">验证码将发送到您的手机</p>
	</div>

	<!-- 登录按钮 -->
	<div>
	<button
	type="submit"
	class="btn-primary w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
	>
	登录
	</button>
	</div>
	</form>

	<!-- 其他登录方式 -->


	<!-- 用户协议 -->
	<div class="mt-8 text-center text-xs text-gray-500">
	<p>登录即表示您同意我们的 <a href="#" class="text-indigo-600 hover:text-indigo-500">用户协议</a> 和 <a href="#" class="text-indigo-600 hover:text-indigo-500">隐私政策</a></p>
	</div>
	</div>
	</div>

	<!-- 功能入口页面 -->
	<div id="functionPage" class="hidden w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden slide-in p-8">
	<div class="flex flex-col items-center mb-8">
	<div class="logo bg-indigo-100 p-4 rounded-full mb-4">
	<i class="fas fa-truck text-indigo-600 text-3xl"></i>
	</div>
	<h1 class="text-2xl font-bold text-gray-800">功能页面</h1>
	<p class="text-gray-500 mt-2">请选择操作</p>
	</div>

	<div class="space-y-4">
	<button class="btn-primary w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
	111
	</button>
	<button class="btn-primary w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
	222
	</button>
	<button class="btn-primary w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
	333
	</button>
	</div>

	<div class="mt-6">
	<button id="backToLogin" class="w-full flex justify-center py-3 px-4 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
	返回登录
	</button>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const phoneInput = document.getElementById('phone');
	const phoneValidIcon = document.getElementById('phoneValidIcon');
	const phoneError = document.getElementById('phoneError');
	const sendCodeBtn = document.getElementById('sendCodeBtn');
	const loginForm = document.getElementById('loginForm');

	// 手机号验证
	phoneInput.addEventListener('input', function() {
	const phoneRegex = /^1[3-9]\d{9}$/;
	const isValid = phoneRegex.test(this.value);

	if (isValid) {
	phoneValidIcon.classList.remove('opacity-0');
	phoneError.classList.add('hidden');
	} else {
	phoneValidIcon.classList.add('opacity-0');
	if (this.value.length > 0) {
	phoneError.classList.remove('hidden');
	} else {
	phoneError.classList.add('hidden');
	}
	}
	});

	// 发送验证码
	sendCodeBtn.addEventListener('click', function() {
	const phoneRegex = /^1[3-9]\d{9}$/;
	const phoneNumber = phoneInput.value;

	if (!phoneRegex.test(phoneNumber)) {
	phoneError.classList.remove('hidden');
	phoneInput.focus();
	return;
	}

	// 禁用按钮并开始倒计时
	this.disabled = true;
	let countdown = 60;

	const timer = setInterval(() => {
	this.innerHTML = `<span class="countdown">${countdown}</span>秒后重试`;
	countdown--;

	if (countdown < 0) {
	clearInterval(timer);
	this.disabled = false;
	this.textContent = '获取验证码';
	}
	}, 1000);

	// 模拟发送验证码
	console.log(`验证码已发送到手机号: ${phoneNumber}`);

	// 这里应该是实际的API调用
	// fetch('/api/send-verification', {
	// method: 'POST',
	// body: JSON.stringify({ phone: phoneNumber }),
	// headers: {
	// 'Content-Type': 'application/json'
	// }
	// }).then(response => {
	// if (!response.ok) {
	// throw new Error('发送验证码失败');
	// }
	// return response.json();
	// }).then(data => {
	// console.log('验证码发送成功', data);
	// }).catch(error => {
	// console.error('Error:', error);
	// clearInterval(timer);
	// this.disabled = false;
	// this.textContent = '获取验证码';
	// alert('发送验证码失败，请重试');
	// });
	});

	// 表单提交
	loginForm.addEventListener('submit', function(e) {
	e.preventDefault();

	const phoneNumber = phoneInput.value;
	const verificationCode = document.getElementById('verificationCode').value;

	// 简单验证
	if (!/^1[3-9]\d{9}$/.test(phoneNumber)) {
	phoneError.classList.remove('hidden');
	phoneInput.focus();
	return;
	}

	if (!/^\d{6}$/.test(verificationCode)) {
	alert('请输入6位数字验证码');
	return;
	}

	// 模拟登录/注册
	console.log(`登录请求: 手机号 ${phoneNumber}, 验证码 ${verificationCode}`);

	// 这里应该是实际的API调用
	// fetch('/api/login', {
	// method: 'POST',
	// body: JSON.stringify({
	// phone: phoneNumber,
	// code: verificationCode
	// }),
	// headers: {
	// 'Content-Type': 'application/json'
	// }
	// }).then(response => {
	// if (!response.ok) {
	// throw new Error('登录失败');
	// }
	// return response.json();
	// }).then(data => {
	// console.log('登录成功', data);
	// // 跳转到首页或其他页面
	// window.location.href = '/dashboard';
	// }).catch(error => {
	// console.error('Error:', error);
	// alert('登录失败，请检查验证码是否正确');
	// });

	// 模拟成功并跳转到功能页面
	setTimeout(() => {
	document.querySelector('.login-container').classList.add('hidden');
	document.getElementById('functionPage').classList.remove('hidden');
	}, 500);
	});

	// 返回登录按钮
	document.getElementById('backToLogin').addEventListener('click', function() {
	document.getElementById('functionPage').classList.add('hidden');
	document.querySelector('.login-container').classList.remove('hidden');
	});
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yang186/company" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>