Update src/App.scss

src/App.scss

@@ -1,4 +1,4 @@
-// src/App.scss (نسخه نهایی با اصلاح مرکزچین کردن نام گویندگان)
+// src/App.scss (نسخه نهایی با انیمیشن تایمر فعال)
 
 // 1. Import Tailwind's base, components, and utilities
 @import 'tailwindcss/base';
@@ -165,16 +165,12 @@
   grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
   gap: 12px; padding: 4px 8px 8px;
 }
-
-// ✅ تغییر اصلی اینجاست
 .voice-card {
   cursor: pointer;
-  // text-align: center; // این دیگر لازم نیست
-  // استفاده از Flexbox برای کنترل دقیق چینش
   display: flex;
   flex-direction: column;
-  align-items: center; // این خط همه چیز را در مرکز افقی قرار می‌دهد
-
+  align-items: center;
+  
   img {
     width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
     border: 3px solid transparent; transition: border-color 0.2s, transform 0.2s;
@@ -198,11 +194,116 @@
   100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0); }
 }
 
-/* ویدیو و کنترل‌ها */
+/* استایل‌های بخش تایمر */
+.timer-section {
+  padding: 12px;
+  &.time-up {
+    text-align: center;
+    p {
+      font-size: 0.85rem;
+      font-weight: 500;
+      margin: 0;
+      padding: 8px;
+      color: theme('colors.custom-foreground');
+      opacity: 0.8;
+    }
+  }
+  .timer-text {
+    display: flex; justify-content: space-between; font-size: 0.8rem;
+    color: theme('colors.custom-foreground'); opacity: 0.8; margin-bottom: 8px;
+    span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
+  }
+  .timer-bar {
+    width: 100%;
+    height: 8px;
+    background-color: rgba(0, 0, 0, 0.1);
+    .dark & { background-color: rgba(255, 255, 255, 0.1); }
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .timer-bar-fill {
+    height: 100%;
+    border-radius: 4px;
+    background-color: #34c759;
+    transition: width 0.5s ease-out;
+    // ✅ تغییر اصلی اینجاست
+    &.active {
+      background: repeating-linear-gradient(
+        -45deg,
+        #34c759,
+        #34c759 10px,
+        #4ade80 10px,
+        #4ade80 20px
+      );
+      // این انیمیشن باعث حرکت خطوط مورب می‌شود
+      animation: slide 60s linear infinite;
+    }
+  }
+}
+
+@keyframes slide {
+  from { background-position: 0 0; }
+  to { background-position: -800px 0; }
+}
+
+/* استایل‌های صفحه اتمام زمان */
+.time-up-overlay {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  z-index: 10;
+  animation: fade-in-scale 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.time-up-card {
+  background-color: theme('colors.custom-popover');
+  color: theme('colors.custom-foreground');
+  border: 1px solid theme('colors.custom-border');
+  border-radius: 24px;
+  padding: 2.5rem;
+  max-width: 400px;
+  text-align: center;
+  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
+  direction: rtl;
+
+  .medal-icon {
+    font-size: 56px;
+    padding: 16px;
+    background-color: #fff5e1;
+    color: #ffb822;
+    border-radius: 50%;
+    margin-bottom: 1.5rem;
+    display: inline-block;
+    .dark & {
+      background-color: #4a3c20;
+      color: #ffd670;
+    }
+  }
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-top: 0;
+    margin-bottom: 0.75rem;
+  }
+  p {
+    font-size: 1rem;
+    line-height: 1.6;
+    opacity: 0.8;
+    margin: 0;
+  }
+}
+@keyframes fade-in-scale {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+/* استایل ویدیو و کنترل‌ها */
 .media-area {
-    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-    z-index: 1; overflow: hidden;
-    video#video-feed { width: 100%; height: 100%; object-fit: cover; }
+    flex-grow: 1;
+    position: relative;
+    z-index: 1;
+    video#video-feed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
 }
 #large-logo-container {
     display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
@@ -220,6 +321,11 @@
     cursor: pointer; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
     flex-shrink: 0; z-index: 2; overflow: hidden;
     &:hover { transform: scale(1.05); }
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
 }
 .mic-button-color { background-color: #fecdd3; }
 .cam-button-color { background-color: #E0ECFF; }
@@ -228,10 +334,8 @@
 .control-button-wrapper { position: relative; display: flex; justify-content: center; }
 .switch-camera-button-container {
     position: absolute; bottom: calc(100% + 0.65rem);
-    left: 50%;
-    transform: translateX(-50%) translateY(15px) scale(0.7);
-    z-index: 5;
-    opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.35s;
+    left: 50%; transform: translateX(-50%) translateY(15px) scale(0.7);
+    z-index: 5; opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.35s;
     transform-origin: center bottom;
     &.visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
 }