Browse Source

explorer: Add captions for error pages

x 6 months ago
parent
commit
9797819ddf

BIN
bin/explorer/python/static/darkfi05.jpg


BIN
bin/explorer/python/static/darkfi25.jpg


+ 27 - 0
bin/explorer/python/templates/error.html

@@ -24,6 +24,19 @@
       <div class="error-content">
       <div class="error-content">
         <h1 class="error-title">{{ error_code|default('Error') }}</h1>
         <h1 class="error-title">{{ error_code|default('Error') }}</h1>
         <p class="error-message">{{ error|default('An unexpected error occurred') }}</p>
         <p class="error-message">{{ error|default('An unexpected error occurred') }}</p>
+
+        {% if error_code == '404' or error_code == 404 %}
+        <div class="error-image">
+          <img src="/static/darkfi25.jpg">
+          <p class="error-image-caption">Is this what you're looking for?</p>
+        </div>
+        {% elif error_code == '500' or error_code == 500 %}
+        <div class="error-image">
+          <img src="/static/darkfi05.jpg">
+          <p class="error-image-caption">Reality fractured beyond repair!</p>
+        </div>
+        {% endif %}
+
         <div class="error-actions">
         <div class="error-actions">
           <a href="/" class="btn">Return to Home</a>
           <a href="/" class="btn">Return to Home</a>
           <a href="javascript:history.back()" class="btn btn-outline">Go Back</a>
           <a href="javascript:history.back()" class="btn btn-outline">Go Back</a>
@@ -61,6 +74,20 @@
       color: var(--color-muted);
       color: var(--color-muted);
       margin-bottom: 2rem;
       margin-bottom: 2rem;
     }
     }
+    .error-image {
+      margin-bottom: 2rem;
+    }
+    .error-image img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+    }
+    .error-image-caption {
+      margin-top: 1rem;
+      font-size: 1.4rem;
+      color: var(--color-muted);
+      font-style: italic;
+    }
     .error-actions {
     .error-actions {
       display: flex;
       display: flex;
       gap: 1rem;
       gap: 1rem;