민병수 / Voicoding

Go to a project
Toggle navigation Toggle navigation pinning
천현우
8a6e6938 2 parents 3420fdd0 3ef3e13b

Merge branch 'main' of http://khuhub.khu.ac.kr/2019102168/Voicoding into main

Expand all
Inline Side-by-side
Showing 12 changed files with 246 additions and 13 deletions
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
2 --text-color:#fffde7; 2 --text-color:#fffde7;
3 --background-color:#ff94c2; 3 --background-color:#ff94c2;
4 --accent-color:#ba2d65; 4 --accent-color:#ba2d65;
5 + --output-color:#ff7043;
6 + --output-accent-color:#c63f17;
5 } 7 }
6 8
7 body{ 9 body{
...@@ -13,7 +15,7 @@ a{ ...@@ -13,7 +15,7 @@ a{
13 color:var(--text-color); 15 color:var(--text-color);
14 16
15 } 17 }
16 -.menu{ 18 +.voi_menu{
17 display:flex; 19 display:flex;
18 justify-content:space-between; 20 justify-content:space-between;
19 align-items:center; 21 align-items:center;
...@@ -23,10 +25,12 @@ a{ ...@@ -23,10 +25,12 @@ a{
23 .menu_bar_content li:hover{ 25 .menu_bar_content li:hover{
24 background-color:var(--accent-color); 26 background-color:var(--accent-color);
25 border-radius: 4px; 27 border-radius: 4px;
28 + color:var(--text-color);
26 } 29 }
27 .menu_bar_icons li:hover{ 30 .menu_bar_icons li:hover{
28 background-color:var(--accent-color); 31 background-color:var(--accent-color);
29 border-radius: 4px; 32 border-radius: 4px;
33 + color:var(--text-color);
30 } 34 }
31 .menu_bar_logo{ 35 .menu_bar_logo{
32 font-size: 20px; 36 font-size: 20px;
...@@ -35,6 +39,9 @@ a{ ...@@ -35,6 +39,9 @@ a{
35 .menu_bar_logo i{ 39 .menu_bar_logo i{
36 color:var(--accent-color); 40 color:var(--accent-color);
37 } 41 }
42 +.basic:hover{
43 + color:var(--text-color);
44 +}
38 .menu_bar_content{ 45 .menu_bar_content{
39 display:flex; 46 display:flex;
40 list-style: none; 47 list-style: none;
...@@ -52,13 +59,17 @@ a{ ...@@ -52,13 +59,17 @@ a{
52 padding: 8px 12px; 59 padding: 8px 12px;
53 } 60 }
54 .menu_toggle{ 61 .menu_toggle{
62 + color:var(--text-color);
55 display: none; 63 display: none;
56 position: absolute; 64 position: absolute;
57 right:32px; 65 right:32px;
58 font-size: 24px; 66 font-size: 24px;
59 } 67 }
68 +.menu_toggle:hover{
69 + color:var(--text-color);
70 +}
60 @media screen and (max-width: 500px) { 71 @media screen and (max-width: 500px) {
61 - .menu{ 72 + .voi_menu{
62 flex-direction: column; 73 flex-direction: column;
63 align-items: flex-start; 74 align-items: flex-start;
64 padding: 8px 24px; 75 padding: 8px 24px;
...@@ -80,6 +91,7 @@ a{ ...@@ -80,6 +91,7 @@ a{
80 } 91 }
81 .menu_toggle{ 92 .menu_toggle{
82 display: block; 93 display: block;
94 + color:var(--text-color);
83 } 95 }
84 .menu_bar_content.active, 96 .menu_bar_content.active,
85 .menu_bar_icons.active{ 97 .menu_bar_icons.active{
...@@ -87,25 +99,55 @@ a{ ...@@ -87,25 +99,55 @@ a{
87 } 99 }
88 } 100 }
89 button{ 101 button{
90 - background-color:#60ad5e; 102 + background-color:var(--output-color);
91 border:none; 103 border:none;
92 color:var(--text-color); 104 color:var(--text-color);
93 font-size:50px; 105 font-size:50px;
94 - padding:12px 24px 24px 24px; 106 + padding: 24px;
95 border-radius: 4px; 107 border-radius: 4px;
96 } 108 }
97 button:hover{ 109 button:hover{
98 - background-color:#005005; 110 + background-color:var(--output-accent-color);
99 border-radius: 4px; 111 border-radius: 4px;
100 } 112 }
101 .controls{ 113 .controls{
102 - padding:12px 24px;
103 height:70px; 114 height:70px;
104 font-size:100px; 115 font-size:100px;
105 display:flex; 116 display:flex;
106 justify-content:space-around; 117 justify-content:space-around;
107 border-radius:4px; 118 border-radius:4px;
119 + margin: 23px;
120 +}
121 +#output{
122 + margin:20px;
123 + display:flex;
124 + align-items:center;
125 + height:700px;
126 + background-color:rgba(0,0,0,.87);
127 + color:var(--text-color);
108 } 128 }
109 #recordButton{ 129 #recordButton{
110 - 130 + line-height: 22px;
131 + font-size:50px;
132 +}
133 +#transcribeButton{
134 + line-height: 22px;
135 + font-size:50px;
136 +}
137 +.output_bar{
138 + display:flex;
139 + justify-content:center;
140 + color:black;
141 + margin: 20px;
142 + font-size:100px;
143 +}
144 +.basic{
145 + color:var(--text-color);
146 + font-size:20px;
147 +}
148 +.fas.fa-arrow-circle-down{
149 + color:var(--background-color);
150 + font-size:70px;
151 + display:block;
152 + text-align:center;
111 } 153 }
...\ No newline at end of file ...\ No newline at end of file
......
This diff is collapsed. Click to expand it.
...@@ -13,7 +13,7 @@ a{ ...@@ -13,7 +13,7 @@ a{
13 color:var(--text-color); 13 color:var(--text-color);
14 14
15 } 15 }
16 -.menu{ 16 +.voi_menu{
17 display:flex; 17 display:flex;
18 justify-content:space-between; 18 justify-content:space-between;
19 align-items:center; 19 align-items:center;
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
12 <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet"> 12 <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
13 </head> 13 </head>
14 <body> 14 <body>
15 - <nav class="menu"> 15 + <nav class="voi_menu">
16 <div class="menu_bar_logo"> 16 <div class="menu_bar_logo">
17 <i class="fas fa-microphone-alt"></i> 17 <i class="fas fa-microphone-alt"></i>
18 <a href="Voico_Home.html">Voicoding</a> 18 <a href="Voico_Home.html">Voicoding</a>
......
...@@ -13,7 +13,7 @@ a{ ...@@ -13,7 +13,7 @@ a{
13 color:var(--text-color); 13 color:var(--text-color);
14 14
15 } 15 }
16 -.menu{ 16 +.voi_menu{
17 display:flex; 17 display:flex;
18 justify-content:space-between; 18 justify-content:space-between;
19 align-items:center; 19 align-items:center;
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
12 <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet"> 12 <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
13 </head> 13 </head>
14 <body> 14 <body>
15 - <nav class="menu"> 15 + <nav class="voi_menu">
16 <div class="menu_bar_logo"> 16 <div class="menu_bar_logo">
17 <i class="fas fa-microphone-alt"></i> 17 <i class="fas fa-microphone-alt"></i>
18 <a href="Voico_Home.html">Voicoding</a> 18 <a href="Voico_Home.html">Voicoding</a>
......
...@@ -4,6 +4,7 @@ const recordButton = document.getElementById("recordButton"); ...@@ -4,6 +4,7 @@ const recordButton = document.getElementById("recordButton");
4 const transcribeButton = document.getElementById("transcribeButton"); 4 const transcribeButton = document.getElementById("transcribeButton");
5 recordButton.addEventListener("click", startRecording); 5 recordButton.addEventListener("click", startRecording);
6 transcribeButton.addEventListener("click", transcribeText); 6 transcribeButton.addEventListener("click", transcribeText);
7 +let cnt = 0;
7 function startRecording() { 8 function startRecording() {
8 let constraints = { audio: true, video:false } 9 let constraints = { audio: true, video:false }
9 recordButton.disabled = true; 10 recordButton.disabled = true;
...@@ -32,7 +33,7 @@ function uploadSoundData(blob) { ...@@ -32,7 +33,7 @@ function uploadSoundData(blob) {
32 let formData = new FormData(); 33 let formData = new FormData();
33 xhr.onload = function(e) { 34 xhr.onload = function(e) {
34 if(this.readyState === 4) { 35 if(this.readyState === 4) {
35 - document.getElementById("output").innerHTML += '<br><br><strong>Result: </strong>' + JSON.parse(e.target.responseText); 36 + document.getElementById("output").innerHTML += `${cnt++}: ${JSON.parse(e.target.responseText)}<br>`;
36 } 37 }
37 }; 38 };
38 formData.append("audio_data", blob, filename); 39 formData.append("audio_data", blob, filename);
......
1 +body {
2 + background: url(/images/judge0_background.png) no-repeat center center fixed;
3 + -webkit-background-size: cover;
4 + -moz-background-size: cover;
5 + -o-background-size: cover;
6 + background-size: cover;
7 +}
8 +
9 +.ui[class*="left action"].input>.dropdown {
10 + border-radius: 0 .28571429rem .28571429rem 0;
11 +}
12 +
13 +.ui.selection.dropdown {
14 + width: 205px;
15 +}
16 +
17 +.lm_header .lm_tab {
18 + padding-bottom: 3px;
19 + height: 16px;
20 + font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback";
21 + font-size: 14px;
22 +}
23 +
24 +.lm_header .lm_tab.lm_active {
25 + box-shadow: none;
26 + padding-bottom: 3px;
27 +}
28 +
29 +#site-navigation {
30 + border-radius: 0;
31 + margin: 0;
32 + background: #1e1e1e;
33 + border-bottom: 1px solid rgba(255, 255, 255, 0.08);
34 + height: 45px;
35 +}
36 +
37 +#navigation-message {
38 + font-size: 1.2em;
39 + white-space: nowrap;
40 + overflow: hidden;
41 +}
42 +
43 +@keyframes slide {
44 + 0% { transform: translateX(570px); }
45 + 100% { transform: translateX(-100%); }
46 +}
47 +@-webkit-keyframes slide {
48 + 0% { transform: translateX(570px); }
49 + 100% { transform: translateX(-100%); }
50 +}
51 +
52 +.navigation-message-text {
53 + white-space: nowrap;
54 + -moz-animation: slide 60s linear infinite;
55 + -webkit-animation: slide 60s linear infinite;
56 + animation: slide 60s linear infinite;
57 +}
58 +
59 +.navigation-message-text:hover {
60 + -moz-animation-play-state: paused;
61 + -webkit-animation-play-state: paused;
62 + animation-play-state: paused;
63 +}
64 +
65 +#navigation-message a {
66 + color: #41a5f1;
67 + font-weight: bold;
68 +}
69 +
70 +#site-icon {
71 + width: 30px;
72 + height: 30px;
73 + vertical-align: middle;
74 +}
75 +
76 +#site-header {
77 + padding-left: 0;
78 + padding-top: 0;
79 + padding-bottom: 0;
80 +}
81 +
82 +#site-header h2 {
83 + display: inline;
84 + vertical-align: middle;
85 + font-family: 'Exo 2', sans-serif;
86 +}
87 +
88 +#site-content {
89 + display:flex;
90 + height: calc(100% - 45px - 19px);
91 +}
92 +
93 +#site-modal .header {
94 + color: #db2828;
95 +}
96 +
97 +#site-footer, #status-line, #donate-line {
98 + background-color: #0E6EB8;
99 + bottom: 0;
100 + font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback";
101 + font-size: 13px;
102 + height: 19px;
103 + padding-left: 16px;
104 + padding-right: 16px;
105 + position: fixed;
106 +}
107 +
108 +#site-footer {
109 + color: #41a5f1;
110 + left: 0;
111 + text-align: center;
112 + width: 100%;
113 +}
114 +
115 +#site-footer a {
116 + color: #41a5f1;
117 + font-weight: bold;
118 +}
119 +
120 +#site-footer a:hover {
121 + color: #a0d2f8;
122 +}
123 +
124 +#donate-line {
125 + float: left;
126 + left: 0;
127 + text-align: left;
128 + width: fit-content;
129 +}
130 +
131 +#status-line {
132 + color: #fff;
133 + float: right;
134 + right: 0;
135 + text-align: right;
136 + width: fit-content;
137 +}
138 +
139 +#editor-status-line {
140 + background: transparent;
141 + color: #fff;
142 + font-family: monospace;
143 + height: 19px;
144 + padding: 0px 16px;
145 + width: inherit;
146 +}
147 +
148 +#editor-status-line input[type=text] {
149 + background: transparent;
150 + border: none;
151 + color: #fff;
152 + font-family: monospace;
153 + outline: none;
154 +}
155 +
156 +#editor-status-line input[type=text]::selection {
157 + background-color: #cce2ff;
158 + color: #fff;
159 +}
160 +
161 +.blink {
162 + animation: blinker 1s linear infinite;
163 +}
164 +
165 +@keyframes blinker {
166 + 50% {
167 + background: #FFD700;
168 + }
169 +}
170 +
171 +.dot {
172 + background: #0E6EB8;
173 + position: absolute;
174 + border-radius: 50px;
175 + width: 5px;
176 + height: 5px;
177 + right: 7.5px;
178 + top: 7.5px;
179 +}
180 +
181 +.no-left-padding {
182 + padding-left: 0 !important;
183 +}
184 +
185 +input[type="text"] {
186 + width: 205px !important;
187 +}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 +{
2 + "lockfileVersion": 1
3 +}
File mode changed
...@@ -3,7 +3,7 @@ const multer = require('multer'); ...@@ -3,7 +3,7 @@ const multer = require('multer');
3 const fs = require('fs'); 3 const fs = require('fs');
4 const upload = multer(); 4 const upload = multer();
5 const app = express(); 5 const app = express();
6 -const port = 5501; 6 +const port = 5500;
7 app.use(express.static('Voicoding_web')); 7 app.use(express.static('Voicoding_web'));
8 app.use(express.static('./')); 8 app.use(express.static('./'));
9 async function testGoogleTextToSpeech(audioBuffer) { 9 async function testGoogleTextToSpeech(audioBuffer) {
......