summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorchai <chaifix@163.com>2022-03-25 11:03:09 +0800
committerchai <chaifix@163.com>2022-03-25 11:03:09 +0800
commit4e92033683d250c06d3e9f39caf675adc4b339f2 (patch)
tree58dbf3fb8b53ff92be25786b174608e18102858b
parent166cd8c0866e6069e6405ec9c452188b18a293d6 (diff)
+album page
-rw-r--r--admin_modify_album.php2
-rw-r--r--album.php78
-rw-r--r--albums.php49
-rw-r--r--cover/1648170357_555_MrPear.pngbin0 -> 361252 bytes
-rw-r--r--cover/1648170394_824_dachai500x500.pngbin0 -> 238894 bytes
-rw-r--r--cover/1648174166_335_dog.pngbin0 -> 144620 bytes
-rw-r--r--index.php30
-rw-r--r--music.php28
-rw-r--r--res/styles.css118
-rw-r--r--template.php20
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
new file mode 100644
index 0000000..66d11dd
--- /dev/null
+++ b/cover/1648170357_555_MrPear.png
Binary files differ
diff --git a/cover/1648170394_824_dachai500x500.png b/cover/1648170394_824_dachai500x500.png
new file mode 100644
index 0000000..9097383
--- /dev/null
+++ b/cover/1648170394_824_dachai500x500.png
Binary files differ
diff --git a/cover/1648174166_335_dog.png b/cover/1648174166_335_dog.png
new file mode 100644
index 0000000..6eaafb4
--- /dev/null
+++ b/cover/1648174166_335_dog.png
Binary files differ
diff --git a/index.php b/index.php
index 61cab56..204939a 100644
--- a/index.php
+++ b/index.php
@@ -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' ?>
diff --git a/music.php b/music.php
index 3d814c1..8dcf178 100644
--- a/music.php
+++ b/music.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