dsrptlab/hr_promo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update HR flow UI

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-14 12:38:46 +07:00
parent 5e7ef93c12
commit 9bf3b87f36
4 changed files with 725 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

938
app/app.vue
View File

File diff suppressed because it is too large Load Diff

92
app/assets/css/main.css
View File

@@ -43,31 +43,35 @@ body,
body {
font-family: "IBM Plex Sans", sans-serif;
background:
radial-gradient(1200px 600px at 10% 10%, rgba(219, 39, 119, 0.16), transparent 60%),
radial-gradient(900px 500px at 90% 15%, rgba(250, 204, 21, 0.2), transparent 55%),
radial-gradient(900px 700px at 50% 100%, rgba(74, 222, 128, 0.12), transparent 60%),
oklch(98% 0 0);
background: #f9f6ef;
}
.glass-card {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
backdrop-filter: blur(18px);
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow:
0 24px 40px rgba(27, 32, 58, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
backdrop-filter: blur(24px) saturate(140%);
}
.glass-pane {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(18px);
background: rgba(255, 255, 255, 0.42);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow:
0 16px 28px rgba(27, 32, 58, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px) saturate(130%);
}
.section-title {
font-family: "Space Grotesk", sans-serif;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.01em;
font-size: 2.1rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
color: rgb(15 23 42);
text-shadow: 0 6px 20px rgba(99, 102, 241, 0.18);
}
.radar-label {
@@ -76,3 +80,61 @@ body {
text-transform: uppercase;
color: rgb(100 116 139);
}
.voice-wave {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 96px;
}
.voice-bar {
width: 6px;
height: 32px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(56, 189, 248, 0.9), rgba(14, 165, 233, 0.3));
animation: voice-wave 1.6s ease-in-out infinite;
}
.voice-bar:nth-child(2) { animation-delay: -1.4s; height: 26px; }
.voice-bar:nth-child(3) { animation-delay: -1.2s; height: 40px; }
.voice-bar:nth-child(4) { animation-delay: -1.0s; height: 54px; }
.voice-bar:nth-child(5) { animation-delay: -0.8s; height: 68px; }
.voice-bar:nth-child(6) { animation-delay: -0.6s; height: 52px; }
.voice-bar:nth-child(7) { animation-delay: -0.4s; height: 38px; }
.voice-bar:nth-child(8) { animation-delay: -0.2s; height: 28px; }
.voice-bar:nth-child(9) { animation-delay: -0.1s; height: 44px; }
.voice-bar:nth-child(10) { animation-delay: -0.05s; height: 34px; }
@keyframes voice-wave {
0%, 100% { transform: scaleY(0.6); opacity: 0.6; }
50% { transform: scaleY(1.2); opacity: 1; }
}
.bg-mesh {
background-image:
radial-gradient(1200px 600px at 10% -10%, rgba(67, 56, 118, 0.2), transparent 60%),
radial-gradient(900px 500px at 90% 10%, rgba(230, 184, 92, 0.18), transparent 60%),
linear-gradient(180deg, #f9f6ef 0%, #f2efe7 55%, #ebe8df 100%);
}
.reorder-move {
transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.reorder-enter-active,
.reorder-leave-active {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.reorder-enter-from {
opacity: 0;
transform: translateY(14px) scale(0.98);
}
.reorder-leave-to {
opacity: 0;
transform: translateY(-10px) scale(0.98);
}

39
package-lock.json generated
View File

@@ -7,6 +7,8 @@
"name": "hr",
"hasInstallScript": true,
"dependencies": {
"@formkit/auto-animate": "^0.9.0",
"echarts": "^6.0.0",
"nuxt": "^4.3.1",
"vue": "^3.5.28",
"vue-router": "^4.6.4"
@@ -966,6 +968,12 @@
"node": ">=18"
}
},
"node_modules/@formkit/auto-animate": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.9.0.tgz",
"integrity": "sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==",
"license": "MIT"
},
"node_modules/@ioredis/commands": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.5.0.tgz",
@@ -5570,6 +5578,22 @@
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
"license": "MIT"
},
"node_modules/echarts": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
"integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
"license": "Apache-2.0",
"dependencies": {
"tslib": "2.3.0",
"zrender": "6.0.0"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"license": "0BSD"
},
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -10630,6 +10654,21 @@
"engines": {
"node": ">= 14"
}
},
"node_modules/zrender": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
"integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
"license": "BSD-3-Clause",
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"license": "0BSD"
}
}
}

2
package.json
View File

@@ -10,6 +10,8 @@
"postinstall": "nuxt prepare"
},
"dependencies": {
"@formkit/auto-animate": "^0.9.0",
"echarts": "^6.0.0",
"nuxt": "^4.3.1",
"vue": "^3.5.28",
"vue-router": "^4.6.4"