Merge branch 'backend' of https://github.com/TechLabs-Berlin/wt23-pos…

…egenie into backend
TechLabs-Berlin · Apr 8, 2023 · 5a05114 · 5a05114
2 parents 0229f9d + 983c9d7
commit 5a05114
Show file tree

Hide file tree

Showing 17 changed files with 529 additions and 471 deletions.
diff --git a/blog.md b/blog.md
diff --git a/frontend/src/components/00_modal/modal.css b/frontend/src/components/00_modal/modal.css
@@ -119,14 +119,14 @@ form {
 .user-auth button {
   padding: 2px 4px;
   border-radius: 5px;
-  background-color: white;
+  background-color: #fff;
   margin: auto;
 }
 .status_auth {
   margin: 10px 0;
 }
 .error-auth {
-  color: red;
+  color: rgb(255, 0, 0);
   text-align: center;
   margin-left: 5px;
 }

diff --git a/frontend/src/components/05_update_video/ModalFeedback.css b/frontend/src/components/05_update_video/ModalFeedback.css
@@ -1,58 +1,117 @@
-.modal-container {
+.modal-overlay {
   position: fixed;
-  z-index: 1;
-  left: 0;
   top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
+  left: 0;
+  right: 0;
+  bottom: 0;
   background-color: rgba(0, 0, 0, 0.4);
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  z-index: 9999;
 }
 
-.modal-content {
+.modal-container {
   background-color: #fff;
-  border-radius: 5px;
+  width: 90%;
+  max-height: 90%;
+  overflow: auto;
   padding: 20px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
-.title-h2 {
-  font-size: 1.9em;
+.close-button {
+  position: absolute;
+  background-color: transparent;
+  top: 10px;
+  right: 10px;
+  font-size: 1em;
+  cursor: pointer;
+  margin: 0 auto;
+  display: block;
+}
+.close-button:hover {
+  box-shadow: #f35d6c91 0px 7px 29px 0px;
+}
+.results {
+  color: #000;
+  margin-bottom: 10px;
+}
+.modal-container video {
+  width: 100%;
+  height: auto;
 }
 
-.video_container {
-  border: 1px solid white;
-  padding: 6px 3px 0 3px;
-  margin-top: 40px;
-  box-shadow: #f35d6cae 0px 1px 0px, #f35d6cae 0px 8px 24px,
-    #f35d6c6a 0px 16px 58px;
+.image-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-video {
-  max-width: 100%;
+
+.image-feedback {
+  width: 100%;
   height: auto;
 }
 
+.download-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 2px solid #f35d6b;
+  border-radius: 5px;
+  padding: 1px 5px;
+  color: #f35d6b;
+}
+
+.download-icon:hover {
+  background-color: #f35d6c6c;
+  border-radius: 50%;
+}
+
+h3 {
+  font-weight: 300;
+  margin-bottom: 2em;
+  margin-top: 1em;
+}
+
 .loading-spinner {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: flex-start;
   align-items: center;
   height: 300px;
+  color: #000;
 }
 
 .spinner {
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-top-color: #f35d6b;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  animation: spin 1s ease-in-out infinite;
+  border-top: 4px solid #f35d6b;
+  border-right: 2px solid transparent;
+  animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
-  to {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
     transform: rotate(360deg);
   }
 }
+h2 {
+  margin-bottom: 8px;
+}
+
+.modal-container {
+  text-align: center;
+}
diff --git a/frontend/src/components/05_update_video/ModalFeedback.js b/frontend/src/components/05_update_video/ModalFeedback.js
@@ -1,29 +1,41 @@
 import React from "react";
 import "./ModalFeedback.css";
 
-function ModalFeedback({ isOpen, onClose, children, videoUrl }) {
+function ModalFeedback({ isOpen, onClose, videoUrl, imageUrl }) {
   const handleCloseModal = () => {
     onClose();
   };
 
   if (!isOpen) return null;
 
   return (
-    <div className="modal-container">
-      <div className="modal-content">
+    <div className="modal-overlay">
+      <div className="modal-container">
         <div>
-          <h2>Results: </h2>
+          <h2 className="results">Results: </h2>
         </div>
         {videoUrl ? (
-          <video
-            src={videoUrl}
-            controls
-            type="video/mp4"
-            className="video-player"
-          />
+          <div>
+            <video
+              src={videoUrl}
+              controls
+              type="video/mp4"
+              className="video-player"
+            />
+            <div className="image-container">
+              <img src={imageUrl} className="image-feedback" />
+            </div>
+          </div>
         ) : (
-          <div className="loading-spinner">
-            <div className="spinner"></div>
+          <div className="loading-container">
+            <div className="loading-spinner">
+              <h3>
+                Analyzing your workout and measuring your movements.
+                <br /> Please wait while we gather the data to give you <br />
+                personalized feedback and insights.
+              </h3>
+              <div className="spinner"></div>
+            </div>
           </div>
         )}
         <button className="close-button" onClick={handleCloseModal}>

diff --git a/frontend/src/components/05_update_video/UploadForm.jsx b/frontend/src/components/05_update_video/UploadForm.jsx
@@ -68,30 +68,10 @@ function UploadForm() {
                 isOpen={isModalOpen}
                 onClose={handleCloseModal}
                 videoUrl={videoUrl}
-            >
-                {videoUrl ? (
-                    <video
-                        src={videoUrl}
-                        controls
-                        type="video/mp4"
-                        className="video-player"
-                    />
-                ) : (
-                    <div className="waiting">
-                        <div className="loading-spinner">
-                            <p className="waiting-p">
-                                Analyzing your workout, measuring your
-                                movements, and calculating your performance.
-                                Please wait while we gather the data to give you
-                                personalized feedback and insights.
-                            </p>
-
-                            <div className="spinner"></div>
-                        </div>
-                    </div>
-                )}
-            </ModalFeedback>
-            {imageUrl && <img src={imageUrl} alt="feedback" />}
+                imageUrl={imageUrl}
+
+            />
+
         </div>
     );
 }

diff --git a/frontend/src/components/05_update_video/VideoInput.css b/frontend/src/components/05_update_video/VideoInput.css
@@ -4,7 +4,6 @@
   align-items: center;
   gap: 2rem;
   padding: 2rem;
-  /* background-color: #f2f2f2; */
   border-radius: 10px;
 }
 
@@ -18,12 +17,10 @@
 .video-upload-title {
   font-size: 2rem;
   font-weight: bold;
-  /* color: #333; */
 }
 
 .video-upload-description {
   font-size: 1rem;
-  /* color: #666; */
 }
 
 .video-upload-input-container {

diff --git a/frontend/src/components/BtnComponent/ButtonComponent.css b/frontend/src/components/BtnComponent/ButtonComponent.css
@@ -60,11 +60,6 @@ ol {
   background-color: #f35d6b;
 } */
 
-.title-h2 {
-  margin-bottom: 20px;
-  font-size: 1.9em;
-}
-
 .recom-container p {
   font-size: 1.2em;
   line-height: 1.5;

diff --git a/frontend/src/css/dark.css b/frontend/src/css/dark.css
@@ -1,5 +1,5 @@
 .dark-mode {
-  background-color: black;
-  color: white;
+  background-color: #000;
+  color: #ffffff;
   transition: all ease 1s;
 }
diff --git a/frontend/src/css/light.css b/frontend/src/css/light.css
@@ -1,5 +1,5 @@
 .light-mode {
-  background-color: white;
-  color: black;
+  background-color: #fff;
+  color: #000;
   transition: all ease 1s;
 }