github.com/shoshinnikita/budget-manager@v0.7.1-0.20220131195411-8c46ff1c6778/templates/error_page.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3  
     4  <head>
     5  	<meta charset="UTF-8">
     6  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
     7  	<title>Error | Budget Manager</title>
     8  
     9  	<!-- Theme Switcher -->
    10  	<script src="{{ asStaticURL `/static/js/theme-switcher.js` }}"></script>
    11  
    12  	<link rel="stylesheet" href="{{ asStaticURL `/static/css/common.css` }}">
    13  
    14  	<style>
    15  		#app {
    16  			min-width: unset;
    17  		}
    18  
    19  		#error {
    20  			margin: auto;
    21  			padding-top: 50px;
    22  			width: 750px;
    23  		}
    24  
    25  		#error__oops {
    26  			text-align: center;
    27  		}
    28  
    29  		#error__oops__icon>svg {
    30  			height: 100px;
    31  			opacity: 0.8;
    32  			width: 100px;
    33  		}
    34  
    35  		#error__oops__message {
    36  			font-size: 45px;
    37  		}
    38  
    39  		#error__details {
    40  			margin-top: 30px;
    41  		}
    42  
    43  		#error__details * {
    44  			color: var(--font-color--faded);
    45  		}
    46  
    47  		#error__details__code {
    48  			font-size: 30px;
    49  			margin-bottom: 5px;
    50  			text-align: center;
    51  		}
    52  
    53  		#error__details__info {
    54  			border-left: 3px solid var(--border-color--accent);
    55  			font-size: 20px;
    56  			margin: auto;
    57  			max-width: 70%;
    58  			padding: 10px 0 10px 10px;
    59  			width: max-content;
    60  		}
    61  
    62  		#links {
    63  			font-size: 25px;
    64  			margin: 50px auto;
    65  			text-align: center;
    66  			width: max-content;
    67  		}
    68  
    69  		#links__github br {
    70  			display: none;
    71  		}
    72  
    73  		@media (max-width: 750px) {
    74  			#error {
    75  				width: 100%;
    76  			}
    77  
    78  			#error__oops__icon {
    79  				margin-top: 10px;
    80  			}
    81  
    82  			#error__oops__icon>svg {
    83  				height: 50px;
    84  				width: 50px;
    85  			}
    86  
    87  			#error__oops__message {
    88  				font-size: 30px;
    89  			}
    90  
    91  			#error__details {
    92  				margin-top: 15px;
    93  			}
    94  
    95  			#error__details__code {
    96  				font-size: 25px;
    97  			}
    98  
    99  			#error__details__info {
   100  				font-size: 18px;
   101  				max-width: 90%;
   102  			}
   103  
   104  			#links__github br {
   105  				display: block;
   106  			}
   107  		}
   108  	</style>
   109  </head>
   110  
   111  <body>
   112  	<div id="app">
   113  		<!-- Header -->
   114  		<div></div>
   115  
   116  		<div id="content">
   117  			<div id="error">
   118  				<div id="error__oops">
   119  					<div id="error__oops__icon" class="feather-icon">
   120  						{{ template "components/icon" "alert-circle" }}
   121  					</div>
   122  					<div id="error__oops__message" class="noselect">Oops! Something went wrong</div>
   123  				</div>
   124  
   125  				<div id="error__details">
   126  					<div id="error__details__code" title="Status Code">{{ .Code }}</div>
   127  
   128  					<div id="error__details__info">
   129  						<div id="error__details__info__message" title="Error message">{{ .Message }}</div>
   130  						<br>
   131  						<div id="error__details__info__request-id">
   132  							<span>Request ID:</span>
   133  							<span title="Request ID">{{ .RequestID }}</span>
   134  						</div>
   135  					</div>
   136  				</div>
   137  			</div>
   138  
   139  			<div id="links">
   140  				<a href="/">Go to the current Month</a>
   141  				<span id="links__github">
   142  					<br>
   143  					<span>or</span>
   144  					<br>
   145  					<a href="https://github.com/ShoshinNikita/budget-manager/issues">Create an issue</a>
   146  				</span>
   147  			</div>
   148  		</div>
   149  
   150  		{{ template "components/footer.html" .Footer }}
   151  	</div>
   152  </body>
   153  
   154  </html>