94 lines
6.2 KiB
HTML
94 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>个人名片</title>
|
|
<script src="https://tailwind.gvsds.com"></script>
|
|
<link href="https://cdn.gvsds.com/font-awesome/css/all.min.css" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#6366f1',
|
|
secondary: '#ec4899',
|
|
dark: '#0f172a',
|
|
darker: '#020617',
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities{.content-auto{content-visibility:auto}
|
|
.text-shadow{text-shadow:0 2px 4px rgba(0,0,0,.1)}
|
|
.mask-appear{animation:maskAppear .8s ease-out forwards}
|
|
.mask-disappear{animation:maskDisappear 1.2s cubic-bezier(.68,-.55,.27,1.55) forwards}
|
|
.card-appear{animation:cardAppear .8s ease-out .5s forwards;opacity:0;transform:translateY(20px)}
|
|
.glitch{animation:glitch 2s infinite}
|
|
.touch-btn{touch-action:manipulation;-webkit-tap-highlight-color:rgba(99,102,241,0.2)}}
|
|
@keyframes maskAppear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
|
|
@keyframes maskDisappear{0%{opacity:1;transform:translateX(0) rotate(0)}30%{opacity:1;transform:translateX(20px) rotate(5deg)}to{opacity:0;transform:translateX(150%) rotate(15deg)}}
|
|
@keyframes cardAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
|
|
@keyframes glitch{
|
|
0%,to{transform:translate(0)}
|
|
20%{transform:translate(-2px,2px)}
|
|
40%{transform:translate(-2px,-2px)}
|
|
60%{transform:translate(2px,2px)}
|
|
80%{transform:translate(2px,-2px)}
|
|
}
|
|
body{-webkit-overflow-scrolling:touch;overflow-scrolling:touch}
|
|
</style>
|
|
</head>
|
|
<body class="bg-darker text-gray-100 font-inter min-h-screen flex items-center justify-center p-3 md:p-4 overflow-hidden">
|
|
<div class="fixed inset-0 z-0">
|
|
<div class="absolute top-1/4 left-1/4 w-48 h-48 md:w-64 md:h-64 bg-primary/20 rounded-full filter blur-3xl"></div>
|
|
<div class="absolute bottom-1/3 right-1/3 w-64 h-64 md:w-80 md:h-80 bg-secondary/20 rounded-full filter blur-3xl"></div>
|
|
</div>
|
|
<div class="relative z-10 w-full max-w-md">
|
|
<div id="mask" class="mask-appear absolute inset-0 bg-dark rounded-2xl flex items-center justify-center shadow-2xl border border-gray-800 z-30 p-3">
|
|
<div class="text-center w-full max-w-xs">
|
|
<div class="w-28 h-28 md:w-32 md:h-32 mx-auto mb-5 md:mb-6 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center">
|
|
<i class="fa fa-user-secret text-4xl md:text-5xl text-white"></i>
|
|
</div>
|
|
<h2 class="text-xl md:text-2xl font-bold mb-2 glitch">识别中...</h2>
|
|
<p class="text-gray-400 text-sm md:text-base glitch">请稍候，正在获取个人信息</p>
|
|
<div class="mt-5 md:mt-6 w-full bg-gray-800 h-2 rounded-full overflow-hidden">
|
|
<div id="progress-bar" class="h-full bg-gradient-to-r from-primary to-secondary w-0 transition-all duration-1000"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="card" class="card-appear bg-dark rounded-2xl shadow-2xl overflow-hidden border border-gray-800 z-20">
|
|
<div class="h-28 md:h-32 bg-gradient-to-r from-primary to-secondary relative">
|
|
<div class="absolute -bottom-14 left-6 md:-bottom-16 md:left-8 w-28 h-28 md:w-32 md:h-32 rounded-full border-4 border-dark overflow-hidden">
|
|
<img id="UserHeadPng" src="https://picsum.photos/id/64/200/200" alt="个人头像" class="w-full h-full object-cover">
|
|
</div>
|
|
</div>
|
|
<div class="pt-16 md:pt-20 pb-5 md:pb-6 px-4 md:px-6">
|
|
<div class="text-right mb-5 md:mb-6" id="UserJob"></div>
|
|
<h1 id="UserName" class="text-xl md:text-2xl font-bold mb-1">WHO I AM</h1>
|
|
<p id="UserPersonalSignature" class="text-gray-400 text-sm md:text-base mb-5 md:mb-6">WHAT WAS ME</p>
|
|
<div class="space-y-3 md:space-y-4 mb-6 md:mb-8">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center mr-3 md:mr-4 touch-btn"><i class="fa fa-envelope text-primary"></i></div>
|
|
<div><p class="text-gray-400 text-xs md:text-sm">邮箱</p><p id="UserEmail" class="text-sm md:text-base"></p></div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center mr-3 md:mr-4 touch-btn"><i class="fa fa-phone text-primary"></i></div>
|
|
<div><p class="text-gray-400 text-xs md:text-sm">电话</p><p id="UserTele" class="text-sm md:text-base"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded',()=>{const progressBar=document.getElementById('progress-bar');const mask=document.getElementById('mask');setTimeout(()=>{progressBar.style.width='100%';setTimeout(()=>{mask.classList.add('mask-disappear')},1200)},500);document.addEventListener('dblclick',(e)=>{e.preventDefault()},{passive:false})});const urlParams=new URLSearchParams(window.location.search);const UserUUID=urlParams.get('UserUUID');const UserName=urlParams.get('UserName');if(UserUUID){Adder="UserUUID="+UserUUID}if(UserName){Adder="UserName="+UserName}fetch("https://ugm.gvsds.com/API/UserInfo?"+Adder).then(response=>response.json()).then(data=>{document.getElementById("UserName").innerHTML=data.UserName;document.getElementById("UserEmail").innerHTML=data.UserEmail;document.getElementById("UserTele").innerHTML=data.UserTele;document.getElementById("UserPersonalSignature").innerHTML=data.UserPersonalSignature;document.getElementById("UserHeadPng").src="https://ugm.gvsds.com/GetArgsUserAvatar?UserUUID="+data.UserUUID;for(let i=0;i<data.UserJob.length;i++){document.getElementById("UserJob").innerHTML+=`<span style="display: inline-block; margin-bottom: 0.5rem;"class="bg-primary/20 text-primary px-2.5 py-1 rounded-full text-xs md:text-sm font-medium">${data.UserJob[i]}</span>`}}).catch(error=>{console.error('Error:',error)});
|
|
</script>
|
|
</body>
|
|
</html> |