2020-06-20 18:16:50 +00:00
<!DOCTYPE html>
2022-05-04 14:29:53 +00:00
<html lang="en" dir="ltr" style="--scrollbarWidth: 0px; --viewportWidth: calc(100vw - var(--scrollbarWidth));">
2021-11-03 11:26:33 +00:00
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
2021-11-03 19:48:28 +00:00
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
2021-11-03 11:26:33 +00:00
<link rel="icon" href="/favicon.ico" />
2022-05-04 14:29:53 +00:00
<!-- <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet"> -->
<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
<link href="https://api.fonts.coollabs.io/css2?family=Bebas+Neue&family=Nunito&family=DM+Serif+Display&display=swap" rel="stylesheet">
2021-11-03 11:26:33 +00:00
<!-- Required Core Stylesheet -->
2021-11-03 19:48:28 +00:00
<!-- <link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.core.css"> -->
2021-11-03 11:26:33 +00:00
<!-- Optional Theme Stylesheet -->
2021-11-03 19:48:28 +00:00
<!-- <link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.theme.css"> -->
2021-11-03 11:26:33 +00:00
2022-05-04 14:29:53 +00:00
<script>
window.onload = setScrollbarVariable;
document.onload = setScrollbarVariable;
window.onresize = setScrollbarVariable;
function setScrollbarVariable() {
//alert(window.innerWidth + " - " + document.body.clientWidth);
//const scrollbarWidth = window.innerWidth - document.body.clientWidth;
const viewportDependantWidth = (typeof window.orientation !== "undefined") ? screen.width : window.innerWidth;
//console.log(screen.width + " " + window.innerWidth);
const scrollbarWidth = viewportDependantWidth - document.body.clientWidth;
document.documentElement.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);
}
</script>
<style>
:root{
--viewportWidth: calc(100vw - var(--scrollbarWidth));
}
</style>
2021-11-03 11:26:33 +00:00
<title>
<%= site.title %>
</title>
<meta name="description" content="<%= (!!locals.description) ? description : site.description %>" />
<meta name="author" content="<%= site.author %>" />
<meta property="og:title" content="<%= site.title %>" />
<meta property="og:description" content="<%= (!!locals.description) ? description : site.description %>" />
<meta property="og:locale" content="<%= site.locale %>" />
<meta property="og:site_name" content="<%= site.site_name %>" />
<% if (locals.tags=="posts" ) { %>
2020-10-09 20:29:39 +00:00
<meta property="og:type" content="article" />
<meta property="article:published_time" content="<%= date.toISOString() %>" />
<script type="application/ld+json">
2020-06-20 18:16:50 +00:00
{
"description": "<%= (!!locals.description) ? description : site.description %>",
"author": { "@type": "Person", "name": "<%= site.author %>" },
"@type": "BlogPosting",
"url": "<%= `${site.url}${page.url}` %>",
"publisher": {
"@type": "Organization",
"logo": {
"@type": "ImageObject",
"url": "<%= `${site.url}/assets/images/logo.png` %>"
},
"name": "<%= site.author %>"
},
2021-11-03 11:26:33 +00:00
"headline": "<%= site.title %>",
2020-06-20 18:16:50 +00:00
"datePublished": "<%= date.toISOString() %>",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<%= `${site.url}${page.url}` %>"
},
"@context": "http://schema.org"
}
</script>
2020-10-09 23:00:28 +00:00
<% } %>
2021-11-03 11:26:33 +00:00
<%- include('webpack.ejs') %>
<% if (page.url=="/" ) { %>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
<script>
if (window.netlifyIdentity) {
window.netlifyIdentity.on('init', (user) => {
if (!user) {
window.netlifyIdentity.on('login', () => {
document.location.href = '/admin/';
});
}
});
}
</script>
<% } %>
</head>
<body class="">
<div id="page" class="max-w-screen-lg mx-auto">
<header class="site-header ">
<img class="site-logo" src="<%= `./assets/images/logo.png` %>" alt="">
<h1 class="site-title font-semibold text-3xl text-gray-800">
<%= site.title %>
</h1>
<!-- <div class="text-xl"><%= site.description %></div> -->
</header>
<main class="page-content">
<%- content %>
</main>
2021-11-03 19:48:28 +00:00
<% include /footer %>
2021-11-03 11:26:33 +00:00
</div>
<!-- <script src="https://unpkg.com/@glidejs/glide@3.3.0/dist/glide.js"></script> -->
2022-05-04 14:29:53 +00:00
2021-11-03 11:26:33 +00:00
<!-- <script src="/node_modules/@glidejs/glide/dist/glide.modular.esm.js"></script> -->
<!-- <script src="/js/eleventy.js" type="module" async></script> -->
2022-05-04 14:29:53 +00:00
<!-- this below were the last ones that i used -->
<!-- <script src="./node_modules/@glidejs/glide/dist/glide.min.js"></script> -->
<!-- <script src="./node_modules/blueimp-md5/js/md5.min.js"></script> -->
2021-11-03 11:26:33 +00:00
<script>
2021-11-03 19:48:28 +00:00
// new Glide('.glide').mount({
// type: 'carousel',
// startAt: 0,
// perView: 1,
// autoplay: 1000,
// bound: true,
// rewind: false
// })
// new Glide('.glide').mount()
2021-11-03 11:26:33 +00:00
</script>
2021-10-27 07:30:25 +00:00
2021-11-15 15:53:48 +00:00
<script>
document.getElementById('fromEmail').addEventListener('input', function () {
const fromEmail = document.getElementById('fromEmail');
const message = document.getElementById('message');
2021-11-15 15:54:24 +00:00
const emailError = document.getElementById('emailError');
const otherError = document.getElementById('otherError');
const success = document.getElementById('success');
2021-11-15 15:53:48 +00:00
const contactSubmit = document.getElementById('contactSubmit');
2021-11-15 15:54:24 +00:00
// if (/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(fromEmail.value)) {
// contactSubmit.disabled = false;
// alert.classList.remove('form-alert--visible');
// } else {
// contactSubmit.disabled = true;
// alert.classList.add('form-alert--visible');
// }
emailError.classList.remove('form-alert--visible');
otherError.classList.remove('form-alert--visible');
success.classList.remove('form-alert--visible');
2021-11-15 15:53:48 +00:00
});
document.getElementById('contactSubmit').addEventListener('click', function () {
const fromEmail = document.getElementById('fromEmail');
const message = document.getElementById('message');
2021-11-15 15:54:24 +00:00
const emailError = document.getElementById('emailError');
const otherError = document.getElementById('otherError');
const success = document.getElementById('success');
2021-11-15 15:53:48 +00:00
2021-11-15 15:54:24 +00:00
if (/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(fromEmail.value)) {
/* succeeded */
emailError.classList.remove('form-alert--visible');
var details = {
'hash': md5(fromEmail.value + '89745378945667832'),
'fromEmail': fromEmail.value,
'message': message.value
};
var formBody = [];
for (var property in details) {
var encodedKey = encodeURIComponent(property);
var encodedValue = encodeURIComponent(details[property]);
formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");
try {
2022-05-04 13:32:10 +00:00
fetch('https://humananatomy3d.app/app/php/email/v1/SendSupportMailFromWebsite.php', {
2021-11-15 15:54:24 +00:00
method: 'POST',
2022-05-04 13:32:10 +00:00
//mode: 'no-cors',
2021-11-15 15:54:24 +00:00
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: formBody,
})
.then(response => {
2022-05-04 13:32:10 +00:00
//console.log("response.status: " + response.status);
2021-11-15 15:54:24 +00:00
if(response.status === 200){
2022-05-04 13:32:10 +00:00
return response.text();
2021-11-15 15:54:24 +00:00
} else {
otherError.classList.add('form-alert--visible');
}
})
.then(data => {
2022-05-04 13:32:10 +00:00
//console.log("data:");
//console.log(data);
2021-11-15 15:54:24 +00:00
switch (data) {
case "succesSendingSupportEmail":
success.classList.add('form-alert--visible');
emailError.classList.remove('form-alert--visible');
otherError.classList.remove('form-alert--visible');
fromEmail.value = '';
message.value = '';
break;
case "invalidEmailAdres":
emailError.classList.add('form-alert--visible');
break;
case "failedSendingSupportEmail":
case "failedH":
otherError.classList.add('form-alert--visible');
break;
default:
break;
}
2022-05-04 13:32:10 +00:00
//console.log(data)
2021-11-15 15:54:24 +00:00
});
} catch (error) {
otherError.classList.add('form-alert--visible');
}
} else {
/* failed */
emailError.classList.add('form-alert--visible');
}
2021-11-15 15:53:48 +00:00
});
2021-11-15 15:54:24 +00:00
// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/flexgap.js
function checkFlexGap() {
// create flex container with row-gap set
var flex = document.createElement("div");
flex.style.display = "flex";
flex.style.flexDirection = "column";
flex.style.rowGap = "1px";
// create two, elements inside it
flex.appendChild(document.createElement("div"));
flex.appendChild(document.createElement("div"));
// append to the DOM (needed to obtain scrollHeight)
document.body.appendChild(flex);
var isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
//flex.parentNode.removeChild(flex);
return isSupported;
}
console.log(checkFlexGap());
if (checkFlexGap()) {
document.documentElement.classList.add("flexbox-gap");
} else {
document.documentElement.classList.add("no-flexbox-gap");
}
2021-11-15 15:53:48 +00:00
</script>
2021-10-27 07:30:25 +00:00
2021-11-03 11:26:33 +00:00
</body>
</html>
2022-05-04 14:29:53 +00:00
<!-- <style>
2021-11-03 11:26:33 +00:00
.site-logo {
height: 5rem;
2021-11-15 15:54:24 +00:00
width: 5rem;
2021-11-15 15:53:48 +00:00
transform: rotateZ(0deg) translateY(0.4rem);
2021-11-03 11:26:33 +00:00
transition: 0.2s all;
border: 3px solid var(--c-1);
border-radius: 1rem;
}
.site-logo:hover {
2021-11-15 15:53:48 +00:00
transform: rotateZ(4deg) translateY(0.4rem) scale(1.1);
2021-11-03 11:26:33 +00:00
}
.site-header {
2021-10-27 07:30:25 +00:00
display: flex;
justify-content: center;
2021-11-03 11:26:33 +00:00
align-items: baseline;
gap: 1rem;
2021-10-27 07:30:25 +00:00
}
2021-11-15 15:54:24 +00:00
.no-flexbox-gap .site-header>*:not(:last-child) {
margin-right: 1rem;
}
2021-11-03 11:26:33 +00:00
.site-title {
font-family: Bebas Neue;
font-style: normal;
font-weight: normal;
font-size: 3rem;
line-height: 1;
letter-spacing: 0.24em;
text-transform: uppercase;
width: auto;
margin: 3rem 0 0 0;
}
2021-10-27 07:30:25 +00:00
2021-11-03 11:26:33 +00:00
#page {
display: flex;
flex-direction: column;
align-items: center;
}
.page-content {
display: flex;
flex-direction: column;
align-items: center;
}
2022-05-04 14:29:53 +00:00
</style> -->
