211 lines
15 KiB
HTML
211 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh" class="h-full">
|
|||
|
|
<head>
|
|||
|
|
<!-- Required Meta Tags Always Come First -->
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|||
|
|
<meta name="description" content="Laysense Auth">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Title -->
|
|||
|
|
<title>Laysense Auth</title>
|
|||
|
|
|
|||
|
|
<!-- Favicon -->
|
|||
|
|
<link rel="shortcut icon" href="https://static.laysense.cn/data/file/_4335ce.png?1709117691655">
|
|||
|
|
|
|||
|
|
<!-- Font -->
|
|||
|
|
|
|||
|
|
<!-- Theme Check and Update -->
|
|||
|
|
<script>
|
|||
|
|
const html = document.querySelector('html');
|
|||
|
|
const isLightOrAuto = localStorage.getItem('hs_theme') === 'light' || (localStorage.getItem('hs_theme') === 'auto' && !window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|||
|
|
const isDarkOrAuto = localStorage.getItem('hs_theme') === 'dark' || (localStorage.getItem('hs_theme') === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|||
|
|
|
|||
|
|
if (isLightOrAuto && html.classList.contains('dark')) html.classList.remove('dark');
|
|||
|
|
else if (isDarkOrAuto && html.classList.contains('light')) html.classList.remove('light');
|
|||
|
|
else if (isDarkOrAuto && !html.classList.contains('dark')) html.classList.add('dark');
|
|||
|
|
else if (isLightOrAuto && !html.classList.contains('light')) html.classList.add('light');
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- CSS HS -->
|
|||
|
|
<link rel="stylesheet" href="https://static.laysense.cn/data/file/cdn/preline.css">
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body class="dark:bg-neutral-900">
|
|||
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|||
|
|
<main id="content">
|
|||
|
|
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
|||
|
|
<div class="max-w-xl mx-auto">
|
|||
|
|
<div class="text-center">
|
|||
|
|
<h1 class="text-3xl font-bold text-gray-800 sm:text-4xl dark:text-white">
|
|||
|
|
<?php echo($username);?>,欢迎来到来笙~！🥳
|
|||
|
|
</h1>
|
|||
|
|
<p class="mt-1 text-gray-600 dark:text-neutral-400">
|
|||
|
|
您还需要补充下述信息，以便我们为您提供更好的服务。您的隐私信息将被严格加密储存，并严格限制第三方应用的读取。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="mt-12">
|
|||
|
|
<!-- Form -->
|
|||
|
|
<form>
|
|||
|
|
<div class="grid gap-4 lg:gap-6">
|
|||
|
|
|
|||
|
|
<?php
|
|||
|
|
foreach($requireFields as $field){
|
|||
|
|
switch ($field) {
|
|||
|
|
case 'name':
|
|||
|
|
echo '<div>
|
|||
|
|
<label for="name" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">用户名</label>
|
|||
|
|
<input type="text" id="name" name="name" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
|
|||
|
|
</div>';
|
|||
|
|
break;
|
|||
|
|
case 'sex':
|
|||
|
|
echo ' <label class="block text-sm text-gray-700 font-medium dark:text-white">性别</label>
|
|||
|
|
<div class="grid sm:grid-cols-2 gap-2">
|
|||
|
|
<label for="hs-radio-in-form" class="flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400">
|
|||
|
|
<input type="radio" name="hs-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-in-form">
|
|||
|
|
<span class="text-sm text-gray-500 ms-3 dark:text-neutral-400">先生</span>
|
|||
|
|
</label>
|
|||
|
|
<label for="hs-radio-checked-in-form" class="flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400">
|
|||
|
|
<input type="radio" name="hs-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-checked-in-form" checked="">
|
|||
|
|
<span class="text-sm text-gray-500 ms-3 dark:text-neutral-400">女士</span>
|
|||
|
|
</label>
|
|||
|
|
</div>';
|
|||
|
|
break;
|
|||
|
|
case 'email':
|
|||
|
|
echo '<div>
|
|||
|
|
<label for="email" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">邮箱</label>
|
|||
|
|
<input type="email" name="hs-work-email-hire-us-2" id="hs-work-email-hire-us-2" autocomplete="email" id="email" name="email" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
|
|||
|
|
</div>';
|
|||
|
|
break;
|
|||
|
|
case 'phone':
|
|||
|
|
echo '<div>
|
|||
|
|
<label for="phone" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">手机号(仅支持中国大陆，无需填写+86)</label>
|
|||
|
|
<input type="number" id="phone" name="phone" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
|
|||
|
|
</div>';
|
|||
|
|
break;
|
|||
|
|
case 'address':
|
|||
|
|
echo '<div>
|
|||
|
|
<label for="address" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">地址(您参与活动的奖品、来笙硬件、来笙活动邀请函可能会邮寄到此地址)</label>
|
|||
|
|
<div data-toggle="distpicker" data-autoselect="3" data-province="浙江省" class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-2">
|
|||
|
|
<select name="province" class="py-3 px-4 pe-9 block border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"></select>
|
|||
|
|
<select name="city" class="py-3 px-4 pe-9 block border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"></select>
|
|||
|
|
<select name="area" class="py-3 px-4 pe-9 block border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"></select>
|
|||
|
|
</div>
|
|||
|
|
<input type="text" id="address" name="address" placeholder="详细地址" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
|
|||
|
|
|
|||
|
|
</div>';
|
|||
|
|
break;
|
|||
|
|
case 'birthday':
|
|||
|
|
echo '<div>
|
|||
|
|
<label for="birthday" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">您的生日</label>
|
|||
|
|
<input type="date" id="birthday" name="birthday" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
|
|||
|
|
</div>';
|
|||
|
|
break;
|
|||
|
|
case 'avatar':
|
|||
|
|
echo '<div>
|
|||
|
|
<label class="block">
|
|||
|
|
<label for="birthday" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">给您设置一个美美的头像叭</label>
|
|||
|
|
<!--span class="sr-only">Choose profile photo</span-->
|
|||
|
|
<input type="file" name="avatar" id="avatar" class="block w-full text-sm text-gray-500
|
|||
|
|
file:me-4 file:py-2 file:px-4
|
|||
|
|
file:rounded-lg file:border-0
|
|||
|
|
file:text-sm file:font-semibold
|
|||
|
|
file:bg-blue-600 file:text-white
|
|||
|
|
hover:file:bg-blue-700
|
|||
|
|
file:disabled:opacity-50 file:disabled:pointer-events-none
|
|||
|
|
dark:text-neutral-500
|
|||
|
|
dark:file:bg-blue-500
|
|||
|
|
dark:hover:file:bg-blue-400
|
|||
|
|
">
|
|||
|
|
</label>
|
|||
|
|
<div class="shrink-0 group block">
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<img id="avatarpreview" class="inline-block shrink-0 size-[62px] rounded-full" src="/laysenseLogo.jpg" alt="Avatar">
|
|||
|
|
<div class="ms-3">
|
|||
|
|
<h3 class="font-semibold text-gray-800 dark:text-white">'.$username.'</h3>
|
|||
|
|
<p class="text-sm font-medium text-gray-400 dark:text-neutral-500">来笙新用户</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>';
|
|||
|
|
break;
|
|||
|
|
case 'sfz':
|
|||
|
|
echo '<div>
|
|||
|
|
<label for="sfz" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">中国大陆身份证号</label>
|
|||
|
|
<input type="text" name="sfz" id="sfz" autocomplete="email" id="email" name="email" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
|
|||
|
|
</div>';
|
|||
|
|
break;
|
|||
|
|
case 'realname':
|
|||
|
|
echo '<div>
|
|||
|
|
<label for="sfz" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">真实姓名</label>
|
|||
|
|
<input type="text" name="sfz" id="sfz" autocomplete="email" id="email" name="email" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
|
|||
|
|
</div>';
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
?>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Checkbox -->
|
|||
|
|
<div class="mt-3 flex border-gray-200">
|
|||
|
|
<div class="flex">
|
|||
|
|
<input id="remember-me" name="remember-me" type="checkbox" class="shrink-0 mt-1.5 border-gray-800 rounded text-blue-600 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
|
|||
|
|
</div>
|
|||
|
|
<div class="ms-3">
|
|||
|
|
<label for="remember-me" class=" text-sm text-gray-600 dark:text-neutral-400">您已了解并同意来笙<a class="text-blue-600 decoration-2 hover:underline focus:outline-none focus:underline font-medium dark:text-blue-500" href="#">隐私条款</a>，同意来笙安全地处理和储存您的个人信息，并在您同意和授权的前提下安全地提供给第三方应用使用。</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- End Checkbox -->
|
|||
|
|
|
|||
|
|
<div class="mt-6 grid">
|
|||
|
|
<button type="submit" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">完善信息</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="mt-3 text-center">
|
|||
|
|
<p class="text-sm text-gray-500 dark:text-neutral-500">
|
|||
|
|
您的信息将被加密处理和储存，来笙不会保存您的身份证号等敏感内容。<br />仅限中国大陆用户使用，国际用户请咨询 admin@laysense.com
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
<!-- End Form -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p class="mt-3 flex justify-center items-center text-center divide-x divide-gray-300 dark:divide-neutral-700">
|
|||
|
|
©上海来笙信息科技有限公司 2024 </p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</main>
|
|||
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|||
|
|
|
|||
|
|
<!-- JS Implementing Plugins -->
|
|||
|
|
|
|||
|
|
<!-- JS PLUGINS -->
|
|||
|
|
<!-- Required plugins -->
|
|||
|
|
<script src="https://static.laysense.cn/data/file/cdn/preline.js"></script>
|
|||
|
|
<script src="/jquery.js"></script>
|
|||
|
|
<script src="/distpicker.js"></script>
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
document.querySelector('#avatar').onchange = function (){
|
|||
|
|
if(this.files.length){
|
|||
|
|
let file = this.files[0];
|
|||
|
|
let reader = new FileReader();
|
|||
|
|
//新建 FileReader 对象
|
|||
|
|
reader.onload = function(){
|
|||
|
|
// 当 FileReader 读取文件时候，读取的结果会放在 FileReader.result 属性中
|
|||
|
|
document.querySelector('#avatarpreview').src = this.result;
|
|||
|
|
};
|
|||
|
|
// 设置以什么方式读取文件，这里以base64方式
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
<!-- JS THIRD PARTY PLUGINS -->
|
|||
|
|
</body>
|
|||
|
|
</html>
|