DeTechn Blog

程序猿个性404界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404 Not Found</title>
    <meta name="HandheldFriendly" content="True" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#e74c3c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <style>
        html,body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        /*html,body高度设置100%,floater高度设置50%,content置于floater下面,实现content垂直居中*/
        body {
            background-color: #FFFFCC;
        }
        .floater {
            float: left;
            height: 50%;
            margin-bottom: -120px;
        }
        .content {
            min-width: 445px;
            width: 445px;
            height: 240px;
            margin: 0 auto;
            margin-top: 0px;
            clear: both;
            position: relative;
        }
        a,a:hover {
            text-decoration: none;
        }
        /*
         Solarized Color Schemes originally by Ethan Schoonover
         http://ethanschoonover.com/solarized
        
         Ported for PrismJS by Hector Matos
         Website: https://krakendev.io
         Twitter Handle: https://twitter.com/allonsykraken)
        */
        /*
        SOLARIZED HEX
        --------- -------
        base03    #002b36
        base02    #073642
        base01    #586e75
        base00    #657b83
        base0     #839496
        base1     #93a1a1
        base2     #eee8d5
        base3     #fdf6e3
        yellow    #b58900
        orange    #cb4b16
        red       #dc322f
        magenta   #d33682
        violet    #6c71c4
        blue      #268bd2
        cyan      #2aa198
        green     #859900
        */
        .code {
            color: #657b83;
            /* base00 */
            font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
            text-align: left;
            white-space: normal;
            word-spacing: normal;
            word-break: normal;
            word-wrap: normal;
            line-height: 1.5;
            -moz-tab-size: 4;
            -o-tab-size: 4;
            tab-size: 4;
            -webkit-hyphens: none;
            -moz-hyphens: none;
            -ms-hyphens: none;
            hyphens: none;
        }
        
        .code::-moz-selection,
        .code ::-moz-selection {
            background: #073642;
            /* base02 */
        }
        
        .code::selection,
        .code ::selection {
            background: #073642;
            /* base02 */
        }
        /* Code blocks */
        .pre {
            padding: 1em;
            margin: .5em 0;
            overflow: auto;
            border-radius: 0.3em;
        }
        /* Solarized Green */
        .keyword {
            color: #859900;
        }
        .commentary {
            color: #66CC66;
        }
        .line{
            overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
        }
        .line-number {
            display: inline-block;
            width: 40px;
            margin-left: 5px;
        }
        .line-rn{
            display: inline-block;
            padding-left: 5px;
            font-size: 10px;
            color: #b4bfb0;
        }
        /* Solarized Cyan */
        .number,
        .string {
            color: #2aa198;
        }
        /* Solarized Blue */
        .title,.name {
            color: #268bd2;
        }
        a,a:visited,.link {
            color: #cb4b16;
        }
        /* Solarized Red */
        .built_in {
            color: #dc322f;
        }
        @media only screen and (max-width: 500px) {
            .content {
                width: 90%
            }
        }
        .animation::after {
            content: '';
            cursor: text;
            display: inline-block;
            width: 10px;
            height: 4px;
            line-height: 16px;
            background-color: black;
            animation: blink 1.5s infinite steps(1, start);
        }
        @keyframes blink {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
    </style>
</head>
<body>
    <div class="floater"></div>
    <div class="content code" id = "contentDiv">
        <div class="line">
            <span class="line-number">...</span>
        </div>
        <div class="line">
            <span class="line-number">11</span>
            <span class="commentary">//404:资源未找到</span>
            <span class="line-rn">↴</span>
        </div>
        <div class="line">
            <span class="line-number">12</span><span class="function"><span class="keyword">function</span> <span class="title">errorHandler</span>(<span class="params">req</span>)</span> {<span class="line-rn">↴</span>
        </div>
        <div class="line">
                <span class="line-number">13</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span> (req.status == <span class="number">404</span>) {<span class="line-rn">↴</span>
        </div>
        <div class="line">
                <span class="line-number">14</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="built_in">console</span>.error(<span class="string">"Page not found"</span>);<span class="line-rn">↴</span>
        </div>
        <div class="line" id="href-line">
                <span class="line-number">15</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="built_in">window</span>.location.href = <span class="link">"<a href="https://cdn.detechn.com/" title="回到首页">/Home</a>"</span>;<span class="line-rn">↴</span>
        </div>
        <div class="line">
                <span class="line-number">16</span>&nbsp;&nbsp;&nbsp;&nbsp;}<span class="line-rn">↴</span>
        </div>
        <div class="line">
                <span class="line-number">17</span>}<span class="line-rn">↴</span>
        </div>
        <div class="line">
                <span class="line-number">18</span><a href="https://cdn.detechn.com/" ><span class="animation"></span></a>
        </div>
        <div class="line">
                <span class="line-number">...</span>
        </div>
    </div>
    <script>
        window.onload = function (){
        console.group("HTTP Status 404");
        console.log("Page not found");
        console.groupEnd();
        };
    </script>
</body>
</html>

效果

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »