Hugging Face's logo

Spaces:
rein0421
/
Justalk
Sleeping

App Files Community
4
rein0421 commited on
Commit
fe1ee14
·
verified ·
1 Parent(s): ad089ef

Upload 2 files

Browse files
Files changed (2) hide show
  1. feedback.html +67 -0
  2. index (1).html +78 -0
feedback.html ADDED
@@ -0,0 +1,67 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>会話フィードバック画面</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ height: 100vh;
14
+ margin: 0;
15
+ }
16
+ .card {
17
+ border: 2px solid #000;
18
+ border-radius: 20px;
19
+ padding: 20px;
20
+ width: 300px;
21
+ text-align: center;
22
+ }
23
+ .level {
24
+ font-size: 24px;
25
+ font-weight: bold;
26
+ }
27
+ .message {
28
+ margin: 10px 0;
29
+ }
30
+ .bar {
31
+ height: 20px;
32
+ margin: 5px 0;
33
+ background-color: lightgray;
34
+ border-radius: 5px;
35
+ }
36
+ .bar-fill {
37
+ height: 100%;
38
+ border-radius: 5px;
39
+ }
40
+ </style>
41
+ <script>
42
+ function getMessage(level) {
43
+ if (level < 20) return "やばい";
44
+ if (level < 40) return "気をつけよう";
45
+ if (level < 60) return "まずまずですね";
46
+ if (level < 80) return "がんばれあとちょっと";
47
+ return "素晴らしい";
48
+ }
49
+ window.onload = function() {
50
+ const level = 85;
51
+ const message = getMessage(level);
52
+ document.getElementById("message").innerText = message;
53
+ };
54
+ </script>
55
+ </head>
56
+ <body>
57
+ <div class="card">
58
+ <div class="level">話者Lv: 85</div>
59
+ <div class="message" id="message">素晴らしい</div>
60
+ <div class="bar"><div class="bar-fill" style="width: 80%; background-color: lightblue;"></div></div>
61
+ <div class="bar"><div class="bar-fill" style="width: 50%; background-color: peachpuff;"></div></div>
62
+ <div class="bar"><div class="bar-fill" style="width: 60%; background-color: lightblue;"></div></div>
63
+ <div class="bar"><div class="bar-fill" style="width: 100%; background-color: peachpuff;"></div></div>
64
+ <div class="bar"><div class="bar-fill" style="width: 30%; background-color: lightcoral;"></div></div>
65
+ </div>
66
+ </body>
67
+ </html>
index (1).html ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Voice Recorder Interface</title>
7
+ <style>
8
+ body {
9
+ display: flex;
10
+ flex-direction: column;
11
+ justify-content: center;
12
+ align-items: center;
13
+ height: 100vh;
14
+ margin: 0;
15
+ background-color: #121212;
16
+ color: white;
17
+ }
18
+ .chart {
19
+ width: 300px;
20
+ height: 300px;
21
+ margin-bottom: 20px;
22
+ }
23
+ .record-button {
24
+ position: fixed;
25
+ bottom: 30px;
26
+ width: 80px;
27
+ height: 80px;
28
+ background-color: #d32f2f;
29
+ border-radius: 50%;
30
+ border: none;
31
+ cursor: pointer;
32
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
33
+ }
34
+ </style>
35
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
36
+ </head>
37
+ <body>
38
+ <div class="chart">
39
+ <canvas id="speechChart"></canvas>
40
+ </div>
41
+ <button class="record-button" onclick="toggleRecording()"></button>
42
+ <script>
43
+ let isRecording = false;
44
+ function toggleRecording() {
45
+ isRecording = !isRecording;
46
+ if (isRecording) {
47
+ alert('Recording started');
48
+ } else {
49
+ alert('Recording stopped');
50
+ }
51
+ }
52
+
53
+ const ctx = document.getElementById('speechChart').getContext('2d');
54
+ const chart = new Chart(ctx, {
55
+ type: 'doughnut',
56
+ data: {
57
+ labels: ['自分', '他の人'],
58
+ datasets: [{
59
+ data: [30, 70],
60
+ backgroundColor: ['#4caf50', '#757575'],
61
+ }],
62
+ },
63
+ options: {
64
+ responsive: true,
65
+ plugins: {
66
+ legend: {
67
+ display: true,
68
+ position: 'bottom',
69
+ labels: {
70
+ color: 'white'
71
+ }
72
+ }
73
+ }
74
+ }
75
+ });
76
+ </script>
77
+ </body>
78
+ </html>