Update index.html
Browse files- index.html +47 -3
index.html
CHANGED
|
@@ -51,6 +51,17 @@ body {
|
|
| 51 |
transform: translateY(-5px);
|
| 52 |
}
|
| 53 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 54 |
h2 {
|
| 55 |
font-size: 2em;
|
| 56 |
color: var(--primary);
|
|
@@ -71,6 +82,7 @@ p {
|
|
| 71 |
background: var(--bg-light);
|
| 72 |
cursor: not-allowed;
|
| 73 |
transition: all 0.3s ease;
|
|
|
|
| 74 |
}
|
| 75 |
.upload-area:hover {
|
| 76 |
border-color: var(--secondary);
|
|
@@ -154,18 +166,21 @@ button {
|
|
| 154 |
<body>
|
| 155 |
|
| 156 |
<div class="container">
|
| 157 |
-
<
|
|
|
|
| 158 |
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0
|
| 159 |
1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6
|
| 160 |
9c-1.1 0-2-.9-2-2s.9-2 2-2
|
| 161 |
2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71
|
| 162 |
1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z"/>
|
| 163 |
</svg>
|
|
|
|
| 164 |
<h2>برای آپلود و تحلیل فایل اشتراک تهیه کنید!</h2>
|
| 165 |
<p>امکان آپلود فایل‌های صوتی، ویدیویی، PDF و... تنها در نسخه نامحدود فعال است. برای دسترسی کامل، اشتراک خود را ارتقا دهید.</p>
|
| 166 |
|
| 167 |
-
<
|
| 168 |
-
|
|
|
|
| 169 |
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4
|
| 170 |
9.11 4 6.6 5.64 5.35 8.04
|
| 171 |
2.34 8.36 0 10.91 0 14c0 3.31
|
|
@@ -182,5 +197,34 @@ button {
|
|
| 182 |
</div>
|
| 183 |
</div>
|
| 184 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 185 |
</body>
|
| 186 |
</html>
|
|
|
|
| 51 |
transform: translateY(-5px);
|
| 52 |
}
|
| 53 |
|
| 54 |
+
/* انیمیشن تکان خوردن قفل */
|
| 55 |
+
.shake {
|
| 56 |
+
animation: shake 550ms cubic-bezier(.36,.07,.19,.97) both;
|
| 57 |
+
}
|
| 58 |
+
@keyframes shake {
|
| 59 |
+
10%, 90% { transform: translateX(-1px) rotate(-2deg); }
|
| 60 |
+
20%, 80% { transform: translateX(2px) rotate(2deg); }
|
| 61 |
+
30%, 50%, 70% { transform: translateX(-3px) rotate(-3deg); }
|
| 62 |
+
40%, 60% { transform: translateX(3px) rotate(3deg); }
|
| 63 |
+
}
|
| 64 |
+
|
| 65 |
h2 {
|
| 66 |
font-size: 2em;
|
| 67 |
color: var(--primary);
|
|
|
|
| 82 |
background: var(--bg-light);
|
| 83 |
cursor: not-allowed;
|
| 84 |
transition: all 0.3s ease;
|
| 85 |
+
user-select: none;
|
| 86 |
}
|
| 87 |
.upload-area:hover {
|
| 88 |
border-color: var(--secondary);
|
|
|
|
| 166 |
<body>
|
| 167 |
|
| 168 |
<div class="container">
|
| 169 |
+
<!-- آیکن قفل -->
|
| 170 |
+
<svg id="lockIcon" class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
| 171 |
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0
|
| 172 |
1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6
|
| 173 |
9c-1.1 0-2-.9-2-2s.9-2 2-2
|
| 174 |
2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71
|
| 175 |
1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z"/>
|
| 176 |
</svg>
|
| 177 |
+
|
| 178 |
<h2>برای آپلود و تحلیل فایل اشتراک تهیه کنید!</h2>
|
| 179 |
<p>امکان آپلود فایل‌های صوتی، ویدیویی، PDF و... تنها در نسخه نامحدود فعال است. برای دسترسی کامل، اشتراک خود را ارتقا دهید.</p>
|
| 180 |
|
| 181 |
+
<!-- ناحیه آپلود شبیه دکمه -->
|
| 182 |
+
<div id="uploadArea" class="upload-area" role="button" tabindex="0" aria-disabled="true" aria-label="آپلود فایل (غیرفعال)">
|
| 183 |
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
| 184 |
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4
|
| 185 |
9.11 4 6.6 5.64 5.35 8.04
|
| 186 |
2.34 8.36 0 10.91 0 14c0 3.31
|
|
|
|
| 197 |
</div>
|
| 198 |
</div>
|
| 199 |
|
| 200 |
+
<script>
|
| 201 |
+
// با کلیک (یا Enter/Space) روی ناحیه آپلود، قفل تکان می‌خورد
|
| 202 |
+
const uploadArea = document.getElementById('uploadArea');
|
| 203 |
+
const lockIcon = document.getElementById('lockIcon');
|
| 204 |
+
|
| 205 |
+
function shakeLock() {
|
| 206 |
+
// اگر انیمیشن در حال اجراست، ریستش کن تا دوباره اجرا شود
|
| 207 |
+
lockIcon.classList.remove('shake');
|
| 208 |
+
// اجرای دوباره در فریم بعدی
|
| 209 |
+
requestAnimationFrame(() => {
|
| 210 |
+
lockIcon.classList.add('shake');
|
| 211 |
+
});
|
| 212 |
+
}
|
| 213 |
+
|
| 214 |
+
uploadArea.addEventListener('click', shakeLock);
|
| 215 |
+
// دسترسی‌پذیری: اجازه تکان با Enter یا Space
|
| 216 |
+
uploadArea.addEventListener('keydown', (e) => {
|
| 217 |
+
if (e.key === 'Enter' || e.key === ' ') {
|
| 218 |
+
e.preventDefault();
|
| 219 |
+
shakeLock();
|
| 220 |
+
}
|
| 221 |
+
});
|
| 222 |
+
|
| 223 |
+
// پاک کردن کلاس بعد از پایان انیمیشن (اختیاری، چون هر بار ریست می‌کنیم)
|
| 224 |
+
lockIcon.addEventListener('animationend', () => {
|
| 225 |
+
lockIcon.classList.remove('shake');
|
| 226 |
+
});
|
| 227 |
+
</script>
|
| 228 |
+
|
| 229 |
</body>
|
| 230 |
</html>
|