123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603 |
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <!--<link rel="apple-touch-icon" type="image/png"-->
- <!--href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">-->
- <!--<meta name="apple-mobile-web-app-title" content="CodePen">-->
- <!--<link rel="shortcut icon" type="image/x-icon"-->
- <!--href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">-->
- <!--<link rel="mask-icon" type=""-->
- <!--href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"-->
- <!--color="#111">-->
- <title>500 Error</title>
- <style>
- body,
- html {
- padding: 0;
- margin: 0;
- font-family: 'Quicksand', sans-serif;
- font-weight: 400;
- overflow: hidden;
- }
- .writing {
- width: 320px;
- height: 200px;
- background-color: #3f3f3f;
- border: 1px solid #bbbbbb;
- border-radius: 6px 6px 4px 4px;
- position: relative;
- }
- .writing .topbar {
- position: absolute;
- width: 100%;
- height: 12px;
- background-color: #f1f1f1;
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
- }
- .writing .topbar div {
- height: 6px;
- width: 6px;
- border-radius: 50%;
- margin: 3px;
- float: left;
- }
- .writing .topbar div.green {
- background-color: #60d060;
- }
- .writing .topbar div.red {
- background-color: red;
- }
- .writing .topbar div.yellow {
- background-color: #e6c015;
- }
- .writing .code {
- padding: 15px;
- }
- .writing .code ul {
- list-style: none;
- margin: 0;
- padding: 0;
- }
- .writing .code ul li {
- background-color: #9e9e9e;
- width: 0;
- height: 7px;
- border-radius: 6px;
- margin: 10px 0;
- }
- .container {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100vh;
- width: 100%;
- transition: transform .5s;
- }
- .stack-container {
- position: relative;
- width: 420px;
- height: 210px;
- transition: width 1s, height 1s;
- }
- .pokeup {
- transition: all .3s ease;
- }
- .pokeup:hover {
- transform: translateY(-10px);
- transition: .3s ease;
- }
- .error {
- width: 400px;
- padding: 40px;
- text-align: center;
- }
- .error h1 {
- font-size: 125px;
- padding: 0;
- margin: 0;
- font-weight: 700;
- }
- .error h2 {
- margin: -30px 0 0 0;
- padding: 0px;
- font-size: 47px;
- letter-spacing: 12px;
- }
- .perspec {
- perspective: 1000px;
- }
- .writeLine {
- -webkit-animation: writeLine .4s linear forwards;
- animation: writeLine .4s linear forwards;
- }
- .explode {
- -webkit-animation: explode .5s ease-in-out forwards;
- animation: explode .5s ease-in-out forwards;
- }
- .card {
- -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
- animation: tiltcard .5s ease-in-out 1s forwards;
- position: absolute;
- }
- @-webkit-keyframes tiltcard {
- 0% {
- transform: rotateY(0deg);
- }
- 100% {
- transform: rotateY(-30deg);
- }
- }
- @keyframes tiltcard {
- 0% {
- transform: rotateY(0deg);
- }
- 100% {
- transform: rotateY(-30deg);
- }
- }
- @-webkit-keyframes explode {
- 0% {
- transform: translate(0, 0) scale(1);
- }
- 100% {
- transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
- }
- }
- @keyframes explode {
- 0% {
- transform: translate(0, 0) scale(1);
- }
- 100% {
- transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
- }
- }
- @-webkit-keyframes writeLine {
- 0% {
- width: 0;
- }
- 100% {
- width: var(--linelength);
- }
- }
- @keyframes writeLine {
- 0% {
- width: 0;
- }
- 100% {
- width: var(--linelength);
- }
- }
- @media screen and (max-width: 1000px) {
- .container {
- transform: scale(.85);
- }
- }
- @media screen and (max-width: 850px) {
- .container {
- transform: scale(.75);
- }
- }
- @media screen and (max-width: 775px) {
- .container {
- flex-wrap: wrap-reverse;
- align-items: inherit;
- }
- }
- @media screen and (max-width: 370px) {
- .container {
- transform: scale(.6);
- }
- }
- </style>
- <script>
- window.console = window.console || function (t) {
- };
- </script>
- <script>
- if (document.location.search.match(/type=embed/gi)) {
- window.parent.postMessage("resize", "*");
- }
- </script>
- </head>
- <body translate="no">
- <div class="container">
- <div class="error">
- <h1>500</h1>
- <h2>error</h2>
- <p>抱歉,服务器出错了,请联系管理员抢救</p>
- <p>Ruh-roh, something just isn't right... Time to paw through your logs and get down and dirty in your
- stack-trace;)</p>
- </div>
- <div class="stack-container">
- <div class="card-container pokeup">
- <div class="perspec explode" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
- <div class="card">
- <div class="writing">
- <div class="topbar">
- <div class="red"></div>
- <div class="yellow"></div>
- <div class="green"></div>
- </div>
- <div class="code">
- <ul>
- <li class="node-0 writeLine" style="--linelength: 43%;"></li>
- <li class="node-1 writeLine" style="--linelength: 68%;"></li>
- <li class="node-2 writeLine" style="--linelength: 66%;"></li>
- <li class="node-3 writeLine" style="--linelength: 76%;"></li>
- <li class="node-4 writeLine" style="--linelength: 42%;"></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="card-container pokeup">
- <div class="perspec explode" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
- <div class="card">
- <div class="writing">
- <div class="topbar">
- <div class="red"></div>
- <div class="yellow"></div>
- <div class="green"></div>
- </div>
- <div class="code">
- <ul>
- <li class="node-0 writeLine" style="--linelength: 76%;"></li>
- <li class="node-1 writeLine" style="--linelength: 38%;"></li>
- <li class="node-2 writeLine" style="--linelength: 37%;"></li>
- <li class="node-3 writeLine" style="--linelength: 42%;"></li>
- <li class="node-4 writeLine" style="--linelength: 79%;"></li>
- <li class="node-5 writeLine" style="--linelength: 31%;"></li>
- <li class="node-6 writeLine" style="--linelength: 87%;"></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="card-container pokeup">
- <div class="perspec explode" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
- <div class="card">
- <div class="writing">
- <div class="topbar">
- <div class="red"></div>
- <div class="yellow"></div>
- <div class="green"></div>
- </div>
- <div class="code">
- <ul>
- <li class="node-0 writeLine" style="--linelength: 54%;"></li>
- <li class="node-1 writeLine" style="--linelength: 73%;"></li>
- <li class="node-2 writeLine" style="--linelength: 64%;"></li>
- <li class="node-3 writeLine" style="--linelength: 85%;"></li>
- <li class="node-4 writeLine" style="--linelength: 96%;"></li>
- <li class="node-5 writeLine" style="--linelength: 37%;"></li>
- <li class="node-6 writeLine" style="--linelength: 36%;"></li>
- <li class="node-7 writeLine" style="--linelength: 42%;"></li>
- <li class="node-8 writeLine" style="--linelength: 27%;"></li>
- <li class="node-9 writeLine" style="--linelength: 29%;"></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="card-container pokeup">
- <div class="perspec explode" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
- <div class="card">
- <div class="writing">
- <div class="topbar">
- <div class="red"></div>
- <div class="yellow"></div>
- <div class="green"></div>
- </div>
- <div class="code">
- <ul>
- <li class="node-0 writeLine" style="--linelength: 28%;"></li>
- <li class="node-1 writeLine" style="--linelength: 52%;"></li>
- <li class="node-2 writeLine" style="--linelength: 34%;"></li>
- <li class="node-3 writeLine" style="--linelength: 50%;"></li>
- <li class="node-4 writeLine" style="--linelength: 37%;"></li>
- <li class="node-5 writeLine" style="--linelength: 26%;"></li>
- <li class="node-6 writeLine" style="--linelength: 53%;"></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="card-container pokeup">
- <div class="perspec explode" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
- <div class="card">
- <div class="writing">
- <div class="topbar">
- <div class="red"></div>
- <div class="yellow"></div>
- <div class="green"></div>
- </div>
- <div class="code">
- <ul>
- <li class="node-0 writeLine" style="--linelength: 28%;"></li>
- <li class="node-1 writeLine" style="--linelength: 93%;"></li>
- <li class="node-2 writeLine" style="--linelength: 26%;"></li>
- <li class="node-3 writeLine" style="--linelength: 86%;"></li>
- <li class="node-4 writeLine" style="--linelength: 39%;"></li>
- <li class="node-5 writeLine" style="--linelength: 80%;"></li>
- <li class="node-6 writeLine" style="--linelength: 78%;"></li>
- <li class="node-7 writeLine" style="--linelength: 28%;"></li>
- <li class="node-8 writeLine" style="--linelength: 81%;"></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="card-container pokeup">
- <div class="perspec explode" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
- <div class="card">
- <div class="writing">
- <div class="topbar">
- <div class="red"></div>
- <div class="yellow"></div>
- <div class="green"></div>
- </div>
- <div class="code">
- <ul>
- <li class="node-0 writeLine" style="--linelength: 87%;"></li>
- <li class="node-1 writeLine" style="--linelength: 27%;"></li>
- <li class="node-2 writeLine" style="--linelength: 81%;"></li>
- <li class="node-3 writeLine" style="--linelength: 65%;"></li>
- <li class="node-4 writeLine" style="--linelength: 70%;"></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script>
- window.HUB_EVENTS = {
- ASSET_ADDED: "ASSET_ADDED",
- ASSET_DELETED: "ASSET_DELETED",
- ASSET_DESELECTED: "ASSET_DESELECTED",
- ASSET_SELECTED: "ASSET_SELECTED",
- ASSET_UPDATED: "ASSET_UPDATED",
- CONSOLE_CHANGE: "CONSOLE_CHANGE",
- CONSOLE_CLOSED: "CONSOLE_CLOSED",
- CONSOLE_EVENT: "CONSOLE_EVENT",
- CONSOLE_OPENED: "CONSOLE_OPENED",
- CONSOLE_RUN_COMMAND: "CONSOLE_RUN_COMMAND",
- CONSOLE_SERVER_CHANGE: "CONSOLE_SERVER_CHANGE",
- EMBED_ACTIVE_PEN_CHANGE: "EMBED_ACTIVE_PEN_CHANGE",
- EMBED_ACTIVE_THEME_CHANGE: "EMBED_ACTIVE_THEME_CHANGE",
- EMBED_ATTRIBUTE_CHANGE: "EMBED_ATTRIBUTE_CHANGE",
- EMBED_RESHOWN: "EMBED_RESHOWN",
- FORMAT_FINISH: "FORMAT_FINISH",
- FORMAT_ERROR: "FORMAT_ERROR",
- FORMAT_START: "FORMAT_START",
- IFRAME_PREVIEW_RELOAD_CSS: "IFRAME_PREVIEW_RELOAD_CSS",
- IFRAME_PREVIEW_URL_CHANGE: "IFRAME_PREVIEW_URL_CHANGE",
- KEY_PRESS: "KEY_PRESS",
- LINTER_FINISH: "LINTER_FINISH",
- LINTER_START: "LINTER_START",
- PEN_CHANGE_SERVER: "PEN_CHANGE_SERVER",
- PEN_CHANGE: "PEN_CHANGE",
- PEN_EDITOR_CLOSE: "PEN_EDITOR_CLOSE",
- PEN_EDITOR_CODE_FOLD: "PEN_EDITOR_CODE_FOLD",
- PEN_EDITOR_ERRORS: "PEN_EDITOR_ERRORS",
- PEN_EDITOR_EXPAND: "PEN_EDITOR_EXPAND",
- PEN_EDITOR_FOLD_ALL: "PEN_EDITOR_FOLD_ALL",
- PEN_EDITOR_LOADED: "PEN_EDITOR_LOADED",
- PEN_EDITOR_REFRESH_REQUEST: "PEN_EDITOR_REFRESH_REQUEST",
- PEN_EDITOR_RESET_SIZES: "PEN_EDITOR_RESET_SIZES",
- PEN_EDITOR_SIZES_CHANGE: "PEN_EDITOR_SIZES_CHANGE",
- PEN_EDITOR_UI_CHANGE_SERVER: "PEN_EDITOR_UI_CHANGE_SERVER",
- PEN_EDITOR_UI_CHANGE: "PEN_EDITOR_UI_CHANGE",
- PEN_EDITOR_UI_DISABLE: "PEN_EDITOR_UI_DISABLE",
- PEN_EDITOR_UI_ENABLE: "PEN_EDITOR_UI_ENABLE",
- PEN_EDITOR_UNFOLD_ALL: "PEN_EDITOR_UNFOLD_ALL",
- PEN_ERROR_INFINITE_LOOP: "PEN_ERROR_INFINITE_LOOP",
- PEN_ERROR_RUNTIME: "PEN_ERROR_RUNTIME",
- PEN_ERRORS: "PEN_ERRORS",
- PEN_LIVE_CHANGE: "PEN_LIVE_CHANGE",
- PEN_LOGS: "PEN_LOGS",
- PEN_MANIFEST_CHANGE: "PEN_MANIFEST_CHANGE",
- PEN_MANIFEST_FULL: "PEN_MANIFEST_FULL",
- PEN_PREVIEW_FINISH: "PEN_PREVIEW_FINISH",
- PEN_PREVIEW_START: "PEN_PREVIEW_START",
- PEN_SAVED: "PEN_SAVED",
- POPUP_CLOSE: "POPUP_CLOSE",
- POPUP_OPEN: "POPUP_OPEN",
- POST_CHANGE: "POST_CHANGE",
- POST_SAVED: "POST_SAVED",
- PROCESSING_FINISH: "PROCESSING_FINISH",
- PROCESSING_START: "PROCESSED_STARTED"
- }, "object" != typeof window.CP && (window.CP = {}), window.CP.PenTimer = {
- programNoLongerBeingMonitored: !1,
- timeOfFirstCallToShouldStopLoop: 0,
- _loopExits: {},
- _loopTimers: {},
- START_MONITORING_AFTER: 2e3,
- STOP_ALL_MONITORING_TIMEOUT: 5e3,
- MAX_TIME_IN_LOOP_WO_EXIT: 2200,
- exitedLoop: function (E) {
- this._loopExits[E] = !0
- },
- shouldStopLoop: function (E) {
- if (this.programKilledSoStopMonitoring)return !0;
- if (this.programNoLongerBeingMonitored)return !1;
- if (this._loopExits[E])return !1;
- var _ = this._getTime();
- if (0 === this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop = _, !1;
- var o = _ - this.timeOfFirstCallToShouldStopLoop;
- if (o < this.START_MONITORING_AFTER)return !1;
- if (o > this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored = !0, !1;
- try {
- this._checkOnInfiniteLoop(E, _)
- } catch (N) {
- return this._sendErrorMessageToEditor(), this.programKilledSoStopMonitoring = !0, !0
- }
- return !1
- },
- _sendErrorMessageToEditor: function () {
- try {
- if (this._shouldPostMessage()) {
- var E = {topic: HUB_EVENTS.PEN_ERROR_INFINITE_LOOP, data: {line: this._findAroundLineNumber()}};
- parent.postMessage(E, "*")
- } else this._throwAnErrorToStopPen()
- } catch (_) {
- this._throwAnErrorToStopPen()
- }
- },
- _shouldPostMessage: function () {
- return document.location.href.match(/boomerang/)
- },
- _throwAnErrorToStopPen: function () {
- throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."
- },
- _findAroundLineNumber: function () {
- var E = new Error, _ = 0;
- if (E.stack) {
- var o = E.stack.match(/boomerang\S+:(\d+):\d+/);
- o && (_ = o[1])
- }
- return _
- },
- _checkOnInfiniteLoop: function (E, _) {
- if (!this._loopTimers[E])return this._loopTimers[E] = _, !1;
- var o;
- if (_ - this._loopTimers[E] > this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: " + E
- },
- _getTime: function () {
- return +new Date
- }
- }, window.CP.shouldStopExecution = function (E) {
- var _ = window.CP.PenTimer.shouldStopLoop(E);
- return !0 === _ && console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"), _
- }, window.CP.exitedLoop = function (E) {
- window.CP.PenTimer.exitedLoop(E)
- };
- </script>
- <script id="rendered-js">
- const stackContainer = document.querySelector('.stack-container');
- const cardNodes = document.querySelectorAll('.card-container');
- const perspecNodes = document.querySelectorAll('.perspec');
- const perspec = document.querySelector('.perspec');
- const card = document.querySelector('.card');
- let counter = stackContainer.children.length;
- //function to generate random number
- function randomIntFromInterval(min, max) {
- return Math.floor(Math.random() * (max - min + 1) + min);
- }
- //after tilt animation, fire the explode animation
- card.addEventListener('animationend', function () {
- perspecNodes.forEach(function (elem, index) {
- elem.classList.add('explode');
- });
- });
- //after explode animation do a bunch of stuff
- perspec.addEventListener('animationend', function (e) {
- if (e.animationName === 'explode') {
- cardNodes.forEach(function (elem, index) {
- //add hover animation class
- elem.classList.add('pokeup');
- //add event listner to throw card on click
- elem.addEventListener('click', function () {
- let updown = [800, -800];
- let randomY = updown[Math.floor(Math.random() * updown.length)];
- let randomX = Math.floor(Math.random() * 1000) - 1000;
- elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`;
- elem.style.transition = "transform 1s ease, opacity 2s";
- elem.style.opacity = "0";
- counter--;
- if (counter === 0) {
- stackContainer.style.width = "0";
- stackContainer.style.height = "0";
- }
- });
- //generate random number of lines of code between 4 and 10 and add to each card
- let numLines = randomIntFromInterval(5, 10);
- //loop through the lines and add them to the DOM
- for (let index = 0; index < numLines; index++) {
- if (window.CP.shouldStopExecution(0)) break;
- let lineLength = randomIntFromInterval(25, 97);
- var node = document.createElement("li");
- node.classList.add('node-' + index);
- elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');
- //draw lines of code 1 by 1
- if (index == 0) {
- elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
- } else {
- elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
- elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
- });
- }
- }
- window.CP.exitedLoop(0);
- });
- }
- });
- //# sourceURL=pen.js
- </script>
- <script>
- //{php}think\Log::log('500');{/php}
- //{php}if(input('server.HTTP_REFERER'))think\Log::log('referer='.input('server.HTTP_REFERER'));{/php}
- //跳转首页
- setTimeout(function () {
- location.href = '/';
- }, 10000)
- </script>
- </body>
- </html>
|