50x.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>500 服务器错误</title>
  7. <style>
  8. body {
  9. font-family: 'Microsoft YaHei', Arial, sans-serif;
  10. background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  11. margin: 0;
  12. padding: 0;
  13. display: flex;
  14. justify-content: center;
  15. align-items: center;
  16. min-height: 100vh;
  17. color: white;
  18. text-align: center;
  19. }
  20. .error-container {
  21. background: rgba(255, 255, 255, 0.1);
  22. padding: 50px;
  23. border-radius: 20px;
  24. backdrop-filter: blur(10px);
  25. box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  26. }
  27. .error-code {
  28. font-size: 120px;
  29. font-weight: bold;
  30. margin: 0;
  31. text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
  32. }
  33. .error-message {
  34. font-size: 24px;
  35. margin: 20px 0;
  36. }
  37. .error-description {
  38. font-size: 16px;
  39. margin: 20px 0;
  40. opacity: 0.9;
  41. line-height: 1.6;
  42. }
  43. .home-btn {
  44. display: inline-block;
  45. padding: 12px 30px;
  46. background: white;
  47. color: #4facfe;
  48. text-decoration: none;
  49. border-radius: 25px;
  50. font-weight: bold;
  51. margin-top: 20px;
  52. transition: transform 0.3s ease;
  53. }
  54. .home-btn:hover {
  55. transform: translateY(-2px);
  56. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  57. }
  58. .retry-btn {
  59. display: inline-block;
  60. padding: 12px 30px;
  61. background: transparent;
  62. color: white;
  63. border: 2px solid white;
  64. text-decoration: none;
  65. border-radius: 25px;
  66. font-weight: bold;
  67. margin: 10px;
  68. transition: all 0.3s ease;
  69. }
  70. .retry-btn:hover {
  71. background: white;
  72. color: #4facfe;
  73. }
  74. .contact-info {
  75. margin-top: 30px;
  76. font-size: 14px;
  77. opacity: 0.8;
  78. }
  79. </style>
  80. </head>
  81. <body>
  82. <div class="error-container">
  83. <h1 class="error-code">500</h1>
  84. <h2 class="error-message">服务器内部错误</h2>
  85. <p class="error-description">
  86. 抱歉,服务器遇到了一个意外错误。<br>
  87. 我们的技术团队已经收到通知,正在努力修复问题。
  88. </p>
  89. <div>
  90. <a href="javascript:location.reload()" class="retry-btn">重试页面</a>
  91. <a href="/" class="home-btn">返回首页</a>
  92. </div>
  93. <div class="contact-info">
  94. 如果问题持续存在,请联系技术支持
  95. </div>
  96. </div>
  97. </body>
  98. </html>