1. <style type="text/css">
  2. /*DLGEN - Codepelajar.com*/
  3. .container{max-width:640px;margin:24px auto}#dbox{background:white;padding:24px;line-height:1.6;box-sizing:border-box}#dbox *{box-sizing:border-box}.dbox-head{text-align:center;padding:24px;background:rgba(0,0,0,0.5);color:#fff;margin-bottom:24px}.dbox-head h4{margin:0;font-size:24px}.dbox-input label{display:inline-block;width:100%;margin-bottom:5px}.dbox-input input[type="text"]{padding:10px 10px;border-radius:4px;border:2px solid rgba(0,0,0,0.2);font-size:16px;width:100%;margin-bottom:10px}.dbox-row{display:flex;flex-wrap:wrap;width:100%}.dbox-full{width:100%;padding:0 5px}.dbox-cell-2{width:50%;padding:0 5px}.dbox-output{width:100%}.cp-dbox{padding:10px}.cp-dbox-title{background:#222;padding:10px 12px;text-align:center;color:#fff;margin-bottom:14px}.cp-dbox-body{text-align:center}.cp-dbox-body .rs_uf{}.cp-dbox-body .rs_uf{font-weight:bold;margin-bottom:5px}.cp-dbox-body .ld a{display:inline-block;padding:8px 14px;text-decoration:none}.dbox-output{width:100%}.cp-dbox{padding:10px}.cp-dbox-title{background:#222;padding:10px 12px;text-align:center;color:#fff;margin-bottom:14px}.cp-dbox-body{text-align:center}.cp-dbox-body .rs_uf{}.cp-dbox-body .rs_uf{font-weight:bold;margin-bottom:5px}.cp-dbox-body .ld a{display:inline-block;padding:8px 14px;text-decoration:none}.dbox-tarea{width:100%;max-width:100%;height:300px;padding:14px;border-radius:4px;border:2px solid rgba(0,0,0,0.2);resize:none}
  4. /* DOWNLOAD */
  5. .btn{outline:0;margin-bottom:5px;display:inline-flex;align-items:center;justify-content:space-between;background:#e74c3c;min-width:130px;border:0;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,0.1);box-sizing:border-box;padding:16px 20px;color:#ecf0f1;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;overflow:hidden;cursor:pointer;}
  6. .btn:hover{background:#c0392b}
  7. .btn:focus .dropdown,.btn:active .dropdown{transform:translate(0,20px);opacity:1;visibility:visible;}.btn .material-icons{border-radius:5px;padding:3px;-webkit-animation:ripple 0.6s linear infinite;animation:ripple 0.6s linear infinite;}.btn .dropdown{position:fixed;z-index:9999;top:40%;left:40%;background:#ecf0f1;width:150px;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,0.1);text-align:left;opacity:0;visibility:hidden;transition:0.3s ease;}.btn .dropdown li{z-index:1;position:relative;background:#ecf0f1;padding:0 20px;color:#666;}
  8. .btn .dropdown li.active{background-color:#e74c3c;color:#ecf0f1}
  9. .btn .dropdown li:hover{background-color:#bdc3c7;color:#e74c3c}
  10. .btn .dropdown li:first-child{border-radius:4px 4px 0 0;}.btn .dropdown li:last-child{border-radius:0 0 4px 4px;}.btn .dropdown li:last-child a{border-bottom:0;}.btn .dropdown a{display:block;border-bottom:1px solid rgba(0,0,0,0.05);padding:16px 0;color:inherit;font-size:10px;text-decoration:none;}@-webkit-keyframes ripple{0%{box-shadow:0 0 0 0 rgba(255,255,255,0.1),0 0 0 20px rgba(255,255,255,0.1),0 0 0 40px rgba(255,255,255,0.1),0 0 0 60px rgba(255,255,255,0.1);}100%{box-shadow:0 0 0 20px rgba(255,255,255,0.1),0 0 0 40px rgba(255,255,255,0.1),0 0 0 60px rgba(255,255,255,0.1),0 0 0 80px rgba(255,255,255,0);}}@keyframes ripple{0%{box-shadow:0 0 0 0 rgba(255,255,255,0.1),0 0 0 20px rgba(255,255,255,0.1),0 0 0 40px rgba(255,255,255,0.1),0 0 0 60px rgba(255,255,255,0.1);}100%{box-shadow:0 0 0 20px rgba(255,255,255,0.1),0 0 0 40px rgba(255,255,255,0.1),0 0 0 60px rgba(255,255,255,0.1),0 0 0 80px rgba(255,255,255,0);}}
  11. .dbox-wrapper * {box-sizing: border-box;}
  12. #dbox-tb {text-align:center}
  13. #dbox-tb a {text-align:center;font-weight:650;margin-bottom:10px}
  14. .dbox-tb1 {width:99%}
  15. .dbox-tb2 {background-color:#e74c3c;border-color:#e74c3c;display:inline-block;padding:6px 12px;text-transform:uppercase;font-size:14px;font-weight:650;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;background-image:none;border:2px solid transparent;border-radius:9px;-ms-touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;box-shadow:0 4px 12px rgba(0,0,0,0.1);transition:all .9}
  16. .dbox-tb2:hover {background-color:#c0392b;border-color:#c0392b}
  17. .dbox-tb3 {width:49%;float:none}
  18. .dbox-tb4 {width:49%;float:none}
  19. .dbox-tb5 {padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}
  20. .dbox-tb6 {text-align:center;background-color:#d9edf7;border:2px solid #31708f}
  21. .dbox-tb7 {width:100%;max-width:100%;margin-bottom:20px}
  22. .dbox-tb8 {padding:8px;line-height:1.42857143;vertical-align:top}
  23. .disabled{pointer-events:none;cursor:default;background:#bdc3c7}
  24. .disabled:hover{pointer-events:none!important}
  25. </style>
  26. <div class='container'>
  27. <!-- GENERATOR START -->
  28. <div id='dbox' ng-app="">
  29. <div class='dbox-head'>
  30. <h4>Download Generator - AngularJS</h4>
  31. <span>Original by - codepelajar.com - Mod by rizqijune</span>
  32. </div>
  33. <div class='dbox-input'>
  34. <div class='dbox-row'>
  35. <div class='dbox-full'>
  36. <label>Nama Anime</label>
  37. <input type='text' ng-model='nama_anime' />
  38. </div>
  39. <!-- RESOLUSI START -->
  40. <div class='dbox-cell-2'>
  41. <label>Resolusi 1_1</label>
  42. <input type='text' value="240" ng-model='resolusi_1' />
  43. </div>
  44. <div class='dbox-cell-2'>
  45. <label>Resolusi 2_1</label>
  46. <input type='text' value="360" ng-model='resolusi_2' />
  47. </div>
  48. <div class='dbox-cell-2'>
  49. <label>Resolusi 3_1</label>
  50. <input type='text' value="480" ng-model='resolusi_3' />
  51. </div>
  52. <div class='dbox-cell-2'>
  53. <label>Resolusi 4_1</label>
  54. <input type='text' value="720" ng-model='resolusi_4' />
  55. </div>
  56. <div class='dbox-cell-2'>
  57. <label>Resolusi 5_1</label>
  58. <input type='text' value="1080" ng-model='resolusi_5' />
  59. </div>
  60. <div class='dbox-cell-2'>
  61. <label>Resolusi 6_1</label>
  62. <input type='text' value="2048" ng-model='resolusi_6' />
  63. </div>
  64. <!-- RESOLUSI END -->
  65. <!-- SIZE START -->
  66. <div class='dbox-cell-2'>
  67. <label>Ukuran File 1_1</label>
  68. <input type='text' ng-model='file_size_1' />
  69. </div>
  70. <div class='dbox-cell-2'>
  71. <label>Ukuran File 2_1</label>
  72. <input type='text' ng-model='file_size_2' />
  73. </div>
  74. <div class='dbox-cell-2'>
  75. <label>Ukuran File 3_1</label>
  76. <input type='text' ng-model='file_size_3' />
  77. </div>
  78. <div class='dbox-cell-2'>
  79. <label>Ukuran File 4_1</label>
  80. <input type='text' ng-model='file_size_4' />
  81. </div>
  82. <div class='dbox-cell-2'>
  83. <label>Ukuran File 5_1</label>
  84. <input type='text' ng-model='file_size_5' />
  85. </div>
  86. <div class='dbox-cell-2'>
  87. <label>Ukuran File 6_1</label>
  88. <input type='text' ng-model='file_size_6' />
  89. </div>
  90. <!-- SIZE END -->
  91. <!-- SERVER 1 START -->
  92. <div class='dbox-cell-2'>
  93. <label>Server 1_1</label>
  94. <input type='text' ng-model='nama_server_1_1' />
  95. </div>
  96. <div class='dbox-cell-2'>
  97. <label>Url 1_1</label>
  98. <input type='text' ng-model='url_1_1' />
  99. </div>
  100. <div class='dbox-cell-2'>
  101. <label>Server 1_2</label>
  102. <input type='text' ng-model='nama_server_1_2' />
  103. </div>
  104. <div class='dbox-cell-2'>
  105. <label>Url 1_2</label>
  106. <input type='text' ng-model='url_1_2' />
  107. </div>
  108. <div class='dbox-cell-2'>
  109. <label>Server 1_3</label>
  110. <input type='text' ng-model='nama_server_1_3' />
  111. </div>
  112. <div class='dbox-cell-2'>
  113. <label>Url 1_3</label>
  114. <input type='text' ng-model='url_1_3' />
  115. </div>
  116. <div class='dbox-cell-2'>
  117. <label>Server 1_4</label>
  118. <input type='text' ng-model='nama_server_1_4' />
  119. </div>
  120. <div class='dbox-cell-2'>
  121. <label>Url 1_4</label>
  122. <input type='text' ng-model='url_1_4 ' />
  123. </div>
  124. <!-- SERVER 1 END -->
  125. <!-- SERVER 2 START -->
  126. <div class='dbox-cell-2'>
  127. <label>Server 2_1</label>
  128. <input type='text' ng-model='nama_server_2_1' />
  129. </div>
  130. <div class='dbox-cell-2'>
  131. <label>Url 2_1</label>
  132. <input type='text' ng-model='url_2_1' />
  133. </div>
  134. <div class='dbox-cell-2'>
  135. <label>Server 2_2</label>
  136. <input type='text' ng-model='nama_server_2_2' />
  137. </div>
  138. <div class='dbox-cell-2'>
  139. <label>Url 2_2</label>
  140. <input type='text' ng-model='url_2_2' />
  141. </div>
  142. <div class='dbox-cell-2'>
  143. <label>Server 2_3</label>
  144. <input type='text' ng-model='nama_server_2_3' />
  145. </div>
  146. <div class='dbox-cell-2'>
  147. <label>Url 2_3</label>
  148. <input type='text' ng-model='url_2_3' />
  149. </div>
  150. <div class='dbox-cell-2'>
  151. <label>Server 2_4</label>
  152. <input type='text' ng-model='nama_server_2_4' />
  153. </div>
  154. <div class='dbox-cell-2'>
  155. <label>Url 2_4</label>
  156. <input type='text' ng-model='url_2_4 ' />
  157. </div>
  158. <!-- SERVER 2 END -->
  159. <!-- SERVER 3 START -->
  160. <div class='dbox-cell-2'>
  161. <label>Server 3_1</label>
  162. <input type='text' ng-model='nama_server_3_1' />
  163. </div>
  164. <div class='dbox-cell-2'>
  165. <label>Url 3_1</label>
  166. <input type='text' ng-model='url_3_1' />
  167. </div>
  168. <div class='dbox-cell-2'>
  169. <label>Server 3_2</label>
  170. <input type='text' ng-model='nama_server_3_2' />
  171. </div>
  172. <div class='dbox-cell-2'>
  173. <label>Url 3_2</label>
  174. <input type='text' ng-model='url_3_2' />
  175. </div>
  176. <div class='dbox-cell-2'>
  177. <label>Server 3_3</label>
  178. <input type='text' ng-model='nama_server_3_3' />
  179. </div>
  180. <div class='dbox-cell-2'>
  181. <label>Url 3_3</label>
  182. <input type='text' ng-model='url_3_3' />
  183. </div>
  184. <div class='dbox-cell-2'>
  185. <label>Server 3_4</label>
  186. <input type='text' ng-model='nama_server_3_4' />
  187. </div>
  188. <div class='dbox-cell-2'>
  189. <label>Url 3_4</label>
  190. <input type='text' ng-model='url_3_4 ' />
  191. </div>
  192. <!-- SERVER 3 END -->
  193. <!-- SERVER 4 START -->
  194. <div class='dbox-cell-2'>
  195. <label>Server 4_1</label>
  196. <input type='text' ng-model='nama_server_4_1' />
  197. </div>
  198. <div class='dbox-cell-2'>
  199. <label>Url 4_1</label>
  200. <input type='text' ng-model='url_4_1' />
  201. </div>
  202. <div class='dbox-cell-2'>
  203. <label>Server 4_2</label>
  204. <input type='text' ng-model='nama_server_4_2' />
  205. </div>
  206. <div class='dbox-cell-2'>
  207. <label>Url 4_2</label>
  208. <input type='text' ng-model='url_4_2' />
  209. </div>
  210. <div class='dbox-cell-2'>
  211. <label>Server 4_3</label>
  212. <input type='text' ng-model='nama_server_4_3' />
  213. </div>
  214. <div class='dbox-cell-2'>
  215. <label>Url 4_3</label>
  216. <input type='text' ng-model='url_4_3' />
  217. </div>
  218. <div class='dbox-cell-2'>
  219. <label>Server 4_4</label>
  220. <input type='text' ng-model='nama_server_4_4' />
  221. </div>
  222. <div class='dbox-cell-2'>
  223. <label>Url 4_4</label>
  224. <input type='text' ng-model='url_4_4 ' />
  225. </div>
  226. <!-- SERVER 4 END -->
  227. <!-- SERVER 5 START -->
  228. <div class='dbox-cell-2'>
  229. <label>Server 5_1</label>
  230. <input type='text' ng-model='nama_server_5_1' />
  231. </div>
  232. <div class='dbox-cell-2'>
  233. <label>Url 5_1</label>
  234. <input type='text' ng-model='url_5_1' />
  235. </div>
  236. <div class='dbox-cell-2'>
  237. <label>Server 5_2</label>
  238. <input type='text' ng-model='nama_server_5_2' />
  239. </div>
  240. <div class='dbox-cell-2'>
  241. <label>Url 5_2</label>
  242. <input type='text' ng-model='url_5_2' />
  243. </div>
  244. <div class='dbox-cell-2'>
  245. <label>Server 5_3</label>
  246. <input type='text' ng-model='nama_server_5_3' />
  247. </div>
  248. <div class='dbox-cell-2'>
  249. <label>Url 5_3</label>
  250. <input type='text' ng-model='url_5_3' />
  251. </div>
  252. <div class='dbox-cell-2'>
  253. <label>Server 5_4</label>
  254. <input type='text' ng-model='nama_server_5_4' />
  255. </div>
  256. <div class='dbox-cell-2'>
  257. <label>Url 5_4</label>
  258. <input type='text' ng-model='url_5_4 ' />
  259. </div>
  260. <!-- SERVER 5 END -->
  261. <!-- SERVER 6 START -->
  262. <div class='dbox-cell-2'>
  263. <label>Server 6_1</label>
  264. <input type='text' ng-model='nama_server_6_1' />
  265. </div>
  266. <div class='dbox-cell-2'>
  267. <label>Url 6_1</label>
  268. <input type='text' ng-model='url_6_1' />
  269. </div>
  270. <div class='dbox-cell-2'>
  271. <label>Server 6_2</label>
  272. <input type='text' ng-model='nama_server_6_2' />
  273. </div>
  274. <div class='dbox-cell-2'>
  275. <label>Url 6_2</label>
  276. <input type='text' ng-model='url_6_2' />
  277. </div>
  278. <div class='dbox-cell-2'>
  279. <label>Server 6_3</label>
  280. <input type='text' ng-model='nama_server_6_3' />
  281. </div>
  282. <div class='dbox-cell-2'>
  283. <label>Url 6_3</label>
  284. <input type='text' ng-model='url_6_3' />
  285. </div>
  286. <div class='dbox-cell-2'>
  287. <label>Server 6_4</label>
  288. <input type='text' ng-model='nama_server_6_4' />
  289. </div>
  290. <div class='dbox-cell-2'>
  291. <label>Url 6_4</label>
  292. <input type='text' ng-model='url_6_4 ' />
  293. </div>
  294. <!-- SERVER 6 END -->
  295. <!-- SERVER LAPOR START -->
  296. <div class='dbox-cell-2'>
  297. <label>URL LAPOR</label>
  298. <input type='text' ng-model='url_1_5 ' />
  299. </div>
  300. <!-- SERVER LAPOR END -->
  301. </div>
  302. </div>
  303. <!-- GENERATOR END -->
  304. <div class='dbox-output'>
  305. <!-- OUTPUT START-->
  306. <div class="dbox-wrapper" dir="ltr" style="text-align:left" trbidi="on">
  307. <table class="dbox-tb7" style="width:100%">
  308. <tbody>
  309. <tr>
  310. <td class="dbox-tb8" bgcolor="#33363b">
  311. <center>
  312. <span style="color:#ffffff;"><b>{{ nama_anime }} Download — </b></span><b><span style="color:#da4453;">B!D</span></b>
  313. </center>
  314. </td>
  315. </tr>
  316. </tbody>
  317. </table>
  318. <div class="dbox-tb5 dbox-tb6 ">
  319. Jangan lupa bagikan <b>BATCH-IN DONG!</b></div>
  320. <!--Kolom1-->
  321. <div id="dbox-tb">
  322. <button class="btn dbox-tb4" href="#{{ resolusi_1 }}"><span>{{ resolusi_1 }}P</span><i class="material-icons">{{ file_size_1 }}</i>
  323. <ul class="dropdown" id="{{ resolusi_1 }}">
  324. <li class="active"><a href="#">{{ resolusi_1 }}P</a></li>
  325. <li><a href="{{url_1_1}}">{{nama_server_1_1}}</a></li>
  326. <li><a href="{{url_1_2}}">{{nama_server_1_2}}</a></li>
  327. <li><a href="{{url_1_3}}">{{nama_server_1_3}}</a></li>
  328. <li><a href="{{url_1_4}}">{{nama_server_1_4}}</a></li>
  329. </ul>
  330. </button>
  331. <button class="btn dbox-tb3" href="#{{ resolusi_2 }}"><span>{{ resolusi_2 }}P</span><i class="material-icons">{{ file_size_2 }}</i>
  332. <ul class="dropdown" id="{{ resolusi_2 }}">
  333. <li class="active"><a href="#">{{ resolusi_2 }}P</a></li>
  334. <li><a href="{{url_2_1}}">{{nama_server_2_1}}</a></li>
  335. <li><a href="{{url_2_2}}">{{nama_server_2_2}}</a></li>
  336. <li><a href="{{url_2_3}}">{{nama_server_2_3}}</a></li>
  337. <li><a href="{{url_2_4}}">{{nama_server_2_4}}</a></li>
  338. </ul>
  339. </button>
  340. </div>
  341. <!--Kolom2-->
  342. <div id="dbox-tb">
  343. <button class="btn dbox-tb4" href="#{{ resolusi_3 }}"><span>{{ resolusi_3 }}P</span><i class="material-icons">{{ file_size_3 }}</i>
  344. <ul class="dropdown" id="{{ resolusi_3 }}">
  345. <li class="active"><a href="#">{{ resolusi_3 }}P</a></li>
  346. <li><a href="{{url_3_1}}">{{nama_server_3_1}}</a></li>
  347. <li><a href="{{url_3_2}}">{{nama_server_3_2}}</a></li>
  348. <li><a href="{{url_3_3}}">{{nama_server_3_3}}</a></li>
  349. <li><a href="{{url_3_4}}">{{nama_server_3_4}}</a></li>
  350. </ul>
  351. </button>
  352. <button class="btn dbox-tb3" href="#{{ resolusi_4 }}"><span>{{ resolusi_4 }}P</span><i class="material-icons">{{ file_size_4 }}</i>
  353. <ul class="dropdown" id="{{ resolusi_4 }}">
  354. <li class="active"><a href="#">{{ resolusi_4 }}P</a></li>
  355. <li><a href="{{url_4_1}}">{{nama_server_4_1}}</a></li>
  356. <li><a href="{{url_4_2}}">{{nama_server_4_2}}</a></li>
  357. <li><a href="{{url_4_3}}">{{nama_server_4_3}}</a></li>
  358. <li><a href="{{url_4_4}}">{{nama_server_4_4}}</a></li>
  359. </ul>
  360. </button>
  361. </div>
  362. <!--Kolom3-->
  363. <div id="dbox-tb">
  364. <button class="btn dbox-tb4" href="#{{ resolusi_5 }}"><span>{{ resolusi_5 }}P</span><i class="material-icons">{{ file_size_5 }}</i>
  365. <ul class="dropdown" id="{{ resolusi_5 }}">
  366. <li class="active"><a href="#">{{ resolusi_5 }}P</a></li>
  367. <li><a href="{{url_5_1}}">{{nama_server_5_1}}</a></li>
  368. <li><a href="{{url_5_2}}">{{nama_server_5_2}}</a></li>
  369. <li><a href="{{url_5_3}}">{{nama_server_5_3}}</a></li>
  370. <li><a href="{{url_5_4}}">{{nama_server_5_4}}</a></li>
  371. </ul>
  372. </button>
  373. <button class="btn dbox-tb3" href="#{{ resolusi_6 }}"><span>{{ resolusi_6 }}P</span><i class="material-icons">{{ file_size_6 }}</i>
  374. <ul class="dropdown" id="{{ resolusi_6 }}">
  375. <li class="active"><a href="#">{{ resolusi_6 }}P</a></li>
  376. <li><a href="{{url_6_1}}">{{nama_server_6_1}}</a></li>
  377. <li><a href="{{url_6_2}}">{{nama_server_6_2}}</a></li>
  378. <li><a href="{{url_6_3}}">{{nama_server_6_3}}</a></li>
  379. <li><a href="{{url_6_4}}">{{nama_server_6_4}}</a></li>
  380. </ul>
  381. </button>
  382. </div>
  383. <!--Kolom4-->
  384. <div id="dbox-tb">
  385. <a class="dbox-tb2 dbox-tb1" target="_blank" href="{{url_1_5}}">Lapor Kerusakan</a>
  386. </div>
  387. </div>
  388. </div>
  389. <!--OUTPUT END-->
  390. <textarea class='dbox-tarea'>