jason/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: homepage code

Browse Source
This commit is contained in:
Jason
2026-03-01 16:44:49 +08:00
commit c4ed8d8705
3 changed files with 664 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
index.html Normal file
View File

@@ -0,0 +1,276 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zzs'homepage</title>
<meta name="description" content="专属应用与服务导航">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>zzs'homepage</h1>
</header>
<div class="nav-grid">
<!-- 分组1: WTS -->
<div class="nav-group">
<h2 class="group-title">WTS</h2>
<div class="links">
<a href="https://wiki.mokahr.com" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
</div>
<span>wiki</span>
</div>
</a>
<a href="https://jira.mokahr.com" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="9" y1="3" x2="9" y2="21"></line>
</svg>
</div>
<span>jira</span>
</div>
</a>
<a href="https://login.xiaoshouyi.com" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<span>crm</span>
</div>
</a>
<a href="https://sslvpn.mokahr.com:10000/portal" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
</div>
<span>vpn</span>
</div>
</a>
<a href="https://admin.mokahr.com/org/common/connector-template/12780/task/12336" target="_blank"
class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"></circle>
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
</path>
</svg>
</div>
<span>admin cam</span>
</div>
</a>
</div>
</div>
<!-- 分组2: PP -->
<div class="nav-group">
<h2 class="group-title">PP</h2>
<div class="links">
<a href="https://core.mokahr.com/user/login" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z">
</path>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
<line x1="12" y1="22.08" x2="12" y2="12"></line>
</svg>
</div>
<span>STD PP</span>
</div>
</a>
<a href="https://zeus-corp.mokahr.com/zeus/user/login" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M3 18v-6a9 9 0 0 1 18 0v6"></path>
<path
d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z">
</path>
</svg>
</div>
<span>STD PP CSM</span>
</div>
</a>
<a href="https://people.mokahr.com/docs/api/view/v1.html#1-3" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
</div>
<span>STD PP API</span>
</div>
</a>
<a href="https://app135148.dingtalkoxm.com/user/login" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
</svg>
</div>
<span>DD PP</span>
</div>
</a>
<a href="https://people-csm.eapps.dingtalkcloud.com/zeus/home" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<polyline points="17 11 19 13 23 9"></polyline>
</svg>
</div>
<span>DD PP CSM</span>
</div>
</a>
<a href="https://alidocs.dingtalk.com/i/p/Y7kmbMMwlZrpKXLq/docs/G1DKw2zgV2RXd7vncKXxRomnVB5r9YAn?newTab=true&dontjump=true"
target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
</div>
<span>DD PP API</span>
</div>
</a>
</div>
</div>
<!-- 分组3: ATS -->
<div class="nav-group">
<h2 class="group-title">ATS</h2>
<div class="links">
<a href="https://app.mokahr.com/" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
<path
d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z">
</path>
</svg>
</div>
<span>STD ATS</span>
</div>
</a>
<a href="https://zeus-corp.mokahr.com/zeus/user/login" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
</path>
</svg>
</div>
<span>STD ATS CSM</span>
</div>
</a>
<a href="https://people.mokahr.com/docs/api/view/v1.html#1-3" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
</svg>
</div>
<span>STD ATS API</span>
</div>
</a>
<a href="https://app135149.dingtalkoxm.com/login" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 12 12 17 22 12"></polyline>
<polyline points="2 17 12 22 22 17"></polyline>
</svg>
</div>
<span>DD ATS</span>
</div>
</a>
<a href="https://ats-csm.eapps.dingtalkcloud.com/" target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
<line x1="9" y1="9" x2="9.01" y2="9"></line>
<line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg>
</div>
<span>DD ATS CSM</span>
</div>
</a>
<a href="https://alidocs.dingtalk.com/i/p/Y7kmbMMwlZrpKXLq/docs/Gl6Pm2Db8D3mzPQGsga7pzEbJxLq0Ee4?newTab=true&dontjump=true"
target="_blank" class="link-item">
<div class="link-content">
<div class="icon-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
<rect x="9" y="9" width="6" height="6"></rect>
<line x1="9" y1="1" x2="9" y2="4"></line>
<line x1="15" y1="1" x2="15" y2="4"></line>
<line x1="9" y1="20" x2="9" y2="23"></line>
<line x1="15" y1="20" x2="15" y2="23"></line>
<line x1="20" y1="9" x2="23" y2="9"></line>
<line x1="20" y1="14" x2="23" y2="14"></line>
<line x1="1" y1="9" x2="4" y2="9"></line>
<line x1="1" y1="14" x2="4" y2="14"></line>
</svg>
</div>
<span>DD ATS API</span>
</div>
</a>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

93
script.js Normal file
View File

@@ -0,0 +1,93 @@
// Particle background effect
const canvas = document.createElement('canvas');
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.width = '100vw';
canvas.style.height = '100vh';
canvas.style.zIndex = '-2';
canvas.style.pointerEvents = 'none';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
let particles = [];
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 2;
this.speedX = Math.random() * 1 - 0.5;
this.speedY = Math.random() * 1 - 0.5;
this.opacity = Math.random() * 0.5 + 0.1;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x > canvas.width) this.x = 0;
if (this.x < 0) this.x = canvas.width;
if (this.y > canvas.height) this.y = 0;
if (this.y < 0) this.y = canvas.height;
}
draw() {
ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
function init() {
for (let i = 0; i < 80; i++) {
particles.push(new Particle());
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
}
requestAnimationFrame(animate);
}
init();
animate();
// 3D Tilt effect on cards
const cards = document.querySelectorAll('.nav-group');
cards.forEach(card => {
card.addEventListener('mousemove', e => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = ((y - centerY) / centerY) * -4;
const rotateY = ((x - centerX) / centerX) * 4;
// Apply inline styles. Combine with CSS transform if needed.
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-8px)`;
card.style.transition = 'none';
});
card.addEventListener('mouseleave', () => {
card.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
});
card.addEventListener('mouseenter', () => {
card.style.transition = 'all 0.1s ease';
});
});

295
style.css Normal file
View File

@@ -0,0 +1,295 @@
:root {
--bg-color: #0b0f19;
--card-bg: rgba(25, 30, 45, 0.4);
--card-border: rgba(255, 255, 255, 0.08);
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--accent-1: #3b82f6;
--accent-2: #8b5cf6;
--accent-3: #10b981;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Outfit', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow-x: hidden;
position: relative;
/* Reduced padding to keep things tighter */
padding: 2rem 1rem;
}
/* Background Gradients */
body::before,
body::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
filter: blur(120px);
z-index: -1;
opacity: 0.4;
animation: float 20s infinite ease-in-out alternate;
}
body::before {
background: radial-gradient(circle, var(--accent-1) 0%, rgba(0, 0, 0, 0) 70%);
top: -100px;
left: -100px;
}
body::after {
background: radial-gradient(circle, var(--accent-2) 0%, rgba(0, 0, 0, 0) 70%);
bottom: -100px;
right: -100px;
animation-delay: -10s;
}
@keyframes float {
0% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(5%, 5%) scale(1.1);
}
100% {
transform: translate(-5%, -5%) scale(1);
}
}
.container {
/* Scaled down width */
max-width: 1000px;
width: 100%;
}
header {
text-align: center;
/* Scaled down margin */
margin-bottom: 3rem;
}
h1 {
/* Scaled down font */
font-size: 2.8rem;
font-weight: 600;
letter-spacing: -1px;
background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0;
}
.nav-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Scaled down gap */
gap: 1.5rem;
}
@media (max-width: 1024px) {
.nav-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
h1 {
font-size: 2.2rem;
}
.nav-grid {
grid-template-columns: 1fr;
}
}
.nav-group {
background: var(--card-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--card-border);
/* Scaled down radius and padding */
border-radius: 20px;
padding: 1.5rem;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
flex-direction: column;
}
.nav-group:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
background: rgba(30, 36, 54, 0.5);
border-color: rgba(255, 255, 255, 0.15);
}
.group-title {
/* Scaled down font and margin */
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 1.2rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.group-title::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
box-shadow: 0 0 12px currentColor;
}
.nav-group:nth-child(1) .group-title {
color: #60a5fa;
}
.nav-group:nth-child(1) .group-title::before {
background: #60a5fa;
}
.nav-group:nth-child(2) .group-title {
color: #c084fc;
}
.nav-group:nth-child(2) .group-title::before {
background: #c084fc;
}
.nav-group:nth-child(3) .group-title {
color: #34d399;
}
.nav-group:nth-child(3) .group-title::before {
background: #34d399;
}
.links {
display: flex;
flex-direction: column;
/* Scaled down gap */
gap: 0.8rem;
}
.link-item {
display: flex;
justify-content: space-between;
align-items: center;
/* Scaled down padding */
padding: 0.8rem 1rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
text-decoration: none;
color: var(--text-primary);
font-weight: 400;
border: 1px solid rgba(255, 255, 255, 0.02);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.link-content {
display: flex;
align-items: center;
gap: 0.75rem;
position: relative;
z-index: 1;
}
.icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
color: var(--text-secondary);
transition: all 0.3s ease;
}
.icon-wrapper svg {
width: 16px;
height: 16px;
}
.link-item::after {
content: '↗';
font-family: sans-serif;
font-size: 1.1rem;
opacity: 0.4;
transition: opacity 0.3s, transform 0.3s;
z-index: 1;
}
.link-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
z-index: 0;
}
.link-item:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.1);
transform: translateX(4px);
color: #fff;
}
/* Specific hover colors for icon wrapper and item border */
.nav-group:nth-child(1) .link-item:hover {
box-shadow: -3px 0 0 #60a5fa;
}
.nav-group:nth-child(1) .link-item:hover .icon-wrapper {
background: rgba(96, 165, 250, 0.2);
color: #60a5fa;
}
.nav-group:nth-child(2) .link-item:hover {
box-shadow: -3px 0 0 #c084fc;
}
.nav-group:nth-child(2) .link-item:hover .icon-wrapper {
background: rgba(192, 132, 252, 0.2);
color: #c084fc;
}
.nav-group:nth-child(3) .link-item:hover {
box-shadow: -3px 0 0 #34d399;
}
.nav-group:nth-child(3) .link-item:hover .icon-wrapper {
background: rgba(52, 211, 153, 0.2);
color: #34d399;
}
.link-item:hover::before {
transform: translateX(100%);
}
.link-item:hover::after {
opacity: 1;
transform: translateX(2px) translateY(-2px);
}