identity-vault/app/views/errors/internal_server_error.html.erb
2025-12-29 16:19:10 -05:00

102 lines
2.6 KiB
Text

<style>
.error-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem;
text-align: center;
}
.error-page-content {
max-width: 600px;
}
.error-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
color: var(--pico-primary);
}
.error-code {
font-size: 4rem;
font-weight: 700;
color: var(--pico-primary);
margin-bottom: 0.5rem;
line-height: 1;
}
.error-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.error-description {
margin-bottom: 2rem;
opacity: 0.8;
}
.error-id-box {
background: var(--pico-card-background-color);
border: 2px solid var(--pico-primary);
border-radius: var(--pico-border-radius);
padding: 1.5rem;
margin-bottom: 2rem;
}
.error-id-label {
font-size: 0.875rem;
margin-bottom: 1rem;
opacity: 0.9;
}
.error-id-code {
display: block;
font-family: monospace;
font-size: 0.9rem;
padding: 0.75rem 1rem;
background: var(--pico-background-color);
border: 1px solid var(--pico-muted-border-color);
border-radius: var(--pico-border-radius);
cursor: pointer;
transition: all 0.2s;
font-weight: 600;
}
.error-id-code:hover {
border-color: var(--pico-primary);
background: var(--pico-primary-focus);
}
.copy-feedback {
display: none;
margin-top: 0.5rem;
color: #2ecc71;
font-size: 0.875rem;
font-weight: 600;
}
.copy-feedback.show {
display: block;
}
</style>
<div class="error-page">
<div class="error-page-content">
<svg class="error-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
<div class="error-code">500</div>
<h1 class="error-title">Internal Server Error</h1>
<p class="error-description">We're sorry, but something went wrong on our end.</p>
<% if @event_id.present? %>
<div class="error-id-box">
<p class="error-id-label">
If you need help, please provide this error ID:
</p>
<code
class="error-id-code"
data-error-id="<%= @event_id %>"
onclick="copyErrorId(this)"
title="Click to copy">
<%= @event_id %>
</code>
<div class="copy-feedback">✓ Copied to clipboard!</div>
</div>
<% end %>
<a href="/" role="button">Go back home</a>
</div>
</div>