Widget:Mainpage

<script type="text/javascript">
randomImg=Math.random()
MPMeta={
	"width":0,
	"height":0,
	"block":[4,2,1,3,5],
	"already":[],
	"default":{
		"dark":"#4a5283",
		"light":"#6d79c1",
		"block":[
			["","CHARM",function(){
				window.location.href="CHARM"
			},
				{
					"img":{
						"backgroundPosition":"center",
					}
				},
				{
					
				},
				{
					
				}
			],
			["","回忆",function(){
				window.location.href="回忆"
			},
				{
					"img":{
						"backgroundSize":"cover",
					}
				},
				{
					
				},
				{
					
				}
			],
			["","莉莉",function(){
				window.location.href="莉莉"
			},
				{
					
				},
				{
					
				},
				{
					"img":{
						"backgroundSize":"50vh auto",
					}
				}
			],
			["https://patchwiki.biligame.com/images/allb/c/c2/0dc917aeuf7zazzdyf0et9grgc6mnzb.jpg","活动",function(){
				window.location.href="最新活动"
			},
				{
					"img":{
						"backgroundSize":"cover",
					}
				},
				{
					"img":{
						"backgroundPosition":"44% center",
					}
				},
				{
					"img":{
						"backgroundPosition":"center 44%",
					}
				}
			],
			["https://patchwiki.biligame.com/images/allb/7/7c/f8dttsbkzptj7casgd3sld53gb8kof1.png","指令",function(){
				window.location.href="指令"
			},
				{
					"img":{
						"backgroundPosition":"center",
					}
				},
				{
					
				},
				{
					
				}
			],
		],
	},
}
try{
	MPMaterial
}
catch(e){
	MPMaterial={}
}
MPFun={
	"initialize":function(){
		this.setMeta()
		document.body.innerHTML=""
		let isDesk=true
		if(MPMeta.width<MPMeta.height){
			isDesk=false
		}
		MPMeta.already=[]
		for(let i=0,ilen=MPMeta.block.length;i<ilen;i++){
			let position=isDesk?(i%2?"top":"bottom"):(i%2?"left":"right")
			let border=isDesk?"right":"bottom"
			let rm
			if(Object.keys(MPMaterial).length==0){
				rm=MPMeta.default
			}
			else{
				rm=MPMaterial[Object.keys(MPMaterial)[Math.floor(Object.keys(MPMaterial).length*Math.random())]]
			}
			let blockDOM=this.createBlockDOM(rm,i)
			document.body.appendChild(blockDOM)
			setTimeout(function(){
				let blockEfect=setInterval(function(){
					blockDOM.style[position]=(parseInt(blockDOM.style[position])-5)+"%"
					if(parseInt(blockDOM.style[position])==0){
						clearInterval(blockEfect)
						let materialDOM=MPFun.createMaterialDOM(rm,i)
						materialDOM.style[border]="-100%"
						blockDOM.appendChild(materialDOM)
						let materialEffect=setInterval(function(){
							materialDOM.style[border]=(parseInt(materialDOM.style[border])+5)+"%"
							if(parseInt(materialDOM.style[border])==0){
								clearInterval(materialEffect)
							}
						},10)
						let materialEffect2=setInterval(function(){
							materialDOM.style.opacity=Number(materialDOM.style.opacity)+0.02
							if(materialDOM.style.opacity==1){
								materialDOM.style.opacity=""
								MPMeta.already.push(materialDOM)
								if(MPMeta.already.length==MPMeta.block.length){
									for(let j=0,jlen=MPMeta.already.length;j<jlen;j++){
										MPMeta.already[j].parentNode.style.backgroundColor="white"
										MPMeta.already[j].classList.add("materialDOM")
									}
								}
								clearInterval(materialEffect2)
							}
						},10)
					}
				},10)
			},MPMeta.block[i]*200)
		}
	},
	"setMeta":function(){
		MPMeta.width=window.innerWidth
		MPMeta.height=window.innerHeight
	},
	"createBlockDOM":function(material,index){
		let dom=document.createElement("div")
		dom.style.overflow="hidden"
		dom.style.position="fixed"
		let isDesk=true
		if(MPMeta.width<MPMeta.height){
			isDesk=false
		}
		dom.style[isDesk?(index%2?"top":"bottom"):(index%2?"left":"right")]="100%"
		dom.style[isDesk?"left":"top"]=(index*100/MPMeta.block.length)+"%"
		dom.style[isDesk?"height":"width"]="100%"
		dom.style[isDesk?"width":"height"]=(100/MPMeta.block.length)+"%"
		dom.style[isDesk?"borderRight":"borderBottom"]="15px solid "+(material.dark||MPMeta.default.dark)
		return dom
	},
	"createMaterialDOM":function(material,index){
		let isDesk=true
		if(MPMeta.width<MPMeta.height){
			isDesk=false
		}
		let dom=document.createElement("div")
		dom.style.position="absolute"
		dom.style.width="100%"
		dom.style.height="100%"
		dom.style.opacity=0
		dom.style.backgroundColor=material.light||MPMeta.default.light
		dom.style.backgroundImage="url("+(material.block[index][0]||MPMeta.default.block[index][0])+")"
		dom.style.backgroundRepeat="no-repeat"
		dom.style.cursor="pointer"
		dom.onclick=material.block[index][2]||MPMeta.default.block[index][2]
		for(let key in MPMeta.default.block[index][3].img){
			dom.style[key]=MPMeta.default.block[index][3].img[key]
		}
		for(let key in MPMeta.default.block[index][isDesk?4:5].img){
			dom.style[key]=MPMeta.default.block[index][isDesk?4:5].img[key]
		}
		for(let key in material.block[index][3].img){
			dom.style[key]=material.block[index][3].img[key]
		}
		for(let key in material.block[index][isDesk?4:5].img){
			dom.style[key]=material.block[index][isDesk?4:5].img[key]
		}
		let textdom=document.createElement("div")
		textdom.innerHTML=material.block[index][1]||MPMeta.default.block[index][1]
		textdom.style.position="absolute"
		textdom.style.display="flex"
		textdom.style.alignItems="center"
		textdom.style.justifyContent="center"
		textdom.style.width=isDesk?"100%":"30%"
		textdom.style.height=isDesk?"10%":"100%"
		textdom.style.top=isDesk?"50%":""
		textdom.style.right=isDesk?"":"0"
		textdom.style.backgroundColor=this.torgba(material.light||MPMeta.default.light,0.7)
		textdom.style.fontSize="2em"
		textdom.style.textAlign="center"
		dom.appendChild(textdom)
		return dom
	},
	"torgba":function(hex,a){
		hex=hex.replace("#","")
		let r=parseInt(hex[0]+hex[1],16)
		let g=parseInt(hex[2]+hex[3],16)
		let b=parseInt(hex[4]+hex[5],16)
		return "rgba("+r+","+g+","+b+","+a+")"
	},
}
window.addEventListener("resize",function(){
	if((MPMeta.width>MPMeta.height)^(window.innerWidth>window.innerHeight)){
		MPFun.initialize()
	}
})
window.addEventListener("load",function(){
	document.body.innerHTML=""
	setTimeout(function(){MPFun.initialize()},500)
})
</script>