Launcher - 自定义启动器
<p><!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"><link rel="shortcut icon" href="favicon.png" type="image/x-icon"><link rel="stylesheet" href="mdui-v1.0.1/css/mdui.min.css"><script src="mdui-v1.0.1/js/mdui.min.js"></script><title>Launcher</title><style>body{background-image:url('default_wallpaper.png');background-position:center center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;margin:0;}#statusBar{position:fixed;top:0;left:0;width:100%;height:24px;background:rgba(0,0,0,.2);transform:translateY(-24px);transition:.4s;}#dockBar{position:fixed;bottom:0;left:0;width:100%;height:128px;background:rgba(255,255,255,.2);}#navBar{text-align:center;height:48px;width:100%;position:fixed;bottom:0;color:#fff;font-size:48px;transform:translateY(48px);transition:.3s;z-index:9999;}#navBar{z-index:9999;}#iframe{border:none;position:fixed;top:28px;width:100%;height:calc(100% - 76px);transform:translateY(calc(100% + 48px));transition:.4s;z-index:9998;background:#fff;}#iframe{z-index:9998;}#navBar .navButton{height:48px;width:25%;border-radius:48px;display:inline-block;max-width:96px;}#navBar .navButton i{transform:translateY(-7px);}.icon{margin-top:24px;}.icon img{width:64px;height:64px;border-radius:16px;transition:.4s;}.icon img:hover{filter:brightness(2);}.icon p{color:#fff;text-align:center;margin:0;text-shadow:0 0 2px #000;}#statusBar{color:#fff;padding-top:4px;}#statusBar div{float:right;}#statusBar .mdui-icon{display:inline-block;font-size:18px;}#time{margin:0 16px;display:inline-block;transform:translateY(2px);}</style></head><body><div id="statusBar"><div><i class="mdui-icon material-icons">network_wifi</i><i class="mdui-icon material-icons">network_cell</i><i class="mdui-icon material-icons">battery_charging_full</i><div id="time"></div></div></div><div id="dockBar"><div id="navBar"><div class="mdui-ripple mdui-ripple-white navButton" id="navBack"><i class="mdui-icon material-icons">arrow_back</i></div><div class="mdui-ripple mdui-ripple-white navButton" id="navHome"><i class="mdui-icon material-icons">home</i></div></div></div><div class="mdui-container" style="margin-top: 28px;margin-left: 16px;margin-right: 16px;width: calc(100% - 32px);"><div class="mdui-row"><div class="mdui-col-xs-3 icon" onclick="javascript:launchApp('http://www.bing.com/', '#000', '000');"><img src="bing.png"><p>Bing</p></div></div></div><iframe id="iframe"></iframe><script>function gebi(id){return document.getElementById(id);}window.onload = function() {window.setTimeout(function() {gebi("statusBar").style.transform = "translateY(0)";gebi("navBar").style.transform = "translateY(0)";}, 500);window.setInterval(function() {var d = new Date();var h = d.getHours().toString().padStart(2, '0');var m = d.getMinutes().toString().padStart(2, '0');var s = d.getSeconds().toString().padStart(2, '0');gebi("time").innerText = h + ":" + m + ":" + s;}, 100);};function launchApp(url, color1, color2) {gebi("iframe").style.transform = "translateY(0)";window.setTimeout(function() {gebi("iframe").src = url;}, 400);gebi("statusBar").style.background = color1;gebi("navBar").style.background = color1;}gebi("navHome").onclick = function() {gebi("iframe").style.transform = "translateY(calc(100% + 48px))";window.setTimeout(function() {gebi("iframe").src = "about:blank";}, 400);gebi("statusBar").style.background = "";gebi("navBar").style.background = "";};</script></body></html></p>
原文地址: https://www.cveoy.top/t/topic/qeM3 著作权归作者所有。请勿转载和采集!