민병수

Home layout re-locate

...@@ -25,10 +25,12 @@ a{ ...@@ -25,10 +25,12 @@ a{
25 .menu_bar_content li:hover{ 25 .menu_bar_content li:hover{
26 background-color:var(--accent-color); 26 background-color:var(--accent-color);
27 border-radius: 4px; 27 border-radius: 4px;
28 + color:var(--text-color);
28 } 29 }
29 .menu_bar_icons li:hover{ 30 .menu_bar_icons li:hover{
30 background-color:var(--accent-color); 31 background-color:var(--accent-color);
31 border-radius: 4px; 32 border-radius: 4px;
33 + color:var(--text-color);
32 } 34 }
33 .menu_bar_logo{ 35 .menu_bar_logo{
34 font-size: 20px; 36 font-size: 20px;
...@@ -37,6 +39,9 @@ a{ ...@@ -37,6 +39,9 @@ a{
37 .menu_bar_logo i{ 39 .menu_bar_logo i{
38 color:var(--accent-color); 40 color:var(--accent-color);
39 } 41 }
42 +.basic:hover{
43 + color:var(--text-color);
44 +}
40 .menu_bar_content{ 45 .menu_bar_content{
41 display:flex; 46 display:flex;
42 list-style: none; 47 list-style: none;
...@@ -54,13 +59,17 @@ a{ ...@@ -54,13 +59,17 @@ a{
54 padding: 8px 12px; 59 padding: 8px 12px;
55 } 60 }
56 .menu_toggle{ 61 .menu_toggle{
62 + color:var(--text-color);
57 display: none; 63 display: none;
58 position: absolute; 64 position: absolute;
59 right:32px; 65 right:32px;
60 font-size: 24px; 66 font-size: 24px;
61 } 67 }
68 +.menu_toggle:hover{
69 + color:var(--text-color);
70 +}
62 @media screen and (max-width: 500px) { 71 @media screen and (max-width: 500px) {
63 - .menu{ 72 + .voi_menu{
64 flex-direction: column; 73 flex-direction: column;
65 align-items: flex-start; 74 align-items: flex-start;
66 padding: 8px 24px; 75 padding: 8px 24px;
...@@ -82,6 +91,7 @@ a{ ...@@ -82,6 +91,7 @@ a{
82 } 91 }
83 .menu_toggle{ 92 .menu_toggle{
84 display: block; 93 display: block;
94 + color:var(--text-color);
85 } 95 }
86 .menu_bar_content.active, 96 .menu_bar_content.active,
87 .menu_bar_icons.active{ 97 .menu_bar_icons.active{
...@@ -112,22 +122,32 @@ button:hover{ ...@@ -112,22 +122,32 @@ button:hover{
112 margin:20px; 122 margin:20px;
113 display:flex; 123 display:flex;
114 align-items:center; 124 align-items:center;
115 - border: 3px solid var(--accent-color);
116 height:700px; 125 height:700px;
126 + background-color:rgba(0,0,0,.87);
127 + color:var(--text-color);
117 } 128 }
118 #recordButton{ 129 #recordButton{
119 line-height: 22px; 130 line-height: 22px;
131 + font-size:50px;
120 } 132 }
121 #transcribeButton{ 133 #transcribeButton{
122 line-height: 22px; 134 line-height: 22px;
135 + font-size:50px;
123 } 136 }
124 .output_bar{ 137 .output_bar{
125 display:flex; 138 display:flex;
126 justify-content:center; 139 justify-content:center;
127 color:black; 140 color:black;
128 - border: 3px solid var(--accent-color);
129 margin: 20px; 141 margin: 20px;
142 + font-size:100px;
130 } 143 }
131 -.ttp{ 144 +.basic{
132 - 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;
133 } 153 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Voicoding</title> 8 <title>Voicoding</title>
9 <script defer src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script> 9 <script defer src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
10 - <script defer src="menu.js" defer></script> 10 + <script defer src="menu.js"></script>
11 <link rel="preconnect" href="https://fonts.gstatic.com"> 11 <link rel="preconnect" href="https://fonts.gstatic.com">
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 <script defer src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script> 13 <script defer src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
14 - <script defer defer src="client.js"></script> 14 + <script defer src="client.js"></script>
15 <meta name="description" content="Free and open-source online code editor that allows you to write and execute code from a rich set of languages."> 15 <meta name="description" content="Free and open-source online code editor that allows you to write and execute code from a rich set of languages.">
16 <meta name="keywords" content="online editor, online code editor, online ide, online compiler, online interpreter, run code online, learn programming online, 16 <meta name="keywords" content="online editor, online code editor, online ide, online compiler, online interpreter, run code online, learn programming online,
17 online debugger, programming in browser, online code runner, online code execution, debug online, debug C code online, debug C++ code online, 17 online debugger, programming in browser, online code runner, online code execution, debug online, debug C code online, debug C++ code online,
...@@ -72,16 +72,16 @@ ...@@ -72,16 +72,16 @@
72 <nav class="voi_menu"> 72 <nav class="voi_menu">
73 <div class="menu_bar_logo"> 73 <div class="menu_bar_logo">
74 <i class="fas fa-microphone-alt"></i> 74 <i class="fas fa-microphone-alt"></i>
75 - <a href="Voico_Home.html">Voicoding</a> 75 + <a class = "basic" href="Voico_Menu.html">Voicoding</a>
76 </div> 76 </div>
77 <ul class="menu_bar_content"> 77 <ul class="menu_bar_content">
78 - <a href="Voico_Home.html"><li>Home</li></a> 78 + <a class = "basic" href="Voico_Home.html"><li>Home</li></a>
79 - <a href="\Manual.txt"><li>Manual</li></a> 79 + <a class = "basic" href="\Manual.txt"><li>Manual</li></a>
80 - <a href="Voico_Info.html"><li>info</li></a> 80 + <a class = "basic" href="Voico_Info.html"><li>Info</li></a>
81 </ul> 81 </ul>
82 <ul class="menu_bar_icons"> 82 <ul class="menu_bar_icons">
83 - <li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li> 83 + <li><a class = "basic" href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
84 - <li><a = href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li> 84 + <li><a class = "basic" href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
85 </ul> 85 </ul>
86 <a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a> 86 <a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
87 </nav> 87 </nav>
...@@ -90,11 +90,12 @@ ...@@ -90,11 +90,12 @@
90 <button id="transcribeButton" disabled>To text</button> 90 <button id="transcribeButton" disabled>To text</button>
91 </div> 91 </div>
92 <div class="output_bar"> 92 <div class="output_bar">
93 - <h3>Transcription Raw Data</h3> 93 + <h2>Transcription Raw Data</h2>
94 </div> 94 </div>
95 <div id="output"></div> 95 <div id="output"></div>
96 + <i class="fas fa-arrow-circle-down"></i>
96 <div class="output_bar"> 97 <div class="output_bar">
97 - <h3>TTP</h3> 98 + <h2>TTP</h2>
98 </div> 99 </div>
99 <div id="site-navigation" class="ui small inverted menu" style="margin:20px 20px 0px 20px;"> 100 <div id="site-navigation" class="ui small inverted menu" style="margin:20px 20px 0px 20px;">
100 <div id="site-header" class="header item"> 101 <div id="site-header" class="header item">
......
1 -
2 body { 1 body {
3 background: url(/images/judge0_background.png) no-repeat center center fixed; 2 background: url(/images/judge0_background.png) no-repeat center center fixed;
4 -webkit-background-size: cover; 3 -webkit-background-size: cover;
......
...@@ -473,7 +473,6 @@ function updateScreenElements() { ...@@ -473,7 +473,6 @@ function updateScreenElements() {
473 473
474 $(window).resize(function() { 474 $(window).resize(function() {
475 layout.updateSize(); 475 layout.updateSize();
476 - console.log(`${layout.height}, ${layout.width}`);
477 updateScreenElements(); 476 updateScreenElements();
478 showMessages(); 477 showMessages();
479 }); 478 });
...@@ -583,7 +582,7 @@ $(document).ready(function () { ...@@ -583,7 +582,7 @@ $(document).ready(function () {
583 theme: "vs-dark", 582 theme: "vs-dark",
584 scrollBeyondLastLine: true, 583 scrollBeyondLastLine: true,
585 readOnly: state.readOnly, 584 readOnly: state.readOnly,
586 - language: "cpp", 585 + language: "python",
587 minimap: { 586 minimap: {
588 enabled: false 587 enabled: false
589 } 588 }
......
1 -let rec = null;
2 -let audioStream = null;
3 -const recordButton = document.getElementById("recordButton");
4 -const transcribeButton = document.getElementById("transcribeButton");
5 -recordButton.addEventListener("click", startRecording);
6 -transcribeButton.addEventListener("click", transcribeText);
7 -let cnt = 0;
8 -function startRecording() {
9 - let constraints = { audio: true, video:false }
10 - recordButton.disabled = true;
11 - transcribeButton.disabled = false;
12 - navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
13 - const audioContext = new window.AudioContext();
14 - audioStream = stream;
15 - const input = audioContext.createMediaStreamSource(stream);
16 - rec = new Recorder(input, { numChannels:1 })
17 - rec.record()
18 - }).catch(function(err) {
19 - recordButton.disabled = false;
20 - transcribeButton.disabled = true;
21 - });
22 -}
23 -function transcribeText() {
24 - transcribeButton.disabled = true;
25 - recordButton.disabled = false;
26 - rec.stop();
27 - audioStream.getAudioTracks()[0].stop();
28 - rec.exportWAV(uploadSoundData);
29 -}
30 -function uploadSoundData(blob) {
31 - let filename = new Date().toISOString();
32 - let xhr = new XMLHttpRequest();
33 - let formData = new FormData();
34 - xhr.onload = function(e) {
35 - if(this.readyState === 4) {
36 - document.getElementById("output").innerHTML += `${cnt++}: ${JSON.parse(e.target.responseText)}<br>`;
37 - }
38 - };
39 - formData.append("audio_data", blob, filename);
40 - xhr.open("POST", "/upload_sound", true);
41 - xhr.send(formData);
42 -}
...\ No newline at end of file ...\ No newline at end of file
...@@ -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) {
......