Upload index.html

templates/index.html

@@ -13,59 +13,60 @@
     <style>
       /* Custom Chart.js Styles */
       #speechChart {
-        background-color: rgba(255, 255, 255, 0.05); /* Subtle background for the chart */
+        background-color: rgba(255, 255, 255, 0.05);
         border-radius: 10px;
         padding: 10px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       }
 
       /* Record Button Styles */
       .record-button {
-        width: 90px; /* Slightly larger */
-        height: 90px; /* Slightly larger */
+        width: 90px;
+        height: 90px;
         background-color: transparent;
         border-radius: 50%;
-        border: 5px solid white; /* Thicker border */
+        border: 5px solid white;
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: pointer;
-        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5); /* Deeper shadow */
+        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
         transition: all 0.2s ease;
       }
 
       .record-icon {
-        width: 70px; /* Slightly larger */
-        height: 70px; /* Slightly larger */
-        background-color: #e53e3e; /* Brighter red */
+        width: 70px;
+        height: 70px;
+        background-color: #e53e3e;
         border-radius: 50%;
         transition: all 0.2s ease;
       }
 
       .recording .record-icon {
-        width: 50px; /* Slightly larger */
-        height: 50px; /* Slightly larger */
-        border-radius: 15%; /* More rounded square */
-        background-color: #c53030; /* Darker red when recording */
+        width: 50px;
+        height: 50px;
+        border-radius: 15%;
+        background-color: #c53030;
       }
 
       .icon i {
-        font-size: 24px; /* Larger icon */
+        font-size: 24px;
       }
 
       /* Hamburger Menu Styles */
       #menu {
         position: absolute;
         top: 0;
-        right: 0;
+        left: 0;
         z-index: 10;
-        transform: translateX(100%);
+        transform: translateX(-100%);
         visibility: hidden;
         opacity: 0;
-        background-color: rgba(31, 41, 55, 0.95); /* Slightly transparent */
+        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); /* Add a blur effect */
+        backdrop-filter: blur(10px);
+        border-right: 1px solid rgba(255, 255, 255, 0.2);
       }
 
       #menu.open {
@@ -78,40 +79,54 @@
 
       #menu button {
         transition: background-color 0.2s ease;
+        background-color: rgba(0, 0, 0, 0.1); /* 変更点: 透明度を 10% に変更 */
+        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;
       }
 
       #menu button:hover {
-        background-color: rgba(55, 65, 81, 0.7); /* Darker on hover */
+        background-color: rgba(55, 65, 81, 0.7);
       }
 
       /* Responsive Design */
       @media (max-width: 640px) {
         .w-72 {
-          width: 95%; /* Take up more space on small screens */
+          width: 95%;
         }
         .h-72 {
-          height: 350px; /* Taller on small screens */
+          height: 350px;
         }
       }
       /* Main Container */
       body {
-        background: linear-gradient(135deg, #2c3e50, #1f2937); /* Gradient background */
+        background: linear-gradient(135deg, #2c3e50, #1f2937);
         display: flex;
         align-items: center;
         justify-content: center;
-        min-height: 100vh; /* Ensure full viewport height */
-        font-family: 'Arial', sans-serif; /* Modern font */
+        min-height: 100vh;
+        font-family: 'Arial', sans-serif;
       }
 
       /* Main Content Wrapper */
       .main-content {
-        border: 5px solid rgba(255, 255, 255, 0.2); /* Subtle border */
+        border: 5px solid rgba(255, 255, 255, 0.2);
         padding: 2rem;
         border-radius: 1rem;
-        width: 90%; /* Responsive width */
-        max-width: 500px; /* Maximum width */
-        background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); /* Stronger shadow */
+        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;
       }
 
@@ -121,12 +136,12 @@
         font-weight: bold;
         margin-bottom: 1.5rem;
         color: #fff;
-        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow */
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
       }
 
       /* Hamburger Menu Button */
       #menuButton {
-        background-color: rgba(255, 255, 255, 0.1); /* Light background */
+        background-color: rgba(255, 255, 255, 0.1);
         border: none;
         border-radius: 50%;
         padding: 0.5rem;
@@ -135,20 +150,7 @@
       }
 
       #menuButton:hover {
-        background-color: rgba(255, 255, 255, 0.2); /* Darker on hover */
-      }
-
-      /* Menu Items */
-      #menu button {
-        display: block;
-        width: 100%;
-        padding: 0.75rem 1rem;
-        text-align: left;
-        border: none;
-        background-color: transparent;
-        color: #fff;
-        font-size: 1rem;
-        cursor: pointer;
+        background-color: rgba(255, 255, 255, 0.2);
       }
     </style>
   </head>
@@ -159,7 +161,7 @@
       <div class="main-title">JustTalk</div>
 
       <!-- Hamburger Menu -->
-      <div class="absolute top-4 right-4">
+      <div class="absolute top-4 left-4">
         <button
           id="menuButton"
           class="text-white text-2xl focus:outline-none"
@@ -171,38 +173,23 @@
         <!-- Menu Content -->
         <div
           id="menu"
-          class="absolute top-0 right-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"
+          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"
         >
           <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
-          <button
-            onclick="showUserRegister()"
-            class="block px-4 py-2 text-sm hover:bg-gray-700"
-          >
-            メンバーを追加
+          <button onclick="showUserRegister()">
+            <i class="fas fa-user-plus"></i> メンバーを追加
           </button>
-          <button
-            onclick="showResults()"
-            class="block px-4 py-2 text-sm hover:bg-gray-700"
-          >
-            フィードバックを表示
+          <button onclick="showResults()">
+            <i class="fas fa-chart-bar"></i> フィードバックを表示
           </button>
-          <button
-            onclick="showTalkdetail()"
-            class="block px-4 py-2 text-sm hover:bg-gray-700"
-          >
-            会話詳細を表示
+          <button onclick="showTalkdetail()">
+            <i class="fas fa-comments"></i> 会話詳細を表示
           </button>
-          <button
-            onclick="resetAction()"
-            class="block px-4 py-2 text-sm hover:bg-gray-700"
-          >
-            リセット
+          <button onclick="resetAction()">
+            <i class="fas fa-redo"></i> リセット
           </button>
-          <button
-            onclick="toggleMenu(event)"
-            class="block px-4 py-2 text-sm hover:bg-gray-700"
-          >
-            閉じる
+          <button onclick="toggleMenu(event)">
+            <i class="fas fa-times"></i> 閉じる
           </button>
         </div>
       </div>