Update index.html

index.html

@@ -20,6 +20,8 @@
             --accent-glow: rgba(74, 108, 250, 0.2);  
             --success-color: #38A169;
             --danger-color: #e53e3e;  
+            --premium-gold: #FFC107;
+            --premium-gradient: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
             --radius-card: 20px;  
             --radius-btn: 14px;  
         }  
@@ -62,7 +64,22 @@
             background: linear-gradient(90deg, #2d3748, #4A6CFA); 
             -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
         }  
-        .subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-top: 5px; }  
+        .subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-top: 5px; margin-bottom: 10px; }  
+
+        /* استایل بج وضعیت اشتراک */
+        .status-badge {
+            display: inline-block; padding: 6px 16px; border-radius: 20px;
+            font-size: 0.85rem; font-weight: 700; margin-top: 5px;
+            letter-spacing: 0.5px; opacity: 0; transform: translateY(-5px);
+            transition: all 0.5s ease;
+        }
+        .status-badge.visible { opacity: 1; transform: translateY(0); }
+        .badge-free { background: #E2E8F0; color: #64748b; }
+        .badge-premium { 
+            background: var(--premium-gradient); color: #fff; 
+            box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
+            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+        }
 
         .card { 
             background: var(--panel-bg); 
@@ -138,11 +155,16 @@
 
         /* پلیر و متن */
         .player-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--panel-border); }
-        #mainDownloadLink {
+        
+        /* استایل دکمه دانلود */
+        .download-btn-style {
             background-color: rgba(74, 108, 250, 0.1); color: var(--accent-primary); text-decoration: none; font-size: 0.9rem;
-            font-weight: 700; padding: 8px 16px; border-radius: 10px; transition: 0.2s; display: none;
+            font-weight: 700; padding: 8px 16px; border-radius: 10px; transition: 0.2s; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: none;
         }
-        #mainDownloadLink:hover { background-color: rgba(74, 108, 250, 0.2); }
+        .download-btn-style:hover { background-color: rgba(74, 108, 250, 0.2); }
+        .download-btn-style.locked { background-color: #f1f5f9; color: #94a3b8; }
+        .download-btn-style.locked:hover { background-color: #e2e8f0; }
+
         .audio-item { margin-bottom: 10px; }
         audio { width: 100%; height: 45px; border-radius: 20px; margin-top: 5px; }
         .lyrics-container {
@@ -160,7 +182,7 @@
         .bar:nth-child(4) { animation-delay: 0.3s; height: 50%; }
         @keyframes jump { 0%, 100% { height: 20%; } 50% { height: 100%; } }
 
-        /* --- استایل‌های جدید تاریخچه و حذف --- */
+        /* --- استایل‌های تاریخچه و حذف --- */
         #historySection { margin-top: 30px; width: 100%; }
         .history-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
         .history-list { display: grid; gap: 12px; }
@@ -174,9 +196,8 @@
         .h-details h4 { margin: 0; font-size: 1rem; color: var(--text-primary); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
         .h-details span { font-size: 0.8rem; color: var(--text-secondary); }
         
-        /* دکمه حذف در سمت چپ */
         .h-delete {
-            position: absolute; left: 15px; /* سمت چپ فیزیکی */
+            position: absolute; left: 15px; 
             background: #fee2e2; color: var(--danger-color);
             width: 38px; height: 38px; border-radius: 50%;
             display: flex; align-items: center; justify-content: center;
@@ -186,7 +207,7 @@
         .history-card:hover .h-delete { opacity: 1; transform: scale(1); }
         .h-delete:hover { background: var(--danger-color); color: white; transform: scale(1.1); }
 
-        /* مودال حذف */
+        /* مودال‌ها */
         .modal-overlay {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
             background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);
@@ -212,7 +233,24 @@
         .btn-confirm { background: var(--danger-color); color: white; box-shadow: 0 5px 15px rgba(229, 62, 62, 0.3); }
         .btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(229, 62, 62, 0.4); }
 
-        /* نمایش مودال */
+        /* مودال ارتقا */
+        @keyframes pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 193, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } }
+        .upgrade-icon { 
+            width: 70px; height: 70px; 
+            background: var(--premium-gradient);
+            border-radius: 50%; color: white; margin: 0 auto 20px; 
+            display: flex; align-items: center; justify-content: center; 
+            font-size: 2rem; animation: pulse-gold 2s infinite; 
+        }
+        .btn-upgrade { 
+            background: var(--premium-gradient); color: #333; 
+            box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3); 
+        }
+        .btn-upgrade:hover { 
+            transform: translateY(-2px); 
+            box-shadow: 0 8px 25px rgba(255, 193, 7, 0.5); 
+        }
+
         .modal-overlay.open { display: flex; opacity: 1; }
         .modal-overlay.open .modal-box { transform: scale(1); }
     </style>
@@ -226,7 +264,8 @@
                 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
             </div>
             <h1>استودیو موزیک آلفا</h1>  
-            <p class="subtitle">ساخت آهنگ حرفه‌ای با هوش مصنوعی</p>  
+            <p class="subtitle">ساخت آهنگ حرفه‌ای با هوش مصنوعی</p>
+            <div id="statusBadge" class="status-badge">نسخه رایگان</div>
         </header>  
 
         <div id="step1" class="card">
@@ -258,7 +297,7 @@
         <div id="finalResult" class="card" style="display:none;">
             <div class="player-header">
                 <div id="resultHeaderText" style="font-weight: 700; display: flex; align-items: center; gap: 5px;"></div>
-                <a id="mainDownloadLink" href="#" target="_blank" download>دانلود آهنگ 📥</a>
+                <button id="mainDownloadBtn" class="download-btn-style">دانلود آهنگ 📥</button>
             </div>
             <div id="playerWrapper"></div>
             <div class="form-label" style="margin-top: 20px; justify-content: center; color: #718096;">متن آهنگ</div>
@@ -290,10 +329,28 @@
         </div>
     </div>
 
+    <!-- مودال ارتقا به نسخه کامل -->
+    <div class="modal-overlay" id="upgradeModal">
+        <div class="modal-box">
+            <div class="upgrade-icon">👑</div>
+            <h3 style="font-weight: 800; color: #333;">دانلود مخصوص اعضای ویژه</h3>
+            <p style="margin-bottom: 25px; line-height: 1.6;">برای دانلود آهنگ‌های ساخته شده با کیفیت اصلی و بدون محدودیت، لطفا حساب کاربری خود را به نسخه نامحدود ارتقا دهید.</p>
+            <div class="modal-actions" style="flex-direction: column;">
+                <button class="btn-modal btn-upgrade" id="btnGoPremium">⭐️ ارتقا به نسخه کامل</button>
+                <button class="btn-modal btn-cancel" onclick="closeUpgradeModal()" style="width: 100%;">فعلاً نه</button>
+            </div>
+        </div>
+    </div>
+
     <script>
         const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
+        // مشخصات نسخه پولی
+        const PREMIUM_PAGE_ID = '1149636';
+        const PREMIUM_URL = '#/nav/online/news/getSingle/1149636/eyJpdiI6InZSVUdlLzBlR0FzOHZJdXFZeWhER0E9PSIsInZhbHVlIjoiWFhqRXBLc29vSFpHdk9nYmRjZGVuWHRHRHVSZHRlTG1BUENLaE5mNXBNVVRGWFg3ZWN0djJ5K1dIY1RqTHJGaCIsIm1hYyI6IjIzYzFlZTMwYmVmMTdkYjQ0YTQ4YWMxNmFhN2RmNWQ2OTU0MjI0ZWVlZGI3ZjJjMjhkNmQxNjM4MDFlZTIxNmUiLCJ0YWciOiIifQ==/20934991';
+
         let db;
-        let songToDeleteId = null; // برای نگهداری شناسه آهنگی که قرار است حذف شود
+        let songToDeleteId = null;
+        let userSubscriptionStatus = 'free'; // پیش‌فرض رایگان
 
         // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
@@ -304,10 +361,12 @@
         const finalResult = document.getElementById('finalResult');
         const playerWrapper = document.getElementById('playerWrapper');
         const finalLyricsBox = document.getElementById('finalLyricsBox');
-        const mainDownloadLink = document.getElementById('mainDownloadLink');
+        const mainDownloadBtn = document.getElementById('mainDownloadBtn');
         const historyList = document.getElementById('historyList');
         const historySection = document.getElementById('historySection');
         const deleteModal = document.getElementById('deleteConfirmModal');
+        const upgradeModal = document.getElementById('upgradeModal');
+        const statusBadge = document.getElementById('statusBadge');
 
         const getVal = (id) => document.getElementById(id).value;
         const getNum = (id) => Number(document.getElementById(id).value);
@@ -322,6 +381,76 @@
             });
         }
 
+        // --- مدیریت اشتراک و ارتباط با آیفریم مادر ---
+        function isUserPaid(userObject) {
+            return userObject && userObject.isLogin && userObject.accessible_pages && 
+                   (userObject.accessible_pages.includes(PREMIUM_PAGE_ID) || 
+                    userObject.accessible_pages.includes(parseInt(PREMIUM_PAGE_ID)));
+        }
+
+        function updateSubscriptionUI(status) {
+            if (status === 'paid') {
+                statusBadge.textContent = 'نسخه نامحدود';
+                statusBadge.className = 'status-badge visible badge-premium';
+                mainDownloadBtn.classList.remove('locked');
+            } else {
+                statusBadge.textContent = 'نسخه رایگان';
+                statusBadge.className = 'status-badge visible badge-free';
+                // در حالت رایگان آیکون قفل به دکمه دانلود (اختیاری) اضافه نمی‌کنیم تا کاربر کلیک کند و مودال ببیند
+            }
+        }
+
+        // شنونده پیام از آیفریم مادر
+        window.addEventListener('message', (event) => {
+            if (event.data && event.data.type === 'USER_STATUS_RESPONSE') {
+                try {
+                    const userObject = JSON.parse(event.data.payload);
+                    userSubscriptionStatus = isUserPaid(userObject) ? 'paid' : 'free';
+                } catch (e) {
+                    userSubscriptionStatus = 'free';
+                }
+                updateSubscriptionUI(userSubscriptionStatus);
+            }
+        });
+
+        // درخواست وضعیت کاربر در شروع برنامه
+        parent.postMessage({ type: 'REQUEST_USER_STATUS' }, '*');
+
+        // مدیریت کلیک دکمه دانلود (تابع امنیتی)
+        function handleSecureDownload(url, e) {
+            if (e) e.preventDefault();
+            
+            if (userSubscriptionStatus === 'free') {
+                upgradeModal.classList.add('open');
+            } else {
+                // ارسال درخواست دانلود به آیفریم مادر
+                parent.postMessage({ 
+                    type: 'INITIATE_DOWNLOAD_FROM_URL', 
+                    payload: { audioUrl: url } 
+                }, '*');
+                
+                // تغییر موقت متن دکمه برای فیدبک
+                const btn = e ? e.target.closest('button') : null;
+                if(btn) {
+                    const originalText = btn.innerHTML;
+                    btn.innerHTML = 'در حال ارسال... ⏳';
+                    setTimeout(() => { btn.innerHTML = originalText; }, 2000);
+                }
+            }
+        }
+
+        // دکمه ارتقا در مودال
+        document.getElementById('btnGoPremium').addEventListener('click', () => {
+            parent.postMessage({ 
+                type: 'NAVIGATE_TO_PREMIUM', 
+                payload: { url: PREMIUM_URL } 
+            }, '*');
+        });
+
+        function closeUpgradeModal() {
+            upgradeModal.classList.remove('open');
+        }
+
         // --- مدیریت دیتابیس ---
         function initDB() {
             const request = indexedDB.open("alphaMusicDB", 1);
@@ -332,6 +461,7 @@
 
         async function saveToHistory(idea, lyrics, audioUrl) {
             try {
+                // برای ذخیره در DB باید فایل را فچ کنیم
                 const response = await fetch(audioUrl);
                 const audioBlob = await response.blob();
                 const newItem = {
@@ -415,6 +545,9 @@
         deleteModal.addEventListener('click', (e) => {
             if (e.target === deleteModal) closeDeleteModal();
         });
+        upgradeModal.addEventListener('click', (e) => {
+            if (e.target === upgradeModal) closeUpgradeModal();
+        });
 
         function openHistoryItem(item) {
             step1.style.display = 'none';
@@ -425,8 +558,10 @@
             headerText.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg> آهنگ آرشیو شده`;
             headerText.style.color = 'var(--accent-primary)';
 
-            mainDownloadLink.href = audioURL;
-            mainDownloadLink.style.display = 'inline-block';
+            // تنظیم دکمه دانلود
+            mainDownloadBtn.style.display = 'inline-flex';
+            mainDownloadBtn.onclick = (e) => handleSecureDownload(audioURL, e);
+
             playerWrapper.innerHTML = `<audio controls autoplay src="${audioURL}"></audio>`;
             finalLyricsBox.innerHTML = formatLyrics(item.lyrics);
             
@@ -498,8 +633,10 @@
                 hasResult = true;
 
                 if (processedUrls.size === 1) {
-                    mainDownloadLink.href = fullUrl;
-                    mainDownloadLink.style.display = 'inline-block';
+                    // تنظیم دکمه دانلود اصلی
+                    mainDownloadBtn.style.display = 'inline-flex';
+                    mainDownloadBtn.onclick = (e) => handleSecureDownload(fullUrl, e);
+                    
                     saveToHistory(idea, lyrics, fullUrl);
                 }
                 playerWrapper.innerHTML += `<div class="audio-item"><audio controls autoplay src="${fullUrl}"></audio></div>`;