API tools faq
paste
Himeshvyas26

Indo dfc

Himeshvyas26
Aug 31st, 2018
330
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.04 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en" >
  5. <head>
  6. <meta property="og:image"content="http://bossfilo.com/resimler/haberler/melody.jpg">
  7. <meta charset="UTF-8">
  8. <link rel="SHORTCUT ICON"href="http://bossfilo.com/resimler/haberler/melody.jpg" type="image/jpg">
  9. <meta property="og:image"content="http://bossfilo.com/resimler/haberler/melody.jpg">
  10. <title>#IndonesianPeople</title>
  11. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  12. <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <style>
  13. @import url('https://fonts.googleapis.com/css?family=Jolly+Lodger');
  14. * {margin: 0; padding: 0}
  15. #wrapper {
  16. width: 900px;
  17. margin: auto;
  18. padding: 10px;
  19. }
  20. .icon {
  21. display: inline-block;
  22. width: 2em;
  23. height: 2em;
  24. font-size: 30px;
  25. fill: #D7DCE2;
  26. transition: all .2s ease-in-out;
  27. }
  28.  
  29. html, body {
  30. height: 100%;
  31. }
  32.  
  33. body {
  34. background: #000;
  35. position: relative;
  36. font-family: 'Jolly Lodger', cursive;
  37. }
  38.  
  39. .player {
  40. position: absolute;
  41. top: 50%;
  42. left: 50%;
  43. -webkit-transform: translate(-50%, -50%);
  44. transform: translate(-50%, -50%);
  45. }
  46. .player.play .player__timeline {
  47. -webkit-transform: translateY(-90%);
  48. transform: translateY(-90%);
  49. }
  50. .player.play .player__album:after {
  51. box-shadow: 0px 30px 28px -10px rgba(0, 0, 0, 0.2);
  52. }
  53. .player.play .player__album {
  54. top: -65px;
  55. }
  56. .player.play .pause {
  57. display: inline-block;
  58. }
  59. .player.play .play {
  60. display: none;
  61. }
  62. .player__album {
  63. width: 112px;
  64. height: 112px;
  65. border-radius: 50%;
  66. margin-right: 22px;
  67. position: relative;
  68. top: -50px;
  69. transition: all .4s ease-in-out;
  70. }
  71. .player__album:before {
  72. content: '';
  73. width: 25px;
  74. height: 25px;
  75. position: absolute;
  76. z-index: 3;
  77. top: 50%;
  78. left: 50%;
  79. -webkit-transform: translate(-50%, -50%);
  80. transform: translate(-50%, -50%);
  81. background: #fff;
  82. border-radius: 50%;
  83. }
  84. .player__album:after {
  85. content: '';
  86. position: absolute;
  87. top: 0;
  88. right: 0;
  89. bottom: 0;
  90. left: 0;
  91. border-radius: 50%;
  92. box-shadow: none;
  93. transition: all .3s ease-in-out;
  94. }
  95. .player__albumImg {
  96. background-size: cover;
  97. background-position: center;
  98. background-repeat: no-repeat;
  99. width: 100%;
  100. height: 100%;
  101. border-radius: 50%;
  102. position: relative;
  103. z-index: 2;
  104. display: none;
  105. }
  106. .player__albumImg.active-song {
  107. display: block;
  108. }
  109. .player__bar {
  110. background: #fff;
  111. padding: 10px 25px;
  112. height: 100px;
  113. display: flex;
  114. justify-content: space-between;
  115. border-radius: 15px;
  116. box-shadow: 0 30px 56px 6px rgba(0, 0, 0, 0.1);
  117. position: relative;
  118. z-index: 3;
  119. }
  120. .player__controls {
  121. display: flex;
  122. align-items: center;
  123. }
  124. .player__prev {
  125. -webkit-transform: rotate(180deg);
  126. transform: rotate(180deg);
  127. height: 80px;
  128. width: 80px;
  129. display: flex;
  130. justify-content: center;
  131. align-items: center;
  132. cursor: pointer;
  133. border-radius: 15px;
  134. transition: all .2s ease-in-out;
  135. margin-right: 3px;
  136. }
  137. .player__prev:hover {
  138. background: #D7DCE2;
  139. }
  140. .player__prev:hover svg {
  141. fill: #fff;
  142. }
  143. .player__play {
  144. cursor: pointer;
  145. height: 80px;
  146. width: 80px;
  147. display: flex;
  148. justify-content: center;
  149. align-items: center;
  150. border-radius: 15px;
  151. transition: all .2s ease-in-out;
  152. margin-right: 3px;
  153. position: relative;
  154. }
  155. .player__play:hover {
  156. background: #D7DCE2;
  157. }
  158. .player__play:hover svg {
  159. fill: #fff;
  160. }
  161. .player__play svg {
  162. font-size: 20px;
  163. position: absolute;
  164. top: 50%;
  165. left: 50%;
  166. -webkit-transform: translate(-50%, -50%);
  167. transform: translate(-50%, -50%);
  168. }
  169. .player__play svg.pause {
  170. display: none;
  171. }
  172. .player__next {
  173. cursor: pointer;
  174. height: 80px;
  175. width: 80px;
  176. display: flex;
  177. justify-content: center;
  178. align-items: center;
  179. border-radius: 15px;
  180. transition: all .2s ease-in-out;
  181. margin-left: -8px;
  182. }
  183. .player__next:hover {
  184. background: #D7DCE2;
  185. }
  186. .player__next:hover svg {
  187. fill: #fff;
  188. }
  189. .player__timeline {
  190. background: #fff6fb;
  191. height: 95px;
  192. border-radius: 15px;
  193. position: absolute;
  194. bottom: 0;
  195. left: 10px;
  196. right: 10px;
  197. -webkit-transform: translateY(0);
  198. transform: translateY(0);
  199. transition: all .3s ease-in-out;
  200. z-index: 1;
  201. padding-left: 160px;
  202. flex-direction: column;
  203. justify-content: center;
  204. }
  205. .player__timelineBar {
  206. background: #E7E7E7;
  207. width: 95%;
  208. height: 4px;
  209. border-radius: 15px;
  210. margin-top: 13px;
  211. position: relative;
  212. }
  213. .player #playhead {
  214. position: absolute;
  215. top: 0;
  216. left: 0;
  217. border-radius: 15px;
  218. width: 0;
  219. height: 100%;
  220. background: #fd6d94;
  221. }
  222. .player__author {
  223. line-height: 1;
  224. font-weight: bold;
  225. margin-bottom: 6px;
  226. margin-top: 15px;
  227. }
  228. .player__song {
  229. line-height: 1;
  230. margin: 0;
  231. font-size: 12px;
  232. color: #949494;
  233. }
  234.  
  235. .github {
  236. width: 40px;
  237. height: 40px;
  238. background: url(http://alikinvv.github.io/github.svg) no-repeat center;
  239. position: fixed;
  240. bottom: 40px;
  241. right: 40px;
  242. -webkit-animation: github 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s infinite;
  243. animation: github 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s infinite;
  244. }
  245.  
  246. @-webkit-keyframes github {
  247. 0% {
  248. -webkit-transform: scale(1);
  249. transform: scale(1);
  250. }
  251. 50% {
  252. -webkit-transform: scale(1.2);
  253. transform: scale(1.2);
  254. }
  255. 100% {
  256. -webkit-transform: scale(1);
  257. transform: scale(1);
  258. }
  259. }
  260.  
  261. @keyframes github {
  262. 0% {
  263. -webkit-transform: scale(1);
  264. transform: scale(1);
  265. }
  266. 50% {
  267. -webkit-transform: scale(1.2);
  268. transform: scale(1.2);
  269. }
  270. 100% {
  271. -webkit-transform: scale(1);
  272. transform: scale(1);
  273. }
  274. }
  275. h1 {
  276. text-align: center;
  277. }
  278.  
  279. .text {
  280. position: relative;
  281. display: inline-block;
  282. font-size: 5rem;
  283. text-transform: uppercase;
  284. color: #FFF;
  285. text-shadow: 3px 3px 0px #D7DACC, 8px 8px 0px rgba(0, 0, 0, 0.1);
  286. }
  287. </style>
  288. <center>
  289. <img src="https://z-p3-scontent.fpku3-1.fna.fbcdn.net/v/t1.0-9/cp0/e15/q65/s851x315/40242035_279616479531380_4246456426370695168_n.jpg?_nc_cat=0&efg=eyJpIjoiYiJ9&_nc_eui2=AeFQi0flQCFr42KjSZEyvslq3O4bWwd4-xWHZzAomzIRuZwtaIHC5f2_Q3kEbLs9oXITNQvpFLVCjjri2PVo0N1vS0tE4eHEvyVVNdROlpBVsebumWrfXGdCxiPBDu4KjQY&oh=34837d199aed3b2b3811b9b688299bd2&oe=5BFC69BA">
  290. <div id="wrapper">
  291. <h1 class="text">Hacked By TehTawar404 Ft Kamikaze</h1>
  292. </div>
  293. <marquee behavior="alternate" scrollamount="20" width="620"><font face="Jolly Lodger" size="5" color="gold"># TSC </font><font face="Jolly Lodger" size="5" color="white"> TehSosro404 - TehPucuk404 - TehGelas404 - TehKantong404 - TehJavana404 - Fake-Syst3m - Kamikaze<font face="Jolly Lodger" size="5" color="gold"> # </font></font></marquee><br>
  294.  
  295. </center>
  296. </head>
  297. <body translate="no" >
  298. <div class="player">
  299. <div class="player__bar">
  300. <div class="player__album">
  301. <div class="player__albumImg active-song"
  302. data-author="TehTawar404"
  303. data-song="Kamikaze"
  304. data data-src="http://brano.in/images/yamaulana.mp3" style="background-image: url(https://z-p3-scontent.fpku3-1.fna.fbcdn.net/v/t1.0-0/cp0/e15/q65/s480x480/37267240_235726700587025_4101394713402146816_n.jpg?_nc_cat=0&efg=eyJpIjoiYiJ9&_nc_eui2=AeFLF2gXmbbrP0EZySL3X9ewdJJzCV7T9udjQpsQmKOixhzY-e9rLFp0jJ93m3D-KtitA82Vs6RaDMB4YoYZv7YxtefgJQxHl4imc4jo6fYp-4ctjuqBBtP3PnrMzh9rtbk&oh=a512e487e4573130dab80ae6342235b2&oe=5C0526C0"></div></div>
  305. <div class="player__controls">
  306. <div class="player__prev">
  307. <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M26.695 34.434v31.132L54.5 49.998z"/><path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"/><g><path d="M55.5 34.434v31.132l27.805-15.568z"/><path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"/></g></svg>
  308. </div>
  309. <div class="player__play">
  310. <svg class="icon play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M51.109 30.335l-36-24A2 2 0 0 0 12 8v48a2.003 2.003 0 0 0 2 2c.388 0 .775-.113 1.109-.336l36-24a2 2 0 0 0 0-3.329z"/></svg>
  311. <svg class="icon pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M22.537 8.046h17.791c1.104 0 2.003.898 2.003 1.993v79.912a2.005 2.005 0 0 1-2.003 2.003h-17.79a2.005 2.005 0 0 1-2.003-2.003V10.04c0-1.095.898-1.993 2.002-1.993zM59.672 8.046h17.8c1.095 0 1.993.898 1.993 1.993v79.912a2.003 2.003 0 0 1-1.993 2.003h-17.8a1.997 1.997 0 0 1-1.993-2.003V10.04c0-1.095.889-1.993 1.993-1.993z"/></svg>
  312. </div>
  313. <div class="player__next">
  314. <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M26.695 34.434v31.132L54.5 49.998z"/><path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"/><g><path d="M55.5 34.434v31.132l27.805-15.568z"/><path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"/></g></svg>
  315. </div>
  316. </div>
  317. </div>
  318. <div class="player__timeline">
  319. <p class="player__author"></p>
  320. <p class="player__song"></p>
  321. <div class="player__timelineBar"><div id="playhead"></div></div>
  322. </div>
  323. </div>
  324. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  325. <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
  326. <script >
  327.  
  328.  
  329. $(document).ready(function () {
  330. var audioElement = document.createElement('audio');
  331. audioElement.setAttribute('src', $('.active-song').attr('data-src'));
  332.  
  333. var tl = new TimelineMax();
  334. tl.to('.player__albumImg', 3, {
  335. rotation: '360deg',
  336. repeat: -1,
  337. ease: Power0.easeNone
  338. }, '-=0.2');
  339. tl.pause();
  340.  
  341. $('.player__play').click(function () {
  342.  
  343. if ($('.player').hasClass('play')) {
  344. $('.player').removeClass('play');
  345. audioElement.pause();
  346. TweenMax.to('.player__albumImg', 0.2, {
  347. scale: 1,
  348. ease: Power0.easeNone
  349. })
  350. tl.pause();
  351. } else {
  352. $('.player').addClass('play');
  353. audioElement.play();
  354. TweenMax.to('.player__albumImg', 0.2, {
  355. scale: 1.1,
  356. ease: Power0.easeNone
  357. })
  358. tl.resume();
  359. }
  360.  
  361. });
  362.  
  363.  
  364. var playhead = document.getElementById("playhead");
  365. audioElement.addEventListener("timeupdate", function () {
  366. var duration = this.duration;
  367. var currentTime = this.currentTime;
  368. var percentage = (currentTime / duration) * 100;
  369. playhead.style.width = percentage + '%';
  370. });
  371.  
  372. function updateInfo() {
  373. $('.player__author').text($('.active-song').attr('data-author'));
  374. $('.player__song').text($('.active-song').attr('data-song'));
  375. }
  376. updateInfo();
  377.  
  378. $('.player__next').click(function () {
  379. if ($('.player .player__albumImg.active-song').is(':last-child')) {
  380. $('.player__albumImg.active-song').removeClass('active-song');
  381. $('.player .player__albumImg:first-child').addClass('active-song');
  382. audioElement.addEventListener("timeupdate", function () {
  383. var duration = this.duration;
  384. var currentTime = this.currentTime;
  385. var percentage = (currentTime / duration) * 100;
  386. playhead.style.width = percentage + '%';
  387. });
  388. } else {
  389. $('.player__albumImg.active-song').removeClass('active-song').next().addClass('active-song');
  390. audioElement.addEventListener("timeupdate", function () {
  391. var duration = this.duration;
  392. var currentTime = this.currentTime;
  393. var percentage = (currentTime / duration) * 100;
  394. playhead.style.width = percentage + '%';
  395. });
  396. }
  397. updateInfo();
  398. audioElement.setAttribute('src', $('.active-song').attr('data-src'));
  399. audioElement.play();
  400. });
  401.  
  402. $('.player__prev').click(function () {
  403. if ($('.player .player__albumImg.active-song').is(':first-child')) {
  404. $('.player__albumImg.active-song').removeClass('active-song');
  405. $('.player .player__albumImg:last-child').addClass('active-song');
  406. audioElement.addEventListener("timeupdate", function () {
  407. var duration = this.duration;
  408. var currentTime = this.currentTime;
  409. var percentage = (currentTime / duration) * 100;
  410. playhead.style.width = percentage + '%';
  411. });
  412. } else {
  413. $('.player__albumImg.active-song').removeClass('active-song').prev().addClass('active-song');
  414. audioElement.addEventListener("timeupdate", function () {
  415. var duration = this.duration;
  416. var currentTime = this.currentTime;
  417. var percentage = (currentTime / duration) * 100;
  418. playhead.style.width = percentage + '%';
  419. });
  420. }
  421. updateInfo();
  422. audioElement.setAttribute('src', $('.active-song').attr('data-src'));
  423. audioElement.play();
  424. });
  425.  
  426. });
  427.  
  428. </script>
  429. <br> <center><font size="5"><font color="white">Copyright © 2018 || Indonesian Hacker Rulez ||</center>
  430. </body>
  431. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!