Update nodejs dependencies.

This commit is contained in:
2025-12-10 21:46:20 +00:00
parent 3d5a95d7e1
commit 3a74febaf5
13 changed files with 979 additions and 1191 deletions
+801 -1010
View File
File diff suppressed because it is too large Load Diff
+7 -5
View File
@@ -9,15 +9,17 @@
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/postcss": "^4.1.17",
"@tailwindcss/vite": "^4.1.17",
"chart.js": "^4.4.1",
"vue": "^3.4.0",
"vue-router": "^4.2.5",
"chart.js": "^4.4.1"
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
"@vitejs/plugin-vue": "^6.0.2",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.32",
"tailwindcss": "^3.4.0",
"vite": "^5.0.10"
"tailwindcss": "^4.1.17",
"vite": "^7.2.7"
}
}
+1 -2
View File
@@ -1,6 +1,5 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
}
+140 -70
View File
@@ -1,78 +1,148 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
@layer components {
.glass {
@apply bg-white/70 dark:bg-gray-900/70 backdrop-blur-md border border-white/20 dark:border-white/10;
}
@theme {
--font-family-sans: 'Inter', sans-serif;
--font-family-mono: 'JetBrains Mono', monospace;
.gradient-text {
@apply bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent;
}
--color-primary-50: #fdf2f8;
--color-primary-100: #fce7f3;
--color-primary-200: #fbcfe8;
--color-primary-300: #f9a8d4;
--color-primary-400: #f472b6;
--color-primary-500: #ec4899;
--color-primary-600: #db2777;
--color-primary-700: #be185d;
--color-primary-800: #9d174d;
--color-primary-900: #831843;
.shadow-modern {
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
}
--color-accent-50: #faf5ff;
--color-accent-100: #f3e8ff;
--color-accent-200: #e9d5ff;
--color-accent-300: #d8b4fe;
--color-accent-400: #c084fc;
--color-accent-500: #a855f7;
--color-accent-600: #9333ea;
--color-accent-700: #7e22ce;
--color-accent-800: #6b21a8;
--color-accent-900: #581c87;
.dark .shadow-modern {
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
}
.score-card {
@apply bg-gradient-to-r from-primary-400/10 to-accent-400/10 border border-primary-400/20;
}
.dark .score-card {
@apply from-primary-400/5 to-accent-400/5 border-primary-400/10;
}
.rank-1 {
@apply bg-gradient-to-r from-yellow-400 to-amber-500;
}
.rank-2 {
@apply bg-gradient-to-r from-slate-400 to-slate-500;
}
.rank-3 {
@apply bg-gradient-to-r from-amber-600 to-amber-700;
}
.achievement-badge {
@apply inline-flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-r from-primary-400 to-accent-400 text-white shadow-md;
}
.btn-primary {
@apply inline-flex items-center px-6 py-3 bg-gradient-to-r from-primary-500 to-accent-500 text-white font-medium rounded-lg hover:from-primary-600 hover:to-accent-600 transition shadow-modern;
}
.card {
@apply glass rounded-xl p-6 shadow-modern;
}
.nav-link {
@apply text-gray-700 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition;
}
.nav-link-active {
@apply text-primary-500 font-medium;
}
}
@layer utilities {
.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
--animate-fade-in-up: fadeInUp 0.6s ease-out;
--animate-float: float 3s ease-in-out infinite;
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
}
@utility glass {
background-color: rgb(255 255 255 / 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgb(255 255 255 / 0.2);
}
.dark .glass {
background-color: rgb(17 24 39 / 0.7);
border-color: rgb(255 255 255 / 0.1);
}
@utility gradient-text {
background-image: linear-gradient(to right, var(--color-primary-400), var(--color-accent-400));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
@utility shadow-modern {
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
}
.dark .shadow-modern {
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
}
@utility score-card {
background-image: linear-gradient(to right, rgb(244 114 182 / 0.1), rgb(192 132 252 / 0.1));
border: 1px solid rgb(244 114 182 / 0.2);
}
.dark .score-card {
background-image: linear-gradient(to right, rgb(244 114 182 / 0.05), rgb(192 132 252 / 0.05));
border-color: rgb(244 114 182 / 0.1);
}
@utility rank-1 {
background-image: linear-gradient(to right, #facc15, #f59e0b);
}
@utility rank-2 {
background-image: linear-gradient(to right, #94a3b8, #64748b);
}
@utility rank-3 {
background-image: linear-gradient(to right, #d97706, #b45309);
}
@utility achievement-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
background-image: linear-gradient(to right, var(--color-primary-400), var(--color-accent-400));
color: white;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
@utility btn-primary {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.5rem;
background-image: linear-gradient(to right, var(--color-primary-500), var(--color-accent-500));
color: white;
font-weight: 500;
border-radius: 0.5rem;
transition: all 0.2s;
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
}
.btn-primary:hover {
background-image: linear-gradient(to right, var(--color-primary-600), var(--color-accent-600));
}
@utility card {
border-radius: 0.75rem;
padding: 1.5rem;
}
@utility nav-link {
color: #374151;
transition: color 0.2s;
}
.nav-link:hover {
color: var(--color-primary-500);
}
.dark .nav-link {
color: #e5e7eb;
}
.dark .nav-link:hover {
color: var(--color-primary-400);
}
@utility nav-link-active {
color: var(--color-primary-500);
font-weight: 500;
}
@utility animate-fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
-57
View File
@@ -1,57 +0,0 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
colors: {
primary: {
50: '#fdf2f8',
100: '#fce7f3',
200: '#fbcfe8',
300: '#f9a8d4',
400: '#f472b6',
500: '#ec4899',
600: '#db2777',
700: '#be185d',
800: '#9d174d',
900: '#831843',
},
accent: {
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
300: '#d8b4fe',
400: '#c084fc',
500: '#a855f7',
600: '#9333ea',
700: '#7e22ce',
800: '#6b21a8',
900: '#581c87',
}
},
animation: {
'fade-in-up': 'fadeInUp 0.6s ease-out',
'float': 'float 3s ease-in-out infinite',
},
keyframes: {
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
},
},
plugins: [],
}