• 日期: 2027-10-18
  • 标签: 常规
<p><!doctype html></p>
<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;
        }
<pre><code>    #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: absolute;
        bottom: 0;
        color: #fff;
        font-size: 48px;
        transform: translateY(48px);
        transition: .3s;
        z-index: 9999;
    }

    .navButton {
        height: 48px;
        width: 25%;
        border-radius: 48px;
        display: inline-block;
        max-width: 96px;
    }

    .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;
    }

    #iframe {
        border: none;
        position: fixed;
        top: 28px;
        width: 100%;
        height: calc(100% - 76px);
        transform: translateY(calc(100% + 48px));
        transition: .4s;
        z-index: 9997; /* Adjust z-index to place iframe behind navBar */
        background: #fff;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <div id="statusBar" style="color: #fff;padding-top: 4px;">
        <div style="float: right;">
            <i class="mdui-icon material-icons" style="display: inline-block;font-size: 18px;">network_wifi</i>
            <i class="mdui-icon material-icons" style="display: inline-block;font-size: 18px;">network_cell</i>
            <i class="mdui-icon material-icons" style="display: inline-block;font-size: 18px;">battery_charging_full</i>
            <div id="time" style="margin: 0 16px;display: inline-block;transform: translateY(2px);"></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);
        };
<pre><code>    function launchApp(url, color1, color2) {
        gebi(&quot;iframe&quot;).style.transform = &quot;translateY(0)&quot;;
        window.setTimeout(function() {
            gebi(&quot;iframe&quot;).src = url;
        }, 400);
        gebi(&quot;statusBar&quot;).style.background = color1;
        gebi(&quot;navBar&quot;).style.background = color1;
    }
    gebi(&quot;navHome&quot;).onclick = function() {
        gebi(&quot;iframe&quot;).style.transform = &quot;translateY(calc(100% + 48px))&quot;;
        window.setTimeout(function() {
            gebi(&quot;iframe&quot;).src = &quot;about:blank&quot;;
        }, 400);
        gebi(&quot;statusBar&quot;).style.background = &quot;&quot;;
        gebi(&quot;navBar&quot;).style.background = &quot;&quot;;
    };
&lt;/script&gt;
</code></pre>
</body>
</html>
Launcher: A Customizable Desktop Experience

原文地址: https://www.cveoy.top/t/topic/qeMA 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录