Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

mizzzuno commited on 26 days ago

Commit

5a7432d

verified ·

1 Parent(s): 1bdcba6

Update templates/userRegister.html

Browse files

Files changed (1) hide show

templates/userRegister.html +186 -90

templates/userRegister.html CHANGED Viewed

@@ -1,90 +1,186 @@
-<!DOCTYPE html>
-<html lang="ja">
-  <head>
-    <meta charset="UTF-8" />
-    <title>ユーザー音声登録</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-      @keyframes pulse-scale {
-        0%,
-        100% {
-          transform: scale(1);
-        }
-        50% {
-          transform: scale(1.1);
-        }
-      }
-      .animate-pulse-scale {
-        animation: pulse-scale 1s infinite;
-      }
-      .record-button {
-        width: 50px;
-        height: 50px;
-        background-color: transparent;
-        border-radius: 50%;
-        border: 2px solid white;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-        transition: all 0.3s ease;
-      }
-      .record-icon {
-        width: 35px;
-        height: 35px;
-        background-color: #d32f2f;
-        border-radius: 50%;
-        transition: all 0.3s ease;
-      }
-      .record-button.recording .record-icon {
-        border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
-      }
-      .recording .record-icon {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-      }
-      @media (max-width: 640px) {
-        .container {
-          padding: 2rem;
-        }
-      }
-    </style>
-  </head>
-  <body
-    class="bg-gray-800 text-gray-100 dark:bg-gray-900 dark:text-gray-300 transition-colors"
-  >
-    <div class="container mx-auto p-5 max-w-full sm:max-w-2xl">
-      <div id="people-list" class="space-y-4"></div>
-      <button
-        id="add-btn"
-        class="mt-6 px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
-      >
-        メンバーを追加
-      </button>
-      <!-- 録音画面に戻るボタン -->
-      <button
-        id="backButton"
-        onclick="showRecorder()"
-        class="mt-6 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
-      >
-        録音画面に戻る
-      </button>
-    </div>
-    <script src="{{ url_for('static', filename='register_record.js') }}"></script>
-    <script>
-      function showRecorder() {
-        // 録音画面へ遷移
-        window.location.href = "index";
-      }
-    </script>
-    <script>
-    </script>
-  </body>
-</html>

+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ユーザー音声登録</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
+    <style>
+      @keyframes pulse-scale {
+        0%,
+        100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.1);
+        }
+      }
+      .animate-pulse-scale {
+        animation: pulse-scale 1s infinite;
+      }
+      /* Record Button Styles */
+      .record-button {
+        width: 50px;
+        height: 50px;
+        background-color: transparent;
+        border-radius: 50%;
+        border: 2px solid white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+        transition: all 0.3s ease;
+      }
+      .record-icon {
+        width: 35px;
+        height: 35px;
+        background-color: #d32f2f;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+      }
+      .record-button.recording .record-icon {
+        background-color: #f44336; /* 録音中は赤色 */
+        border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
+      }
+      .recording .record-icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+      }
+      /* 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);
+      }
+      /* Buttons */
+      .action-button {
+        margin-top: 1rem;
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        width: 100%;
+      }
+      .action-button:hover {
+        background-color: rgba(55, 65, 81, 0.7);
+      }
+      .back-button {
+        background-color: #607d8b; /* 落ち着いたグレー */
+        color: white;
+      }
+      .add-button {
+        background-color: #4caf50; /* 落ち着いた緑色 */
+        color: white;
+      }
+      /* Disabled State */
+      .disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      /* Responsive Design */
+      @media (max-width: 640px) {
+        .main-content {
+          padding: 1.5rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Main Content Wrapper -->
+    <div class="main-content relative">
+      <!-- Title -->
+      <div class="main-title">ユーザー音声登録</div>
+      <!-- User List -->
+      <div id="people-list" class="space-y-4"></div>
+      <!-- Add Button -->
+      <button id="add-btn" class="action-button add-button">
+        <i class="fas fa-user-plus"></i> メンバーを追加
+      </button>
+      <!-- Back Button -->
+      <button
+        id="backButton"
+        onclick="goBack()"
+        class="action-button back-button"
+      >
+        戻る
+      </button>
+    </div>
+    <script src="{{ url_for('static', filename='register_record.js') }}"></script>
+    <script>
+      // 前の画面に戻る
+      function goBack() {
+        window.history.back();
+      }
+      // Add user function
+      function addUser() {
+        const userName = prompt("ユーザー名を入力してください");
+        if (userName) {
+          const userList = document.getElementById("people-list");
+          const userDiv = document.createElement("div");
+          userDiv.classList.add(
+            "bg-gray-700",
+            "p-4",
+            "rounded-lg",
+            "text-white",
+            "flex",
+            "justify-between",
+            "items-center"
+          );
+          userDiv.innerHTML = `
+            <span>${userName}</span>
+            <button class="record-button" aria-label="音声録音開始">
+              <div class="record-icon"></div>
+            </button>
+          `;
+          userDiv
+            .querySelector(".record-button")
+            .addEventListener("click", handleRecording);
+          userList.appendChild(userDiv);
+        }
+      }
+      document.getElementById("add-btn").addEventListener("click", addUser);
+    </script>
+    <script src="{{ url_for('static', filename='menu.js') }}"></script>
+  </body>
+</html>