summaryrefslogtreecommitdiff
path: root/public/500.html
blob: 9bcc25e684b1037ac5bea5401fa6d25a12fd81ed (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<!--suppress ES6ConvertVarToLetConst -->
<html lang="en">
  <head>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta http-equiv="refresh" content="600" />
    <meta charset="UTF-8" />
    <title>5XX Server Error - Twibooru</title>
    <style type="text/css">
      body {
        background-color: #30233c;
        color: #e0e0e0;
        font-family: 'DejaVu Sans Mono', 'Noto Sans Mono Medium', monospaced, monospace;
        font-size: 13px;
        line-height: 18px;
      }
      h1 {
        font-size:24px;
        font-weight: normal;
        margin: 0 0 0.618em 0;
      }
      #cf-error h1 { font-size: 16px; }
      table h1 { margin-bottom: 0; }
      p {
        line-height: 1.618em;
        margin-bottom: 5px;
      }
      hr {
        border: 0;
        border-top: 1px solid #c0c0c0;
        margin: 20px 0;
      }
      #cf-error {
        background-color: #30233c;
        color: #e0e0e0;
        padding: 10px;
        font-size: 11px;
        font-family: Inconsolata, monospace;
      }
      a, a:active, a:visited {
        color: #6eaede;
        text-decoration: none;
        border: 0;
      }
      a:visited, a:hover { color: #6eaede; }
      img { border:0; }
      .message {
        max-width: 560px;
        margin: auto;
        text-align: left;
        background-color: #221535;
        padding: 30px 30px 18px;
      }
      i.favicon-home {
        background-image: url("/favicon.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 1em;
        height: 1em;
        display: inline-block;
      }

      input[type=checkbox], #cf-error { display: none; }
      label {
        cursor: pointer;
        user-select: none;
        -moz-user-select: none;
      }
      label::before { content: '[+] '; font-family: Inconsolata, monospace; }
      input[type=checkbox]:checked ~ label::before { content: '[-] ' }
      input[type=checkbox]:checked ~ #cf-error { display: block; margin-top: 1em; }

      .red-tag {
        display: inline-block;
        border: 1px solid #7a2725;
        background: #66211f;
        font-size: 18px;
        padding: 4px;
      }
      table { width: 100% }
      img {
        max-width: 100%;
      }
      #footer {
        color: #949494;
      }
    </style>
  </head>
  <body>
    <div class="message">
      <table>
        <tr>
          <td><h1><i class="favicon-home"></i> Twibooru</h1></td>
          <td align="right"><span id="error-code" class="red-tag">5XX</span></td>
        </tr>
	  </table>
      <p>If this is your first time seeing this, try refreshing the page.</p>
      <p>If you've been seeing this for more than a few minutes, we may be encountering problems which will take some time to sort out.</p>
      <p>In the meantime, please accept this picture of Twilight doing her best.</p>
      <br/>
      <picture>
        <source id="img-webp" srcset="/error/1.webp" type="image/webp" sizes="100%"/>
        <img id="img-png" src="/error/1.png" alt="Twilight Sparkle breaking things" />
      </picture>
      <hr/>
      <p id="footer">This error lovingly served to you by <strong>moondancer.twibooru.org</strong>.</p>
	  <!--
      <input id="toggle-1" type="checkbox"/>
	  <label for="toggle-1">Technical details</label><br/>
      <div id="cf-error">::CLOUDFLARE_ERROR_500S_BOX::</div>-->
    </div>
    <script type="text/javascript">
      var errors = {
        'cf-error-502': '502 Bad Gateway',
        'cf-error-504': '504 Gateway Timeout',
        'cf-error-520': '520 Unknown Error',
        'cf-error-521': '521 Web Server is Down',
        'cf-error-522': '522 Connection Timed Out',
        'cf-error-523': '523 Origin is Unreachable',
        'cf-error-524': '524 Timeout Occurred',
        'cf-error-525': '525 TLS Handshake Failed',
        'cf-error-526': '526 Invalid TLS Certificate',
        'cf-error-527': '527 Railgun Error',
        'cf-error-530': '530 Origin DNS Error'
      };

      var callback = function() {
        var imageSelection = Math.round(Math.random() * (2 - 1) + 1);

        document.getElementById('img-png').src = '/error/' + imageSelection + '.png';
        document.getElementById('img-webp').srcset = '/error/' + imageSelection + '.webp';

        /* var errorCode = document.getElementById('error-code');
        var errorDiv  = document.getElementById('cf-error').firstElementChild;

        if (errorDiv) {
          var errorMsg = errors[errorDiv.classList[1]];
          if (errorMsg) {
            document.title = errorMsg + ' - Twibooru';
            errorCode.textContent = errorMsg.split(' ')[0];
          }
        } */
      };

      if (document.readyState !== 'loading') callback();
      else window.addEventListener('DOMContentLoaded', callback);
    </script>
  </body>
</html>
<!-- Hi -->