appclean 2.0.2 โ 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/npm-publish.yml +58 -15
- package/RELEASE_GUIDE.md +22 -1
- package/RELEASE_QUICK_START.md +176 -0
- package/assets/logo.svg +48 -32
- package/dist/index.js +1 -1
- package/dist/ui/client/index.html +103 -46
- package/dist/ui/client/styles/animations.css +362 -2
- package/dist/ui/client/styles/base.css +347 -73
- package/dist/ui/client/styles/components.css +566 -189
- package/dist/ui/client/styles/layout.css +618 -1
- package/dist/ui/client/styles/responsive.css +388 -0
- package/dist/ui/client/styles/variables.css +163 -69
- package/package.json +1 -1
- package/src/index.ts +1 -1
- package/src/ui/client/index.html +103 -46
- package/src/ui/client/styles/animations.css +362 -2
- package/src/ui/client/styles/base.css +347 -73
- package/src/ui/client/styles/components.css +566 -189
- package/src/ui/client/styles/layout.css +618 -1
- package/src/ui/client/styles/responsive.css +388 -0
- package/src/ui/client/styles/variables.css +163 -69
package/src/ui/client/index.html
CHANGED
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
6
6
|
<meta name="description" content="AppClean - Intelligently remove applications and all their hidden files">
|
|
7
7
|
<meta name="theme-color" content="#3b82f6">
|
|
8
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
9
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
8
10
|
<title>AppClean - Application Remover</title>
|
|
9
11
|
|
|
10
12
|
<!-- Styles -->
|
|
@@ -13,78 +15,130 @@
|
|
|
13
15
|
<link rel="stylesheet" href="/static/styles/layout.css">
|
|
14
16
|
<link rel="stylesheet" href="/static/styles/components.css">
|
|
15
17
|
<link rel="stylesheet" href="/static/styles/animations.css">
|
|
18
|
+
<link rel="stylesheet" href="/static/styles/responsive.css">
|
|
16
19
|
</head>
|
|
17
20
|
<body>
|
|
18
21
|
<!-- Root container for SPA -->
|
|
19
22
|
<div id="app" class="app-root">
|
|
20
|
-
<!--
|
|
21
|
-
<
|
|
22
|
-
<div class="container
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
23
|
+
<!-- Modern Navigation Header -->
|
|
24
|
+
<header class="app-header" id="app-header">
|
|
25
|
+
<div class="header-container">
|
|
26
|
+
<!-- Logo and Brand -->
|
|
27
|
+
<div class="header-brand">
|
|
28
|
+
<button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle sidebar" aria-expanded="false">
|
|
29
|
+
<svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
30
|
+
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
31
|
+
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
32
|
+
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
33
|
+
</svg>
|
|
34
|
+
</button>
|
|
35
|
+
<a href="#/" class="logo-link" aria-label="AppClean Home">
|
|
36
|
+
<img src="/static/assets/logo.svg" alt="AppClean Logo" class="logo-image">
|
|
37
|
+
<span class="logo-text">AppClean</span>
|
|
38
|
+
</a>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<!-- Header Actions -->
|
|
42
|
+
<div class="header-actions">
|
|
43
|
+
<button class="btn-icon theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
|
|
44
|
+
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
45
|
+
<circle cx="12" cy="12" r="5"></circle>
|
|
46
|
+
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
47
|
+
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
48
|
+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
49
|
+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
50
|
+
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
51
|
+
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
52
|
+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
53
|
+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
54
|
+
</svg>
|
|
55
|
+
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
56
|
+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
57
|
+
</svg>
|
|
58
|
+
</button>
|
|
59
|
+
<div class="version-badge" id="version-badge">v2.0.2</div>
|
|
35
60
|
</div>
|
|
36
61
|
</div>
|
|
37
|
-
</
|
|
62
|
+
</header>
|
|
38
63
|
|
|
39
|
-
<!-- Main
|
|
40
|
-
<div class="app-layout
|
|
41
|
-
<!-- Sidebar -->
|
|
42
|
-
<aside class="sidebar" id="sidebar">
|
|
43
|
-
<
|
|
44
|
-
<
|
|
45
|
-
<a href="#/" class="nav-
|
|
46
|
-
<span class="nav-icon"
|
|
64
|
+
<!-- Main Layout Container -->
|
|
65
|
+
<div class="app-layout">
|
|
66
|
+
<!-- Sidebar Navigation -->
|
|
67
|
+
<aside class="sidebar" id="sidebar" aria-label="Navigation">
|
|
68
|
+
<nav class="sidebar-nav">
|
|
69
|
+
<div class="nav-items">
|
|
70
|
+
<a href="#/" class="nav-item active" data-view="dashboard" aria-current="page">
|
|
71
|
+
<span class="nav-icon">
|
|
72
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
73
|
+
<line x1="12" y1="2" x2="12" y2="22"></line>
|
|
74
|
+
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
|
|
75
|
+
</svg>
|
|
76
|
+
</span>
|
|
47
77
|
<span class="nav-label">Dashboard</span>
|
|
48
78
|
</a>
|
|
49
|
-
<a href="#/apps" class="nav-
|
|
50
|
-
<span class="nav-icon"
|
|
79
|
+
<a href="#/apps" class="nav-item" data-view="apps">
|
|
80
|
+
<span class="nav-icon">
|
|
81
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
82
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
83
|
+
<line x1="9" y1="9" x2="9" y2="9.01"></line>
|
|
84
|
+
<line x1="15" y1="9" x2="15" y2="9.01"></line>
|
|
85
|
+
<line x1="9" y1="15" x2="9" y2="15.01"></line>
|
|
86
|
+
<line x1="15" y1="15" x2="15" y2="15.01"></line>
|
|
87
|
+
</svg>
|
|
88
|
+
</span>
|
|
51
89
|
<span class="nav-label">Apps</span>
|
|
52
90
|
</a>
|
|
53
|
-
<a href="#/settings" class="nav-
|
|
54
|
-
<span class="nav-icon"
|
|
91
|
+
<a href="#/settings" class="nav-item" data-view="settings">
|
|
92
|
+
<span class="nav-icon">
|
|
93
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
94
|
+
<circle cx="12" cy="12" r="3"></circle>
|
|
95
|
+
<path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m3.08 3.08l4.24 4.24M1 12h6m6 0h6M4.22 19.78l4.24-4.24m3.08-3.08l4.24-4.24M19.78 19.78l-4.24-4.24m-3.08-3.08l-4.24-4.24"></path>
|
|
96
|
+
</svg>
|
|
97
|
+
</span>
|
|
55
98
|
<span class="nav-label">Settings</span>
|
|
56
99
|
</a>
|
|
57
|
-
</
|
|
58
|
-
</
|
|
100
|
+
</div>
|
|
101
|
+
</nav>
|
|
102
|
+
|
|
103
|
+
<!-- Sidebar Footer -->
|
|
59
104
|
<div class="sidebar-footer">
|
|
60
|
-
<a href="https://github.com/praveenkay/AppClean" target="_blank" rel="noopener" class="sidebar-link">
|
|
61
|
-
<span class="nav-icon"
|
|
105
|
+
<a href="https://github.com/praveenkay/AppClean" target="_blank" rel="noopener noreferrer" class="nav-item sidebar-link" title="View on GitHub">
|
|
106
|
+
<span class="nav-icon">
|
|
107
|
+
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
108
|
+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
109
|
+
</svg>
|
|
110
|
+
</span>
|
|
62
111
|
<span class="nav-label">GitHub</span>
|
|
63
112
|
</a>
|
|
64
113
|
</div>
|
|
65
114
|
</aside>
|
|
66
115
|
|
|
67
|
-
<!-- Main
|
|
68
|
-
<main class="main-content" id="main-content">
|
|
69
|
-
<div class="
|
|
70
|
-
<!--
|
|
116
|
+
<!-- Main Content Area -->
|
|
117
|
+
<main class="main-content" id="main-content" role="main">
|
|
118
|
+
<div class="content-wrapper">
|
|
119
|
+
<!-- Page Container -->
|
|
71
120
|
<div id="page-container" class="page-container">
|
|
72
|
-
<!-- Loading
|
|
121
|
+
<!-- Loading State -->
|
|
73
122
|
<div class="loading-state" id="loading-state">
|
|
74
|
-
<div class="spinner
|
|
75
|
-
<p class="
|
|
123
|
+
<div class="spinner"></div>
|
|
124
|
+
<p class="loading-text">Loading AppClean...</p>
|
|
76
125
|
</div>
|
|
77
126
|
</div>
|
|
78
127
|
</div>
|
|
79
128
|
</main>
|
|
80
129
|
</div>
|
|
81
130
|
|
|
82
|
-
<!--
|
|
83
|
-
<div class="modal-
|
|
84
|
-
<div class="modal" id="modal" role="dialog" aria-labelledby="modal-title">
|
|
131
|
+
<!-- Modal Dialog -->
|
|
132
|
+
<div class="modal-overlay" id="modal-overlay" role="presentation">
|
|
133
|
+
<div class="modal-dialog" id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
|
|
85
134
|
<div class="modal-header">
|
|
86
135
|
<h2 class="modal-title" id="modal-title">Dialog</h2>
|
|
87
|
-
<button class="modal-close" id="modal-close" aria-label="Close dialog"
|
|
136
|
+
<button class="modal-close" id="modal-close" aria-label="Close dialog">
|
|
137
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
138
|
+
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
139
|
+
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
140
|
+
</svg>
|
|
141
|
+
</button>
|
|
88
142
|
</div>
|
|
89
143
|
<div class="modal-body" id="modal-body">
|
|
90
144
|
<!-- Content will be rendered here -->
|
|
@@ -95,10 +149,13 @@
|
|
|
95
149
|
</div>
|
|
96
150
|
</div>
|
|
97
151
|
|
|
98
|
-
<!-- Notifications -->
|
|
99
|
-
<div class="notifications-container" id="notifications-container" role="region" aria-label="Notifications" aria-live="polite">
|
|
152
|
+
<!-- Toast Notifications -->
|
|
153
|
+
<div class="notifications-container" id="notifications-container" role="region" aria-label="Notifications" aria-live="polite" aria-atomic="true">
|
|
100
154
|
<!-- Notifications will be rendered here -->
|
|
101
155
|
</div>
|
|
156
|
+
|
|
157
|
+
<!-- Sidebar Overlay (Mobile) -->
|
|
158
|
+
<div class="sidebar-overlay" id="sidebar-overlay" aria-hidden="true"></div>
|
|
102
159
|
</div>
|
|
103
160
|
|
|
104
161
|
<!-- Scripts -->
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/* ============================================================================
|
|
2
|
+
Animations - Modern Keyframes and Transition Effects
|
|
3
|
+
============================================================================ */
|
|
4
|
+
|
|
5
|
+
/* ============================================================================
|
|
6
|
+
Fade Animations
|
|
7
|
+
============================================================================ */
|
|
2
8
|
|
|
3
|
-
/* Fade Animations */
|
|
4
9
|
@keyframes fadeIn {
|
|
5
10
|
from {
|
|
6
11
|
opacity: 0;
|
|
@@ -19,6 +24,361 @@
|
|
|
19
24
|
}
|
|
20
25
|
}
|
|
21
26
|
|
|
27
|
+
@keyframes fadeInScale {
|
|
28
|
+
from {
|
|
29
|
+
opacity: 0;
|
|
30
|
+
transform: scale(0.95);
|
|
31
|
+
}
|
|
32
|
+
to {
|
|
33
|
+
opacity: 1;
|
|
34
|
+
transform: scale(1);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* ============================================================================
|
|
39
|
+
Slide Animations
|
|
40
|
+
============================================================================ */
|
|
41
|
+
|
|
42
|
+
@keyframes slideUp {
|
|
43
|
+
from {
|
|
44
|
+
opacity: 0;
|
|
45
|
+
transform: translateY(1rem);
|
|
46
|
+
}
|
|
47
|
+
to {
|
|
48
|
+
opacity: 1;
|
|
49
|
+
transform: translateY(0);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@keyframes slideDown {
|
|
54
|
+
from {
|
|
55
|
+
opacity: 0;
|
|
56
|
+
transform: translateY(-1rem);
|
|
57
|
+
}
|
|
58
|
+
to {
|
|
59
|
+
opacity: 1;
|
|
60
|
+
transform: translateY(0);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@keyframes slideLeft {
|
|
65
|
+
from {
|
|
66
|
+
opacity: 0;
|
|
67
|
+
transform: translateX(-1rem);
|
|
68
|
+
}
|
|
69
|
+
to {
|
|
70
|
+
opacity: 1;
|
|
71
|
+
transform: translateX(0);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@keyframes slideRight {
|
|
76
|
+
from {
|
|
77
|
+
opacity: 0;
|
|
78
|
+
transform: translateX(1rem);
|
|
79
|
+
}
|
|
80
|
+
to {
|
|
81
|
+
opacity: 1;
|
|
82
|
+
transform: translateX(0);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@keyframes slideInRight {
|
|
87
|
+
from {
|
|
88
|
+
opacity: 0;
|
|
89
|
+
transform: translateX(1.5rem);
|
|
90
|
+
}
|
|
91
|
+
to {
|
|
92
|
+
opacity: 1;
|
|
93
|
+
transform: translateX(0);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* ============================================================================
|
|
98
|
+
Zoom Animations
|
|
99
|
+
============================================================================ */
|
|
100
|
+
|
|
101
|
+
@keyframes zoomIn {
|
|
102
|
+
from {
|
|
103
|
+
opacity: 0;
|
|
104
|
+
transform: scale(0.9);
|
|
105
|
+
}
|
|
106
|
+
to {
|
|
107
|
+
opacity: 1;
|
|
108
|
+
transform: scale(1);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@keyframes zoomOut {
|
|
113
|
+
from {
|
|
114
|
+
opacity: 1;
|
|
115
|
+
transform: scale(1);
|
|
116
|
+
}
|
|
117
|
+
to {
|
|
118
|
+
opacity: 0;
|
|
119
|
+
transform: scale(0.9);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* ============================================================================
|
|
124
|
+
Bounce Animations
|
|
125
|
+
============================================================================ */
|
|
126
|
+
|
|
127
|
+
@keyframes bounce {
|
|
128
|
+
0%, 100% {
|
|
129
|
+
transform: translateY(0);
|
|
130
|
+
}
|
|
131
|
+
50% {
|
|
132
|
+
transform: translateY(-0.5rem);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@keyframes bounceIn {
|
|
137
|
+
from {
|
|
138
|
+
opacity: 0;
|
|
139
|
+
transform: scale(0.3);
|
|
140
|
+
}
|
|
141
|
+
50% {
|
|
142
|
+
opacity: 1;
|
|
143
|
+
transform: scale(1.05);
|
|
144
|
+
}
|
|
145
|
+
to {
|
|
146
|
+
transform: scale(1);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* ============================================================================
|
|
151
|
+
Pulse Animations
|
|
152
|
+
============================================================================ */
|
|
153
|
+
|
|
154
|
+
@keyframes pulse {
|
|
155
|
+
0%, 100% {
|
|
156
|
+
opacity: 1;
|
|
157
|
+
}
|
|
158
|
+
50% {
|
|
159
|
+
opacity: 0.5;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
@keyframes pulseShadow {
|
|
164
|
+
0%, 100% {
|
|
165
|
+
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
|
|
166
|
+
}
|
|
167
|
+
70% {
|
|
168
|
+
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* ============================================================================
|
|
173
|
+
Shake Animations
|
|
174
|
+
============================================================================ */
|
|
175
|
+
|
|
176
|
+
@keyframes shake {
|
|
177
|
+
0%, 100% {
|
|
178
|
+
transform: translateX(0);
|
|
179
|
+
}
|
|
180
|
+
10%, 30%, 50%, 70%, 90% {
|
|
181
|
+
transform: translateX(-2px);
|
|
182
|
+
}
|
|
183
|
+
20%, 40%, 60%, 80% {
|
|
184
|
+
transform: translateX(2px);
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* ============================================================================
|
|
189
|
+
Rotate Animations
|
|
190
|
+
============================================================================ */
|
|
191
|
+
|
|
192
|
+
@keyframes spin {
|
|
193
|
+
from {
|
|
194
|
+
transform: rotate(0deg);
|
|
195
|
+
}
|
|
196
|
+
to {
|
|
197
|
+
transform: rotate(360deg);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
@keyframes spinReverse {
|
|
202
|
+
from {
|
|
203
|
+
transform: rotate(360deg);
|
|
204
|
+
}
|
|
205
|
+
to {
|
|
206
|
+
transform: rotate(0deg);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
/* ============================================================================
|
|
211
|
+
Loading Animations
|
|
212
|
+
============================================================================ */
|
|
213
|
+
|
|
214
|
+
@keyframes loading {
|
|
215
|
+
0% {
|
|
216
|
+
background-position: 200% 0;
|
|
217
|
+
}
|
|
218
|
+
100% {
|
|
219
|
+
background-position: -200% 0;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
@keyframes skeletonLoading {
|
|
224
|
+
0% {
|
|
225
|
+
background-position: -1000px 0;
|
|
226
|
+
}
|
|
227
|
+
100% {
|
|
228
|
+
background-position: 1000px 0;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* ============================================================================
|
|
233
|
+
Text Animations
|
|
234
|
+
============================================================================ */
|
|
235
|
+
|
|
236
|
+
@keyframes typewriter {
|
|
237
|
+
from {
|
|
238
|
+
width: 0;
|
|
239
|
+
}
|
|
240
|
+
to {
|
|
241
|
+
width: 100%;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
@keyframes blink {
|
|
246
|
+
0%, 49%, 100% {
|
|
247
|
+
opacity: 1;
|
|
248
|
+
}
|
|
249
|
+
50%, 99% {
|
|
250
|
+
opacity: 0;
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
/* ============================================================================
|
|
255
|
+
Glow Animations
|
|
256
|
+
============================================================================ */
|
|
257
|
+
|
|
258
|
+
@keyframes glow {
|
|
259
|
+
0%, 100% {
|
|
260
|
+
box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
|
|
261
|
+
}
|
|
262
|
+
50% {
|
|
263
|
+
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
/* ============================================================================
|
|
268
|
+
Float Animation
|
|
269
|
+
============================================================================ */
|
|
270
|
+
|
|
271
|
+
@keyframes float {
|
|
272
|
+
0%, 100% {
|
|
273
|
+
transform: translateY(0);
|
|
274
|
+
}
|
|
275
|
+
50% {
|
|
276
|
+
transform: translateY(-10px);
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* ============================================================================
|
|
281
|
+
Flip Animations
|
|
282
|
+
============================================================================ */
|
|
283
|
+
|
|
284
|
+
@keyframes flipIn {
|
|
285
|
+
from {
|
|
286
|
+
opacity: 0;
|
|
287
|
+
transform: perspective(400px) rotateY(90deg);
|
|
288
|
+
}
|
|
289
|
+
to {
|
|
290
|
+
opacity: 1;
|
|
291
|
+
transform: perspective(400px) rotateY(0deg);
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
@keyframes flipOut {
|
|
296
|
+
from {
|
|
297
|
+
opacity: 1;
|
|
298
|
+
transform: perspective(400px) rotateY(0deg);
|
|
299
|
+
}
|
|
300
|
+
to {
|
|
301
|
+
opacity: 0;
|
|
302
|
+
transform: perspective(400px) rotateY(90deg);
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
/* ============================================================================
|
|
307
|
+
Wave Animation
|
|
308
|
+
============================================================================ */
|
|
309
|
+
|
|
310
|
+
@keyframes wave {
|
|
311
|
+
0%, 100% {
|
|
312
|
+
transform: rotate(0deg);
|
|
313
|
+
}
|
|
314
|
+
25% {
|
|
315
|
+
transform: rotate(20deg);
|
|
316
|
+
}
|
|
317
|
+
75% {
|
|
318
|
+
transform: rotate(-20deg);
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
/* ============================================================================
|
|
323
|
+
Utility Animation Classes
|
|
324
|
+
============================================================================ */
|
|
325
|
+
|
|
326
|
+
.animate-fade-in {
|
|
327
|
+
animation: fadeIn var(--transition-normal);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.animate-fade-out {
|
|
331
|
+
animation: fadeOut var(--transition-normal);
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.animate-slide-up {
|
|
335
|
+
animation: slideUp var(--transition-normal);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.animate-slide-down {
|
|
339
|
+
animation: slideDown var(--transition-normal);
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.animate-slide-left {
|
|
343
|
+
animation: slideLeft var(--transition-normal);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.animate-slide-right {
|
|
347
|
+
animation: slideRight var(--transition-normal);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.animate-zoom-in {
|
|
351
|
+
animation: zoomIn var(--transition-normal);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.animate-zoom-out {
|
|
355
|
+
animation: zoomOut var(--transition-normal);
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.animate-bounce {
|
|
359
|
+
animation: bounce var(--transition-slow);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.animate-pulse {
|
|
363
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.animate-spin {
|
|
367
|
+
animation: spin 1s linear infinite;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.animate-shake {
|
|
371
|
+
animation: shake 0.5s ease-in-out;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.animate-float {
|
|
375
|
+
animation: float 3s ease-in-out infinite;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.animate-wave {
|
|
379
|
+
animation: wave 0.5s ease-in-out;
|
|
380
|
+
}
|
|
381
|
+
|
|
22
382
|
.fade-in {
|
|
23
383
|
animation: fadeIn var(--transition-normal) ease-out forwards;
|
|
24
384
|
}
|