JusTalk_compleate

Sleeping

App Files Files Community

mizzzuno commited on Mar 14

Commit

b412841

verified ·

1 Parent(s): 2e62682

Upload 2 files

Browse files

Files changed (2) hide show

feedback.html +93 -0
index.html +96 -0

feedback.html ADDED Viewed

	@@ -0,0 +1,93 @@

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>会話フィードバック画面</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        .card {
+            border: 2px solid #000;
+            border-radius: 20px;
+            padding: 20px;
+            width: 300px;
+            text-align: center;
+        }
+        .level {
+            font-size: 24px;
+            font-weight: bold;
+        }
+        .message {
+            margin: 10px 0;
+        }
+        .bar {
+            height: 20px;
+            margin: 5px 0;
+            background-color: lightgray;
+            border-radius: 5px;
+        }
+        .bar-fill {
+            height: 100%;
+            border-radius: 5px;
+        }
+        .back-button {
+            margin-top: 15px;
+            padding: 8px 16px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .back-button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+    <script>
+        function getMessage(level) {
+            if (level < 20) return "やばい";
+            if (level < 40) return "気をつけよう";
+            if (level < 60) return "まずまずですね";
+            if (level < 80) return "がんばれあとちょっと";
+            return "素晴らしい";
+        }
+        function goBack() {
+            history.back();
+        }
+        window.onload = function() {
+            const level = 73; // レベル値
+            const percentages = [80, 50, 60, 100, 30]; // 各バーのパーセンテージ
+            const message = getMessage(level);
+            document.getElementById("level").innerText = `話者Lv: ${level}`;
+            document.getElementById("message").innerText = message;
+            const barElements = document.getElementsByClassName("bar-fill");
+            for (let i = 0; i < barElements.length; i++) {
+                barElements[i].style.width = `${percentages[i]}%`;
+            }
+        };
+    </script>
+</head>
+<body>
+    <div class="card">
+        <div class="level" id="level">話者Lv: 85</div>
+        <div class="message" id="message">素晴らしい</div>
+        <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
+        <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
+        <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
+        <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
+        <div class="bar"><div class="bar-fill" style="background-color: lightcoral;"></div></div>
+        <button class="back-button" onclick="goBack()">前の画面に戻る</button>
+    </div>
+</body>
+</html>

index.html ADDED Viewed

	@@ -0,0 +1,96 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voice Recorder Interface</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #121212;
+            color: white;
+        }
+        .chart {
+            width: 300px;
+            height: 300px;
+            margin-bottom: 20px;
+        }
+        .record-button {
+            position: fixed;
+            bottom: 30px;
+            width: 80px;
+            height: 80px;
+            background-color: #d32f2f;
+            border-radius: 50%;
+            border: none;
+            cursor: pointer;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+        }
+        .result-button {
+            margin-top: 20px;
+            padding: 10px 20px;
+            background-color: #4caf50;
+            border: none;
+            border-radius: 5px;
+            color: white;
+            cursor: pointer;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+        }
+        .result-button:hover {
+            background-color: #388e3c;
+        }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <div class="chart">
+        <canvas id="speechChart"></canvas>
+    </div>
+    <button class="record-button" onclick="toggleRecording()"></button>
+    <button class="result-button" onclick="showResults()">結果を表示</button>
+    <script>
+        let isRecording = false;
+        function toggleRecording() {
+            isRecording = !isRecording;
+            if (isRecording) {
+                alert('Recording started');
+            } else {
+                alert('Recording stopped');
+            }
+        }
+        function showResults() {
+            window.location.href = 'feedback.html';
+        }
+        const ctx = document.getElementById('speechChart').getContext('2d');
+        const chart = new Chart(ctx, {
+            type: 'doughnut',
+            data: {
+                labels: ['自分', '他の人'],
+                datasets: [{
+                    data: [30, 70],
+                    backgroundColor: ['#4caf50', '#757575'],
+                }],
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    legend: {
+                        display: true,
+                        position: 'bottom',
+                        labels: {
+                            color: 'white'
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+</html>