API tools faq
paste
glenthemes

Music Page [01]: Dreamer

glenthemes
Jun 11th, 2017 (edited)
5,178
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.08 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Music Page [01]: Dreamer
  3. Made by glenthemes
  4.  
  5. Initial release: 2017/06/11
  6. Last updated: 2019/04/11
  7.  
  8. TERMS OF USE:
  9. 1) Do not remove the theme credit.
  10. 2) Do not repost/redistribute my themes.
  11. 3) Do not take parts of the code and use it as your own.
  12. 4) Do not use my themes as a base code.
  13. 5) Do not mix my themes together.
  14. ------------------------------------------------------------------------>
  15.  
  16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  17. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  18.  
  19. <head>
  20.  
  21. <title>{Title}</title>
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <link rel="stylesheet" href="//cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  26.  
  27. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  28.  
  29. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  30.  
  31. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  32. <script>
  33. (function($){
  34. $(document).ready(function(){
  35. $("a[title]").style_my_tooltips({
  36. tip_follows_cursor:true,
  37. tip_delay_time:120,
  38. tip_fade_speed:120,
  39. attribute:"title"
  40. });
  41. });
  42. })(jQuery);
  43. </script>
  44.  
  45. <script src="//static.tumblr.com/gtjt4bo/oQ4pcx2p5/symphonia.js"></script>
  46.  
  47. <script src="//static.tumblr.com/gtjt4bo/ksJpcx2cj/concordia.js"></script>
  48.  
  49. <link rel="stylesheet" href="//static.tumblr.com/gtjt4bo/OiSpcx2yn/melodiam.css">
  50.  
  51. <script>
  52. // script credit: alexander farkas @ stackoverflow
  53. // //stackoverflow.com/questions/19790506
  54. document.addEventListener('play', function(e){
  55. var audios = document.getElementsByTagName('audio');
  56. for(var i = 0, len = audios.length; i < len;i++){
  57. if(audios[i] != e.target){
  58. audios[i].pause();
  59. }
  60. }
  61. }, true);
  62. </script>
  63.  
  64. <link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  65.  
  66. <link href="//fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet">
  67.  
  68. <style type="text/css">
  69.  
  70. /*--------------------TOOLTIPS--------------------*/
  71. #s-m-t-tooltip {
  72. padding: 4px 9px;
  73. margin: 26px 9px 0px 15px;
  74. background-color: #333; /* tooltip background color */
  75. font-family: karla;
  76. font-size: 8px;
  77. letter-spacing: 1px;
  78. text-transform: uppercase;
  79. color: #ddd; /* tooltip text color */
  80. z-index:99999!important;
  81. -webkit-transition: all 0.1s ease-in-out;
  82. -moz-transition: all 0.1s ease-in-out;
  83. -o-transition: all 0.1s ease-in-out;
  84. }
  85.  
  86. /*--------------------TUMBLR CONTROLS--------------------*/
  87. iframe#tumblr_controls, .iframe-controls--desktop {
  88. top:3px!important;
  89. right:3px!important;
  90. position:fixed!important;
  91. opacity:0.3;
  92. -webkit-filter:invert(100%);
  93. filter:invert(100%);
  94. z-index:999999!important;
  95. transition:0.3s ease-in-out;
  96. display:none;
  97. }
  98.  
  99. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  100. opacity:0.6;
  101. }
  102.  
  103. /*--------------------SCROLLBAR--------------------*/
  104. ::-webkit-scrollbar {
  105. width: 4px;
  106. height: 4px;
  107. }
  108.  
  109. ::-webkit-scrollbar-thumb {
  110. background-color: #303030; /* scrollbar color */
  111. }
  112.  
  113. ::-webkit-scrollbar-track {
  114. background-color: #010100; /* scrollbar background */
  115. }
  116.  
  117.  
  118. /*--------------------SCROLLBAR--------------------*/
  119. ::selection {
  120. background: #010100; /* text selection background */
  121. color:#c5c5c5; /* text selection color */
  122. }
  123.  
  124. ::-moz-selection {
  125. background: #010100; /* text selection background */
  126. color:#c5c5c5; /* text selection color */
  127. }
  128.  
  129.  
  130. /*--------------------BASICS--------------------*/
  131. body {
  132. background-color:#f8f8f8; /* background color */
  133. background-image:url(//68.media.tumblr.com/2c745b6adf78596c3a9ba6bef089087f/tumblr_ord7zghqUp1qg2f5co3_r1_250.png);
  134. background-position:fixed;
  135. background-repeat:repeat;
  136. color:#b3b3b3;
  137. cursor:normal;
  138. font-family:Karla, "KaiTi", "楷体", STKaiti, "华文楷体", serif;
  139. line-height:16px;
  140. font-size:12px;
  141. letter-spacing:0px;
  142. text-align:left;
  143. }
  144.  
  145. a {
  146. color:#c884a0; /* link color */
  147. text-decoration:none;
  148. cursor:normal;
  149. text-decoration:none;
  150. -webkit-transition: all 0.4s ease-in-out;
  151. -moz-transition: all 0.4s ease-in-out;
  152. -o-transition: all 0.4s ease-in-out;
  153. }
  154.  
  155. a:hover {
  156. text-decoration:none;
  157. color:#eee; /* link hover color */
  158. }
  159.  
  160. img {
  161. opacity:1;
  162. text-decoration:none;
  163. }
  164.  
  165. /*-----------------------PHONE SCREEN-----------------------*/
  166. #phone {
  167. position:fixed;
  168. top:50%; left:50%;
  169. transform: translate(-50%, -50%);
  170. width:275px;
  171. height:calc((275px * 1.5625) + 50px);
  172.  
  173. /* phone borders. make sure the colors are all the same */
  174. border-top:25px solid #232323;
  175. border-right:25px solid #232323;
  176. border-bottom:50px solid #232323;
  177. border-left:25px solid #232323;
  178.  
  179. display:table;
  180. border-radius:15px;
  181. }
  182.  
  183. #phone:after {
  184. content:"";
  185. position:absolute;
  186. top:100%;
  187. margin-top:8px;
  188. margin-left:calc(-5px + ((275px / 2) * -1) - 10px);
  189. width:33px;
  190. height:33px;
  191. background-color:#111; /* phone "home" button color */
  192. border-radius:100%;
  193. border:1px solid #444; /* phone "home button border */
  194. }
  195.  
  196. #phone img {width:100%;overflow:hidden;}
  197.  
  198. .toptitle {
  199. background-color:#333; /* top bar navigation background color */
  200. color:#eee; /* top bar navigation text color*/
  201. position:inline;margin-top:-1px;
  202. width:275px;
  203. text-align:center;
  204. font-family:raleway;
  205. text-transform:uppercase;
  206. letter-spacing:1px;
  207. padding:15px 0;
  208. }
  209.  
  210. .nav1 {margin-left:10px;}
  211.  
  212. .nav2 {margin-left:247px;}
  213.  
  214. .nav1, .nav2 {
  215. position:absolute;
  216. margin-top:-34px;
  217. width:20px;height:23px;
  218. -webkit-transition: all 0.4s ease-in-out;
  219. -moz-transition: all 0.4s ease-in-out;
  220. -o-transition: all 0.4s ease-in-out;
  221. }
  222.  
  223. .nav1:hover, .nav2:hover {opacity:0.6;}
  224.  
  225. .nav1 .lnr, .nav2 .lnr {
  226. font-size:20px;
  227. color:#fff; /* top bar navigation buttons color */
  228. }
  229.  
  230. .sheep {
  231. position:absolute;
  232. margin:97.5px auto auto auto;
  233. left:0;right:0;
  234. width:80px;
  235. height:80px;
  236. background-color:rgba(255,255,255,0.72); /* "now playing" music button background color*/
  237. border-radius:100%;
  238. cursor:pointer;
  239. -webkit-transition: all 0.2s ease-in-out;
  240. -moz-transition: all 0.2s ease-in-out;
  241. -o-transition: all 0.2s ease-in-out;
  242. }
  243.  
  244. .sheep:hover {
  245. -webkit-transform:scale3d(1.2,1.2,1.2);
  246. transform:scale3d(1.2,1.2,1.2);
  247. }
  248.  
  249. .tri, .paws {
  250. margin:32px 0px 0px 6px;
  251. color:#000; /* "now playing" music button color */
  252. font-size:35px;
  253. text-align:center;
  254. }
  255.  
  256. .tri {visibility:visible;}
  257. .change1 {visibility:hidden;}
  258.  
  259. .paws {visibility:hidden;margin-left:0px;}
  260. .change2 {visibility:visible;margin-top:-16px;}
  261.  
  262. .nowplaying {
  263. position:absolute;
  264. margin-top:243px; /* on index pages: change to 239px */
  265. width:275px;
  266. padding:9px 0px 7px 0px;
  267. background-color:rgba(0,0,0,0.7); /* "now playing" song info background color*/
  268. color:#eee /* "now playing" song info color */;
  269. text-align:center;
  270. font-family:raleway;
  271. text-transform:uppercase;
  272. letter-spacing:1px;
  273. }
  274.  
  275. #infosect {
  276. background-color:#333 /* music playlist background color */;
  277. position:absolute;
  278. margin-top:274px;
  279. width:275px;
  280. height:162px;
  281. }
  282.  
  283. #infosect table {padding:10px;}
  284.  
  285. #infosect tbody {line-height:1.4;}
  286.  
  287. #infosect tr {
  288. color:#ccc; /* music playlist text color */
  289. cursor:pointer;
  290. -webkit-transition: all 0.2s ease-in-out;
  291. -moz-transition: all 0.2s ease-in-out;
  292. -o-transition: all 0.2s ease-in-out;
  293. }
  294.  
  295. #infosect tr:hover {color:#fff; /* music playlist text color hover */}
  296.  
  297. #infosect td {width:100%;}
  298.  
  299. /*-----------------------CUSTOM LINKS-----------------------*/
  300. #customlinks {
  301. position:fixed;
  302. bottom:0;left:0;
  303. margin-bottom:15px;
  304. margin-left:15px;
  305. width:50px;
  306. height:auto;
  307. z-index:3000;
  308. }
  309.  
  310. #customlinks .lnr {
  311. font-size:12px;
  312. padding:10px 9px 10px 10px;
  313. background-color:#333; /* custom links background color */
  314. color:#eee; /* custom links color */
  315. display:inline-block;
  316. margin-top:3px;
  317. margin-bottom:3px;
  318. border-radius:100%;
  319. -webkit-transition: all 0.4s ease-in-out;
  320. -moz-transition: all 0.4s ease-in-out;
  321. -o-transition: all 0.4s ease-in-out;
  322. }
  323.  
  324. #customlinks .lnr:hover {
  325. background-color:#ff7969; /* custom links hover background color */
  326. color:#fff; /* custom links hover color */
  327. }
  328.  
  329. /*-----------------------CREDIT. DO NOT REMOVE-----------------------*/
  330. #c {
  331. position:fixed;
  332. bottom:20px;
  333. right:20px;
  334. z-index:9000;
  335. }
  336.  
  337. #c a {font-family:karla;
  338. font-size:8px;
  339. text-transform:uppercase;
  340. color:#eee; /* credit color */
  341. background-color:#333; /* credit background color */
  342. letter-spacing:1.3px;
  343. padding:5px 7px;
  344. }
  345.  
  346. #c a:hover {
  347. color:#fff; /* credit hover color */
  348. background-color: #ff7969; /* credit background hover color */
  349. }
  350.  
  351. </style>
  352.  
  353. </head>
  354.  
  355. <body>
  356.  
  357. <div id="phone">
  358.  
  359. <div class="toptitle">Your title here</div>
  360.  
  361. <div class="nav1"><a href="/" title="return to index"><span class="lnr lnr-arrow-left"></span></a></div>
  362.  
  363. <div class="nav2">
  364. <a href="/" title="your title here"> <!-- a custom link here -->
  365. <span class="lnr lnr-menu"></span>
  366. </a></div>
  367.  
  368.  
  369. <div class="sheep" onclick="javascript:toggleMainAudio();">
  370. <div class="tri">▶</div>
  371. <div class="paws">❚❚</div>
  372. </div>
  373.  
  374. <!-- audio file link for main audio -->
  375. <audio src="//a.tumblr.com/tumblr_or9hfuOYp01u3hof1o1.mp3" type="audio/mpeg" id="mainaudio"></audio>
  376.  
  377. <!-- audio file link for playlist audio 1 -->
  378. <audio src="//a.tumblr.com/tumblr_orb8vgZIKY1slxksio1.mp3" type="audio/mpeg" id="audio1"></audio>
  379.  
  380. <!-- audio file link for playlist audio 2 -->
  381. <audio src="//a.tumblr.com/tumblr_orb94iiPHt1slxksio1.mp3" type="audio/mpeg" id="audio2"></audio>
  382.  
  383. <!-- audio file link for playlist audio 3 -->
  384. <audio src="//a.tumblr.com/tumblr_orb9cvHBte1slxksio1.mp3" type="audio/mpeg" id="audio3"></audio>
  385.  
  386. <!-- audio file link for playlist audio 4 -->
  387. <audio src="//a.tumblr.com/tumblr_orb9otQ9GL1slxksio1.mp3" type="audio/mpeg" id="audio4"></audio>
  388.  
  389. <!-- audio file link for playlist audio 5 -->
  390. <audio src="//a.tumblr.com/tumblr_orb9t3MM0N1slxksio1.mp3" type="audio/mpeg" id="audio5"></audio>
  391.  
  392. <!-- audio file link for playlist audio 6 -->
  393. <audio src="//a.tumblr.com/tumblr_orb9xtl3eA1slxksio1.mp3" type="audio/mpeg" id="audio6"></audio>
  394.  
  395. <!-- audio file link for playlist audio 7 -->
  396. <audio src="//a.tumblr.com/tumblr_ojftm9p1QL1v9fz3vo1.mp3" type="audio/mpeg" id="audio7"></audio>
  397.  
  398. <!--you can have up to 30 songs-->
  399.  
  400. <div class="nowplaying">
  401. <marquee>
  402.  
  403. <!-- "now playing" song info -->
  404. Artist name — Song name
  405.  
  406. </marquee>
  407. </div>
  408.  
  409. <div id="infosect">
  410.  
  411. <table><tbody>
  412.  
  413. <tr class="woah1" onclick="javascript:toggleAudio1();"><!--row 1 START-->
  414. <td>Song name #1</td><!-- playlist song #1 name -->
  415.  
  416. <td>
  417. <div class="trii1">▶</div>
  418. <div class="pawss1">❚❚</div>
  419. </td>
  420. </tr><!--row 1 END-->
  421.  
  422.  
  423. <tr class="woah2" onclick="javascript:toggleAudio2();"><!--row 2 START-->
  424. <td>Song name #2</td><!-- playlist song #2 name -->
  425.  
  426. <td>
  427. <div class="trii2">▶</div>
  428. <div class="pawss2">❚❚</div>
  429. </td>
  430. </tr><!--row 2 END-->
  431.  
  432.  
  433. <tr class="woah3" onclick="javascript:toggleAudio3();"><!--row 3 START-->
  434. <td>Song name #3</td><!-- playlist song #3 name -->
  435.  
  436. <td>
  437. <div class="trii3">▶</div>
  438. <div class="pawss3">❚❚</div>
  439. </td>
  440. </tr><!--row 3 END-->
  441.  
  442.  
  443. <tr class="woah4" onclick="javascript:toggleAudio4();"><!--row 4 START-->
  444. <td>Song name #4</td><!-- playlist song #4 name -->
  445.  
  446. <td>
  447. <div class="trii4">▶</div>
  448. <div class="pawss4">❚❚</div>
  449. </td>
  450. </tr><!--row 4 END-->
  451.  
  452.  
  453. <tr class="woah5" onclick="javascript:toggleAudio5();"><!--row 5 START-->
  454. <td>Song name #5</td><!-- playlist song #5 name -->
  455.  
  456. <td>
  457. <div class="trii5">▶</div>
  458. <div class="pawss5">❚❚</div>
  459. </td>
  460. </tr><!--row 5 END-->
  461.  
  462.  
  463. <tr class="woah6" onclick="javascript:toggleAudio6();"><!--row 6 START-->
  464. <td>Song name #6</td><!-- playlist song #6 name -->
  465.  
  466. <td>
  467. <div class="trii6">▶</div>
  468. <div class="pawss6">❚❚</div>
  469. </td>
  470. </tr><!--row 6 END-->
  471.  
  472.  
  473. <tr class="woah7" onclick="javascript:toggleAudio7();"><!--row 7 START-->
  474. <td>Song name #7</td><!-- playlist song #7 name -->
  475.  
  476. <td>
  477. <div class="trii7">▶</div>
  478. <div class="pawss7">❚❚</div>
  479. </td>
  480. </tr><!--row 7 END-->
  481.  
  482. <!--you can have up to 30 songs-->
  483.  
  484. </tbody></table>
  485.  
  486. </div>
  487.  
  488. <!--album art for your "main song"-->
  489. <img src="//68.media.tumblr.com/dd9021da7137a7fd8a6081aa8223a3e4/tumblr_or9qelnnDN1qg2f5co1_1280.jpg" />
  490.  
  491. </div>
  492.  
  493. <!-----CUSTOM LINKS----->
  494. <div id="customlinks" class="animated fadeInLeftBig">
  495. <a href="/" title="home"><span class="lnr lnr-power-switch"></span></a>
  496. <a href="/" title="contact"><span class="lnr lnr-phone"></span></a>
  497. <a href="/" title="archive"><span class="lnr lnr-map"></span></a>
  498. <!-----YOUR CUSTOM LINKS----->
  499. <!-----FEEL FREE TO CHANGE THE ICONS----->
  500. <!-----"sample link" IS THE TOOLTIP TEXT ON HOVER----->
  501. <a href="/" title="sample link"><span class="lnr lnr-link"></span></a>
  502. <a href="/" title="sample link"><span class="lnr lnr-list"></span></a>
  503. <a href="/" title="sample link"><span class="lnr lnr-star"></span></a>
  504. </div>
  505.  
  506. <!-----CREDIT. DO NOT REMOVE----->
  507. <div id="c" class="animated fadeInRightBig"><a href="//glenthemes.tumblr.com" title="page by glenthemes" target="_blank">© 2017 Glenthemes</a></div>
  508.  
  509. </body>
  510.  
  511. </div></div>
  512. </html>
Advertisement
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!