Update index.html
Browse files- index.html +15 -279
index.html
CHANGED
|
@@ -3,9 +3,8 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
| 6 |
-
<title>Subtitle Style Preview
|
| 7 |
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;900&display=swap" rel="stylesheet">
|
| 8 |
-
<link href="https://fonts.googleapis.com/css2?family=Lalezar&display=swap" rel="stylesheet">
|
| 9 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
| 10 |
|
| 11 |
<style>
|
|
@@ -23,53 +22,14 @@
|
|
| 23 |
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Vazirmatn'; overflow-x: hidden; min-height: 100vh; padding-bottom: 50px; display: flex; flex-direction: column;}
|
| 24 |
|
| 25 |
/* ========================================= */
|
| 26 |
-
/* === استایل
|
| 27 |
/* ========================================= */
|
| 28 |
|
| 29 |
-
/* 1. باکس متحرک (اصلاح شده: رنگ گذشته هماهنگ با متغیر اصلی) */
|
| 30 |
-
.box-style-preview {
|
| 31 |
-
--box-container-bg: #ffffff;
|
| 32 |
-
--box-bg: #1a1a1a;
|
| 33 |
-
--box-text-active: #ffffff;
|
| 34 |
-
--box-text-inactive: #000000; /* رنگ پایه برای آینده و گذشته */
|
| 35 |
-
|
| 36 |
-
background-color: var(--box-container-bg);
|
| 37 |
-
border-radius: 8px; padding: 4px 8px;
|
| 38 |
-
display: flex; align-items: center; justify-content: center;
|
| 39 |
-
gap: 2px; direction: rtl; font-family: 'Vazirmatn'; font-weight: 900; font-size: 0.75rem;
|
| 40 |
-
box-shadow: 0 4px 15px rgba(0,0,0,0.5); max-width: 100%; overflow: hidden; white-space: nowrap;
|
| 41 |
-
}
|
| 42 |
-
|
| 43 |
-
.box-word {
|
| 44 |
-
padding: 2px 4px;
|
| 45 |
-
border-radius: 4px;
|
| 46 |
-
transition: all 0.2s;
|
| 47 |
-
color: var(--box-text-inactive);
|
| 48 |
-
position: relative;
|
| 49 |
-
z-index: 1;
|
| 50 |
-
opacity: 0.3; /* کلمات آینده شفاف */
|
| 51 |
-
}
|
| 52 |
-
|
| 53 |
-
.box-word.past {
|
| 54 |
-
color: var(--box-text-inactive); /* استفاده از متغیر رنگ انتخاب شده */
|
| 55 |
-
opacity: 1; /* کلمات گذشته کاملا واضح */
|
| 56 |
-
}
|
| 57 |
-
|
| 58 |
-
.box-word.active {
|
| 59 |
-
background-color: var(--box-bg);
|
| 60 |
-
color: var(--box-text-active);
|
| 61 |
-
transform: scale(1.1);
|
| 62 |
-
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
| 63 |
-
z-index: 2;
|
| 64 |
-
opacity: 1;
|
| 65 |
-
}
|
| 66 |
-
|
| 67 |
-
/* 2. نئون آلفا (فیکس نهایی طبق دستور) */
|
| 68 |
.alpha-style-preview {
|
| 69 |
/* متغیرهای رنگی قابل تنظیم */
|
| 70 |
-
--alpha-box-color: #7c4dff; /* رنگ باکس کلمه فعال
|
| 71 |
-
--alpha-text-active: #ffffff; /* رنگ متن داخل باکس
|
| 72 |
-
--alpha-text-base: #ffffff; /* رنگ متن اصلی
|
| 73 |
|
| 74 |
background-color: transparent;
|
| 75 |
padding: 5px;
|
|
@@ -82,8 +42,8 @@
|
|
| 82 |
padding: 2px 4px;
|
| 83 |
border-radius: 8px;
|
| 84 |
transition: all 0.2s;
|
| 85 |
-
color: var(--alpha-text-base);
|
| 86 |
-
opacity: 0.4;
|
| 87 |
}
|
| 88 |
|
| 89 |
/* حالت گذشته: رنگ اصلی ولی کاملاً پررنگ */
|
|
@@ -97,96 +57,13 @@
|
|
| 97 |
background-color: var(--alpha-box-color);
|
| 98 |
background-image: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.4) 100%);
|
| 99 |
|
| 100 |
-
color: var(--alpha-text-active);
|
| 101 |
opacity: 1;
|
| 102 |
transform: scale(1.1);
|
| 103 |
text-shadow: 0 0 5px rgba(255,255,255,0.5);
|
| 104 |
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
| 105 |
}
|
| 106 |
|
| 107 |
-
/* 3. کارائوکه رنگی */
|
| 108 |
-
.anim-box {
|
| 109 |
-
--static-box-active: #A020F0;
|
| 110 |
-
--static-text-active: #ffffff;
|
| 111 |
-
--static-inactive: #ffffff;
|
| 112 |
-
font-family: 'Lalezar'; font-size: 0.9rem; direction: rtl; display: flex; gap: 3px; margin-bottom: 5px; justify-content: center;
|
| 113 |
-
}
|
| 114 |
-
.static-word { color: var(--static-inactive); transition: 0.2s; padding: 0 2px; border-radius: 4px;}
|
| 115 |
-
.static-word.active {
|
| 116 |
-
background-color: var(--static-box-active);
|
| 117 |
-
color: var(--static-text-active);
|
| 118 |
-
transform: scale(1.1); padding: 0 4px; box-shadow: 0 4px 10px var(--static-box-active);
|
| 119 |
-
}
|
| 120 |
-
|
| 121 |
-
/* 4. هایلایت آبی/قرمز (یک در میان) */
|
| 122 |
-
.highlight-container {
|
| 123 |
-
--hl-active-odd: #00D7FF; /* رنگ اول: آبی */
|
| 124 |
-
--hl-active-even: #FF0055; /* رنگ دوم: قرمز */
|
| 125 |
-
--hl-inactive: #ffffff;
|
| 126 |
-
font-family: 'Vazirmatn'; font-weight: 900; font-size: 0.8rem; display: flex; gap: 3px; direction: rtl;
|
| 127 |
-
}
|
| 128 |
-
.highlight-word {
|
| 129 |
-
color: var(--hl-inactive); transition: 0.2s;
|
| 130 |
-
}
|
| 131 |
-
/* کلمات فرد (اول، سوم...) */
|
| 132 |
-
.highlight-word.active:nth-child(odd) {
|
| 133 |
-
color: var(--hl-active-odd);
|
| 134 |
-
text-shadow: 0 0 10px var(--hl-active-odd);
|
| 135 |
-
transform: scale(1.1);
|
| 136 |
-
}
|
| 137 |
-
/* کلمات زوج (دوم، چهارم...) */
|
| 138 |
-
.highlight-word.active:nth-child(even) {
|
| 139 |
-
color: var(--hl-active-even);
|
| 140 |
-
text-shadow: 0 0 10px var(--hl-active-even);
|
| 141 |
-
transform: scale(1.1);
|
| 142 |
-
}
|
| 143 |
-
|
| 144 |
-
/* 5. سفید مینیمال */
|
| 145 |
-
.minimal-container {
|
| 146 |
-
--min-active: #ffffff;
|
| 147 |
-
--min-inactive: #ffffff;
|
| 148 |
-
font-family: 'Vazirmatn'; font-weight: 900; font-size: 0.9rem; display: flex; gap: 3px; direction: rtl;
|
| 149 |
-
}
|
| 150 |
-
.minimal-word {
|
| 151 |
-
color: var(--min-inactive); transition: 0.2s;
|
| 152 |
-
}
|
| 153 |
-
.minimal-word.active { color: var(--min-active); transform: scale(1.1); }
|
| 154 |
-
|
| 155 |
-
/* 6. حاشیه مشکی */
|
| 156 |
-
.stroke-container {
|
| 157 |
-
--stroke-active-fill: #ffffff;
|
| 158 |
-
--stroke-inactive-fill: #ffffff;
|
| 159 |
-
--stroke-border: #000000;
|
| 160 |
-
font-family: 'Vazirmatn'; font-weight: 900; font-size: 0.9rem; display: flex; gap: 3px; direction: rtl;
|
| 161 |
-
}
|
| 162 |
-
.stroke-word {
|
| 163 |
-
color: var(--stroke-inactive-fill);
|
| 164 |
-
-webkit-text-stroke: 0.8px var(--stroke-border);
|
| 165 |
-
transition: 0.2s;
|
| 166 |
-
}
|
| 167 |
-
.stroke-word.active { color: var(--stroke-active-fill); transform: scale(1.1); text-shadow: 2px 2px 0px rgba(0,0,0,0.5); }
|
| 168 |
-
|
| 169 |
-
/* 7. موزیک پلیر */
|
| 170 |
-
.music-wrapper {
|
| 171 |
-
--music-progress: #ff0055;
|
| 172 |
-
padding: 3px; border-radius: 50px;
|
| 173 |
-
background: linear-gradient(90deg, var(--music-progress), transparent);
|
| 174 |
-
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
| 175 |
-
display: flex; align-items: center; justify-content: center;
|
| 176 |
-
}
|
| 177 |
-
.music-box {
|
| 178 |
-
--music-bg: #ffffff;
|
| 179 |
-
--music-text-active: #000000;
|
| 180 |
-
--music-text-inactive: #000000;
|
| 181 |
-
background: var(--music-bg); padding: 4px 15px; border-radius: 48px;
|
| 182 |
-
color: var(--music-text-inactive);
|
| 183 |
-
font-weight: 900; font-size: 0.7rem; font-family: 'Vazirmatn';
|
| 184 |
-
display: flex; gap: 3px;
|
| 185 |
-
}
|
| 186 |
-
.music-word { color: var(--music-text-inactive); transition: 0.2s; }
|
| 187 |
-
.music-word.active { color: var(--music-text-active); transform: scale(1.1); font-weight: 900; }
|
| 188 |
-
|
| 189 |
-
|
| 190 |
/* ========================================= */
|
| 191 |
/* === UI عمومی === */
|
| 192 |
/* ========================================= */
|
|
@@ -211,8 +88,8 @@
|
|
| 211 |
.tool-section.active-section { display: block; }
|
| 212 |
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
|
| 213 |
|
|
|
|
| 214 |
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
|
| 215 |
-
.style-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 25px;}
|
| 216 |
|
| 217 |
.style-card {
|
| 218 |
background: #333; border: 2px solid transparent; border-radius: 15px;
|
|
@@ -221,7 +98,6 @@
|
|
| 221 |
position: relative; transition: all 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.2);
|
| 222 |
aspect-ratio: 1.4 / 1;
|
| 223 |
}
|
| 224 |
-
.style-grid-2col .style-card { min-height: 100px; height: auto; padding: 10px; aspect-ratio: auto; }
|
| 225 |
.style-card:active { transform: scale(0.98); }
|
| 226 |
.style-card.selected { border-color: var(--primary); background: #2a2a2a; }
|
| 227 |
.style-card.selected::after {
|
|
@@ -242,8 +118,6 @@
|
|
| 242 |
}
|
| 243 |
.card-settings:active { background: var(--primary); transform: scale(0.9); }
|
| 244 |
|
| 245 |
-
/* Custom Accordion - REMOVED */
|
| 246 |
-
|
| 247 |
/* ========================================= */
|
| 248 |
/* === تنظیمات زیبا (Settings Rows) === */
|
| 249 |
/* ========================================= */
|
|
@@ -388,8 +262,8 @@
|
|
| 388 |
|
| 389 |
<div class="style-grid">
|
| 390 |
|
| 391 |
-
<!-- نئون آلفا -->
|
| 392 |
-
<div class="style-card" onclick="selectCard(this)">
|
| 393 |
<div class="alpha-style-preview" id="animPreviewAlpha">
|
| 394 |
<span class="alpha-word">سلام</span>
|
| 395 |
<span class="alpha-word">اینجا</span>
|
|
@@ -402,94 +276,6 @@
|
|
| 402 |
<div class="card-settings" onclick="openSettings('alpha', event)"><i class="fa-solid fa-gear"></i></div>
|
| 403 |
</div>
|
| 404 |
|
| 405 |
-
<!-- موزیک پلیر -->
|
| 406 |
-
<div class="style-card" onclick="selectCard(this)">
|
| 407 |
-
<div class="music-style-preview" style="height: auto; width:100%; display: flex; align-items: center; justify-content: center; background: transparent;">
|
| 408 |
-
<div id="previewMusicWrapper" class="music-wrapper">
|
| 409 |
-
<div id="previewMusic" class="music-box">
|
| 410 |
-
<span class="music-word">سلام</span>
|
| 411 |
-
<span class="music-word">اینجا</span>
|
| 412 |
-
<span class="music-word">آلفا</span>
|
| 413 |
-
<span class="music-word">است</span>
|
| 414 |
-
</div>
|
| 415 |
-
</div>
|
| 416 |
-
</div>
|
| 417 |
-
<div class="card-info">
|
| 418 |
-
<div class="card-title-style">موزیک پلیر</div>
|
| 419 |
-
</div>
|
| 420 |
-
<div class="card-settings" onclick="openSettings('music', event)"><i class="fa-solid fa-gear"></i></div>
|
| 421 |
-
</div>
|
| 422 |
-
|
| 423 |
-
<!-- باکس متحرک -->
|
| 424 |
-
<div class="style-card" onclick="selectCard(this)">
|
| 425 |
-
<div class="box-style-preview" id="animPreviewBox">
|
| 426 |
-
<span class="box-word">سلام</span>
|
| 427 |
-
<span class="box-word">اینجا</span>
|
| 428 |
-
<span class="box-word">آلفا</span>
|
| 429 |
-
<span class="box-word">است</span>
|
| 430 |
-
</div>
|
| 431 |
-
<div class="card-info">
|
| 432 |
-
<div class="card-title-style">باکس متحرک</div>
|
| 433 |
-
</div>
|
| 434 |
-
<div class="card-settings" onclick="openSettings('box', event)"><i class="fa-solid fa-gear"></i></div>
|
| 435 |
-
</div>
|
| 436 |
-
|
| 437 |
-
<!-- کارائوکه رنگی -->
|
| 438 |
-
<div class="style-card selected" onclick="selectCard(this)">
|
| 439 |
-
<div class="anim-box" id="animPreviewStatic">
|
| 440 |
-
<span class="static-word">سلام</span>
|
| 441 |
-
<span class="static-word">اینجا</span>
|
| 442 |
-
<span class="static-word">آلفا</span>
|
| 443 |
-
<span class="static-word">است</span>
|
| 444 |
-
</div>
|
| 445 |
-
<div class="card-info">
|
| 446 |
-
<div class="card-title-style">کارائوکه رنگی</div>
|
| 447 |
-
</div>
|
| 448 |
-
<div class="card-settings" onclick="openSettings('static', event)"><i class="fa-solid fa-gear"></i></div>
|
| 449 |
-
</div>
|
| 450 |
-
|
| 451 |
-
<!-- هایلایت آبی/قرمز -->
|
| 452 |
-
<div class="style-card" onclick="selectCard(this)">
|
| 453 |
-
<div class="highlight-container" id="previewHighlight">
|
| 454 |
-
<span class="highlight-word">سلام</span>
|
| 455 |
-
<span class="highlight-word">اینجا</span>
|
| 456 |
-
<span class="highlight-word">آلفا</span>
|
| 457 |
-
<span class="highlight-word">است</span>
|
| 458 |
-
</div>
|
| 459 |
-
<div class="card-info">
|
| 460 |
-
<div class="card-title-style">هایلایت آبی</div>
|
| 461 |
-
</div>
|
| 462 |
-
<div class="card-settings" onclick="openSettings('highlight', event)"><i class="fa-solid fa-gear"></i></div>
|
| 463 |
-
</div>
|
| 464 |
-
|
| 465 |
-
<!-- سفید مینیمال -->
|
| 466 |
-
<div class="style-card" onclick="selectCard(this)">
|
| 467 |
-
<div class="minimal-container" id="previewMinimal">
|
| 468 |
-
<span class="minimal-word">سلام</span>
|
| 469 |
-
<span class="minimal-word">اینجا</span>
|
| 470 |
-
<span class="minimal-word">آلفا</span>
|
| 471 |
-
<span class="minimal-word">است</span>
|
| 472 |
-
</div>
|
| 473 |
-
<div class="card-info">
|
| 474 |
-
<div class="card-title-style">سفید مینیمال</div>
|
| 475 |
-
</div>
|
| 476 |
-
<div class="card-settings" onclick="openSettings('minimal', event)"><i class="fa-solid fa-gear"></i></div>
|
| 477 |
-
</div>
|
| 478 |
-
|
| 479 |
-
<!-- حاشیه مشکی -->
|
| 480 |
-
<div class="style-card" onclick="selectCard(this)">
|
| 481 |
-
<div class="stroke-container" id="previewStroke">
|
| 482 |
-
<span class="stroke-word">سلام</span>
|
| 483 |
-
<span class="stroke-word">اینجا</span>
|
| 484 |
-
<span class="stroke-word">آلفا</span>
|
| 485 |
-
<span class="stroke-word">است</span>
|
| 486 |
-
</div>
|
| 487 |
-
<div class="card-info">
|
| 488 |
-
<div class="card-title-style">حاشیه مشکی</div>
|
| 489 |
-
</div>
|
| 490 |
-
<div class="card-settings" onclick="openSettings('stroke', event)"><i class="fa-solid fa-gear"></i></div>
|
| 491 |
-
</div>
|
| 492 |
-
|
| 493 |
</div>
|
| 494 |
</div>
|
| 495 |
</div>
|
|
@@ -552,8 +338,6 @@
|
|
| 552 |
text: '<svg viewBox="0 0 24 24"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>',
|
| 553 |
box: '<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/></svg>',
|
| 554 |
fill: '<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>',
|
| 555 |
-
stroke: '<svg viewBox="0 0 24 24"><path d="M16.75 3h-1.5c-.83 0-1.5.67-1.5 1.5v15c0 .83.67 1.5 1.5 1.5h1.5c.83 0 1.5-.67 1.5-1.5v-15c0-.83-.67-1.5-1.5-1.5zm-8 0h-1.5C6.42 3 5.75 3.67 5.75 4.5v15c0 .83.67 1.5 1.5 1.5h1.5c.83 0 1.5-.67 1.5-1.5v-15c0-.83-.67-1.5-1.5-1.5z"/></svg>',
|
| 556 |
-
bar: '<svg viewBox="0 0 24 24"><path d="M21 18v2H3v-2h18zM3 4v2h18V4H3zM3 11v2h18v-2H3z"/></svg>',
|
| 557 |
};
|
| 558 |
|
| 559 |
const styleConfigs = {
|
|
@@ -561,40 +345,6 @@
|
|
| 561 |
{ id: 'alpha-box-color', label: 'رنگ باکس کلمه فعال', icon: svgs.fill, cssVar: '--alpha-box-color', targetId: 'animPreviewAlpha', default: '#7c4dff', isAnimToggle: true },
|
| 562 |
{ id: 'alpha-text-active', label: 'رنگ متن کلمه فعال', icon: svgs.active, cssVar: '--alpha-text-active', targetId: 'animPreviewAlpha', default: '#ffffff' },
|
| 563 |
{ id: 'alpha-text-base', label: 'رنگ متن عادی (گذشته/آینده)', icon: svgs.text, cssVar: '--alpha-text-base', targetId: 'animPreviewAlpha', default: '#ffffff' }
|
| 564 |
-
],
|
| 565 |
-
'box': [
|
| 566 |
-
{ id: 'box-container-bg', label: 'رنگ کادر خالی', icon: svgs.box, cssVar: '--box-container-bg', targetId: 'animPreviewBox', default: '#ffffff' },
|
| 567 |
-
{ id: 'box-text-active', label: 'رنگ کلمه فعال', icon: svgs.active, cssVar: '--box-text-active', targetId: 'animPreviewBox', default: '#ffffff' },
|
| 568 |
-
{ id: 'box-bg', label: 'رنگ باکس کلمه فعال', icon: svgs.fill, cssVar: '--box-bg', targetId: 'animPreviewBox', default: '#1a1a1a', isAnimToggle: true },
|
| 569 |
-
{ id: 'box-text-inactive', label: 'رنگ متن عادی', icon: svgs.text, cssVar: '--box-text-inactive', targetId: 'animPreviewBox', default: '#d1d1d6' }
|
| 570 |
-
],
|
| 571 |
-
'static': [
|
| 572 |
-
{ id: 'static-box-active', label: 'رنگ باکس کلمه فعال', icon: svgs.fill, cssVar: '--static-box-active', targetId: 'animPreviewStatic', default: '#A020F0', isAnimToggle: true },
|
| 573 |
-
{ id: 'static-text-active', label: 'رنگ متن کلمه فعال', icon: svgs.active, cssVar: '--static-text-active', targetId: 'animPreviewStatic', default: '#ffffff' },
|
| 574 |
-
{ id: 'static-inactive', label: 'رنگ متن عادی', icon: svgs.text, cssVar: '--static-inactive', targetId: 'animPreviewStatic', default: '#ffffff' }
|
| 575 |
-
],
|
| 576 |
-
'music': [
|
| 577 |
-
{ id: 'music-text-active', label: 'رنگ کلمه فعال', icon: svgs.active, cssVar: '--music-text-active', targetId: 'previewMusic', default: '#000000', isAnimToggle: true },
|
| 578 |
-
{ id: 'music-text-inactive', label: 'رنگ متن عادی', icon: svgs.text, cssVar: '--music-text-inactive', targetId: 'previewMusic', default: '#888888' },
|
| 579 |
-
{ id: 'music-bg', label: 'رنگ کادر زمینه', icon: svgs.fill, cssVar: '--music-bg', targetId: 'previewMusic', default: '#ffffff' },
|
| 580 |
-
{ id: 'music-progress', label: 'رنگ نوار چرخان', icon: svgs.bar, cssVar: '--music-progress', targetId: 'previewMusicWrapper', default: '#ff0055' }
|
| 581 |
-
],
|
| 582 |
-
'highlight': [
|
| 583 |
-
{ id: 'hl-active-odd', label: 'رنگ کلمه فعال ۱', icon: svgs.active, cssVar: '--hl-active-odd', targetId: 'previewHighlight', default: '#00D7FF', isAnimToggle: true },
|
| 584 |
-
{ id: 'hl-active-even', label: 'رنگ کلمه فعال ۲', icon: svgs.active, cssVar: '--hl-active-even', targetId: 'previewHighlight', default: '#FF0055' },
|
| 585 |
-
{ id: 'hl-inactive', label: 'رنگ متن عادی', icon: svgs.text, cssVar: '--hl-inactive', targetId: 'previewHighlight', default: '#ffffff' }
|
| 586 |
-
],
|
| 587 |
-
'minimal': [
|
| 588 |
-
{ id: 'min-active', label: 'رنگ کلمه فعال', icon: svgs.active, cssVar: '--min-active', targetId: 'previewMinimal', default: '#ffffff', isAnimToggle: true },
|
| 589 |
-
{ id: 'min-inactive', label: 'رنگ متن عادی', icon: svgs.text, cssVar: '--min-inactive', targetId: 'previewMinimal', default: '#888888' }
|
| 590 |
-
],
|
| 591 |
-
'stroke': [
|
| 592 |
-
{ id: 'stroke-active-fill', label: 'رنگ کلمه فعال', icon: svgs.active, cssVar: '--stroke-active-fill', targetId: 'previewStroke', default: '#ffffff', isAnimToggle: true },
|
| 593 |
-
{ id: 'stroke-inactive-fill', label: 'رنگ متن عادی', icon: svgs.text, cssVar: '--stroke-inactive-fill', targetId: 'previewStroke', default: '#555555' },
|
| 594 |
-
{ id: 'stroke-border', label: 'رنگ حاشیه (Stroke)', icon: svgs.stroke, cssVar: '--stroke-border', targetId: 'previewStroke', default: '#000000' }
|
| 595 |
-
],
|
| 596 |
-
'custom': [
|
| 597 |
-
{ id: 'custom-text', label: 'رنگ کلمه فعال', icon: svgs.active, cssVar: 'color', targetId: 'customAccordion', default: '#fff' }
|
| 598 |
]
|
| 599 |
};
|
| 600 |
|
|
@@ -729,7 +479,6 @@
|
|
| 729 |
document.getElementById('colorPickerModal').classList.remove('active');
|
| 730 |
}
|
| 731 |
function toggleTool(toolId) { if (toolId !== 'style') alert("این بخش خالی است"); }
|
| 732 |
-
function toggleCustomAccordion() { document.getElementById('customAccordion').classList.toggle('open'); }
|
| 733 |
function selectCard(el) { document.querySelectorAll('.style-card').forEach(c => c.classList.remove('selected')); el.classList.add('selected'); }
|
| 734 |
function switchTab(tabName) {
|
| 735 |
document.querySelectorAll('.picker-tab').forEach(t => t.classList.remove('active'));
|
|
@@ -805,25 +554,12 @@
|
|
| 805 |
}
|
| 806 |
|
| 807 |
window.addEventListener('load', () => {
|
| 808 |
-
//
|
| 809 |
-
|
| 810 |
-
|
| 811 |
-
if(el) el.setAttribute('data-anim-status', 'true');
|
| 812 |
-
});
|
| 813 |
-
|
| 814 |
-
// Styles to be INACTIVE (Color/Animation OFF) by default
|
| 815 |
-
['previewMinimal', 'previewStroke', 'previewMusic', 'previewMusicWrapper'].forEach(id => {
|
| 816 |
-
const el = document.getElementById(id);
|
| 817 |
-
if(el) el.setAttribute('data-anim-status', 'false');
|
| 818 |
-
});
|
| 819 |
|
| 820 |
-
|
| 821 |
runAnimation('animPreviewAlpha', 'alpha-word');
|
| 822 |
-
runAnimation('animPreviewStatic', 'static-word'); // Karaoke
|
| 823 |
-
runAnimation('previewHighlight', 'highlight-word'); // Blue/Red Highlight
|
| 824 |
-
runAnimation('previewMinimal', 'minimal-word'); // Minimal
|
| 825 |
-
runAnimation('previewStroke', 'stroke-word'); // Stroke
|
| 826 |
-
runAnimation('previewMusic', 'music-word'); // Music Player
|
| 827 |
});
|
| 828 |
</script>
|
| 829 |
</body>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
| 6 |
+
<title>Subtitle Style Preview Alpha Only Fixed Size</title>
|
| 7 |
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;900&display=swap" rel="stylesheet">
|
|
|
|
| 8 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
| 9 |
|
| 10 |
<style>
|
|
|
|
| 22 |
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Vazirmatn'; overflow-x: hidden; min-height: 100vh; padding-bottom: 50px; display: flex; flex-direction: column;}
|
| 23 |
|
| 24 |
/* ========================================= */
|
| 25 |
+
/* === استایل نئون آلفا === */
|
| 26 |
/* ========================================= */
|
| 27 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 28 |
.alpha-style-preview {
|
| 29 |
/* متغیرهای رنگی قابل تنظیم */
|
| 30 |
+
--alpha-box-color: #7c4dff; /* رنگ باکس کلمه فعال */
|
| 31 |
+
--alpha-text-active: #ffffff; /* رنگ متن داخل باکس */
|
| 32 |
+
--alpha-text-base: #ffffff; /* رنگ متن اصلی */
|
| 33 |
|
| 34 |
background-color: transparent;
|
| 35 |
padding: 5px;
|
|
|
|
| 42 |
padding: 2px 4px;
|
| 43 |
border-radius: 8px;
|
| 44 |
transition: all 0.2s;
|
| 45 |
+
color: var(--alpha-text-base);
|
| 46 |
+
opacity: 0.4;
|
| 47 |
}
|
| 48 |
|
| 49 |
/* حالت گذشته: رنگ اصلی ولی کاملاً پررنگ */
|
|
|
|
| 57 |
background-color: var(--alpha-box-color);
|
| 58 |
background-image: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.4) 100%);
|
| 59 |
|
| 60 |
+
color: var(--alpha-text-active);
|
| 61 |
opacity: 1;
|
| 62 |
transform: scale(1.1);
|
| 63 |
text-shadow: 0 0 5px rgba(255,255,255,0.5);
|
| 64 |
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
| 65 |
}
|
| 66 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 67 |
/* ========================================= */
|
| 68 |
/* === UI عمومی === */
|
| 69 |
/* ========================================= */
|
|
|
|
| 88 |
.tool-section.active-section { display: block; }
|
| 89 |
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
|
| 90 |
|
| 91 |
+
/* اصلاح شده: برگرداندن به 2 ستون برای حفظ سایز */
|
| 92 |
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
|
|
|
|
| 93 |
|
| 94 |
.style-card {
|
| 95 |
background: #333; border: 2px solid transparent; border-radius: 15px;
|
|
|
|
| 98 |
position: relative; transition: all 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.2);
|
| 99 |
aspect-ratio: 1.4 / 1;
|
| 100 |
}
|
|
|
|
| 101 |
.style-card:active { transform: scale(0.98); }
|
| 102 |
.style-card.selected { border-color: var(--primary); background: #2a2a2a; }
|
| 103 |
.style-card.selected::after {
|
|
|
|
| 118 |
}
|
| 119 |
.card-settings:active { background: var(--primary); transform: scale(0.9); }
|
| 120 |
|
|
|
|
|
|
|
| 121 |
/* ========================================= */
|
| 122 |
/* === تنظیمات زیبا (Settings Rows) === */
|
| 123 |
/* ========================================= */
|
|
|
|
| 262 |
|
| 263 |
<div class="style-grid">
|
| 264 |
|
| 265 |
+
<!-- نئون آلفا (تنها گزینه باقی‌مانده) -->
|
| 266 |
+
<div class="style-card selected" onclick="selectCard(this)">
|
| 267 |
<div class="alpha-style-preview" id="animPreviewAlpha">
|
| 268 |
<span class="alpha-word">سلام</span>
|
| 269 |
<span class="alpha-word">اینجا</span>
|
|
|
|
| 276 |
<div class="card-settings" onclick="openSettings('alpha', event)"><i class="fa-solid fa-gear"></i></div>
|
| 277 |
</div>
|
| 278 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 279 |
</div>
|
| 280 |
</div>
|
| 281 |
</div>
|
|
|
|
| 338 |
text: '<svg viewBox="0 0 24 24"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>',
|
| 339 |
box: '<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/></svg>',
|
| 340 |
fill: '<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>',
|
|
|
|
|
|
|
| 341 |
};
|
| 342 |
|
| 343 |
const styleConfigs = {
|
|
|
|
| 345 |
{ id: 'alpha-box-color', label: 'رنگ باکس کلمه فعال', icon: svgs.fill, cssVar: '--alpha-box-color', targetId: 'animPreviewAlpha', default: '#7c4dff', isAnimToggle: true },
|
| 346 |
{ id: 'alpha-text-active', label: 'رنگ متن کلمه فعال', icon: svgs.active, cssVar: '--alpha-text-active', targetId: 'animPreviewAlpha', default: '#ffffff' },
|
| 347 |
{ id: 'alpha-text-base', label: 'رنگ متن عادی (گذشته/آینده)', icon: svgs.text, cssVar: '--alpha-text-base', targetId: 'animPreviewAlpha', default: '#ffffff' }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 348 |
]
|
| 349 |
};
|
| 350 |
|
|
|
|
| 479 |
document.getElementById('colorPickerModal').classList.remove('active');
|
| 480 |
}
|
| 481 |
function toggleTool(toolId) { if (toolId !== 'style') alert("این بخش خالی است"); }
|
|
|
|
| 482 |
function selectCard(el) { document.querySelectorAll('.style-card').forEach(c => c.classList.remove('selected')); el.classList.add('selected'); }
|
| 483 |
function switchTab(tabName) {
|
| 484 |
document.querySelectorAll('.picker-tab').forEach(t => t.classList.remove('active'));
|
|
|
|
| 554 |
}
|
| 555 |
|
| 556 |
window.addEventListener('load', () => {
|
| 557 |
+
// Alpha Style ACTIVE by default
|
| 558 |
+
const el = document.getElementById('animPreviewAlpha');
|
| 559 |
+
if(el) el.setAttribute('data-anim-status', 'true');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 560 |
|
| 561 |
+
// Only run Alpha Animation
|
| 562 |
runAnimation('animPreviewAlpha', 'alpha-word');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 563 |
});
|
| 564 |
</script>
|
| 565 |
</body>
|