rikumi/Wallpaper.html

## Wallpaper.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=375, height=667, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <style>
  :root {
    font-family: 'PingFang SC';
    color: #fff;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .2);
  }
  body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0 30px 310px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  /* Blur effect on bottom half of wallpaper */
  body::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 295px;
    -webkit-backdrop-filter: blur(40px) saturate(1.5);
    background: rgba(0, 0, 0, .1);
  }
  .first-line {
    display: flex;
  }
  #time {
    font-size: 24px;
    font-weight: bold;
    display: none;
  }
  #title {
    font-size: 17px;
    font-weight: bold;
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #lrc {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>
</head>
<body>
  <div id="time"></div>
  <script>
  // Time update
  setInterval(() => {
    let d = new Date();
    let time = d.getHours() + ':' + ('0' + d.getMinutes()).slice(-2);
    document.getElementById('time').innerHTML = time;
  }, 1000)

  // Music update; you can add other info according to the XenInfo documentation.
  function mainUpdate(type){
    if (type === 'music') {
      if (isplaying) {
        document.getElementById('title').innerHTML = title
          .replace('(null)', '')                           // No null
          .replace(/\s*(\(.*?\)|（.*?）|【.*?】)\s*/g, ''); // Trim out the brackets and contents inside.
        document.getElementById('lrc').innerHTML = [
          artist.replace('(null)', ''),
          album.replace('(null)', '')
            .replace(/\s*(\(.*?\)|（.*?）|【.*?】)\s*/g, '') // Works best with Netease CloudMusic whose lyrics are filled into album field.
        ].filter(k => k).join(' - '); // Join non-blank fields
      } else {
        // Uncomment lines below to clear the text when music pauses
        // document.getElementById('title').innerHTML = '';
        // document.getElementById('lrc').innerHTML = '';
      }
    }
  }
  </script>
  <div class="first-line">
    <div id="title"></div>
    <div id="artist"></div>
  </div>
  <div id="lrc"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=375, height=667, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<style>
	:root {
	font-family: 'PingFang SC';
	color: #fff;
	text-shadow: 0 1px 5px rgba(0, 0, 0, .2);
	}
	body {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0 30px 310px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	}
	/* Blur effect on bottom half of wallpaper */
	body::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 295px;
	-webkit-backdrop-filter: blur(40px) saturate(1.5);
	background: rgba(0, 0, 0, .1);
	}
	.first-line {
	display: flex;
	}
	#time {
	font-size: 24px;
	font-weight: bold;
	display: none;
	}
	#title {
	font-size: 17px;
	font-weight: bold;
	margin-right: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	#lrc {
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	</style>
	</head>
	<body>
	<div id="time"></div>
	<script>
	// Time update
	setInterval(() => {
	let d = new Date();
	let time = d.getHours() + ':' + ('0' + d.getMinutes()).slice(-2);
	document.getElementById('time').innerHTML = time;
	}, 1000)

	// Music update; you can add other info according to the XenInfo documentation.
	function mainUpdate(type){
	if (type === 'music') {
	if (isplaying) {
	document.getElementById('title').innerHTML = title
	.replace('(null)', '') // No null
	.replace(/\s(\(.?\)\|（.?）\|【.?】)\s*/g, ''); // Trim out the brackets and contents inside.
	document.getElementById('lrc').innerHTML = [
	artist.replace('(null)', ''),
	album.replace('(null)', '')
	.replace(/\s(\(.?\)\|（.?）\|【.?】)\s*/g, '') // Works best with Netease CloudMusic whose lyrics are filled into album field.
	].filter(k => k).join(' - '); // Join non-blank fields
	} else {
	// Uncomment lines below to clear the text when music pauses
	// document.getElementById('title').innerHTML = '';
	// document.getElementById('lrc').innerHTML = '';
	}
	}
	}
	</script>
	<div class="first-line">
	<div id="title"></div>
	<div id="artist"></div>
	</div>
	<div id="lrc"></div>
	</body>
	</html>