404page (一个有趣的404页面）

最新推荐文章于 2024-06-09 10:03:41 发布
最新推荐文章于 2024-06-09 10:03:41 发布
阅读量2.9k 收藏
点赞数 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <!-- this is needed if you want conditional comments to work -->
        <!-- meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>404 - Page not found</title>
        <meta name="description" content="{{DESCRIPTION}}">
        <meta name="viewport" content="width=device-width">

        <meta property="og:title" content="Adrian Roworth" />
        <meta property="og:type" content="website" />

        <meta property="og:site_name" content="Adrian Roworth" />
        <meta property="fb:admins" content="684945520" />

        <meta name="geo.region" content="GB-GLG" />
        <meta name="geo.placename" content="Glasgow" />
        <meta name="geo.position" content="55.858104;-4.278944" />
        <meta name="ICBM" content="55.858104, -4.278944" />




        <style>

            ::-moz-selection {
                background: #b3d4fc;
                text-shadow: none;
            }

            ::selection {
                background: #b3d4fc;
                text-shadow: none;
            }

            html {
                padding: 30px 10px;
                font-size: 20px;
                line-height: 1.4;
                background: #00A;
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
                color: #ffffff;
                font-family: courier;
                font-size: 16px;
                text-align: center;
            }
            #page {
                background: #00A;
                -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                -ms-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                -ms-backface-visibility: hidden;
                -o-backface-visibility: hidden;
                backface-visibility: hidden;
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                -o-transform-style: preserve-3d;
                position: relative;
                z-index: 1;
                margin: 0 auto;
                width: 800px;
            }
            #page.boom {
                -webkit-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg);
                -ms-transform: rotateY(180deg);
                -o-transform: rotateY(180deg);
                transform: rotateY(180deg);
            }
            #page .main {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 1;
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                -ms-backface-visibility: hidden;
                -o-backface-visibility: hidden;
                backface-visibility: hidden;
            }
            #page .laldy {
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
                width: 100%;
                -webkit-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg);
                -ms-transform: rotateY(180deg);
                -o-transform: rotateY(180deg);
                transform: rotateY(180deg);
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                -ms-backface-visibility: hidden;
                -o-backface-visibility: hidden;
                backface-visibility: hidden;
            }
            .container {
                text-align: left;
            }
            .title {
                background: #FFF;
                color: #00A;
                padding: 2px 8px;
                font-weight: bold;
                margin: 60px 0 0 0;
                display: inline-block;
            }
            p {
                margin: 0;
                padding: 0;
                font-weight: bold;
                line-height: 18px;
                cursor: default;
            }
            p a {
                color: #FFF;
            }
            p img {
                max-width: 100%;
            }
            p.press-key {
                margin: 0 0 10px 0;
                text-align: center;
            }
            .cursor {
                -webkit-animation: cursorblink 1.5s linear 0s infinite;
                -moz-animation: cursorblink 1.5s steps(2, end) infinite;
                -o-animation: cursorblink 1.5s steps(2, end) infinite;
                animation: cursorblink 1.5s steps(2, end) infinite;
            }

            @-webkit-keyframes cursorblink {
                0%   { color: #EEE }
                47%  { color: #FFF }
                50%  { color: #00A }
                97%  { color: #00A }
                100% { color: #FFF }
            }

            #popup {
                position: absolute;
                z-index: 1000;
                top: 50%;
                left: 50%;
                margin: -250px 0 0 -280px;
                padding: 10px;
                display: none;
                background: #0000F7;
            }
            #popup .popup-inner {
                width: 500px;
                height: 350px;
                padding: 20px;
                border: 4px solid #FFF;
                background: #0000F7;
            }
            #popup .popup-inner .title {
                display: inline-block;
                margin: 0 auto;
                background: #0000F7;
                color: #FFF;
                position: relative;
                top: -34px;
            }
            #popup .popup-inner ul {
                list-style-type: none;
            }
            #popup .popup-inner ul li {
                text-align: left;
                position: relative;
            }
            #popup .popup-inner ul li a {
                color: #FFF;
                text-decoration: none;
                cursor: default;
                display: block;
                padding: 3px 0;
            }
            #popup .popup-inner ul li.active {
                background: #FFF;
            }
            #popup .popup-inner ul li.active:before {
                content: '\25B6';
                position: absolute;
                left: -20px;
            }
            #popup .popup-inner ul li.active a {
                color: #0000F7;
                font-weight: bold;
            }
            #popup .popup-inner .key {
                position: absolute;
                bottom: 1px;
                left: 25px;
                background: #0000F7;
                padding: 2px 8px;
            }

            @media all and (max-width: 800px) {
                #page {
                    width: 90%;
                }
                #popup {
                    margin-left: -230px;
                }
                #popup .popup-inner {
                    width: 400px;
                }
            }

            @media all and (max-width: 600px) {
                #popup {
                    margin-left: -180px;
                }
                #popup .popup-inner {
                    width: 300px;
                }
            }

            @media all and (max-width: 400px) {
                #popup {
                    margin-left: -134px;
                }
                #popup .popup-inner {
                    width: 200px;
                }
            }

        </style>
    </head>
    <body>

        <div id="page">

            <div class="main">

                <span class="title">ERROR</span>
                <div class="container">
                    <br />
                    <p>A fatal exception 404 has occurred at 0025:C0011ED7 in AR DEV(01). The program you are looking for cannot be found.</p>
                    <br />
                    <p>* If you came here via a link on this site, then let me <a href="/contact">know</a>.</p>
                    <p>* Press 'Back' to restart your computer. You will lose any unsaved information in all applications.</p>
                    <br />
                    <p class="press-key">Press any key to continue <span class="cursor">_</span></p>
                </div>

            </div>

            <div class="laldy">
                <p>You have discovered the super secret area of the site!</p>
                <br /><br /><br />
                <p><img src="/resource/images/8bitme.png" alt="8-Bit Reb" /></p>
                <p>Love Reb x</p>
            </div>

        </div>

        <div id="popup">

            <div class="popup-inner">

                <p class="title">What's it gonna be?</p>

                <p>Select one of the following options:</p>

                <ul>

                    <li class="active"><a href="javascript: history.back(-1); return false;"> * Go back in my history</a></li>
                    <li><a href="/skycode.aspx"> * Go to homepage</a></li>
                    <li><a> * This option does nothing</a></li>
                    <li><a> * ....</a></li>
                    <li><a> * Profit???</a></li>

                </ul>

                <p class="key">C=Close, 1..5=Select Option</p>

            </div>

        </div>

        <script type="text/javascript">

        (function() {

            var popUpVisible = false;
            document.onkeydown = function(e) {

                var keyCode = e.keyCode;
                console.log(e);

                if(keyCode == 82 && !popUpVisible) {
                    document.getElementById('page').className = 'boom';
                } else if(keyCode && keyCode != 116 && !popUpVisible) {
                    showPopup();
                } else if(keyCode && popUpVisible) {

                    window.activeOption = document.getElementsByClassName('active')[0];

                    // 38 = up.
                    if(keyCode == 38) {

                        if(activeOption.previousElementSibling) {
                            activeOption.previousElementSibling.className = 'active';
                            activeOption.className = '';
                        }
                    // 40 = down.
                    } else if(keyCode == 40) {

                        if(activeOption.nextElementSibling) {
                            activeOption.nextElementSibling.className = 'active';
                            activeOption.className = '';
                        }

                    // 67 = C, 27 = Esc.
                    } else if(keyCode == 67 || keyCode == 27) {

                        hidePopup();

                    // number keys (1 -5).
                    } else if(keyCode >= 49 && keyCode <= 53) {

                        var optionIndex = keyCode - 49;
                        activeOption.className = '';
                        document.getElementsByTagName('li')[optionIndex].className = 'active';

                    // num keys (1 -5).
                    } else if(keyCode >= 97 && keyCode <= 101) {

                        var optionIndex = keyCode - 97;
                        activeOption.className = '';
                        document.getElementsByTagName('li')[optionIndex].className = 'active';

                    // 13 == return.
                    } else if(keyCode == 13) {

                        document.getElementsByClassName('active')[0].childNodes[0].click();

                    }
                }

            };

            function showPopup() {

                var popupEl = document.getElementById('popup');
                popupEl.style.display = 'block';
                popUpVisible = true;

            }

            function hidePopup() {

                var popupEl = document.getElementById('popup');
                popupEl.style.display = 'none';
                popUpVisible = false;

            }

        })()

        </script>
    </body>
</html>

INFINITEWALL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
404-page:404页面不存在
05-28
当用户尝试访问一个不存在的网页时，服务器会返回一个404错误状态码，同时显示404页面。这个页面告诉用户他们请求的资源无法找到。让我们深入探讨一下404页面、其工作原理以及如何在HTML中创建和自定义404错误页面。...
64种404错误页面(404.htm)
11-24
一个好的404页面不仅会告诉用户他们所寻找的内容不存在，还可能提供搜索框、主页链接或其他相关页面链接，帮助用户快速找到他们可能感兴趣的正确位置。 404错误页面的配置在Web工程中是相当重要的。通常，开发者会...
有趣的HTML实例（二） 404页面
热门推荐
好好读书
02-06 21万+
有趣的HTML实例（一） 404页面 一款简单的 HTML+CSS 原生 404页面实例 1、HTML 2、CSS 3、舒适的画面感，科技感，代码效果 4、屏幕闪动
为什么始终404 Page Not Found ?
zhouwenjun0820的博客
11-02 1万+
现象：系统迁移到新环境后，APP能够正常访问系统，但是微信小程序始终却始终收到404错误。 系统现状：APP / 微信小程序->公网IP->系统网关F5->系统网关->系统内部服务 排查过程： 猜测1：系统网关404错误码 排查结果：查看网关日志并未返回该错误码，而且并没有接收到小程序的请求 结论：F5全量url转发至系统网关，证明微信小程序请求未到达系统网关前的F5 猜测2：网络路径不同，其中某个网络设备转发地址不正确造成 排查过程：获取相关信息：APP及微信小程序的url及访问的
探索创意无限的404页面——404 Page Not Found
最新发布
gitblog_00024的博客
06-09 330
探索创意无限的404页面——404 Page Not Found 项目地址:https://gitcode.com/lnfnunes/404-PageNotFound 在网页世界中，我们经常会遇到"404 Not Found"这个无情的错误提示，让人感到无尽的失落。然而，一个精心设计的404页面能给用户带来意外的乐趣，甚至提升用户体验。这就是404 Page Not Found...
python-Bug1：可能page not found的解决方法
Twiss的博客
12-23 2382
bug之前写的
一个有意思的404页面
一起学习一起进步~
04-19 703
分享有意思的404页面
为您的网站提供出色的404页面模板
u011082575的博客
09-25 496
原始地址：https://dev.to/therickedge/awesome-404-page-templates-for-your-websites-33jc。
super-duper-sniffle-404：另一个404 Page哈哈
02-10
在IT行业中，404页面是一个...总之，“super-duper-sniffle-404”是一个利用CSS进行个性化设计的404错误页面，其目标是提供一个既有趣又有用的用户体验，当用户遇到页面找不到的情况时，也能愉快地在网站中继续探索。
404-page:devChallenges初学者htmlcss挑战
04-05
这个"404-page:devChallenges初学者htmlcss挑战"是一个针对新手设计师的练习项目，旨在帮助他们掌握如何创建具有吸引力和功能性的404错误页面。 HTML（超文本标记语言）和CSS（层叠样式表）是网页设计的基础。HTML...
GTHUB-page:普通页面
04-05
【GTHUB-page:普通页面】是一个个人主页项目，它提供了美观的界面设计和功能丰富的博客主页模板。这个项目的主要目标是为用户创造一个个性化且吸引人的在线展示空间。通过预览地址，用户可以查看实际效果，国内地址...
jenkins提示sorry,page not found问题解决
程序员记事本
10-11 2万+
1.直接访问jenkins端口的时候，提示Sorry,Page Not Found异常，试试在url后边加一个login，即http://ip:端口/login这样试一下。 2.要是还是不行，试试把jenkins配置参数文件里面的端口号调高一些试试，用yum install方式安装的jenkins，配置参数文件在/etc/sysconfig下面，名字就叫jenkins，例如把里面的端口号改成8082 ...
Django报错：Page not found (404)Request Method: GETRequest URL: http://127.0.0.1:8000
jehseh的博客
10-20 1700
解决Django报错 Using the URLconf defined in mysite.urls, Django tried these URL patterns,
Page not found (404) Request Method: GET Request URL: http://127.0.0.1:8000/blog/about/ Raised by: b
简简简简abc
06-25 1万+
错误：Page not found (404) Request Method: GET Request URL: http://127.0.0.1:8000/blog/about/ Raised by: blog.views.about No BlogPost matches the given query.解决措施：def projects(request): # use mark
【干货#010】解决 Page[pages/XXX/XXX] not found错误
晓程序干货店
11-15 1万+
缘起 小程序在模拟机和安卓真机下预览正常，在苹果机出现错误： Page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app.json.2. Invoking Page() in async task. 截图如下：
前端加载404(Not Found)问题常用的解决方法
你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。
04-19 9461
前端404问题是指在页面中访问不存在的资源时出现的页面404错误
Django错误：Page not found (404)
qq_45916211的博客
05-06 3281
Django错误：Page not found (404)，一般是路由配置问题，检查urls.py文件，订正urlpatterns的参数。
traefik添加证书报错：404 page not found
小新没有蜡笔
05-05 3683
traefik作为前端代理，http协议是正常的，但是添加HTTPS证书就出现404，解决方法如下： traefik.toml 的ssl配置如下 # 默认是http入口，要开启https入口才可访问 defaultEntryPoints = ["http","https"] [entryPoints] [entryPoints.http] address = ":80" [entr...
用js绘画一个404页面
03-30
抱歉，作为AI语言模型，我无法提供JS编程。但是我可以提供一个简单的HTML/CSS代码，您可以将其作为基础并使用JS添加绘画功能。 HTML代码： ``` <!DOCTYPE html> <html> <head> <title>404 Page Not Found</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { font-size: 6em; margin-top: 0.5em; margin-bottom: 0; } p { font-size: 2em; margin-top: 0.5em; margin-bottom: 2em; } .button { display: inline-block; padding: 1em 2em; background-color: #4CAF50; color: #fff; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; } .button:hover { background-color: #3e8e41; } </style> </head> <body> <div class="container"> <h1>404</h1> <p>Page Not Found</p> <a href="/" class="button">Go Home</a> </div> </body> </html> ``` CSS代码用于设置页面的样式，包括背景颜色、字体、容器宽度、标题和按钮样式等。 您可以使用JS来添加绘画功能，例如添加一个画布并在其中绘制图形，或者使用CSS动画来创建一些有趣的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值