곽윤철 / 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 59 additions and 16 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');
...@@ -30,22 +29,40 @@ function showcomment(response, VideoNum){ ...@@ -30,22 +29,40 @@ function showcomment(response, VideoNum){
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%">
39 + <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;">Youtube Comment Seperator</h1>
35 <form action="${serverIP}/search" method="get"> 40 <form action="${serverIP}/search" method="get">
36 - <p> 41 + <div class="form-group" style="font-family: 'Ubuntu', sans-serif;">
37 - <textarea name="videourl" placeholder="Write your video Url" >${VideoNum}</textarea> 42 + <input type="text" name="videourl" placeholder="Type in video ID" class="form-control" style="margin-bottom:10px;">
38 - </p> 43 + <label for="language-select">Choose a language:</label>
39 - <p> 44 + <select class="form-control" name="languages" id="language-select" style="display:inline-flex;">
40 - <input type="submit"> 45 + <option value="all" selected>--Please choose an option--</option>
46 + <option value="ko">한국어</option>
47 + <option value="en">English</option>
48 + <option value="ja">日本語</option>
49 + <option value="zh-CN">中國語</option>
50 + <option value="es">español</option>
51 + <option value="fr">Français</option>
52 + <option value="de">Deutsch</option>
53 + </select>
54 + <p align="right" style="margin-top:1%">
55 + <button type="submit" class="btn btn-danger">Display Comments</button>
41 </p> 56 </p>
57 + </div>
42 </form> 58 </form>
43 <br> 59 <br>
44 <br> 60 <br>
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> 61 + <div class="embed-responsive embed-responsive-16by9" style="text-align:center;">
46 - 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>
47 <br> 64 <br>
48 - <a href="${serverIP}/search?videourl=${VideoNum}&nextpage=${savednpt}"><input type="button" value="댓글 더 불러오기"></a> 65 + <a class="btn btn-dark" href="${serverIP}/search?videourl=${VideoNum}&nextpage=${savednpt}" role="button">Show more comments</a>
49 <br> 66 <br>
50 ${commentDisplay} 67 ${commentDisplay}
51 </body> 68 </body>
...@@ -109,16 +126,42 @@ var app = http.createServer(function(request,response){ // request는 브라우 ...@@ -109,16 +126,42 @@ var app = http.createServer(function(request,response){ // request는 브라우
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%">
136 + <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;">Youtube Comment Seperator</h1>
114 <form action="${serverIP}/search" method="get"> 137 <form action="${serverIP}/search" method="get">
115 - <p> 138 + <div class="form-group" style="font-family: 'Ubuntu', sans-serif;">
116 - <textarea name="videourl" placeholder="Write your video Url"></textarea> 139 + <input type="text" name="videourl" placeholder="Type in video ID" class="form-control" style="margin-bottom:10px;">
117 - </p> 140 + <label for="language-select">Choose a language:</label>
118 - <p> 141 + <select class="form-control" name="languages" id="language-select" style="display:inline-flex;">
119 - <input type="submit"> 142 + <option value="all" selected>--Please choose an option--</option>
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>
120 </p> 153 </p>
154 + </div>
121 </form> 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 `;
......