├── LICENSE
├── README.md
├── anime.php
├── animes.php
├── css
    └── app.css
├── index.php
├── schedule.php
└── watch.php


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 João Magalhães
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img src="https://cdn-icons-png.flaticon.com/512/203/203262.png" width=150px" align="center">
 3 | </p>
 4 |                                                                         
 5 | <h1 align="center">Orange Anime</h1>
 6 | <p align="center" style="color: #ccc;">
 7 | This project consists of the realization of an anime streaming website that uses third apis and <a href="https://github.com/jozdev/animecrawlerapi">animesonline.ru crawler api</a>
 8 | 
 9 | 
10 | ## Table of Content
11 | 
12 | - [Warning](#warning)
13 | - [Demonstration](#demonstration)
14 | - [Bugs](#bugs)
15 | - [Contributors](#contributors)
16 | - [License](#license)
17 | 
18 | 
19 | 
20 | ## Warning
21 | 
22 | - This project was developed with the intention of dealing with apis and creation of an streaming website and only for learning purposes.
23 | - This project was carried out through the use of scraping anime websites with portuguese subtitles, some features like gender need to be portuguese writing genre.
24 | 
25 | 
26 | ## Demonstration 
27 | 
28 | <h2 align="center">Home</h1>
29 | <p align="center">
30 |  <img src="https://cdn.discordapp.com/attachments/450718681492750344/713497861609750668/unknown.png"  align="center">
31 |  
32 |  <p align="center">In this section the user can see the recent animes added.</p></p>
33 | 
34 | <h2 align="center">Animes</h1>
35 | <p align="center">
36 |  <img src="https://cdn.discordapp.com/attachments/450718681492750344/713497794949677076/unknown.png"  align="center">
37 |  <p align="center">
38 |  <img src="https://cdn.discordapp.com/attachments/664456763478900756/713932225640398928/unknown.png"  align="center">
39 | 
40 |  <p align="center">In this section the user can see all animes with begin with first letter and more information about.</p></p>
41 |          
42 | <h2 align="center">Watch</h1>
43 | <p align="center">
44 |  <img src="https://cdn.discordapp.com/attachments/676884266617143354/713494314566549614/watch2.png"  align="center">
45 |  
46 |  <p align="center">In this section the user can watch episodes with different players.</p></p>
47 |       
48 | <h2 align="center">Schedule</h1>
49 | <p align="center">
50 |  <img src="https://cdn.discordapp.com/attachments/450718681492750344/713497721063080086/unknown.png"  align="center">
51 |  
52 |  <p align="center">In this section the user can see which day of the week the anime of the season comes out.</p></p>
53 |          
54 |          
55 | ## Bugs
56 | 
57 | I appreciate any bug reported or improvement made!
58 | 
59 | - Before reporting bugs:
60 | [check if they have already been reported](https://github.com/jozdev/Anime-Crawler-API/issues)
61 |                                                                                                                                       
62 | ## Contributors
63 | 
64 | <table align="center">
65 |   <tr>
66 |     <td align="center"><a href="https://github.com/jozdev"><img src="https://avatars0.githubusercontent.com/u/58850639?s=460&u=7b99346947ef28fb23b98604356fd3b3013c418b&v=4" width="100px;" alt=""/><br /><sub><b>jozdev</b></sub></a><br /><a title="Code">💻💡</a></td>
67 |         <td align="center"><a href="https://github.com/thurdev"><img src="https://avatars0.githubusercontent.com/u/34294813?s=400&u=725e4548b484417d368e03fb7c619bd3cbd0f12f&v=4" width="100px;" alt=""/><br /><sub><b>thurdev</b></sub></a><br /><a title="Code">💻</a></td>
68 |   </tr>
69 | </table>
70 | 
71 | <i>This project was made possible by the contributors mentioned above</i>
72 | 
73 | ## License
74 | 
75 | MIT
76 | 
77 | 
78 |  <i style='text-align: center; color: red;font-size: 13px;'>CopyRight © jozdev 2020</i> 
79 | 


--------------------------------------------------------------------------------
/anime.php:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <title>OrangeAnime</title>
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <link rel="shortcut icon" href="https://i.ya-webdesign.com/images/transparent-haikyuu-3.png" />
  9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700|Roboto%20Condensed:700">
 10 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 11 |     <link rel="stylesheet" href="css/app.css">
 12 |     <meta name="theme-color" content="#171717">
 13 |     <script src='https://kit.fontawesome.com/3cc432bb58.js' crossorigin='anonymous'></script>
 14 |     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
 15 |     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 16 | 
 17 |     <style>
 18 |         * {
 19 |             font-family: 'Montserrat', sans-serif;
 20 |         }
 21 | 
 22 |         ::-webkit-scrollbar {
 23 |             width: 10px;
 24 |         }
 25 | 
 26 |         ::-webkit-scrollbar-track {
 27 |             box-shadow: inset 0 0 5px #171717;
 28 |             background-color: #171717;
 29 |         }
 30 | 
 31 |         ::-webkit-scrollbar-thumb {
 32 |             background: #2e2d2d;
 33 |         }
 34 | 
 35 | 
 36 |         .col-md-12 {
 37 |             border: 5px solid transparent;
 38 |             font-size: 12px;
 39 |         }
 40 |         .btn-search{
 41 |             background-color: transparent;
 42 |             border: 1px solid #ff5c08;
 43 |             color: #ff5c08;
 44 |             transition: 0.5s;
 45 |             display: inline-block;
 46 |         }
 47 |         .btn-search:hover{
 48 |             color: black;
 49 |             background-color: #ff5c08;
 50 |             transition: 0.5s;
 51 |         }
 52 |         .input-search{
 53 |             background-color: #171717;
 54 |             height: 40px;
 55 |             border: none;
 56 |             display: inline-block;
 57 |             width: 300px;
 58 |         }
 59 |         #found-anime{
 60 |             background-color: black;
 61 |             width: 15.8%;
 62 |             height: 100px;
 63 |             z-index: -1;
 64 |             position: absolute;
 65 |             left: 82.8%;
 66 |             margin-top: 3%;
 67 |             overflow-y: auto;
 68 |             display: none;
 69 |         }
 70 |         a {
 71 |             text-decoration:none !important;
 72 | 
 73 |         }
 74 | 
 75 |         .homeicon:hover {
 76 |             
 77 |         }
 78 | 
 79 |         button {
 80 |             border: 1px solid #2e2d2d;
 81 |             padding:10px;
 82 |             border-radius:6px;
 83 |             background: #2e2d2d;
 84 |             color:white;
 85 |             
 86 |         }
 87 | 
 88 |         .button:hover {
 89 |             background-color:#ff5c08;
 90 |         }
 91 | 
 92 |         .ImageSizeAttr {
 93 |             width: 225px;
 94 |             height: 310px;  
 95 |             border-radius:6px;  
 96 |             float:left;          
 97 |              }
 98 |              .ImageSizeAttr:hover{
 99 |             opacity: .3;
100 |         }
101 | 
102 |     </style>
103 | </head>
104 | 
105 | <body id="body">
106 |     <div class="navbar">
107 |         <a href="index.php" class="logo" style="color:grey">
108 |         &nbsp;&nbsp;<span class="primary">ORANGE</span>ANI<img src="https://i.ya-webdesign.com/images/transparent-haikyuu-3.png" style="width:25px;height:25px;">ME
109 |         </a>
110 |         <a href="animes.php">
111 |             <span class="menu" style="color:white;"><i class="fas fa-globe-europe"></i> ANIMES</span>
112 |         </a>
113 |         <a href="schedule.php">
114 |             <span class="menu" ><i class="far fa-clock"></i> SCHEDULE</span>
115 |         </a>
116 |         <div class="form-inline">
117 |             <input class="input-search mr-sm-2" id="search-anime" type="text" placeholder="Search" aria-label="Search">
118 |         </div>
119 |         <div id="found-anime">
120 |             <center>
121 |             <br>
122 |                 <p id="found-anime-title"></p>
123 |             </center>
124 |         </div>
125 |     </div>
126 | 
127 |     <div class="notice">
128 |         <h1 class="underline">
129 |             ANIME
130 |         </h1>
131 |         <div class="container">
132 |             <div style="margin-left:2%">
133 |         </div>
134 | <br>
135 |             <div class="row">
136 |                 <div class="col-md-12" id="animes">
137 |                 </div>
138 |             </div>
139 |         </div>
140 |     </div>
141 |     <script>
142 |             var k;
143 |            console.log(k);
144 |                     k = '<?= $_GET['anime'];?>';
145 | 
146 | 
147 |             /* API RESULT */
148 |             $.ajax({
149 |             url: 'http://localhost:3000/animeinfo/' + k ,
150 |             method: 'GET',
151 |             success: (data) => {
152 |                 console.log(data);
153 |                 var i;
154 |                 let animes = document.getElementById('animes');
155 |                 for (i = 0; i < data.length; i++) {
156 |                 let redirect = document.createElement('a');
157 |                 let div_anime = document.createElement('div');
158 |                 let img_anime = document.createElement('img');
159 |                 let button = document.createElement('button');
160 |                 let title_anime = document.createElement('div');
161 |                 let p = document.createElement('p');
162 |                 let h2 = document.createElement('h2');
163 |                 img_anime.classList.add('ImageSizeAttr');
164 |                 img_anime.src = `${data[i].image}`;
165 |                 button.innerHTML = `Watch`;
166 |                 redirect.href = "watch.php?anime=" + data[i].url;
167 |                 title_anime.classList.add("col-md-12");
168 |                 title_anime.classList.add("text-center");
169 |                 h2.innerHTML = data[i].title;
170 |                 p.innerHTML = data[i].sinopse;
171 |                 title_anime.appendChild(h2);
172 |                 title_anime.appendChild(p);
173 |                 title_anime.appendChild(button);   
174 |                 title_anime.appendChild(redirect);
175 |                 redirect.appendChild(button); 
176 |                 div_anime.appendChild(img_anime);
177 |                 div_anime.appendChild(title_anime);
178 |                 animes.appendChild(div_anime);  
179 |                 }
180 |             }
181 |         });
182 |          
183 | 
184 |            
185 | 
186 | 
187 |     </script>
188 | 
189 | </body>
190 | 
191 | </html>
192 | 


--------------------------------------------------------------------------------
/animes.php:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <title>OrangeAnime</title>
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <link rel="shortcut icon" href="https://i.ya-webdesign.com/images/transparent-haikyuu-3.png" />
  9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700|Roboto%20Condensed:700">
 10 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 11 |     <link rel="stylesheet" href="css/app.css">
 12 |     <meta name="theme-color" content="#171717">
 13 |     <script src='https://kit.fontawesome.com/3cc432bb58.js' crossorigin='anonymous'></script>
 14 |     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
 15 |     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 16 | 
 17 |     <style>
 18 |         * {
 19 |             font-family: 'Montserrat', sans-serif;
 20 |         }
 21 | 
 22 |         ::-webkit-scrollbar {
 23 |             width: 10px;
 24 |         }
 25 | 
 26 |         ::-webkit-scrollbar-track {
 27 |             box-shadow: inset 0 0 5px #171717;
 28 |             background-color: #171717;
 29 |         }
 30 | 
 31 |         ::-webkit-scrollbar-thumb {
 32 |             background: #2e2d2d;
 33 |         }
 34 | 
 35 | 
 36 |         .col-md-12 {
 37 |             border: 5px solid transparent;
 38 |             font-size: 12px;
 39 |         }
 40 |         .btn-search{
 41 |             background-color: transparent;
 42 |             border: 1px solid #ff5c08;
 43 |             color: #ff5c08;
 44 |             transition: 0.5s;
 45 |             display: inline-block;
 46 |         }
 47 |         .btn-search:hover{
 48 |             color: black;
 49 |             background-color: #ff5c08;
 50 |             transition: 0.5s;
 51 |         }
 52 |         .input-search{
 53 |             background-color: #171717;
 54 |             height: 40px;
 55 |             border: none;
 56 |             display: inline-block;
 57 |             width: 300px;
 58 |         }
 59 |         #found-anime{
 60 |             background-color: black;
 61 |             width: 15.8%;
 62 |             height: 100px;
 63 |             z-index: -1;
 64 |             position: absolute;
 65 |             left: 82.8%;
 66 |             margin-top: 3%;
 67 |             overflow-y: auto;
 68 |             display: none;
 69 |         }
 70 |         a {
 71 |             text-decoration:none !important;
 72 | 
 73 |         }
 74 | 
 75 |         a:hover {
 76 |             color: white;
 77 |         }
 78 | 
 79 |         .homeicon:hover {
 80 |             
 81 |         }
 82 | 
 83 |         button {
 84 |             border: 1px solid #2e2d2d;
 85 |             padding:10px;
 86 |             border-radius:6px;
 87 |             background: #2e2d2d;
 88 |             color:white;
 89 |             
 90 |         }
 91 | 
 92 |         .button:hover {
 93 |             background-color:#ff5c08;
 94 |         }
 95 | 
 96 |         .ImageSizeAttr {
 97 |             width: 225px;
 98 |             height: 310px;  
 99 |             border-radius:6px;            
100 |              }
101 |              .ImageSizeAttr:hover{
102 |             opacity: .3;
103 |         }
104 | 
105 |     </style>
106 | </head>
107 | 
108 | <body id="body">
109 |     <div class="navbar">
110 |         <a href="index.php" class="logo" style="color:grey">
111 |         &nbsp;&nbsp;<span class="primary">ORANGE</span>ANI<img src="https://i.ya-webdesign.com/images/transparent-haikyuu-3.png" style="width:25px;height:25px;">ME
112 |         </a>
113 |         <a href="animes.php">
114 |             <span class="menu" style="color:white;"><i class="fas fa-globe-europe"></i> ANIMES</span>
115 |         </a>
116 |         <a href="schedule.php">
117 |             <span class="menu" ><i class="far fa-clock"></i> SCHEDULE</span>
118 |         </a>
119 |         <div class="form-inline">
120 |             <input class="input-search mr-sm-2" id="search-anime" type="text" placeholder="Search" aria-label="Search">
121 |         </div>
122 |         <div id="found-anime">
123 |             <center>
124 |             <br>
125 |                 <p id="found-anime-title"></p>
126 |             </center>
127 |         </div>
128 |     </div>
129 | 
130 |     <div class="notice">
131 |         <h1 class="underline">
132 |             ANIMES
133 |         </h1>
134 |         <div class="container">
135 |             <div style="margin-left:2%">
136 |             <form action="" method="POST">
137 |             <button id="prev" class="button" style="border-radius:0px !important;">Prev</button>
138 |             <button id="a" class="button">A</button>
139 |             <button id="b" class="button">B</button>
140 |             <button id="c" class="button">C</button>
141 |             <button id="d" class="button">D</button>
142 |             <button id="e" class="button">E</button>
143 |             <button id="f" class="button">F</button>
144 |             <button id="g" class="button">G</button>
145 |             <button id="h" class="button">H</button>
146 |             <button id="i" class="button">I</button>
147 |             <button id="j" class="button">J</button>
148 |             <button id="k" class="button">K</button>
149 |             <button id="l" class="button">L</button>
150 |             <button id="m" class="button">M</button>
151 |             <button id="n" class="button">N</button>
152 |             <button id="o" class="button">O</button>
153 |             <button id="p" class="button">P</button>
154 |             <button id="q" class="button">Q</button>
155 |             <button id="r" class="button">R</button>
156 |             <button id="s" class="button">S</button>
157 |             <button id="t" class="button">T</button>
158 |             <button id="u" class="button">U</button>
159 |             <button id="v" class="button">V</button>
160 |             <button id="w" class="button">W</button>
161 |             <button id="x" class="button">X</button>
162 |             <button id="y" class="button">Y</button>
163 |             <button id="z" class="button">Z</button>
164 |            <button id="next" class="button" style="border-radius:0px !important;">Next</button></form>
165 |         </div>
166 | <br>
167 |             <div class="row">
168 |                 <div class="col-md-12" id="animes">
169 |                 </div>
170 |             </div>
171 |         </div>
172 |     </div>
173 |     <script>
174 |             var k;
175 |             <?php
176 |                 if(!isset($_GET['letter'])){
177 |                     ?>
178 |                     k = 0;
179 |                     <?php
180 |                 }else{
181 |                     ?>
182 |                     k = '<?= $_GET['letter'];?>';
183 |                     <?php
184 |                 }
185 |             ?>
186 |             var d = 1; /* Anime Pagination */
187 | 
188 |             $("#prev").click(function(e) {
189 |             e.preventDefault();
190 |              d = d - 1;
191 |              console.log(d);
192 |             });
193 |             $("#next").click(function(e) {
194 |             e.preventDefault();
195 |              d += 1;
196 |              console.log(d);
197 | 
198 |             });
199 | 
200 |             $("#a").click(function(e) {
201 |             e.preventDefault();
202 |              window.location.href = '?letter=a';
203 |             });
204 | 
205 |             $("#b").click(function(e) {
206 |              e.preventDefault();
207 |              window.location.href = '?letter=b';
208 |             });
209 |             $("#c").click(function(e) {
210 |             e.preventDefault();
211 |              window.location.href = '?letter=c';
212 |             });
213 | 
214 |             $("#d").click(function(e) {
215 |              e.preventDefault();
216 |              window.location.href = '?letter=d';
217 |             });
218 |             $("#e").click(function(e) {
219 |             e.preventDefault();
220 |              window.location.href = '?letter=e';
221 |             });
222 | 
223 |             $("#f").click(function(e) {
224 |              e.preventDefault();
225 |              window.location.href = '?letter=f';
226 |             });
227 |             $("#g").click(function(e) {
228 |             e.preventDefault();
229 |              window.location.href = '?letter=g';
230 |             });
231 | 
232 |             $("#h").click(function(e) {
233 |              e.preventDefault();
234 |              window.location.href = '?letter=h';
235 |             });
236 |             $("#i").click(function(e) {
237 |             e.preventDefault();
238 |              window.location.href = '?letter=i';
239 |             });
240 | 
241 |             $("#j").click(function(e) {
242 |              e.preventDefault();
243 |              window.location.href = '?letter=j';
244 |             });
245 |             $("#k").click(function(e) {
246 |             e.preventDefault();
247 |              window.location.href = '?letter=k';
248 |             });
249 | 
250 |             $("#l").click(function(e) {
251 |              e.preventDefault();
252 |              window.location.href = '?letter=l';
253 |             });
254 |             $("#m").click(function(e) {
255 |             e.preventDefault();
256 |              window.location.href = '?letter=m';
257 |             });
258 | 
259 |             $("#n").click(function(e) {
260 |              e.preventDefault();
261 |              window.location.href = '?letter=n';
262 |             });
263 |             $("#o").click(function(e) {
264 |             e.preventDefault();
265 |              window.location.href = '?letter=o';
266 |             });
267 | 
268 |             $("#p").click(function(e) {
269 |              e.preventDefault();
270 |              window.location.href = '?letter=p';
271 |             });
272 |             $("#q").click(function(e) {
273 |              e.preventDefault();
274 |              window.location.href = '?letter=q';
275 |             });
276 |             $("#r").click(function(e) {
277 |              e.preventDefault();
278 |              window.location.href = '?letter=r';
279 |             });
280 |             $("#s").click(function(e) {
281 |              e.preventDefault();
282 |              window.location.href = '?letter=s';
283 |             });
284 |             $("#t").click(function(e) {
285 |              e.preventDefault();
286 |              window.location.href = '?letter=t';
287 |             });
288 |             $("#u").click(function(e) {
289 |              e.preventDefault();
290 |              window.location.href = '?letter=u';
291 |             });
292 |             $("#v").click(function(e) {
293 |              e.preventDefault();
294 |              window.location.href = '?letter=v';
295 |             });
296 |             $("#w").click(function(e) {
297 |              e.preventDefault();
298 |              window.location.href = '?letter=w';
299 |             });
300 |             $("#x").click(function(e) {
301 |              e.preventDefault();
302 |              window.location.href = '?letter=x';
303 |             });
304 |             $("#y").click(function(e) {
305 |              e.preventDefault();
306 |              window.location.href = '?letter=y';
307 |             });
308 |             $("#z").click(function(e) {
309 |              e.preventDefault();
310 |              window.location.href = '?letter=z';
311 |             });
312 | 
313 | 
314 |             let letters = [
315 |             "a",
316 |             "b",
317 |             "c",
318 |             "d",
319 |             "e",
320 |             "f",
321 |             "g",
322 |             "h",
323 |             "i",
324 |             "j",
325 |             "k",
326 |             "l",
327 |             "m",
328 |             "n",
329 |             "o",
330 |             "p",
331 |             "q",
332 |             "r",
333 |             "s",
334 |             "t",
335 |             "u",
336 |             "v",
337 |             "w",
338 |             "x",
339 |             "y",
340 |             "z",
341 |         ];
342 | 
343 | 
344 |          if(k != "0"){
345 |             let letter = k;
346 |             if(letters.includes(letter)){
347 |                 var i;
348 |             for (i = 1; i <= 10; i++) { 
349 |             let url = 'http://localhost:3000/anime/'+i;       
350 |                 $.ajax({
351 |                     url: url,
352 |                     method: 'GET',
353 |                     success: (res) => {
354 |                         res.forEach(anime => {
355 |                             if(anime.title.charAt(0).toUpperCase() == k.toUpperCase()){
356 |                                 let animes = document.getElementById('animes');
357 |                                 let redirect = document.createElement('a');
358 |                                 let div_anime = document.createElement('div');
359 |                                 let img_anime = document.createElement('img');
360 |                                 let title_anime = document.createElement('div');
361 |                                 let p = document.createElement('p');
362 |                                 div_anime.classList.add("col-md-3");
363 |                                 div_anime.style.display = "inline-block";
364 |                                 img_anime.classList.add('ImageSizeAttr');
365 |                                 img_anime.src = `${anime.image}`;
366 |                                 redirect.href = "anime.php?anime=" + anime.url;
367 |                                 title_anime.classList.add("col-md-12");
368 |                                 title_anime.classList.add("text-center");
369 |                                 p.innerHTML = anime.title;
370 |                                 title_anime.appendChild(p);
371 |                                 redirect.appendChild(img_anime); 
372 |                                 redirect.appendChild(title_anime); 
373 |                                 div_anime.appendChild(redirect);
374 |                                 animes.appendChild(div_anime);  
375 |                             }
376 |                         })
377 |                 
378 |                     }
379 |                 }); }
380 |             }else{
381 |                 window.location.href='./animes.php';
382 |             }
383 |          }else{
384 | 
385 |             /* API RESULT */
386 |             var i;
387 |             for (i = 1; i <= 10; i++) { 
388 |             let url = 'http://localhost:3000/anime/'+i;        
389 | 
390 |             $.ajax({
391 |             url: url ,
392 |             method: 'GET',
393 |             success: (data) => {
394 |                 var i;
395 |                 let animes = document.getElementById('animes');
396 |                 for (i = 0; i < data.length; i++) {
397 |                 let redirect = document.createElement('a');
398 |                 let div_anime = document.createElement('div');
399 |                 let img_anime = document.createElement('img');
400 |                 let title_anime = document.createElement('div');
401 |                 let p = document.createElement('p');
402 |                 redirect.href = "anime.php?anime=" + data[i].url;
403 |                 div_anime.classList.add("col-md-3");
404 |                 div_anime.style.display = "inline-block";
405 |                 img_anime.classList.add('ImageSizeAttr');
406 |                 img_anime.src = `${data[i].image}`;
407 |                 title_anime.classList.add("col-md-12");
408 |                 title_anime.classList.add("text-center");
409 |                 p.innerHTML = data[i].title;
410 |                 title_anime.appendChild(p);
411 |                 redirect.appendChild(img_anime); 
412 |                 redirect.appendChild(title_anime); 
413 |                 div_anime.appendChild(redirect);
414 |                 animes.appendChild(div_anime);  
415 | 
416 |                 }
417 |             }
418 |         });
419 |     }
420 |          }
421 | 
422 |            
423 | 
424 | 
425 |     </script>
426 | 
427 | </body>
428 | 
429 | </html>
430 | 


--------------------------------------------------------------------------------
/css/app.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |     font-size: 16px;
  3 |     line-height: 1.15;
  4 |     -webkit-text-size-adjust: 100%;
  5 |     height: 100%;
  6 |     box-sizing: border-box
  7 | }
  8 | 
  9 | *,
 10 | body {
 11 |     margin: 0;
 12 |     box-sizing: inherit
 13 | }
 14 | 
 15 | body,
 16 | p {
 17 |     line-height: 1.4285em
 18 | }
 19 | 
 20 | .menu {
 21 |     color:#777678;
 22 | 
 23 | }
 24 | 
 25 | .menu:hover {
 26 |     color:#ff5c08;
 27 |     
 28 | }
 29 | 
 30 | 
 31 | body,
 32 | a {
 33 |     color: #f9f9f9
 34 | }
 35 | 
 36 | body {
 37 |     display: -webkit-box;
 38 |     display: -ms-flexbox;
 39 |     display: flex;
 40 |     -ms-flex-direction: column;
 41 |     flex-direction: column;
 42 |     height: 100%;
 43 |     min-height: 100vh;
 44 |     min-width: 320px;
 45 |      background: #171717; 
 46 |     font-family: Roboto, Helvetica, sans-serif;
 47 |     font-size: 14px;
 48 |     -webkit-font-smoothing: antialiased;
 49 |     font-smoothing: antialiased
 50 | }
 51 | 
 52 | a {
 53 |     text-decoration: none
 54 | }
 55 | 
 56 | .navbar {
 57 |     position: fixed;
 58 |     display: -webkit-box;
 59 |     display: -ms-flexbox;
 60 |     display: flex;
 61 |     -ms-flex-direction: row;
 62 |     flex-direction: row;
 63 |     -webkit-box-align: center;
 64 |     -ms-flex-align: center;
 65 |     align-items: center;
 66 |     width: 100%;
 67 |     min-height: 3.5em;
 68 |     /*padding: 1.1875em 1.125em;*/
 69 |     background: #101010;
 70 |     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .25);
 71 |     font-size: 13px;
 72 |     font-family: Roboto Condensed, Roboto, Helvetica, sans-serif;
 73 |     z-index: 101
 74 | }
 75 | 
 76 | .navbar>.logo {
 77 |     display: -webkit-box;
 78 |     display: -ms-flexbox;
 79 |     display: flex;
 80 |     -webkit-box-align: center;
 81 |     -ms-flex-align: center;
 82 |     align-items: center;
 83 |     font-weight: 700
 84 | }
 85 | 
 86 | .navbar>.menu {
 87 |     display: -webkit-box;
 88 |     display: -ms-flexbox;
 89 |     display: flex;
 90 |     -webkit-box-align: center;
 91 |     -ms-flex-align: center;
 92 |     align-items: center;
 93 |     font-weight: 700;
 94 |     color:#777678;
 95 |     
 96 | }
 97 | 
 98 | .navbar>.icon {
 99 |     margin-left: auto;
100 | }
101 | 
102 | .input {
103 |     color:white;
104 | }
105 | 
106 | input {
107 |     width: 85%;
108 |     padding: 10px;
109 |     background-color: #ffffff0a;
110 |     color:white;
111 |     border: 1px solid rgb(137, 160, 181, .3);
112 |     border-radius: 6px;
113 |     outline: none;
114 |     transition: 0.3s ease-in;
115 | }
116 | 
117 | .logo>.primary {
118 |     color: #ff5c08;
119 | }
120 | 
121 | .logo>.circle {
122 |     fill: #ff5c08;
123 |     margin: 1px 0 0 1px
124 | }
125 | 
126 | .notice {
127 |     display: -webkit-box;
128 |     display: -ms-flexbox;
129 |     display: flex;
130 |     -ms-flex-direction: column;
131 |     flex-direction: column;
132 |     margin: 90px auto 50px;
133 |     padding: 0 2rem;
134 |     margin-right:100%;
135 |     width:100%;
136 | }
137 | 
138 | .underline {
139 |     padding-bottom: 3px;
140 |     border-bottom: 2px solid #ff5c08;
141 | }
142 | 
143 | .notice>h1 {
144 |     font-family: Roboto Condensed, Roboto, Helvetica, sans-serif;
145 |     font-size: 1.5rem;
146 |     font-weight: 700;
147 |     letter-spacing: -.25px;
148 |     line-height: 1.5em;
149 |     margin: 0 0 2.5rem 
150 |     
151 | }
152 | 
153 | .notice>h1 .sad-face {
154 |     color: #b9b9b9;
155 |     margin: 0 2rem 0 0
156 | }
157 | 
158 | .notice>.desc {
159 |     font-size: 1rem;
160 |     font-weight: 400;
161 |     color: #b9b9b9;
162 |     max-width: 800px
163 | }
164 | 
165 | .notice>.desc p {
166 |     margin: 0 0 1.75em;
167 |     line-height: 1.65em
168 | }
169 | 
170 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | session_start();
  3 | 
  4 | ?>
  5 | <html lang="en">
  6 | 
  7 | <head>
  8 |     <meta charset="utf-8">
  9 |     <title>OrangeAnime</title>
 10 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 11 |     <link rel="shortcut icon" href="https://i.ya-webdesign.com/images/transparent-haikyuu-3.png" />
 12 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700|Roboto%20Condensed:700">
 13 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 14 |     <link rel="stylesheet" href="css/app.css">
 15 |     <meta name="theme-color" content="#171717">
 16 |     <script src='https://kit.fontawesome.com/3cc432bb58.js' crossorigin='anonymous'></script>
 17 |     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
 18 |     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 19 | 
 20 |     <style>
 21 |         * {
 22 |             font-family: 'Montserrat', sans-serif;
 23 |         }
 24 | 
 25 |         ::-webkit-scrollbar {
 26 |             width: 10px;
 27 |         }
 28 | 
 29 |         ::-webkit-scrollbar-track {
 30 |             box-shadow: inset 0 0 5px #171717;
 31 |             background-color: #171717;
 32 |         }
 33 | 
 34 |         ::-webkit-scrollbar-thumb {
 35 |             background: #2e2d2d;
 36 |         }
 37 | 
 38 |         .col-md-12 {
 39 |             border: 5px solid transparent;
 40 |             font-size: 12px;
 41 |         }
 42 |         .btn-search{
 43 |             background-color: transparent;
 44 |             border: 1px solid #ff5c08;
 45 |             color: #ff5c08;
 46 |             transition: 0.5s;
 47 |             display: inline-block;
 48 |         }
 49 |         .btn-search:hover{
 50 |             color: black;
 51 |             background-color: #ff5c08;
 52 |             transition: 0.5s;
 53 |         }
 54 |         .input-search{
 55 |             background-color: #171717;
 56 |             height: 40px;
 57 |             border: none;
 58 |             display: inline-block;
 59 |             width: 300px;
 60 |         }
 61 |         #found-anime{
 62 |             background-color: black;
 63 |             width: 15.8%;
 64 |             height: 100px;
 65 |             z-index: -1;
 66 |             position: absolute;
 67 |             left: 82.8%;
 68 |             margin-top: 3%;
 69 |             overflow-y: auto;
 70 |             display: none;
 71 |         }
 72 |         a {
 73 |             text-decoration:none !important;
 74 |             
 75 |         }
 76 |         
 77 |         a:hover{
 78 |             color:white;
 79 |         }
 80 |         .ImageSizeAttr {
 81 |             border-radius:6px;
 82 |             width:200px;
 83 |             height:275px;
 84 |              }
 85 |         .ImageSizeAttr:hover{
 86 |             opacity: .3;
 87 |         }
 88 |     </style>
 89 | </head>
 90 | 
 91 | <body id="body">
 92 |     <div class="navbar">
 93 |         <a href="index.php" class="logo">
 94 |             &nbsp;&nbsp;<span class="primary">ORANGE</span>ANI<img src="https://i.ya-webdesign.com/images/transparent-haikyuu-3.png" style="width:25px;height:25px;">ME
 95 |         </a>
 96 |         <a href="animes.php">
 97 |             <span class="menu"><i class="fas fa-globe-europe"></i> ANIMES</span>
 98 |         </a>
 99 |         <a href="schedule.php">
100 |             <span class="menu"><i class="far fa-clock"></i> SCHEDULE</span>
101 |         </a>
102 |         <div class="form-inline">
103 |             <input class="input-search mr-sm-2" id="search-anime" type="text" placeholder="Search" aria-label="Search">
104 |         </div>
105 |         <div id="found-anime">
106 |             <center>
107 |             <br>
108 |                 <p id="found-anime-title"></p>
109 |             </center>
110 |         </div>
111 |     </div>
112 | 
113 |     <div class="notice">
114 |         <h1 class="underline">
115 |             RECENT ANIME
116 |         </h1>
117 |         <div class="contain er">
118 |             <div class="row">
119 |                 <div class="col-md-12" id="animes">
120 |                 </div>
121 |             </div>
122 |         </div>
123 |     </div>
124 |         <script>
125 |             $.ajax({
126 |                 url: 'http://localhost:3000/last',
127 |                 method: 'GET',
128 |                 success: (data) => {
129 |                     let animes = document.getElementById('animes');
130 | 
131 |                     data.forEach((element) => {
132 |                         let url = "http://localhost:3000/video/";
133 |                         let final_url = url + element.url;
134 |                         console.log(element);
135 |                         let div_anime = document.createElement('div');
136 |                         let red_anime = document.createElement('a');
137 |                         let img_anime = document.createElement('img');
138 |                         let title_anime = document.createElement('div');
139 |                         let p = document.createElement('p');
140 |                         div_anime.classList.add("col-md-3");
141 |                         div_anime.style.display = "inline-block";
142 |                         red_anime.href = "watch.php?anime=" + element.url; //pegar esse atributo 
143 |                         img_anime.src = `${element.image}`;
144 |                         title_anime.classList.add("col-md-12");
145 |                         img_anime.classList.add('ImageSizeAttr');
146 |                         p.innerHTML = element.title;
147 |                         title_anime.appendChild(p);
148 |                         div_anime.appendChild(red_anime);
149 |                         red_anime.appendChild(img_anime);
150 |                         red_anime.appendChild(title_anime);
151 |                         animes.appendChild(div_anime);
152 |                     });
153 |                 }
154 |             });
155 | 
156 | 
157 |             function transform(arr) {
158 |                 return arr.reduce((memo, item) => {
159 |                     if (typeof item !== "undefined") {
160 |                         if (Array.isArray(item)) item = transform(item);
161 |                         memo.push(item);
162 |                     }
163 |                     return memo;
164 |                 }, []);
165 |             }
166 | 
167 | 
168 |             let search_anime = document.getElementById('search-anime');
169 |             search_anime.addEventListener('keyup', () => {
170 |                 let found_anime_div = document.getElementById('found-anime');
171 |                 found_anime_div.style.display = 'block';
172 |                 let url = "https://kitsu.io/api/edge/anime?filter[text]=";
173 |                 let founds = [];
174 |                 $.ajax({
175 |                     url: url + search_anime.value,
176 |                     success: (res) => {
177 |                         let text = "";
178 |                         let found_animes = res.data.forEach((content) => {
179 |                             
180 |                             founds.push(content.attributes.titles.en);
181 |                         });
182 |                         transform(founds).forEach((title) => {
183 |                             text += title;
184 |                             text += "<br>";
185 |                         })
186 |                         document.getElementById('found-anime-title').innerHTML = text;
187 |                 
188 |                     }
189 |                 });
190 |             });
191 |             search_anime.addEventListener('focusout', () => {
192 |                 let found_anime_div = document.getElementById('found-anime');
193 |                 found_anime_div.style.display = 'none';
194 |             });
195 |         </script>
196 | </body>
197 | 
198 | </html>
199 | 


--------------------------------------------------------------------------------
/schedule.php:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <title>OrangeAnime</title>
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <link rel="shortcut icon" href="https://i.ya-webdesign.com/images/transparent-haikyuu-3.png" />
  9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700|Roboto%20Condensed:700">
 10 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 11 |     <link rel="stylesheet" href="css/app.css">
 12 |     <meta name="theme-color" content="#171717">
 13 |     <script src='https://kit.fontawesome.com/3cc432bb58.js' crossorigin='anonymous'></script>
 14 |     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
 15 |     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 16 | 
 17 |     <style>
 18 |         * {
 19 |             font-family: 'Montserrat', sans-serif;
 20 |         }
 21 | 
 22 |         ::-webkit-scrollbar {
 23 |             width: 10px;
 24 |         }
 25 | 
 26 |         ::-webkit-scrollbar-track {
 27 |             box-shadow: inset 0 0 5px #171717;
 28 |             background-color: #171717;
 29 |         }
 30 | 
 31 |         ::-webkit-scrollbar-thumb {
 32 |             background: #2e2d2d;
 33 |         }
 34 | 
 35 |         .col-md-12 {
 36 |             border: 5px solid transparent;
 37 |             font-size: 12px;
 38 |         }
 39 |         .btn-search{
 40 |             background-color: transparent;
 41 |             border: 1px solid #ff5c08;
 42 |             color: #ff5c08;
 43 |             transition: 0.5s;
 44 |             display: inline-block;
 45 |         }
 46 |         .btn-search:hover{
 47 |             color: black;
 48 |             background-color: #ff5c08;
 49 |             transition: 0.5s;
 50 |         }
 51 |         .input-search{
 52 |             background-color: #171717;
 53 |             height: 40px;
 54 |             border: none;
 55 |             display: inline-block;
 56 |             width: 300px;
 57 |         }
 58 |         #found-anime{
 59 |             background-color: black;
 60 |             width: 15.8%;
 61 |             height: 100px;
 62 |             z-index: -1;
 63 |             position: absolute;
 64 |             left: 82.8%;
 65 |             margin-top: 3%;
 66 |             overflow-y: auto;
 67 |             display: none;
 68 |         }
 69 |         a {
 70 |             text-decoration:none !important;
 71 | 
 72 |         }
 73 | 
 74 |         .homeicon:hover {
 75 |             
 76 |         }
 77 | 
 78 |         .font {
 79 |             font-family: Roboto Condensed, Roboto, Helvetica, sans-serif;
 80 |             border-bottom: 3px solid #ff5c08;
 81 |     
 82 |         }
 83 |         .ImageSizeAttr {
 84 |             width: 225px;
 85 |             height: 310px;
 86 |             border-radius:6px;       
 87 |              }
 88 |              .ImageSizeAttr:hover{
 89 |             opacity: .3;
 90 |         }
 91 |     </style>
 92 | </head>
 93 | 
 94 | <body id="body">
 95 |     <div class="navbar">
 96 |         <a href="index.php" class="logo" style="color:grey">
 97 |         &nbsp;&nbsp;<span class="primary">ORANGE</span>ANI<img src="https://i.ya-webdesign.com/images/transparent-haikyuu-3.png" style="width:25px;height:25px;">ME
 98 | 
 99 |         </a>
100 |         <a href="animes.php">
101 |             <span class="menu"><i class="fas fa-globe-europe"></i> ANIMES</span>
102 |         </a>
103 |         <a href="schedule.php">
104 |             <span class="menu" style="color:white;"><i class="far fa-clock"></i> SCHEDULE</span>
105 |         </a>
106 |         <div class="form-inline">
107 |             <input class="input-search mr-sm-2" id="search-anime" type="text" placeholder="Search" aria-label="Search">
108 |         </div>
109 |         <div id="found-anime">
110 |             <center>
111 |             <br>
112 |                 <p id="found-anime-title"></p>
113 |             </center>
114 |         </div>
115 |     </div>
116 | 
117 |     <div class="notice">
118 |         <h1 class="underline">
119 |             SCHEDULE
120 |         </h1>
121 |         <div class="container">
122 |             <div class="row">
123 |                 <h3 class="font">Monday</h3>
124 |                 <div class="col-md-12" id="animes">
125 |                 </div>
126 |                 </div>
127 |                 <div class="row">
128 |                 <h3 class="font">Tuesday</h3>
129 |                 <div class="col-md-12" id="animes2">
130 |                 </div>
131 |             </div>
132 |             <div class="row">
133 |                 <h3 class="font">Wednesday</h3>
134 |                 <div class="col-md-12" id="animes3">
135 |                 </div>
136 |             </div>
137 |             <div class="row">
138 |                 <h3 class="font">Thursday</h3>
139 |                 <div class="col-md-12" id="animes4">
140 |                 </div>
141 |             </div>
142 |             <div class="row">
143 |                 <h3 class="font">Friday</h3>
144 |                 <div class="col-md-12" id="animes5">
145 |                 </div>
146 |             </div>
147 |             <div class="row">
148 |                 <h3 class="font">Saturday</h3>
149 |                 <div class="col-md-12" id="animes6">
150 |                 </div>
151 |             </div>
152 |             <div class="row">
153 |                 <h3 class="font">Sunday</h3>
154 |                 <div class="col-md-12" id="animes7">
155 |                 </div>
156 |             </div>
157 | 
158 |         </div>
159 |     </div>
160 |     <script>
161 |             /* MONDAY SCHEDULE */
162 |             $.ajax({
163 |             url: 'https://jkanime.chrismichael.now.sh/api/v1/schedule/' + 1 + '/',
164 |             method: 'GET',
165 |             success: (data) => {
166 |                 var i;
167 |                 let animes = document.getElementById('animes');
168 | 
169 |                 for (i = 0; i < data.schedule.length; i++) {
170 |                 let div_anime = document.createElement('div');
171 |                 let img_anime = document.createElement('img');
172 |                 let title_anime = document.createElement('div');
173 |                 let p = document.createElement('p');
174 |                 div_anime.classList.add("col-md-3");
175 |                 div_anime.style.display = "inline-block";
176 |                 img_anime.src = `${data.schedule[i].poster}`;
177 |                 title_anime.classList.add("col-md-12");
178 |                 title_anime.classList.add("text-center");
179 |                 img_anime.classList.add('ImageSizeAttr');
180 |                 p.innerHTML = data.schedule[i].title;
181 |                 title_anime.appendChild(p);
182 |                 div_anime.appendChild(img_anime);
183 |                 div_anime.appendChild(title_anime);
184 |                 animes.appendChild(div_anime);  
185 |                 }
186 |             }
187 |         });
188 |                     /* TUESDAY SCHEDULE */
189 |                     $.ajax({
190 |             url: 'https://jkanime.chrismichael.now.sh/api/v1/schedule/' + 2 + '/',
191 |             method: 'GET',
192 |             success: (data) => {
193 |                 var i;
194 |                 let animes = document.getElementById('animes2');
195 | 
196 |                 for (i = 0; i < data.schedule.length; i++) {
197 |                 let div_anime = document.createElement('div');
198 |                 let img_anime = document.createElement('img');
199 |                 let title_anime = document.createElement('div');
200 |                 let p = document.createElement('p');
201 |                 div_anime.classList.add("col-md-3");
202 |                 div_anime.style.display = "inline-block";
203 |                 img_anime.src = `${data.schedule[i].poster}`;
204 |                 title_anime.classList.add("col-md-12");
205 |                 title_anime.classList.add("text-center");
206 |                 img_anime.classList.add('ImageSizeAttr');
207 |                 p.innerHTML = data.schedule[i].title;
208 |                 title_anime.appendChild(p);
209 |                 div_anime.appendChild(img_anime);
210 |                 div_anime.appendChild(title_anime);
211 |                 animes.appendChild(div_anime);  
212 |                 }
213 |             }
214 |         });
215 |            /* WEDNESDAY SCHEDULE */
216 |            $.ajax({
217 |             url: 'https://jkanime.chrismichael.now.sh/api/v1/schedule/' + 3 + '/',
218 |             method: 'GET',
219 |             success: (data) => {
220 |                 var i;
221 |                 let animes = document.getElementById('animes3');
222 | 
223 |                 for (i = 0; i < data.schedule.length; i++) {
224 |                 let div_anime = document.createElement('div');
225 |                 let img_anime = document.createElement('img');
226 |                 let title_anime = document.createElement('div');
227 |                 let p = document.createElement('p');
228 |                 div_anime.classList.add("col-md-3");
229 |                 div_anime.style.display = "inline-block";
230 |                 img_anime.src = `${data.schedule[i].poster}`;
231 |                 title_anime.classList.add("col-md-12");
232 |                 title_anime.classList.add("text-center");
233 |                 p.innerHTML = data.schedule[i].title;
234 |                 img_anime.classList.add('ImageSizeAttr');
235 |                 title_anime.appendChild(p);
236 |                 div_anime.appendChild(img_anime);
237 |                 div_anime.appendChild(title_anime);
238 |                 animes.appendChild(div_anime);  
239 |                 }
240 |             }
241 |         });
242 |                    /* THURSDAY SCHEDULE */
243 |                    $.ajax({
244 |             url: 'https://jkanime.chrismichael.now.sh/api/v1/schedule/' + 4 + '/',
245 |             method: 'GET',
246 |             success: (data) => {
247 |                 var i;
248 |                 let animes = document.getElementById('animes4');
249 | 
250 |                 for (i = 0; i < data.schedule.length; i++) {
251 |                 let div_anime = document.createElement('div');
252 |                 let img_anime = document.createElement('img');
253 |                 let title_anime = document.createElement('div');
254 |                 let p = document.createElement('p');
255 |                 div_anime.classList.add("col-md-3");
256 |                 div_anime.style.display = "inline-block";
257 |                 img_anime.src = `${data.schedule[i].poster}`;
258 |                 title_anime.classList.add("col-md-12");
259 |                 title_anime.classList.add("text-center");
260 |                 img_anime.classList.add('ImageSizeAttr');
261 |                 p.innerHTML = data.schedule[i].title;
262 |                 title_anime.appendChild(p);
263 |                 div_anime.appendChild(img_anime);
264 |                 div_anime.appendChild(title_anime);
265 |                 animes.appendChild(div_anime);  
266 |                 }
267 |             }
268 |         });
269 |         /* FRIDAY SCHEDULE */
270 |         $.ajax({
271 |             url: 'https://jkanime.chrismichael.now.sh/api/v1/schedule/' + 5 + '/',
272 |             method: 'GET',
273 |             success: (data) => {
274 |                 var i;
275 |                 let animes = document.getElementById('animes5');
276 | 
277 |                 for (i = 0; i < data.schedule.length; i++) {
278 |                 let div_anime = document.createElement('div');
279 |                 let img_anime = document.createElement('img');
280 |                 let title_anime = document.createElement('div');
281 |                 let p = document.createElement('p');
282 |                 div_anime.classList.add("col-md-3");
283 |                 div_anime.style.display = "inline-block";
284 |                 img_anime.src = `${data.schedule[i].poster}`;
285 |                 title_anime.classList.add("col-md-12");
286 |                 title_anime.classList.add("text-center");
287 |                 img_anime.classList.add('ImageSizeAttr');
288 |                 p.innerHTML = data.schedule[i].title;
289 |                 title_anime.appendChild(p);
290 |                 div_anime.appendChild(img_anime);
291 |                 div_anime.appendChild(title_anime);
292 |                 animes.appendChild(div_anime);  
293 |                 }
294 |             }
295 |         });
296 |          /* SATURDAY SCHEDULE */
297 |          $.ajax({
298 |             url: 'https://jkanime.chrismichael.now.sh/api/v1/schedule/' + 6 + '/',
299 |             method: 'GET',
300 |             success: (data) => {
301 |                 var i;
302 |                 let animes = document.getElementById('animes6');
303 | 
304 |                 for (i = 0; i < data.schedule.length; i++) {
305 |                 let div_anime = document.createElement('div');
306 |                 let img_anime = document.createElement('img');
307 |                 let title_anime = document.createElement('div');
308 |                 let p = document.createElement('p');
309 |                 div_anime.classList.add("col-md-3");
310 |                 div_anime.style.display = "inline-block";
311 |                 img_anime.src = `${data.schedule[i].poster}`;
312 |                 title_anime.classList.add("col-md-12");
313 |                 title_anime.classList.add("text-center");
314 |                 img_anime.classList.add('ImageSizeAttr');
315 |                 p.innerHTML = data.schedule[i].title;
316 |                 title_anime.appendChild(p);
317 |                 div_anime.appendChild(img_anime);
318 |                 div_anime.appendChild(title_anime);
319 |                 animes.appendChild(div_anime);  
320 |                 }
321 |             }
322 |         });
323 |          /* SUNDAY SCHEDULE */
324 |          $.ajax({
325 |             url: 'https://jkanime.chrismichael.now.sh/api/v1/schedule/' + 7 + '/',
326 |             method: 'GET',
327 |             success: (data) => {
328 |                 var i;
329 |                 let animes = document.getElementById('animes7');
330 | 
331 |                 for (i = 0; i < data.schedule.length; i++) {
332 |                 let div_anime = document.createElement('div');
333 |                 let img_anime = document.createElement('img');
334 |                 let title_anime = document.createElement('div');
335 |                 let p = document.createElement('p');
336 |                 div_anime.classList.add("col-md-3");
337 |                 div_anime.style.display = "inline-block";
338 |                 img_anime.src = `${data.schedule[i].poster}`;
339 |                 title_anime.classList.add("col-md-12");
340 |                 title_anime.classList.add("text-center");
341 |                 img_anime.classList.add('ImageSizeAttr');
342 |                 p.innerHTML = data.schedule[i].title;
343 |                 title_anime.appendChild(p);
344 |                 div_anime.appendChild(img_anime);
345 |                 div_anime.appendChild(title_anime);
346 |                 animes.appendChild(div_anime);  
347 |                 }
348 |             }
349 |         });
350 | 
351 |         </script>
352 | </body>
353 | 
354 | </html>


--------------------------------------------------------------------------------
/watch.php:
--------------------------------------------------------------------------------
  1 | a<?php
  2 | session_start();
  3 | if(!isset($_GET['anime'])){
  4 |     header("Location: index.php");
  5 | }
  6 | ?>
  7 | 
  8 | <html lang="en">
  9 | 
 10 | <head>
 11 |     <meta charset="utf-8">
 12 |     <title>OrangeAnime</title>
 13 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 14 |     <link rel="shortcut icon" href="https://i.ya-webdesign.com/images/transparent-haikyuu-3.png" />
 15 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700|Roboto%20Condensed:700">
 16 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 17 |     <link rel="stylesheet" href="css/app.css">
 18 |     <meta name="theme-color" content="#171717">
 19 |     <script src='https://kit.fontawesome.com/3cc432bb58.js' crossorigin='anonymous'></script>
 20 |     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
 21 |     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 22 |     <script type="text/javascript" src="//cdn.embed.ly/player-0.0.11.min.js"></script>
 23 |     <style>
 24 |         * {
 25 |             font-family: 'Montserrat', sans-serif;
 26 |         }
 27 | 
 28 |         ::-webkit-scrollbar {
 29 |             width: 10px;
 30 |         }
 31 | 
 32 |         ::-webkit-scrollbar-track {
 33 |             box-shadow: inset 0 0 5px #171717;
 34 |             background-color: #171717;
 35 |         }
 36 | 
 37 |         ::-webkit-scrollbar-thumb {
 38 |             background: #2e2d2d;
 39 |         }
 40 | 
 41 |         .col-md-12 {
 42 |             border: 5px solid transparent;
 43 |             font-size: 12px;
 44 |         }
 45 |         .btn-search{
 46 |             background-color: transparent;
 47 |             border: 1px solid #ff5c08;
 48 |             color: #ff5c08;
 49 |             transition: 0.5s;
 50 |             display: inline-block;
 51 |         }
 52 |         .btn-search:hover{
 53 |             color: black;
 54 |             background-color: #ff5c08;
 55 |             transition: 0.5s;
 56 |         }
 57 |         .input-search{
 58 |             background-color: #171717;
 59 |             height: 40px;
 60 |             border: none;
 61 |             display: inline-block;
 62 |             width: 300px;
 63 |         }
 64 |         #found-anime{
 65 |             background-color: black;
 66 |             width: 15.8%;
 67 |             height: 100px;
 68 |             z-index: -1;
 69 |             position: absolute;
 70 |             left: 82.8%;
 71 |             margin-top: 3%;
 72 |             overflow-y: auto;
 73 |             display: none;
 74 |         }
 75 |         a {
 76 |             text-decoration:none !important;
 77 |             
 78 |         }
 79 |         
 80 |         a:hover{
 81 |             color:white;
 82 |         }
 83 |         .ImageSizeAttr {
 84 |             border-radius:6px;
 85 |             width:260px;
 86 |             height:140px;
 87 |              }
 88 |         .ImageSizeAttr:hover{
 89 |             opacity: .3;
 90 |         }
 91 | 
 92 |         select {
 93 |         width: 100px;
 94 |     height: 31px;
 95 |     line-height: 31px;
 96 |     font-size: 13px;
 97 |     color: #666;
 98 |     background: #fff;
 99 |     border: none;
100 |     border-radius: 3px;
101 |     float: right;
102 | }
103 |     </style>
104 | </head>
105 | 
106 | <body id="body">
107 |     <div class="navbar">
108 |         <a href="index.php" class="logo">
109 |             &nbsp;&nbsp;<span class="primary">ORANGE</span>ANI<img src="https://i.ya-webdesign.com/images/transparent-haikyuu-3.png" style="width:25px;height:25px;">ME
110 |         </a>
111 |         <a href="animes.php">
112 |             <span class="menu"><i class="fas fa-globe-europe"></i> ANIMES</span>
113 |         </a>
114 |         <a href="schedule.php">
115 |             <span class="menu"><i class="far fa-clock"></i> SCHEDULE</span>
116 |         </a>
117 |         <div class="form-inline">
118 |             <input class="input-search mr-sm-2" id="search-anime" type="text" placeholder="Search" aria-label="Search">
119 |         </div>
120 |         <div id="found-anime">
121 |             <center>
122 |             <br>
123 |                 <p id="found-anime-title"></p>
124 |             </center>
125 |         </div>
126 |     </div>
127 | 
128 |     <div class="notice">
129 |         <h1 class="underline">
130 |             WATCH ANIME
131 |         </h1>
132 |         <div class="container">
133 |             <div class="row">
134 |                 <div class="col-md-12" id="animes">
135 |                 <button class="btn btn-outline-warning" id="btn_1">Player 1</button>
136 |                 <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
137 | 
138 |                 <?php
139 | 
140 |                 $url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
141 |                 $basename = basename($url);
142 |                 $url2 = str_replace($basename.'/',"",$url); //get http://localhost/orangeanime/watch.php?anime=kakushigoto/
143 |                 $basename2 = basename($url2);
144 |                 $url3 = str_replace('watch.php?anime=','',$basename2); //get kakushigoto
145 |                 $curep = str_replace($url2,"",$url);
146 |                 $curep2 = str_replace($url3.'-episodio-',"",$curep);
147 |                 $ch = curl_init();
148 |  
149 |                 $animeURL = 'http://localhost:3000/animeinfo/' . $url3;
150 |                 var_dump($animeURL);
151 |                 curl_setopt($ch, CURLOPT_URL, $animeURL);
152 |                 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
153 |                 curl_setopt($ch, CURLOPT_HEADER, 0);
154 |                 $string1 = curl_exec($ch);
155 |                 curl_close ($ch);
156 |                 $json_anime_file = json_decode($string1, true);
157 |                 $lastep = $json_anime_file[0]["lastep"];
158 | 
159 |                 $epurl = str_replace($url2.'/',"",$url); //get akame-ga-kill-episodio-24-online/
160 |                 $epurl2 = str_replace($lastep.'-online/',"",$epurl); //akame-ga-kill-episodio
161 | 
162 | 
163 |                 for($i=1; $i <= $lastep; $i++) {
164 |                     $epurl3 = $epurl2 . $i . '-online/'; //get url 
165 |                  
166 |                  if($curep2 == $i) {
167 |                      ?>
168 |                <option selected="selected" value=<?php echo $epurl3;?>><?php echo $i; ?></option>
169 |                      <?php
170 |                  } else {
171 |                 ?>
172 |                <option value=<?php echo $epurl3;?>><?php echo $i; ?></option>
173 |                 <?php
174 |                  }
175 |                 }
176 |                  ?>
177 |                  </select>
178 |                 <iframe style="border: none;" id="to_watch_1" class="embedly-embed" width="1100" height="720" allowfullscreen  webkitallowfullscreen  mozallowfullscreen>
179 |                 </iframe>   
180 |                 </div>
181 |             </div>
182 |         </div>
183 |     </div>
184 |         <script>
185 | 
186 |         let anime_to_watch = "<?= $_GET['anime'];?>";
187 |         let url = "http://localhost:3000/video/" + anime_to_watch;
188 |         $.ajax({
189 |             url: url,
190 |             method: 'get',
191 |             success: (res) => {
192 |                 let player_url = res[0].player1;
193 |                 let player2_url = res[0].player2;
194 |                 console.log(player_url);
195 |                 console.log(player2_url);
196 | 
197 |                 if (player_url == null) {
198 |                 document.getElementById('to_watch_1').src = player2_url;
199 |                 } else if (player2_url == null) {
200 |                 document.getElementById('to_watch_1').src = player_url;
201 |                 } else {
202 |                 document.getElementById('to_watch_1').src = player_url;
203 |         }
204 | 
205 |         let btn_1 = document.getElementById('btn_1');
206 |         let btn_2 = document.getElementById('btn_2');
207 |         let embed1 = document.getElementById('to_watch_1');
208 | 
209 |         btn_1.addEventListener('click', () => {
210 |             if (player_url == null) {
211 |                 document.getElementById('to_watch_1').src = player2_url;
212 |                 } else if (player2_url == null) {
213 |                 document.getElementById('to_watch_1').src = player_url;
214 |                 } else {
215 |                 document.getElementById('to_watch_1').src = player_url;
216 |         }
217 |         })
218 | 
219 |     }
220 |         });
221 | 
222 | 
223 |             function transform(arr) {
224 |                 return arr.reduce((memo, item) => {
225 |                     if (typeof item !== "undefined") {
226 |                         if (Array.isArray(item)) item = transform(item);
227 |                         memo.push(item);
228 |                     }
229 |                     return memo;
230 |                 }, []);
231 |             }
232 | 
233 | 
234 |             let search_anime = document.getElementById('search-anime');
235 |             search_anime.addEventListener('keyup', () => {
236 |                 let found_anime_div = document.getElementById('found-anime');
237 |                 found_anime_div.style.display = 'block';
238 |                 let url = "https://kitsu.io/api/edge/anime?filter[text]=";
239 |                 let founds = [];
240 |                 $.ajax({
241 |                     url: url + search_anime.value,
242 |                     success: (res) => {
243 |                         let text = "";
244 |                         let found_animes = res.data.forEach((content) => {
245 |                             
246 |                             founds.push(content.attributes.titles.en);
247 |                         });
248 |                         transform(founds).forEach((title) => {
249 |                             text += title;
250 |                             text += "<br>";
251 |                         })
252 |                         document.getElementById('found-anime-title').innerHTML = text;
253 |                 
254 |                     }
255 |                 });
256 |             });
257 |             search_anime.addEventListener('focusout', () => {
258 |                 let found_anime_div = document.getElementById('found-anime');
259 |                 found_anime_div.style.display = 'none';
260 |             });
261 |         </script>
262 |         <script src="https://vjs.zencdn.net/7.7.6/video.js"></script>
263 | </body>
264 | 
265 | </html>
266 | 


--------------------------------------------------------------------------------