From 4fcdd1fd08c48ffa58a69c755043a61704a24859 Mon Sep 17 00:00:00 2001
From: HT <glenthemes.exe@gmail.com>
Date: Fri, 22 Jul 2022 04:31:02 +0100
Subject: [PATCH] =?UTF-8?q?=E2=82=8A=E2=81=BA=E2=9C=BF=CB=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 music-pages/01-Dreamer | 512 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 512 insertions(+)
 create mode 100644 music-pages/01-Dreamer
diff --git a/music-pages/01-Dreamer b/music-pages/01-Dreamer
new file mode 100644
index 0000000..34ba3d0
--- /dev/null
+++ b/music-pages/01-Dreamer
@@ -0,0 +1,512 @@
+<!-----------------------------------------------------------------------
+Music Page [01]: Dreamer
+Made by glenthemes
+
+Initial release: 2017/06/11
+Last updated: 2019/04/11
+ 
+TERMS OF USE:
+1) Do not remove the theme credit.
+2) Do not repost/redistribute my themes.
+3) Do not take parts of the code and use it as your own.
+4) Do not use my themes as a base code.
+5) Do not mix my themes together.
+------------------------------------------------------------------------>
+ 
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ 
+<head>
+ 
+<title>{Title}</title>
+ 
+<link rel="shortcut icon" href="{Favicon}">
+
+<link rel="stylesheet" href="//cdn.linearicons.com/free/1.0.0/icon-font.min.css">
+
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
+ 
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+ 
+<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
+<script>
+(function($){
+$(document).ready(function(){
+$("a[title]").style_my_tooltips({
+tip_follows_cursor:true,
+tip_delay_time:120,
+tip_fade_speed:120,
+attribute:"title"
+});
+});
+})(jQuery);
+</script>
+
+<script src="//static.tumblr.com/gtjt4bo/oQ4pcx2p5/symphonia.js"></script>
+
+<script src="//static.tumblr.com/gtjt4bo/ksJpcx2cj/concordia.js"></script>
+
+<link rel="stylesheet" href="//static.tumblr.com/gtjt4bo/OiSpcx2yn/melodiam.css">
+
+<script>
+// script credit: alexander farkas @ stackoverflow
+// //stackoverflow.com/questions/19790506
+document.addEventListener('play', function(e){
+    var audios = document.getElementsByTagName('audio');
+    for(var i = 0, len = audios.length; i < len;i++){
+        if(audios[i] != e.target){
+            audios[i].pause();
+        }
+    }
+}, true);
+</script>
+ 
+<link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
+
+<link href="//fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet">
+ 
+<style type="text/css">
+ 
+/*--------------------TOOLTIPS--------------------*/
+#s-m-t-tooltip {
+    padding: 4px 9px;
+    margin: 26px 9px 0px 15px;
+    background-color: #333; /* tooltip background color */
+    font-family: karla;
+    font-size: 8px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: #ddd; /* tooltip text color */
+    z-index:99999!important;
+    -webkit-transition: all 0.1s ease-in-out;
+    -moz-transition: all 0.1s ease-in-out;
+    -o-transition: all 0.1s ease-in-out;
+}
+ 
+/*--------------------TUMBLR CONTROLS--------------------*/
+iframe#tumblr_controls, .iframe-controls--desktop {
+    top:3px!important;
+    right:3px!important;
+    position:fixed!important;
+    opacity:0.3;
+    -webkit-filter:invert(100%);
+    filter:invert(100%);
+    z-index:999999!important;
+    transition:0.3s ease-in-out;
+    display:none;
+}
+ 
+iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
+    opacity:0.6;
+}
+ 
+/*--------------------SCROLLBAR--------------------*/
+::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+ 
+::-webkit-scrollbar-thumb {
+    background-color: #303030; /* scrollbar color */
+}
+ 
+::-webkit-scrollbar-track {
+    background-color: #010100; /* scrollbar background */
+}
+ 
+ 
+/*--------------------SCROLLBAR--------------------*/
+::selection {
+background: #010100; /* text selection background */
+color:#c5c5c5; /* text selection color */
+}
+ 
+::-moz-selection {
+background: #010100; /* text selection background */
+color:#c5c5c5; /* text selection color */
+}
+ 
+ 
+/*--------------------BASICS--------------------*/
+body {
+background-color:#f8f8f8; /* background color */
+background-image:url(//68.media.tumblr.com/2c745b6adf78596c3a9ba6bef089087f/tumblr_ord7zghqUp1qg2f5co3_r1_250.png);
+background-position:fixed;
+background-repeat:repeat;
+color:#b3b3b3;
+cursor:normal;
+font-family:Karla, "KaiTi", "楷体", STKaiti, "华文楷体", serif;
+line-height:16px;
+font-size:12px;
+letter-spacing:0px;
+text-align:left;
+}
+
+a {
+color:#c884a0; /* link color */
+text-decoration:none;
+cursor:normal;
+text-decoration:none;
+-webkit-transition: all 0.4s ease-in-out;
+-moz-transition: all 0.4s ease-in-out;
+-o-transition: all 0.4s ease-in-out;
+}
+ 
+a:hover {
+text-decoration:none;
+color:#eee; /* link hover color */
+}
+ 
+img {
+opacity:1;
+text-decoration:none;
+}
+
+/*-----------------------PHONE SCREEN-----------------------*/
+#phone {
+    position:fixed;
+    top:50%; left:50%;
+    transform: translate(-50%, -50%);
+    width:275px;
+    height:calc((275px * 1.5625) + 50px);
+    
+    /* phone borders. make sure the colors are all the same */
+    border-top:25px solid #232323;
+    border-right:25px solid #232323;
+    border-bottom:50px solid #232323;
+    border-left:25px solid #232323;
+    
+    display:table;
+    border-radius:15px;
+}
+
+#phone:after {
+    content:"";
+    position:absolute;
+    top:100%;
+    margin-top:8px;
+    margin-left:calc(-5px + ((275px / 2) * -1) - 10px);
+    width:33px;
+    height:33px;
+    background-color:#111; /* phone "home" button color */
+    border-radius:100%;
+    border:1px solid #444; /* phone "home button border */
+}
+
+#phone img {width:100%;overflow:hidden;}
+
+.toptitle {
+    background-color:#333; /* top bar navigation background color */
+    color:#eee; /* top bar navigation text color*/
+    position:inline;margin-top:-1px;
+    width:275px;
+    text-align:center;
+    font-family:raleway;
+    text-transform:uppercase;
+    letter-spacing:1px;
+    padding:15px 0;
+}
+
+.nav1 {margin-left:10px;}
+
+.nav2 {margin-left:247px;}
+
+.nav1, .nav2 {
+    position:absolute;
+    margin-top:-34px;
+    width:20px;height:23px;
+    -webkit-transition: all 0.4s ease-in-out;
+    -moz-transition: all 0.4s ease-in-out;
+    -o-transition: all 0.4s ease-in-out;
+}
+
+.nav1:hover, .nav2:hover {opacity:0.6;}
+
+.nav1 .lnr, .nav2 .lnr {
+    font-size:20px;
+    color:#fff; /* top bar navigation buttons color */
+}
+
+.sheep {
+    position:absolute;
+    margin:97.5px auto auto auto;
+    left:0;right:0;
+    width:80px;
+    height:80px;
+    background-color:rgba(255,255,255,0.72); /* "now playing" music button background color*/
+    border-radius:100%;
+    cursor:pointer;
+    -webkit-transition: all 0.2s ease-in-out;
+    -moz-transition: all 0.2s ease-in-out;
+    -o-transition: all 0.2s ease-in-out;
+}
+
+.sheep:hover {
+    -webkit-transform:scale3d(1.2,1.2,1.2);
+    transform:scale3d(1.2,1.2,1.2);
+}
+
+.tri, .paws {
+    margin:32px 0px 0px 6px;
+    color:#000; /* "now playing" music button color */
+    font-size:35px;
+    text-align:center;
+}
+
+.tri {visibility:visible;}
+.change1 {visibility:hidden;}
+
+.paws {visibility:hidden;margin-left:0px;}
+.change2 {visibility:visible;margin-top:-16px;}
+
+.nowplaying {
+    position:absolute;
+    margin-top:243px; /* on index pages: change to 239px */
+    width:275px;
+    padding:9px 0px 7px 0px;
+    background-color:rgba(0,0,0,0.7); /* "now playing" song info background color*/
+    color:#eee /* "now playing" song info color */;
+    text-align:center;
+    font-family:raleway;
+    text-transform:uppercase;
+    letter-spacing:1px;
+}
+
+#infosect {
+    background-color:#333 /* music playlist background color */;
+    position:absolute;
+    margin-top:274px;
+    width:275px;
+    height:162px;
+}
+
+#infosect table {padding:10px;}
+
+#infosect tbody {line-height:1.4;}
+
+#infosect tr {
+    color:#ccc; /* music playlist text color */
+    cursor:pointer;
+    -webkit-transition: all 0.2s ease-in-out;
+    -moz-transition: all 0.2s ease-in-out;
+    -o-transition: all 0.2s ease-in-out;
+}
+
+#infosect tr:hover {color:#fff; /* music playlist text color hover */}
+
+#infosect td {width:100%;}
+
+/*-----------------------CUSTOM LINKS-----------------------*/
+#customlinks {
+    position:fixed;
+    bottom:0;left:0;
+    margin-bottom:15px;
+    margin-left:15px;
+    width:50px;
+    height:auto;
+    z-index:3000;
+}
+ 
+#customlinks .lnr {
+    font-size:12px;
+    padding:10px 9px 10px 10px;
+    background-color:#333; /* custom links background color */
+    color:#eee; /* custom links color */
+    display:inline-block;
+    margin-top:3px;
+    margin-bottom:3px;
+    border-radius:100%;
+    -webkit-transition: all 0.4s ease-in-out;
+    -moz-transition: all 0.4s ease-in-out;
+    -o-transition: all 0.4s ease-in-out;
+}
+ 
+#customlinks .lnr:hover {
+    background-color:#ff7969;  /* custom links hover background color */
+    color:#fff; /* custom links hover color */
+}
+
+/*-----------------------CREDIT. DO NOT REMOVE-----------------------*/
+#c {
+    position:fixed;
+    bottom:20px;
+    right:20px;
+    z-index:9000;
+}
+ 
+#c a {font-family:karla;
+    font-size:8px;
+    text-transform:uppercase;
+    color:#eee; /* credit color */
+    background-color:#333; /* credit background color */
+    letter-spacing:1.3px;
+    padding:5px 7px;
+}
+ 
+#c a:hover {
+    color:#fff; /* credit hover color */
+    background-color: #ff7969; /* credit background hover color */
+}
+ 
+</style>
+ 
+</head>
+ 
+<body>
+
+<div id="phone">
+
+<div class="toptitle">Your title here</div>
+
+<div class="nav1"><a href="/" title="return to index"><span class="lnr lnr-arrow-left"></span></a></div>
+
+<div class="nav2">
+    <a href="/" title="your title here"> <!-- a custom link here -->
+    <span class="lnr lnr-menu"></span>
+</a></div>
+
+
+<div class="sheep" onclick="javascript:toggleMainAudio();">
+    <div class="tri">▶</div>
+    <div class="paws">❚❚</div>
+</div>
+
+<!-- audio file link for main audio -->
+<audio src="//a.tumblr.com/tumblr_or9hfuOYp01u3hof1o1.mp3" type="audio/mpeg" id="mainaudio"></audio>
+
+<!-- audio file link for playlist audio 1 -->
+<audio src="//a.tumblr.com/tumblr_orb8vgZIKY1slxksio1.mp3" type="audio/mpeg" id="audio1"></audio>
+
+<!-- audio file link for playlist audio 2 -->
+<audio src="//a.tumblr.com/tumblr_orb94iiPHt1slxksio1.mp3" type="audio/mpeg" id="audio2"></audio>
+
+<!-- audio file link for playlist audio 3 -->
+<audio src="//a.tumblr.com/tumblr_orb9cvHBte1slxksio1.mp3" type="audio/mpeg" id="audio3"></audio>
+
+<!-- audio file link for playlist audio 4 -->
+<audio src="//a.tumblr.com/tumblr_orb9otQ9GL1slxksio1.mp3" type="audio/mpeg" id="audio4"></audio>
+
+<!-- audio file link for playlist audio 5 -->
+<audio src="//a.tumblr.com/tumblr_orb9t3MM0N1slxksio1.mp3" type="audio/mpeg" id="audio5"></audio>
+
+<!-- audio file link for playlist audio 6 -->
+<audio src="//a.tumblr.com/tumblr_orb9xtl3eA1slxksio1.mp3" type="audio/mpeg" id="audio6"></audio>
+
+<!-- audio file link for playlist audio 7 -->
+<audio src="//a.tumblr.com/tumblr_ojftm9p1QL1v9fz3vo1.mp3" type="audio/mpeg" id="audio7"></audio>
+
+<!--you can have up to 30 songs-->
+
+<div class="nowplaying">
+<marquee>
+
+<!-- "now playing" song info -->
+Artist name — Song name
+
+</marquee>
+</div>
+
+<div id="infosect">
+    
+    <table><tbody>
+    
+      <tr class="woah1" onclick="javascript:toggleAudio1();"><!--row 1 START-->
+        <td>Song name #1</td><!-- playlist song #1 name -->
+       
+        <td>
+        <div class="trii1">▶</div>
+        <div class="pawss1">❚❚</div>
+        </td>
+      </tr><!--row 1 END-->
+      
+      
+      <tr class="woah2" onclick="javascript:toggleAudio2();"><!--row 2 START-->
+        <td>Song name #2</td><!-- playlist song #2 name -->
+       
+        <td>
+        <div class="trii2">▶</div>
+        <div class="pawss2">❚❚</div>
+        </td>
+      </tr><!--row 2 END-->
+      
+      
+      <tr class="woah3" onclick="javascript:toggleAudio3();"><!--row 3 START-->
+        <td>Song name #3</td><!-- playlist song #3 name -->
+       
+        <td>
+        <div class="trii3">▶</div>
+        <div class="pawss3">❚❚</div>
+        </td>
+      </tr><!--row 3 END-->
+      
+      
+      <tr class="woah4" onclick="javascript:toggleAudio4();"><!--row 4 START-->
+        <td>Song name #4</td><!-- playlist song #4 name -->
+       
+        <td>
+        <div class="trii4">▶</div>
+        <div class="pawss4">❚❚</div>
+        </td>
+      </tr><!--row 4 END-->
+      
+      
+      <tr class="woah5" onclick="javascript:toggleAudio5();"><!--row 5 START-->
+        <td>Song name #5</td><!-- playlist song #5 name -->
+       
+        <td>
+        <div class="trii5">▶</div>
+        <div class="pawss5">❚❚</div>
+        </td>
+      </tr><!--row 5 END-->
+      
+      
+      <tr class="woah6" onclick="javascript:toggleAudio6();"><!--row 6 START-->
+        <td>Song name #6</td><!-- playlist song #6 name -->
+       
+        <td>
+        <div class="trii6">▶</div>
+        <div class="pawss6">❚❚</div>
+        </td>
+      </tr><!--row 6 END-->
+      
+      
+      <tr class="woah7" onclick="javascript:toggleAudio7();"><!--row 7 START-->
+        <td>Song name #7</td><!-- playlist song #7 name -->
+      
+        <td>
+        <div class="trii7">▶</div>
+        <div class="pawss7">❚❚</div>
+        </td>
+      </tr><!--row 7 END-->
+      
+      <!--you can have up to 30 songs-->
+      
+    </tbody></table>
+    
+</div>
+
+<!--album art for your "main song"-->
+<img src="//68.media.tumblr.com/dd9021da7137a7fd8a6081aa8223a3e4/tumblr_or9qelnnDN1qg2f5co1_1280.jpg" />
+
+</div>
+
+<!-----CUSTOM LINKS----->
+<div id="customlinks" class="animated fadeInLeftBig">
+    <a href="/" title="home"><span class="lnr lnr-power-switch"></span></a>
+    <a href="/" title="contact"><span class="lnr lnr-phone"></span></a>
+    <a href="/" title="archive"><span class="lnr lnr-map"></span></a>
+    <!-----YOUR CUSTOM LINKS----->
+    <!-----FEEL FREE TO CHANGE THE ICONS----->
+    <!-----"sample link" IS THE TOOLTIP TEXT ON HOVER----->
+    <a href="/" title="sample link"><span class="lnr lnr-link"></span></a>
+    <a href="/" title="sample link"><span class="lnr lnr-list"></span></a>
+    <a href="/" title="sample link"><span class="lnr lnr-star"></span></a>
+</div>
+
+<!-----CREDIT. DO NOT REMOVE----->
+<div id="c" class="animated fadeInRightBig"><a href="//glenthemes.tumblr.com" title="page by glenthemes" target="_blank">© 2017 Glenthemes</a></div>
+ 
+</body>
+ 
+</div></div>
+</html>
\ No newline at end of file

Song name #1	+ ▶ + ❚❚ +
Song name #2	+ ▶ + ❚❚ +
Song name #3	+ ▶ + ❚❚ +
Song name #4	+ ▶ + ❚❚ +
Song name #5	+ ▶ + ❚❚ +
Song name #6	+ ▶ + ❚❚ +
Song name #7	+ ▶ + ❚❚ +