Skip to content
Snippets Groups Projects
Commit d9cc3d59 authored by vand's avatar vand
Browse files

changed js includes to html includes

parent 2c7db6cf
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 151 additions and 95 deletions
about.html
+ 8
− 11
View file @ d9cc3d59
......@@ -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>
example1.html
+ 8
− 3
View file @ d9cc3d59
......@@ -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>
example2.html
+ 11
− 8
View file @ d9cc3d59
......@@ -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>
example3.html
+ 8
− 3
View file @ d9cc3d59
......@@ -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>
footer.html 0 → 100644
+ 34
− 0
View file @ d9cc3d59
<!-- 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>
footer.js deleted 100644 → 0
+ 0
− 35
View file @ 2c7db6cf
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>\
');
header.js → header.html
+ 8
− 0
View file @ d9cc3d59
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>\
');
<!-- 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>
includeHTML.js 0 → 100644
+ 27
− 0
View file @ d9cc3d59
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;
}
}
};
index.html
+ 8
− 3
View file @ d9cc3d59
......@@ -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>
qim_repository_template.html
+ 8
− 4
View file @ d9cc3d59
......@@ -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>
qim_repository_template_all.html
+ 5
− 5
View file @ d9cc3d59
......@@ -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>
......
sidebar.js → sidebar.html
+ 26
− 23
View file @ d9cc3d59
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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment