git_admin/sx-fc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show internet connection status in navbar

Browse Source
This commit is contained in:
Dev Team
2025-05-27 15:35:40 +06:30
parent 200cdb82f6
commit e088954769
3 changed files with 504 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
app/assets/stylesheets/application.scss
View File

@@ -289,3 +289,149 @@ i.logout_icon{
.blue{ .blue{
background-color: blue; background-color: blue;
} }
.new-design-navbar {
background-color: #5856D6;
color: white;
padding: 0 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 50px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
position: relative;
z-index: 1030;
}
.new-design-navbar .container-fluid {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
padding-left: 0;
padding-right: 0;
}
.new-design-navbar .navbar-left-section,
.new-design-navbar .navbar-right-section {
display: flex;
align-items: center;
height: 100%;
}
.new-design-navbar .bars-toggle {
color: white;
text-decoration: none;
margin-right: 15px;
padding: 0 10px;
height: 100%;
display: flex;
align-items: center;
}
.new-design-navbar .bars-toggle:hover {
background-color: rgba(255,255,255,0.1);
}
.new-design-navbar .bars-toggle .material-icons {
font-size: 24px;
vertical-align: middle;
}
.new-design-navbar .navbar-brand {
color: white !important;
display: flex;
align-items: center;
font-size: 1.1rem; /* Adjust size */
font-weight: 500;
padding: 0;
margin: 0;
text-decoration: none;
}
.new-design-navbar .navbar-brand:hover {
opacity: 0.9;
}
.new-design-navbar .navbar-brand .material-icons {
margin-right: 8px;
font-size: 22px;
vertical-align: middle;
}
.new-design-navbar .navbar-right-section .nav-item {
display: flex;
align-items: center;
margin-left: 15px;
padding: 0 8px;
height: 100%;
cursor: default;
font-size: 0.9rem;
}
.new-design-navbar .navbar-right-section .nav-item .material-icons {
margin-right: 5px;
font-size: 20px;
vertical-align: middle;
}
.new-design-navbar .navbar-right-section .nav-item.dropdown > a.dropdown-toggle {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: 100%;
padding: 0 8px;
}
.new-design-navbar .navbar-right-section .nav-item.dropdown > a.dropdown-toggle:hover {
background-color: rgba(255,255,255,0.1);
}
.new-design-navbar .navbar-right-section .nav-item.dropdown > a .material-icons:last-child { /* Dropdown arrow */
margin-left: 2px;
margin-right: 0;
font-size: 22px;
}
/* Dropdown Menu Styling */
.new-design-navbar .dropdown-menu {
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
margin-top: 2px !important;
}
.new-design-navbar .dropdown-menu > li > a {
display: flex;
align-items: center;
padding: 10px 20px;
color: #333;
font-size: 14px;
text-decoration: none;
clear: both;
font-weight: normal;
line-height: 1.42857143;
white-space: nowrap;
}
.new-design-navbar .dropdown-menu > li > a:hover,
.new-design-navbar .dropdown-menu > li > a:focus {
background-color: #f5f5f5;
color: #333;
}
.new-design-navbar .dropdown-menu > li > a .material-icons {
margin-right: 12px;
color: #777;
font-size: 18px;
vertical-align: middle;
}
.new-design-navbar .dropdown-menu .hidden {
display: none;
}
.material-icons {
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}

460
app/views/layouts/_header.html.erb
View File

@@ -1,274 +1,274 @@
<!-- Search Bar --> <%# Top Bar - New Design %>
<!-- <div class="search-bar"> <% if !request.path_info.include?('second_display') %>
<div class="search-icon"> <nav class="navbar new-design-navbar">
<i class="material-icons">search</i>
</div>
<input type="text" placeholder="START TYPING...">
<div class="close-search">
<i class="material-icons">close</i>
</div>
</div> -->
<!-- #END# Search Bar -->
<!-- Top Bar -->
<%food_court = Lookup.find_by_lookup_type_and_value("food_court", "1")%>
<% display_none = (food_court && current_user.role == 'cashier') ? 'd-none' : '' %>
<%if !request.path_info.include?('second_display') %>
<nav class="navbar">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-left-section">
<!-- <a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"></a> --> <% if current_login_employee.role != "waiter" %>
<%if current_login_employee.role !="waiter" %> <a href="javascript:void(0);" class="bars bars-toggle">
<a href="javascript:void(0);" class="bars"></a> <!-- <i class="material-icons">menu</i> -->
<a class="navbar-brand mbl_view" href="<%= root_path %>" style="margin-left: 20px;">
<% else %>
<a class="navbar-brand m-0 mbl_view" href="<%= root_path %>">
<%end%>
<img src="<%= asset_path('SX-Logo-small.png') %>" width="40" height="40" alt="Logo", class="<%= display_none.present? ? 'm-0' : '' %>" />
<span class="navbar-brand-txt">SX Restaurant</span>
</a>
<span class="navbar-brand m-0">
<span id="others_payment"></span>
</span>
</div>
<!-- Start Shop Info -->
<div class="navbar-right m-auto">
<span class="navbar-brand navbar-brand-txt"><%= current_shop.name %></span>
</div>
<% if current_login_employee.role == "cashier" %>
<div class="mr-4">
<a class="pt-2" href="<%= settings_out_of_stock_index_path %>">
<i class="material-icons" style="margin:25%; color:white;">phonelink_erase</i>
</a> </a>
<% end %>
<%# Brand Name and Icon %>
<a class="navbar-brand" href="<%= root_path %>">
<img src="<%= asset_path('SX-Logo-small.png') %>" width="40" height="40" alt="Logo" />
<span>SX Restaurant</span>
</a>
</div>
<div class="navbar-right-section">
<%# Connection Status %>
<div class="nav-item" id="connection-status-item">
<i class="material-icons">wifi</i>
<span class="connection-status-text">Connecting...</span>
</div> </div>
<%end%>
<!-- End Shop Info --> <%# User Dropdown %>
<%food_court = Lookup.find_by_lookup_type_and_value("food_court", "1")%> <div class="nav-item dropdown">
<% if !food_court %> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div class="navbar-right m-auto"> <i class="material-icons">person</i>
<% if order_reservation %> <span><%= current_login_employee.name %></span>
<div class="online_order"> </a>
<span class="navbar-brand navbar-brand-txt header-default-color"> <ul class="dropdown-menu">
<% if request.user_agent.include? "Mobile" %> <% if current_login_employee.role == "administrator" %>
<img src="/assets/online_order_icon.png" alt="<%= t :order_reservation %>" /> <li>
<% else %> <a href="<%= settings_shops_path %>" class="waves-effect waves-block">
<%= t :order_reservation %> <i class="material-icons">store</i>
<% end %> <span>Shop Info</span>
</a>
</li>
<% end %>
<li>
<a href="javascript:void(0);" class="team_viewer waves-effect waves-block">
<i class="material-icons">touch_app</i>
<span>Team Viewer</span>
</a>
</li>
<% if current_login_employee.role == "cashier" %>
<li>
<a href="/origami/second_display" class="waves-effect waves-block" onclick="window.open('/foodcourt/second_display', 'newwindow', 'width=700,height=500'); return false;">
<i class="material-icons">desktop_windows</i>
<span>Second Display</span>
</a>
</li>
<% food_court = Lookup.find_by_lookup_type_and_value("food_court", "1") %>
<% if food_court && ShiftSale.current_open_shift(current_user) %>
<li>
<a href="javascript:void(0);" class="close_cashier waves-effect waves-block">
<i class="material-icons">highlight_off</i>
<span>Close Cashier</span>
</a>
</li>
<% end %>
<% end %>
<li>
<a href="javascript:void(0);" class="delete logout waves-effect waves-block" data-ref="<%= logout_path %>" data-method="delete">
<i class="material-icons">exit_to_app</i>
<span>Logout</span>
</a>
<span class="hidden" id="delete_text">
<h6>Are you sure you want to Logout ?</h6>
</span> </span>
<span class="order_no"></span> </li>
</div> </ul>
<% end %> </div>
</div>
<% end %>
<!-- Start Quick Access for Cashier -->
<!-- <div class="navbar-right m-auto">
<a href="#" class="dropdown-toggle waves-block col-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="flase">
<span><%= t :cashier %></span>
</a>
<ul class="dropdown-menu">
<li>
<p class="waves-effect waves-block p-l-20 m-b-5">
<a href="<%= origami_root_path %>" style="text-decoration: none;">
<i class="material-icons font-7 logout_icon shopinfo">monetization_on</i>
<span class="font-15 shopinfo dinein" ><%= t :dine_in %></span>
</a>
</p>
</li>
<li>
<p class="waves-effect waves-block p-l-20 m-b-5">
<a href="<%= origami_quick_service_path %>" style="text-decoration: none;">
<i class="material-icons font-7 logout_icon shopinfo">restaurant_menu</i>
<span class="font-15 shopinfo quick_service" ><%= t :quick_service %></span>
</a>
</p>
</li>
<% if order_reservation %>
<li>
<p class="waves-effect waves-block p-l-20 m-b-5">
<a href="<%= origami_order_reservation_index_path %>" style="text-decoration: none;">
<i class="material-icons font-7 logout_icon shopinfo">room_service</i>
<span class="font-15 col-black online_order" ><%= t :order_reservation %></span>
<span class="order_no"></span>
</a>
</p>
</li>
<% end %>
<li>
<p class="waves-effect waves-block p-l-20 m-b-5">
<a href="<%= origami_reservation_index_path %>" style="text-decoration: none;">
<i class="material-icons font-7 logout_icon shopinfo">book</i>
<span class="font-15 col-black reservation" ><%= t :reservation %></span>
</a>
</p>
</li>
<li>
<p class="waves-effect waves-block p-l-20 m-b-5">
<a href="<%= origami_food_court_path %>" style="text-decoration: none;">
<i class="material-icons font-7 logout_icon shopinfo">restaurant</i>
<span class="font-15 col-black foodcourt" ><%= t :foodcourt %></span>
</a>
</p>
</li>
</ul>
</div> -->
<!-- End Quick Access for Cashier -->
<!-- Start Delete confirrm text !-->
<div class="navbar-right toggle_mbl">
<a href="javascript:void(0);" class="dropdown-toggle waves-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<% if current_login_employee %>
<span>
<% if request.user_agent.include? "Mobile" %>
<img src="/assets/user_icon.png" alt="<%= current_login_employee.name %>" />
<% else %>
<%= current_login_employee.name %>
<% end %>
</span>
<% end %>
</a>
<ul class="dropdown-menu">
<%if current_login_employee.role =="administrator" %>
<li>
<p class="waves-effect waves-block p-l-30 m-b-5">
<a href="<%= settings_shops_path %>" style="text-decoration: none;">
<i class="material-icons font-7 logout_icon shopinfo">info</i>
<span class="font-15 shopinfo" >Shop Info</span>
</a>
</p>
</li>
<% end %>
<li>
<p class="waves-effect waves-block p-l-30 m-b-5 team_viewer">
<i class="material-icons font-7 logout_icon shopinfo">touch_app</i>
<span class="font-15 shopinfo" >Team Viewer</span>
</p>
</li>
<%if current_login_employee.role =="cashier"%>
<li>
<p class="waves-effect waves-block p-l-30 m-b-5">
<a href="/origami/second_display" onclick="window.open('/foodcourt/second_display', 'newwindow', 'width=700,height=500'); return false;" style="text-decoration: none;">
<i class="material-icons font-7 logout_icon shopinfo">info</i>
<span class="font-15 shopinfo" >Second Display</span>
</a>
</p>
</li>
<%food_court = Lookup.find_by_lookup_type_and_value("food_court", "1")%>
<% if food_court && ShiftSale.current_open_shift(current_user)%>
<li>
<p class="waves-effect waves-block p-l-30 m-b-5 close_cashier">
<i class="material-icons font-7 logout_icon">close</i>
<span class="font-15">Close Cashier</span>
</p>
</li>
<% end %>
<% end %>
<li>
<!-- <p class="delete waves-effect waves-block p-l-30 m-b-5" data-ref="<%=logout_path%>" data-method="delete">
<i class="material-icons font-10 logout_icon">exit_to_app</i>
<span class="font-18">Logout</span>
</p> -->
<p class="delete waves-effect waves-block p-l-30 m-b-5 logout" data-ref="<%= logout_path %>" data-method="delete">
<i class="material-icons font-7 logout_icon">exit_to_app</i>
<span class="font-15">Logout</span>
</p>
<span class="hidden" id="delete_text">
<h6>Are you sure you want to Logout ?</h6>
<!-- <h6>This action can't be undo. </h6> -->
</span>
</li>
</ul>
<!-- NO Need for color Change
<a href="javascript:void(0);" class="js-right-sidebar" data-close="true">
<i class="material-icons">more_vert</i>
</a> -->
</div> </div>
</div> </div>
</nav> </nav>
<%end%>
<script type="text/javascript"> <script type="text/javascript">
$(function(){ $(function(){
$('.delete').click(function(){ $('.delete.logout').click(function(e){
e.preventDefault();
var method = $(this).attr('data-method'); var method = $(this).attr('data-method');
var url = $(this).attr('data-ref'); var url = $(this).attr('data-ref');
var html_text = $(this).siblings( "#delete_text" ).html(); var html_text = $(this).siblings("#delete_text").html();
//var page = url.substring(url.lastIndexOf('/') + 1);
swal({ swal({
title: "Confirmation", title: "Confirmation",
text: html_text, text: html_text,
type: "warning", type: "warning",
showCancelButton: true, showCancelButton: true,
confirmButtonColor: "#DD6B55", confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, logout!",
html: true html: true
}, function (isConfirm) { }, function (isConfirm) {
if (isConfirm) { if (isConfirm) {
$.ajax({ $.ajax({
type: method, type: method,
url: url , url: url,
headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
success: function(data) { success: function(data) {
location.href = data.url; if (data.url) {
location.href = data.url;
} else {
location.reload();
}
},
error: function() {
swal("Error", "Could not process logout.", "error");
} }
}); });
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
} }
}); });
}); });
$('.online_order').on('click',function(){ // TEAM VIEWER
window.location.href = '/origami/order_reservation'; $(".team_viewer").on('click',function(e){
}); e.preventDefault();
if(parseInt(getOnlineOrderCount()) > 0){
$('.order_no').addClass("order-badge");
$('.order_no').html(parseInt(getOnlineOrderCount()));
}
$(".team_viewer").on('click',function(){
// /opt/teamviewer/tv_bin/script/teamviewer
$.ajax({ $.ajax({
type: "POST", type: "POST",
data: {}, data: {},
dataType: 'json', dataType: 'json',
url: "/run_teamviewer", url: "<%= 's' %>",
headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
success: function(data){ success: function(data){
if(!data.status){ if(!data.status){
window.open('https://www.teamviewer.com', '_blank'); window.open('https://www.teamviewer.com', '_blank');
return false;
} }
},
error: function() {
window.open('https://www.teamviewer.com', '_blank');
} }
}); });
}); });
}); // CLOSE CASHIER
$('.close_cashier').on('click',function(e){ $('.close_cashier').on('click',function(e){
e.preventDefault(); // Prevent the href from redirecting directly e.preventDefault();
var linkURL = '/foodcourt/shift/cashier/close'; var linkURL = '/foodcourt/shift/cashier/close';
var count = '' var countText = '';
var text = '' var alertText = '';
$.ajax({
url: '/foodcourt/current_shift_order_count', $.ajax({
method: 'get', url: '/foodcourt/current_shift_order_count', // Ensure this path is correct
success: function(data) { method: 'GET',
count = JSON.stringify(data) success: function(data) {
console.log(count) // Assuming data is a number or an object like { count: X }
if (count > 0) { var pendingOrders = 0;
text = "<h5><span style=\"color: #CC0000\"> We have "+count+" pending orders and sales</span> </h5>.<br>Are you sure you want to close cashier? "; if (typeof data === 'number') {
}else{ pendingOrders = data;
text = "Are you sure you want to close cashier?"; } else if (data && typeof data.count === 'number') {
pendingOrders = data.count;
} else {
// Try to parse if it's a stringified number, as in original code
pendingOrders = parseInt(data) || 0;
}
if (pendingOrders > 0) {
alertText = "<h5><span style=\"color: #CC0000\">We have " + pendingOrders + " pending orders and sales.</span></h5><br>Are you sure you want to close cashier?";
} else {
alertText = "Are you sure you want to close cashier?";
}
swal({
title: "Alert!",
text: alertText,
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, close it!",
html: true
}, function(isConfirm) {
if (isConfirm) {
window.location.href = linkURL; // If this needs to be a POST/DELETE, use AJAX
}
});
},
error: function() {
swal("Error", "Could not check pending orders. Please try again.", "error");
} }
swal({ });
title: "Alert!", });
text: text, });
type: "warning",
showCancelButton: true, // Check Internet Connection status
html: true document.addEventListener('DOMContentLoaded', function() {
}, function() { function updateConnectionStatus() {
window.location.href = linkURL; const statusTextEl = document.querySelector('.connection-status-text');
}); console.log('checking internet connection');
} if (!statusTextEl) {
return;
}
statusTextEl.innerText = "Connecting";
statusTextEl.style.color = "white";
document.querySelector('#connection-status-item i').style.color = "white";
fetch("https://www.google.com/generate_204?_=" + new Date().getTime(), {
method: 'GET',
mode: 'no-cors',
cache: 'no-store'
}) })
}) .then(function(res) {
console.log(res);
statusTextEl.innerText = "Online";
statusTextEl.style.color = "lightgreen";
document.querySelector('#connection-status-item i').style.color = "lightgreen";
})
.catch(function(e) {
console.log("error", e);
statusTextEl.innerText = "Offline";
statusTextEl.style.color = "#ffcdd2";
document.querySelector('#connection-status-item i').style.color = "#ffcdd2";
});
}
updateConnectionStatus();
setInterval(updateConnectionStatus, 10000);
});
// navbar dropdown menu handler
document.addEventListener('DOMContentLoaded', function () {
const dropdownToggles = document.querySelectorAll('.new-design-navbar .dropdown-toggle');
dropdownToggles.forEach(function (toggle) {
const menu = toggle.nextElementSibling;
if (!menu || !menu.classList.contains('dropdown-menu')) {
// console.warn('Dropdown menu not found or incorrectly structured for toggle:', toggle);
return;
}
toggle.addEventListener('click', function (event) {
event.preventDefault();
event.stopPropagation();
const isCurrentlyOpen = menu.classList.contains('show');
const allMenusInNavbar = toggle.closest('.new-design-navbar').querySelectorAll('.dropdown-menu');
allMenusInNavbar.forEach(function(otherMenu) {
if (otherMenu !== menu && otherMenu.classList.contains('show')) {
otherMenu.classList.remove('show');
const otherToggle = otherMenu.previousElementSibling;
if (otherToggle && otherToggle.classList.contains('dropdown-toggle')) {
otherToggle.setAttribute('aria-expanded', 'false');
}
}
});
if (isCurrentlyOpen) {
menu.classList.remove('show');
toggle.setAttribute('aria-expanded', 'false');
} else {
menu.classList.add('show');
toggle.setAttribute('aria-expanded', 'true');
}
});
});
});
// close dropdown menu when click away
document.addEventListener('click', function (event) {
const openMenus = document.querySelectorAll('.new-design-navbar .dropdown-menu.show');
openMenus.forEach(function(menu) {
const toggle = menu.previousElementSibling;
if (!menu.contains(event.target) && toggle && !toggle.contains(event.target)) {
menu.classList.remove('show');
if (toggle.classList.contains('dropdown-toggle')) {
toggle.setAttribute('aria-expanded', 'false');
}
}
});
});
</script> </script>
<% end %>

188
public/500.html
View File

@@ -1,66 +1,134 @@
<!DOCTYPE html> <!doctype html>
<html> <html lang="en">
<head> <head>
<title>We're sorry, but something went wrong (500)</title> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style> <title>Server Error - 500</title>
body { <style>
background-color: #EFEFEF; * {
color: #2E2F30; margin: 0;
text-align: center; padding: 0;
font-family: arial, sans-serif; box-sizing: border-box;
margin: 0; font-family:
} -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
}
div.dialog { body {
width: 95%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
max-width: 33em; min-height: 100vh;
margin: 4em auto 0; display: flex;
} align-items: center;
justify-content: center;
padding: 20px;
}
div.dialog > div { .error-container {
border: 1px solid #CCC; background: rgba(255, 255, 255, 0.95);
border-right-color: #999; border-radius: 20px;
border-left-color: #999; padding: 40px;
border-bottom-color: #BBB; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border-top: #B00100 solid 4px; text-align: center;
border-top-left-radius: 9px; max-width: 600px;
border-top-right-radius: 9px; width: 100%;
background-color: white; transition: transform 0.3s ease;
padding: 7px 12% 0; }
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
}
h1 { .error-container:hover {
font-size: 100%; transform: translateY(-5px);
color: #730E15; }
line-height: 1.5em;
}
div.dialog > p { .error-icon {
margin: 0 0 1em; font-size: 80px;
padding: 1em; color: #ef4444;
background-color: #F7F7F7; margin-bottom: 20px;
border: 1px solid #CCC; animation: pulse 1.5s infinite;
border-right-color: #999; }
border-left-color: #999;
border-bottom-color: #999;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-color: #DADADA;
color: #666;
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
}
</style>
</head>
<body> h1 {
<!-- This file lives in public/500.html --> color: #1a1a1a;
<div class="dialog"> font-size: 2.5em;
<div> margin-bottom: 15px;
<h1>We're sorry, but something went wrong.</h1> }
</div>
<p>If you are the application owner check the logs for more information.</p> p {
</div> color: #4a5568;
</body> font-size: 1.1em;
line-height: 1.6;
margin-bottom: 30px;
}
.home-button {
display: inline-block;
background: #4f46e5;
color: white;
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
margin-top: 20px;
}
.home-button:hover {
background: #4338ca;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@media (max-width: 480px) {
.error-container {
padding: 25px;
}
h1 {
font-size: 2em;
}
p {
font-size: 1em;
}
}
</style>
</head>
<body>
<div class="error-container">
<div class="error-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="80"
height="80"
viewBox="0 0 24 24"
fill="none"
stroke="#ef4444"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12" y2="16" />
</svg>
</div>
<h1>Internal Server Error</h1>
<p>Something went wrong.</p>
<p>
Please try again later or contact support if the problem
persists.
</p>
<a href="/" class="home-button">Return to Homepage</a>
</div>
</body>
</html> </html>