| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>آپلود و ارتقاء اشتراک</title> |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --primary: #7b2ff7; |
| --secondary: #f107a3; |
| --text-dark: #2c3e50; |
| --text-light: #6c757d; |
| --bg-light: #f8f9fa; |
| --card-bg: #fff; |
| --border: #e0e0e0; |
| } |
| |
| body { |
| font-family: 'Vazirmatn', sans-serif; |
| background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 100vh; |
| margin: 0; |
| color: var(--text-dark); |
| } |
| |
| .container { |
| background: var(--card-bg); |
| padding: 40px; |
| border-radius: 20px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.08); |
| max-width: 600px; |
| width: 90%; |
| text-align: center; |
| animation: fadeIn 0.6s ease; |
| } |
| |
| .svg-icon { |
| width: 90px; |
| height: 90px; |
| fill: url(#lockGradient); |
| filter: drop-shadow(0 4px 8px rgba(255,118,136,0.4)); |
| margin-bottom: 20px; |
| transition: transform 0.3s ease, filter 0.3s ease; |
| } |
| .container:hover .svg-icon { |
| transform: translateY(-5px); |
| filter: drop-shadow(0 6px 12px rgba(255,118,136,0.6)); |
| } |
| |
| |
| @keyframes shake { |
| 10%, 90% { transform: translateX(-1px) rotate(-2deg); } |
| 20%, 80% { transform: translateX(2px) rotate(2deg); } |
| 30%, 50%, 70% { transform: translateX(-3px) rotate(-3deg); } |
| 40%, 60% { transform: translateX(3px) rotate(3deg); } |
| } |
| |
| |
| .shake-lock { |
| animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; |
| } |
| |
| h2 { |
| font-size: 2em; |
| color: var(--primary); |
| margin-bottom: 15px; |
| } |
| |
| p { |
| color: var(--text-light); |
| font-size: 1.1em; |
| margin-bottom: 30px; |
| line-height: 1.8; |
| } |
| |
| .upload-area { |
| border: 2px dashed var(--border); |
| border-radius: 15px; |
| padding: 35px; |
| background: var(--bg-light); |
| cursor: not-allowed; |
| transition: all 0.3s ease; |
| user-select: none; |
| } |
| .upload-area:hover { |
| border-color: var(--secondary); |
| background: #f1f3f5; |
| } |
| .upload-area svg { |
| width: 60px; |
| height: 60px; |
| fill: #a0a0a0; |
| margin-bottom: 15px; |
| transition: fill 0.3s ease, transform 0.3s ease; |
| } |
| .upload-area:hover svg { |
| fill: var(--secondary); |
| transform: translateY(-5px); |
| } |
| .upload-area p { |
| margin: 0; |
| font-size: 1em; |
| color: #888; |
| } |
| |
| .buttons { |
| display: flex; |
| justify-content: center; |
| gap: 15px; |
| margin-top: 25px; |
| flex-wrap: wrap; |
| } |
| button { |
| padding: 12px 25px; |
| border: none; |
| border-radius: 8px; |
| font-size: 1em; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| .upgrade-button { |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); |
| color: #fff; |
| position: relative; |
| overflow: hidden; |
| } |
| .upgrade-button::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: -100%; |
| width: 100%; height: 100%; |
| background: rgba(255,255,255,0.2); |
| transform: skewX(-30deg); |
| transition: left 0.4s ease; |
| } |
| .upgrade-button:hover::before { |
| left: 100%; |
| } |
| .upgrade-button:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 8px 20px rgba(123,47,247,0.3); |
| } |
| .later-button { |
| background: var(--border); |
| color: var(--text-dark); |
| } |
| .later-button:hover { |
| background: #ccc; |
| transform: translateY(-2px); |
| } |
| |
| |
| @keyframes shake-button { |
| 10%, 90% { transform: translateY(-3px) translateX(-2px); } |
| 20%, 80% { transform: translateY(-3px) translateX(2px); } |
| 30%, 50%, 70% { transform: translateY(-3px) translateX(-3px); } |
| 40%, 60% { transform: translateY(-3px) translateX(3px); } |
| } |
| |
| |
| .shake-it { |
| animation: shake-button 0.6s ease-in-out; |
| } |
| |
| @keyframes fadeIn { |
| from {opacity: 0; transform: translateY(20px);} |
| to {opacity: 1; transform: translateY(0);} |
| } |
| |
| @media (max-width: 768px) { |
| .container {padding: 30px;} |
| h2 {font-size: 1.6em;} |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="container"> |
| |
| <svg id="lockIcon" class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"> |
| <defs> |
| <linearGradient id="lockGradient" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" stop-color="#ff7eb3"/> |
| <stop offset="50%" stop-color="#ff758c"/> |
| <stop offset="100%" stop-color="#ffb347"/> |
| </linearGradient> |
| </defs> |
| <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 |
| 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 |
| 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 |
| 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 |
| 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 |
| 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z"/> |
| </svg> |
|
|
| <h2>برای آپلود و تحلیل فایل اشتراک تهیه کنید!</h2> |
| <p>امکان آپلود فایل‌های صوتی، ویدیویی، PDF و... تنها در نسخه نامحدود فعال است. برای دسترسی کامل، اشتراک خود را ارتقا دهید.</p> |
|
|
| <div id="uploadArea" class="upload-area" role="button" tabindex="0" aria-disabled="true" aria-label="آپلود فایل (غیرفعال)"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"> |
| <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 |
| 9.11 4 6.6 5.64 5.35 8.04 |
| 2.34 8.36 0 10.91 0 14c0 3.31 |
| 2.69 6 6 6h13c2.76 0 5-2.24 |
| 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 |
| 13v4h-4v-4H7l5-5 5 5h-3z"/> |
| </svg> |
| <p>اینجا فایل‌های خود را آپلود کنید (فقط در نسخه نامحدود)</p> |
| </div> |
|
|
| <div class="buttons"> |
| <button class="upgrade-button">🚀 ارتقا به نسخه نامحدود</button> |
| <button class="later-button">بعداً</button> |
| </div> |
| </div> |
|
|
| <script> |
| const uploadArea = document.getElementById('uploadArea'); |
| const lockIcon = document.getElementById('lockIcon'); |
| |
| const upgradeButton = document.querySelector('.upgrade-button'); |
| |
| function triggerAnimations() { |
| |
| |
| lockIcon.classList.remove('shake-lock'); |
| |
| requestAnimationFrame(() => { |
| lockIcon.classList.add('shake-lock'); |
| }); |
| |
| |
| |
| upgradeButton.classList.remove('shake-it'); |
| requestAnimationFrame(() => { |
| upgradeButton.classList.add('shake-it'); |
| }); |
| } |
| |
| |
| uploadArea.addEventListener('click', triggerAnimations); |
| |
| |
| uploadArea.addEventListener('keydown', (e) => { |
| if (e.key === 'Enter' || e.key === ' ') { |
| e.preventDefault(); |
| triggerAnimations(); |
| } |
| }); |
| |
| |
| lockIcon.addEventListener('animationend', () => { |
| lockIcon.classList.remove('shake-lock'); |
| }); |
| |
| upgradeButton.addEventListener('animationend', () => { |
| upgradeButton.classList.remove('shake-it'); |
| }); |
| </script> |
|
|
| </body> |
| </html> |
