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. <div id='dbox' ng-app="">
  28. <div class='dbox-head'>
  29. <h4>Post Generator - AngularJS</h4>
  30. <span>Original by - codepelajar.com - Mod by rizqijune</span>
  31. </div>
  32. <!-- GENERATOR START -->
  33. <div class='dbox-input'>
  34. <div class='dbox-row'>
  35. <div class='dbox-full'>
  36. <label>Url Gambar</label>
  37. <input type='text' ng-model='gambar' />
  38. </div>
  39. <div class='dbox-full'>
  40. <label>Nama Anime</label>
  41. <input type='text' ng-model='nama_anime' />
  42. </div>
  43. <div class='dbox-full'>
  44. <label>Deskripsi(Bukan Sinopsis)</label>
  45. <input type='text' ng-model='credit_anime' />
  46. </div>
  47. <div class='dbox-cell-2'>
  48. <label>Nama Sumber</label>
  49. <input type='text' ng-model='sumbernama_anime' />
  50. </div>
  51. <div class='dbox-cell-2'>
  52. <label>Link Sumber</label>
  53. <input type='text' ng-model='sumber_anime' />
  54. </div>
  55. <!-- Info START -->
  56. <div class='dbox-cell-2'>
  57. <label>Romaji</label>
  58. <input type='text' ng-model='romaji' />
  59. </div>
  60. <div class='dbox-cell-2'>
  61. <label>Judul Inggris</label>
  62. <input type='text' ng-model='inggris' />
  63. </div>
  64. <div class='dbox-cell-2'>
  65. <label>Jepang</label>
  66. <input type='text' ng-model='jepang' />
  67. </div>
  68. <div class='dbox-cell-2'>
  69. <label>Tipe</label>
  70. <input type='text' ng-model='tipe' />
  71. </div>
  72. <div class='dbox-cell-2'>
  73. <label>Status</label>
  74. <input type='text' ng-model='status' />
  75. </div>
  76. <div class='dbox-cell-2'>
  77. <label>Episode</label>
  78. <input type='text' ng-model='episode' />
  79. </div>
  80. <div class='dbox-cell-2'>
  81. <label>Ditayangkan</label>
  82. <input type='text' ng-model='aired' />
  83. </div>
  84. <div class='dbox-cell-2'>
  85. <label>Studio</label>
  86. <input type='text' ng-model='studio' />
  87. </div>
  88. <div class='dbox-cell-2'>
  89. <label>Durasi Jam</label>
  90. <input type='text' ng-model='jam' />
  91. </div>
  92. <div class='dbox-cell-2'>
  93. <label>Durasi Menit</label>
  94. <input type='text' ng-model='menit' />
  95. </div>
  96. <!-- Header -->
  97. <div class='dbox-head dbox-full'>
  98. <h4>Terkait</h4>
  99. <span>Musim yang terkait dengan video.</span>
  100. </div>
  101. <!-- Header End -->
  102. <!-- Terkait START -->
  103. <div class='dbox-cell-2'>
  104. <label>Terkait 1</label>
  105. <input type='text' ng-model='terkait_1' />
  106. </div>
  107. <div class='dbox-cell-2'>
  108. <label>Terkait 1 URL</label>
  109. <input type='text' ng-model='terkait_1_url' />
  110. </div>
  111. <div class='dbox-cell-2'>
  112. <label>Terkait 2</label>
  113. <input type='text' ng-model='terkait_2' />
  114. </div>
  115. <div class='dbox-cell-2'>
  116. <label>Terkait 2 URL</label>
  117. <input type='text' ng-model='terkait_2_url' />
  118. </div>
  119. <div class='dbox-cell-2'>
  120. <label>Terkait 3</label>
  121. <input type='text' ng-model='terkait_3' />
  122. </div>
  123. <div class='dbox-cell-2'>
  124. <label>Terkait 3 URL</label>
  125. <input type='text' ng-model='terkait_3_url' />
  126. </div>
  127. <div class='dbox-cell-2'>
  128. <label>Terkait 4</label>
  129. <input type='text' ng-model='terkait_4' />
  130. </div>
  131. <div class='dbox-cell-2'>
  132. <label>Terkait 4 URL</label>
  133. <input type='text' ng-model='terkait_4_url' />
  134. </div>
  135. <!-- Terkait END -->
  136. <!-- Info END -->
  137. <div class='dbox-head dbox-full'>
  138. <h4>Sinopsis</h4>
  139. <span>Plot video.</span>
  140. </div>
  141. <!-- Sinopsis -->
  142. <div class='dbox-full'>
  143. <label>Sinopsis Baris 1</label>
  144. <input type='text' ng-model='sinopsis_1' />
  145. </div>
  146. <div class='dbox-full'>
  147. <label>Sinopsis Baris 2</label>
  148. <input type='text' ng-model='sinopsis_2' />
  149. </div>
  150. <div class='dbox-full'>
  151. <label>Sinopsis Baris 3</label>
  152. <input type='text' ng-model='sinopsis_3' />
  153. </div>
  154. <!-- Sinopsis END-->
  155. </div>
  156. </div>
  157. <!-- GENERATOR END -->
  158. <div class='dbox-output'>
  159. <!-- OUTPUT START-->
  160. <style>
  161. /* DOWNLOAD */
  162. .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;}
  163. .btn:hover{background:#c0392b}
  164. .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;}
  165. .btn .dropdown li.active{background-color:#e74c3c;color:#ecf0f1}
  166. .btn .dropdown li:hover{background-color:#bdc3c7;color:#e74c3c}
  167. .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);}}
  168. .dbox-wrapper * {box-sizing: border-box;}
  169. #dbox-tb {text-align:center}
  170. #dbox-tb a {text-align:center;font-weight:650;margin-bottom:10px}
  171. .dbox-tb1 {width:99%}
  172. .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}
  173. .dbox-tb2:hover {background-color:#c0392b;border-color:#c0392b}
  174. .dbox-tb3 {width:49%;float:none}
  175. .dbox-tb4 {width:49%;float:none}
  176. .dbox-tb5 {padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}
  177. .dbox-tb6 {text-align:center;background-color:#d9edf7;border:2px solid #31708f}
  178. .dbox-tb7 {width:100%;max-width:100%;margin-bottom:20px}
  179. .dbox-tb8 {padding:8px;line-height:1.42857143;vertical-align:top}
  180. .disabled{pointer-events:none;cursor:default;background:#bdc3c7}
  181. .disabled:hover{pointer-events:none!important}
  182. </style>
  183. <div dir="ltr" style="text-align: left;" trbidi="on">
  184. <!-- Image -->
  185. <div class="separator" style="clear: both;">
  186. <a href="{{ gambar }}" style="display: block; padding: 1em 0; text-align: center; ">
  187. <img alt="{{ nama_anime }}" src="{{ gambar }}" border="0" width="320" data-original-height="370" data-original-width="704" src="{{ credit_anime }}"/></a></div>
  188. <!-- Add S320 -->
  189. <!-- Pakai 1bp.blogspot.com -->
  190. <!-- Image END-->
  191. <div class="separator" style="clear: both; text-align: center;"></div>
  192. <div class="separator" style="clear: both; text-align: center;"></div><br />
  193. <!-- Atribusi dan info-->
  194. <div style="text-align: justify;">
  195. <b>{{ nama_anime }}&nbsp;-&nbsp;</b>{{ credit_anime }}<a href="{{ sumber_anime }}" style="color:black">Sumber :{{ sumbernama_anime }}</a><br />
  196. <br />
  197. <!-- Info Tabel -->
  198. <h2>
  199. Info Singkat</h2><div class="datanime">
  200. <li><b>Romaji</b>: {{ romaji }}</li>
  201. <li><b>Inggrisnya</b>: {{ inggris }}</li>
  202. <li><b>Jepangnya</b>: {{ jepang }}</li>
  203. <li><b>Tipe</b>: {{ tipe }}</li>
  204. <li><b>Status</b>: {{ status }}</li>
  205. <li><b>Episode</b>: {{ episode }} Episode</li>
  206. <li><b>Ditayangkan</b>: {{ aired }}</li>
  207. <li><b>Studios</b>: {{ studio }}</li>
  208. <li><b>Durasi</b>: {{ jam }} Jam {{ menit }} Menit per episode</li>
  209. <li><b>Terkait</b>:</li>
  210. <li><a href="{{ terkait_1_url }}">{{ terkait_1 }}</a></li>
  211. <li><a href="{{ terkait_2_url }}">{{ terkait_2 }}</a></li>
  212. <li><a href="{{ terkait_3_url }}">{{ terkait_3 }}</a></li>
  213. <li><a href="{{ terkait_4_url }}">{{ terkait_4 }}</a></li>
  214. </div>
  215. <br />
  216. <!-- Sinopsis -->
  217. <div style="text-align: justify;">
  218. <h2>
  219. Sinopsis :</h2><div>
  220. <p>{{ sinopsis_1 }}</p>
  221. <p>{{ sinopsis_2 }}</p>
  222. <p>{{ sinopsis_3 }}</p>
  223. </div>
  224. </div>
  225. <div style="text-align: justify;">
  226. <br /></div>
  227. <!-- Download kolom Start-->
  228. <!-- Download kolom END-->
  229. </div>
  230. </div>
  231. <!--OUTPUT END-->
  232. </div>
  233. <textarea class='dbox-tarea'>