mirror of
				https://github.com/NodeBB/NodeBB.git
				synced 2025-10-31 02:55:58 +01:00 
			
		
		
		
	
		
			
				
	
	
		
			178 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			178 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <html>
 | |
| <head>
 | |
| 	<title>Excessive Load Warning</title>
 | |
| 	<meta name="viewport" content="width=device-width, initial-scale=1">
 | |
| 	<style type="text/css">
 | |
| 	body {
 | |
| 		background: #00A9EA;
 | |
| 		color: white;
 | |
| 		/* see public/less/admin/vars.less for documentation on system font family */
 | |
| 		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 | |
| 		text-align: center;
 | |
| 		-webkit-transform-style: preserve-3d;
 | |
| 		-moz-transform-style: preserve-3d;
 | |
| 		transform-style: preserve-3d;
 | |
| 	}
 | |
| 
 | |
| 	h1 {
 | |
| 		font-size: 250px;
 | |
| 		color: #fff;
 | |
| 		opacity: 0.5;
 | |
| 		margin: 10px;
 | |
| 		cursor: pointer;
 | |
| 		-moz-user-select: none;
 | |
| 		-khtml-user-select: none;
 | |
| 		-webkit-user-select: none;
 | |
| 	}
 | |
| 
 | |
| 	p {
 | |
| 		font-size: 20px;
 | |
| 	}
 | |
| 
 | |
| 	p strong {
 | |
| 		font-size: 28px;
 | |
| 	}
 | |
| 
 | |
| 	@media (max-width: 640px) {
 | |
| 		h1 {
 | |
| 			font-size: 125px;
 | |
| 		}
 | |
| 
 | |
| 		p {
 | |
| 			font-size: 16px;
 | |
| 		}
 | |
| 
 | |
| 		p strong {
 | |
| 			font-size: 20px;
 | |
| 		}
 | |
| 	}
 | |
| 
 | |
| 	.center {
 | |
| 		position: relative;
 | |
| 		top: 50%;
 | |
| 		-webkit-transform: translateY(50%);
 | |
| 		-ms-transform: translateY(50%);
 | |
| 		transform: translateY(50%);
 | |
| 	}
 | |
| 
 | |
| 	@-webkit-keyframes bounce {
 | |
| 		0%, 20%, 53%, 80%, 100% {
 | |
| 			-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 | |
| 			transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 | |
| 			-webkit-transform: translate3d(0,0,0);
 | |
| 			transform: translate3d(0,0,0);
 | |
| 		}
 | |
| 
 | |
| 		40%, 43% {
 | |
| 			-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 | |
| 			transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 | |
| 			-webkit-transform: translate3d(0, -30px, 0);
 | |
| 			transform: translate3d(0, -30px, 0);
 | |
| 		}
 | |
| 
 | |
| 		70% {
 | |
| 			-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 | |
| 			transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 | |
| 			-webkit-transform: translate3d(0, -15px, 0);
 | |
| 			transform: translate3d(0, -15px, 0);
 | |
| 		}
 | |
| 
 | |
| 		90% {
 | |
| 			-webkit-transform: translate3d(0,-4px,0);
 | |
| 			transform: translate3d(0,-4px,0);
 | |
| 		}
 | |
| 	}
 | |
| 
 | |
| 	@keyframes bounce {
 | |
| 		0%, 20%, 53%, 80%, 100% {
 | |
| 			-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 | |
| 			transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 | |
| 			-webkit-transform: translate3d(0,0,0);
 | |
| 			transform: translate3d(0,0,0);
 | |
| 		}
 | |
| 
 | |
| 		40%, 43% {
 | |
| 			-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 | |
| 			transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 | |
| 			-webkit-transform: translate3d(0, -30px, 0);
 | |
| 			transform: translate3d(0, -30px, 0);
 | |
| 		}
 | |
| 
 | |
| 		70% {
 | |
| 			-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 | |
| 			transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 | |
| 			-webkit-transform: translate3d(0, -15px, 0);
 | |
| 			transform: translate3d(0, -15px, 0);
 | |
| 		}
 | |
| 
 | |
| 		90% {
 | |
| 			-webkit-transform: translate3d(0,-4px,0);
 | |
| 			transform: translate3d(0,-4px,0);
 | |
| 		}
 | |
| 	}
 | |
| 
 | |
| 	.bounce {
 | |
| 		-webkit-animation-name: bounce;
 | |
| 		animation-name: bounce;
 | |
| 		-webkit-transform-origin: center bottom;
 | |
| 		-ms-transform-origin: center bottom;
 | |
| 		transform-origin: center bottom;
 | |
| 	}
 | |
| 
 | |
| 	.animated {
 | |
| 		-webkit-animation-duration: 1s;
 | |
| 		animation-duration: 1s;
 | |
| 		-webkit-animation-fill-mode: both;
 | |
| 		animation-fill-mode: both;
 | |
| 	}
 | |
| 
 | |
| 	.animated.infinite {
 | |
| 		-webkit-animation-iteration-count: infinite;
 | |
| 		animation-iteration-count: infinite;
 | |
| 	}
 | |
| 
 | |
| 	.animated.hinge {
 | |
| 		-webkit-animation-duration: 2s;
 | |
| 		animation-duration: 2s;
 | |
| 	}
 | |
| 
 | |
| 	.hide {
 | |
| 		display: none;
 | |
| 	}
 | |
| 	</style>
 | |
| 	<script type="text/javascript">
 | |
| 	window.onload = function() {
 | |
| 		var count = 0,
 | |
| 			bounce = document.getElementById('click-me');
 | |
| 		bounce.onclick = function() {
 | |
| 			count++;
 | |
| 			bounce.className = '';
 | |
| 			setTimeout(function() {
 | |
| 				bounce.className = 'animated bounce';
 | |
| 			}, 50);
 | |
| 
 | |
| 			if (count > 5) {
 | |
| 				document.getElementById('hide').className = '';
 | |
| 			}
 | |
| 		};
 | |
| 	}
 | |
| 	</script>
 | |
| </head>
 | |
| <body>
 | |
| 	<div class="wrapper">
 | |
| 		<div class="center">
 | |
| 			<h1 id="click-me" class="animated bounce">503</h1>
 | |
| 			<p>
 | |
| 				<strong>This forum is temporarily unavailable due to excessive load.</strong>
 | |
| 			</p>
 | |
| 			<p>
 | |
| 				We shouldn't be down for long. Please check back shortly. Sorry for the inconvenience!
 | |
| 			</p>
 | |
| 			<p>
 | |
| 				 <small id="hide" class="hide">Alright. You can stop clicking... it's not going to make the site come back sooner!</small>
 | |
| 			</p>
 | |
| 		</div>
 | |
| 	</div>
 | |
| </body>
 | |
| </html>
 |