천현우 / Voicoding

Go to a project
Toggle navigation Toggle navigation pinning
민병수
032267fb 1 parent 914be5df

Home change, link availalbe

Inline Side-by-side
Showing 9 changed files with 263 additions and 185 deletions
.cont{
display:flex;
justify-content:space-between;
align-items:center;
background-color:#ff94c2;
padding: 8px 12px;
}
a{
text-decoration: none;
color:#fffde7;
}
span{
font-size:60px;
}
.icons{
list-style: none;
display:flex;
padding-left:0;
font-size: 120px;
align-self: center;
}
.icons li{
padding: 8px 12px;
justify-content:center;
}
.icons li:hover{
background-color:#ba2d65;
border-radius: 4px;
}
li{
list-style: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="Voico_Contact.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
<title>How to Contatct</title>
</head>
<body>
<div class="cont">
<ul class="icons">
<li><a href="https://www.instagram.com/hyunoo_1000/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
<li><a href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
</ul>
</div>
<li><i class="fas fa-envelope-open-text"></i></li>
<span>qud9783@khu.ac.kr<br>2019102233@khu.ac.kr</span>
</body>
</html>
\ No newline at end of file
* {
color:#ffc947;
:root{
--text-color:#fffde7;
--background-color:#ff94c2;
--accent-color:#ba2d65;
}
button:hover {
color:crimson;
background: beige
body{
margin : 0;
font-family: 'Source Sans Pro';
}
p{
font-size: 50px;
background-color:#ff9800;
color:#f4ff81;
a{
text-decoration:none;
color:var(--text-color);
}
button{
.menu{
display:flex;
justify-content:space-between;
align-items:center;
background-color:var(--background-color);
padding: 8px 12px;
}
.menu_bar_content li:hover{
background-color:var(--accent-color);
border-radius: 4px;
}
.menu_bar_icons li:hover{
background-color:var(--accent-color);
border-radius: 4px;
}
.menu_bar_logo{
font-size: 20px;
background-color:#c66900;
height: 70px;
width: 300px;
border-width: 2px;
border-style: solid;
border-color: black;
display:block;
font-size: 50px;
font-weight: bold;
display: inline-block;
}
.container{
height:200px;
}
.menu_bar_logo i{
color:var(--accent-color);
}
.menu_bar_content{
display:flex;
flex-direction: row;
flex-wrap:nowrap;
}
#start{
margin-right: 150px;
position:relative;
height: 70px;
width: 300px;
border-width: 2px;
border-style: solid;
border-color: black;
font-size: 50px;
font-weight: bold;
list-style: none;
padding-left: 0;
}
.menu_bar_content li{
padding: 8px 12px;
}
.menu_bar_icons{
list-style: none;
display: flex;
padding-left:0;
}
.menu_bar_icons li{
padding: 8px 12px;
}
.menu_toggle{
display: none;
position: absolute;
right:32px;
font-size: 24px;
}
@media screen and (max-width: 500px) {
.menu{
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
.menu_bar_content{
display:none;
flex-direction:column;
align-items:center;
width: 100%;
}
.menu_bar_content li{
width: 100%;
text-align: center;
}
.menu_bar_icons{
display:none;
justify-content: center;
width: 100%;
}
.menu_toggle{
display: block;
}
.menu_bar_content.active,
.menu_bar_icons.active{
display:flex;
flex-direction: row;
flex-wrap:nowrap;
}
#end{
margin-left: 150px;
position:relative;
height: 70px;
width: 300px;
border-width: 2px;
border-style: solid;
border-color: black;
font-size: 50px;
font-weight: bold;
}
}
button{
background-color:#60ad5e;
border:none;
color:var(--text-color);
font-size:50px;
padding:12px 24px 24px 24px;
border-radius: 4px;
}
button:hover{
background-color:#005005;
border-radius: 4px;
}
.controls{
padding:12px 24px;
height:70px;
font-size:100px;
display:flex;
flex-direction: row;
flex-wrap:nowrap;
}
#text{
font-family: 'Do Hyeon', sans-serif;
font-size: 50px;
opacity: 1;
color: gray;
width: 500px;
margin : 0 auto;
display: inline-block;
}
#post{
font-family: 'Do Hyeon', sans-serif;
font-size: 50px;
opacity: 1;
color: gray;
width: 500px;
margin : 0 auto;
display: inline-block;
}
#python{
font-family: 'Do Hyeon', sans-serif;
font-size: 50px;
opacity: 1;
width: 100px;
margin : 0 auto;
display:block;
align-self: center;
justify-content:space-around;
border-radius:4px;
}
#recordButton{
}
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<link href="Voico_Home.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Noto+Serif+KR:wght@500&family=Noto+Serif:ital@1&display=swap" rel="stylesheet">
<link href="Voico_Home.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voicoding</title>
<script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
<script src="menu.js" defer></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<p>Voicoding <img src="voico_0.jpg" width=auto height="200"></p>
<div id = "project">
<h1>
<p style="text-align: center;">프로젝트 설명</p> <br>
코딩하기 귀찮은 당신을 위해 준비했습니다<br>
당신이 코딩하고 싶은 대로 말만 한다면 저희가 다 이루어 드릴게요!<br>
<a href="http://">매뉴얼링크</a> <br>
별로 성가시지 않는 매뉴얼이랑 조금만 따라와 주신다면 바로 코딩 해드릴게요!
</h1>
<nav class="menu">
<div class="menu_bar_logo">
<i class="fas fa-microphone-alt"></i>
<a href="Voico_Home.html">Voicoding</a>
</div>
<div class="container">
<button id="start">Start</button>
<button id="end">Exit</button>
<ul class="menu_bar_content">
<a href="Voico_Home.html"><li>Home</li></a>
<a href="\Manual.txt"><li>Manual</li></a>
<a href="Voico_Info.html"><li>info</li></a>
</ul>
<ul class="menu_bar_icons">
<li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
<li><a = href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
</ul>
<a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
</nav>
<div class="controls">
<button id="recordButton">Speech</button>
<button id="transcribeButton" disabled>To text</button>
</div>
<span class="container" id = "text">
변환전
<li>
안녕하세요 say something
</li>
</span>
<span id = "post">
변환후
<li>
반갑습니다 say something
</li>
</span>
<button id = "python">실행</button>
<div id="output"></div>
<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
<script src="\client.js"></script>
</body>
</html>
\ No newline at end of file
......
:root{
--text-color:#fffde7;
--background-color:#ff94c2;
--accent-color:#ba2d65;
}
body{
margin : 0;
font-family: 'Source Sans Pro';
}
a{
text-decoration:none;
color:var(--text-color);
}
.menu{
display:flex;
justify-content:space-between;
align-items:center;
background-color:var(--background-color);
padding: 8px 12px;
}
.menu_bar_content li:hover{
background-color:var(--accent-color);
border-radius: 4px;
}
.menu_bar_icons li:hover{
background-color:var(--accent-color);
border-radius: 4px;
}
.menu_bar_logo{
font-size: 20px;
}
.menu_bar_logo i{
color:var(--accent-color);
}
.menu_bar_content{
display:flex;
list-style: none;
padding-left: 0;
}
.menu_bar_content li{
padding: 8px 12px;
}
.menu_bar_icons{
list-style: none;
display: flex;
padding-left:0;
}
.menu_bar_icons li{
padding: 8px 12px;
}
.menu_toggle{
display: none;
position: absolute;
right:32px;
font-size: 24px;
}
@media screen and (max-width: 500px) {
.menu{
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
.menu_bar_content{
display:none;
flex-direction:column;
align-items:center;
width: 100%;
}
.menu_bar_content li{
width: 100%;
text-align: center;
}
.menu_bar_icons{
display:none;
justify-content: center;
width: 100%;
}
.menu_toggle{
display: block;
}
.menu_bar_content.active,
.menu_bar_icons.active{
display:flex;
}
}
button{
background-color:var(--background-color);
border:none;
color:var(--text-color);
}
button:hover{
background-color:var(--accent-color);
border-radius: 4px;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<link href="Voico_Info.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voicoding</title>
<script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
<script src="menu.js" defer></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<nav class="menu">
<div class="menu_bar_logo">
<i class="fas fa-microphone-alt"></i>
<a href="Voico_Home.html">Voicoding</a>
</div>
<ul class="menu_bar_content">
<a href="Voico_Home.html"><li>Home</li></a>
<a href="\Manual.txt"><li>Manual</li></a>
<a href="Voico_Contact.html"><li>info</li></a>
</ul>
<ul class="menu_bar_icons">
<li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
<li><a = href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
</ul>
<a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
</nav>
</body>
</html>
\ No newline at end of file
......@@ -20,7 +20,7 @@
<ul class="menu_bar_content">
<a href="Voico_Home.html"><li>Home</li></a>
<a href="\Manual.txt"><li>Manual</li></a>
<a href="Voico_Contact.html"><li>Contact</li></a>
<a href="Voico_Info.html"><li>info</li></a>
</ul>
<ul class="menu_bar_icons">
<li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Speech to text test</title>
<link rel="shortcut icon" href="#">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/4/cerulean/bootstrap.min.css">
</head>
<body style="padding:50px;">
<h1>Speech to text test</h1>
<div id="controls">
<button id="recordButton">Record</button>
<button id="transcribeButton" disabled>Get transcription</button>
</div>
<div id="output"></div>
<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
<script src="client.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -4,6 +4,7 @@ const fs = require('fs');
const upload = multer();
const app = express();
const port = 5501;
app.use(express.static('Voicoding_web'));
app.use(express.static('./'));
async function testGoogleTextToSpeech(audioBuffer) {
const speech = require('@google-cloud/speech');
......