Merge branch 'html-home' into 'main'
Html home See merge request !4
Showing
11 changed files
with
45 additions
and
67 deletions
... | @@ -15,7 +15,7 @@ a{ | ... | @@ -15,7 +15,7 @@ a{ |
15 | color:var(--text-color); | 15 | color:var(--text-color); |
16 | 16 | ||
17 | } | 17 | } |
18 | -.menu{ | 18 | +.voi_menu{ |
19 | display:flex; | 19 | display:flex; |
20 | justify-content:space-between; | 20 | justify-content:space-between; |
21 | align-items:center; | 21 | align-items:center; |
... | @@ -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{ |
... | @@ -109,25 +119,35 @@ button:hover{ | ... | @@ -109,25 +119,35 @@ button:hover{ |
109 | margin: 23px; | 119 | margin: 23px; |
110 | } | 120 | } |
111 | #output{ | 121 | #output{ |
112 | - width:50%; | 122 | + margin:20px; |
113 | - margin-left:20px; | ||
114 | display:flex; | 123 | display:flex; |
115 | - border: 3px solid var(--accent-color); | 124 | + align-items:center; |
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:space-around; | 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 | ... | ... |
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> | ... | ... |
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; |
... | @@ -87,6 +86,7 @@ body { | ... | @@ -87,6 +86,7 @@ body { |
87 | } | 86 | } |
88 | 87 | ||
89 | #site-content { | 88 | #site-content { |
89 | + display:flex; | ||
90 | height: calc(100% - 45px - 19px); | 90 | height: calc(100% - 45px - 19px); |
91 | } | 91 | } |
92 | 92 | ... | ... |
... | @@ -141,8 +141,8 @@ function localStorageGetItem(key) { | ... | @@ -141,8 +141,8 @@ function localStorageGetItem(key) { |
141 | } | 141 | } |
142 | 142 | ||
143 | function showMessages() { | 143 | function showMessages() { |
144 | - var width = $updates.offset().left - parseFloat($updates.css("padding-left")) - | 144 | + var width = 100//$updates.offset().left - parseFloat($updates.css("padding-left")) - |
145 | - $navigationMessage.parent().offset().left - parseFloat($navigationMessage.parent().css("padding-left")) - 5; | 145 | + //$navigationMessage.parent().offset().left - parseFloat($navigationMessage.parent().css("padding-left")) - 5; |
146 | 146 | ||
147 | if (width < 200 || messagesData === undefined) { | 147 | if (width < 200 || messagesData === undefined) { |
148 | return; | 148 | return; |
... | @@ -255,7 +255,7 @@ function getIdFromURI() { | ... | @@ -255,7 +255,7 @@ function getIdFromURI() { |
255 | } | 255 | } |
256 | 256 | ||
257 | function downloadSource() { | 257 | function downloadSource() { |
258 | - var value = parseInt($selectLanguage.val()); | 258 | + var value = parseInt(71); |
259 | download(sourceEditor.getValue(), fileNames[value], "text/plain"); | 259 | download(sourceEditor.getValue(), fileNames[value], "text/plain"); |
260 | } | 260 | } |
261 | 261 | ||
... | @@ -308,7 +308,7 @@ function run() { | ... | @@ -308,7 +308,7 @@ function run() { |
308 | 308 | ||
309 | var sourceValue = encode(sourceEditor.getValue()); | 309 | var sourceValue = encode(sourceEditor.getValue()); |
310 | var stdinValue = encode(stdinEditor.getValue()); | 310 | var stdinValue = encode(stdinEditor.getValue()); |
311 | - var languageId = resolveLanguageId($selectLanguage.val()); | 311 | + var languageId = resolveLanguageId(71); |
312 | var compilerOptions = $compilerOptions.val(); | 312 | var compilerOptions = $compilerOptions.val(); |
313 | var commandLineArguments = $commandLineArguments.val(); | 313 | var commandLineArguments = $commandLineArguments.val(); |
314 | 314 | ||
... | @@ -393,21 +393,21 @@ function fetchSubmission(submission_token) { | ... | @@ -393,21 +393,21 @@ function fetchSubmission(submission_token) { |
393 | 393 | ||
394 | function changeEditorLanguage() { | 394 | function changeEditorLanguage() { |
395 | monaco.editor.setModelLanguage(sourceEditor.getModel(), $selectLanguage.find(":selected").attr("mode")); | 395 | monaco.editor.setModelLanguage(sourceEditor.getModel(), $selectLanguage.find(":selected").attr("mode")); |
396 | - currentLanguageId = parseInt($selectLanguage.val()); | 396 | + currentLanguageId = parseInt(71); |
397 | $(".lm_title")[0].innerText = fileNames[currentLanguageId]; | 397 | $(".lm_title")[0].innerText = fileNames[currentLanguageId]; |
398 | - apiUrl = resolveApiUrl($selectLanguage.val()); | 398 | + apiUrl = resolveApiUrl(71); |
399 | } | 399 | } |
400 | 400 | ||
401 | function insertTemplate() { | 401 | function insertTemplate() { |
402 | - currentLanguageId = parseInt($selectLanguage.val()); | 402 | + currentLanguageId = parseInt(71); |
403 | sourceEditor.setValue(sources[currentLanguageId]); | 403 | sourceEditor.setValue(sources[currentLanguageId]); |
404 | changeEditorLanguage(); | 404 | changeEditorLanguage(); |
405 | } | 405 | } |
406 | 406 | ||
407 | function loadRandomLanguage() { | 407 | function loadRandomLanguage() { |
408 | // $selectLanguage.dropdown("set selected", values[Math.floor(Math.random() * $selectLanguage[0].length)]); | 408 | // $selectLanguage.dropdown("set selected", values[Math.floor(Math.random() * $selectLanguage[0].length)]); |
409 | - $selectLanguage.dropdown("set selected", 71); | 409 | + //$selectLanguage.dropdown("set selected", 71); |
410 | - apiUrl = resolveApiUrl($selectLanguage.val()); | 410 | + apiUrl = resolveApiUrl(71); |
411 | insertTemplate(); | 411 | insertTemplate(); |
412 | } | 412 | } |
413 | 413 | ||
... | @@ -591,7 +591,7 @@ $(document).ready(function () { | ... | @@ -591,7 +591,7 @@ $(document).ready(function () { |
591 | changeEditorMode(); | 591 | changeEditorMode(); |
592 | 592 | ||
593 | sourceEditor.getModel().onDidChangeContent(function (e) { | 593 | sourceEditor.getModel().onDidChangeContent(function (e) { |
594 | - currentLanguageId = parseInt($selectLanguage.val()); | 594 | + currentLanguageId = parseInt(71); |
595 | isEditorDirty = sourceEditor.getValue() != sources[currentLanguageId]; | 595 | isEditorDirty = sourceEditor.getValue() != sources[currentLanguageId]; |
596 | }); | 596 | }); |
597 | 597 | ... | ... |
client.js
deleted
100644 → 0
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 |
s
0 → 100644
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) { | ... | ... |
-
Please register or login to post a comment