diff options
author | chai <chaifix@163.com> | 2022-03-25 11:03:09 +0800 |
---|---|---|
committer | chai <chaifix@163.com> | 2022-03-25 11:03:09 +0800 |
commit | 4e92033683d250c06d3e9f39caf675adc4b339f2 (patch) | |
tree | 58dbf3fb8b53ff92be25786b174608e18102858b | |
parent | 166cd8c0866e6069e6405ec9c452188b18a293d6 (diff) |
+album page
-rw-r--r-- | admin_modify_album.php | 2 | ||||
-rw-r--r-- | album.php | 78 | ||||
-rw-r--r-- | albums.php | 49 | ||||
-rw-r--r-- | cover/1648170357_555_MrPear.png | bin | 0 -> 361252 bytes | |||
-rw-r--r-- | cover/1648170394_824_dachai500x500.png | bin | 0 -> 238894 bytes | |||
-rw-r--r-- | cover/1648174166_335_dog.png | bin | 0 -> 144620 bytes | |||
-rw-r--r-- | index.php | 30 | ||||
-rw-r--r-- | music.php | 28 | ||||
-rw-r--r-- | res/styles.css | 118 | ||||
-rw-r--r-- | template.php | 20 |
10 files changed, 307 insertions, 18 deletions
diff --git a/admin_modify_album.php b/admin_modify_album.php index c858bf5..4812438 100644 --- a/admin_modify_album.php +++ b/admin_modify_album.php @@ -50,7 +50,7 @@ form .text { </div> <div class="section"> <label class="title" for="description" >description:</label> - <input class="text" type="text" name="description" value="<?php echo $album->description; ?>"/><br/> + <textarea class="text" type="text" name="description" style="max-width:100%;min-height:60px;"><?php echo $album->description;?></textarea><br/> </div> <div class="section"> <label class="title" for="coverImage" >cover:</label> diff --git a/album.php b/album.php new file mode 100644 index 0000000..c1aae7c --- /dev/null +++ b/album.php @@ -0,0 +1,78 @@ +<html> + +<head> +<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, target-densityDpi=device-dpi"> +<link rel="stylesheet" href="./res/styles.css"> +<script src="./res/main.js"></script> +<script> +</script> +<style type="text/css"> +.album_container{ + float:left; +} +</style> +</head> + +<body> +<div id="container"> + <?php include_once('header.php');?> + <?php include_once('titlebar.php');?> + + <div id="music_player_container"> + + <div id="album_detail"> + + <?php + require_once 'music.php'; + require_once 'template.php'; + + $id = $_GET['id']; + $album = fetch_album_by_id($id); + + html_album($album); + ?> + + <label style="font-size:20px;">For Galante, giving the community what they’ve paid for is his first priority. But beyond that, the developer has a big dream – one that he thinks was worth quitting his day job for.</label> + + <div style="clear:both;"></div> + + </div> + <?php require_once 'template.php'?> + + <div id="album_music_list"> + <?php + $current_page_index = $_GET['page']; + if($current_page_index == null){ + $current_page_index = 0; + } + $url = "./album.php?id=" . $id; + $total_page = ceil(get_all_album_music_count($album->uid) / Config::$music_per_page); + $musiclist = fetch_album_music_ranged($album->uid, $current_page_index * Config::$music_per_page, Config::$music_per_page); + ?> + + <div style="clear:both;"></div> + <label style="font-size:25px;font-weight:bold; margin:10px;line-height:30px;color: #c5c5c5;display:block;border-bottom: 2px solid rgb(223, 223, 223);">Music</label> + <div id="music_outer"> + + <?php + $index = $current_page_index * Config::$music_per_page; + foreach($musiclist as $music){ + html_music_wide($music, $index + 1); + $index++; + } + ?> + + </div> + + </div> + + </div> + + <div style="clear:both;"></div> + + <?php include 'paginate.php' ?> + +</div> +</body> + +</html> diff --git a/albums.php b/albums.php new file mode 100644 index 0000000..45ed3ef --- /dev/null +++ b/albums.php @@ -0,0 +1,49 @@ +<html> + +<head> +<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, target-densityDpi=device-dpi"> +<link rel="stylesheet" href="./res/styles.css"> +<script src="./res/main.js"></script> +</head> + +<body> +<div id="container"> + <?php include_once('header.php');?> + <?php include_once('titlebar.php');?> + <?php include_once('music.php');?> + <?php include_once('config.php');?> + + <?php + $current_page_index = $_GET['page']; + if($current_page_index == null){ + $current_page_index = 0; + } + $url = "./albums.php?"; + $total_page = ceil(get_all_album_count() / Config::$music_per_page); + $albumlist = fetch_range_album($current_page_index * Config::$music_per_page, Config::$music_per_page); + ?> + + <div style="clear:both;"></div> + <div id="music_outer"> + <div id="music_inner"> + <div id="music_list"> + + <?php require_once 'template.php'?> + <?php + foreach($albumlist as $album){ + html_album($album); + } + ?> + + </div> + </div> + </div> + + + <?php include 'paginate.php' ?> + +</div> + +</body> + +</html>
\ No newline at end of file diff --git a/cover/1648170357_555_MrPear.png b/cover/1648170357_555_MrPear.png Binary files differnew file mode 100644 index 0000000..66d11dd --- /dev/null +++ b/cover/1648170357_555_MrPear.png diff --git a/cover/1648170394_824_dachai500x500.png b/cover/1648170394_824_dachai500x500.png Binary files differnew file mode 100644 index 0000000..9097383 --- /dev/null +++ b/cover/1648170394_824_dachai500x500.png diff --git a/cover/1648174166_335_dog.png b/cover/1648174166_335_dog.png Binary files differnew file mode 100644 index 0000000..6eaafb4 --- /dev/null +++ b/cover/1648174166_335_dog.png @@ -8,22 +8,20 @@ <body> <div id="container"> - <div id="container-uppper"> - <?php include_once('header.php');?> - <?php include_once('titlebar.php');?> - <?php include_once('music.php');?> - <?php include_once('config.php');?> - <?php - $current_page_index = $_GET['page']; - if($current_page_index == null){ - $current_page_index = 0; - } - $url = "./index.php?"; - $total_page = ceil(get_all_music_count() / Config::$music_per_page); - $musiclist = fetch_range_music($current_page_index * Config::$music_per_page, Config::$music_per_page); - ?> - <?php include('musiclist.php');?> - </div> + <?php include_once('header.php');?> + <?php include_once('titlebar.php');?> + <?php include_once('music.php');?> + <?php include_once('config.php');?> + <?php + $current_page_index = $_GET['page']; + if($current_page_index == null){ + $current_page_index = 0; + } + $url = "./index.php?"; + $total_page = ceil(get_all_music_count() / Config::$music_per_page); + $musiclist = fetch_range_music($current_page_index * Config::$music_per_page, Config::$music_per_page); + ?> + <?php include('musiclist.php');?> <?php include 'paginate.php' ?> @@ -196,6 +196,34 @@ function fetch_album_by_id($uid) { } } +function fetch_album_music_ranged($album_id, $from=0, $count=100) { + $sql = "SELECT music_id FROM " . Config::$tb_album_music . " WHERE album_id=" . $album_id . " ORDER BY id DESC LIMIT " . $from . ", " . $count ;; + $result = execute_sql($sql); + if($result == NULL || $result->num_rows == 0) + { + return null; + } + $arr = array(); + while($row = mysqli_fetch_assoc($result)){ + $id = $row['music_id']; + $music = fetch_music_by_id($id); + array_push($arr, $music); + } + return $arr; +} + +function get_all_album_music_count($album_id) { + $sql = "SELECT COUNT(*) as count FROM " . Config::$tb_album_music . " WHERE album_id=" . $album_id;//. " ORDER BY id DESC LIMIT " . $from . ", " . $count ;; + $result = execute_sql($sql); + if($result == NULL || $result->num_rows == 0) + return null; + $row = mysqli_fetch_assoc($result); + if($row != null){ + return $row['count']; + } + return 0; +} + // 从第from个记录开始的count个 function fetch_range_music($from=0, $count=100) { $sql = "SELECT id FROM " . Config::$tb_music . " ORDER BY time DESC LIMIT " . $from . ", " . $count ; diff --git a/res/styles.css b/res/styles.css index ef11d4f..e12c0b0 100644 --- a/res/styles.css +++ b/res/styles.css @@ -42,6 +42,7 @@ body{ min-height: 100%; box-sizing: border-box; padding: 5px; + position: relative; } #container-uppper { @@ -223,6 +224,9 @@ body{ #paginate { width: 100%; + position:absolute; + bottom:0; + left:0; } #paginate a { @@ -249,4 +253,116 @@ body{ background-color: #000; text-decoration-line: none; display: block; -}
\ No newline at end of file +} + +.album_container { + width: 200px; + height: 250px; + background-color: #e9e9e9; + margin: 10px; + float:left; + position:relative; +} + +.album_container .cover_img { + width: 100%; + left: 0px; +} + +.album_container .play_img{ + object-fit: cover; + position: absolute; + left: 0px; + width: 100%; + z-index: 10; + display: none; +} + +.album_container .album_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; +} + +.album_container .album_title:hover{ + background:#ffffffff; + color:#3a3a3a; +} + +.album_container .album_image_root { + width: 200px; + height: 200px; +} + + +.music_container_wide { + width: 100%; + height: 45px; + margin: 0px 10px; + float:left; + position:relative; +} + +.music_container_wide .cover_img { + width: 45px; + left: 0px; +} + +.music_container_wide .play_img{ + object-fit: cover; + position: absolute; + left: 45px; + width: 45px; + z-index: 10; + display: none; +} + +.music_container_wide .music_title { + display: block; + height: 45px; + font-size:10px; + text-align: left; + overflow:hidden; + line-height: 40px; + text-decoration-line: none; + font-weight:bold; + float:left; + width: calc(100% - 100px); + padding-left: 15px; + box-sizing: border-box; + + background:#ffffffff; + color:#3a3a3a; + +} + +.music_container_wide .music_title:hover{ + background:#000; + color:#fff; +} + +.music_container_wide .music_image_root { + width: 45px; + height: 45px; + float: left; +} + +.music_container_wide .music_index{ + display: block; + width: 45px; + height:45px; + float:left; + line-height: 45px; + text-align: center; + font-size:18px; + color:#fff; + background-color: #000; +} diff --git a/template.php b/template.php index eb38b54..55724ba 100644 --- a/template.php +++ b/template.php @@ -14,6 +14,17 @@ function html_music($music) { echo '</div>' ; } +function html_music_wide($music, $index=0) { + echo '<div class="music_container_wide">'; + echo '<font class="music_index"> ' . $index .'</font>'; + echo '<div class="music_image_root" onmouseenter="showPlayButton(this)" onmouseleave="hidePlayButton(this)"> '; + echo ' <img class="cover_img" src="' .$music->cover. '"> '; + echo ' <img class="play_img" audiosrc="' . $music->path .'" src="./res/play_cover.png" onclick="playMusic(this)" onmouseenter="showPlayButtonSelf(this)" onmouseleave="hidePlayButtonSelf(this)" style="display: none; cursor: auto;"> '; + echo '</div>'; + echo '<a href="booth.php?id=' . $music->uid .'" class="music_title">' . $music->title . '</a>'; + echo '</div> '; +} + function html_tag($tag) { echo '<a href="search.php?page=0&type=tag&value=' . $tag->uid. '" class="tag_link">' . $tag->name . '</a>'; } @@ -69,5 +80,14 @@ function html_paginate_link_current($url, $pagei) { echo '<a class="current" href="' . $url . '&page=' . $pagei . '">' . ($pagei + 1) . '</a>'; } +function html_album($album) { + echo '<div class="album_container">'; + echo ' <div class="album_image_root"> '; + echo ' <img class="cover_img" src="'. $album->cover .'"> '; + echo ' </div>'; + echo ' <a href="album.php?id='. $album->uid .'" class="album_title">' . $album->title . '</a>'; + echo '</div>'; +} + ?>
\ No newline at end of file |