[HTML模板] 总之是一个简单的单页导航模板

帮朋友网站做备案，需要挂个单页，于是给自己以前写过的小玩意里一顿乱翻找到的。

总之如图，然后简单说明一下，虽然写的挺烂的。

这个单页是以前用QNAP的NAS时候方便导航的，因为我没有固定IP，所以写成了JS替换URL。

JS的部分不需要的可以自己删，然后给对应的位置替换成a标签。

背景渐变色动画不需要可以直接删了animation样式然后给background-size改成100%。

头像的p0.jpg记得自己换。

如果拿去做备案的话记得不要在页面上保留奇奇怪怪的URL，要被卡的。

大概就这些。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noarchive">
<meta name="Baiduspider" content="noarchive">
<meta name="googlebot" content="noarchive">

<title>HOMEPAGE</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
    body {
        display: flex;
        font-family: sans-serif, "Microsoft YaHei", Cambria, Verdana, Georgia, Arial;
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: 80vh;
        flex-direction: column;
        text-align:center;
        align-items: center;
        justify-content: center;
        background-size: 300% 300%;
        background-image: linear-gradient(-45deg,
                rgba(152, 68, 183, 1) 0%,
                rgba(255, 53, 127, 1) 25%,
                rgba(87, 111, 230, 1) 50%,
                rgba(59, 173, 227, 1) 100%);
        animation: AnimateBGM 20s ease infinite;
        text-shadow: 2px 2px 5px #333333;
    }

    @keyframes AnimateBGM {
        0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%}
    }

    img {
        border-radius: 50%;
        width: 100px;
        height: 100px;
        margin: 20px 0;
    }

    h1 {
        font-size: 52px;
        color: #f5f5f5;
        letter-spacing: 1px;
        margin: 0;
    }

    p {
        color: #f5f5f5;
        font-size: 18px;
    }

    a {
        border-radius:10px;
        padding:10px 38px;
        margin: 0 10px;
        color:#f5f5f5;
        border-style:solid;
        text-decoration:none;
    }
</style>
<script>
    const url = window.location.host;

    function GetUrl_0(){
        document.write(url);
    }
    function GetUrl_1(){
        var text = 'qBittorrent';
        var src = ':8080';
        var html = '<a target="_blank" href="http://' + url + src + '">' + text + '</a>';
        document.write(html);
    }
    function GetUrl_2(){
        var text = 'AList';
        var src = ':5244';
        var html = '<a target="_blank" href="http://' + url + src + '">' + text + '</a>';
        document.write(html);
    }
    function GetUrl_3(){
        var text = 'Jellyfin';
        var src = ':8096';
        var html = '<a target="_blank" href="http://' + url + src + '">' + text + '</a>';
        document.write(html);
    }
</script>

</head>

<body>
    <img src="./p0.jpg" />
    <h1>HOMEPAGE</h1>
    <p>在光的前端 ，或思之极处。</p>
    <br /><br />
    <p><script>GetUrl_1(); GetUrl_2(); GetUrl_3();</script></p>
    <br /><br />
    <p>Current url : <script>GetUrl_0();</script> , From Yeraph Studio.</p>
    <br />
</body>

</html>

[HTML模板] 总之是一个简单的单页导航模板

发布评论

取消回复

评论( 0 )