Hugging Face's logo

Spaces:
Opera8
/
Translate
Running

App Files Community
Opera10 commited on
Commit
4a17918
·
verified ·
1 Parent(s): 797d44a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +3 -64
index.html CHANGED
@@ -56,16 +56,6 @@
56
  66% { transform: translate(-2%,2%) scale(0.97); }
57
  }
58
 
59
- /* ===== PARTICLES ===== */
60
- .particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
61
- .particle { position: absolute; border-radius: 50%; opacity: 0; animation: particleFly linear infinite; }
62
- @keyframes particleFly {
63
- 0% { transform: translateY(100vh) scale(0); opacity: 0; }
64
- 10% { opacity: 0.6; }
65
- 90% { opacity: 0.3; }
66
- 100% { transform: translateY(-10vh) scale(1); opacity: 0; }
67
- }
68
-
69
  /* ===== LAYOUT ===== */
70
  .app-wrapper { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 16px 40px; }
71
 
@@ -98,32 +88,6 @@
98
  100% { transform: scale(1.5); opacity: 0; }
99
  }
100
 
101
- /* Orbiting dot animation */
102
- .orbit-dot {
103
- position: absolute;
104
- width: 8px; height: 8px;
105
- border-radius: 50%;
106
- background: linear-gradient(135deg, #38bdf8, #818cf8);
107
- top: 50%; left: 50%;
108
- transform-origin: 0 0;
109
- animation: orbit 3s linear infinite;
110
- }
111
- .orbit-dot2 {
112
- position: absolute;
113
- width: 5px; height: 5px;
114
- border-radius: 50%;
115
- background: #34d399;
116
- top: 50%; left: 50%;
117
- transform-origin: 0 0;
118
- animation: orbit 2s linear infinite reverse;
119
- animation-delay: -1s;
120
- }
121
- @keyframes orbit {
122
- 0% { transform: rotate(0deg) translateX(36px) scale(1); }
123
- 50% { transform: rotate(180deg) translateX(36px) scale(0.7); }
124
- 100% { transform: rotate(360deg) translateX(36px) scale(1); }
125
- }
126
-
127
  .logo-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 4px; }
128
  .logo-title {
129
  font-size: 2rem; font-weight: 900;
@@ -306,7 +270,7 @@
306
  }
307
  input[type="range"] {
308
  -webkit-appearance: none; width: 100%; height: 4px;
309
- border-radius: 4px; background: linear-gradient(to right, var(--sky-deep) 50%, #e2e8f0 50%);
310
  outline: none; cursor: pointer;
311
  }
312
  input[type="range"]::-webkit-slider-thumb {
@@ -369,11 +333,6 @@
369
  .audio-player-row {
370
  display: flex; align-items: center; gap: 8px; width: 100%;
371
  }
372
- .audio-label {
373
- display: flex; align-items: center; gap: 5px;
374
- font-size: 0.72rem; font-weight: 700; color: var(--muted); white-space: nowrap; flex-shrink: 0;
375
- }
376
- .audio-label i { color: var(--sky-deep); }
377
  audio { flex: 1; height: 38px; border-radius: 8px; outline: none; min-width: 0; }
378
 
379
  /* ===== DOWNLOAD BUTTON ===== */
@@ -447,7 +406,6 @@
447
  <body>
448
 
449
  <div class="bg-scene"></div>
450
- <div class="particles" id="particles"></div>
451
  <div class="toast-container" id="toastContainer"></div>
452
 
453
  <div class="app-wrapper">
@@ -458,8 +416,6 @@
458
  <div class="logo-icon-wrap">
459
  <div class="logo-icon-pulse"></div>
460
  <div class="logo-icon-pulse2"></div>
461
- <div class="orbit-dot"></div>
462
- <div class="orbit-dot2"></div>
463
  <!-- Google Translate style SVG icon -->
464
  <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
465
  <defs>
@@ -579,10 +535,6 @@
579
  </div>
580
  <div class="audio-player-wrap">
581
  <div class="audio-player-row">
582
- <div class="audio-label">
583
- <i class="fa-solid fa-volume-high"></i>
584
- صدا
585
- </div>
586
  <audio id="audioPlayer" controls controlsList="nodownload">
587
  مرورگر شما از پخش صدا پشتیبانی نمی‌کند.
588
  </audio>
@@ -607,19 +559,6 @@
607
  return RTL_LANGS.has(langName);
608
  }
609
 
610
- // ===== PARTICLES =====
611
- (function() {
612
- const container = document.getElementById('particles');
613
- const colors = ['#38bdf8','#818cf8','#34d399','#fb923c','#a5f3fc'];
614
- for (let i = 0; i < 18; i++) {
615
- const p = document.createElement('div');
616
- p.className = 'particle';
617
- const size = Math.random() * 6 + 3;
618
- p.style.cssText = `width:${size}px;height:${size}px;left:${Math.random()*100}%;background:${colors[Math.floor(Math.random()*colors.length)]};animation-duration:${8+Math.random()*10}s;animation-delay:${Math.random()*8}s;`;
619
- container.appendChild(p);
620
- }
621
- })();
622
-
623
  // ===== TOAST =====
624
  function showToast(msg, type = 'info', duration = 3500) {
625
  const icons = { success: 'fa-check', error: 'fa-xmark', info: 'fa-info' };
@@ -637,7 +576,7 @@
637
  // ===== SLIDERS =====
638
  function updateSliderTrack(slider) {
639
  const pct = ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
640
- slider.style.background = `linear-gradient(to right, var(--sky-deep) ${pct}%, #e2e8f0 ${pct}%)`;
641
  }
642
  ['rate','pitch','vol'].forEach(id => {
643
  const slider = document.getElementById(id+'Slider');
@@ -779,7 +718,7 @@
779
 
780
  textHint.classList.remove('show');
781
  translateBtn.disabled = true;
782
- btnText.innerHTML = '<div class="spinner"></div> در حال پردازش...';
783
  outputSection.classList.remove('visible');
784
  setTimeout(() => { outputSection.style.display = 'none'; }, 450);
785
 
 
56
  66% { transform: translate(-2%,2%) scale(0.97); }
57
  }
58
 
 
 
 
 
 
 
 
 
 
 
59
  /* ===== LAYOUT ===== */
60
  .app-wrapper { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 16px 40px; }
61
 
 
88
  100% { transform: scale(1.5); opacity: 0; }
89
  }
90
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
91
  .logo-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 4px; }
92
  .logo-title {
93
  font-size: 2rem; font-weight: 900;
 
270
  }
271
  input[type="range"] {
272
  -webkit-appearance: none; width: 100%; height: 4px;
273
+ border-radius: 4px; background: linear-gradient(to left, var(--sky-deep) 50%, #e2e8f0 50%);
274
  outline: none; cursor: pointer;
275
  }
276
  input[type="range"]::-webkit-slider-thumb {
 
333
  .audio-player-row {
334
  display: flex; align-items: center; gap: 8px; width: 100%;
335
  }
 
 
 
 
 
336
  audio { flex: 1; height: 38px; border-radius: 8px; outline: none; min-width: 0; }
337
 
338
  /* ===== DOWNLOAD BUTTON ===== */
 
406
  <body>
407
 
408
  <div class="bg-scene"></div>
 
409
  <div class="toast-container" id="toastContainer"></div>
410
 
411
  <div class="app-wrapper">
 
416
  <div class="logo-icon-wrap">
417
  <div class="logo-icon-pulse"></div>
418
  <div class="logo-icon-pulse2"></div>
 
 
419
  <!-- Google Translate style SVG icon -->
420
  <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
421
  <defs>
 
535
  </div>
536
  <div class="audio-player-wrap">
537
  <div class="audio-player-row">
 
 
 
 
538
  <audio id="audioPlayer" controls controlsList="nodownload">
539
  مرورگر شما از پخش صدا پشتیبانی نمی‌کند.
540
  </audio>
 
559
  return RTL_LANGS.has(langName);
560
  }
561
 
 
 
 
 
 
 
 
 
 
 
 
 
 
562
  // ===== TOAST =====
563
  function showToast(msg, type = 'info', duration = 3500) {
564
  const icons = { success: 'fa-check', error: 'fa-xmark', info: 'fa-info' };
 
576
  // ===== SLIDERS =====
577
  function updateSliderTrack(slider) {
578
  const pct = ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
579
+ slider.style.background = `linear-gradient(to left, var(--sky-deep) ${pct}%, #e2e8f0 ${pct}%)`;
580
  }
581
  ['rate','pitch','vol'].forEach(id => {
582
  const slider = document.getElementById(id+'Slider');
 
718
 
719
  textHint.classList.remove('show');
720
  translateBtn.disabled = true;
721
+ btnText.innerHTML = '<span style="display:inline-flex; align-items:center; gap:8px;"><span class="spinner"></span> در حال پردازش...</span>';
722
  outputSection.classList.remove('visible');
723
  setTimeout(() => { outputSection.style.display = 'none'; }, 450);
724