[Feat] : 메인&결과페이지 연결

Chomyeon · Nov 10, 2023 · ff4c758 · ff4c758
1 parent 1052c58
commit ff4c758
Show file tree

Hide file tree

Showing 9 changed files with 441 additions and 0 deletions.
diff --git a/guitar.mp4 b/guitar.mp4
diff --git a/static/chat.js b/static/chat.js
@@ -0,0 +1,78 @@
+const dummyData = [
+  { user: "Alice", message: "Hello there!" },
+  { user: "Bob", message: "Hi Alice!" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+  { user: "Alice", message: "How are you doing?" },
+];
+
+const time = [
+  2000, 2000, 2000, 2000, 2000, 2200, 2000, 2000, 2000, 5000, 5000, 5000, 5, 5,
+  5, 3, 5, 5, 5, 5, 5, 5, 5,
+];
+const color = [
+  "blue",
+  "green",
+  "blue",
+  "blue",
+  "blue",
+  "blue",
+  "blue",
+  "blue",
+  "orange",
+];
+
+// 메세지 출력
+function appendMessage(user, message, color) {
+  const chatMessages = document.getElementById("chat-messages");
+  const messageDiv = document.createElement("div");
+  messageDiv.classList.add("message");
+  messageDiv.innerHTML = `<span class="user" style="color: ${color};">${user}:</span> ${message}`;
+  chatMessages.appendChild(messageDiv);
+  chatMessages.scrollTop = chatMessages.scrollHeight; // 스크롤을 항상 아래로 유지
+}
+
+// 더미데이타 정보 보내기
+function displayDummyData() {
+  let index = 0;
+  const intervalId = setInterval(() => {
+    if (index < dummyData.length) {
+      const { user, message } = dummyData[index];
+      const userColor = color[index];
+      appendMessage(user, message, userColor);
+      index++;
+    } else {
+      clearInterval(intervalId);
+    }
+  }, time[index]);
+}
+
+function handleKeyDown(event) {
+  if (event.key === "Enter" && !event.shiftKey) {
+    event.preventDefault(); // 엔터 키 기본 동작 방지
+    sendMessage(); // 메시지 전송
+  }
+}
+
+// 초기 실행
+displayDummyData();
+
+function moveToNextPage() {
+  // 여기에 이동할 페이지의 URL을 입력하세요.
+  var nextPageUrl = "다음페이지의URL.html";
+
+  // 페이지 이동
+  window.location.href = nextPageUrl;
+}
diff --git a/static/content_result.js b/static/content_result.js
@@ -0,0 +1,19 @@
+const serverURL = "";
+// 서버로부터 데이터 가져오기
+fetch(serverURL)
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    return response.json();
+  })
+  .then((data) => {
+    // 데이터를 받아와서 웹 페이지에 표시
+    const dataContainer = document.getElementById("content_result");
+    dataContainer.innerHTML = `<p>서버로부터 받은 데이터: ${JSON.stringify(
+      data
+    )}</p>`;
+  })
+  .catch((error) => {
+    console.error("Error fetching data:", error);
+  });
diff --git a/static/main.css b/static/main.css
@@ -0,0 +1,140 @@
+body {
+  background-color: #f8fafd;
+  margin-left: 5%;
+  margin-right: 5%;
+}
+
+.mainbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid gray;
+  padding: 17px;
+  font-size: 18px;
+}
+
+#name {
+  font-weight: bold;
+  font-size: 25px;
+  margin-left: 30px;
+}
+
+#Chatting,
+#About,
+#Contract {
+  height: 55px;
+  border: none;
+  background-color: #f8fafd;
+  font-size: 16px;
+  margin-right: 24px;
+}
+/* 마우스를 올렸을 때의 스타일 */
+.buttons button:hover {
+  background-color: black; /* 안됨...*/
+  color: #007bff; /* 버튼 텍스트 색상 변경 */
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* #logOut에 대한 추가적인 스타일을 지정할 수 있습니다. */
+#logOut {
+  background-color: #d3e3fd;
+  color: #062e6f;
+  font-weight: bold;
+  font-size: 16px;
+  border: none;
+  width: 100px;
+  height: 55px;
+  margin-right: 30px;
+  border-radius: 4px;
+}
+
+#logOut:hover {
+  background-color: #8298ba; /* 어두운 파란색 */
+  color: #062e6f; /* 버튼 텍스트 색상 변경 */
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.content {
+  display: flex;
+  border-radius: 10px;
+}
+
+/* 동영상에 대한 스타일을 지정합니다. */
+video {
+  width: 55%; /* 동영상의 가로 크기를 화면의 80%로 설정합니다. */
+  height: 600px;
+  margin-top: 60px;
+  margin-left: 10%;
+  background-color: gainsboro;
+}
+
+/********************************************************/
+#chat-container {
+  width: 25%;
+  height: 600px;
+  margin-top: 60px;
+  border: 3px;
+  border-color: grey;
+  /* max-width: 600px;
+  margin: 20px auto; */
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: white;
+}
+.chat-container {
+  align-items: center;
+  margin-top: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.message-input {
+  flex: 1;
+  border: none;
+  padding: 10px;
+  font-size: 16px;
+  outline: none;
+}
+
+.send-button {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 0 5px 5px 0;
+  cursor: pointer;
+}
+
+.send-button:hover {
+  background-color: #0056b3;
+}
+
+.message {
+  margin-bottom: 10px;
+}
+
+.user {
+  font-weight: bold;
+  color: #007bff;
+}
+
+#end {
+  width: 10%;
+  height: 60px;
+  border: none;
+  border-radius: 10px;
+  background-color: #d3e3fd;
+  font-size: 23px;
+  color: #062e6f;
+  font-weight: bolder;
+  margin-left: 48%;
+  margin-top: 20px; /* 조정 필요한 값 */
+}
+
+#end:hover {
+  background-color: #8298ba; /* 어두운 파란색 */
+  color: #062e6f; /* 버튼 텍스트 색상 변경 */
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
diff --git a/static/pron_result.js b/static/pron_result.js
@@ -0,0 +1,19 @@
+const server2URL = "";
+// 서버로부터 데이터 가져오기
+fetch(serverURL)
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    return response.json();
+  })
+  .then((data) => {
+    // 데이터를 받아와서 웹 페이지에 표시
+    const dataContainer = document.getElementById("pron_result");
+    dataContainer.innerHTML = `<p>서버로부터 받은 데이터: ${JSON.stringify(
+      data
+    )}</p>`;
+  })
+  .catch((error) => {
+    console.error("Error fetching data:", error);
+  });
diff --git a/static/result.css b/static/result.css
@@ -0,0 +1,48 @@
+body {
+  background-color: #f8fafd;
+  margin-left: 5%;
+  margin-right: 5%;
+}
+
+.mainbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid gray;
+  padding: 17px;
+  font-size: 18px;
+}
+
+#name {
+  font-weight: bold;
+  font-size: 25px;
+  /* #name에 대한 추가적인 스타일을 지정할 수 있습니다. */
+}
+
+#Chatting,
+#About,
+#Contract {
+  border: none;
+  background: none;
+  font-size: 16px;
+  margin-right: 20px;
+}
+
+/* #logOut에 대한 추가적인 스타일을 지정할 수 있습니다. */
+#logOut {
+  background-color: #d3e3fd;
+  color: #062e6f;
+  font-weight: bold;
+  font-size: 16px;
+  border: none;
+  width: 100px;
+  height: 55px;
+}
+
+.content {
+  border: 1px solid rgb(188, 183, 183);
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/static/tensionGraph.js b/static/tensionGraph.js
@@ -0,0 +1,64 @@
+const frameTensions = [20, 30, 40, 50, 60, 70, 80, 90, 100, 80, 70, 60, 50]; //임의로
+const canvas = document.getElementById("tensionGraph");
+const context = canvas.getContext("2d");
+const centerX = canvas.width / 2;
+const centerY = canvas.height / 2;
+const radius = Math.min(centerX, centerY) - 10;
+
+// 발표 중 긴장한 정도를 퍼센티지로 계산&임의로
+const totalFrames = frameTensions.length;
+const tensePercentage =
+  frameTensions.reduce((sum, tension) => sum + tension, 0) / totalFrames;
+const server3URL = "";
+
+// 서버로부터 데이터 가져오기
+/*
+fetch(serverURL)
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    return response.json();
+  })
+  .then((data) => {
+    // 데이터를 받아와서 웹 페이지에 표시
+    tensePercentage = data; //json 값 받아오기
+  })
+  .catch((error) => {
+    console.error("Error fetching data:", error);
+  });
+*/
+
+// 그래프 그리는 함수
+function drawGraph() {
+  // 원 그래프 그리기
+  context.beginPath();
+  context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+  context.fillStyle = "#f0f0f0"; // 배경색
+  context.fill();
+
+  // 긴장한 정도를 표시할 부분 그리기
+  context.beginPath();
+  context.moveTo(centerX, centerY);
+  context.arc(
+    centerX,
+    centerY,
+    radius,
+    0, // 수정: 시작 각도를 0으로 변경
+    (tensePercentage / 100) * 2 * Math.PI
+  );
+  context.fillStyle = "#8a2be2"; // 긴장한 정도 색상
+  context.fill();
+
+  // 중앙에 텍스트 표시
+  context.fillStyle = "#333";
+  context.font = "20px Arial";
+  context.fillText(
+    `${tensePercentage.toFixed(2)}%`,
+    centerX - 30,
+    centerY + 10
+  );
+}
+
+// 초기 그래프 그리기
+drawGraph();