Spaces:

yking21
/

slideshow-maker

Running

File size: 16,154 Bytes

895ef06

<!DOCTYPE html>
<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% !important;
    min-height:920px !important;
    height:920px !important;
    border:none !important;
  }
  @media (max-width:640px){
    #whopMount, #whopMount iframe{ min-height:820px; height:820px !important; }
  }

  #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 !important; }
</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>