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