Initial commit: homepage code
This commit is contained in:
Jason
276
index.html
Normal file
276
index.html
Normal 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
93
script.js
Normal 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
295
style.css
Normal 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);
|
||||
}
|
||||
Reference in New Issue
Block a user