diff --git a/examples/Deer_Mandible/histogram.png b/examples/Deer_Mandible/histogram.png
index 14da5e374c6777fee82a2fc04e4a520e009f3d8c..952b692b9ad7116b73b0ff99792c2621e00cea36 100644
Binary files a/examples/Deer_Mandible/histogram.png and b/examples/Deer_Mandible/histogram.png differ
diff --git a/examples/Loofah/Loofah_3D_Example.jpg b/examples/Loofah/Loofah_3D_Example.jpg
index 805ad785b2059776ae2d1f8276e9794bbf632e82..ab18e74a4b49938a9721745a896626ab7c743dff 100644
Binary files a/examples/Loofah/Loofah_3D_Example.jpg and b/examples/Loofah/Loofah_3D_Example.jpg differ
diff --git a/examples/Loofah/histogram.png b/examples/Loofah/histogram.png
index d910ae3db2cddb8f7462737bfe68996bb9c1f688..0bf7fcd7b220cfebe916e9d4dab3746a130c0981 100644
Binary files a/examples/Loofah/histogram.png and b/examples/Loofah/histogram.png differ
diff --git a/examples/Loofah/loofah_3D.png b/examples/Loofah/loofah_3D.png
index 9ea0ca7f4b2a179bab03d6f46e907cfcdd6ba974..2d14121c18375990a163855a723204142d524f29 100644
Binary files a/examples/Loofah/loofah_3D.png and b/examples/Loofah/loofah_3D.png differ
diff --git a/examples/Marine_Gastropods/MarineGastropod2_3D_Example.jpg b/examples/Marine_Gastropods/MarineGastropod2_3D_Example.jpg
index accf9702735b64551ca93fc031fb85a3d8e6c689..9d93c5ba2a7e615e28d5d8630f72635925ea7dc9 100644
Binary files a/examples/Marine_Gastropods/MarineGastropod2_3D_Example.jpg and b/examples/Marine_Gastropods/MarineGastropod2_3D_Example.jpg differ
diff --git a/examples/Marine_Gastropods/gastropod_3D_2.png b/examples/Marine_Gastropods/gastropod_3D_2.png
index 85060765cc06f6a3501d4f3c631b78f69a524aa2..21cbe245acc1ee3b3a53fe67281a1714a5e01c69 100644
Binary files a/examples/Marine_Gastropods/gastropod_3D_2.png and b/examples/Marine_Gastropods/gastropod_3D_2.png differ
diff --git a/index.html b/index.html
index 241496e22ba50abe6d6d67bdb69fff4e2e734469..fc9c5eaab9305e4ae0bf35449ff68216a6be6c5e 100644
--- a/index.html
+++ b/index.html
@@ -28,24 +28,6 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
<!-- First Photo Grid-->
<div class="w3-row-padding w3-padding-16">
- <div class="w3-third w3-container w3-margin-bottom">
- <a href="pages/mussel.html">
- <img src="examples/Mussel/Mussel_closed_3Dcut.jpg" style="width:100%" class="w3-hover-opacity">
- </a>
- <div class="w3-container w3-white">
- <p><b>Closed Mussel</b></p>
- <p>Vacuum packed closed clam from an (expired) instant soup.</p>
- </div>
- </div>
- <div class="w3-third w3-container w3-margin-bottom">
- <a href="pages/foam.html">
- <img src="examples/Foam/Foam_3D_Example.jpg" style="width:100%" class="w3-hover-opacity">
- </a>
- <div class="w3-container w3-white">
- <p><b>Packing Foam</b></p>
- <p>Packing material plastic foam.</p>
- </div>
- </div>
<div class="w3-third w3-container w3-margin-bottom">
<a href="pages/coal.html">
<img src="examples/Coal/Coal_Zoom_Example.jpg" style="width:100%" class="w3-hover-opacity">
@@ -55,10 +37,7 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
<p>Coal brikett from a bag of BBQ coal.</p>
</div>
</div>
- </div>
- <!-- Second Photo Grid-->
- <div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<a href="pages/corals.html">
<img src="examples/Corals/MexCoral_3D.png" style="width:100%" class="w3-hover-opacity">
@@ -78,7 +57,10 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
<p>Shell of a cowry sea snail.</p>
</div>
</div>
+ </div>
+ <!-- Second Photo Grid-->
+ <div class="w3-row-padding w3-padding-16">
<div class="w3-third w3-container w3-margin-bottom">
<a href="pages/crab.html">
<img src="examples/Crab/CrabOkinawa_Transparent.jpg" style="width:100%" class="w3-hover-opacity">
@@ -88,8 +70,95 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
<p>Small crab thorax with some legs attached.</p>
</div>
</div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <a href="pages/deer_mandible.html">
+ <img src="examples/Deer_Mandible/DeerMandible_3Dexample.jpg" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Deer Mandible</b></p>
+ </a>
+ <p>Mandible of deer with some teeth.</p>
+ </div>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <a href="pages/foam.html">
+ <img src="examples/Foam/Foam_3D_Example.jpg" style="width:100%" class="w3-hover-opacity">
+ </a>
+ <div class="w3-container w3-white">
+ <p><b>Packing Foam</b></p>
+ <p>Packing material plastic foam.</p>
+ </div>
+ </div>
</div>
+ <!-- Third Photo Grid-->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <a href="pages/hourglass.html">
+ <img src="examples/Hourglass/Hourglass_3D.png" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Hourglass</b></p>
+ </a>
+ <p>Scans of Hourglass filled with sand</p>
+ </div>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <a href="pages/kiwi.html">
+ <img src="examples/Kiwi/kiwi_3D.png" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Kiwi</b></p>
+ </a>
+ <p>Scan of a small Kiwi</p>
+ </div>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <a href="pages/loofah.html">
+ <img src="examples/Loofah/Loofah_3D_Example.jpg" style="width:100%" class="w3-hover-opacity">
+ </a>
+ <div class="w3-container w3-white">
+ <p><b>Loofah</b></p>
+ <p>Part of a dried cucumber like vegetable used as scrubbing sponge.</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Fourth Photo Grid-->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <a href="pages/marine_gastropods.html">
+ <img src="examples/Marine_Gastropods/MarineGastropod1_3D_Example.jpg" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Marine Gastropods</b></p>
+ </a>
+ <p>Small sea snail (gastropod) shells</p>
+ </div>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <a href="pages/mussel.html">
+ <img src="examples/Mussel/Mussel_closed_3Dcut.jpg" style="width:100%" class="w3-hover-opacity">
+ </a>
+ <div class="w3-container w3-white">
+ <p><b>Closed Mussel</b></p>
+ <p>Vacuum packed closed clam from an (expired) instant soup.</p>
+ </div>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <a href="pages/oak_branch.html">
+ <img src="examples/Oak_Branch/oakbranch_3D.png" style="width:100%" class="w3-hover-opacity">
+ </a>
+ <div class="w3-container w3-white">
+ <p><b>Oak Branch</b></p>
+ <p>Small oak branch.</p>
+ </div>
+ </div>
+ </div>
+
+
<!-- Example Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
diff --git a/pages/deer_mandible.html b/pages/deer_mandible.html
new file mode 100644
index 0000000000000000000000000000000000000000..01be4f0bc051589eea9fbc8d7bdf2d24223454b0
--- /dev/null
+++ b/pages/deer_mandible.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="../favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Deer_Mandible/DeerMandible_3D_2.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of Deer mandible</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Deer_Mandible/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal Slices of Deer Mandible</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Mandible (jaw bone) of deer with some teeth. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ <hr>
+ </div>
+
+ <!-- Ack -->
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Acknowledgements</b></h4>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ <!-- </div> -->
+
+ <h4>Versions</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-half w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Deer Mandible Full</li>
+ <li class="w3-padding-16">32-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 167.8 μm</li>
+ <li class="w3-padding-16">Dimensions: 1000x1000x750</li>
+ <li class="w3-padding-16">File size: 2.79GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-half">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Deer Mandible Downsampled</li>
+ <li class="w3-padding-16">16-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 167.8 μm</li>
+ <li class="w3-padding-16">Dimensions: 500x500x375</li>
+ <li class="w3-padding-16">File size: 638MB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End of tables -->
+
+ <!-- Cross sections -->
+ <h4>Cross sections of data</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Deer_Mandible/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Deer Mandible full</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Deer_Mandible/single_view_DOWNSAMPLED.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Deer Mandible Downsampled</p>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Additional Images -->
+ <!-- Row 1 -->
+ <h4>Additional Images</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Deer_Mandible/same_direction.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Multiple slices of Deer Mandible along same axis</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Deer_Mandible/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of Deer Mandible data</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Row 2 -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Deer_Mandible/DeerMandible_3D_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of Deer Mandible</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Deer_Mandible/DeerMandible_3D_3.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of Deer Mandible</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Deer_Mandible/single_view_x.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Deer Mandible on x-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Deer_Mandible/single_view_y.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Deer Mandible on y-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Deer_Mandible/single_view_z.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Deer Mandible on z-axis</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/pages/hourglass.html b/pages/hourglass.html
new file mode 100644
index 0000000000000000000000000000000000000000..a298fc7b3a1b80f6b8681f3adf05ab3e6cbb0dab
--- /dev/null
+++ b/pages/hourglass.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="../favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Hourglass/Hourglass_DenseParticles.jpg" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Slice of Hourglass with dense particles</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Hourglass/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal Slices of Hourglass</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Central region of an hourglass showing the sand grains. Sand filled hour glass. Longer scan of above.</p>
+ <hr>
+ </div>
+
+ <!-- Ack -->
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Acknowledgements</b></h4>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ <!-- </div> -->
+
+ <h4>Versions</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Hourglass</li>
+ <li class="w3-padding-16">32-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 1.97 μm</li>
+ <li class="w3-padding-16">Dimensions: 1000x1000x1000</li>
+ <li class="w3-padding-16">File size: 3.72GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Hourglass_4X-80kV-Air-9s-1_97um</li>
+ <li class="w3-padding-16">16-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 7.2 μm</li>
+ <li class="w3-padding-16">Dimensions: 994x1014x976</li>
+ <li class="w3-padding-16">File size: 1.83GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Hourglass_longexp</li>
+ <li class="w3-padding-16">32-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 8.2 μm</li>
+ <li class="w3-padding-16">Dimensions: 1000x1000x1000</li>
+ <li class="w3-padding-16">File size: 3.72GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End of tables -->
+
+ <!-- Cross sections -->
+ <h4>Cross sections of data</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Hourglass/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Hourglass</p>
+ </div>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Hourglass/single_view_2.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Hourglass_4X-80kV-Air-9s-1_97um</p>
+ </div>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Hourglass/single_view_3.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Hourglass_longexp</p>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Additional Images -->
+ <!-- Row 1 -->
+ <h4>Additional Images</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Hourglass/same_direction.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Multiple slices of Hourglass along same axis</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Hourglass/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of Hourglass data</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Row 2 -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Hourglass/single_view_x.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Hourglass on x-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Hourglass/single_view_y.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Hourglass on y-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Hourglass/single_view_z.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Hourglass on z-axis</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/pages/kiwi.html b/pages/kiwi.html
new file mode 100644
index 0000000000000000000000000000000000000000..11a27b1598d1cd364c2ae863d8d4adb2a0225433
--- /dev/null
+++ b/pages/kiwi.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="../favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Kiwi/kiwi_slice.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Slice of Kiwi</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Kiwi/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal Slices of Kiwi</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ </div>
+
+ <!-- Ack -->
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Acknowledgements</b></h4>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ <!-- </div> -->
+
+ <h4>Versions</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-half w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Kiwi</li>
+ <li class="w3-padding-16">32-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: xx μm</li>
+ <li class="w3-padding-16">Dimensions: 1000x800x800</li>
+ <li class="w3-padding-16">File size: 2.86GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End of tables -->
+
+ <!-- Cross sections -->
+ <h4>Cross sections of data</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Kiwi/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Kiwi</p>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Additional Images -->
+
+ <h4>Additional Images</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Kiwi/same_direction.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Multiple slices of Kiwi along same axis</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Kiwi/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of Kiwi data</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Kiwi/single_view_x.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Kiwi on x-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Kiwi/single_view_y.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Kiwi on y-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Kiwi/single_view_z.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Kiwi on z-axis</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/pages/loofah.html b/pages/loofah.html
new file mode 100644
index 0000000000000000000000000000000000000000..b4a8689a9d6f8ce63058313c8c60b33fe1a2c544
--- /dev/null
+++ b/pages/loofah.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="../favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Loofah/loofah_3D_2.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of Loofah</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Loofah/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal Slices of Loofah</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Part of a dried cucumber like vegetable used as scrubbing sponge.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ </div>
+
+ <!-- Ack -->
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Acknowledgements</b></h4>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ <!-- </div> -->
+
+ <h4>Versions</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-half w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Loofah Full</li>
+ <li class="w3-padding-16">32-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 57.6 μm</li>
+ <li class="w3-padding-16">Dimensions: 1000x1000x600</li>
+ <li class="w3-padding-16">File size: 2.23GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-half">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Loofah Downsampled</li>
+ <li class="w3-padding-16">16-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 57.6 μm</li>
+ <li class="w3-padding-16">Dimensions: 500x500x300</li>
+ <li class="w3-padding-16">File size: 143MB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End of tables -->
+
+ <!-- Cross sections -->
+ <h4>Cross sections of data</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Loofah/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Loofah full</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Loofah/single_view_DOWNSAMPLED.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Loofah downsampled</p>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Additional Images -->
+ <!--Row 1 -->
+ <h4>Additional Images</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Loofah/same_direction.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Multiple slices of Loofah along same axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Loofah/loofah_3D.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of Loofah</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Loofah/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of Loofah data</p>
+ </div>
+ </div>
+ </div>
+
+ <!--Row 2 -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Loofah/single_view_x.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Loofah on x-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Loofah/single_view_y.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Loofah on y-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Loofah/single_view_z.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Loofah on z-axis</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/pages/marine_gastropods.html b/pages/marine_gastropods.html
new file mode 100644
index 0000000000000000000000000000000000000000..cdaabb32927c041c5cb863723b2fac422ff3fba8
--- /dev/null
+++ b/pages/marine_gastropods.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="../favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/gastropod_3D_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of Marine Gastropod</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal Slices of Marine Gastropod</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Small sea snail (gastropod) shell.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ </div>
+
+ <!-- Ack -->
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Acknowledgements</b></h4>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ <!-- </div> -->
+
+ <h4>Versions</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-quarter w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Marine Gastropod 1</li>
+ <li class="w3-padding-16">32-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 39.5 μm</li>
+ <li class="w3-padding-16">Dimensions: 1000x1000x600</li>
+ <li class="w3-padding-16">File size: 2.23GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-quarter">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Marine Gastropod 1 Downsampled</li>
+ <li class="w3-padding-16">16-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 39.5 μm</li>
+ <li class="w3-padding-16">Dimensions: 500x500x300</li>
+ <li class="w3-padding-16">File size: 143MB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-quarter w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Marine Gastropod 2</li>
+ <li class="w3-padding-16">32-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 79.8 μm</li>
+ <li class="w3-padding-16">Dimensions: 1000x1000x700</li>
+ <li class="w3-padding-16">File size: 2.60GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-quarter">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Marine Gastropod 2 Downsampled</li>
+ <li class="w3-padding-16">16-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 79.8 μm</li>
+ <li class="w3-padding-16">Dimensions: 500x500x350</li>
+ <li class="w3-padding-16">File size: 166MB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End of tables -->
+
+ <!-- Cross sections -->
+ <h4>Cross sections of data</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Marine Gastropod 1</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/single_view_1_DOWNSAMPLED.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Marine Gastropod 1 downsampled</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/single_view_2.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Marine Gastropod 2</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/single_view_2_DOWNSAMPLED.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Marine Gastropod 2 downsampled</p>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Additional Images -->
+ <!-- Row 1 -->
+ <h4>Additional Images</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/same_direction.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Multiple slices of Marine Gastropod along same axis</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/gastropod_3D_2.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of Matrine Gastropod 1</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/MarineGastropod2_3D_Example.jpg" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of Matrine Gastropod 2</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of Marine Gastropod data</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Row 2 -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/single_view_x.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Marine Gastropod on x-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/single_view_y.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Marine Gastropod on y-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Marine_Gastropods/single_view_z.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Marine Gastropod on z-axis</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/pages/oak_branch.html b/pages/oak_branch.html
new file mode 100644
index 0000000000000000000000000000000000000000..37eeccd585f3d9409a788efe5c1fd0b584e5abd5
--- /dev/null
+++ b/pages/oak_branch.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="../favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Oak_Branch/Oak_3D_Example.jpg" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of Oak Branch</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Oak_Branch/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal Slices of Oak Branch</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Small oak branch from DTU Campus.</p>
+ <hr>
+ </div>
+
+ <!-- Ack -->
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Acknowledgements</b></h4>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ <!-- </div> -->
+
+ <h4>Versions</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-half w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Oak Branch Full</li>
+ <li class="w3-padding-16">32-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 28.6 μm</li>
+ <li class="w3-padding-16">Dimensions: 8000x800x1000</li>
+ <li class="w3-padding-16">File size: 2.38GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-half">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Oak Branch Downsampled</li>
+ <li class="w3-padding-16">16-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 28.6 μm</li>
+ <li class="w3-padding-16">Dimensions: 400x400x500</li>
+ <li class="w3-padding-16">File size: 152MB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End of tables -->
+
+ <!-- Cross sections -->
+ <h4>Cross sections of data</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Oak_Branch/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Oak Branch full</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Oak_Branch/single_view_DOWNSAMPLED.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Oak Branch downsampled</p>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Additional Images -->
+ <!-- Row 1 -->
+ <h4>Additional Images</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Oak_Branch/same_direction.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Multiple slices of Oak Branch along same axis</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Oak_Branch/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of Oak Branch data</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Row 2 -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Oak_Branch/single_view_x.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Oak Branch on x-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Oak_Branch/single_view_y.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Oak Branch on y-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Oak_Branch/single_view_z.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Oak Branch on z-axis</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>