1051 lines
36 KiB
HTML
1051 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GVSDS 身份验证系统 | verify.gvsds.com</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-dark: #0a0a12;
|
|
--primary-blue: #00f0ff;
|
|
--secondary-blue: #0066ff;
|
|
--accent-glow: rgba(0, 240, 255, 0.3);
|
|
--text-primary: #e0e0e0;
|
|
--text-secondary: #a0a0a0;
|
|
--neon-pink: #ff2a6d;
|
|
--grid-color: rgba(0, 240, 255, 0.1);
|
|
--tab-active: #00c0ff;
|
|
--tab-inactive: rgba(0, 102, 255, 0.3);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--primary-dark);
|
|
color: var(--text-primary);
|
|
font-family: 'Font-Cyber', 'Orbitron', sans-serif;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
/* 增强背景效果 */
|
|
.enhanced-background {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -3;
|
|
}
|
|
|
|
.grid-pattern {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
|
|
linear-gradient(var(--grid-color) 1px, transparent 1px);
|
|
background-size: 30px 30px;
|
|
opacity: 0.3;
|
|
z-index: 1;
|
|
animation: gridMove 60s linear infinite;
|
|
}
|
|
|
|
.neon-glow {
|
|
position: absolute;
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at center, var(--primary-blue), transparent 70%);
|
|
opacity: 0.1;
|
|
z-index: 2;
|
|
animation: float 30s ease-in-out infinite;
|
|
}
|
|
|
|
.neon-glow:nth-child(2) {
|
|
background: radial-gradient(circle at center, var(--neon-pink), transparent 70%);
|
|
opacity: 0.08;
|
|
animation-delay: 5s;
|
|
}
|
|
|
|
.neon-glow:nth-child(3) {
|
|
background: radial-gradient(circle at center, var(--secondary-blue), transparent 70%);
|
|
opacity: 0.07;
|
|
animation-delay: 10s;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
width: 90%;
|
|
max-width: 1200px;
|
|
height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.id-card {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 80%;
|
|
background: linear-gradient(145deg, #0f0f1a, #05050c);
|
|
border-radius: 20px;
|
|
box-shadow:
|
|
0 0 50px var(--accent-glow),
|
|
0 0 100px var(--primary-blue),
|
|
inset 0 0 20px rgba(0, 240, 255, 0.1);
|
|
border: 1px solid var(--primary-blue);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 30px;
|
|
z-index: 2;
|
|
transition: transform 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.id-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.id-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background:
|
|
linear-gradient(45deg, transparent 48%, var(--primary-blue) 49%, var(--primary-blue) 51%, transparent 52%),
|
|
linear-gradient(-45deg, transparent 48%, var(--primary-blue) 49%, var(--primary-blue) 51%, transparent 52%);
|
|
background-size: 20px 20px;
|
|
opacity: 0.1;
|
|
transform: rotate(0deg);
|
|
animation: gridMove 60s linear infinite;
|
|
z-index: -1;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
color: var(--primary-blue);
|
|
text-shadow: 0 0 10px var(--primary-blue);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.verify-status {
|
|
font-size: 0.9rem;
|
|
color: var(--primary-blue);
|
|
border: 1px solid var(--primary-blue);
|
|
padding: 5px 15px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 0 10px var(--accent-glow);
|
|
}
|
|
|
|
.hero-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.avatar {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #00f0ff, #0066ff);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 0 30px var(--accent-glow);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -10px;
|
|
right: -10px;
|
|
bottom: -10px;
|
|
border-radius: 50%;
|
|
border: 2px dashed var(--primary-blue);
|
|
opacity: 0.5;
|
|
animation: spin 20s linear infinite;
|
|
}
|
|
|
|
.avatar-inner {
|
|
width: 140px;
|
|
height: 140px;
|
|
border-radius: 50%;
|
|
background-color: var(--primary-dark);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 3rem;
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 2.5rem;
|
|
margin: 10px 0;
|
|
background: linear-gradient(to right, #00f0ff, #0066ff);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: 0 0 15px var(--accent-glow);
|
|
}
|
|
|
|
.user-title {
|
|
font-size: 1.2rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 30px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.clearance-level {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.clearance-label {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 5px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.clearance-value {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(to right, #00f0ff, #0066ff);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
position: relative;
|
|
}
|
|
|
|
.clearance-value::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: linear-gradient(to right, transparent, var(--primary-blue), transparent);
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.authority {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.authority strong {
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.authentication {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.authentication strong {
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.scanlines {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
linear-gradient(to bottom,
|
|
rgba(0, 240, 255, 0.03) 0%,
|
|
rgba(0, 240, 255, 0) 2%);
|
|
background-size: 100% 4px;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
}
|
|
|
|
.corner {
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-color: var(--primary-blue);
|
|
border-style: solid;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.corner-tl {
|
|
top: 20px;
|
|
left: 20px;
|
|
border-width: 3px 0 0 3px;
|
|
}
|
|
|
|
.corner-tr {
|
|
top: 20px;
|
|
right: 20px;
|
|
border-width: 3px 3px 0 0;
|
|
}
|
|
|
|
.corner-bl {
|
|
bottom: 20px;
|
|
left: 20px;
|
|
border-width: 0 0 3px 3px;
|
|
}
|
|
|
|
.corner-br {
|
|
bottom: 20px;
|
|
right: 20px;
|
|
border-width: 0 3px 3px 0;
|
|
}
|
|
|
|
@keyframes gridMove {
|
|
0% { transform: rotate(0deg) translate(0, 0); }
|
|
100% { transform: rotate(360deg) translate(0, 0); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(20px, -20px) scale(1.05); }
|
|
50% { transform: translate(0, 20px) scale(1); }
|
|
75% { transform: translate(-20px, -10px) scale(1.03); }
|
|
}
|
|
|
|
.glow {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: radial-gradient(circle at center, var(--primary-blue), transparent 70%);
|
|
opacity: 0.05;
|
|
z-index: -1;
|
|
}
|
|
|
|
.particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
background-color: var(--primary-blue);
|
|
border-radius: 50%;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* 全屏标签页样式 */
|
|
.fullscreen-tabs {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(10, 10, 18, 0.95);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
z-index: 100;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.5s ease;
|
|
overflow: auto;
|
|
}
|
|
|
|
.fullscreen-tabs.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.tabs-header {
|
|
width: 100%;
|
|
padding: 20px 50px;
|
|
background: linear-gradient(145deg, #121220, #080810);
|
|
border-bottom: 1px solid var(--primary-blue);
|
|
display: flex;
|
|
justify-content: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 101;
|
|
box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
|
|
}
|
|
|
|
.tab {
|
|
padding: 12px 30px;
|
|
margin: 0 10px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
color: var(--text-secondary);
|
|
border-bottom: 3px solid transparent;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -3px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: linear-gradient(to right, transparent, var(--primary-blue), transparent);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.tab.active {
|
|
color: var(--primary-blue);
|
|
border-bottom-color: var(--tab-active);
|
|
}
|
|
|
|
.tab.active::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.tabs-content {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
padding: 20px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.tab-panel {
|
|
display: none;
|
|
animation: fadeIn 0.5s ease;
|
|
}
|
|
|
|
.tab-panel.active {
|
|
display: block;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 2rem;
|
|
margin: 0 0 30px;
|
|
color: var(--primary-blue);
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 0;
|
|
width: 100px;
|
|
height: 3px;
|
|
background: linear-gradient(to right, transparent, var(--primary-blue), transparent);
|
|
}
|
|
|
|
.authority-details {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.authority-card {
|
|
background: linear-gradient(145deg, #121220, #080810);
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
border: 1px solid rgba(0, 240, 255, 0.3);
|
|
box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.authority-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.authority-card h3 {
|
|
font-size: 1.5rem;
|
|
color: var(--primary-blue);
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px dashed rgba(0, 240, 255, 0.5);
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.authority-card ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.authority-card li {
|
|
margin: 10px 0;
|
|
position: relative;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.authority-card li::before {
|
|
content: "→";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.issuer-info {
|
|
background: linear-gradient(145deg, #121220, #080810);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
border: 1px solid rgba(0, 240, 255, 0.3);
|
|
box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.issuer-info h3 {
|
|
font-size: 1.8rem;
|
|
color: var(--primary-blue);
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.issuer-details {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
}
|
|
|
|
.issuer-item {
|
|
padding: 15px 0;
|
|
border-bottom: 1px dashed rgba(0, 240, 255, 0.2);
|
|
}
|
|
|
|
/*.issuer-item:last-child {
|
|
border-bottom: none;
|
|
}*/
|
|
|
|
.issuer-label {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.issuer-value {
|
|
color: var(--primary-blue);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.certificate-section {
|
|
background: linear-gradient(145deg, #121220, #080810);
|
|
border-radius: 15px;
|
|
padding: 40px;
|
|
border: 1px solid rgba(0, 240, 255, 0.3);
|
|
box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.certificate-title {
|
|
font-size: 2.5rem;
|
|
color: var(--primary-blue);
|
|
margin-bottom: 20px;
|
|
text-shadow: 0 0 15px var(--accent-glow);
|
|
}
|
|
|
|
.certificate-subtitle {
|
|
font-size: 1.2rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.certificate-content {
|
|
text-align: left;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.certificate-content p {
|
|
margin: 15px 0;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.certificate-content strong {
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.signature-section {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 50px;
|
|
padding-top: 30px;
|
|
border-top: 1px dashed rgba(0, 240, 255, 0.3);
|
|
}
|
|
|
|
.signature {
|
|
font-style: italic;
|
|
font-size: 2rem;
|
|
color: var(--neon-pink);
|
|
text-shadow: 0 0 15px var(--neon-pink);
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.signature::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: linear-gradient(to right, transparent, var(--neon-pink), transparent);
|
|
}
|
|
|
|
.security-details {
|
|
background: linear-gradient(145deg, #121220, #080810);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
border: 1px solid rgba(0, 240, 255, 0.3);
|
|
box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
|
|
}
|
|
|
|
.security-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.security-item {
|
|
position: relative;
|
|
padding-left: 30px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px dashed rgba(0, 240, 255, 0.2);
|
|
}
|
|
|
|
/*.security-item:last-child {
|
|
border-bottom: none;
|
|
}*/
|
|
|
|
.security-item::before {
|
|
content: "✦";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--neon-pink);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.security-label {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.security-value {
|
|
color: var(--primary-blue);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.close-button {
|
|
position: fixed;
|
|
top: 30px;
|
|
right: 30px;
|
|
background: none;
|
|
border: 1px solid var(--primary-blue);
|
|
color: var(--primary-blue);
|
|
padding: 10px 20px;
|
|
border-radius: 20px;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 0 10px var(--accent-glow);
|
|
z-index: 102;
|
|
}
|
|
|
|
.close-button:hover {
|
|
background-color: var(--primary-blue);
|
|
color: var(--primary-dark);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
/* 自定义滚动条 */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--primary-dark);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(to bottom, var(--primary-blue), var(--secondary-blue));
|
|
border-radius: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(to bottom, #00d0ff, #0044ff);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 增强的背景元素 -->
|
|
<div class="enhanced-background">
|
|
<div class="grid-pattern"></div>
|
|
<div class="neon-glow" style="top: 20%; left: 10%;"></div>
|
|
<div class="neon-glow" style="top: 50%; right: 15%;"></div>
|
|
<div class="neon-glow" style="bottom: 30%; left: 25%;"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="id-card" id="identityCard">
|
|
<div class="glow"></div>
|
|
<div class="scanlines"></div>
|
|
|
|
<div class="corner corner-tl"></div>
|
|
<div class="corner corner-tr"></div>
|
|
<div class="corner corner-bl"></div>
|
|
<div class="corner corner-br"></div>
|
|
|
|
<div class="header">
|
|
<div class="logo">GVSDS VERIFY</div>
|
|
<div class="verify-status">IDENTITY CONFIRMED</div>
|
|
</div>
|
|
|
|
<div class="hero-section">
|
|
<div class="avatar">
|
|
<div class="avatar-inner">G</div>
|
|
</div>
|
|
|
|
<h1 class="user-name">{{ UserName }}</h1>
|
|
<p class="user-title">{{ VerifyStatus }}</p>
|
|
|
|
<div class="clearance-level">
|
|
<div class="clearance-label">CLEARANCE LEVEL</div>
|
|
<div class="clearance-value">{{ PermissionWord }} / {{ Permission }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<div class="authority">
|
|
<strong>AUTHORITY:</strong> FULL SYSTEM ACCESS<br>
|
|
DATA STREAM PRIVILEGES: UNRESTRICTED
|
|
</div>
|
|
<div class="authentication">
|
|
<strong>AUTHENTICATED:</strong> {{ UserLastLoginDate }} UTC<br>
|
|
VERIFICATION CODE: GVSDS-PAH-5.0-X9K4M
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 全屏标签页 -->
|
|
<div class="fullscreen-tabs" id="fullscreenTabs">
|
|
<button class="close-button" id="closeTabs">关闭</button>
|
|
<div class="tabs-header">
|
|
<div class="tab active" data-tab="certificate">权限证书</div>
|
|
<div class="tab" data-tab="authority">职权内容</div>
|
|
<div class="tab" data-tab="issuer">签发机构</div>
|
|
<div class="tab" data-tab="signature">个人签名</div>
|
|
<div class="tab" data-tab="security">安全详情</div>
|
|
</div>
|
|
<div class="tabs-content">
|
|
<!-- 权限证书标签页 -->
|
|
<div class="tab-panel active" id="certificate">
|
|
<h2 class="section-title">系统管理权限证书</h2>
|
|
<div class="certificate-section">
|
|
<div class="certificate-title">系统管理权限证书</div>
|
|
<div class="certificate-subtitle">证书编号: GVSDS-CERT-{{ UserUUID }}</div>
|
|
<div class="certificate-content">
|
|
<p>兹证明 {{ UserName }} 已通过所有安全验证流程。并且可以使用安全证书进行 T 设备登录,此证书代表持有者具备以下能力:</p>
|
|
<ul>
|
|
{% for item in PermissionWork %}
|
|
<li><strong>[管理权限] </strong>{{ item }}</li>
|
|
{% endfor %}
|
|
{% for item in PermissionWork2 %}
|
|
<li><strong>[安全权限] </strong>{{ item }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<p>此证书是持有者权限的有效证明,系统将根据此证书的权限级别提供相应的服务与资源访问。</p>
|
|
</div>
|
|
<div class="certificate-subtitle">
|
|
签发日期: {{ UserCreateTime }} • 有效期至: 永久(定期审查)
|
|
</div>
|
|
<div class="signature-section">
|
|
<div class="signature">GVSDSVERIFYCERT</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 职权内容标签页 -->
|
|
<div class="tab-panel" id="authority">
|
|
<h2 class="section-title">系统管理权限详情</h2>
|
|
<div class="authority-details">
|
|
<div class="authority-card">
|
|
<h3>职权内容</h3>
|
|
<ul>
|
|
{% for item in UserJob %}
|
|
<li>{{ item }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
<div class="authority-card">
|
|
<h3>管理权限</h3>
|
|
<ul>
|
|
{% for item in PermissionWork %}
|
|
<li>{{ item }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
<div class="authority-card">
|
|
<h3>安全权限</h3>
|
|
<ul>
|
|
{% for item in PermissionWork2 %}
|
|
<li>{{ item }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 签发机构标签页 -->
|
|
<div class="tab-panel" id="issuer">
|
|
<h2 class="section-title">证书签发机构信息</h2>
|
|
<div class="issuer-info">
|
|
<h3>UGM</h3>
|
|
<div class="issuer-details">
|
|
<div class="issuer-item">
|
|
<div class="issuer-label">机构全称</div>
|
|
<div class="issuer-value">User Group Manager</div>
|
|
</div>
|
|
<div class="issuer-item">
|
|
<div class="issuer-label">成立时间</div>
|
|
<div class="issuer-value">2017年1月1日</div>
|
|
</div>
|
|
<div class="issuer-item">
|
|
<div class="issuer-label">机构性质</div>
|
|
<div class="issuer-value">T 主要设施</div>
|
|
</div>
|
|
<div class="issuer-item">
|
|
<div class="issuer-label">管理范围</div>
|
|
<div class="issuer-value">全部 T 设备组权限与 G 用户组权限</div>
|
|
</div>
|
|
<div class="issuer-item">
|
|
<div class="issuer-label">主要职责</div>
|
|
<div class="issuer-value">制定安全策略、管理用户权限</div>
|
|
</div>
|
|
<div class="issuer-item">
|
|
<div class="issuer-label">认证体系</div>
|
|
<div class="issuer-value">基于SHA256、区块链的认证系统</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 个人签名标签页 -->
|
|
<div class="tab-panel" id="signature">
|
|
<h2 class="section-title">数字签名与身份验证</h2>
|
|
|
|
<div class="certificate-section" style="text-align: center; padding: 50px;">
|
|
<div class="certificate-title" style="margin-bottom: 40px;">数字签名详情</div>
|
|
|
|
<div class="signature-section" style="justify-content: center; margin-top: 20px;">
|
|
<div class="signature" style="font-size: 3rem; margin-bottom: 30px;">{{ UserName }}</div>
|
|
</div>
|
|
|
|
<div style="margin: 30px 0; max-width: 800px; margin: 30px auto;">
|
|
<div class="section-title" style="margin-bottom: 20px; text-align: center;">签名验证信息</div>
|
|
<div class="security-details">
|
|
<ul class="security-list">
|
|
<li class="security-item">
|
|
<div class="security-label">签名算法</div>
|
|
<div class="security-value">GVSDS-PAH-256</div>
|
|
</li>
|
|
<li class="security-item">
|
|
<div class="security-label">签名哈希</div>
|
|
<div class="security-value">SHA-512</div>
|
|
</li>
|
|
<li class="security-item">
|
|
<div class="security-label">签名时间</div>
|
|
<div class="security-value">{{ UserCreateTime }} UTC</div>
|
|
</li>
|
|
<li class="security-item">
|
|
<div class="security-label">最近登录</div>
|
|
<div class="security-value">{{ UserLastLoginDate }} UTC</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 安全详情标签页 -->
|
|
<div class="tab-panel" id="security">
|
|
<h2 class="section-title">安全验证与权限详情</h2>
|
|
<div class="authority-details">
|
|
<div class="security-details">
|
|
<ul class="security-list">
|
|
<li class="security-item">
|
|
<div class="security-label">身份验证方式</div>
|
|
<div class="security-value">SHA256 PWD</div>
|
|
</li>
|
|
<li class="security-item">
|
|
<div class="security-label">验证时间</div>
|
|
<div class="security-value">{{ UserCreateTime }} UTC</div>
|
|
</li>
|
|
<li class="security-item">
|
|
<div class="security-label">权限等级</div>
|
|
<div class="security-value">{{ PermissionWord }} / {{ Permission }}</div>
|
|
</li>
|
|
<li class="security-item">
|
|
<div class="security-label">权限有效期</div>
|
|
<div class="security-value">永久有效 (需定期复核)</div>
|
|
</li>
|
|
<li class="security-item">
|
|
<div class="security-label">最近登录</div>
|
|
<div class="security-value">{{ UserLastLoginDate }} UTC</div>
|
|
</li>
|
|
<li class="security-item">
|
|
<div class="security-label">安全审计</div>
|
|
<div class="security-value">通过最新安全审计检查</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 创建更多粒子
|
|
const particlesContainer = document.createElement('div');
|
|
particlesContainer.className = 'particles';
|
|
document.querySelector('.container').appendChild(particlesContainer);
|
|
|
|
for (let i = 0; i < 50; i++) {
|
|
createParticle(particlesContainer);
|
|
}
|
|
|
|
function createParticle(container) {
|
|
const particle = document.createElement('div');
|
|
particle.className = 'particle';
|
|
|
|
const size = Math.random() * 4 + 1;
|
|
const posX = Math.random() * 100;
|
|
const posY = Math.random() * 100;
|
|
const opacity = Math.random() * 0.4 + 0.1;
|
|
const animationDuration = Math.random() * 25 + 15;
|
|
const hue = Math.random() * 200 + 140; // 蓝绿色调范围
|
|
|
|
particle.style.width = `${size}px`;
|
|
particle.style.height = `${size}px`;
|
|
particle.style.left = `${posX}%`;
|
|
particle.style.top = `${posY}%`;
|
|
particle.style.opacity = opacity;
|
|
particle.style.animation = `float ${animationDuration}s linear infinite`;
|
|
particle.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
|
|
|
|
container.appendChild(particle);
|
|
|
|
// 随机时间后重新创建粒子,实现动态效果
|
|
setTimeout(() => {
|
|
particle.remove();
|
|
createParticle(container);
|
|
}, animationDuration * 1000);
|
|
}
|
|
|
|
// 添加浮动动画
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
@keyframes float {
|
|
0% { transform: translate(0, 0) scale(1); }
|
|
50% {
|
|
transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px) scale(1.05);
|
|
opacity: ${Math.random() * 0.6 + 0.1};
|
|
}
|
|
100% { transform: translate(0, 0) scale(1); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// 动态网格动画
|
|
let angle = 0;
|
|
setInterval(() => {
|
|
angle = (angle + 0.1) % 360;
|
|
document.querySelector('.id-card::before').style.transform = `rotate(${angle}deg)`;
|
|
}, 100);
|
|
|
|
// 全屏标签页功能
|
|
const identityCard = document.getElementById('identityCard');
|
|
const fullscreenTabs = document.getElementById('fullscreenTabs');
|
|
const closeTabs = document.getElementById('closeTabs');
|
|
const tabs = document.querySelectorAll('.tab');
|
|
const tabPanels = document.querySelectorAll('.tab-panel');
|
|
|
|
identityCard.addEventListener('click', () => {
|
|
fullscreenTabs.classList.add('active');
|
|
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
|
});
|
|
|
|
closeTabs.addEventListener('click', () => {
|
|
fullscreenTabs.classList.remove('active');
|
|
document.body.style.overflow = ''; // 恢复背景滚动
|
|
});
|
|
|
|
// 标签页切换功能
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
// 移除所有标签的激活状态
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
tabPanels.forEach(p => p.classList.remove('active'));
|
|
|
|
// 添加当前标签的激活状态
|
|
tab.classList.add('active');
|
|
const tabId = tab.getAttribute('data-tab');
|
|
document.getElementById(tabId).classList.add('active');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |