Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

mizzzuno commited on 29 days ago

Commit

a922c60

verified ·

1 Parent(s): 571295d

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +228 -224

templates/index.html CHANGED Viewed

@@ -1,224 +1,228 @@
-<!DOCTYPE html>
-<html lang="ja">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>JustTalk - Voice Analysis</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.10.0/css/all.css"
-    />
-    <style>
-      /* Custom Chart.js Styles */
-      #speechChart {
-        background-color: rgba(255, 255, 255, 0.05);
-        border-radius: 10px;
-        padding: 10px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-      }
-      /* Record Button Styles */
-      .record-button {
-        width: 90px;
-        height: 90px;
-        background-color: transparent;
-        border-radius: 50%;
-        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);
-        transition: all 0.2s ease;
-      }
-      .record-icon {
-        width: 70px;
-        height: 70px;
-        background-color: #e53e3e;
-        border-radius: 50%;
-        transition: all 0.2s ease;
-      }
-      .recording .record-icon {
-        width: 50px;
-        height: 50px;
-        border-radius: 15%;
-        background-color: #c53030;
-      }
-      .icon i {
-        font-size: 24px;
-      }
-      /* 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);
-      }
-      #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;
-      }
-      #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);
-      }
-      /* Responsive Design */
-      @media (max-width: 640px) {
-        .w-72 {
-          width: 95%;
-        }
-        .h-72 {
-          height: 350px;
-        }
-      }
-      /* 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;
-      }
-      /* 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;
-      }
-      /* 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);
-      }
-      /* 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;
-      }
-      #menuButton:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-    </style>
-  </head>
-  <body onclick="closeMenu(event)">
-    <!-- Main Content Wrapper -->
-    <div class="main-content relative">
-      <!-- Title -->
-      <div class="main-title">JustTalk</div>
-      <!-- Hamburger Menu -->
-      <div class="absolute top-4 left-4">
-        <button
-          id="menuButton"
-          class="text-white text-2xl focus:outline-none"
-          onclick="toggleMenu(event)"
-        >
-          <i class="fas fa-bars"></i>
-        </button>
-        <!-- 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"
-        >
-          <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
-          <button onclick="showUserRegister()">
-            <i class="fas fa-user-plus"></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>
-      <!-- Chart Display -->
-      <div class="chart w-72 h-72 mb-5 mx-auto">
-        <canvas id="speechChart"></canvas>
-      </div>
-      <!-- Record Form -->
-      <form
-        id="recordForm"
-        action="/submit"
-        method="POST"
-        class="flex items-center justify-center space-x-2 w-full sm:w-auto"
-        onsubmit="event.preventDefault();"
-      >
-        <!-- Record Button -->
-        <button
-          type="button"
-          class="record-button"
-          id="recordButton"
-          onclick="toggleRecording()"
-        >
-          <div class="record-icon" id="recordIcon"></div>
-        </button>
-      </form>
-    </div>
-    <script src="{{ url_for('static', filename='process.js') }}"></script>
-  </body>
-</html>

+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JustTalk - Voice Analysis</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.10.0/css/all.css"
+    />
+    <style>
+      /* Custom Chart.js Styles */
+      #speechChart {
+        background-color: rgba(255, 255, 255, 0.05);
+        border-radius: 10px;
+        padding: 10px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      }
+      /* Record Button Styles */
+      .record-button {
+        width: 90px;
+        height: 90px;
+        background-color: transparent;
+        border-radius: 50%;
+        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);
+        transition: all 0.2s ease;
+      }
+      .record-icon {
+        width: 70px;
+        height: 70px;
+        background-color: #e53e3e;
+        border-radius: 50%;
+        transition: all 0.2s ease;
+      }
+      .recording .record-icon {
+        width: 50px;
+        height: 50px;
+        border-radius: 15%;
+        background-color: #c53030;
+      }
+      .icon i {
+        font-size: 24px;
+      }
+      /* 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);
+      }
+      #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;
+      }
+      #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);
+      }
+      /* Responsive Design */
+      @media (max-width: 640px) {
+        .w-72 {
+          width: 95%;
+        }
+        .h-72 {
+          height: 350px;
+        }
+      }
+      /* 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;
+      }
+      /* 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;
+      }
+      /* 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);
+      }
+      /* 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;
+      }
+      #menuButton:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    </style>
+  </head>
+  <body onclick="closeMenu(event)">
+    <!-- Main Content Wrapper -->
+    <div class="main-content relative">
+      <!-- Title -->
+      <div class="main-title">JustTalk</div>
+      <!-- Hamburger Menu -->
+      <div class="absolute top-4 left-4">
+        <button
+          id="menuButton"
+          class="text-white text-2xl focus:outline-none"
+          onclick="toggleMenu(event)"
+        >
+          <i class="fas fa-bars"></i>
+        </button>
+        <!-- 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"
+        >
+          <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>
+      <!-- Chart Display -->
+      <div class="chart w-72 h-72 mb-5 mx-auto">
+        <canvas id="speechChart"></canvas>
+      </div>
+      <!-- Record Form -->
+      <form
+        id="recordForm"
+        action="/submit"
+        method="POST"
+        class="flex items-center justify-center space-x-2 w-full sm:w-auto"
+        onsubmit="event.preventDefault();"
+      >
+        <!-- Record Button -->
+        <button
+          type="button"
+          class="record-button"
+          id="recordButton"
+          onclick="toggleRecording()"
+        >
+          <div class="record-icon" id="recordIcon"></div>
+        </button>
+      </form>
+    </div>
+    <script src="{{ url_for('static', filename='process.js') }}"></script>
+    <script src="{{ url_for('static', filename='menu.js') }}"></script>
+  </body>
+</html>