Update templates/ideogram.html

templates/ideogram.html

@@ -5,249 +5,571 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>تولید تصویر با Ideogram 4</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
+
+        :root {
+            --app-font: 'Vazirmatn', sans-serif; --app-bg: #F8F9FC; --panel-bg: #FFFFFF;
+            --panel-border: #EAEFF7; --input-bg: #F6F8FB; --input-border: #E1E7EF;
+            --text-primary: #1A202C; --text-secondary: #626F86; --text-tertiary: #8A94A6;
+            --accent-primary: #4A6CFA; --accent-primary-hover: #3553D6; --accent-primary-glow: rgba(74, 108, 250, 0.25);
+            --accent-secondary: #0FD4A8; --accent-secondary-hover: #0DA986; --accent-secondary-glow: rgba(15, 212, 168, 0.2);
+            --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03); --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
+            --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05);
+            --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
+            --radius-card: 24px; --radius-btn: 14px; --radius-input: 12px;
+            --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        @keyframes satellite-pulse-1 { from { transform: scale(0.7) translateX(-50%); opacity: 0.6; } to { transform: scale(1.1) translateX(-50%); opacity: 1; } }
+        @keyframes satellite-pulse-2 { from { transform: scale(0.7) translateY(-50%); opacity: 0.6; } to { transform: scale(1.1) translateY(-50%); opacity: 1; } }
+        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
+        @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+
+        html { scroll-behavior: smooth; }
         body {
-            font-family: Tahoma, Arial, sans-serif;
-            background-color: #f4f4f9;
-            color: #333;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            margin: 0;
-            padding: 20px;
-        }
-        .container {
-            background-color: #fff;
-            padding: 30px;
-            border-radius: 12px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-            max-width: 700px;
-            width: 100%;
-        }
-        h1 {
-            text-align: center;
-            font-size: 24px;
-            margin-bottom: 20px;
-            color: #2c3e50;
-        }
-        .form-group {
-            margin-bottom: 15px;
-        }
-        .flex-group {
-            display: flex;
-            gap: 15px;
-        }
-        .flex-group .form-group {
-            flex: 1;
-        }
-        label {
-            display: block;
-            margin-bottom: 5px;
-            font-weight: bold;
-            font-size: 14px;
+            font-family: var(--app-font); direction: rtl; background-color: var(--app-bg);
+            color: var(--text-primary); font-size: 16px; line-height: 1.8; margin: 0;
+            padding: 2.5rem 1rem; min-height: 100vh; display: flex; justify-content: center;
+            align-items: flex-start; overflow-x: hidden;
+            background-image: radial-gradient(var(--text-tertiary) 0.5px, transparent 0.5px);
+            background-size: 20px 20px; background-position: -10px -10px;
         }
+        .app-container { max-width: 680px; width: 95%; margin: 0 auto; }
+
+        .app-header { padding: 0.5rem 0 2.5rem 0; text-align: center; margin-bottom: 1.5rem; animation: fadeIn 0.8s 0.2s ease-out backwards; }
+        .app-header h1 { font-size: 2.5em; font-weight: 900; margin: 0 0 0.8rem 0; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; }
+        .app-header p { font-size: 1.05em; color: var(--text-secondary); margin-top: 0; opacity: 0.9; font-weight: 400; line-height: 1.7; }
+        
+        .main-content { position:relative; padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); animation: fadeIn 0.8s 0.4s ease-out backwards; }
+        
+        .form-group { margin-bottom: 2.2rem; }
+        .flex-group { display: flex; gap: 1.5rem; }
+        .flex-group .form-group { flex: 1; }
+
+        label { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text-primary); font-size: 1.1em; margin-bottom: 1rem; }
+        label .label-icon { width: 24px; height: 24px; color: var(--accent-primary); }
+        
         input[type="text"], input[type="number"] {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 8px;
-            font-size: 16px;
-            box-sizing: border-box;
-        }
-        button {
-            width: 100%;
-            padding: 12px;
-            background-color: #3498db;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s;
-            margin-top: 10px;
-        }
-        button:hover {
-            background-color: #2980b9;
-        }
-        button:disabled {
-            background-color: #95a5a6;
-            cursor: not-allowed;
-        }
-        #status {
-            text-align: center;
-            margin-top: 15px;
-            font-size: 14px;
-            font-weight: bold;
-        }
-        #result {
-            margin-top: 20px;
-            text-align: center;
-        }
-        #result img {
-            max-width: 100%;
-            border-radius: 12px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            width: 100%; padding: 1.1rem 1.2rem; border: 2px solid var(--input-border);
+            border-radius: var(--radius-input); background-color: var(--input-bg);
+            color: var(--text-primary); font-size: 1.05rem; font-family: inherit;
+            box-sizing: border-box; transition: var(--transition-smooth);
         }
+        input:focus { border-color: var(--accent-primary); background-color: #fff; outline: none; box-shadow: 0 0 12px var(--accent-primary-glow); }
+
+        .generate-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 1.1rem 1.5rem; font-size: 1.25em; font-weight: 800; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 12px -3px var(--accent-primary-glow), 0 6px 12px -3px var(--accent-secondary-glow); }
+        .generate-btn:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px -4px var(--accent-primary-glow), 0 8px 20px -4px var(--accent-secondary-glow); }
+        .generate-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; color: var(--text-secondary); transform: none; }
+        .generate-btn .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none;}
+
+        .output-section { margin-top: 3rem; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 220px; position: relative; box-sizing: border-box; padding: 2rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); }
+        .output-section.has-content { background-color: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg); padding: 1rem; min-height: auto; }
+        .status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; line-height: 1.9; }
+        
+        .loading-animation-wrapper { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; width: 100%; }
+        .orbital-loader { width: 110px; height: 110px; position: relative; animation: rotate-loader-orbital 10s linear infinite; }
+        .orbit { position: absolute; top: 50%; left: 50%; border: 2px dashed rgba(74, 108, 250, 0.35); border-radius: 50%; transform-origin: center center; }
+        .orbit:nth-child(1) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: orbit-spin 3.8s linear infinite; }
+        .orbit:nth-child(2) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: orbit-spin 4.8s linear infinite reverse; }
+        .orbit .satellite { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: var(--accent-primary); box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary); }
+        .orbit:nth-child(1) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); animation: satellite-pulse-2 1.4s 0.2s ease-in-out infinite alternate; }
+        .orbit:nth-child(2) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-1 1.4s 0.4s ease-in-out infinite alternate;}
+        .loading-text { font-size: 1.2em; font-weight: 700; color: var(--text-primary); text-align: center; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+        
+        #result-content { display: none; width: 100%; text-align: center; animation: fadeIn 0.5s ease-out; }
+        #result-content h2 { color: var(--text-primary); border-bottom: 2px solid var(--panel-border); padding-bottom: 1rem; margin-bottom: 1rem; font-size: 1.5em; }
+        #result-image { max-width: 100%; border-radius: var(--radius-card); border: 2px solid var(--accent-secondary); padding: 5px; box-shadow: var(--shadow-lg); cursor: pointer; transition: transform 0.2s ease; }
+        #result-image:hover { transform: scale(1.02); }
+        
+        #result-content a.download-btn {
+            display: none; align-items: center; justify-content: center; gap: 10px;
+            margin-top: 1.5rem; padding: 0.9rem 1.8rem; font-size: 1.1em; font-weight: 700;
+            background: linear-gradient(95deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
+            color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer;
+            transition: var(--transition-smooth);
+            box-shadow: 0 5px 10px -2px var(--accent-primary-glow), 0 5px 10px -2px var(--accent-secondary-glow);
+            text-decoration: none;
+        }
+        #result-content a.download-btn:hover {
+            transform: translateY(-4px) scale(1.03);
+            box-shadow: 0 7px 18px -3px var(--accent-primary-glow), 0 7px 18px -3px var(--accent-secondary-glow);
+        }
+        #result-content a.download-btn svg { width: 20px; height: 20px; }
+
         .prompt-box {
-            display: none;
-            background-color: #2c3e50;
-            color: #ecf0f1;
-            padding: 15px;
-            border-radius: 8px;
-            margin-top: 20px;
-            font-size: 13px;
-            text-align: left;
-            direction: ltr;
-            overflow-x: auto;
-        }
-        .prompt-box h3 {
-            margin-top: 0;
-            color: #f1c40f;
-            font-size: 16px;
-            text-align: right;
-            direction: rtl;
+            display: none; background-color: #1e293b; color: #ecf0f1;
+            padding: 1.5rem; border-radius: 16px; margin-top: 2rem;
+            font-size: 0.95rem; text-align: left; direction: ltr;
+            box-shadow: var(--shadow-md); border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .prompt-box h3 { margin-top: 0; color: #f1c40f; font-size: 1.1rem; text-align: right; direction: rtl; font-family: var(--app-font); }
+        .prompt-box div { line-height: 1.7; word-wrap: break-word; }
+
+        .status-message.error { color: #c53030; font-weight: 600; }
+
+        .fullscreen-modal {
+            display: none; position: fixed; z-index: 1000; top: 0; left: 0;
+            width: 100%; height: 100%; background-color: rgba(26, 32, 44, 0.9);
+            justify-content: center; align-items: center; animation: fadeIn 0.3s ease;
+        }
+        .fullscreen-image {
+            max-width: 90%; max-height: 90%; object-fit: contain;
+            border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+        }
+        .close-fullscreen {
+            position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px;
+            font-weight: bold; cursor: pointer; transition: color 0.2s, transform 0.2s;
+        }
+        .close-fullscreen:hover { color: var(--text-tertiary); transform: scale(1.1); }
+
+        /* نشانگر عضویت و مدال */
+        #subscription-status-badge { display: none; padding: 6px 16px; border-radius: 20px; font-size: 0.9em; font-weight: 700; margin-top: 1.25rem; letter-spacing: 0.5px; animation: fadeIn 0.6s 0.5s ease-out backwards; user-select: none; transition: transform 0.2s ease, opacity 0.2s ease; }
+        #subscription-status-badge.free-badge { background: linear-gradient(45deg, #6c757d, #495057); color: white; box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3); cursor: pointer; }
+        #subscription-status-badge.free-badge:hover { transform: scale(1.05); opacity: 0.95; }
+        #subscription-status-badge.paid-badge { background: linear-gradient(45deg, #FFC107, #ffca2c); color: #333; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3); }
+
+        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(26, 32, 44, 0.5); backdrop-filter: blur(8px); z-index: 1000; animation: modal-fade-in 0.3s ease-out; }
+        .modal-overlay.active { display: flex; align-items: center; justify-content: center; }
+        .modal-content { background-color: var(--panel-bg); padding: 2.5rem; border-radius: var(--radius-card); box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); width: 90%; max-width: 450px; text-align: center; position: relative; animation: modal-zoom-in 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+        .modal-icon { width: 60px; height: 60px; margin: 0 auto 1.5rem; background: rgba(74, 108, 250, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-primary); }
+        .modal-icon svg { width: 32px; height: 32px; }
+        .modal-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1rem 0; }
+        .modal-text { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; margin: 0 0 2rem 0; }
+        .modal-buttons { display: flex; gap: 1rem; width: 100%; }
+        .modal-button { flex: 1; padding: 0.8rem 1.5rem; background: var(--accent-primary); color: white; border: none; border-radius: var(--radius-btn); font-family: var(--app-font); font-weight: 600; font-size: 1rem; cursor: pointer; transition: var(--transition-smooth); }
+        .modal-button:hover { background: var(--accent-primary-hover); transform: translateY(-2px); }
+        .modal-button.secondary { background: var(--input-bg); color: var(--text-secondary); border: 1px solid var(--input-border); }
+        .modal-button.secondary:hover { background-color: var(--panel-border); color: var(--text-primary); }
+
+        @keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes modal-zoom-in { from { transform: scale(0.9); } to { transform: scale(1); } }
+
+        @media (max-width: 600px) {
+            body { padding: 1.5rem 1rem; }
+            .main-content { padding: 1.5rem; }
+            .flex-group { flex-direction: column; gap: 0; }
+            .app-header h1 { font-size: 2em; }
         }
     </style>
 </head>
 <body>
+    <div class="app-container">
+        <header class="app-header">
+            <h1>تولید تصویر با Ideogram 4</h1>
+            <p>دستور متنی خود را به هر زبانی بنویسید تا آن را با ساختار عالی و جزییات خیره‌کننده طراحی کند.</p>
+            <div id="subscription-status-badge" style="display:none; margin-top: 1.25rem;"></div>
+        </header>
 
-    <div class="container">
-        <h1>تولید تصویر با Ideogram 4</h1>
-        
-        <div class="form-group">
-            <label for="prompt">پرامپت (به فارسی یا انگلیسی):</label>
-            <input type="text" id="prompt" placeholder="مثال: یک گربه زنجبیلی با کلاه جادوگری کوچک..." value="a ginger cat wearing a tiny wizard hat reading a spellbook">
-        </div>
+        <main class="main-content" id="main-content">
+            <form onsubmit="return false;">
+                
+                <div class="form-group">
+                    <label for="prompt">
+                        <span class="label-icon">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                            </svg>
+                        </span>
+                        پرامپت (به فارسی یا انگلیسی):
+                    </label>
+                    <input type="text" id="prompt" placeholder="یک گربه بامزه با کلاه جادوگری در حال خواندن کتاب طلسم..." value="یک گربه بامزه با کلاه جادوگری در حال خواندن کتاب طلسم">
+                </div>
 
-        <div class="flex-group">
-            <div class="form-group">
-                <label for="width">عرض (Width):</label>
-                <input type="number" id="width" value="1024" step="64" min="512" max="1536">
-            </div>
-            <div class="form-group">
-                <label for="height">ارتفاع (Height):</label>
-                <input type="number" id="height" value="1024" step="64" min="512" max="1536">
+                <div class="flex-group">
+                    <div class="form-group">
+                        <label for="width">عرض (Width):</label>
+                        <input type="number" id="width" value="1024" step="64" min="512" max="1536">
+                    </div>
+                    <div class="form-group">
+                        <label for="height">ارتفاع (Height):</label>
+                        <input type="number" id="height" value="1024" step="64" min="512" max="1536">
+                    </div>
+                </div>
+                
+                <button type="submit" id="submit-btn" class="generate-btn">
+                    <span class="btn-text">✨ ساخت تصویر</span>
+                    <div class="spinner"></div>
+                </button>
+            </form>
+
+            <div id="output-section" class="output-section">
+                <div id="status-message" class="status-message">نتیجه تصویر تولید شده در اینجا نمایش داده خواهد شد.</div>
+                
+                <div id="loading-animation" class="loading-animation-wrapper">
+                    <div class="orbital-loader">
+                        <div class="orbit"><div class="satellite"></div></div>
+                        <div class="orbit"><div class="satellite"></div></div>
+                    </div>
+                    <p id="loading-text" class="loading-text"></p>
+                </div>
+
+                <div id="result-content">
+                    <h2>تصویر تولید شده نهایی:</h2>
+                    <img id="result-image" src="#" alt="تصویر تولید شده" />
+                    <a href="#" id="download-btn" class="download-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                            <polyline points="7 10 12 15 17 10"></polyline>
+                            <line x1="12" y1="15" x2="12" y2="3"></line>
+                        </svg>
+                        <span>دانلود تصویر</span>
+                    </a>
+                </div>
+
+                <div id="enhancedPromptBox" class="prompt-box">
+                    <h3>✨ سناریو و پرامپت ارتقا یافته توسط هوش مصنوعی:</h3>
+                    <div id="enhancedPromptText"></div>
+                </div>
             </div>
-        </div>
+        </main>
+    </div>
 
-        <button id="generateBtn">ساخت تصویر</button>
-        <div id="status"></div>
-        <div id="result"></div>
-        
-        <div id="enhancedPromptBox" class="prompt-box">
-            <h3>✨ سناریو و پرامپت ارتقا یافته توسط هوش مصنوعی:</h3>
-            <div id="enhancedPromptText"></div>
+    <div id="fullscreen-modal" class="fullscreen-modal">
+        <span id="close-fullscreen" class="close-fullscreen">&times;</span>
+        <img id="fullscreen-image" class="fullscreen-image" src="#" alt="نمایش تمام صفحه">
+    </div>
+
+    <!-- مودال اتمام اعتبار روزانه برای کاربران رایگان -->
+    <div class="modal-overlay" id="limit-modal">
+        <div class="modal-content">
+            <div class="modal-icon" style="color: #FFC107; background: rgba(255, 193, 7, 0.1);">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="12" y1="9" x2="12" y2="13"></line>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+            </div>
+            <h3 class="modal-title">محدودیت استفاده روزانه</h3>
+            <p class="modal-text">کاربر گرامی، در نسخه رایگان شما مجاز به انجام روزانه <b>۱ تصویر</b> با کیفیت فوق‌العاده هستید.<br><br>برای استفاده نامحدود، می‌توانید حساب خود را ارتقا دهید.</p>
+            <div class="modal-buttons">
+                <button class="modal-button secondary" id="close-limit-modal">بستن</button>
+                <button class="modal-button" id="upgrade-limit-modal" style="background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);">⭐️ ارتقا به نسخه نامحدود</button>
+            </div>
         </div>
     </div>
 
     <script type="module">
-        const btn = document.getElementById('generateBtn');
-        const statusText = document.getElementById('status');
-        const resultDiv = document.getElementById('result');
+        const promptInput = document.getElementById('prompt');
+        const widthInput = document.getElementById('width');
+        const heightInput = document.getElementById('height');
+        const submitBtn = document.getElementById('submit-btn');
+        const btnText = submitBtn.querySelector('.btn-text');
+        const btnSpinner = submitBtn.querySelector('.spinner');
+        const outputSection = document.getElementById('output-section');
+        const statusMessage = document.getElementById('status-message');
+        const loadingAnimation = document.getElementById('loading-animation');
+        const loadingText = document.getElementById('loading-text');
+        const resultContent = document.getElementById('result-content');
+        const resultImage = document.getElementById('result-image');
+        const downloadBtn = document.getElementById('download-btn');
+        const fullscreenModal = document.getElementById('fullscreen-modal');
+        const fullscreenImage = document.getElementById('fullscreen-image');
+        const closeFullscreenBtn = document.getElementById('close-fullscreen');
         const enhancedPromptBox = document.getElementById('enhancedPromptBox');
         const enhancedPromptText = document.getElementById('enhancedPromptText');
-
+        
+        let currentRunId = '';
         let pollInterval = null;
+        let activePollRunId = '';
+        let timeoutTimer = null;
 
-        btn.addEventListener('click', async () => {
-            const prompt = document.getElementById('prompt').value.trim();
-            const width = parseInt(document.getElementById('width').value) || 1024;
-            const height = parseInt(document.getElementById('height').value) || 1024;
+        // متغیرهای هویت‌سنجی و وضعیت پرداخت
+        let userSubscriptionStatus = 'free';
+        let userFingerprint = null;
+        const PREMIUM_PAGE_ID = '1149636';
 
-            if (!prompt) {
-                alert("لطفاً پرامپت را وارد کنید.");
-                return;
+        async function getBrowserFingerprint() {
+            const components = [navigator.userAgent, navigator.language, screen.width + 'x' + screen.height, new Date().getTimezoneOffset(), "canvas-test"];
+            const fingerprintString = components.join('---');
+            let hash = 0;
+            for (let i = 0; i < fingerprintString.length; i++) {
+                hash = ((hash << 5) - hash) + fingerprintString.charCodeAt(i);
+                hash |= 0;
             }
+            return 'fp_ideogram_' + Math.abs(hash).toString(16);
+        }
 
-            btn.disabled = true;
-            statusText.innerText = "⏳ در حال فرستادن درخواست به صف گیت‌هاب... (لطفاً صبور باشید)";
-            statusText.style.color = "#e67e22";
-            resultDiv.innerHTML = "";
-            enhancedPromptBox.style.display = "none";
-            enhancedPromptText.innerHTML = "";
+        function isUserPaid(userObject) {
+            return userObject?.isLogin && userObject.accessible_pages?.some(p => p == PREMIUM_PAGE_ID);
+        }
 
-            if (pollInterval) clearInterval(pollInterval);
+        function updateUIForSubscriptionStatus(status) {
+            userSubscriptionStatus = status;
+            const subscriptionBadge = document.getElementById('subscription-status-badge');
+            if (!subscriptionBadge) return;
 
-            try {
-                // ارسال درخواست به سرور خود شما جهت شروع دیسپچ گیت‌هاب
-                const response = await fetch('/api/generate', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        prompt: prompt,
-                        width: width,
-                        height: height,
-                        action_name: 'generate-ideogram' // هماهنگ با نام فایل پایتون در پوشه yml
-                    })
-                });
+            if (status === 'paid') {
+                subscriptionBadge.innerHTML = 'نسخه نامحدود';
+                subscriptionBadge.className = 'paid-badge';
+                subscriptionBadge.onclick = null;
+                subscriptionBadge.style.cursor = 'default';
+            } else {
+                subscriptionBadge.innerHTML = 'نسخه رایگان (ارتقا)';
+                subscriptionBadge.className = 'free-badge';
+                subscriptionBadge.style.cursor = 'pointer';
+                subscriptionBadge.onclick = (e) => {
+                    e.preventDefault();
+                    parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM' }, '*');
+                };
+            }
+            subscriptionBadge.style.display = 'inline-block';
+        }
+
+        function getDailyUsage() {
+            if (!userFingerprint) return 0;
+            const today = new Date().toDateString();
+            const storedDate = localStorage.getItem(`ideogram_date_${userFingerprint}`);
+            if (storedDate !== today) {
+                return 0;
+            }
+            return parseInt(localStorage.getItem(`ideogram_count_${userFingerprint}`) || '0', 10);
+        }
+
+        function incrementDailyUsage() {
+            if (!userFingerprint) return;
+            const today = new Date().toDateString();
+            localStorage.setItem(`ideogram_date_${userFingerprint}`, today);
+            const currentUsage = getDailyUsage();
+            localStorage.setItem(`ideogram_count_${userFingerprint}`, (currentUsage + 1).toString());
+        }
+
+        document.getElementById('close-limit-modal').addEventListener('click', () => {
+            document.getElementById('limit-modal').classList.remove('active');
+        });
+        document.getElementById('upgrade-limit-modal').addEventListener('click', () => {
+            parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM' }, '*');
+        });
 
-                if (!response.ok) {
-                    throw new Error("خطا در برقراری ارتباط با سرور صف");
+        window.addEventListener('message', (event) => {
+            if (event.data?.type === 'USER_DATA_RESPONSE') {
+                if (event.data.error || !event.data.payload) {
+                    updateUIForSubscriptionStatus('free');
+                    return;
                 }
+                try {
+                    const userObject = JSON.parse(event.data.payload);
+                    updateUIForSubscriptionStatus(isUserPaid(userObject) ? 'paid' : 'free');
+                } catch (e) {
+                    updateUIForSubscriptionStatus('free');
+                }
+            }
+        });
 
-                const data = await response.json();
-                if (data.status === 'success' && data.run_id) {
-                    statusText.innerText = "⏳ رانر گیت‌هاب فعال شد. در حال طراحی تصویر توسط هوش مصنوعی...";
-                    startPolling(data.run_id);
-                } else {
-                    throw new Error(data.message || "پاسخ نامشخص از سرور");
+        const setUIState = (state) => {
+            submitBtn.disabled = state === 'loading';
+            if (state === 'loading') {
+                btnText.style.display = 'none';
+                btnSpinner.style.display = 'inline-block';
+                outputSection.classList.remove('has-content');
+                statusMessage.style.display = 'none';
+                statusMessage.classList.remove('error');
+                resultContent.style.display = 'none';
+                enhancedPromptBox.style.display = 'none';
+                loadingAnimation.style.display = 'flex';
+            } else { 
+                btnText.style.display = 'inline-block';
+                btnSpinner.style.display = 'none';
+                if (state !== 'idle') {
+                    loadingAnimation.style.display = 'none';
+                    outputSection.classList.add('has-content');
                 }
+            }
+        };
 
-            } catch (error) {
-                console.error("Error initiating generation:", error);
-                statusText.innerText = `❌ خطا: ${error.message}`;
-                statusText.style.color = "#e74c3c";
-                btn.disabled = false;
+        const handleTimeout = () => {
+            if (pollInterval) {
+                clearInterval(pollInterval);
+                pollInterval = null;
             }
-        });
+            activePollRunId = '';
+            setUIState('error');
+            statusMessage.style.display = 'block';
+            statusMessage.classList.add('error');
+            statusMessage.innerHTML = `پردازش بیش از حد طولانی شد ممکن است سرور شلوغ باشد، لطفاً مجدداً تلاش کنید.`;
+        };
+
+        const handleErrorState = (error) => {
+            if (timeoutTimer) {
+                clearTimeout(timeoutTimer);
+                timeoutTimer = null;
+            }
+            setUIState('error');
+            statusMessage.style.display = 'block';
+            statusMessage.classList.add('error');
+            statusMessage.innerHTML = `خطایی رخ داد: ${error.message || 'مشکل ارتباطی با سرور.'}`;
+        };
 
         function startPolling(runId) {
+            if (pollInterval) clearInterval(pollInterval);
+            activePollRunId = runId;
+
             pollInterval = setInterval(async () => {
+                if (activePollRunId !== runId) {
+                    clearInterval(pollInterval);
+                    return;
+                }
                 try {
-                    const statusRes = await fetch(`/api/status/${runId}`);
-                    if (!statusRes.ok) return;
-
-                    const statusData = await statusRes.json();
+                    const imgCheck = await fetch(`/static/images/${runId}.png`, { method: 'HEAD' });
+                    if (activePollRunId !== runId) return;
 
-                    if (statusData.status === 'ready') {
+                    if (imgCheck.ok) {
+                        if (timeoutTimer) {
+                            clearTimeout(timeoutTimer);
+                            timeoutTimer = null;
+                        }
                         clearInterval(pollInterval);
-                        btn.disabled = false;
-                        statusText.innerText = "✅ تصویر با موفقیت ساخته شد!";
-                        statusText.style.color = "#27ae60";
-                        resultDiv.innerHTML = `<img src="${statusData.url}" alt="Generated Image" />`;
+                        setUIState('success');
+                        resultImage.src = `/static/images/${runId}.png`;
+                        downloadBtn.style.display = 'inline-flex';
+                        resultContent.style.display = 'block';
 
-                        // تلاش برای دریافت متادیتای JSON پرامپت ارتقا یافته
+                        // بارگذاری پرامپت ارتقا یافته در صورت وجود
                         try {
-                            const promptRes = await fetch(`/static/images/${runId}_prompt.json`);
-                            if (promptRes.ok) {
-                                const parsedJson = await promptRes.json();
+                            const metaRes = await fetch(`/static/images/${runId}_meta.json`);
+                            if (metaRes.ok) {
+                                const metaData = await metaRes.json();
                                 let displayHtml = "";
-                                if (parsedJson.high_level_description) {
-                                    displayHtml += `<p><strong>High Level Description:</strong><br>${parsedJson.high_level_description}</p>`;
+                                if (metaData.high_level_description) {
+                                    displayHtml += `<p><strong>High Level Description:</strong><br>${metaData.high_level_description}</p>`;
                                 }
-                                displayHtml += `<pre style="white-space: pre-wrap; font-size: 11px; color: #bdc3c7;">${JSON.stringify(parsedJson, null, 2)}</pre>`;
+                                displayHtml += `<pre style="white-space: pre-wrap; font-size: 11px; color: #bdc3c7;">${JSON.stringify(metaData, null, 2)}</pre>`;
                                 enhancedPromptText.innerHTML = displayHtml;
                                 enhancedPromptBox.style.display = "block";
                             }
-                        } catch (jsonErr) {
-                            console.warn("Could not retrieve JSON prompt file:", jsonErr);
+                        } catch (e) {
+                            console.warn("Failed to fetch upsampled metadata:", e);
                         }
 
-                    } else if (statusData.status === 'failed') {
-                        clearInterval(pollInterval);
-                        btn.disabled = false;
-                        statusText.innerText = `❌ خطا در پردازش تصویر: ${statusData.message || "خطای نامشخص"}`;
-                        statusText.style.color = "#e74c3c";
+                        if (userSubscriptionStatus !== 'paid') {
+                            incrementDailyUsage();
+                        }
+                        return;
+                    }
+
+                    const activeRes = await fetch('/api/actions/active');
+                    const activeData = await activeRes.json();
+                    const hasActiveActions = activeData.status === 'success' && activeData.actions.length > 0;
+
+                    if (hasActiveActions) {
+                        loadingText.textContent = "در حال ارتقای پرامپت و پردازش تصویر با جزئیات بالا...";
                     } else {
-                        // وضعیت در حال پردازش (processing)
-                        statusText.innerText = "⏳ سرور گیت‌هاب در حال طراحی و ارتقای تصویر است... لطفا صبور باشید.";
+                        loadingText.textContent = "در انتظار شروع پردازش در سرور گیت‌هاب...";
                     }
                 } catch (e) {
-                    console.error("Polling error:", e);
+                    console.error("Error polling status:", e);
                 }
-            }, 4000); // بازه ۴ ثانیه‌ای برای پایش وضعیت
+            }, 4000);
         }
-    </script>
 
+        submitBtn.addEventListener('click', async () => {
+            const promptVal = promptInput.value.trim();
+            const widthVal = parseInt(widthInput.value) || 1024;
+            const heightVal = parseInt(heightInput.value) || 1024;
+
+            if (!promptVal) {
+                alert("لطفاً پرامپت را وارد کنید.");
+                return;
+            }
+
+            if (userSubscriptionStatus !== 'paid') {
+                const usage = getDailyUsage();
+                if (usage >= 1) {
+                    document.getElementById('limit-modal').classList.add('active');
+                    return;
+                }
+            }
+
+            if (pollInterval) clearInterval(pollInterval);
+            if (timeoutTimer) clearTimeout(timeoutTimer);
+            activePollRunId = '';
+
+            setUIState('loading');
+            currentRunId = 'ideo' + Math.random().toString(36).substring(2, 14);
+            
+            timeoutTimer = setTimeout(() => {
+                handleTimeout();
+            }, 180000); // زمان انتظار ۳ دقیقه‌ای
+            
+            try {
+                loadingText.textContent = "در حال ارسال درخواست به سرور...";
+                
+                const response = await fetch('/api/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        prompt: promptVal,
+                        width: widthVal,
+                        height: heightVal,
+                        action_name: 'generate-ideogram'
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.status === 'success') {
+                    startPolling(data.run_id);
+                } else {
+                    throw new Error(data.message || 'خطا در صف‌بندی درخواست.');
+                }
+
+            } catch (error) {
+                console.error("An error occurred:", error);
+                handleErrorState(error);
+            }
+        });
+        
+        resultImage.addEventListener('click', () => {
+            if (resultImage.src && resultImage.src !== window.location.href + '#') {
+                fullscreenImage.src = resultImage.src;
+                fullscreenModal.style.display = 'flex';
+            }
+        });
+
+        const closeModal = () => { fullscreenModal.style.display = 'none'; };
+        closeFullscreenBtn.addEventListener('click', closeModal);
+        fullscreenModal.addEventListener('click', (e) => { if (e.target === fullscreenModal) { closeModal(); } });
+        
+        downloadBtn.addEventListener('click', async (event) => {
+            event.preventDefault();
+            const imageUrl = resultImage.src;
+            if (!imageUrl || imageUrl.endsWith('#')) return;
+
+            const absoluteUrl = new URL(imageUrl, window.location.href).href;
+
+            if (window.parent && window.parent !== window) {
+                window.parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: absoluteUrl }, '*');
+            } else {
+                try {
+                    const response = await fetch(absoluteUrl);
+                    const blob = await response.blob();
+                    const objectUrl = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = objectUrl;
+                    a.download = `ideogram-${Date.now()}.png`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(objectUrl);
+                } catch (e) {
+                    console.error("Direct download failed:", e);
+                    alert("خطا در دانلود مستقیم فایل.");
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', async () => {
+            userFingerprint = await getBrowserFingerprint();
+            if (parent && parent !== window) {
+                parent.postMessage({ type: 'REQUEST_USER_DATA' }, '*');
+            } else {
+                updateUIForSubscriptionStatus('free');
+            }
+            setUIState('idle');
+        });
+    </script>
 </body>
 </html>