Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

mizzzuno commited on Mar 23

Commit

7c30752

verified ·

1 Parent(s): 492e20b

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +219 -322

templates/index.html CHANGED Viewed

@@ -1,322 +1,219 @@
-<!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);
-      }
-      /* Member Chips Style */
-      .member-chips {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 0.5rem;
-        margin-bottom: 1.5rem;
-      }
-      .member-chip {
-        background: rgba(255, 255, 255, 0.2);
-        border-radius: 999px;
-        padding: 0.4rem 0.8rem;
-        font-size: 0.8rem;
-        color: white;
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-      .member-avatar {
-        width: 1.5rem;
-        height: 1.5rem;
-        background: rgba(255, 255, 255, 0.3);
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 0.75rem;
-      }
-    </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="showUserSelect()">
-            <i class="fas fa-users"></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>
-      <!-- Selected Member Chips -->
-      <div class="member-chips" id="memberChips">
-        <!-- Member chips will be dynamically added here -->
-      </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>
-    <script>
-      // 選択されたメンバーの表示を更新する関数
-      function updateSelectedMembers() {
-        // ローカルストレージから選択されたメンバーを取得
-        let selectedUsers = [];
-        try {
-          const stored = localStorage.getItem('selectedUsers');
-          if (stored) {
-            selectedUsers = JSON.parse(stored);
-          }
-        } catch (e) {
-          console.error('選択メンバーの読み込みエラー:', e);
-        }
-        // メンバーチップを表示
-        const memberChipsContainer = document.getElementById('memberChips');
-        memberChipsContainer.innerHTML = '';
-        if (selectedUsers.length === 0) {
-          // メンバーがいない場合の表示
-          const noMembers = document.createElement('div');
-          noMembers.className = 'text-white opacity-50 text-sm';
-          noMembers.textContent = 'メンバーが選択されていません';
-          memberChipsContainer.appendChild(noMembers);
-          return;
-        }
-        // 現在選択されているメンバー数を表示
-        const countChip = document.createElement('div');
-        countChip.className = 'member-chip';
-        countChip.style.backgroundColor = 'rgba(66, 153, 225, 0.5)'; // 青っぽい背景
-        countChip.innerHTML = `<i class="fas fa-users"></i> ${selectedUsers.length}人のメンバーを選択中`;
-        memberChipsContainer.appendChild(countChip);
-        // 各メンバーをチップとして表示
-        selectedUsers.forEach(member => {
-          const chip = document.createElement('div');
-          chip.className = 'member-chip';
-          const avatar = document.createElement('div');
-          avatar.className = 'member-avatar';
-          avatar.textContent = member.substr(0, 1).toUpperCase();
-          chip.appendChild(avatar);
-          chip.appendChild(document.createTextNode(member));
-          memberChipsContainer.appendChild(chip);
-        });
-      }
-      // ページ読み込み時にメンバー表示を更新
-      document.addEventListener('DOMContentLoaded', updateSelectedMembers);
-    </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" type="text/css" href="menu.css" />
+    <link rel="stylesheet" type="text/css" href="main.css" />
+    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
+    <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;
+      }
+      /* Member Chips Style */
+      .member-chips {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.5rem;
+        margin-bottom: 1.5rem;
+      }
+      .member-chip {
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 999px;
+        padding: 0.4rem 0.8rem;
+        font-size: 0.8rem;
+        color: white;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      .member-avatar {
+        width: 1.5rem;
+        height: 1.5rem;
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.75rem;
+      }
+    </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="showUserSelect()">
+            <i class="fas fa-users"></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>
+      <!-- Selected Member Chips -->
+      <div class="member-chips" id="memberChips">
+        <!-- Member chips will be dynamically added here -->
+      </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>
+    <script>
+      // 選択されたメンバーの表示を更新する関数
+      function updateSelectedMembers() {
+        // ローカルストレージから選択されたメンバーを取得
+        let selectedUsers = [];
+        try {
+          const stored = localStorage.getItem("selectedUsers");
+          if (stored) {
+            selectedUsers = JSON.parse(stored);
+          }
+        } catch (e) {
+          console.error("選択メンバーの読み込みエラー:", e);
+        }
+        // メンバーチップを表示
+        const memberChipsContainer = document.getElementById("memberChips");
+        memberChipsContainer.innerHTML = "";
+        if (selectedUsers.length === 0) {
+          // メンバーがいない場合の表示
+          const noMembers = document.createElement("div");
+          noMembers.className = "text-white opacity-50 text-sm";
+          noMembers.textContent = "メンバーが選択されていません";
+          memberChipsContainer.appendChild(noMembers);
+          return;
+        }
+        // 現在選択されているメンバー数を表示
+        const countChip = document.createElement("div");
+        countChip.className = "member-chip";
+        countChip.style.backgroundColor = "rgba(66, 153, 225, 0.5)"; // 青っぽい背景
+        countChip.innerHTML = `<i class="fas fa-users"></i> ${selectedUsers.length}人のメンバーを選択中`;
+        memberChipsContainer.appendChild(countChip);
+        // 各メンバーをチップとして表示
+        selectedUsers.forEach((member) => {
+          const chip = document.createElement("div");
+          chip.className = "member-chip";
+          const avatar = document.createElement("div");
+          avatar.className = "member-avatar";
+          avatar.textContent = member.substr(0, 1).toUpperCase();
+          chip.appendChild(avatar);
+          chip.appendChild(document.createTextNode(member));
+          memberChipsContainer.appendChild(chip);
+        });
+      }
+      // ページ読み込み時にメンバー表示を更新
+      document.addEventListener("DOMContentLoaded", updateSelectedMembers);
+    </script>
+  </body>
+</html>