summaryrefslogtreecommitdiff
path: root/res
diff options
context:
space:
mode:
Diffstat (limited to 'res')
-rw-r--r--res/bg.jpgbin0 -> 238733 bytes
-rw-r--r--res/dachai.pngbin0 -> 320027 bytes
-rw-r--r--res/main.js105
-rw-r--r--res/pause_cover.pngbin0 -> 539 bytes
-rw-r--r--res/play_cover.pngbin0 -> 749 bytes
-rw-r--r--res/styles.css198
6 files changed, 303 insertions, 0 deletions
diff --git a/res/bg.jpg b/res/bg.jpg
new file mode 100644
index 0000000..31b11e5
--- /dev/null
+++ b/res/bg.jpg
Binary files differ
diff --git a/res/dachai.png b/res/dachai.png
new file mode 100644
index 0000000..d30f86d
--- /dev/null
+++ b/res/dachai.png
Binary files differ
diff --git a/res/main.js b/res/main.js
new file mode 100644
index 0000000..543cd16
--- /dev/null
+++ b/res/main.js
@@ -0,0 +1,105 @@
+
+// play music
+
+var currentAudio;
+var currentPlay;
+
+function showPlayButton(cover) {
+ var play = cover.getElementsByClassName("play_img");
+ play[0].style.display="inline";
+ play[0].style.cursor="pointer";
+}
+
+function hidePlayButton(cover) {
+ var play = cover.getElementsByClassName("play_img");
+ play[0].style.display="none";
+}
+
+function playMusic(play) {
+ var src = play.getAttribute("audiosrc");
+ if(currentPlay != null){
+ currentAudio.pause();
+ hidePlayButtonSelf(currentPlay);
+ pauseMusic(currentPlay);
+ }
+ currentAudio = new Audio(src);
+ currentAudio.play();
+
+ currentPlay = play;
+
+ play.src="./res/pause_cover.png";
+ play.onclick = function() {
+ pauseMusic(play);
+ };
+ play.onmouseleave = null;
+
+ play.parentElement.onmouseleave = null;
+}
+
+function pauseMusic(play) {
+ if(currentPlay == play){
+ currentAudio.pause();
+ currentPlay = null;
+ //hidePlayButtonSelf(play);
+ }
+
+ play.src="./res/play_cover.png";
+ play.onclick = function() {
+ playMusic(play);
+ }
+ play.onmouseleave = function() {
+ hidePlayButtonSelf(play);
+ }
+
+ play.parentElement.onmouseleave = function() {
+ hidePlayButton(play.parentElement);
+ }
+}
+
+function showPlayButtonSelf(play) {
+ play.style.display="inline";
+ play.style.cursor="pointer";
+}
+
+function hidePlayButtonSelf(play) {
+ play.style.display="none";
+ play.style.cursor="auto";
+}
+
+//
+
+function changeMusicListWidth () {
+ var music_list = document.getElementById("music_list");
+ var music_outer = document.getElementById("music_outer");
+ var outer_width = music_outer.offsetWidth;
+ music_list.style.width = Math.floor( outer_width / 120) * 120;
+}
+
+window.onload = function() {
+ changeMusicListWidth();
+}
+
+window.onresize = function(){
+ changeMusicListWidth();
+}
+
+// time
+
+function formatDate(stamp){
+ var time = new Date(stamp * 1000);
+ var y = time.getFullYear(); //年
+ var m = time.getMonth() + 1; //月
+ if(m < 10){ m = '0' + m }
+ var d = time.getDate(); //日
+ if(d < 10){ d = '0' + d }
+ var h = time.getHours(); //时
+ if(h < 10){ h = '0' + h }
+ var mm = time.getMinutes(); //分
+ if(mm < 10){ mm = '0' + mm }
+ var s = time.getSeconds(); //秒
+ if(s < 10){ s = '0' + s }
+ var timeStr = m+"/"+d+", "+y;
+ //var timeStr = y+"-"+m+"-"+d +" "+h+":"+mm+":"+s;
+ return timeStr;
+}
+
diff --git a/res/pause_cover.png b/res/pause_cover.png
new file mode 100644
index 0000000..ebf3288
--- /dev/null
+++ b/res/pause_cover.png
Binary files differ
diff --git a/res/play_cover.png b/res/play_cover.png
new file mode 100644
index 0000000..c7f8ca6
--- /dev/null
+++ b/res/play_cover.png
Binary files differ
diff --git a/res/styles.css b/res/styles.css
new file mode 100644
index 0000000..92fdd2d
--- /dev/null
+++ b/res/styles.css
@@ -0,0 +1,198 @@
+body{
+ /*
+ background-image: url(bg.jpg);
+ background-repeat: repeat;
+ */
+ background-color: #3a3a3a;
+ margin-top: 0;
+}
+
+#header{
+}
+
+#dachai_logo{
+ width:100px;
+ float: left;
+}
+
+#site_title{
+ font-size:12px;
+}
+
+#container {
+ margin:0 auto;
+ max-width: 720px;
+ background-color: #fff;
+ min-height: 100%;
+}
+
+#music_inner {
+ float: left;
+ position: relative;
+ left: 50%;
+ /* background: #FDD;*/
+}
+
+#music_outer {
+ overflow: hidden;
+/* background: #FFC;*/
+}
+
+#music_list {
+ float: left;
+ position: relative;
+ left: -50%;
+ /* background: #080;*/
+}
+
+.music_container {
+ width: 100px;
+ height: 150px;
+ background-color: #e9e9e9;
+ margin: 10px;
+ float:left;
+ position:relative;
+}
+
+.music_container .cover_img {
+ width: 100px;
+ left: 0px;
+}
+
+.music_container .play_img{
+ object-fit: cover;
+ position: absolute;
+ left: 0px;
+ width: 100px;
+ z-index: 10;
+ display: none;
+}
+
+.music_container .music_title {
+ display: block;
+ height: 45px;
+ font-size:10px;
+ padding: 3px;
+ text-align: center;
+ overflow:hidden;
+ line-height: 40px;
+ text-decoration-line: none;
+ font-weight:bold;
+ background:#000;
+ color:#fff;
+}
+
+.music_container .music_title:hover{
+ background:#ffffffff;
+ color:#3a3a3a;
+}
+
+.music_container .music_image_root {
+ width: 100px;
+ height: 100px;
+}
+
+.tags_container {
+ width:80%;
+ margin-top: 10px;
+}
+
+.tag_link {
+ font-size: 80%;
+ color: #fff;
+ background: #ccc;
+ text-decoration: none;
+ padding: 3px 5px;
+ border: 0px solid;
+ border-radius: 4px;
+ margin-right: 7px;
+ font-family: serif, monospace, cursive;
+ font-size:15px;
+}
+
+.tag_link:hover{
+ background: rgb(0, 0, 0);
+ color: #fff;
+}
+
+#titlebar {
+ padding:6px;
+ border-top:1px solid #000;
+ border-bottom:1px solid #000;
+}
+
+#titlebar .title_link{
+ text-decoration-line: none;
+ color:#000;
+ float: left;
+ display: block;
+ padding: 2px 5px;
+ margin-right: 10px;
+}
+
+#titlebar .title_link:hover{
+ color:#fff;
+ background-color: #000;
+}
+
+#titlebar .search{
+ float: right;
+ height: auto;
+}
+
+#seach_form{
+ margin: 0;
+}
+
+#searchbar_input {
+ max-width: 150px;
+}
+
+#music_player_container {
+ max-width: 95%;
+ margin: 0 auto;
+}
+
+#music_player_container .music_cover{
+ width: 300px;
+ margin: 0 auto;
+ margin-bottom: 10px;
+ display: block;
+}
+
+#music_player {
+ width: 100%;
+ margin-bottom: 10px;
+}
+
+#music_player_container label {
+ font-size: 12px;
+}
+
+#music_player_container a {
+ font-size: 12px;
+}
+
+#music_player_container .key {
+ margin-right: 5px;
+ line-height: 20px;
+}
+
+#music_player_container .value {
+ font-weight: bold;
+}
+
+#search-condition {
+ width: 100%;
+ padding: 10px;
+}
+
+#search-condition .search-hint {
+
+}
+
+#search-condition .search-value {
+ font-weight:bold;
+}
+
+
generated by cgit v1.1-26-g67d0 at 2025-06-02 20:10:17 +0000