added exit case button for deepface screen

src/App.tsx

@@ -67,12 +67,12 @@ const App: React.FC = () => {
             }}>✕ ЗАКРЫТЬ</button>
             <div style={{ clear: 'both' }} />
 
-            {overlay === 'case1' && <Case1Desktop onComplete={() => { markComplete('case1'); close(); }} />}
-            {overlay === 'case2' && <Case2Desktop onComplete={() => { markComplete('case2'); close(); }} />}
-            {overlay === 'case3' && <Case3Desktop onComplete={() => { markComplete('case3'); close(); }} />}
-            {overlay === 'case4' && <Case4Desktop onComplete={() => { markComplete('case4'); close(); }} />}
-            {overlay === 'case5' && <Case5Desktop onComplete={() => { markComplete('case5'); close(); }} />}
-            {overlay === 'deepfake' && <ChatterboxTTS />}
+            {overlay === 'case1' && <Case1Desktop onComplete={() => { markComplete('1'); close(); }} />}
+            {overlay === 'case2' && <Case2Desktop onComplete={() => { markComplete('2'); close(); }} />}
+            {overlay === 'case3' && <Case3Desktop onComplete={() => { markComplete('3'); close(); }} />}
+            {overlay === 'case4' && <Case4Desktop onComplete={() => { markComplete('4'); close(); }} />}
+            {overlay === 'case5' && <Case5Desktop onComplete={() => { markComplete('5'); close(); }} />}
+            {overlay === 'deepfake' && <ChatterboxTTS onComplete={() => { markComplete('deepfake'); close(); }} />}
             {overlay === 'quiz' && <MyQuize />}
             {overlay === 'wiki' && <CyberSecurityArticle />}
           </div>

src/components/deepfake/ChatterboxTTS.css

@@ -427,3 +427,24 @@
 .download-btn:hover {
     background: rgba(0,255,65,0.2);
 }
+
+.complete-btn {
+    display: block;
+    margin-top: 16px;
+    padding: 11px 28px;
+    background: rgba(0,255,255,0.1);
+    border: 1px solid #00FFFF;
+    color: #00FFFF;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: 'Orbitron', monospace;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    transition: all 0.2s;
+    width: 100%;
+}
+.complete-btn:hover {
+    background: rgba(0,255,255,0.2);
+    box-shadow: 0 0 16px rgba(0,255,255,0.35);
+}

src/components/deepfake/ChatterboxTTS.tsx

@@ -5,7 +5,11 @@ import './ChatterboxTTS.css';
 
 const API_URL = 'https://back.hack.kinsle.ru/process-audio';
 
-const ChatterboxTTS = () => {
+interface ChatterboxTTSProps {
+	onComplete?: () => void;
+}
+
+const ChatterboxTTS = ({ onComplete }: ChatterboxTTSProps) => {
 	// Recording state
 	const [isRecording, setIsRecording] = useState(false);
 	const [hasRecording, setHasRecording] = useState(false);
@@ -383,6 +387,11 @@ const ChatterboxTTS = () => {
 					<audio src={resultUrl} controls />
 					<br />
 					<a href={resultUrl} className="download-btn" download="output.wav">💾 Скачать WAV'ку!</a>
+					{onComplete && (
+						<button className="complete-btn" onClick={onComplete}>
+							✓ Завершить кейс
+						</button>
+					)}
 				</div>
 			)}
 		</div>