feat: implement multi-language support and localization system with dynamic UI updates

This commit is contained in:
Ümit Tunç
2026-05-28 07:49:01 +03:00
parent e7c66d9381
commit 0bc3a15b82
7 changed files with 76 additions and 23 deletions
+26 -9
View File
@@ -218,16 +218,33 @@
<div class="action-panel">
<!-- Progress Section (Active during download) -->
<div id="download-progress-panel" class="progress-panel" style="display: none;">
<div class="progress-header">
<span id="download-status">Bağlantı kuruluyor...</span>
<span id="download-percent">0%</span>
<!-- Overall Playlist Progress -->
<div class="overall-progress-group" style="margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 6px;">
<div class="progress-header" style="margin-bottom: 2px;">
<span id="overall-status-label" data-i18n="overall_status_label" style="font-size: 0.76rem; color: #a49fc0; font-weight: 500;">Genel İlerleme</span>
<span id="overall-percent" style="color: #00dfd8; font-weight: 800; font-size: 0.76rem;">0%</span>
</div>
<div class="progress-bar-container" style="height: 5px; background: rgba(0, 0, 0, 0.35);">
<div id="overall-progress-bar" class="progress-bar-fill" style="width: 0%; height: 100%; background: linear-gradient(90deg, #7928ca 0%, #ff0080 100%);"></div>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 3px;">
<span id="overall-count-text" style="font-size: 0.72rem; color: #8c88a5;">Tamamlanan: 0 / 0</span>
<span id="overall-remaining-text" style="font-size: 0.72rem; color: #8c88a5;">Kalan: 0</span>
</div>
</div>
<div class="progress-bar-container">
<div id="download-progress-bar" class="progress-bar-fill" style="width: 0%"></div>
</div>
<div class="progress-footer" style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
<p id="download-subtext" class="subtext" style="margin-top: 0;">Lütfen bekleyin...</p>
<p id="download-overall-status" class="subtext" style="margin-top: 0; font-weight: 600; color: #00dfd8;"></p>
<!-- Active Item Progress -->
<div class="active-track-progress-group">
<div class="progress-header">
<span id="download-status" style="font-size: 0.76rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 190px;">Bağlantı kuruluyor...</span>
<span id="download-percent" style="font-size: 0.76rem;">0%</span>
</div>
<div class="progress-bar-container" style="height: 5px; background: rgba(0, 0, 0, 0.35);">
<div id="download-progress-bar" class="progress-bar-fill" style="width: 0%"></div>
</div>
<div class="progress-footer" style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
<p id="download-subtext" class="subtext" style="margin-top: 0; font-size: 0.7rem;">Lütfen bekleyin...</p>
</div>
</div>
</div>