feat: implement multi-language support and localization system with dynamic UI updates
This commit is contained in:
+26
-9
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user