API tools faq
paste
Kawiesh

Temp. NP

Kawiesh
Sep 9th, 2021 (edited)
1,374
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="theme-color" content="black"/>
  6. <meta name="msapplication-TileColor" content="#da532c"/>
  7. <meta name="msapplication-navbutton-color" content="black"/>
  8. <meta name="apple-mobile-web-app-capable" content="yes"/>
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  11.  
  12. <title></title>
  13.  
  14. <style>            
  15. *{
  16. box-sizing: border-box;
  17. margin:0; padding:0;
  18. outline: none;
  19. }
  20.  
  21. :root {
  22. --black: black;
  23. }
  24.  
  25. body{
  26. background: rgb(251,244,234) url("");
  27. min-width: 100vw; min-height: 100vh;
  28. position: relative;
  29. display: flex;
  30. flex-direction: column;
  31. align-items: center;
  32. justify-content: flex-start;
  33. }
  34.  
  35. #container{
  36. border: 1px solid red;
  37. margin-top: 20px;
  38. position: relative;
  39. display: flex;
  40. flex-direction: column;
  41. align-items: center;
  42. justify-content: flex-start;
  43. }
  44.  
  45.  
  46. .kdplayer{
  47. border:1px solid black;
  48. display: flex;
  49. align-items: center;
  50. padding: 5px;
  51. background: white;
  52. }
  53.  
  54. .kdcontrols{
  55. font-size: 20px;
  56. display: flex;
  57. align-items: center;
  58. margin-right:5px;
  59. }
  60.  
  61.  
  62.  
  63. .stop{
  64. border-left: 5px solid black;
  65. border-right: 5px solid black;
  66. height: 15px;
  67. width: 15px;
  68. }
  69.  
  70.  
  71. .play{
  72. width: 0;
  73. height: 0;
  74. border-top: 7.5px solid transparent;
  75. border-left: 15px solid black;
  76. border-bottom: 7.5px solid transparent;
  77. }
  78.  
  79.  
  80. .kdprogress{
  81. -webkit-appearance: none;
  82. height: 5px;
  83. background: #d3d3d3;
  84. outline: none;
  85. margin-right:5px;
  86. }
  87.  
  88. /*
  89. .kdduration{
  90. font-weight: bold;
  91. }*/
  92.  
  93. .kdtotaltime{
  94. height: 15px;
  95. width: 15px;
  96. }
  97.  
  98. .kdprogress::-webkit-slider-thumb{
  99. -webkit-appearance: none; appearance: none;
  100. -webkit-tap-highlight-color: transparent;
  101. width: 10px; height: 10px;
  102. border: 0px solid white;
  103. border-radius:50%;
  104. background: var(--black);
  105. cursor: pointer;
  106. }
  107.  
  108. .kdprogress::-moz-range-thumb{
  109. -webkit-tap-highlight-color: transparent;
  110. width: 10px; height: 10px;
  111. border: 0px solid white;
  112. border-radius:50%;
  113. background: var(--black);
  114. cursor: pointer;
  115. }
  116.  
  117.  
  118.  
  119.  
  120. @media (orientation:portrait){
  121. #container{
  122. width: 95%; height: auto;
  123. }
  124. body{background-size: 35%}     
  125. }  
  126.  
  127. @media (orientation:landscape){
  128. #container{
  129. width: 75%; height: auto;
  130. }
  131. body{background-size: 50%}         
  132. }  
  133.  
  134. </style>
  135. </head>
  136. <body>
  137. <div id="container">
  138. TEST CONTENT                           
  139. </div>
  140. <script>   
  141.  
  142. let create= (x)=> document.createElement(x),
  143. select= (x,y=document)=> y.querySelector(x),
  144. selectAll= (x,y=document)=> y.querySelectorAll(x);
  145.  
  146.  
  147. //Display---Time------
  148. function audioTime(x){
  149. let a= new Date(x * 1000).toISOString().substr(11,8);
  150. let b= a.split(":");
  151. let h= b[0], m= b[1], s= b[2];
  152. return (h>0) ? (h+":"+m+":"+s) : (m+":"+s);
  153. }
  154.  
  155.  
  156. function createPlayer(x,y=document.body){
  157. let a= create("div"),
  158. b= create("div"),
  159. c= create("input"),
  160. d= create("div"),
  161. e= create("div"),
  162. f= create("audio");
  163.  
  164. a.className= "kdplayer";
  165. b.className= "kdcontrols play";
  166. c.className= "kdprogress"; c.type= "range";
  167. d.className= "kdduration";
  168. e.className= "kdtotaltime";
  169. f.className= "kdaudio"; f.src= x;
  170.  
  171. a.append(b,c,d,e,f);
  172. y.append(a);
  173.  
  174.  
  175.  
  176. //Play--Pause
  177. b.onclick= function(){
  178. if(f.paused){
  179. b.className= "kdcontrols stop"
  180. f.play();
  181. }
  182. else{
  183. b.className= "kdcontrols play"
  184. f.pause();
  185. }
  186. };
  187.  
  188.  
  189.  
  190. //When----Playing-------
  191. f.ontimeupdate= function (){
  192. if(this.duration==Infinity){
  193. c.disabled= true;
  194. document.documentElement.style.setProperty('--black', 'transparent');
  195. d.innerHTML= audioTime(this.currentTime) + "&nbsp;/&nbsp;";
  196. e.innerHTML= infinityicon;
  197. }
  198. else{
  199. c.disabled= false;
  200. document.documentElement.style.setProperty('--black', 'black');
  201. c.min= "0";
  202. c.max= this.duration;
  203. c.value= this.currentTime;
  204. d.innerHTML= audioTime(this.currentTime) + "&nbsp;/&nbsp;";
  205. e.innerHTML= audioTime(this.duration);
  206. }
  207. };
  208.  
  209.  
  210. //When----Stopped-----
  211. f.onended= function(){
  212. b.className= "kdcontrols play";
  213. c.value= "0";
  214. d.innerHTML= "00:00&nbsp;/&nbsp;";
  215. };
  216.  
  217. //When----Seeking------
  218. c.oninput= function(){
  219. f.currentTime= this.value;
  220. };
  221.  
  222.  
  223. }
  224.  
  225.  
  226.  
  227.  
  228.  
  229. let src1= "http://168.195.218.193:8000/radio1-1";
  230.  
  231.  
  232. let src= "/storage/emulated/0/Music/Yahan-Per-Sab-Shanti (SongsMp3.Com).mp3";
  233.  
  234. let playicon= "c";
  235. let pauseicon= "d";
  236. let infinityicon= `<svg aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M252 128a60 60 0 0 1-102.426 42.426q-.257-.257-.498-.529l-59.86-67.59a36 36 0 1 0 0 51.387l3.085-3.484a12 12 0 0 1 17.967 15.912l-3.344 3.775q-.24.272-.498.53a60 60 0 1 1 0-84.853q.257.257.498.53l59.86 67.59a36 36 0 1 0 0-51.388l-3.085 3.484a12 12 0 0 1-17.967-15.912l3.344-3.775q.24-.272.498-.53A60 60 0 0 1 252 128z" fill="currentColor"/>&infin;</svg>`;
  237.  
  238. //usage: createPlayer(src1,location where player will be added. default is document body end);
  239. createPlayer(src1);
  240.  
  241.  
  242.  
  243. </script>  
  244. </body>
  245. </html>
  246.  
  247.  
  248. //--------
  249.  
  250.  
  251. function seekable(a){
  252. let sheet = document.styleSheets[0];
  253. let rules = sheet.cssRules || sheet.rules;
  254.  
  255. if(rules[8].height) rules[8].style.height= a;
  256. if(rules[9].height) rules[9].style.height= a;
  257. }
  258.  
  259.  
  260. //---
  261.  
  262. <style>
  263. .main{
  264. width:215px;
  265. padding:5px;
  266. display: grid;
  267. grid-gap: 5px;
  268. grid-template-columns: repeat(4,50px);
  269. grid-template-rows: 80px;
  270. grid-auto-rows: 50px;
  271. border: 2px solid black;
  272. box-shadow: black 3px 5px 5px;
  273. background: rgb(0,0,0,0.1);
  274. }
  275.  
  276. .btn{
  277. /*width:20px;
  278. height:20px;*/
  279. border:1px solid black;
  280. text-align: center;
  281. display: flex;
  282. justify-content: center;
  283. align-items: center;
  284. outline: 1px solid blue;
  285. outline-offset: -4px;
  286. }
  287.  
  288. textarea{
  289. grid-column: 1/-1;
  290. display: flex;
  291. justify-content: flex-end;
  292. align-items: flex-end;
  293. border: 5px;
  294. border-style: ridge;
  295. }
  296.  
  297. .mu,.di,.ad,.mi{background: rgb(255,255,200);}
  298. .eq{background: rgb(0,255,0,0.2);}
  299. .cl,.de{background: rgb(255,0,0,0.2);}
  300. .bo,.bc,.po{background: rgb(0,0,0,0.1);}
  301. </style>
  302. <div class="main">
  303. <textarea>Calculation</textarea>
  304. <div class="btn cl">CL</div>
  305. <div class="btn bo">(</div>
  306. <div class="btn bc">)</div>
  307. <div class="btn mu">×</div>
  308. <div class="btn nr">1</div>
  309. <div class="btn nr">2</div>
  310. <div class="btn nr">3</div>
  311. <div class="btn di">÷</div>
  312. <div class="btn nr">4</div>
  313. <div class="btn nr">5</div>
  314. <div class="btn nr">6</div>
  315. <div class="btn ad">+</div>
  316. <div class="btn nr">7</div>
  317. <div class="btn nr">8</div>
  318. <div class="btn nr">9</div>
  319. <div class="btn mi">-</div>
  320. <div class="btn po">.</div>
  321. <div class="btn nr">0</div>
  322. <div class="btn de">Del</div>
  323. <div class="btn eq">=</div>
  324. </div>
  325.  
  326.  
  327. /-----
  328.  
  329. <style>
  330. #wrapper{
  331. width: 500px;
  332. display: grid;
  333. grid-row-gap: 5px;
  334. grid-column-gap: 5px;
  335. grid-template-columns: 3fr 1fr;
  336. grid-auto-rows: 1fr 10fr 3fr 1fr;
  337. grid-template-areas:
  338. "nav nav"
  339. "content col"
  340. "content abt"
  341. "foot foot";
  342. }
  343.  
  344. #wrapper>*{
  345. display: flex;
  346. align-items: center;
  347. justify-content: center;
  348. }
  349.  
  350.  
  351. #navbar{
  352. grid-area: nav;
  353. background: pink;
  354. }
  355.  
  356. #content{
  357. grid-area: content;
  358. background: green;
  359. }
  360.  
  361. #col{
  362. grid-area: col;
  363. background:gray;
  364. }
  365.  
  366. #abt{
  367. grid-area: abt;
  368. background: yellow;
  369. }
  370.  
  371. #footer{
  372. grid-area: foot;
  373. background: gold;
  374. }
  375.  
  376.  
  377. </style>
  378. <div id="wrapper">
  379. <div id="navbar">Nav</div>
  380. <div id="content">content</div>
  381. <div id="col">col</div>
  382. <div id="abt">about</div>
  383. <div id="footer">foot</div>
  384. </div>
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!