천현우 / 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 @@
--text-color:#fffde7;
--background-color:#ff94c2;
--accent-color:#ba2d65;
--output-color:#ff7043;
--output-accent-color:#c63f17;
}
body{
......@@ -13,7 +15,7 @@ a{
color:var(--text-color);
}
.menu{
.voi_menu{
display:flex;
justify-content:space-between;
align-items:center;
......@@ -23,10 +25,12 @@ a{
.menu_bar_content li:hover{
background-color:var(--accent-color);
border-radius: 4px;
color:var(--text-color);
}
.menu_bar_icons li:hover{
background-color:var(--accent-color);
border-radius: 4px;
color:var(--text-color);
}
.menu_bar_logo{
font-size: 20px;
......@@ -35,6 +39,9 @@ a{
.menu_bar_logo i{
color:var(--accent-color);
}
.basic:hover{
color:var(--text-color);
}
.menu_bar_content{
display:flex;
list-style: none;
......@@ -52,13 +59,17 @@ a{
padding: 8px 12px;
}
.menu_toggle{
color:var(--text-color);
display: none;
position: absolute;
right:32px;
font-size: 24px;
}
.menu_toggle:hover{
color:var(--text-color);
}
@media screen and (max-width: 500px) {
.menu{
.voi_menu{
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
......@@ -80,6 +91,7 @@ a{
}
.menu_toggle{
display: block;
color:var(--text-color);
}
.menu_bar_content.active,
.menu_bar_icons.active{
......@@ -87,25 +99,55 @@ a{
}
}
button{
background-color:#60ad5e;
background-color:var(--output-color);
border:none;
color:var(--text-color);
font-size:50px;
padding:12px 24px 24px 24px;
padding: 24px;
border-radius: 4px;
}
button:hover{
background-color:#005005;
background-color:var(--output-accent-color);
border-radius: 4px;
}
.controls{
padding:12px 24px;
height:70px;
font-size:100px;
display:flex;
justify-content:space-around;
border-radius:4px;
margin: 23px;
}
#output{
margin:20px;
display:flex;
align-items:center;
height:700px;
background-color:rgba(0,0,0,.87);
color:var(--text-color);
}
#recordButton{
line-height: 22px;
font-size:50px;
}
#transcribeButton{
line-height: 22px;
font-size:50px;
}
.output_bar{
display:flex;
justify-content:center;
color:black;
margin: 20px;
font-size:100px;
}
.basic{
color:var(--text-color);
font-size:20px;
}
.fas.fa-arrow-circle-down{
color:var(--background-color);
font-size:70px;
display:block;
text-align:center;
}
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
......@@ -13,7 +13,7 @@ a{
color:var(--text-color);
}
.menu{
.voi_menu{
display:flex;
justify-content:space-between;
align-items:center;
......
......@@ -12,7 +12,7 @@
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<nav class="menu">
<nav class="voi_menu">
<div class="menu_bar_logo">
<i class="fas fa-microphone-alt"></i>
<a href="Voico_Home.html">Voicoding</a>
......
......@@ -13,7 +13,7 @@ a{
color:var(--text-color);
}
.menu{
.voi_menu{
display:flex;
justify-content:space-between;
align-items:center;
......
......@@ -12,7 +12,7 @@
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<nav class="menu">
<nav class="voi_menu">
<div class="menu_bar_logo">
<i class="fas fa-microphone-alt"></i>
<a href="Voico_Home.html">Voicoding</a>
......
......@@ -4,6 +4,7 @@ const recordButton = document.getElementById("recordButton");
const transcribeButton = document.getElementById("transcribeButton");
recordButton.addEventListener("click", startRecording);
transcribeButton.addEventListener("click", transcribeText);
let cnt = 0;
function startRecording() {
let constraints = { audio: true, video:false }
recordButton.disabled = true;
......@@ -32,7 +33,7 @@ function uploadSoundData(blob) {
let formData = new FormData();
xhr.onload = function(e) {
if(this.readyState === 4) {
document.getElementById("output").innerHTML += '<br><br><strong>Result: </strong>' + JSON.parse(e.target.responseText);
document.getElementById("output").innerHTML += `${cnt++}: ${JSON.parse(e.target.responseText)}<br>`;
}
};
formData.append("audio_data", blob, filename);
......
body {
background: url(/images/judge0_background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.ui[class*="left action"].input>.dropdown {
border-radius: 0 .28571429rem .28571429rem 0;
}
.ui.selection.dropdown {
width: 205px;
}
.lm_header .lm_tab {
padding-bottom: 3px;
height: 16px;
font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback";
font-size: 14px;
}
.lm_header .lm_tab.lm_active {
box-shadow: none;
padding-bottom: 3px;
}
#site-navigation {
border-radius: 0;
margin: 0;
background: #1e1e1e;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
height: 45px;
}
#navigation-message {
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
}
@keyframes slide {
0% { transform: translateX(570px); }
100% { transform: translateX(-100%); }
}
@-webkit-keyframes slide {
0% { transform: translateX(570px); }
100% { transform: translateX(-100%); }
}
.navigation-message-text {
white-space: nowrap;
-moz-animation: slide 60s linear infinite;
-webkit-animation: slide 60s linear infinite;
animation: slide 60s linear infinite;
}
.navigation-message-text:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#navigation-message a {
color: #41a5f1;
font-weight: bold;
}
#site-icon {
width: 30px;
height: 30px;
vertical-align: middle;
}
#site-header {
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
}
#site-header h2 {
display: inline;
vertical-align: middle;
font-family: 'Exo 2', sans-serif;
}
#site-content {
display:flex;
height: calc(100% - 45px - 19px);
}
#site-modal .header {
color: #db2828;
}
#site-footer, #status-line, #donate-line {
background-color: #0E6EB8;
bottom: 0;
font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback";
font-size: 13px;
height: 19px;
padding-left: 16px;
padding-right: 16px;
position: fixed;
}
#site-footer {
color: #41a5f1;
left: 0;
text-align: center;
width: 100%;
}
#site-footer a {
color: #41a5f1;
font-weight: bold;
}
#site-footer a:hover {
color: #a0d2f8;
}
#donate-line {
float: left;
left: 0;
text-align: left;
width: fit-content;
}
#status-line {
color: #fff;
float: right;
right: 0;
text-align: right;
width: fit-content;
}
#editor-status-line {
background: transparent;
color: #fff;
font-family: monospace;
height: 19px;
padding: 0px 16px;
width: inherit;
}
#editor-status-line input[type=text] {
background: transparent;
border: none;
color: #fff;
font-family: monospace;
outline: none;
}
#editor-status-line input[type=text]::selection {
background-color: #cce2ff;
color: #fff;
}
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
background: #FFD700;
}
}
.dot {
background: #0E6EB8;
position: absolute;
border-radius: 50px;
width: 5px;
height: 5px;
right: 7.5px;
top: 7.5px;
}
.no-left-padding {
padding-left: 0 !important;
}
input[type="text"] {
width: 205px !important;
}
\ No newline at end of file
This diff is collapsed. Click to expand it.
{
"lockfileVersion": 1
}
File mode changed
......@@ -3,7 +3,7 @@ const multer = require('multer');
const fs = require('fs');
const upload = multer();
const app = express();
const port = 5501;
const port = 5500;
app.use(express.static('Voicoding_web'));
app.use(express.static('./'));
async function testGoogleTextToSpeech(audioBuffer) {
......