Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>استوديو التوليد الآلي — منصة إنتاج الفيديو بالذكاء الاصطناعي</title> | |
| <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Lalezar&family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <!-- Whop checkout loader — defer فقط (بدون async) عشان يتأكد إن الصفحة اتحمّلت كاملة والعنصر موجود قبل ما يشتغل --> | |
| <script defer src="https://js.whop.com/static/checkout/loader.js"></script> | |
| <style> | |
| :root{ | |
| --bg:#0A0A12; | |
| --surface:#14141F; | |
| --surface-2:#1C1C2B; | |
| --violet:#7C5CFC; | |
| --violet-dim:#5B41C4; | |
| --amber:#F5A623; | |
| --text:#EDEDF5; | |
| --text-muted:#8B8FA3; | |
| --success:#34D399; | |
| --border:rgba(255,255,255,0.08); | |
| } | |
| *{box-sizing:border-box;} | |
| html,body{background:var(--bg);} | |
| body{ | |
| font-family:'Cairo', sans-serif; | |
| color:var(--text); | |
| background: | |
| radial-gradient(circle at 15% 0%, rgba(124,92,252,0.16), transparent 45%), | |
| radial-gradient(circle at 90% 15%, rgba(245,166,35,0.08), transparent 40%), | |
| var(--bg); | |
| min-height:100vh; | |
| } | |
| .font-display{ font-family:'Lalezar', 'Cairo', sans-serif; letter-spacing:0.5px; } | |
| .font-label{ font-family:'IBM Plex Sans Arabic', 'Cairo', sans-serif; } | |
| /* filmstrip sprockets — signature motif */ | |
| .filmstrip{ | |
| height:14px; | |
| background-image: repeating-linear-gradient(90deg, var(--bg) 0 8px, transparent 8px 18px); | |
| background-color: var(--surface-2); | |
| border-radius:3px; | |
| position:relative; | |
| } | |
| .filmstrip::before, .filmstrip::after{ | |
| content:""; | |
| position:absolute; inset:0; | |
| } | |
| .grain{ | |
| position:absolute; inset:0; pointer-events:none; opacity:0.035; mix-blend-mode:overlay; | |
| background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| } | |
| .reel-step{ | |
| border:1px solid var(--border); | |
| background:var(--surface); | |
| border-radius:14px; | |
| } | |
| .reel-step.is-active{ | |
| border-color:var(--violet); | |
| box-shadow:0 0 0 1px var(--violet), 0 8px 30px -10px rgba(124,92,252,0.5); | |
| } | |
| .reel-num{ | |
| font-family:'Lalezar','Cairo',sans-serif; | |
| background:var(--surface-2); | |
| border:1px solid var(--border); | |
| } | |
| .reel-step.is-active .reel-num{ | |
| background:var(--violet); | |
| border-color:var(--violet); | |
| color:#fff; | |
| } | |
| .glow-frame{ | |
| border:1px solid var(--border); | |
| background:var(--surface); | |
| box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 30px 80px -30px rgba(124,92,252,0.35); | |
| } | |
| .btn-primary{ | |
| background:linear-gradient(180deg, var(--violet) 0%, var(--violet-dim) 100%); | |
| box-shadow:0 8px 24px -8px rgba(124,92,252,0.6); | |
| transition:transform .15s ease, box-shadow .15s ease; | |
| } | |
| .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px -8px rgba(124,92,252,0.75);} | |
| .pulse-dot{ | |
| width:8px; height:8px; border-radius:999px; background:var(--success); | |
| box-shadow:0 0 0 0 rgba(52,211,153,0.6); | |
| animation:pulse 2s infinite; | |
| } | |
| @keyframes pulse{ | |
| 0%{ box-shadow:0 0 0 0 rgba(52,211,153,0.55); } | |
| 70%{ box-shadow:0 0 0 8px rgba(52,211,153,0); } | |
| 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); } | |
| } | |
| /* keep whop embed contained and responsive, and give it enough height for the full form (email + card + billing address + submit) */ | |
| #whopMount{ width:100%; min-height:920px; } | |
| #whopMount iframe{ | |
| width:100% ; | |
| min-height:920px ; | |
| height:920px ; | |
| border:none ; | |
| } | |
| @media (max-width:640px){ | |
| #whopMount, #whopMount iframe{ min-height:820px; height:820px ; } | |
| } | |
| #n8nFrame{ | |
| width:100%; | |
| height:850px; /* natural height of the form — width is what expands */ | |
| border:0; | |
| background:#fff; | |
| border-radius:12px; | |
| } | |
| @media (max-width:640px){ | |
| #n8nFrame{ height:750px; } | |
| } | |
| [x-cloak]{ display:none ; } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="grain fixed"></div> | |
| <!-- top bar --> | |
| <header class="border-b" style="border-color:var(--border);"> | |
| <div class="max-w-6xl mx-auto px-5 py-4 flex items-center justify-between"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background:var(--violet);"> | |
| <span class="font-display text-lg leading-none">ف</span> | |
| </div> | |
| <span class="font-label text-sm text-[color:var(--text-muted)]">استوديو التوليد الآلي</span> | |
| </div> | |
| <span id="statusPill" class="hidden items-center gap-2 text-xs font-label px-3 py-1.5 rounded-full" style="background:var(--surface); border:1px solid var(--border);"> | |
| <span class="pulse-dot"></span> <span id="statusPillText">الوصول مفعّل</span> | |
| </span> | |
| </div> | |
| </header> | |
| <main class="max-w-6xl mx-auto px-5 py-12"> | |
| <!-- ============ PAYWALL STATE ============ --> | |
| <section id="paywallView"> | |
| <div class="text-center max-w-2xl mx-auto mb-10"> | |
| <p class="font-label text-xs tracking-widest text-[color:var(--amber)] mb-3">اشتراك شهري — 30 يوم وصول كامل</p> | |
| <h1 class="font-display text-5xl md:text-6xl leading-tight mb-4">فيديوهاتك تتصوّر لوحدها</h1> | |
| <p class="text-[color:var(--text-muted)] text-lg leading-relaxed"> | |
| اشترك شهريًا وافتح لوحة التوليد الآلي اللي بتحوّل فكرتك لفيديو جاهز خلال دقائق — من غير مونتاج ومن غير خبرة. | |
| </p> | |
| <p id="expiredNotice" class="hidden font-label text-sm mt-4 px-4 py-2 rounded-lg inline-block" style="background:rgba(245,166,35,0.1); color:var(--amber); border:1px solid rgba(245,166,35,0.3);"> | |
| انتهت مدة الاشتراك (30 يوم) — جدّد الدفع للمتابعة | |
| </p> | |
| </div> | |
| <!-- process reel --> | |
| <div class="grid grid-cols-3 gap-3 md:gap-5 max-w-2xl mx-auto mb-10"> | |
| <div class="reel-step is-active p-4 text-center"> | |
| <div class="reel-num w-9 h-9 rounded-full mx-auto mb-2 flex items-center justify-center text-sm">١</div> | |
| <p class="font-label text-xs text-[color:var(--text-muted)]">الدفع</p> | |
| </div> | |
| <div class="reel-step p-4 text-center opacity-60"> | |
| <div class="reel-num w-9 h-9 rounded-full mx-auto mb-2 flex items-center justify-center text-sm">٢</div> | |
| <p class="font-label text-xs text-[color:var(--text-muted)]">فتح اللوحة</p> | |
| </div> | |
| <div class="reel-step p-4 text-center opacity-60"> | |
| <div class="reel-num w-9 h-9 rounded-full mx-auto mb-2 flex items-center justify-center text-sm">٣</div> | |
| <p class="font-label text-xs text-[color:var(--text-muted)]">توليد الفيديو</p> | |
| </div> | |
| </div> | |
| <div class="filmstrip mb-0 max-w-2xl mx-auto"></div> | |
| <div class="glow-frame rounded-2xl p-6 md:p-8 max-w-2xl mx-auto" style="border-top-left-radius:0; border-top-right-radius:0;"> | |
| <p class="font-label text-sm text-[color:var(--text-muted)] mb-5 text-center">أكمل الدفع الآمن عبر Whop لفتح استوديو التوليد فورًا</p> | |
| <!-- ⚠️ غيّر data-whop-checkout-plan-id لو Plan ID مختلف عن اللي عندك --> | |
| <!-- ⚠️ غيّر data-whop-checkout-return-url لدومين موقعك الحقيقي بعد الرفع (مش file محلي) --> | |
| <div id="whopMount" | |
| data-whop-checkout-plan-id="plan_wGeEsGuOcEizi" | |
| data-whop-checkout-return-url="https://YOUR-DOMAIN.com/index.html" | |
| data-whop-checkout-theme="dark" | |
| data-whop-checkout-theme-accent-color="violet"> | |
| <p id="whopDiag" class="font-label text-xs text-center py-6" style="color:var(--text-muted);"> | |
| جاري تحميل نموذج الدفع... | |
| </p> | |
| </div> | |
| </div> | |
| <div class="filmstrip mt-0 max-w-2xl mx-auto"></div> | |
| <p class="text-center text-xs text-[color:var(--text-muted)] font-label mt-6"> | |
| بعد إتمام الدفع هترجع هنا تلقائيًا وتلاقي اللوحة مفتوحة. | |
| </p> | |
| </section> | |
| <!-- ============ WORKSPACE STATE ============ --> | |
| <section id="workspaceView" class="hidden"> | |
| <div class="flex items-center justify-between mb-6 flex-wrap gap-3"> | |
| <div> | |
| <p class="font-label text-xs tracking-widest text-[color:var(--success)] mb-1">تم فتح الوصول</p> | |
| <h2 class="font-display text-3xl md:text-4xl">لوحة توليد الفيديو</h2> | |
| </div> | |
| <button id="logoutBtn" class="font-label text-xs text-[color:var(--text-muted)] hover:text-[color:var(--text)] underline underline-offset-4"> | |
| إنهاء الجلسة | |
| </button> | |
| </div> | |
| <div class="filmstrip max-w-none"></div> | |
| <div class="glow-frame p-3 md:p-4" style="border-radius:0;"> | |
| <iframe id="n8nFrame" | |
| title="استوديو توليد الفيديو"> | |
| </iframe> | |
| </div> | |
| <div class="filmstrip max-w-none"></div> | |
| </section> | |
| </main> | |
| <footer class="max-w-6xl mx-auto px-5 py-8 text-center"> | |
| <p class="font-label text-xs text-[color:var(--text-muted)]">استوديو التوليد الآلي — مدعوم بأتمتة n8n</p> | |
| </footer> | |
| <script> | |
| (function () { | |
| const paywallView = document.getElementById('paywallView'); | |
| const workspaceView = document.getElementById('workspaceView'); | |
| const statusPill = document.getElementById('statusPill'); | |
| const statusPillText = document.getElementById('statusPillText'); | |
| const expiredNotice = document.getElementById('expiredNotice'); | |
| const logoutBtn = document.getElementById('logoutBtn'); | |
| const STORAGE_KEY = 'studio_access_expires_at'; // يخزّن تاريخ انتهاء الاشتراك (timestamp) | |
| const ACCESS_DAYS = 30; | |
| const ACCESS_MS = ACCESS_DAYS * 24 * 60 * 60 * 1000; | |
| const DAY_MS = 24 * 60 * 60 * 1000; | |
| // ⚠️ ترميز بسيط (تصعيب فقط) — الرابط مش ظاهر كنص واضح في "عرض المصدر". | |
| // الآن بيشاور على دومين الـ Worker (بروكسي حقيقي) بدل رابط n8n المباشر. | |
| const FRAME_ENC = 'aHR0cHM6Ly9zcGFya2xpbmctcml2ZXItMGIzNi55YWh5YWVyYWt5MjEud29ya2Vycy5kZXYv'; | |
| function mountFrame() { | |
| const frame = document.getElementById('n8nFrame'); | |
| if (frame && !frame.getAttribute('src')) { | |
| frame.setAttribute('src', atob(FRAME_ENC)); | |
| } | |
| } | |
| function grantAccess() { | |
| const expiresAt = Date.now() + ACCESS_MS; | |
| localStorage.setItem(STORAGE_KEY, String(expiresAt)); | |
| return expiresAt; | |
| } | |
| function getStoredExpiry() { | |
| const raw = localStorage.getItem(STORAGE_KEY); | |
| const n = Number(raw); | |
| return raw && Number.isFinite(n) ? n : null; | |
| } | |
| function showWorkspace(expiresAt) { | |
| paywallView.classList.add('hidden'); | |
| workspaceView.classList.remove('hidden'); | |
| statusPill.classList.remove('hidden'); | |
| statusPill.classList.add('flex'); | |
| const daysLeft = Math.max(0, Math.ceil((expiresAt - Date.now()) / DAY_MS)); | |
| statusPillText.textContent = 'الوصول مفعّل — متبقي ' + daysLeft + ' يوم'; | |
| mountFrame(); | |
| } | |
| function showPaywall(expired) { | |
| workspaceView.classList.add('hidden'); | |
| paywallView.classList.remove('hidden'); | |
| statusPill.classList.add('hidden'); | |
| if (expiredNotice) expiredNotice.classList.toggle('hidden', !expired); | |
| } | |
| // check redirect back from Whop (?status=success) | |
| const params = new URLSearchParams(window.location.search); | |
| const status = params.get('status'); | |
| if (status === 'success') { | |
| const expiresAt = grantAccess(); | |
| history.replaceState({}, '', window.location.pathname); | |
| showWorkspace(expiresAt); | |
| } else { | |
| const expiresAt = getStoredExpiry(); | |
| if (expiresAt && Date.now() < expiresAt) { | |
| showWorkspace(expiresAt); | |
| } else if (expiresAt) { | |
| // كان فيه اشتراك بس خلصت الـ 30 يوم | |
| localStorage.removeItem(STORAGE_KEY); | |
| showPaywall(true); | |
| } else { | |
| showPaywall(false); | |
| } | |
| } | |
| logoutBtn.addEventListener('click', function () { | |
| localStorage.removeItem(STORAGE_KEY); | |
| showPaywall(false); | |
| }); | |
| // watchdog: بعد 4 ثواني، لو Whop لسه ما حطش iframe جوه الصندوق، نبلّغ المستخدم بدل ما يفضل فاضي بصمت | |
| setTimeout(function () { | |
| const mount = document.getElementById('whopMount'); | |
| const diag = document.getElementById('whopDiag'); | |
| if (mount && !mount.querySelector('iframe')) { | |
| if (diag) { | |
| diag.innerHTML = | |
| 'لم يتم تحميل نموذج الدفع.<br>الأسباب المحتملة: (1) الموقع لم يُفتح من دومين https حقيقي بعد، أو (2) Plan ID غير صحيح أو غير مفعّل في حساب Whop، أو (3) حاجب إعلانات/سكريبتات يمنع js.whop.com.'; | |
| } | |
| console.warn('[Whop] لم يتم العثور على iframe داخل #whopMount بعد 4 ثواني. تحقق من الدومين وPlan ID.'); | |
| } | |
| }, 4000); | |
| })(); | |
| </script> | |
| <!-- | |
| ⚠️ ملاحظة صريحة: الكود اللي تحت ده "مثبّطات" بسيطة (تصعيب الأمر) مش حماية حقيقية. | |
| أي حد فاهم شوية هيقدر يتخطاها بسهولة (تعطيل الجافاسكريبت، عرض المصدر، أدوات خارج المتصفح...). | |
| المصدر الكامل لأي صفحة ويب بيتحمّل على جهاز الزائر عشان المتصفح يقدر يعرضها — مفيش طريقة | |
| تقنية تمنع شخص مصمم فعلاً يشوف كود HTML/CSS/JS. اللي فعليًا لازم يتخبّى (مفاتيح API، منطق | |
| التحقق من الاشتراك، إلخ) لازم يكون على سيرفر، مش هنا في المتصفح. | |
| --> | |
| <script> | |
| (function () { | |
| // تعطيل الزر اليمين | |
| document.addEventListener('contextmenu', function (e) { e.preventDefault(); }); | |
| // تعطيل اختصارات فتح أدوات المطورين الشائعة | |
| document.addEventListener('keydown', function (e) { | |
| const key = e.key ? e.key.toUpperCase() : ''; | |
| const blockCombo = | |
| key === 'F12' || | |
| (e.ctrlKey && e.shiftKey && (key === 'I' || key === 'J' || key === 'C')) || | |
| (e.ctrlKey && key === 'U') || | |
| (e.metaKey && e.altKey && key === 'I'); // macOS Cmd+Opt+I | |
| if (blockCombo) e.preventDefault(); | |
| }); | |
| // تنبيه تقريبي عند فتح أدوات المطورين (heuristic بسيط، مش دقيق 100%) | |
| const overlay = document.createElement('div'); | |
| overlay.id = 'devtoolsOverlay'; | |
| overlay.style.cssText = | |
| 'position:fixed;inset:0;z-index:9999;background:rgba(10,10,18,0.97);' + | |
| 'display:none;align-items:center;justify-content:center;text-align:center;padding:24px;' + | |
| 'font-family:Cairo,sans-serif;color:#EDEDF5;'; | |
| overlay.innerHTML = | |
| '<div><p style="font-size:18px;margin-bottom:8px;">من فضلك أغلق أدوات المطوّرين للمتابعة</p>' + | |
| '<p style="font-size:13px;color:#8B8FA3;">هذا تنبيه بسيط وليس حماية كاملة</p></div>'; | |
| document.body.appendChild(overlay); | |
| let wasOpen = false; | |
| setInterval(function () { | |
| const widthDiff = window.outerWidth - window.innerWidth > 160; | |
| const heightDiff = window.outerHeight - window.innerHeight > 160; | |
| const likelyOpen = widthDiff || heightDiff; | |
| if (likelyOpen !== wasOpen) { | |
| wasOpen = likelyOpen; | |
| overlay.style.display = likelyOpen ? 'flex' : 'none'; | |
| } | |
| }, 800); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |