민병수 / 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 265 additions and 187 deletions
1 -.cont{
2 - display:flex;
3 - justify-content:space-between;
4 - align-items:center;
5 - background-color:#ff94c2;
6 - padding: 8px 12px;
7 -}
8 -
9 -a{
10 - text-decoration: none;
11 - color:#fffde7;
12 -}
13 -span{
14 - font-size:60px;
15 -}
16 -.icons{
17 - list-style: none;
18 - display:flex;
19 - padding-left:0;
20 - font-size: 120px;
21 - align-self: center;
22 -}
23 -.icons li{
24 - padding: 8px 12px;
25 - justify-content:center;
26 -}
27 -.icons li:hover{
28 - background-color:#ba2d65;
29 - border-radius: 4px;
30 -}
31 -li{
32 - list-style: none;
33 -}
1 -<!DOCTYPE html>
2 -<html lang="en">
3 -<head>
4 - <link href="Voico_Contact.css" rel="stylesheet" type="text/css">
5 - <meta charset="UTF-8">
6 - <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 - <script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
9 - <title>How to Contatct</title>
10 -</head>
11 -<body>
12 - <div class="cont">
13 - <ul class="icons">
14 - <li><a href="https://www.instagram.com/hyunoo_1000/"><i class="fab fa-instagram"></i></a></li>
15 - <li><a href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
16 - <li><a href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
17 - </ul>
18 - </div>
19 - <li><i class="fas fa-envelope-open-text"></i></li>
20 - <span>qud9783@khu.ac.kr<br>2019102233@khu.ac.kr</span>
21 -</body>
22 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -* { 1 +:root{
2 - color:#ffc947; 2 + --text-color:#fffde7;
3 + --background-color:#ff94c2;
4 + --accent-color:#ba2d65;
3 } 5 }
4 6
5 -button:hover { 7 +body{
6 - color:crimson; 8 + margin : 0;
7 - background: beige 9 + font-family: 'Source Sans Pro';
8 } 10 }
9 -p{ 11 +a{
10 - font-size: 50px; 12 + text-decoration:none;
11 - background-color:#ff9800; 13 + color:var(--text-color);
12 - color:#f4ff81;
13 -}
14 -button{
15 14
16 - background-color:#c66900; 15 +}
17 - height: 70px; 16 +.menu{
18 - width: 300px;
19 - border-width: 2px;
20 - border-style: solid;
21 - border-color: black;
22 - display:block;
23 - font-size: 50px;
24 - font-weight: bold;
25 - display: inline-block;
26 -}
27 -.container{
28 - height:200px;
29 display:flex; 17 display:flex;
30 - flex-direction: row; 18 + justify-content:space-between;
31 - flex-wrap:nowrap; 19 + align-items:center;
32 -} 20 + background-color:var(--background-color);
33 -#start{ 21 + padding: 8px 12px;
34 - margin-right: 150px; 22 +}
35 - position:relative; 23 +.menu_bar_content li:hover{
36 - height: 70px; 24 + background-color:var(--accent-color);
37 - width: 300px; 25 + border-radius: 4px;
38 - border-width: 2px; 26 +}
39 - border-style: solid; 27 +.menu_bar_icons li:hover{
40 - border-color: black; 28 + background-color:var(--accent-color);
41 - font-size: 50px; 29 + border-radius: 4px;
42 - font-weight: bold; 30 +}
31 +.menu_bar_logo{
32 + font-size: 20px;
33 +
34 +}
35 +.menu_bar_logo i{
36 + color:var(--accent-color);
37 +}
38 +.menu_bar_content{
43 display:flex; 39 display:flex;
44 - flex-direction: row; 40 + list-style: none;
45 - flex-wrap:nowrap; 41 + padding-left: 0;
46 -} 42 +}
47 -#end{ 43 +.menu_bar_content li{
48 - margin-left: 150px; 44 + padding: 8px 12px;
49 - position:relative; 45 +}
50 - height: 70px; 46 +.menu_bar_icons{
51 - width: 300px; 47 + list-style: none;
52 - border-width: 2px; 48 + display: flex;
53 - border-style: solid; 49 + padding-left:0;
54 - border-color: black; 50 +}
55 - font-size: 50px; 51 +.menu_bar_icons li{
56 - font-weight: bold; 52 + padding: 8px 12px;
53 +}
54 +.menu_toggle{
55 + display: none;
56 + position: absolute;
57 + right:32px;
58 + font-size: 24px;
59 +}
60 +@media screen and (max-width: 500px) {
61 + .menu{
62 + flex-direction: column;
63 + align-items: flex-start;
64 + padding: 8px 24px;
65 + }
66 + .menu_bar_content{
67 + display:none;
68 + flex-direction:column;
69 + align-items:center;
70 + width: 100%;
71 + }
72 + .menu_bar_content li{
73 + width: 100%;
74 + text-align: center;
75 + }
76 + .menu_bar_icons{
77 + display:none;
78 + justify-content: center;
79 + width: 100%;
80 + }
81 + .menu_toggle{
82 + display: block;
83 + }
84 + .menu_bar_content.active,
85 + .menu_bar_icons.active{
86 + display:flex;
87 + }
88 +}
89 +button{
90 + background-color:#60ad5e;
91 + border:none;
92 + color:var(--text-color);
93 + font-size:50px;
94 + padding:12px 24px 24px 24px;
95 + border-radius: 4px;
96 +}
97 +button:hover{
98 + background-color:#005005;
99 + border-radius: 4px;
100 +}
101 +.controls{
102 + padding:12px 24px;
103 + height:70px;
104 + font-size:100px;
57 display:flex; 105 display:flex;
58 - flex-direction: row; 106 + justify-content:space-around;
59 - flex-wrap:nowrap; 107 + border-radius:4px;
60 -} 108 +}
61 -#text{ 109 +#recordButton{
62 - font-family: 'Do Hyeon', sans-serif; 110 +
63 - font-size: 50px;
64 - opacity: 1;
65 - color: gray;
66 - width: 500px;
67 - margin : 0 auto;
68 - display: inline-block;
69 -}
70 -#post{
71 - font-family: 'Do Hyeon', sans-serif;
72 - font-size: 50px;
73 - opacity: 1;
74 - color: gray;
75 - width: 500px;
76 - margin : 0 auto;
77 - display: inline-block;
78 -}
79 -#python{
80 - font-family: 'Do Hyeon', sans-serif;
81 - font-size: 50px;
82 - opacity: 1;
83 - width: 100px;
84 - margin : 0 auto;
85 - display:block;
86 - align-self: center;
87 } 111 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 - <link href="Voico_Home.css" rel="stylesheet"> 4 + <link href="Voico_Home.css" rel="stylesheet" type="text/css">
5 - <meta charset="utf-8"> 5 + <meta charset="UTF-8">
6 - <meta name="viewport" content="width=device-width, initial-"> 6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 - <link rel="preconnect" href="https://fonts.gstatic.com"> 7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 - <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">
9 <title>Voicoding</title> 8 <title>Voicoding</title>
9 + <script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
10 + <script src="menu.js" defer></script>
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">
10 </head> 13 </head>
11 -
12 <body> 14 <body>
13 - <p>Voicoding <img src="voico_0.jpg" width=auto height="200"></p> 15 + <nav class="menu">
14 - <div id = "project"> 16 + <div class="menu_bar_logo">
15 - <h1> 17 + <i class="fas fa-microphone-alt"></i>
16 - <p style="text-align: center;">프로젝트 설명</p> <br> 18 + <a href="Voico_Home.html">Voicoding</a>
17 - 코딩하기 귀찮은 당신을 위해 준비했습니다<br> 19 + </div>
18 - 당신이 코딩하고 싶은 대로 말만 한다면 저희가 다 이루어 드릴게요!<br> 20 + <ul class="menu_bar_content">
19 - <a href="http://">매뉴얼링크</a> <br> 21 + <a href="Voico_Home.html"><li>Home</li></a>
20 - 별로 성가시지 않는 매뉴얼이랑 조금만 따라와 주신다면 바로 코딩 해드릴게요! 22 + <a href="\Manual.txt"><li>Manual</li></a>
21 - </h1> 23 + <a href="Voico_Info.html"><li>info</li></a>
22 - </div> 24 + </ul>
23 - <div class="container"> 25 + <ul class="menu_bar_icons">
24 - <button id="start">Start</button> 26 + <li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
25 - <button id="end">Exit</button> 27 + <li><a = href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
28 + </ul>
29 + <a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
30 + </nav>
31 + <div class="controls">
32 + <button id="recordButton">Speech</button>
33 + <button id="transcribeButton" disabled>To text</button>
26 </div> 34 </div>
27 - <span class="container" id = "text"> 35 + <div id="output"></div>
28 - 변환전 36 + <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
29 - <li> 37 + <script src="\client.js"></script>
30 - 안녕하세요 say something
31 - </li>
32 - </span>
33 - <span id = "post">
34 - 변환후
35 - <li>
36 - 반갑습니다 say something
37 - </li>
38 - </span>
39 - <button id = "python">실행</button>
40 </body> 38 </body>
41 </html> 39 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 +:root{
2 + --text-color:#fffde7;
3 + --background-color:#ff94c2;
4 + --accent-color:#ba2d65;
5 +}
6 +
7 +body{
8 + margin : 0;
9 + font-family: 'Source Sans Pro';
10 +}
11 +a{
12 + text-decoration:none;
13 + color:var(--text-color);
14 +
15 +}
16 +.menu{
17 + display:flex;
18 + justify-content:space-between;
19 + align-items:center;
20 + background-color:var(--background-color);
21 + padding: 8px 12px;
22 +}
23 +.menu_bar_content li:hover{
24 + background-color:var(--accent-color);
25 + border-radius: 4px;
26 +}
27 +.menu_bar_icons li:hover{
28 + background-color:var(--accent-color);
29 + border-radius: 4px;
30 +}
31 +.menu_bar_logo{
32 + font-size: 20px;
33 +
34 +}
35 +.menu_bar_logo i{
36 + color:var(--accent-color);
37 +}
38 +.menu_bar_content{
39 + display:flex;
40 + list-style: none;
41 + padding-left: 0;
42 +}
43 +.menu_bar_content li{
44 + padding: 8px 12px;
45 +}
46 +.menu_bar_icons{
47 + list-style: none;
48 + display: flex;
49 + padding-left:0;
50 +}
51 +.menu_bar_icons li{
52 + padding: 8px 12px;
53 +}
54 +.menu_toggle{
55 + display: none;
56 + position: absolute;
57 + right:32px;
58 + font-size: 24px;
59 +}
60 +@media screen and (max-width: 500px) {
61 + .menu{
62 + flex-direction: column;
63 + align-items: flex-start;
64 + padding: 8px 24px;
65 + }
66 + .menu_bar_content{
67 + display:none;
68 + flex-direction:column;
69 + align-items:center;
70 + width: 100%;
71 + }
72 + .menu_bar_content li{
73 + width: 100%;
74 + text-align: center;
75 + }
76 + .menu_bar_icons{
77 + display:none;
78 + justify-content: center;
79 + width: 100%;
80 + }
81 + .menu_toggle{
82 + display: block;
83 + }
84 + .menu_bar_content.active,
85 + .menu_bar_icons.active{
86 + display:flex;
87 + }
88 +}
89 +button{
90 + background-color:var(--background-color);
91 + border:none;
92 + color:var(--text-color);
93 +}
94 +button:hover{
95 + background-color:var(--accent-color);
96 + border-radius: 4px;
97 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="en">
3 + <head>
4 + <link href="Voico_Info.css" rel="stylesheet" type="text/css">
5 + <meta charset="UTF-8">
6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 + <title>Voicoding</title>
9 + <script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
10 + <script src="menu.js" defer></script>
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">
13 + </head>
14 + <body>
15 + <nav class="menu">
16 + <div class="menu_bar_logo">
17 + <i class="fas fa-microphone-alt"></i>
18 + <a href="Voico_Home.html">Voicoding</a>
19 + </div>
20 + <ul class="menu_bar_content">
21 + <a href="Voico_Home.html"><li>Home</li></a>
22 + <a href="\Manual.txt"><li>Manual</li></a>
23 + <a href="Voico_Contact.html"><li>info</li></a>
24 + </ul>
25 + <ul class="menu_bar_icons">
26 + <li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
27 + <li><a = href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
28 + </ul>
29 + <a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
30 + </nav>
31 +
32 + </body>
33 +</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 <ul class="menu_bar_content"> 20 <ul class="menu_bar_content">
21 <a href="Voico_Home.html"><li>Home</li></a> 21 <a href="Voico_Home.html"><li>Home</li></a>
22 <a href="\Manual.txt"><li>Manual</li></a> 22 <a href="\Manual.txt"><li>Manual</li></a>
23 - <a href="Voico_Contact.html"><li>Contact</li></a> 23 + <a href="Voico_Info.html"><li>info</li></a>
24 </ul> 24 </ul>
25 <ul class="menu_bar_icons"> 25 <ul class="menu_bar_icons">
26 <li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li> 26 <li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
......
1 -<!DOCTYPE html>
2 -<html>
3 -<head>
4 - <meta charset="UTF-8">
5 - <title>Speech to text test</title>
6 - <link rel="shortcut icon" href="#">
7 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 - <link rel="stylesheet" type="text/css" href="https://bootswatch.com/4/cerulean/bootstrap.min.css">
9 -</head>
10 -<body style="padding:50px;">
11 - <h1>Speech to text test</h1>
12 - <div id="controls">
13 - <button id="recordButton">Record</button>
14 - <button id="transcribeButton" disabled>Get transcription</button>
15 - </div>
16 - <div id="output"></div>
17 - <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
18 - <script src="client.js"></script>
19 -</body>
20 -</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,6 +4,7 @@ const fs = require('fs'); ...@@ -4,6 +4,7 @@ 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 = 5501;
7 +app.use(express.static('Voicoding_web'));
7 app.use(express.static('./')); 8 app.use(express.static('./'));
8 async function testGoogleTextToSpeech(audioBuffer) { 9 async function testGoogleTextToSpeech(audioBuffer) {
9 const speech = require('@google-cloud/speech'); 10 const speech = require('@google-cloud/speech');
......