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 | `; | ... | ... |
-
Please register or login to post a comment