Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

rein0421 commited on Mar 22

Commit

f024ed2

verified ·

1 Parent(s): 27d15cb

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +156 -80

templates/index.html CHANGED Viewed

@@ -3,26 +3,162 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Voice Recorder Interface</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"
     />
   </head>
-  <body
-    class="flex items-center justify-center h-screen bg-gray-900 text-white"
-    onclick="closeMenu(event)"
-  >
-    <!-- 全体を囲む枠 -->
-    <div
-      class="border-4 border-gray-400 p-8 rounded-lg w-full sm:w-auto relative"
-    >
-      <!-- タイトル -->
-      <div class="text-center text-4xl font-bold mb-5">JustTalk</div>
-      <!-- ハンバーガーメニュー -->
       <div class="absolute top-4 right-4">
         <button
           id="menuButton"
@@ -32,7 +168,7 @@
           <i class="fas fa-bars"></i>
         </button>
-        <!-- メニューの本体 -->
         <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"
@@ -71,12 +207,12 @@
         </div>
       </div>
-      <!-- チャート表示部 -->
-      <div class="chart w-72 h-72 mb-5">
         <canvas id="speechChart"></canvas>
       </div>
-      <!-- 録音フォーム -->
       <form
         id="recordForm"
         action="/submit"
@@ -84,7 +220,7 @@
         class="flex items-center justify-center space-x-2 w-full sm:w-auto"
         onsubmit="event.preventDefault();"
       >
-        <!-- 録音ボタン -->
         <button
           type="button"
           class="record-button"
@@ -96,66 +232,6 @@
       </form>
     </div>
-    <style>
-      .record-button {
-        width: 80px;
-        height: 80px;
-        background-color: transparent;
-        border-radius: 50%;
-        border: 4px 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.2s ease;
-      }
-      .record-icon {
-        width: 60px;
-        height: 60px;
-        background-color: #d32f2f;
-        border-radius: 50%;
-        transition: all 0.2s ease;
-      }
-      .recording .record-icon {
-        width: 40px;
-        height: 40px;
-        border-radius: 10%;
-      }
-      .icon i {
-        font-size: 20px;
-      }
-      /* ハンバーガーメニュー */
-      #menu {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 10;
-        transform: translateX(100%); /* 初期状態で画面外 */
-        visibility: hidden; /* 非表示 */
-        opacity: 0; /* 非表示 */
-        background-color: rgba(31, 41, 55, 1); /* 不透明な背景色 */
-        transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
-          opacity 0.3s ease-in-out; /* スライド後に表示 */
-      }
-      #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; /* すぐに表示 */
-      }
-      /* レスポンシブデザイン */
-      @media (max-width: 640px) {
-        .w-72 {
-          width: 90%;
-        }
-        .h-72 {
-          height: 300px;
-        }
-      }
-    </style>
-<script src="{{ url_for('static', filename='process.js') }}"></script>
   </body>
-</html>

   <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); /* Subtle background for the chart */
+        border-radius: 10px;
+        padding: 10px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
+      }
+      /* Record Button Styles */
+      .record-button {
+        width: 90px; /* Slightly larger */
+        height: 90px; /* Slightly larger */
+        background-color: transparent;
+        border-radius: 50%;
+        border: 5px solid white; /* Thicker border */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5); /* Deeper shadow */
+        transition: all 0.2s ease;
+      }
+      .record-icon {
+        width: 70px; /* Slightly larger */
+        height: 70px; /* Slightly larger */
+        background-color: #e53e3e; /* Brighter red */
+        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 */
+      }
+      .icon i {
+        font-size: 24px; /* Larger icon */
+      }
+      /* Hamburger Menu Styles */
+      #menu {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 10;
+        transform: translateX(100%);
+        visibility: hidden;
+        opacity: 0;
+        background-color: rgba(31, 41, 55, 0.95); /* Slightly transparent */
+        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 */
+      }
+      #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;
+      }
+      #menu button:hover {
+        background-color: rgba(55, 65, 81, 0.7); /* Darker on hover */
+      }
+      /* Responsive Design */
+      @media (max-width: 640px) {
+        .w-72 {
+          width: 95%; /* Take up more space on small screens */
+        }
+        .h-72 {
+          height: 350px; /* Taller on small screens */
+        }
+      }
+      /* Main Container */
+      body {
+        background: linear-gradient(135deg, #2c3e50, #1f2937); /* Gradient background */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh; /* Ensure full viewport height */
+        font-family: 'Arial', sans-serif; /* Modern font */
+      }
+      /* Main Content Wrapper */
+      .main-content {
+        border: 5px solid rgba(255, 255, 255, 0.2); /* Subtle border */
+        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 */
+        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); /* Text shadow */
+      }
+      /* Hamburger Menu Button */
+      #menuButton {
+        background-color: rgba(255, 255, 255, 0.1); /* Light background */
+        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); /* 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;
+      }
+    </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 right-4">
         <button
           id="menuButton"
           <i class="fas fa-bars"></i>
         </button>
+        <!-- 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"
         </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"
         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"
       </form>
     </div>
+    <script src="{{ url_for('static', filename='process.js') }}"></script>
   </body>
+</html>