diff --git a/about.html b/about.html
index a2e187edeaab779070642739836f229f71ab521e..b74da56f6e73028e1404a2f6b6c171ef6e37cddb 100644
--- a/about.html
+++ b/about.html
@@ -10,25 +10,22 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<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>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
-
- <!-- Images -->
- <div class="w3-row-padding w3-padding-16">
-
<div class="w3-container w3-padding-large" style="margin-bottom:32px">
<h4><b>About</b></h4>
<p>The 3D Data repository contains...</p>
@@ -89,17 +86,17 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
</div>
</div>
-
</div>
-
-
<!-- Footer -->
- <script src='footer.js'></script>
-
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/example1.html b/example1.html
index d1e0b9e011edea3200a950e88e0cf4d41566dafd..442e07f079bb4f9d78312d6b8033a1b4008de946 100644
--- a/example1.html
+++ b/example1.html
@@ -10,18 +10,19 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<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>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
@@ -89,10 +90,14 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
<!-- Footer -->
- <script src='footer.js'></script>
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/example2.html b/example2.html
index b22ffc4aad38ab2a8676bff9c82cdbe03f878772..c72e1da8c2742b43631e541b1767cb045db8f14f 100644
--- a/example2.html
+++ b/example2.html
@@ -10,18 +10,19 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<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>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
@@ -60,21 +61,23 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
<h4><b>Versions</b></h4>
<ul class="w3-ul w3-border">
- <li><b>Full.</b> Just as we got it from the scanner.</li>
- <li><b>Smaller.</b> Processing (from full): bit depth from 16 to 8-bit, cropping to keep only region of interest.</li>
- <li><b>Tiny.</b> Smaller, but downscaled 4 times.</li>
+ <li><span class="w3-large">Full</span><br> Just as we got it from the scanner.</li>
+ <li><span class="w3-large">Small</span><br> Processing (from full): bit depth from 16 to 8-bit, cropping to keep only region of interest.</li>
+ <li><span class="w3-large">Tiny</span><br> Processed as for smaller, and then downscaled with a factor of 4.</li>
</ul>
-
- <p> </p>
<hr>
</div>
<!-- Footer -->
- <script src='footer.js'></script>
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/example3.html b/example3.html
index f588182380ebc9037f561702ad03f87f4b29eb8e..b9beeb0792763986a880fdb58df934ad1f3097ca 100644
--- a/example3.html
+++ b/example3.html
@@ -10,18 +10,19 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<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>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
@@ -74,10 +75,14 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
<!-- Footer -->
- <script src='footer.js'></script>
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/footer.html b/footer.html
new file mode 100644
index 0000000000000000000000000000000000000000..9d5bd3326508ae6c18c718a0ca8061a66db6ad31
--- /dev/null
+++ b/footer.html
@@ -0,0 +1,34 @@
+
+<!-- Footer -->
+<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/footer.js b/footer.js
deleted file mode 100644
index 0977b207a88562ba999c01fb4086951ad7e36e13..0000000000000000000000000000000000000000
--- a/footer.js
+++ /dev/null
@@ -1,35 +0,0 @@
-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/header.html b/header.html
new file mode 100644
index 0000000000000000000000000000000000000000..654a2fcb8773a5c3df9262d5c40a7ef7bc7e17ce
--- /dev/null
+++ b/header.html
@@ -0,0 +1,8 @@
+<!-- Header -->
+<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/header.js b/header.js
deleted file mode 100644
index 1bdd2a3d30c3af7a52184b06fecfa2e5f94af5a1..0000000000000000000000000000000000000000
--- a/header.js
+++ /dev/null
@@ -1,9 +0,0 @@
-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/includeHTML.js b/includeHTML.js
new file mode 100644
index 0000000000000000000000000000000000000000..822855c0744f751d8dede6604b0cd23d69830e00
--- /dev/null
+++ b/includeHTML.js
@@ -0,0 +1,27 @@
+function includeHTML() {
+ var z, i, elmnt, file, xhttp;
+ /*loop through a collection of all HTML elements:*/
+ z = document.getElementsByTagName("*");
+ for (i = 0; i < z.length; i++) {
+ elmnt = z[i];
+ /*search for elements with a certain atrribute:*/
+ file = elmnt.getAttribute("w3-include-html");
+ if (file) {
+ /*make an HTTP request using the attribute value as the file name:*/
+ xhttp = new XMLHttpRequest();
+ xhttp.onreadystatechange = function() {
+ if (this.readyState == 4) {
+ if (this.status == 200) {elmnt.innerHTML = this.responseText;}
+ if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
+ /*remove the attribute, and call this function once more:*/
+ elmnt.removeAttribute("w3-include-html");
+ includeHTML();
+ }
+ }
+ xhttp.open("GET", file, true);
+ xhttp.send();
+ /*exit the function:*/
+ return;
+ }
+ }
+};
diff --git a/index.html b/index.html
index 38437965c245f234dbcfbc5438a00b6c27b63c1c..f8c434b6e3376881bf797e46bf3e1a1c34bbfc45 100644
--- a/index.html
+++ b/index.html
@@ -10,18 +10,19 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<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>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
@@ -82,10 +83,14 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
<!-- Footer -->
- <script src='footer.js'></script>
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/qim_repository_template.html b/qim_repository_template.html
index 0a2425d11e23cef6317dda1d07af9c20ac8ceaae..c5ef289981bcd73d1694243920a50c853bc8bdcf 100644
--- a/qim_repository_template.html
+++ b/qim_repository_template.html
@@ -10,18 +10,19 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<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>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
@@ -201,11 +202,14 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
<!-- Footer -->
- <script src='footer.js'></script>
-
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/qim_repository_template_all.html b/qim_repository_template_all.html
index 6c897e1b9c6305b0b61eb861d709a865651a9aee..9112a87493cd4b2208a3367c8ec0e96dc93b21c5 100644
--- a/qim_repository_template_all.html
+++ b/qim_repository_template_all.html
@@ -158,19 +158,19 @@ footer a {
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">1GB Storage</li>
<li class="w3-light-grey w3-padding-24">
- <button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
+ <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-teal w3-xlarge w3-padding-32">Medium</li>
+ <li class="w3-orange w3-xlarge w3-padding-32">Medium</li>
<li class="w3-padding-16">Type</li>
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">50GB Storage</li>
<li class="w3-light-grey w3-padding-24">
- <button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
@@ -182,7 +182,7 @@ footer a {
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">Unlimited Storage</li>
<li class="w3-light-grey w3-padding-24">
- <button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
@@ -198,7 +198,7 @@ footer a {
<p><i class="fa fa-envelope w3-xxlarge w3-text-light-grey"></i></p>
<p>qim_center@dtu.dk</p>
</div>
- <div class="w3-third w3-teal">
+ <div class="w3-third w3-orange">
<p><i class="fa fa-map-marker w3-xxlarge w3-text-light-grey"></i></p>
<p>Lyngby, DK</p>
</div>
diff --git a/sidebar.js b/sidebar.html
similarity index 58%
rename from sidebar.js
rename to sidebar.html
index 5c7a047f075957456f13edb338920c54268b594a..e84d7dfc17bc02262ecb5383f51c6acd6cad1b7d 100644
--- a/sidebar.js
+++ b/sidebar.html
@@ -1,27 +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>\
- <!--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-exclamation fa-fw w3-margin-right"></i>USE</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>\
-');
+<!-- Sidebar/menu -->
+<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>
+ <!--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-exclamation fa-fw w3-margin-right"></i>USE</a>
+ </div-->
+</nav>
+
+<!-- Overlay effect when opening sidebar on small screens -->
+<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
+
+
+<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
@@ -32,3 +34,4 @@ function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
+</script>