곽윤철 / youtube-comment-seperator

Go to a project
Toggle navigation Toggle navigation pinning
Yuncheol Kwak
d272bda6 1 parent f950a05c

Feat modified design

Inline Side-by-side
Showing 1 changed file with 74 additions and 31 deletions
1 var papago = require("./papago.js"); 1 var papago = require("./papago.js");
2 -
3 var http = require('http'); 2 var http = require('http');
4 var fs = require('fs'); 3 var fs = require('fs');
5 var url = require('url'); 4 var url = require('url');
...@@ -28,26 +27,44 @@ function showcomment(response, VideoNum){ ...@@ -28,26 +27,44 @@ function showcomment(response, VideoNum){
28 <!doctype html> 27 <!doctype html>
29 <html> 28 <html>
30 <head> 29 <head>
31 - <title>Youtube Comment</title> 30 + <title>Youtube Comment</title>
32 - <meta charset="utf-8"> 31 + <meta charset="utf-8">
32 + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
33 + <link rel="preconnect" href="https://fonts.googleapis.com">
34 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
35 + <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
36 + <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
33 </head> 37 </head>
34 - <body> 38 + <body style="margin:5%">
35 - <form action="${serverIP}/search" method="get"> 39 + <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;">Youtube Comment Seperator</h1>
36 - <p> 40 + <form action="${serverIP}/search" method="get">
37 - <textarea name="videourl" placeholder="Write your video Url" >${VideoNum}</textarea> 41 + <div class="form-group" style="font-family: 'Ubuntu', sans-serif;">
38 - </p> 42 + <input type="text" name="videourl" placeholder="Type in video ID" class="form-control" style="margin-bottom:10px;">
39 - <p> 43 + <label for="language-select">Choose a language:</label>
40 - <input type="submit"> 44 + <select class="form-control" name="languages" id="language-select" style="display:inline-flex;">
41 - </p> 45 + <option value="all" selected>--Please choose an option--</option>
42 - </form> 46 + <option value="ko">한국어</option>
43 - <br> 47 + <option value="en">English</option>
44 - <br> 48 + <option value="ja">日本語</option>
45 - <iframe width="560" height="315" src="https://www.youtube.com/embed/${VideoNum}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 49 + <option value="zh-CN">中國語</option>
46 - 50 + <option value="es">español</option>
47 - <br> 51 + <option value="fr">Français</option>
48 - <a href="${serverIP}/search?videourl=${VideoNum}&nextpage=${savednpt}"><input type="button" value="댓글 더 불러오기"></a> 52 + <option value="de">Deutsch</option>
49 - <br> 53 + </select>
50 - ${commentDisplay} 54 + <p align="right" style="margin-top:1%">
55 + <button type="submit" class="btn btn-danger">Display Comments</button>
56 + </p>
57 + </div>
58 + </form>
59 + <br>
60 + <br>
61 + <div class="embed-responsive embed-responsive-16by9" style="text-align:center;">
62 + <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/${VideoNum}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
63 + </div>
64 + <br>
65 + <a class="btn btn-dark" href="${serverIP}/search?videourl=${VideoNum}&nextpage=${savednpt}" role="button">Show more comments</a>
66 + <br>
67 + ${commentDisplay}
51 </body> 68 </body>
52 </html> 69 </html>
53 `; 70 `;
...@@ -107,18 +124,44 @@ var app = http.createServer(function(request,response){ // request는 브라우 ...@@ -107,18 +124,44 @@ var app = http.createServer(function(request,response){ // request는 브라우
107 <!doctype html> 124 <!doctype html>
108 <html> 125 <html>
109 <head> 126 <head>
110 - <title>Youtube Comment</title> 127 + <title>Youtube Comment</title>
111 - <meta charset="utf-8"> 128 + <meta charset="utf-8">
129 + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
130 + <link rel="preconnect" href="https://fonts.googleapis.com">
131 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
132 + <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
133 + <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
112 </head> 134 </head>
113 - <body> 135 + <body style="margin:5%">
114 - <form action="${serverIP}/search" method="get"> 136 + <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;">Youtube Comment Seperator</h1>
115 - <p> 137 + <form action="${serverIP}/search" method="get">
116 - <textarea name="videourl" placeholder="Write your video Url"></textarea> 138 + <div class="form-group" style="font-family: 'Ubuntu', sans-serif;">
117 - </p> 139 + <input type="text" name="videourl" placeholder="Type in video ID" class="form-control" style="margin-bottom:10px;">
118 - <p> 140 + <label for="language-select">Choose a language:</label>
119 - <input type="submit"> 141 + <select class="form-control" name="languages" id="language-select" style="display:inline-flex;">
120 - </p> 142 + <option value="all" selected>--Please choose an option--</option>
121 - </form> 143 + <option value="ko">한국어</option>
144 + <option value="en">English</option>
145 + <option value="ja">日本語</option>
146 + <option value="zh-CN">中國語</option>
147 + <option value="es">español</option>
148 + <option value="fr">Français</option>
149 + <option value="de">Deutsch</option>
150 + </select>
151 + <p align="right" style="margin-top:1%">
152 + <button type="submit" class="btn btn-danger">Display Comments</button>
153 + </p>
154 + </div>
155 + </form>
156 + <br>
157 + <br>
158 + <div class="embed-responsive embed-responsive-16by9" style="text-align:center;">
159 + <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/${VideoNum}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
160 + </div>
161 + <br>
162 + <a class="btn btn-dark" href="${serverIP}/search?videourl=${VideoNum}&nextpage=${savednpt}" role="button">Show more comments</a>
163 + <br>
164 + ${commentDisplay}
122 </body> 165 </body>
123 </html> 166 </html>
124 `; 167 `;
......