Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ yarn.lock
.yarn/releases/

# wwwroot
wwwroot/help/
wwwroot/public/
wwwroot/*.html

Expand Down
139 changes: 47 additions & 92 deletions wwwroot/404.html
Original file line number Diff line number Diff line change
@@ -1,95 +1,50 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The NationalMap - not found</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/public/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
<link href="/public/css/custom.css" rel="stylesheet" type="text/css" media="all"/>
<link href='//fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<style>
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
}
</style>
<!-- TODO: Complete this project :) -->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="about.html"><img src="/public/img/nm-logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="about.html">About National Map</a></li>
<li ><a href="help/howto.html">Help &amp; FAQ</a></li>
<li ><a href="privacy.html">Privacy</a></li>
<li><a href="http://nationalmap.gov.au">Launch the National Map</a></li>
</ul>

</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">


<div class="starter-template">
<div class="row">
<div class="col-md-2">
<img height="105" class="logo center-block" src="/public/img/pmc-stacked.jpg" style="opacity:0.6" alt="Logo of Department of the Prime Minister and Cabinet"><!-- match desaturated GA logo. -->
<img height="80" class="logo center-block" src="/public/img/GA-dark.png" alt="Logo of Geoscience Australia">
<img height="80" class="logo center-block" src="/public/img/data61-white.jpg" alt="Logo of Data61/CSIRO">
<img height="140" class="logo center-block" src="/public/img/iawards.png" alt="Logo of iAwards">
<img width="160" class="logo center-block" src="/public/img/Finalist-Innovation.gif" alt="Finalist in Innovation at CeBIT AU Business Awards 2015">
</div>
<div class="col-md-9">

<h2>That page doesn't seem to be here</h2>
<p>The page you're looking for doesn't seem to exist. If you think this is an error, please send an email to <a href="mailto:data@pmc.gov.au">data@pmc.gov.au</a>.</p>
<p><b>&larr; Return to <a href="/">NationalMap</a></b>.
<div style="font-size: 300px; color: lightgray; text-align:center">404</div>


</div>
</div>


</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="col-lg-12">
<p>&copy; Department of the Prime Minister and Cabinet, Department of Communications, and National ICT Australia Limited (NICTA) 2014-2015. All Rights Reserved.</p>
<p>
<strong><a href="#terms">Terms and conditions</a></strong>
<strong><a href="privacy.html">Privacy</a></strong>
</p>
</div>
<head>
<meta charset="utf-8" />
<title>TerriaJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link
href="//fonts.googleapis.com/css?family=Roboto:300,600"
rel="stylesheet"
type="text/css"
/>
<style>
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
color: #111827;
}
.error-number {
font-family: inherit;
font-size: 2.5rem;
font-weight: 600;
line-height: 1.2;
margin: 0;
padding-right: 1rem;
border-right: 1px solid #dee2e6;
}
.error-description {
font-family: inherit;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.2;
margin: 0;
}
</style>
</head>
<body>
<h1 class="error-number">404</h1>
<div class="inline-block align-middle">
<h2 class="error-description" id="desc">Not found.</h2>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment about no period in heading and providing a clickable link to somewhere reasonable as for the 500 page.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my comment above about keeping it all minimal.
The punctuation here makes sense as it renders as in the picture below.
Screenshot 2025-07-30 at 1 43 40 PM

</div>
</footer>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function () {
if (location.hash) {
location.hash && $(location.hash + '.collapse').collapse('show');
}
});
</script>
<script src="/public/js/bootstrap.min.js"></script>
</body>
</body>
</html>
136 changes: 46 additions & 90 deletions wwwroot/500.html
Original file line number Diff line number Diff line change
@@ -1,94 +1,50 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>500 - Internal server error</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/public/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
<link href="/public/css/custom.css" rel="stylesheet" type="text/css" media="all"/>
<link href='//fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<style>
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
}
</style>
<!-- TODO: Complete this project :) -->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="about.html"><img src="/public/img/nm-logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="about.html">About National Map</a></li>
<li ><a href="help/howto.html">Help &amp; FAQ</a></li>
<li ><a href="privacy.html">Privacy</a></li>
<li><a href="http://nationalmap.gov.au">Launch the National Map</a></li>
</ul>
<head>
<meta charset="utf-8" />
<title>TerriaJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

</div>
<!-- /.navbar-collapse -->
<link
href="//fonts.googleapis.com/css?family=Roboto:300,600"
rel="stylesheet"
type="text/css"
/>
<style>
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
color: #111827;
}
.error-number {
font-family: inherit;
font-size: 2.5rem;
font-weight: 600;
line-height: 1.2;
margin: 0;
padding-right: 1rem;
border-right: 1px solid #dee2e6;
}
.error-description {
font-family: inherit;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.2;
margin: 0;
}
</style>
</head>
<body>
<h1 class="error-number">500</h1>
<div class="inline-block align-middle">
<h2 class="error-description" id="desc">Internal server error.</h2>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think headings are typically without punctuation like periods/question marks/etc.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my comment for the 400.html page.

</div>
<!-- /.container -->
</nav>
<div class="container">


<div class="starter-template">
<div class="row">
<div class="col-md-2">
<img height="105" class="logo center-block" src="/public/img/pmc-stacked.jpg" style="opacity:0.6" alt="Logo of Department of the Prime Minister and Cabinet"><!-- match desaturated GA logo. -->
<img height="80" class="logo center-block" src="/public/img/GA-dark.png" alt="Logo of Geoscience Australia">
<img height="80" class="logo center-block" src="/public/img/data61-white.jpg" alt="Logo of Data61/CSIRO">
<img height="140" class="logo center-block" src="/public/img/iawards.png" alt="Logo of iAwards">
<img width="160" class="logo center-block" src="/public/img/Finalist-Innovation.gif" alt="Finalist in Innovation at CeBIT AU Business Awards 2015">
</div>
<div class="col-md-9">

<h2>Internal server error</h2>
<p>Something went wrong on our server. Please send an email to <a href="mailto:data@pmc.gov.au">data@pmc.gov.au</a>, explaining what you were doing at the time it happened. This will help us track down the cause.</p>
<p><b>&larr; Return to <a href="/">NationalMap</a></b>.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this line be retained so the user has something to click on to get to somewhere that at least doesn't give an error page? I guess the destination should be made more generic though, perhaps just calling it "the map"?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that we want to leave the design and the content decisions about 400.html and 500.html pages up to a particular implementation, so it makes sense to keep them very minimal.

<div style="font-size: 300px; color: hsl(0, 100%, 85%); text-align:center">500</div>


</div>
</div>

</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="col-lg-12">
<p>&copy; Department of the Prime Minister and Cabinet, Department of Communications, and National ICT Australia Limited (NICTA) 2014-2015. All Rights Reserved.</p>
<p>
<strong><a href="#terms">Terms and conditions</a></strong>
<strong><a href="privacy.html">Privacy</a></strong>
</p>
</div>
</div>
</footer>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function () {
if (location.hash) {
location.hash && $(location.hash + '.collapse').collapse('show');
}
});
</script>
<script src="/public/js/bootstrap.min.js"></script>
</body>
</body>
</html>
Loading