Ttsp4

Sleeping

App Files Files Community

Hamed744 commited on Feb 11

Commit

c9d67c1

verified ·

1 Parent(s): 6b96ac3

Update سایت.html

Browse files

Files changed (1) hide show

سایت.html +252 -4

سایت.html CHANGED Viewed

@@ -166,7 +166,9 @@
         .add-model-card .speaker-visual { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
         .add-model-card:hover .speaker-visual { box-shadow: 0 8px 25px -5px rgba(118, 75, 162, 0.4); transform: scale(1.05); }
         .add-model-card .speaker-visual svg { width: 40px; height: 40px; opacity: 0.9; animation: pulse-soft 2s infinite; }
-        .speaker-card.already-selected { opacity: 0.4; pointer-events: none; filter: grayscale(1); cursor: not-allowed; }
         @media (max-width: 500px) { #speaker-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } #speaker-modal .modal-dialog { padding: 1.5rem; } }
         .premium-icon-wrapper { width: 100px; height: 100px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0 10px 30px rgba(74, 108, 250, 0.3); animation: pulse-glow-premium 2s infinite; }
         @keyframes pulse-glow-premium { 0% { box-shadow: 0 0 0 0 rgba(74, 108, 250, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(74, 108, 250, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 108, 250, 0); } }
@@ -397,7 +399,7 @@
     </style>
 </head>
 <body>
 <div class="page-wrapper">
     <div class="app-container">
         <div id="standard-view">
@@ -459,8 +461,8 @@
                 </div>
             </main>
         </div>
-        <div id="voice-clone-view">
          <header class="app-header">
             <h1>شبیه‌سازی صدای آلفا</h1>
             <p>متن دلخواه خود را با صدای خودتان یا هر صدای دیگری بشنوید.</p>
@@ -752,6 +754,252 @@
     </a>
 </section>
 <footer class="site-footer"><p>&copy; 1404 - تمام حقوق برای <a href="#">AI Sada</a> محفوظ است.</p></footer>
 </div>

         .add-model-card .speaker-visual { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
         .add-model-card:hover .speaker-visual { box-shadow: 0 8px 25px -5px rgba(118, 75, 162, 0.4); transform: scale(1.05); }
         .add-model-card .speaker-visual svg { width: 40px; height: 40px; opacity: 0.9; animation: pulse-soft 2s infinite; }
+        /* HERE IS THE FIX: Removed grayscale and set opacity to 0.5 */
+        .speaker-card.already-selected { opacity: 0.5; cursor: not-allowed; }
         @media (max-width: 500px) { #speaker-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } #speaker-modal .modal-dialog { padding: 1.5rem; } }
         .premium-icon-wrapper { width: 100px; height: 100px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0 10px 30px rgba(74, 108, 250, 0.3); animation: pulse-glow-premium 2s infinite; }
         @keyframes pulse-glow-premium { 0% { box-shadow: 0 0 0 0 rgba(74, 108, 250, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(74, 108, 250, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 108, 250, 0); } }
     </style>
 </head>
 <body>
+<!-- []  بخش دوم -->
 <div class="page-wrapper">
     <div class="app-container">
         <div id="standard-view">
                 </div>
             </main>
         </div>
+<!-- بخش سوم از اول -->
+<div id="voice-clone-view">
          <header class="app-header">
             <h1>شبیه‌سازی صدای آلفا</h1>
             <p>متن دلخواه خود را با صدای خودتان یا هر صدای دیگری بشنوید.</p>
     </a>
 </section>
+<footer class="site-footer"><p>&copy; 1404 - تمام حقوق برای <a href="#">AI Sada</a> محفوظ است.</p></footer>
+</div>
+<!-- ======================================================================= -->
+<!-- ==================== PART 2: MODALS & HIDDEN ELEMENTS ================= -->
+<!-- ======================================================================= -->
+<!-- Modals -->
+<div id="speaker-modal" class="modal-overlay"><div class="modal-dialog"><div class="modal-header"><h2>گالری گویندگان آلفا</h2><button type="button" class="close-modal-btn" data-modal-id="speaker-modal">×</button></div><div id="speaker-grid"></div></div></div>
+<div id="info-modal" class="modal-overlay"><div class="modal-dialog" style="max-width: 520px;"><div class="modal-header"><h2>🌡️ خلاقیت و پویایی صدا</h2><button type="button" class="close-modal-btn" data-modal-id="info-modal">×</button></div><div><p style="color: var(--text-secondary); line-height: 1.9;">این پارامتر، میزان "غیرقابل پیش‌بینی بودن" و تنوع در صدای خروجی را کنترل می‌کند.</p><p><strong>مقادیر بالاتر (نزدیک به ۱.۵):</strong> صدایی بسیار متنوع، احساسی و پویا ایجاد می‌کند. ایده‌آل برای محتوای خلاقانه و هنری.</p><p><strong>مقادیر پایین‌تر (نزدیک به ۰.۱):</strong> صدایی پایدار، یکنواخت و قابل پیش‌بینی‌تر تولید می‌کند. مناسب برای خوانش متون رسمی و خبری.</p></div></div></div>
+<div id="email-modal" class="modal-overlay">
+    <div class="modal-dialog" style="max-width: 480px;">
+        <div class="modal-header">
+            <h2 id="email-modal-title">ورود / ثبت نام</h2>
+            <button type="button" class="close-modal-btn" data-modal-id="email-modal">×</button>
+        </div>
+        <form id="email-form" onsubmit="return false;">
+            <p id="email-modal-desc">برای ورود یا ثبت نام، ایمیل خود را وارد کنید.</p>
+            <div class="form-group">
+                <label for="login-email-input">آدرس ایمیل</label>
+                <input type="email" id="login-email-input" required placeholder="example@gmail.com">
+            </div>
+            <div id="cf-container-login"></div>
+            <button type="submit" id="send-code-btn" class="generate-btn">ارسال کد تایید</button>
+        </form>
+        <form id="code-form" onsubmit="return false;" style="display: none;">
+            <p id="code-modal-desc">کد ۶ رقمی ارسال شده به ایمیل خود را وارد کنید.</p>
+            <div class="form-group">
+                <label for="code-input">کد تایید</label>
+                <input type="text" id="code-input" required placeholder="123456" inputmode="numeric" pattern="[0-9]*" maxlength="6" autocomplete="one-time-code">
+            </div>
+            <button type="submit" id="verify-code-btn" class="generate-btn">تایید و ورود</button>
+            <button type="button" id="back-to-email-btn" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; margin-top: 1rem; width: 100%;">ویرایش ایمیل</button>
+        </form>
+    </div>
+</div>
+<div id="create-model-modal" class="modal-overlay">
+    <div class="modal-dialog" style="max-width: 450px;">
+        <div class="modal-header">
+            <h2 id="create-model-title">ساخت مدل اختصاصی</h2>
+            <button type="button" class="close-modal-btn" data-modal-id="create-model-modal">×</button>
+        </div>
+        <form id="create-model-form" onsubmit="return false;">
+            <div class="form-group">
+                <label for="model-name-input">نام مدل</label>
+                <input type="text" id="model-name-input" required placeholder="مثلاً: صدای علی">
+            </div>
+            <div class="form-group">
+                <label for="model-image-input">تصویر مدل</label>
+                <input type="file" id="model-image-input" accept="image/*" required>
+            </div>
+             <div class="form-group">
+                <label for="model-audio-input">صدای مرجع (۳ تا ۳۰ ثانیه)</label>
+                <input type="file" id="model-audio-input" accept="audio/*" required>
+            </div>
+            <div class="form-group">
+                 <label>جنسیت</label>
+                 <div style="display: flex; gap: 1rem;">
+                     <label style="font-weight: normal; cursor: pointer;"><input type="radio" name="model-gender" value="male" checked> مرد</label>
+                     <label style="font-weight: normal; cursor: pointer;"><input type="radio" name="model-gender" value="female"> زن</label>
+                 </div>
+            </div>
+            <button type="submit" id="save-model-btn" class="generate-btn">ذخیره مدل</button>
+            <input type="hidden" id="edit-model-id" value="">
+        </form>
+    </div>
+</div>
+<div id="upgrade-modal" class="modal-overlay upgrade-modal-dark">
+    <div class="modal-dialog">
+        <div class="modal-header">
+            <button type="button" class="close-modal-btn" data-modal-id="upgrade-modal">×</button>
+        </div>
+        <div style="padding: 0 1.5rem 2rem 1.5rem; position: relative;">
+            <div class="glow-bg-purple"></div>
+            <div class="glow-bg-blue"></div>
+            <div class="magic-icon-wrapper">
+                <i class="fas fa-wand-magic-sparkles"></i>
+            </div>
+            <div class="upgrade-title">
+                مدل اختصاصی<br>خودت رو بساز
+            </div>
+            <div class="upgrade-features-box">
+                <p class="upgrade-desc">
+                    برای ساخت مدل متن به صدا با هوش مصنوعی باید اشتراک وبسایت رو داشته باشید.
+                    <span style="color: #fbbf24; font-weight: 700;">مدل‌های اختصاصی شما</span>
+                    مثل بقیه مدل‌ها در این صفحه برای همیشه ذخیره میشن. و با یک فایل صوتی از شخصیت دلخواه هر متنی رو به همون صدا تبدیل کنید
+                </p>
+                <div class="upgrade-list">
+                    <div class="upgrade-item"><i class="fas fa-check-circle"></i><span>شبیه‌سازی دقیق هر صدایی (حتی خودت)</span></div>
+                    <div class="upgrade-item"><i class="fas fa-check-circle"></i><span>بالاترین کیفیت + جدیدترین تکنولوژی</span></div>
+                    <div class="upgrade-item"><i class="fas fa-check-circle"></i><span>ذخیره دائمی در لیست گویندگان اصلی</span></div>
+                    <div class="upgrade-item"><i class="fas fa-check-circle"></i><span>تولید نامحدود تا آخرین روز اشتراک</span></div>
+                    <div class="upgrade-item"><i class="fas fa-check-circle"></i><span>فعال شدن تمام بخش های وبسایت</span></div>
+                </div>
+            </div>
+            <button type="button" class="upgrade-btn-action" id="go-to-pricing-btn">
+                <span>تهیه اشتراک برنامه</span>
+                <i class="fas fa-bolt"></i>
+            </button>
+            <button type="button" class="upgrade-cancel-btn" onclick="document.querySelector('#upgrade-modal .close-modal-btn').click()">فعلاً نه، برمی‌گردم</button>
+        </div>
+    </div>
+</div>
+<div id="upload-guide-modal" class="modal-overlay">
+    <div class="modal-dialog">
+        <div class="guide-header">
+            <div class="guide-icon-animated">
+                <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="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
+            </div>
+            <h2 class="guide-title">ساخت صدای اختصاصی</h2>
+        </div>
+        <div class="guide-content">
+            با اضافه کردن یک نمونه صدا هوش مصنوعی متن رو بر اساس صدای همون شخصی تولید میکند. یک فایل صوتی با کیفیت بالا بدون نویز در حد صدای استدیو اضافه کنید، <strong>بهترین حالت این است که صدای مدل که اضافه میکنید بین ۳ تا ۳۰ ثانیه باشه</strong> یا می‌تونه بیشتر باشه برای اگر کیفیت صدا خوب است، هوش مصنوعی تن صدای شما رو یاد میگیره و متن با صدای که اضافه کردید خوانده خواهد شد.
+        </div>
+        <div class="guide-alert">
+            <span style="font-size: 1.2rem;">⏳</span>
+            <span>دقت کنید ساخت پادکست با صدای اختصاصی زمان بیشتری نیاز دارد. همچنین کیفیت صدای خروجی مدل شما به کیفیت صدای ورودی شما مرتبط است.</span>
+        </div>
+        <button type="button" id="upload-guide-confirm-btn">اوکی متوجه شدم</button>
+    </div>
+</div>
+<div id="char-limit-modal" class="modal-overlay">
+    <div class="modal-dialog">
+        <div class="premium-icon-wrapper">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M8,12V14H10V12H8M8,16V18H10V16H8M12,12V14H16V12H12M12,16V18H16V16H12Z" /></svg>
+        </div>
+        <h2 class="premium-title">محدودیت تعداد کاراکتر</h2>
+        <p class="premium-desc">کاربر گرامی، در نسخه رایگان شما تنها مجاز به تبدیل متن‌های کوتاه (زیر ۵۰۰ کاراکتر) هستید. متن شما طولانی‌تر از حد مجاز است.</p>
+        <p class="premium-desc" style="font-size: 0.95em; margin-top: -1rem;">با ارتقا به نسخه نامحدود، می‌توانید متن‌های طولانی را با بالاترین کیفیت و بدون هیچ محدودیتی به صدا تبدیل کنید.</p>
+        <button class="premium-action-btn" id="char-limit-upgrade-btn">ارتقا به نسخه نامحدود</button>
+        <div class="premium-close-link" id="char-limit-close-link">متوجه شدم، متن را کوتاه می‌کنم</div>
+    </div>
+</div>
+<!-- [جدید] مودال انتخاب حالت برای متن‌های طولانی -->
+<div id="long-text-modal" class="modal-overlay">
+    <div class="modal-dialog">
+        <div class="modal-header">
+            <div class="header-icon">📜</div>
+            <h2>متن شما طولانی است</h2>
+        </div>
+        <p class="desc">متن شما بیشتر از 500 نویسه است. متن های بیشتر از 500 نویسه در چند مرحله ساخته می‌شود و نیاز به پردازش پیشرفته دارد. بهترین حالت برای متن های طولانی انتخاب دو گوینده(خانم/آقا) می‌باشد تا برای شنونده نیز جذاب باشد. لطفاً نحوه تبدیل را انتخاب کنید.</p>
+        <div class="long-text-options">
+            <div class="option-card" data-mode="single">
+                <div class="option-icon">👤</div>
+                <div class="option-content"><div class="option-title">با یک گوینده</div><div class="option-subtitle">متن به صورت یکپارچه با گوینده انتخابی شما خوانده می‌شود.</div></div>
+                <div class="option-arrow">❮</div>
+            </div>
+            <div class="option-card" data-mode="double">
+                <div class="option-icon">👥</div>
+                <div class="option-content"><div class="option-title">با دو گوینده</div><div class="option-subtitle">متن به صورت هوشمند بین دو گوینده تصادفی تقسیم می‌شود.</div></div>
+                <div class="option-arrow">❮</div>
+            </div>
+            <div class="option-card" data-mode="multi">
+                <div class="option-icon">🎭</div>
+                <div class="option-content"><div class="option-title">با چندین گوینده</div><div class="option-subtitle">هوش مصنوعی متن را تحلیل کرده و با چندین گوینده تصادفی اجرا می‌کند.</div></div>
+                <div class="option-arrow">❮</div>
+            </div>
+            <div class="option-card special-ai-card" data-mode="ai-podcast">
+                <div class="option-icon">🎙️</div>
+                <div class="option-content"><div class="option-title">تبدیل متن به پادکست</div><div class="option-subtitle">هوش مصنوعی آلفا م��ن شمارو به پادکست حرفه ای و سناریو منظم تبدیل میکند</div></div>
+                <div class="option-arrow">✨</div>
+            </div>
+        </div>
+        <div style="text-align: center; margin-top: 1.5rem;">
+            <button type="button" class="close-modal-btn" data-modal-id="long-text-modal" style="font-size: 1rem; color: var(--text-tertiary); border: 1px solid var(--input-border); padding: 0.5rem 1rem; border-radius: 8px;">انصراف</button>
+        </div>
+    </div>
+</div>
+<!-- [جدید] مودال تایید حذف -->
+<div id="confirm-delete-modal" class="confirm-modal-overlay">
+    <div class="confirm-modal-dialog">
+        <h3>تایید عملیات</h3>
+        <p>آیا از حذف کامل سابقه گفتگو و بازنشانی پروژه به حالت اولیه مطمئن هستید؟ این عمل غیرقابل بازگشت است.</p>
+        <div class="confirm-modal-actions">
+            <button id="cancel-delete-btn" class="cancel-btn">انصراف</button>
+            <button id="confirm-delete-action-btn" class="confirm-btn">بله، حذف کن</button>
+        </div>
+    </div>
+</div>
+<input type="hidden" id="selected_speaker_id_storage" value="Charon">
+<!-- ======================================================================= -->
+<!-- ==================== PART 3: LANDING PAGE & FOOTER ==================== -->
+<!-- ======================================================================= -->
+<section id="pricing-section" class="landing-section pricing">
+    <h2>پلن‌های اشتراک نامحدود</h2>
+    <p class="subtitle">بدون محدودیت، با تمام امکانات. پلن مناسب خود را انتخاب کنید.</p>
+    <div class="pricing-grid">
+        <div class="pricing-card">
+            <h3>یک ماهه</h3>
+            <div class="price">۱۵۰٬۰۰۰ <span>تومان</span></div>
+            <p>دسترسی نامحدود به تمام امکانات برای ۳۰ روز.</p>
+            <button class="select-plan-btn" data-plan="1-month">انتخاب پلن</button>
+        </div>
+        <div class="pricing-card">
+            <h3>شش ماهه</h3>
+            <div class="price">۴۹۳٬۰۰۰ <span>تومان</span></div>
+            <p>بهترین گزینه برای تولیدکنندگان محتوای مستمر.</p>
+            <button class="select-plan-btn" data-plan="6-month">انتخاب پلن</button>
+        </div>
+        <div class="pricing-card">
+            <h3>یک ساله</h3>
+            <div class="price">۷۹۹٬۰۰۰ <span>تومان</span></div>
+            <p>مقرون‌به‌صرفه‌ترین انتخاب برای استفاده طولانی مدت.</p>
+            <button class="select-plan-btn" data-plan="1-year">انتخاب پلن</button>
+        </div>
+    </div>
+</section>
+<section class="landing-section features">
+    <h2>ویژگی‌های کلیدی AI Sada</h2>
+    <p class="subtitle">ابزارهایی قدرتمند برای خلق تجربه‌های صوتی بی‌نظیر.</p>
+    <div class="features-grid">
+        <div class="feature-card"><div class="icon">🔊</div><h3>کیفیت صدای استودیویی</h3><p>صداهای تولید شده با هوش مصنوعی پیشرفته ما، کاملا طبیعی، شفاف و بدون نویز هستند.</p></div>
+        <div class="feature-card"><div class="icon">🎭</div><h3>ده‌ها گوینده متنوع</h3><p>از میان گالری وسیعی از صداهای مرد و زن با احساسات و لحن‌های مختلف، گوینده دلخواه خود را انتخاب کنید.</p></div>
+        <div class="feature-card"><div class="icon">🧬</div><h3>شبیه‌سازی صدای شما</h3><p>فقط با چند ثانیه از صدای خود، می‌توانید هر متنی را با صدای اختصاصی خودتان بشنوید و به اشتراک بگذارید.</p></div>
+    </div>
+</section>
+<section class="landing-section faq">
+    <h2>سوالات متداول</h2>
+    <p class="subtitle">پاسخ به برخی از سوالات رایج شما.</p>
+    <div class="faq-accordion">
+        <div class="faq-item"><button class="faq-question">آیا استفاده از این ابزار رایگان است؟</button><div class="faq-answer"><p>بله، کاربران جدید می‌توانند روزانه تا ۵ بار به صورت رایگان صدا تولید کنند. برای استفاده نامحدود و دسترسی به تمام ویژگی‌ها، می‌توانید حساب خود را ارتقا دهید.</p></div></div>
+        <div class="faq-item"><button class="faq-question">شبیه‌سازی صدا چگونه کار می‌کند؟</button><div class="faq-answer"><p>شما یک فایل صوتی کوتاه (۳ تا ۳۰ ثانیه) از صدای مورد نظر خود را آپلود می‌کنید. سپس هوش مصنوعی ما ویژگی‌های آن صدا را یاد گرفته و می‌تواند هر متن دیگری را با همان صدا بازخوانی کند.</p></div></div>
+        <div class="faq-item"><button class="faq-question">آیا امکان استفاده تجاری است؟</button><div class="faq-answer"><p>بله، در صورت داشتن اشتراک ویژه، تمام حقوق صداهای تولید شده متعلق به شماست و می‌توانید از آن‌ها در پادکست‌ها، کتاب‌های صوتی، ویدیوها و سایر پروژه‌های تجاری خود استفاده کنید.</p></div></div>
+    </div>
+</section>
+<section class="contact-section">
+    <h2>پشتیبانی و ارتباط با ما</h2>
+    <p>برای سوالات، پیشنهادات یا دریافت پشتیبانی، از طریق تلگرام با ما در ارتباط باشید.</p>
+    <a href="https://t.me/ezmarynoori" target="_blank" rel="noopener noreferrer" class="contact-button">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.58c-.28 1.13-1.04 1.4-1.74.88L14.25 16l-2.47 2.35c-.22.24-.42.44-.69.44l.32-4.14z"></path></svg>
+        <span>ارتباط در تلگرام</span>
+    </a>
+</section>
 <footer class="site-footer"><p>&copy; 1404 - تمام حقوق برای <a href="#">AI Sada</a> محفوظ است.</p></footer>
 </div>