Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

rein0421 commited on 15 days ago

Commit

d7254d9

verified ·

1 Parent(s): 85548df

Upload userRegister.html

Browse files

Files changed (1) hide show

templates/userRegister.html +90 -186

templates/userRegister.html CHANGED Viewed

@@ -1,186 +1,90 @@
-<!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>

+<!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>