1
0

rperror.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="apple-mobile-web-app-capable" content="yes" />
  5. <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
  6. <meta charset="UTF-8">
  7. <meta name="theme-color" content="#4b75ff">
  8. <link rel="icon" type="image/png" href="img/small_icon.png"/>
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.css">
  10. <link rel="preconnect" href="https://fonts.googleapis.com">
  11. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  12. <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
  13. <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  14. <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.js"></script>
  15. <title>521 - Web server is down</title>
  16. <style>
  17. h1, h2, h3, h4, h5, p, a, span{
  18. font-family: 'Noto Sans TC', sans-serif;
  19. font-weight: 300;
  20. color: rgb(88, 88, 88)
  21. }
  22. .diagram{
  23. background-color: #ebebeb;
  24. box-shadow:
  25. inset 0px 11px 8px -10px #CCC,
  26. inset 0px -11px 8px -10px #CCC;
  27. padding-bottom: 2em;
  28. }
  29. .diagramHeader{
  30. margin-top: 0.2em;
  31. }
  32. @media (max-width:512px) {
  33. .widescreenOnly{
  34. display: none !important;
  35. }
  36. .four.wide.column:not(.widescreenOnly){
  37. width: 50% !important;
  38. }
  39. .ui.grid{
  40. justify-content: center !important;
  41. }
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div>
  47. <br><br>
  48. <div class="ui container">
  49. <h1 style="font-size: 4rem;">Error 521</h1>
  50. <p style="font-size: 2rem; margin-bottom: 0.4em;">Web server is down</p>
  51. <small id="timestamp"></small>
  52. </div>
  53. <br><br>
  54. </div>
  55. <div class="diagram">
  56. <div class="ui text container">
  57. <div class="ui grid">
  58. <div class="four wide column widescreenOnly" align="center">
  59. <svg version="1.1" id="client_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  60. width="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
  61. <path fill="#C9CACA" d="M184.795,143.037c0,9.941-8.059,18-18,18H33.494c-9.941,0-18-8.059-18-18V44.952c0-9.941,8.059-18,18-18
  62. h133.301c9.941,0,18,8.059,18,18V143.037z"/>
  63. <circle fill="#FFFFFF" cx="37.39" cy="50.88" r="6.998"/>
  64. <circle fill="#FFFFFF" cx="54.115" cy="50.88" r="6.998"/>
  65. <path fill="#FFFFFF" d="M167.188,50.88c0,3.865-3.133,6.998-6.998,6.998H72.379c-3.865,0-6.998-3.133-6.998-6.998l0,0
  66. c0-3.865,3.133-6.998,6.998-6.998h87.811C164.055,43.882,167.188,47.015,167.188,50.88L167.188,50.88z"/>
  67. <rect x="31.296" y="66.907" fill="#FFFFFF" width="132.279" height="77.878"/>
  68. <circle fill="#9BCA3E" cx="96.754" cy="144.785" r="37.574"/>
  69. <polyline fill="none" stroke="#FFFFFF" stroke-width="8" stroke-miterlimit="10" points="108.497,133.047 93.373,153.814
  70. 82.989,143.204 "/>
  71. </svg>
  72. <small>You</small>
  73. <h2 class="diagramHeader">Browser</h2>
  74. <p style="font-weight: 500; color: #9bca3e;">Working</p>
  75. </div>
  76. <div class="two wide column widescreenOnly" style="margin-top: 8em; text-align: center;">
  77. <i class="ui big grey exchange alternate icon" style="color:rgb(167, 167, 167) !important;"></i>
  78. </div>
  79. <div class="four wide column widescreenOnly" align="center">
  80. <svg version="1.1" id="cloud_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  81. width="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
  82. <ellipse fill="#9FA0A0" cx="46.979" cy="108.234" rx="25.399" ry="25.139"/>
  83. <circle fill="#9FA0A0" cx="109.407" cy="100.066" r="50.314"/>
  84. <circle fill="#9FA0A0" cx="22.733" cy="129.949" r="19.798"/>
  85. <circle fill="#9FA0A0" cx="172.635" cy="125.337" r="24.785"/>
  86. <path fill="#9FA0A0" d="M193.514,133.318c0,9.28-7.522,16.803-16.803,16.803H28.223c-9.281,0-16.803-7.522-16.803-16.803l0,0
  87. c0-9.28,7.522-16.804,16.803-16.804h148.488C185.991,116.515,193.514,124.038,193.514,133.318L193.514,133.318z"/>
  88. <circle fill="#9BCA3D" cx="100" cy="149.572" r="38.267"/>
  89. <polyline fill="none" stroke="#FFFFFF" stroke-width="8" stroke-miterlimit="10" points="113.408,136.402 95.954,160.369
  90. 83.971,148.123 "/>
  91. </svg>
  92. <small>Gateway Node</small>
  93. <h2 class="diagramHeader">Reverse Proxy</h2>
  94. <p style="font-weight: 500; color: #9bca3e;">Working</p>
  95. </div>
  96. <div class="two wide column widescreenOnly" style="margin-top: 8em; text-align: center;">
  97. <i class="ui big grey exchange alternate icon" style="color:rgb(167, 167, 167) !important;"></i>
  98. </div>
  99. <div class="four wide column" align="center">
  100. <svg version="1.1" id="host_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  101. width="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
  102. <path fill="#999999" d="M168.484,113.413c0,9.941,3.317,46.324-6.624,46.324H35.359c-9.941,0-5.873-39.118-5.715-46.324
  103. l17.053-50.909c1.928-9.879,8.059-18,18-18h69.419c9.941,0,15.464,7.746,18,18L168.484,113.413z"/>
  104. <rect x="38.068" y="118.152" fill="#FFFFFF" width="122.573" height="34.312"/>
  105. <circle fill="#BD2426" cx="141.566" cy="135.873" r="8.014"/>
  106. <circle fill="#BD2426" cx="99.354" cy="152.464" r="36.343"/>
  107. <line fill="none" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="10" x1="90.5" y1="144.125" x2="107.594" y2="161.946"/>
  108. <line fill="none" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="10" x1="90.5" y1="161.946" x2="107.594" y2="144.79"/>
  109. </svg>
  110. <small id="host"></small>
  111. <h2 class="diagramHeader">Host</h2>
  112. <p style="font-weight: 500; color: #bd2426;">Error</p>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. <div>
  118. <br>
  119. <div class="ui container">
  120. <div class="ui stackable grid">
  121. <div class="eight wide column">
  122. <h1>What happend?</h1>
  123. <p>The web server reported a bad gateway error.<br>For more information, see the error message on the reverse proxy terminal.</p>
  124. </div>
  125. <div class="eight wide column">
  126. <h1>What can I do?</h1>
  127. <h5 style="font-weight: 500;">If you are a visitor of this website: </h5>
  128. <p>Please try again in a few minutes</p>
  129. <h5 style="font-weight: 500;">If you are the owner of this website:</h5>
  130. <div class="ui bulleted list">
  131. <div class="item">Check if the target web server is online</div>
  132. <div class="item">Visit the Reverse Proxy management interface to correct any setting errors</div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. <br>
  138. </div>
  139. <div class="ui divider"></div>
  140. <div class="ui container" style="color: grey; font-size: 90%">
  141. <p>Powered by Zoraxy</p>
  142. </div>
  143. <br><br>
  144. <script>
  145. $("#timestamp").text(new Date());
  146. $("#host").text(location.href);
  147. </script>
  148. </body>
  149. </html>