diff --git a/docs/releases/v2.13.0.md b/docs/releases/v2.13.0.md
index da2c2728ad5abc795bd876ba33f8c7840526f88b..d3841b7f177b9147352d3982b5c5a9e810727578 100644
--- a/docs/releases/v2.13.0.md
+++ b/docs/releases/v2.13.0.md
@@ -7,6 +7,7 @@
- disable surface face selection (until it becomes fully supported)
- allow feature to be downloaded
- main download button also downloads selected feature
+- added javascript disabled page
## Behind the scene
diff --git a/src/index.html b/src/index.html
index 02770ccacd9833b4e1d57e498e1e109593e25efe..c26d5c215640e69d1ca5ee0df1e33e8ad8802524 100644
--- a/src/index.html
+++ b/src/index.html
@@ -22,6 +22,103 @@
<title>Siibra Explorer</title>
</head>
<body>
+ <noscript>
+ <div class="jumbotron bg-light text-center mb-0">
+ <div>
+ <h1 class="mb-3">
+ <i class="fas fa-exclamation-triangle"></i> Javascript disabled
+ </h1>
+ <p>
+ siibra-explorer requires javascript to be enabled.
+ Please <a href="https://support.google.com/adsense/answer/12654?hl=en" alt="Link to enable javascript in Chrome browser"> enable javascript</a>.
+ </p>
+
+ </div>
+ </div>
+
+ <section class="carousel-anchors">
+ <a href="#img-1"></a>
+ <a href="#img-2"></a>
+ <a href="#img-3"></a>
+ </section>
+ <section class="carousel-viewport">
+ <div class="carousel">
+ <div class="img-container" id="img-1">
+ <span class="label">Preview of Julich Brain Cytoarchitectonic map in MNI Colin 27 space</span>
+ <img src="assets/images/1.png" alt="Preview of Julich Brain Cytoarchitectonic map in MNI Colin 27 space">
+ </div>
+ <div class="img-container" id="img-2">
+ <span class="label">Preview of Big Brain 2015 Release</span>
+ <img src="assets/images/2.png" alt="Preview of Big Brain 2015 Release">
+ </div>
+ <div class="img-container" id="img-3">
+ <span class="label">Preview of Waxholm Rat V2.0</span>
+ <img src="assets/images/3.png" alt="Preview of Waxholm Rat V2.0">
+ </div>
+ </div>
+ </section>
+
+ <style>
+ .carousel-anchors
+ {
+ display: flex;
+ justify-content: center;
+ }
+ .carousel-anchors a
+ {
+ display: inline-block;
+ margin: 1rem;
+ width: 1rem;
+ height: 1rem;
+ border-radius: 50%;
+ background-color: rgba(128,128,128, 1);
+ opacity: 0.5;
+ }
+
+ .carousel-anchors a:hover
+ {
+ opacity: 1;
+ }
+
+ .carousel-viewport
+ {
+ width: 100rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .carousel
+ {
+ display: flex;
+
+ overflow-x: auto;
+ scroll-snap-type: x mandatory;
+
+ scroll-behavior: smooth;
+ -webkit-overflow-scrolling: touch;
+ }
+ .carousel .img-container
+ {
+ scroll-snap-align: start;
+ flex: 0 0 100rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .carousel .label
+ {
+ margin: 2rem;
+ }
+ .carousel .img-container img
+ {
+ max-width: 100%;
+ max-height: 50dvh;
+ }
+ atlas-viewer
+ {
+ display: none;
+ }
+ </style>
+ </noscript>
<atlas-viewer>
<h1 class="text-center loadingIndicator" id="iav-inner">
<span class="homeAnimationDots loadingAnimationDots">•</span>
diff --git a/src/notSupportedCmp/notSupported.template.html b/src/notSupportedCmp/notSupported.template.html
index 3a6b141b3f74abca4a63153bd376439901a3cca1..db0d8020b24ace07d3e798df155ba118074aaecb 100644
--- a/src/notSupportedCmp/notSupported.template.html
+++ b/src/notSupportedCmp/notSupported.template.html
@@ -4,10 +4,13 @@
<i class="fas fa-exclamation-triangle"></i> Unsupported browser detected
</h1>
<p>
- We recommend using the latest version of <a target="_blank" href="https://www.google.com/chrome/">Google
- Chrome</a>
- or <a target="_blank" href="https://www.mozilla.org/firefox/">Mozilla Firefox)</a> for viewing the interactive
- viewer.
+ We recommend using the latest version of
+ <a target="_blank" href="https://www.google.com/chrome/">Google Chrome</a>
+ <a target="_blank" href="https://www.mozilla.org/firefox/">Mozilla Firefox</a>
+ or
+ <a target="_blank" href="https://www.apple.com/safari/">Safari</a>
+
+ for viewing siibra-explorer.
</p>
<div class="col-6 d-inline-block text-left">
<readmore-component [collapsedHeight]="0">