Update index.html

index.html

@@ -10,13 +10,13 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <!-- لینک به فایل CSS -->
     <link rel="stylesheet" href="/static/css/style.css">
-    
-    <!-- استایل‌های اختصاصی باکس‌ها -->
+
+    <!-- استایل‌های اختصاصی باکس‌ها (به روز شده برای سایز جدید) -->
     <style>
     .box-style-preview {
         background-color: #ffffff;
-        border-radius: 14px;
-        padding: 5px 15px; 
+        border-radius: 8px;
+        padding: 4px 8px; 
         display: flex;
         align-items: center;
         justify-content: center;
@@ -24,23 +24,23 @@
         direction: rtl;
         font-family: 'Vazirmatn';
         font-weight: 900;
-        font-size: 1.1rem;
+        font-size: 0.75rem;
         box-shadow: 0 4px 15px rgba(0,0,0,0.5);
         max-width: 100%;
         overflow: hidden;
         white-space: nowrap;
     }
-    .box-word { padding: 3px 5px; border-radius: 8px; transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); color: #d1d1d6; position: relative; z-index: 1; }
+    .box-word { padding: 2px 4px; border-radius: 4px; transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); color: #d1d1d6; position: relative; z-index: 1; }
     .box-word.past { color: #000000; }
-    .box-word.active { background-color: #1a1a1a; color: #ffffff; transform: scale(1.08); box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 2; }
-    
-    /* استایل آلفا */
+    .box-word.active { background-color: #1a1a1a; color: #ffffff; transform: scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 2; }
+
+    /* استایل آلفا (به روز شده برای سایز جدید) */
     .alpha-style-preview {
-        background-color: transparent; border-radius: 14px; padding: 12px 15px; display: flex; align-items: center; justify-content: center; 
+        background-color: transparent; border-radius: 14px; padding: 5px; display: flex; align-items: center; justify-content: center; 
         gap: 2px; 
-        direction: rtl; font-family: 'Vazirmatn'; font-weight: 900; font-size: 1.1rem; max-width: 100%; overflow: hidden; white-space: nowrap;
+        direction: rtl; font-family: 'Vazirmatn'; font-weight: 900; font-size: 0.75rem; max-width: 100%; overflow: hidden; white-space: nowrap;
     }
-    .alpha-word { padding: 3px 6px; border-radius: 8px; transition: all 0.25s; color: rgba(255, 255, 255, 0.35); background-color: transparent; position: relative; z-index: 1; }
+    .alpha-word { padding: 2px 4px; border-radius: 8px; transition: all 0.25s; color: rgba(255, 255, 255, 0.35); background-color: transparent; position: relative; z-index: 1; }
     .alpha-word.past { color: #ffffff; background-color: transparent; }
     .alpha-word.active { background: linear-gradient(135deg, #7c4dff, #b388ff); color: #ffffff; transform: scale(1.1); z-index: 2; box-shadow: 0 4px 12px rgba(124, 77, 255, 0.4); }
     </style>
@@ -165,11 +165,11 @@
                 <div class="custom-content" onclick="event.stopPropagation()">
                     <label>نوع نمایش:</label>
                     <div class="style-grid-2col" style="margin-bottom: 25px;">
-                        <div class="style-card" onclick="activateCustomStyle(); setStylePreset('classic', this)" ondblclick="handleClassicDoubleClick(this)" style="background:rgba(0,0,0,0.3); min-height: 100px;">
+                        <div class="style-card" onclick="activateCustomStyle(); setStylePreset('classic', this)" ondblclick="handleClassicDoubleClick(this)" style="background:rgba(0,0,0,0.3); min-height: 100px; aspect-ratio: auto;">
                             <div style="font-weight:bold; font-size:1rem; color:#fff;">ساده</div>
                             <div style="color:#ccc; font-size:0.8rem;">کلاسیک</div>
                         </div>
-                        <div class="style-card" onclick="activateCustomStyle(); setStylePreset('progressive_write', this)" style="background:rgba(0,0,0,0.3); min-height: 100px;">
+                        <div class="style-card" onclick="activateCustomStyle(); setStylePreset('progressive_write', this)" style="background:rgba(0,0,0,0.3); min-height: 100px; aspect-ratio: auto;">
                             <div style="font-weight:bold; font-size:1rem; color:#fff;">کلمه به کلمه</div>
                             <div style="color:#ccc; font-size:0.8rem;">تایپ تدریجی</div>
                         </div>
@@ -198,81 +198,86 @@
             <p style="color:#888; font-size:0.85rem; margin-bottom:15px;">قالب‌های آماده هوشمند:</p>
 
             <div class="style-grid">
-                <div class="style-card" onclick="setStylePreset('plain_white', this)">
-                    <div style="font-size:1.5rem; color:#fff; font-weight:bold;">Aa</div>
+                
+                <!-- ردیف ۱ راست: آلفا گرادینت -->
+                <div class="style-card" onclick="setStylePreset('alpha_gradient', this)">
+                    <div class="alpha-style-preview" id="animPreviewAlpha">
+                        <span class="alpha-word">اینجا</span>
+                        <span class="alpha-word">آلفا</span>
+                        <span class="alpha-word">است</span>
+                    </div>
                     <div class="card-info">
-                        <div class="card-title-style">متن سفید</div>
-                        <div class="card-desc">| ساده و مینیمال</div>
+                        <div class="card-title-style">آلفا گرادینت</div>
+                        <div class="card-desc">استایل نئونی</div>
                     </div>
                 </div>
-                <div class="style-card" onclick="setStylePreset('white_outline', this)">
-                    <div style="font-size:1.5rem; color:#fff; font-weight:bold; -webkit-text-stroke: 1.5px black;">Aa</div>
+
+                <!-- ردیف ۱ چپ: موزیکال پلیر -->
+                <div class="style-card" onclick="setStylePreset('music_player', this)">
+                    <div class="music-style-preview" style="height: auto; width:100%; display: flex; align-items: center; justify-content: center; background: transparent;">
+                        <div style="background: #ffffff; padding: 4px 15px; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); color: #000000; font-weight: 900; font-size: 0.7rem; font-family: 'Vazirmatn';">
+                            <span>سلام اینجا آلفا است</span>
+                        </div>
+                    </div>
                     <div class="card-info">
-                        <div class="card-title-style" style="text-shadow: 0 0 2px black;">سفید با حاشیه</div>
-                        <div class="card-desc">| دورخط مشکی ضخیم</div>
+                        <div class="card-title-style">موزیکال پلیر</div>
+                        <div class="card-desc">همراه اکولایزر</div>
                     </div>
                 </div>
-                <div class="style-card" onclick="setStylePreset('auto_director', this)">
-                    <div class="anim-box" id="animPreviewAuto">
-                        <span class="anim-word word-highlight">چند</span><span class="anim-word">رنگی</span>
+
+                <!-- ردیف ۲ راست: باکس متحرک -->
+                <div class="style-card" onclick="setStylePreset('instagram_box', this)">
+                    <div class="box-style-preview" id="animPreviewBox">
+                        <span class="box-word">سلام</span>
+                        <span class="box-word">خوش</span>
+                        <span class="box-word">اومدی</span>
                     </div>
                     <div class="card-info">
-                        <div class="card-title-style">خودکار (AI)</div>
-                        <div class="card-desc">| کارگردانی هوشمند رنگ‌ها</div>
+                        <div class="card-title-style">باکس متحرک</div>
+                        <div class="card-desc">سبک اینستاگرام</div>
                     </div>
                 </div>
+
+                <!-- ردیف ۲ چپ: هوشمند ثابت -->
                 <div class="style-card selected" onclick="setStylePreset('karaoke_static', this)">
                     <div class="anim-box" id="animPreviewStatic">
                         <span class="anim-word static-anim">سلام</span><span class="anim-word static-anim">خوش</span><span class="anim-word static-anim">اومدی</span>
                     </div>
                     <div class="card-info">
                         <div class="card-title-style">هوشمند (ثابت)</div>
-                        <div class="card-desc">| رنگ دلخواه</div>
+                        <div class="card-desc">رنگ دلخواه</div>
                     </div>
                     <div class="card-settings" onclick="openColorPicker('static', event)">
                         <i class="fa-solid fa-gear"></i>
                     </div>
                 </div>
-                
-                <!-- استایل باکس متحرک (اینستاگرام) -->
-                <div class="style-card" onclick="setStylePreset('instagram_box', this)">
-                    <div class="box-style-preview" id="animPreviewBox">
-                        <span class="box-word">سلام</span>
-                        <span class="box-word">خوش</span>
-                        <span class="box-word">اومدی</span>
-                        <span class="box-word">عزیز</span>
+
+                <!-- ردیف ۳ راست: خودکار -->
+                <div class="style-card" onclick="setStylePreset('auto_director', this)">
+                    <div class="anim-box" id="animPreviewAuto">
+                        <span class="anim-word word-highlight">چند</span><span class="anim-word">رنگی</span>
                     </div>
                     <div class="card-info">
-                        <div class="card-title-style">باکس متحرک</div>
-                        <div class="card-desc">| سبک اینستاگرامی</div>
+                        <div class="card-title-style">خودکار (AI)</div>
+                        <div class="card-desc">کارگردانی رنگ</div>
                     </div>
                 </div>
 
-                <!-- استایل آلفا (اضافه شده) -->
-                <div class="style-card" onclick="setStylePreset('alpha_gradient', this)">
-                    <div class="alpha-style-preview" id="animPreviewAlpha">
-                        <span class="alpha-word">سلام</span>
-                        <span class="alpha-word">اینجا</span>
-                        <span class="alpha-word">آلفا</span>
-                        <span class="alpha-word">است</span>
-                    </div>
+                <!-- ردیف ۳ چپ: سفید ساده -->
+                <div class="style-card" onclick="setStylePreset('plain_white', this)">
+                    <div style="font-size:1.4rem; color:#fff; font-weight:bold;">Aa</div>
                     <div class="card-info">
-                        <div class="card-title-style">آلفا گرادینت</div>
-                        <div class="card-desc">| استایل بنفش نئونی</div>
+                        <div class="card-title-style">متن سفید</div>
+                        <div class="card-desc">ساده و مینیمال</div>
                     </div>
                 </div>
 
-                <!-- استایل جدید: موزیکال پلیر (اصلاح شده) -->
-                <div class="style-card" onclick="setStylePreset('music_player', this)">
-                    <div class="music-style-preview" style="height: 60px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.1); border-radius: 10px;">
-                        <!-- کادر سفید ساده و شیک پشت متن -->
-                        <div style="background: #ffffff; padding: 8px 25px; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);">
-                            <span style="color: #000000; font-weight: 900; font-size: 0.85rem; font-family: 'Vazirmatn';">سلام اینجا آلفا است</span>
-                        </div>
-                    </div>
+                <!-- ردیف ۴: حاشیه دار -->
+                <div class="style-card" onclick="setStylePreset('white_outline', this)">
+                    <div style="font-size:1.4rem; color:#fff; font-weight:bold; -webkit-text-stroke: 1.5px black;">Aa</div>
                     <div class="card-info">
-                        <div class="card-title-style">موزیکال پلیر</div>
-                        <div class="card-desc">| همراه با اکولایزر</div>
+                        <div class="card-title-style">سفید با حاشیه</div>
+                        <div class="card-desc">دورخط مشکی</div>
                     </div>
                 </div>
 
@@ -348,7 +353,6 @@
             </div>
         </div>
 
-
         <!-- ابزار فونت -->
         <div id="section-font" class="tool-section">
             <div class="font-grid">
@@ -636,7 +640,6 @@
             <div class="loader-ring"></div>
             <div class="loader-ring"></div>
             <div class="loader-ring"></div>
-            
             <div class="loader-icon">
                 <i class="fa-solid fa-wand-magic-sparkles"></i>
             </div>