Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>پروژه re29066 - تکمیل موفقیتآمیز</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| --success-gradient: linear-gradient(135deg, #13f1fc 0%, #0470dc 100%); | |
| --dark-bg: #1a1a2e; | |
| --card-bg: #16213e; | |
| --text-primary: #ffffff; | |
| --text-secondary: #b4b4b4; | |
| --accent: #667eea; | |
| --success: #4ade80; | |
| --warning: #fbbf24; | |
| --danger: #f87171; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| color: var(--text-primary); | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,32L48,69.3C96,107,192,181,288,197.3C384,213,480,171,576,165.3C672,160,768,192,864,197.3C960,203,1056,181,1152,165.3C1248,149,1344,139,1392,133.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom; | |
| background-size: cover; | |
| pointer-events: none; | |
| opacity: 0.3; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| header { | |
| background: rgba(26, 26, 46, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| padding: 40px; | |
| margin-bottom: 40px; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); | |
| position: relative; | |
| overflow: hidden; | |
| animation: slideDown 0.8s ease-out; | |
| } | |
| header::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%); | |
| animation: rotate 20s linear infinite; | |
| } | |
| @keyframes rotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes slideDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .header-content { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .success-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| background: var(--success-gradient); | |
| padding: 8px 20px; | |
| border-radius: 50px; | |
| font-size: 14px; | |
| font-weight: bold; | |
| margin-bottom: 20px; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| h1 { | |
| font-size: 3rem; | |
| margin-bottom: 15px; | |
| background: linear-gradient(135deg, #667eea 0%, #f093fb 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: glow 3s ease-in-out infinite; | |
| } | |
| @keyframes glow { | |
| 0%, 100% { filter: brightness(1); } | |
| 50% { filter: brightness(1.2); } | |
| } | |
| .subtitle { | |
| font-size: 1.2rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 30px; | |
| } | |
| .project-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 20px; | |
| margin-top: 30px; | |
| } | |
| .stat-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 20px; | |
| border-radius: 15px; | |
| text-align: center; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); | |
| } | |
| .stat-number { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| color: var(--accent); | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| margin-top: 5px; | |
| } | |
| .features-section { | |
| margin-bottom: 40px; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| margin-bottom: 30px; | |
| text-align: center; | |
| position: relative; | |
| padding-bottom: 15px; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| right: 50%; | |
| transform: translateX(50%); | |
| width: 100px; | |
| height: 3px; | |
| background: var(--primary-gradient); | |
| border-radius: 2px; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 25px; | |
| } | |
| .feature-card { | |
| background: rgba(26, 26, 46, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| padding: 30px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 100px; | |
| height: 100px; | |
| background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%); | |
| border-radius: 50%; | |
| transform: translate(30px, -30px); | |
| transition: all 0.4s ease; | |
| } | |
| .feature-card:hover::before { | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--primary-gradient); | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| margin-bottom: 20px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .feature-title { | |
| font-size: 1.3rem; | |
| margin-bottom: 15px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .feature-description { | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .downloads-section { | |
| background: rgba(26, 26, 46, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| padding: 40px; | |
| margin-bottom: 40px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .downloads-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin-top: 30px; | |
| } | |
| .download-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| padding: 20px; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .download-card::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| background: rgba(102, 126, 234, 0.3); | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| transition: all 0.5s ease; | |
| } | |
| .download-card:hover::after { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .download-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .download-icon { | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| color: var(--accent); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .download-title { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .download-size { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .timeline-section { | |
| margin-bottom: 40px; | |
| } | |
| .timeline { | |
| position: relative; | |
| padding: 20px 0; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| right: 50%; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(180deg, var(--accent) 0%, transparent 100%); | |
| } | |
| .timeline-item { | |
| display: flex; | |
| justify-content: flex-end; | |
| padding-right: 50%; | |
| position: relative; | |
| margin-bottom: 50px; | |
| animation: fadeInRight 0.8s ease-out; | |
| } | |
| @keyframes fadeInRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .timeline-item:nth-child(even) { | |
| justify-content: flex-start; | |
| padding-right: 0; | |
| padding-left: 50%; | |
| animation: fadeInLeft 0.8s ease-out; | |
| } | |
| @keyframes fadeInLeft { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .timeline-content { | |
| background: rgba(26, 26, 46, 0.95); | |
| backdrop-filter: blur(10px); | |
| padding: 20px; | |
| border-radius: 15px; | |
| width: 90%; | |
| position: relative; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .timeline-dot { | |
| position: absolute; | |
| right: calc(50% - 10px); | |
| top: 30px; | |
| width: 20px; | |
| height: 20px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| border: 3px solid var(--card-bg); | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); | |
| } | |
| .timeline-item:nth-child(even) .timeline-dot { | |
| right: auto; | |
| left: calc(50% - 10px); | |
| } | |
| .floating-button { | |
| position: fixed; | |
| bottom: 30px; | |
| left: 30px; | |
| background: var(--primary-gradient); | |
| color: white; | |
| border: none; | |
| padding: 15px 30px; | |
| border-radius: 50px; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); | |
| transition: all 0.3s ease; | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .floating-button:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6); | |
| } | |
| .progress-bar { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| height: 30px; | |
| overflow: hidden; | |
| margin: 20px 0; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--success-gradient); | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| animation: progressAnimation 2s ease-out; | |
| } | |
| @keyframes progressAnimation { | |
| from { width: 0; } | |
| to { width: 100%; } | |
| } | |
| .notification { | |
| position: fixed; | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-100px); | |
| background: rgba(26, 26, 46, 0.98); | |
| backdrop-filter: blur(10px); | |
| padding: 15px 30px; | |
| border-radius: 50px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| z-index: 2000; | |
| transition: all 0.3s ease; | |
| } | |
| .notification.show { | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 40px; | |
| background: rgba(26, 26, 46, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| margin-top: 60px; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 30px; | |
| margin-top: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .footer-link { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-link:hover { | |
| color: var(--accent); | |
| } | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .timeline::before { | |
| right: 20px; | |
| } | |
| .timeline-item { | |
| padding-right: 0; | |
| padding-left: 60px; | |
| justify-content: flex-start; | |
| } | |
| .timeline-item:nth-child(even) { | |
| padding-left: 60px; | |
| } | |
| .timeline-dot { | |
| right: 10px ; | |
| left: auto ; | |
| } | |
| .floating-button { | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| } | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--dark-bg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease; | |
| } | |
| .loader.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .loader-circle { | |
| width: 60px; | |
| height: 60px; | |
| border: 3px solid rgba(255, 255, 255, 0.1); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="loader" id="loader"> | |
| <div class="loader-circle"></div> | |
| </div> | |
| <div class="notification" id="notification"> | |
| <i class="fas fa-check-circle"></i> پروژه با موفقیت بارگذاری شد! | |
| </div> | |
| <div class="container"> | |
| <header> | |
| <div class="header-content"> | |
| <div class="success-badge"> | |
| <i class="fas fa-check-circle"></i> | |
| <span>پروژه با موفقیت تکمیل شد</span> | |
| </div> | |
| <h1>🎉 پروژه re29066</h1> | |
| <p class="subtitle">یک راهحل کامل و مدرن برای نیازهای دیجیتال شما</p> | |
| <div class="progress-bar"> | |
| <div class="progress-fill">100% تکمیل شده</div> | |
| </div> | |
| <div class="project-stats"> | |
| <div class="stat-card"> | |
| <div class="stat-number">4</div> | |
| <div class="stat-label">Workflow CI/CD</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number">8</div> | |
| <div class="stat-label">سیستم ثبت عملیات</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number">1</div> | |
| <div class="stat-label">اپلیکیشن موبایل</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number">100%</div> | |
| <div class="stat-label">آماده تولید</div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <section class="features-section"> | |
| <h2 class="section-title">✅ ویژگیهای تکمیل شده</h2> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-sync-alt"></i> | |
| </div> | |
| <h3 class="feature-title">گردشکارهای خودکار</h3> | |
| <p class="feature-description"> | |
| CI/CD کامل با 4 workflow پیشرفته GitHub Actions برای ساخت، تست و استقرار خودکار | |
| </p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <h3 class="feature-title">سیستم ثبت عملیات</h3> | |
| <p class="feature-description"> | |
| مدیریت کامل وابستگیها، متغیرهای محیطی، سرویسها و اقدامات امنیتی | |
| </p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="feature-title">اپلیکیشن موبایل APK</h3> | |
| <p class="feature-description"> | |
| اپلیکیشن هیبرید Android با Capacitor، پشتیبانی از TON Wallet و Firebase | |
| </p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-certificate"></i> | |
| </div> | |
| <h3 class="feature-title">لایسنسها</h3> | |
| <p class="feature-description"> | |
| لایسنس MIT اصلی، لایسنسهای third-party و مجوز استفاده تجاری کامل | |
| </p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-file-code"></i> | |
| </div> | |
| <h3 class="feature-title">فایلهای Manifest</h3> | |
| <p class="feature-description"> | |
| PWA Manifest، APK Manifest و پشتیبانی کامل از Chrome Extensions | |
| </p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="feature-title">امنیت و نظارت</h3> | |
| <p class="feature-description"> | |
| Security scanning، monitoring خودکار و بهترین شیوههای امنیتی | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="downloads-section"> | |
| <h2 class="section-title">📁 فایلهای تحویلی</h2> | |
| <div class="downloads-grid"> | |
| <div class="download-card" onclick="downloadFile('project')"> | |
| <div class="download-icon"> | |
| <i class="fas fa-download"></i> | |
| </div> | |
| <div class="download-title">کل پروژه</div> | |
| <div class="download-size">125 MB</div> | |
| </div> | |
| <div class="download-card" onclick="downloadFile('report')"> | |
| <div class="download-icon"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <div class="download-title">گزارش نهایی</div> | |
| <div class="download-size">2.5 MB</div> | |
| </div> | |
| <div class="download-card" onclick="downloadFile('apk')"> | |
| <div class="download-icon"> | |
| <i class="fab fa-android"></i> | |
| </div> | |
| <div class="download-title">فایل APK</div> | |
| <div class="download-size">45 MB</div> | |
| </div> | |
| <div class="download-card" onclick="downloadFile('manifest')"> | |
| <div class="download-icon"> | |
| <i class="fas fa-cog"></i> | |
| </div> | |
| <div class="download-title">Manifest PWA</div> | |
| <div class="download-size">15 KB</div> | |
| </div> | |
| <div class="download-card" onclick="downloadFile('license')"> | |
| <div class="download-icon"> | |
| <i class="fas fa-balance-scale"></i> | |
| </div> | |
| <div class="download-title">لایسنس</div> | |
| <div class="download-size">8 KB</div> | |
| </div> | |
| <div class="download-card" onclick="downloadFile('script')"> | |
| <div class="download-icon"> | |
| <i class="fas fa-terminal"></i> | |
| </div> | |
| <div class="download-title">اسکریپت تکمیل</div> | |
| <div class="download-size">3 KB</div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="timeline-section"> | |
| <h2 class="section-title">🚀 مراحل بعدی</h2> | |
| <div class="timeline"> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <h3>1. دانلود فایلها</h3> | |
| <p>دانلود کامل فایلهای پروژه از لینکهای ارائه شده</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <h3>2. مطالعه گزارش نهایی</h3> | |
| <p>برای درک کامل ساختار و ویژگیهای پروژه</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <h3>3. پیکربندی Firebase</h3> | |
| <p>طبق راهنمای موجود، سرویس Firebase را راهاندازی کنید</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <h3>4. استقرار در Cloudflare</h3> | |
| <p>با استفاده از اسکریپتهای آماده، پروژه را مستقر کنید</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <h3>5. تست اپلیکیشن موبایل</h3> | |
| <p>نصب و تست APK تولید شده روی دستگاه Android</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <p>پروژه 100% آماده و قابل استفاده است!</p> | |
| <p style="margin-top: 10px; color: var(--text-secondary); font-size: 0.9rem;"> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--accent);">anycoder</a> | |
| </p> | |
| <div class="footer-links"> | |
| <a href="#" class="footer-link"> | |
| <i class="fab fa-github"></i> GitHub | |
| </a> | |
| <a href="#" class="footer-link"> | |
| <i class="fas fa-book"></i> مستندات | |
| </a> | |
| <a href="#" class="footer-link"> | |
| <i class="fas fa-support"></i> پشتیبانی | |
| </a> | |
| <a href="#" class="footer-link"> | |
| <i class="fas fa-envelope"></i> تماس | |
| </a> | |
| </div> | |
| </footer> | |
| </div> | |
| <button class="floating-button" onclick="startDeployment()"> | |
| <i class="fas fa-rocket"></i> | |
| شروع استقرار | |
| </button> | |
| <script> | |
| // Loader | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| document.getElementById('loader').classList.add('hidden'); | |
| showNotification('پروژه با موفقیت بارگذاری شد!'); | |
| }, 1500); | |
| }); | |
| // Notification system | |
| function showNotification(message) { | |
| const notification = document.getElementById('notification'); | |
| notification.innerHTML = `<i class="fas fa-check-circle"></i> ${message}`; | |
| notification.classList.add('show'); | |
| setTimeout(() => { | |
| notification.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // Download simulation | |
| function downloadFile(type) { | |
| const files = { | |
| 'project': 'در حال دانلود کل پروژه...', | |
| 'report': 'در حال دانلود گزارش نهایی...', | |
| 'apk': 'در حال دانلود فایل APK...', | |
| 'manifest': 'در حال دانلود Manifest PWA...', | |
| 'license': 'در حال دانلود فایل لایسنس...', | |
| 'script': 'در حال دانلود اسکریپت تکمیل...' | |
| }; | |
| showNotification(files[type] || 'در حال دانلود فایل...'); | |
| // Simulate download progress | |
| setTimeout(() => { | |
| showNotification('دانلود با موفقیت انجام شد!'); | |
| }, 2000); | |
| } | |
| // Deployment simulation | |
| function startDeployment() { | |
| showNotification('شروع فرآیند استقرار...'); | |
| const steps = [ | |
| 'بررسی پیشنیازها...', | |
| 'اتصال به سرور...', | |
| 'بارگذاری فایلها...', | |
| 'پیکربندی پایگاه داده...', | |
| 'نصب وابستگیها...', | |
| 'راهاندازی سرویسها...', | |
| 'تنظیم دامنه...', | |
| 'استقرار با موفقیت انجام شد!' | |
| ]; | |
| steps.forEach((step, index) => { | |
| setTimeout(() => { | |
| showNotification(step); | |
| }, (index + 1) * 1500); | |
| }); | |
| } | |
| // Intersection Observer for animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all feature cards | |
| document.querySelectorAll('.feature-card').forEach(card => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = 'all 0.6s ease'; | |
| observer.observe(card); | |
| }); | |
| // Smooth scroll for internal links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Parallax effect on scroll | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const parallax = document.querySelector('body::before'); | |
| if (parallax) { | |
| const speed = 0.5; | |
| parallax.style.transform = `translateY(${scrolled * speed}px)`; | |
| } | |
| }); | |
| // Add hover effect to stat cards | |
| document.querySelectorAll('.stat-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.querySelector('.stat-number').style.transform = 'scale(1.2)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.querySelector('.stat-number').style.transform = 'scale(1)'; | |
| }); | |
| }); | |
| // Dynamic progress bar animation | |
| window.addEventListener('load', () => { | |
| const progressBar = document.querySelector('.progress-fill'); | |
| if (progressBar) { | |
| let width = 0; | |
| const interval = setInterval(() => { | |
| if (width >= 100) { | |
| clearInterval(interval); | |
| } else { | |
| width += 2; | |
| progressBar.style.width = width + '%'; | |
| progressBar.textContent = width + '% تکمیل شده'; | |
| } | |
| }, 20); | |
| } | |
| }); | |
| // Add ripple effect to buttons | |
| document.querySelectorAll('button, .download-card').forEach(element => { | |
| element.addEventListener('click', function(e) { | |
| const ripple = document.createElement('span'); | |
| ripple.classList.add('ripple'); | |
| this.appendChild(ripple); | |
| const rect = this.getBoundingClientRect(); | |
| const size = Math.max(rect.width, rect.height); | |
| const x = e.clientX - rect.left - size / 2; | |
| const y = e.clientY - rect.top - size / 2; | |
| ripple.style.width = ripple.style.height = size + 'px'; | |
| ripple.style.left = x + 'px'; | |
| ripple.style.top = y + 'px'; | |
| setTimeout(() => { | |
| ripple.remove(); | |
| }, 600); | |
| }); | |
| }); | |
| // Add CSS for ripple effect | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| .ripple { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.6); | |
| transform: scale(0); | |
| animation: ripple-animation 0.6s ease-out; | |
| pointer-events: none; | |
| } | |
| @keyframes ripple-animation { | |
| to { | |
| transform: scale(4); | |
| opacity: 0; | |
| } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| </script> | |
| </body> | |
| </html> |