diff --git a/examples/Coal/Coal_Zoom_Example.jpg b/examples/Coal/Coal_Zoom_Example.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0d20d7503f8129821957f7fbfb4b4db16f604416
Binary files /dev/null and b/examples/Coal/Coal_Zoom_Example.jpg differ
diff --git a/examples/Coal/histogram.png b/examples/Coal/histogram.png
new file mode 100644
index 0000000000000000000000000000000000000000..3bf9268159139a730445b232fea0b8ec340cf2e6
Binary files /dev/null and b/examples/Coal/histogram.png differ
diff --git a/examples/Coal/orthogonal_slices.png b/examples/Coal/orthogonal_slices.png
new file mode 100644
index 0000000000000000000000000000000000000000..b78bad56ab277cc1dad981f6db3dc0c9663d64eb
Binary files /dev/null and b/examples/Coal/orthogonal_slices.png differ
diff --git a/examples/Coal/same_direction.png b/examples/Coal/same_direction.png
new file mode 100644
index 0000000000000000000000000000000000000000..304231a9128bd4d8e8fba1d65a5305d64aa83e98
Binary files /dev/null and b/examples/Coal/same_direction.png differ
diff --git a/examples/Coal/single_view.png b/examples/Coal/single_view.png
new file mode 100644
index 0000000000000000000000000000000000000000..18f0f24222e23787586a43d075b1e655a064aad1
Binary files /dev/null and b/examples/Coal/single_view.png differ
diff --git a/examples/Coal/single_view_downsampled.png b/examples/Coal/single_view_downsampled.png
new file mode 100644
index 0000000000000000000000000000000000000000..1820f80f56f3ad6f6ab5d5cd58dffa61d3533a27
Binary files /dev/null and b/examples/Coal/single_view_downsampled.png differ
diff --git a/examples/Coal/single_view_zoom.png b/examples/Coal/single_view_zoom.png
new file mode 100644
index 0000000000000000000000000000000000000000..587f585de0a5b1875f55f3502f5b5827ecd1d1cf
Binary files /dev/null and b/examples/Coal/single_view_zoom.png differ
diff --git a/examples/Foam/Foam2_3D_Example.jpg b/examples/Foam/Foam2_3D_Example.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fc2daf70db42762887e61728440513c6ac985b72
Binary files /dev/null and b/examples/Foam/Foam2_3D_Example.jpg differ
diff --git a/examples/Foam/Foam_3D_Example.jpg b/examples/Foam/Foam_3D_Example.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..476e46558656f6edb9b7a4eb304329a4144c9879
Binary files /dev/null and b/examples/Foam/Foam_3D_Example.jpg differ
diff --git a/examples/Foam/histogram.png b/examples/Foam/histogram.png
new file mode 100644
index 0000000000000000000000000000000000000000..2999fbaa058f2447dbf5c05a515c0dd60e7e3d78
Binary files /dev/null and b/examples/Foam/histogram.png differ
diff --git a/examples/Foam/orthogonal_slices.png b/examples/Foam/orthogonal_slices.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cf5041e6ae5788c8fda243a641a11a30f25d2fb
Binary files /dev/null and b/examples/Foam/orthogonal_slices.png differ
diff --git a/examples/Foam/same_direction.png b/examples/Foam/same_direction.png
new file mode 100644
index 0000000000000000000000000000000000000000..25ae44abe283873fcdbda6f1f31531eecf6a4d97
Binary files /dev/null and b/examples/Foam/same_direction.png differ
diff --git a/examples/Foam/single_view_1.png b/examples/Foam/single_view_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..2773c6f3e406d0476b63b09e8320a7c7ee1e6f64
Binary files /dev/null and b/examples/Foam/single_view_1.png differ
diff --git a/examples/Foam/single_view_2.png b/examples/Foam/single_view_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..534ef581b4bd504dfcce08e28e9b89f1d1bbd34b
Binary files /dev/null and b/examples/Foam/single_view_2.png differ
diff --git a/examples/Foam/single_view_2_zoom.png b/examples/Foam/single_view_2_zoom.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c5aaac7a98ac4c6f2348f1ece31a0bb0974ff4a
Binary files /dev/null and b/examples/Foam/single_view_2_zoom.png differ
diff --git a/examples/Foam/single_view_downsampled.png b/examples/Foam/single_view_downsampled.png
new file mode 100644
index 0000000000000000000000000000000000000000..dd3f5ec17b2c8cc2bc514697a01660a604769137
Binary files /dev/null and b/examples/Foam/single_view_downsampled.png differ
diff --git a/examples/Mussel/Mussel_closed_3Dcut.jpg b/examples/Mussel/Mussel_closed_3Dcut.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b8d54b95e20c099efcfb1b1ccb3938cbd63f7af1
Binary files /dev/null and b/examples/Mussel/Mussel_closed_3Dcut.jpg differ
diff --git a/examples/Mussel/Mussel_closed_Slice.jpg b/examples/Mussel/Mussel_closed_Slice.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..26716a44fbe5b701ae142c4352ef81ce8d580a90
Binary files /dev/null and b/examples/Mussel/Mussel_closed_Slice.jpg differ
diff --git a/examples/Mussel/histogram.png b/examples/Mussel/histogram.png
new file mode 100644
index 0000000000000000000000000000000000000000..dd8af02baef623c40e20623fd5454d2682a775d0
Binary files /dev/null and b/examples/Mussel/histogram.png differ
diff --git a/examples/Mussel/orthogonal_slices.png b/examples/Mussel/orthogonal_slices.png
new file mode 100644
index 0000000000000000000000000000000000000000..299ff9e86bb4bd2a86c83238483de452de6d217e
Binary files /dev/null and b/examples/Mussel/orthogonal_slices.png differ
diff --git a/examples/Mussel/same_direction.png b/examples/Mussel/same_direction.png
new file mode 100644
index 0000000000000000000000000000000000000000..e38144de3bbbbed31b89cedbbc78938f7fef700f
Binary files /dev/null and b/examples/Mussel/same_direction.png differ
diff --git a/examples/Mussel/single_view.png b/examples/Mussel/single_view.png
new file mode 100644
index 0000000000000000000000000000000000000000..57c81c2b02be9c64e39797198f7e812e79857125
Binary files /dev/null and b/examples/Mussel/single_view.png differ
diff --git a/examples/Mussel/single_view_downsampled.png b/examples/Mussel/single_view_downsampled.png
new file mode 100644
index 0000000000000000000000000000000000000000..890d2e4316e4f7381b6f60bd9c9068e5546c0f38
Binary files /dev/null and b/examples/Mussel/single_view_downsampled.png differ
diff --git a/examples/Mussel/slices_3d.png b/examples/Mussel/slices_3d.png
new file mode 100644
index 0000000000000000000000000000000000000000..c76d04d13f8877ab662b33c86558bb1442934484
Binary files /dev/null and b/examples/Mussel/slices_3d.png differ
diff --git a/examples/Mussel/slices_3d_2.png b/examples/Mussel/slices_3d_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..af1085b6d2ba20a3755c10c7e6d41efa3df71c91
Binary files /dev/null and b/examples/Mussel/slices_3d_2.png differ
diff --git a/examples/Mussel/volume_3d.png b/examples/Mussel/volume_3d.png
new file mode 100644
index 0000000000000000000000000000000000000000..b30d6336042ee1b822bf471b426d5bf09b3a2c9a
Binary files /dev/null and b/examples/Mussel/volume_3d.png differ
diff --git a/index.html b/index.html
index 46d552f34327aacbfcca549da43ac76167698096..5b97b22341150c16619b42983428092a36dc24e8 100644
--- a/index.html
+++ b/index.html
@@ -29,30 +29,30 @@ 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="example1.html">
- <img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
+ <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>Example</b></p>
- <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ <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="example2.html">
- <img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
+ <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>Example 2</b></p>
- <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ <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="example3.html">
- <img src="examples/placeholder_gray.png" style="width:100%" class="w3-hover-opacity">
+ <a href="pages/Coal.html">
+ <img src="examples/Coal/Coal_Zoom_Example.jpg" style="width:100%" class="w3-hover-opacity">
</a>
<div class="w3-container w3-white">
- <p><b>Example 3</b></p>
- <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ <p><b>CoalB rikett</b></p>
+ <p>Coal brikett from a bag of BBQ coal.</p>
</div>
</div>
</div>
@@ -60,6 +60,7 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
<!-- Second Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
+ <a href="example1.html">
<img src="examples/placeholder_gray.png" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
@@ -67,6 +68,7 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
+ <a href="example2.html">
<img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
@@ -74,6 +76,7 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
+ <a href="example3.html">
<img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
diff --git a/pages/Coal.html b/pages/Coal.html
new file mode 100644
index 0000000000000000000000000000000000000000..13ce5671c26908084a81c25f379cbc3aa7bb26ef
--- /dev/null
+++ b/pages/Coal.html
@@ -0,0 +1,143 @@
+<!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">
+ </div>
+
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Coal/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal Slices of Coal Brikett</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Coal brikett from a bag of BBQ coal. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ 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>
+
+ <!-- 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">Coal Brikett full</li>
+ <li class="w3-padding-16">32-bit tiff</li>
+ <li class="w3-padding-16">Dimensions: 600x1000x1000</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-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-orange w3-xlarge w3-padding-32">Coal Brikett zoom</li>
+ <li class="w3-padding-16">32-bit tiff</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">Coal Brikett downsampled</li>
+ <li class="w3-padding-16">16-bit tiff</li>
+ <li class="w3-padding-16">Dimensions: 500x500x500</li>
+ <li class="w3-padding-16">File size: 2380MB</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 -->
+
+ <!-- Additional Images -->
+ <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/Coal/single_view.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Coal Brikett full</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Coal/single_view_zoom.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Coal Brikett zoom</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Coal/single_view_downsampled.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Coal Brikett downsampled</p>
+ </div>
+ </div>
+ </div>
+
+ <h4>Additional Images</h4>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Coal/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of Coal Brickett full</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/pages/foam.html b/pages/foam.html
new file mode 100644
index 0000000000000000000000000000000000000000..8871be91528b122ce5988bf1cff757e162aaa19f
--- /dev/null
+++ b/pages/foam.html
@@ -0,0 +1,170 @@
+<!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/Foam/Foam2_3D_Example.jpg" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D example of foam data</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Foam/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal Slices</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Two different packing material plastic foam from Denmark. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ 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>
+
+ <!-- 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">Foam1 full</li>
+ <li class="w3-padding-16">32-bit tiff</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-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">Foam1 downsampled</li>
+ <li class="w3-padding-16">16-bit tiff</li>
+ <li class="w3-padding-16">Dimensions: 500x500x500</li>
+ <li class="w3-padding-16">File size: 238MB</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-orange w3-xlarge w3-padding-32">Foam2 full</li>
+ <li class="w3-padding-16">32-bit tiff</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-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">Foam2 zoom</li>
+ <li class="w3-padding-16">32-bit tiff</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 -->
+
+ <!-- Additional Images -->
+ <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/Foam/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Foam1 full</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Foam/single_view_downsampled.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Foam1 downsampled</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Foam/single_view_2.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Foam2 full</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Foam/single_view_2_zoom.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Foam2 zoomed</p>
+ </div>
+ </div>
+ </div>
+
+ <h4>Additional images</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Foam/same_direction.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross sections of Foam1</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="../examples/Foam/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of Foam1</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/pages/footer.js b/pages/footer.js
new file mode 100644
index 0000000000000000000000000000000000000000..c365c927d0fc98da5728ec2fa38c39c1d1f878a3
--- /dev/null
+++ b/pages/footer.js
@@ -0,0 +1,30 @@
+document.write('\
+<footer class="w3-container w3-padding-32 w3-dark-grey">\
+ <div class="w3-row-padding">\
+ <div class="w3-third">\
+ <h3>3D DATA REPOSITORY</h3>\
+ <p>QIM, October 2020.<br>\
+ Powered by <a href="https://www.w3schools.com/w3css/default.asp">w3.css</a>.</p>\
+ </div>\
+ <div class="w3-third">\
+ <h3>GET INVOLVED</h3>\
+ <p>Contribute with data, tool or result.\
+ Stay updated.<br>\
+ Send us a mail at <a href="mailto:info@qim.dk">info@qim.dk</a>.</p>\
+ </div>\
+ <div class="w3-third">\
+ <h3>LINKS</h3>\
+ <p>\
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
+ <a style="text-decoration: none;" href="http://qim.dk/sciencecases/" target="_blank">QIM science</a></span>\
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
+ <a style="text-decoration: none;" href="http://qim.dk/software-tools/" target="_blank">QIM tools</a></span>\
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
+ <a style="text-decoration: none;" href="https://imaging.dtu.dk/" target="_blank">3DIM@DTU</a></span>\
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
+ <a style="text-decoration: none;" href="https://www.maxiv.lu.se/" target="_blank">MAX IV</a></span>\
+ </p>\
+ </div>\
+ </div>\
+</footer>\
+');
diff --git a/pages/header.js b/pages/header.js
new file mode 100644
index 0000000000000000000000000000000000000000..95e9c29e5f7080916c3c521f0d65305953a5d92d
--- /dev/null
+++ b/pages/header.js
@@ -0,0 +1,9 @@
+document.write('\
+<header>\
+ <a href="http://qim.dk/"><img src="../common/logo_square.png" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>\
+ <span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span>\
+ <div class="w3-container w3-bottombar w3-padding-16">\
+ <h1><b>3D DATA REPOSITORY</b></h1>\
+ </div>\
+</header>\
+');
diff --git a/pages/mussel.html b/pages/mussel.html
new file mode 100644
index 0000000000000000000000000000000000000000..5d915db185ef71dfa7210fbc13213a6d633f0d13
--- /dev/null
+++ b/pages/mussel.html
@@ -0,0 +1,151 @@
+<!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/Mussel/volume_3d.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D example of Mussel</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Mussel/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal Slices of Mussel</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Vacuum packed closed clam from an (expired) instant soup. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ 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>
+
+ <!-- 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">Closed Mussel full</li>
+ <li class="w3-padding-16">32-bit tiff</li>
+ <li class="w3-padding-16">Dimensions: 600x1000x1000</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">Closed Mussel downsampled</li>
+ <li class="w3-padding-16">16-bit tiff</li>
+ <li class="w3-padding-16">Dimensions: 300x500x500</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/Mussel/single_view.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Closed mussel full</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Mussel/single_view_downsampled.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Closed mussel downsampled</p>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Additional Images -->
+ <h4>Additional Images</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Mussel/Mussel_closed_Slice.jpg" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Mussel</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Mussel/slices_3d_2.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Multiple cross sections of Mussel<</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Mussel/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of Mussel data</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Mussel/same_direction.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Multiple slices of Mussel along same axis</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/pages/sidebar.js b/pages/sidebar.js
new file mode 100644
index 0000000000000000000000000000000000000000..b1f60c4dc889992a2df6fed428d217544b7e8ba5
--- /dev/null
+++ b/pages/sidebar.js
@@ -0,0 +1,29 @@
+document.write('\
+<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>\
+ <div class="w3-container">\
+ <a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">\
+ <i class="fa fa-remove"></i></a>\
+ <a href="http://qim.dk/">\
+ <img src="../common/logo_name.png" style="width:90%;" class="w3-round"></a>\
+ <br><br>\
+ </div>\
+ <div class="w3-bar-block w3-text-grey">\
+ <a href="../index.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-home fa-fw w3-margin-right"></i>HOME</a>\
+ </div>\
+ <div class="w3-bar-block w3-text-grey">\
+ <a href="../about.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-info fa-fw w3-margin-right"></i>ABOUT</a>\
+ </div>\
+</nav>\
+<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>\
+');
+
+// Script to open and close sidebar
+function w3_open() {
+ document.getElementById("mySidebar").style.display = "block";
+ document.getElementById("myOverlay").style.display = "block";
+}
+
+function w3_close() {
+ document.getElementById("mySidebar").style.display = "none";
+ document.getElementById("myOverlay").style.display = "none";
+}