Hugging Face's logo

Spaces:
Justtalk
/
JusTalk
Running

App Files Community
3
rein0421 commited on
Commit
7c7c907
·
verified ·
1 Parent(s): 828cc8a

Upload 2 files

Browse files
Files changed (1) hide show
  1. static/style.css +128 -128
static/style.css CHANGED
@@ -1,128 +1,128 @@
1
- @charset "UTF-8";
2
- body {
3
- font-family: Arial, sans-serif;
4
- padding: 20px;
5
- background-color: #f4f4f4;
6
- height: 100vh;
7
- display: flex;
8
- justify-content: center;
9
- align-items: center;
10
- }
11
-
12
- h2 {
13
- margin-bottom: 20px;
14
- text-align: center;
15
- }
16
-
17
- a {
18
- text-decoration: none;
19
- color: #000000cc;
20
- }
21
- a:hover {
22
- text-decoration: underline;
23
- }
24
- .container {
25
- max-width: 800px;
26
-
27
- background-color: #fff;
28
- padding: 20px 80px;
29
- border-radius: 8px;
30
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
31
- }
32
-
33
- #transcription {
34
- white-space: pre-wrap;
35
- padding: 10px;
36
- background-color: #e9e9e9;
37
- border-radius: 4px;
38
- margin-bottom: 20px;
39
- max-height: 400px;
40
- overflow-y: auto;
41
- }
42
- button {
43
- margin: 5px;
44
- padding: 10px 10px;
45
- border: none;
46
- border-radius: 4px;
47
- background-color: #007bff;
48
- color: #fff;
49
- cursor: pointer;
50
- }
51
- .history-button {
52
- margin-top: 20px;
53
-
54
- padding: 10px 20px;
55
- background-color: #007bff;
56
- color: white;
57
- border: none;
58
- border-radius: 5px;
59
- cursor: pointer;
60
- }
61
- history-button:hover {
62
- background-color: #0056b3;
63
- }
64
-
65
- .flex {
66
- display: flex;
67
- justify-content: center;
68
- }
69
- .new-person {
70
- text-align: center;
71
- }
72
-
73
- .controls {
74
- display: flex;
75
- flex-direction: column;
76
- align-items: center;
77
- }
78
- .record-button {
79
- width: 80px;
80
- height: 80px;
81
- background-color: transparent;
82
- border-radius: 50%;
83
-
84
- display: flex;
85
- justify-content: center;
86
- align-items: center;
87
- cursor: pointer;
88
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
89
- transition: all 0.2s ease;
90
- }
91
-
92
- .record-icon {
93
- width: 60px;
94
- height: 60px;
95
- background-color: #d32f2f;
96
- border-radius: 50%;
97
- transition: all 0.2s ease;
98
- }
99
-
100
- .recording .record-icon {
101
- width: 40px;
102
- height: 40px;
103
- border-radius: 10%;
104
- }
105
-
106
- .record-p {
107
- border: 2px dashed #0000008c;
108
- }
109
-
110
- .disabled {
111
- background-color: gray;
112
- cursor: not-allowed;
113
- }
114
-
115
- .record-icon.recording {
116
- width: 40px;
117
- height: 40px;
118
- border-radius: 0;
119
- }
120
-
121
- .new-person-right-container {
122
- padding-left: 20px;
123
- }
124
-
125
- .record-container {
126
- display: flex;
127
- justify-content: center;
128
- }
 
1
+ @charset "UTF-8";
2
+ body {
3
+ font-family: Arial, sans-serif;
4
+ padding: 20px;
5
+ background-color: #f4f4f4;
6
+ height: 100vh;
7
+ display: flex;
8
+ justify-content: center;
9
+ align-items: center;
10
+ }
11
+
12
+ h2 {
13
+ margin-bottom: 20px;
14
+ text-align: center;
15
+ }
16
+
17
+ a {
18
+ text-decoration: none;
19
+ color: #000000cc;
20
+ }
21
+ a:hover {
22
+ text-decoration: underline;
23
+ }
24
+ .container {
25
+ max-width: 800px;
26
+
27
+ background-color: #fff;
28
+ padding: 20px 80px;
29
+ border-radius: 8px;
30
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
31
+ }
32
+
33
+ #transcription {
34
+ white-space: pre-wrap;
35
+ padding: 10px;
36
+ background-color: #e9e9e9;
37
+ border-radius: 4px;
38
+ margin-bottom: 20px;
39
+ max-height: 400px;
40
+ overflow-y: auto;
41
+ }
42
+ button {
43
+ margin: 5px;
44
+ padding: 10px 10px;
45
+ border: none;
46
+ border-radius: 4px;
47
+ background-color: #007bff;
48
+ color: #fff;
49
+ cursor: pointer;
50
+ }
51
+ .history-button {
52
+ margin-top: 20px;
53
+
54
+ padding: 10px 20px;
55
+ background-color: #007bff;
56
+ color: white;
57
+ border: none;
58
+ border-radius: 5px;
59
+ cursor: pointer;
60
+ }
61
+ history-button:hover {
62
+ background-color: #0056b3;
63
+ }
64
+
65
+ .flex {
66
+ display: flex;
67
+ justify-content: center;
68
+ }
69
+ .new-person {
70
+ text-align: center;
71
+ }
72
+
73
+ .controls {
74
+ display: flex;
75
+ flex-direction: column;
76
+ align-items: center;
77
+ }
78
+ .record-button {
79
+ width: 80px;
80
+ height: 80px;
81
+ background-color: transparent;
82
+ border-radius: 50%;
83
+
84
+ display: flex;
85
+ justify-content: center;
86
+ align-items: center;
87
+ cursor: pointer;
88
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
89
+ transition: all 0.2s ease;
90
+ }
91
+
92
+ .record-icon {
93
+ width: 60px;
94
+ height: 60px;
95
+ background-color: #d32f2f;
96
+ border-radius: 50%;
97
+ transition: all 0.2s ease;
98
+ }
99
+
100
+ .recording .record-icon {
101
+ width: 40px;
102
+ height: 40px;
103
+ border-radius: 10%;
104
+ }
105
+
106
+ .record-p {
107
+ border: 2px dashed #0000008c;
108
+ }
109
+
110
+ .disabled {
111
+ background-color: gray;
112
+ cursor: not-allowed;
113
+ }
114
+
115
+ .record-icon.recording {
116
+ width: 40px;
117
+ height: 40px;
118
+ border-radius: 0;
119
+ }
120
+
121
+ .new-person-right-container {
122
+ padding-left: 20px;
123
+ }
124
+
125
+ .record-container {
126
+ display: flex;
127
+ justify-content: center;
128
+ }