link to new page in a better way
This commit is contained in:
janis
@@ -20,7 +20,7 @@
|
||||
}
|
||||
|
||||
.Menu {
|
||||
margin-top: -1%;
|
||||
margin-top: 0;
|
||||
padding: 2%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
100
footer.html
100
footer.html
@@ -4,6 +4,82 @@
|
||||
<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">
|
||||
@@ -13,5 +89,29 @@
|
||||
<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 > 4 ) {
|
||||
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>
|
||||
@@ -13,7 +13,6 @@
|
||||
<div id="ContentToInclude"></div>
|
||||
<div class="mainstyle">
|
||||
<h1>Welcome to janishutz.com!</h1>
|
||||
<h2>NOTE: This page has been moved to <a href="https://janishutz.com">janishutz.com</a> and will not be updated here anymore!
|
||||
<p>iOS Apps, PC apps, Websites</p>
|
||||
<p>Learn more about my projects!</p>
|
||||
<a class="linkbutton" href="./projects.html">Projects</a>
|
||||
|
||||
25
menu.html
25
menu.html
@@ -4,8 +4,33 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="/css/menustyle.css">
|
||||
<title>Navmenu - janishutz.com</title>
|
||||
<style>
|
||||
#moved-banner {
|
||||
background: linear-gradient( 22.5deg, red, blue ) !important;
|
||||
height: 15vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#moved-banner p {
|
||||
max-width: 90vw;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#moved-banner a {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="moved-banner">
|
||||
<p>This website is ancient and was moved to <a href="https://janishutz.com">janishutz.com</a></p>
|
||||
</div>
|
||||
<ul class="Menu">
|
||||
<a href="/"><img src="/assets/Logo.png" class="logo"></a>
|
||||
<div class="menu-container">
|
||||
|
||||
Reference in New Issue
Block a user