From 86a29f6419a4facbd4f744f7122084046c6a4a83 Mon Sep 17 00:00:00 2001 From: Zuev Date: Fri, 20 Feb 2026 00:48:03 +0300 Subject: [PATCH] feat(frontend): add dynamic animations to login and admin panel --- .agent/skills/git-commit-formatter/SKILL.md | 30 ----- .../skills/git-push/scripts/push_changes.sh | 2 +- frontend/admin/admin.css | 106 +++++++++++++++++- frontend/admin/admin.js | 24 ++++ frontend/index.html | 8 +- frontend/script.js | 26 ++++- frontend/student/index.html | 13 +++ frontend/style.css | 43 +++++++ frontend/teacher/index.html | 13 +++ 9 files changed, 228 insertions(+), 37 deletions(-) delete mode 100644 .agent/skills/git-commit-formatter/SKILL.md diff --git a/.agent/skills/git-commit-formatter/SKILL.md b/.agent/skills/git-commit-formatter/SKILL.md deleted file mode 100644 index d57aa1d..0000000 --- a/.agent/skills/git-commit-formatter/SKILL.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -name: git-commit-formatter -description: Форматирует сообщения коммитов git в соответствии со спецификацией Conventional Commits. Используйте этот навык, когда пользователь просит закоммитить изменения или написать сообщение к коммиту. ---- - -# Навык форматирования коммитов Git - -При написании сообщения коммита вы ДОЛЖНЫ следовать спецификации Conventional Commits. - -## Формат -`[optional scope]: ` - -## Допустимые типы -- **feat**: Новая функциональность -- **fix**: Исправление ошибки -- **docs**: Изменения только в документации -- **style**: Изменения, не влияющие на смысл кода (пробелы, форматирование и т.д.) -- **refactor**: Изменение кода, которое не исправляет ошибку и не добавляет функциональность -- **perf**: Изменение кода, повышающее производительность -- **test**: Добавление недостающих тестов или исправление существующих -- **chore**: Изменения в процессе сборки или вспомогательных инструментах и библиотеках - -## Инструкции -1. Проанализируйте изменения, чтобы определить основной тип (`type`). -2. Определите область (`scope`), если это применимо (например, конкретный компонент или файл). -3. Напишите краткое описание (`description`) в повелительном наклонении (например, "add feature", а не "added feature"). -4. Если есть критические изменения, добавьте подвал, начинающийся с `BREAKING CHANGE:`. - -## Пример -`feat(auth): implement login with google` \ No newline at end of file diff --git a/.agent/skills/git-push/scripts/push_changes.sh b/.agent/skills/git-push/scripts/push_changes.sh index b7b598a..f5f4b68 100755 --- a/.agent/skills/git-push/scripts/push_changes.sh +++ b/.agent/skills/git-push/scripts/push_changes.sh @@ -17,7 +17,7 @@ if git diff-index --quiet HEAD --; then exit 0 fi -# Выполняем цепочку команд локально (SSH URL: ssh://git@gitea.zuev.company:2222/Zuev/magistr.git) +# Выполняем цепочку команд локально (SSH URL: ssh://git@192.168.1.87:2222/Zuev/magistr.git) git add . && \ git commit -m "$COMMIT_MSG" && \ git push origin main diff --git a/frontend/admin/admin.css b/frontend/admin/admin.css index 76d3749..9a7d458 100644 --- a/frontend/admin/admin.css +++ b/frontend/admin/admin.css @@ -134,6 +134,15 @@ body { .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); + transform: translateX(4px); +} + +.nav-item svg { + transition: transform var(--transition); +} + +.nav-item:hover svg { + transform: scale(1.1); } .nav-item.active { @@ -199,12 +208,38 @@ body { } /* ===== Cards ===== */ +@keyframes slideUpCard { + from { + opacity: 0; + transform: translateY(15px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + .card { background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: var(--radius-md); padding: 1.5rem; transition: background 0.4s ease, border-color 0.4s ease; + animation: slideUpCard 0.4s ease-out both; +} + +/* Staggered cards */ +.card:nth-child(1) { + animation-delay: 0.1s; +} + +.card:nth-child(2) { + animation-delay: 0.2s; +} + +.card:nth-child(3) { + animation-delay: 0.3s; } .card h2 { @@ -298,6 +333,18 @@ body { box-shadow: 0 4px 16px var(--accent-glow); } +@keyframes slideDownAlert { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + .form-alert { display: none; padding: 0.6rem 1rem; @@ -311,6 +358,7 @@ body { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.2); color: var(--error); + animation: slideDownAlert 0.3s ease-out both; } .form-alert.success { @@ -318,6 +366,7 @@ body { background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.2); color: var(--success); + animation: slideDownAlert 0.3s ease-out both; } /* ===== Table ===== */ @@ -347,8 +396,45 @@ tbody td { border-bottom: 1px solid rgba(255, 255, 255, 0.03); } +@keyframes slideInRow { + from { + opacity: 0; + transform: translateX(-10px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + tbody tr { transition: background var(--transition); + animation: slideInRow 0.3s ease-out both; +} + +tbody tr:nth-child(1) { + animation-delay: 0.05s; +} + +tbody tr:nth-child(2) { + animation-delay: 0.1s; +} + +tbody tr:nth-child(3) { + animation-delay: 0.15s; +} + +tbody tr:nth-child(4) { + animation-delay: 0.2s; +} + +tbody tr:nth-child(5) { + animation-delay: 0.25s; +} + +tbody tr:nth-child(n+6) { + animation-delay: 0.3s; } tbody tr:hover { @@ -477,11 +563,29 @@ tbody tr:hover { font-family: inherit; font-size: 0.8rem; cursor: pointer; - transition: background var(--transition); + transition: background var(--transition), transform var(--transition); } .btn-delete:hover { background: rgba(248, 113, 113, 0.2); + transform: scale(1.05); +} + +/* ===== Ripple Effect ===== */ +.ripple { + position: absolute; + border-radius: 50%; + transform: scale(0); + animation: admin-ripple 0.6s linear; + background-color: rgba(255, 255, 255, 0.3); + pointer-events: none; +} + +@keyframes admin-ripple { + to { + transform: scale(4); + opacity: 0; + } } /* ===== Mobile Menu Toggle ===== */ diff --git a/frontend/admin/admin.js b/frontend/admin/admin.js index a373aa1..ba51454 100644 --- a/frontend/admin/admin.js +++ b/frontend/admin/admin.js @@ -16,6 +16,30 @@ const sidebar = document.querySelector('.sidebar'); const sidebarOverlay = document.getElementById('sidebar-overlay'); + // Global Ripple Effect + document.addEventListener('click', function (e) { + const btn = e.target.closest('.btn-create, .btn-delete, .btn-logout'); + if (!btn) return; + + const rect = btn.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + const ripple = document.createElement('span'); + ripple.classList.add('ripple'); + ripple.style.left = `${x}px`; + ripple.style.top = `${y}px`; + + if (getComputedStyle(btn).position === 'static') { + btn.style.position = 'relative'; + } + btn.style.overflow = 'hidden'; + + btn.appendChild(ripple); + + setTimeout(() => ripple.remove(), 600); + }); + // Users const usersTbody = document.getElementById('users-tbody'); const createForm = document.getElementById('create-form'); diff --git a/frontend/index.html b/frontend/index.html index 65a4acf..68e1607 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -37,7 +37,7 @@
-
+
@@ -49,7 +49,7 @@
-
+
@@ -67,9 +67,9 @@
- + -