docbrown/public/revised500.html
2018-02-28 16:11:08 -05:00

185 lines
4.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>We're sorry, but something went wrong (500)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#container {
display: flex;
}
@media screen and (max-width: 799px) and (min-width: 1px) {
#container > div:first-child {
margin: auto;
}
}
@media screen and (max-width: 1920px) and (min-width: 800px) {
#container > div:first-child {
margin-right: auto;
}
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
@media screen and (max-width: 1920px) and (min-width: 800px) {
.dialog{
background:rgb(236, 236, 236);
border:1px solid rgb(217, 217, 217);
text-align:center;
padding:20px 20px;
color:blue;
max-width:50%;
color:rgb(44, 46, 50);
border-radius:5px;
}
}
@media screen and (max-width: 800px) and (min-width: 1px) {
.dialog{
background:rgb(236, 236, 236);
border:1px solid rgb(217, 217, 217);
text-align:center;
padding:20px 20px;
margin: 20px 20px 20px 20px;
max-width:100%;
color:rgb(44, 46, 50);
border-radius:5px;
}
}
#options{
text-align:left;
}
textarea{
width:75%;
height:100px;
border:1px solid rgb(182, 182, 182);
border-radius:3px;
padding:8px;
font-size:14px;
}
input[type="submit"]{
width:50%;
padding:10px;
background:rgb(12, 181, 140);
color:white;
border:0px;
border-radius:3px;
font-size:15px;
margin-top:5px;
cursor:pointer;
}
@media screen and (max-width: 1920px) and (min-width: 800px) {
#img{
max-width:50%;
width: 750px;
padding:10px;
}
}
@media screen and (max-width: 799px) and (min-width: 1px) {
#img{
display: none;
}
}
#call-to-action{
font-size:20px;
text-align:left;
}
.top-bar .logo{
width:51px;
height:30px;
padding:5px 8px 4px 10px;
margin-top: 5px;
fill: white;
background: black:
}
.top-bar nav .nav-search-form input{
width: calc(30vw - 10px);
border-radius: 20px;
border: 1px solid #dedada;
padding: 4px 12px 5px;
font-size: 0.8em;
background: #f5f6f7;
webkit-appearance: none;
}
.top-bar nav{
max-width: 99%;
width: 1250px;
margin: auto;
position: relative;
}
input{
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 11px system-ui;
-webkit-writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<div id="container">
<div id="img">
<img alt="500 error" src="catmeme.png" style='width:100%;' border="0" alt="Null" />
</div>
<div class="dialog">
<div>
<h1>500:Internal Server Error</h1>
<h2>Oops, this isn't where you were trying to go...</h2>
<div id="call-to-action">Don't worry though, you can return to our homepage by clicking <strong><a href="/">here</a></strong>.
<br>
<br>
<h5>But perhaps this is an opportunity, would you like to:</h5>
<div id="options">
<ol>
<li>
Explore some great <a href="/t/error">articles</a> the DEV community has written about errors.
</li>
<li>
Learn more about <a href="https://www.google.com/search?q=http+errors+explained&oq=http+errors+explained&gs_l=psy-ab.3..0j0i22i30k1.12420.13930.0.14153.10.10.0.0.0.0.135.1092.4j6.10.0....0...1.1.64.psy-ab..0.10.1091.9ZVfWfG4nMs">HTTP errors.</a>
</li>
<li>
Bravely help us debug this error.
</li>
</ol>
</div>
</div>
</div>
<form action="/feedback_messages" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="&#x2713;" />
<input name="feedback_type" type="hidden" value="bug-reports" />
<div class="field">
<textarea name="feedback" placeholder="If you would like to describe the situation that lead to this error, it would be appreciated :)"></textarea>
</div>
<div class="actions">
<input type="submit" name="commit" value="Send Feedback" />
</div>
</form>
</div>
</div>
</body>
</html>