feat: Made endpage look better and added secret code for download button.

src/App.js

@@ -28,7 +28,7 @@ const InBetweenSite6 = React.lazy(() =>
 
 const TestInfoPage = React.lazy(() => import("./pages/TestInfoPage"));
 
-const TestEndPage = React.lazy(() => import("./pages/TestEndPage"));
+const EndPage = React.lazy(() => import("./pages/EndPage"));
 const StartPage1 = React.lazy(() => import("./pages/study_site_1/StartPage1"));
 const StartPage2 = React.lazy(() => import("./pages/study_site_2/StartPage2"));
 const StartPage3 = React.lazy(() => import("./pages/study_site_3/StartPage3"));
@@ -252,7 +252,7 @@ function App() {
             path="/end"
             element={
               <React.Suspense fallback={<>...</>}>
-                <TestEndPage />
+                <EndPage />
               </React.Suspense>
             }
           />

src/pages/EndPage.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import DownloadButton from "../components/DownloadButton";
+
+function EndPage() {
+  const [clickCount, setClickCount] = useState(0);
+  const [buttonVisible, setButtonVisible] = useState(false);
+
+  const handleTextClick = () => {
+    const newCount = clickCount + 1;
+    setClickCount(newCount);
+    if (newCount >= 10) {
+      setButtonVisible(true);
+    }
+  };
+
+  return (
+    <div>
+      <p
+        onClick={handleTextClick}
+        style={{ cursor: "pointer", margin: "10px auto", width: "fit-content" }}
+      >
+        Thank you for participating! ❤️
+      </p>
+      {buttonVisible && (
+        <div style={{ margin: "0 auto", width: "fit-content" }}>
+          <DownloadButton />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default EndPage;

src/pages/TestEndPage.jsx

@@ -1,13 +0,0 @@
-import React from "react";
-import DownloadButton from "../components/DownloadButton";
-
-function TestInfoPage() {
-  return (
-    <div>
-      <p>Thank you for participating! ❤️</p>
-      <DownloadButton />
-    </div>
-  );
-}
-
-export default TestInfoPage;