117 lines
3.5 KiB
HTML
Executable File
117 lines
3.5 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<link rel="stylesheet" href="/css/footerstyle.css">
|
|
<title>Footer - janishutz.com</title>
|
|
<style>
|
|
#go-to-new-page-popup {
|
|
position: fixed;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
left: 0;
|
|
bottom: -100vh;
|
|
background-color: rgba( 0, 0, 0, 0.7 );
|
|
z-index: 100;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: 0.25s;
|
|
}
|
|
|
|
#new-page {
|
|
min-width: 25vw;
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
min-height: 60vh;
|
|
background: linear-gradient( 45deg, red, blue );
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 20px;
|
|
flex-direction: column;
|
|
font-size: 150%;
|
|
position: relative;
|
|
color: white;
|
|
}
|
|
|
|
#new-page p {
|
|
text-align: center;
|
|
width: 80%;
|
|
}
|
|
|
|
.popup-show {
|
|
bottom: 0 !important;
|
|
}
|
|
|
|
#close-icon {
|
|
color: white;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
font-size: 150%;
|
|
font-weight: lighter;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings:
|
|
'FILL' 0,
|
|
'wght' 400,
|
|
'GRAD' 0,
|
|
'opsz' 24
|
|
}
|
|
|
|
#new-page-button {
|
|
text-decoration: none;
|
|
color: white;
|
|
background: linear-gradient( 90deg, blue, rgb(225, 0, 255) );
|
|
padding: 20px;
|
|
border-radius: 20px;
|
|
background-size: 150%;
|
|
transition: all 0.5s;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#new-page-button:hover {
|
|
background-position-x: 100%;
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
|
</head>
|
|
<body>
|
|
<div class="Footer-box">
|
|
<div class="footer-content-box">
|
|
<img src="/assets/Logo.png" class="footer-logo">
|
|
<div class="footer-center-box">
|
|
<a href="/privacypolicy.html" class="linkbutton" id="ppbtn">Privacy Policy</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="go-to-new-page-popup">
|
|
<div id="new-page">
|
|
<span class="material-symbols-outlined" id="close-icon" onclick="closePopup()">close</span>
|
|
<h2>Still here?</h2>
|
|
<p>You deserve better! Head to my new website!</p>
|
|
<a href="https://janishutz.com" id="new-page-button">To new website</a>
|
|
</div>
|
|
</div>
|
|
<!-- Detection to open pop-up to tell users to head to new website after certain amount of interactions -->
|
|
<script>
|
|
let pageViewCount = parseInt( localStorage.getItem( 'pageViewCount' ) ?? '0' );
|
|
if ( pageViewCount > 2 ) {
|
|
document.getElementById( 'go-to-new-page-popup' ).classList.add( 'popup-show' );
|
|
} else {
|
|
pageViewCount += 1;
|
|
localStorage.setItem( 'pageViewCount', pageViewCount );
|
|
}
|
|
|
|
var closePopup = () => {
|
|
localStorage.setItem( 'pageViewCount', 0 );
|
|
document.getElementById( 'go-to-new-page-popup' ).classList.remove( 'popup-show' );
|
|
}
|
|
</script>
|
|
</div>
|
|
</body> |