Update templates/feedback.html

templates/feedback.html

@@ -5,184 +5,154 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>会話フィードバック画面</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-      tailwind.config = {
-        darkMode: "class",
-      };
-    </script>
-    <script>
-      function getMessage(level) {
-        if (level < 20) return "やばい";
-        if (level < 40) return "気をつけよう";
-        if (level < 60) return "まずまずですね";
-        if (level < 80) return "がんばれあとちょっと";
-        return "素晴らしい";
+    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
+    <style>
+      /* Main Container */
+      body {
+        background: linear-gradient(135deg, #2c3e50, #1f2937);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        font-family: "Arial", sans-serif;
+        color: #fff;
       }
 
-      async function getTranscription() {
-        try {
-          const response = await fetch("/transcription");
-          if (!response.ok) {
-            throw new Error("HTTP error! status: ${response.status}");
-          }
-          const data = await response.json;
-          const results = data.response;
-        } catch (error) {
-          console.error("Failed to fetch transcription", error);
-        }
+      /* Main Content Wrapper */
+      .main-content {
+        border: 5px solid rgba(255, 255, 255, 0.2);
+        padding: 2rem;
+        border-radius: 1rem;
+        width: 90%;
+        max-width: 500px;
+        background-color: rgba(0, 0, 0, 0.3);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+        text-align: center;
       }
 
-      async function getAnalysis() {
-        try {
-          await getTranscription();
-
-          const response = await fetch("/analyze");
-          if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-          }
-
-          const data = await response.json();
-          const results = data.results;
-          const analysis = results.deepseek_analysis;
-
-          // 変数に格納
-          const conversationLevel = analysis.conversationLevel;
-          const harassmentPresent = analysis.harassmentPresent;
-          const harassmentType = analysis.harassmentType;
-          const repetition = analysis.repetition;
-          const pleasantConversation = analysis.pleasantConversation;
-          const blameOrHarassment = analysis.blameOrHarassment;
-
-          // コンソールに表示
-          console.log(
-            conversationLevel,
-            harassmentPresent,
-            harassmentType,
-            repetition,
-            pleasantConversation,
-            blameOrHarassment
-          );
-
-          // DOMに表示
-          document.getElementById(
-            "level"
-          ).innerText = `会話レベル: ${conversationLevel}`;
-          document.getElementById(
-            "Harassment_bool"
-          ).innerText = `ハラスメントの有無: ${harassmentPresent}`;
-          document.getElementById(
-            "Harassment_type"
-          ).innerText = `ハラスメントの種類: ${harassmentType}`;
-          document.getElementById(
-            "Harassment_loop"
-          ).innerText = `繰り返しの程度: ${repetition}`;
-          document.getElementById(
-            "Harassment_comfort"
-          ).innerText = `会話の心地よさ: ${pleasantConversation}`;
-          document.getElementById(
-            "Harassment_volume"
-          ).innerText = `非難またはハラスメントの程度: ${blameOrHarassment}`;
-        } catch (error) {
-          console.error("Failed to fetch analysis data:", error);
-        }
+      /* Title */
+      .main-title {
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 1.5rem;
+        color: #fff;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
       }
 
-      window.onload = getAnalysis();
+      /* Hamburger Menu Button */
+      #menuButton {
+        background-color: rgba(255, 255, 255, 0.1);
+        border: none;
+        border-radius: 50%;
+        padding: 0.5rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+      }
 
-      function showSampleData() {
-        const level = 73;
-        const percentages = [80, 50, 60, 100, 30];
-        const labels = ["項目1", "項目2", "項目3", "項目4", "項目5"];
+      #menuButton:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
 
-        const message = getMessage(level);
-        document.getElementById("level").innerText = `話者Lv: ${level}`;
-        document.getElementById("message").innerText = message;
+      /* Hamburger Menu Styles */
+      #menu {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+        transform: translateX(-100%);
+        visibility: hidden;
+        opacity: 0;
+        background-color: rgb(31, 41, 55);
+        transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
+          opacity 0.3s ease-in-out;
+        backdrop-filter: blur(10px);
+        border-right: 1px solid rgba(255, 255, 255, 0.2);
+      }
 
-        const barElements = document.getElementsByClassName("bar-fill");
-        const labelElements = document.getElementsByClassName("bar-label");
-        for (let i = 0; i < barElements.length; i++) {
-          barElements[i].style.width = `${percentages[i]}%`;
-          labelElements[i].innerText = labels[i];
-        }
+      #menu.open {
+        transform: translateX(0);
+        visibility: visible;
+        opacity: 1;
+        transition: transform 0.3s ease-in-out, visibility 0s 0s,
+          opacity 0.3s ease-in-out;
       }
 
-      function showRecorder() {
-        window.location.href = "index";
+      #menu button {
+        transition: background-color 0.2s ease;
+        background-color: rgba(0, 0, 0, 0.1);
+        margin: 2px;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10px;
+        padding: 0.75rem 1rem;
+        width: 100%;
+        text-align: left;
+        border: none;
+        color: #fff;
+        font-size: 1rem;
+        cursor: pointer;
       }
-      function showTalkDetail() {
-        window.location.href = "talk_detail";
+
+      #menu button:hover {
+        background-color: rgba(55, 65, 81, 0.7);
       }
-    </script>
+    </style>
   </head>
-  <body
-    class="flex items-center justify-center min-h-screen bg-gray-900 text-white"
-  >
-    <div class="p-8 bg-gray-800 rounded-2xl shadow-xl text-center w-96">
-      <div class="text-3xl font-bold mb-4" id="level">話者Lv:</div>
-      <div class="text-xl font-semibold mb-6" id="Harassment_bool">
-        素晴らしい
-      </div>
-      <div class="text-xl font-semibold mb-6" id="Harassment_type">
-        素晴らしい
-      </div>
-      <div class="text-xl font-semibold mb-6" id="Harassment_loop">
-        素晴らしい
-      </div>
-      <div class="text-xl font-semibold mb-6" id="Harassment_comfort">
-        素晴らしい
-      </div>
-      <div class="text-xl font-semibold mb-6" id="Harassment_volume">
-        素晴らしい
-      </div>
-      <!--
-      <div class="space-y-2">
-        <div class="bar-container flex items-center">
-          <span class="bar-label w-20 mr-2"></span>
-          <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
-            <div class="bar-fill h-full bg-blue-500"></div>
-          </div>
-        </div>
-        <div class="bar-container flex items-center">
-          <span class="bar-label w-20 mr-2"></span>
-          <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
-            <div class="bar-fill h-full bg-orange-400"></div>
-          </div>
-        </div>
-        <div class="bar-container flex items-center">
-          <span class="bar-label w-20 mr-2"></span>
-          <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
-            <div class="bar-fill h-full bg-blue-500"></div>
-          </div>
-        </div>
-        <div class="bar-container flex items-center">
-          <span class="bar-label w-20 mr-2"></span>
-          <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
-            <div class="bar-fill h-full bg-orange-400"></div>
-          </div>
-        </div>
-        <div class="bar-container flex items-center">
-          <span class="bar-label w-20 mr-2"></span>
-          <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
-            <div class="bar-fill h-full bg-red-500"></div>
-          </div>
-        </div>
-      </div>
-      -->
+  <body>
+    <div class="main-content relative">
+      <!-- Title -->
+      <div class="main-title">会話フィードバック</div>
 
-      <div class="flex justify-center space-x-4 mt-6">
+      <!-- Hamburger Menu -->
+      <div class="absolute top-4 left-4">
         <button
-          onclick="showRecorder()"
-          class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700"
+          id="menuButton"
+          class="text-white text-2xl focus:outline-none"
+          onclick="toggleMenu(event)"
         >
-          録音画面を表示
+          <i class="fas fa-bars"></i>
         </button>
-        <button
-          onclick="showTalkDetail()"
-          class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700"
+
+        <!-- Menu Content -->
+        <div
+          id="menu"
+          class="absolute top-0 left-0 h-full w-64 bg-gray-800 text-white transform -translate-x-full transition-transform duration-300 ease-in-out opacity-0 visibility-hidden"
         >
-          会話詳細を表示
-        </button>
+          <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
+          <button onclick="showUserRegister()">
+            <i class="fas fa-user-plus"></i> メンバーを追加
+          </button>
+          <button onclick="showRecorder()">
+            <i class="fas fa-microphone"></i> 録音画面を表示
+          </button>
+          <button onclick="showResults()">
+            <i class="fas fa-chart-bar"></i> フィードバックを表示
+          </button>
+          <button onclick="showTalkDetail()">
+            <i class="fas fa-comments"></i> 会話詳細を表示
+          </button>
+          <button onclick="resetAction()">
+            <i class="fas fa-redo"></i> リセット
+          </button>
+          <button onclick="toggleMenu(event)">
+            <i class="fas fa-times"></i> 閉じる
+          </button>
+        </div>
+      </div>
+
+      <!-- Feedback Details -->
+      <div class="text-xl font-semibold mb-6" id="level">話者Lv:</div>
+      <div class="text-lg mb-2" id="Harassment_bool">ハラスメントの有無:</div>
+      <div class="text-lg mb-2" id="Harassment_type">ハラスメントの種類:</div>
+      <div class="text-lg mb-2" id="Harassment_loop">繰り返しの程度:</div>
+      <div class="text-lg mb-2" id="Harassment_comfort">会話の心地よさ:</div>
+      <div class="text-lg mb-2" id="Harassment_volume">
+        非難またはハラスメントの程度:
       </div>
     </div>
+
+    <script src="{{ url_for('static', filename='menu.js') }}"></script>
   </body>
 </html>