Skip to content
Snippets Groups Projects
Commit c4610c5e authored by Xiao Gui's avatar Xiao Gui
Browse files

maint: added js disabled page

parent b6a6fa12
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
docs/releases/v2.13.0.md
+ 1
− 0
View file @ c4610c5e
......@@ -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
......
src/index.html
+ 97
− 0
View file @ c4610c5e
......@@ -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">&bull;</span>
......
src/notSupportedCmp/notSupported.template.html
+ 7
− 4
View file @ c4610c5e
......@@ -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">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment