Etheryo/saoulbonmonsieur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added popup. Buttons for second description div. Added showPopUp, closePopUp and popUpPlacement

Browse source
This commit is contained in:
Yohan Boujon 2023-06-23 15:32:00 +02:00
parent df8b500c2b
commit 115e045dbe
4 changed files with 84 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/footer.html
View file

@ -1,4 +1,9 @@
<div id="footer">
<div class="black-bg">
<div class="legal">
<a class="btn" href='javascript:closePopUp("black-bg")'>x</a>
</div>
</div>
<div class="footer-container">
<div class="footer-container_grid">
<h1>Suivez-moi</h1>
@ -16,7 +21,7 @@
<p>Copyright © Yohan Boujon 2023</p>
</div>
<div class="footer-bottom_grid right-align">
<p><a href="#0">Mentions légales</a></p>
<p><a href='javascript:showPopUp("black-bg")'>Mentions légales</a></p>
</div>
</div>
</div>

41
css/base.css
View file

@ -39,3 +39,44 @@ p {
.left-align {
text-align: left;
}
.btn {
border-radius: .25rem;
color: black;
background-color: var(--color-white);
font-weight: 800;
padding: 1rem 1rem;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
transition: all .3s ease 0s;
}
.btn:hover{
transform: translateY(-3px);
background-color: var(--color-light);
color: var(--color-white);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.black-bg{
height: 100%;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
z-index: 99;
display: none;
}
.legal{
border-radius: .5rem;
height: 80%;
width: 50%;
position: relative;
top: 10%;
left: 25%;
background-color: var(--color-white);
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
z-index: 100;
}

6
index.html
View file

@ -49,7 +49,7 @@
<img class="billboard" src="assets/meilleurappelersaoul.jpg"></img>
</div>
</div>
<div class="description">
<div class="description votre-avocat">
<div class="description-img">
<img class="profilepic" src="assets/saoult_bg_arbre.jpg"></img>
</div>
@ -71,8 +71,10 @@
pays qu’est la France aucune licorne ne peut faire ces délits. Les entités dictant ces mauvais mots à
votre égard ont sûrement tort, et je vais me battre avec vous pour leur prouver quelle est la vraie
justice !
</p>
<br>
<a class="btn"href="avocat">En savoir plus</a>
<a class="btn" href="join/contact.html">Me contacter</a>
</div>
</div>
<Footer></Footer>

44
js/base.js
View file

@ -2,7 +2,7 @@
/* global variables */
/****************************************/
//Getting the complete URL and slice it by [0] to the directory URL, return the domain name.
var urlStr = window.location.toString().slice(0,window.location.toString().lastIndexOf(window.location.pathname)+1);
var urlStr = window.location.toString().slice(0, window.location.toString().lastIndexOf(window.location.pathname) + 1);
//Getting the dir name by gathering the pathname and substract it with the last '/'.
var dirStr = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/'));
@ -20,7 +20,7 @@ function load(urlHTML, elementHTML, urlJS, elementJS) {
})
.catch(
function (err) {
console.warn('Could not load '+urlHTML+': Add the correct tag ?', err);
console.warn('Could not load ' + urlHTML + ': Add the correct tag ?', err);
}
);
}
@ -32,7 +32,7 @@ function loadHTML(url, element) {
element.innerHTML = htmltext;
}).catch(
function (err) {
console.warn('Could not load '+url+': Add the correct tag ?', err);
console.warn('Could not load ' + url + ': Add the correct tag ?', err);
}
);
}
@ -82,24 +82,46 @@ function getSlashNum(string) {
* @param {Concat String} basePath
* @returns the concatened string
*/
function concatPath(slashNum, basePath)
{
function concatPath(slashNum, basePath) {
var slashString = "";
for (let i = 0; i < slashNum; i++) {
slashString += "../";
}
return slashString+basePath;
return slashString + basePath;
}
function showPopUp(className) {
document.getElementsByClassName(className)[0].style.display = "block";
document.getElementsByTagName("body")[0].style.height = "100%";
document.getElementsByTagName("body")[0].style.overflow = "hidden";
}
function closePopUp(className) {
document.getElementsByClassName(className)[0].style.display = "none";
document.getElementsByTagName("body")[0].style.height = "";
document.getElementsByTagName("body")[0].style.overflow = "";
}
function popUpPlacement(className) {
var popup = document.getElementsByClassName(className)[0];
var body = document.getElementsByTagName("body")[0];
body.insertBefore(popup, body.firstChild)
}
/****************************************/
/* main */
/****************************************/
//Loading the html,js and css of navbar and footer
var headTag = document.getElementsByTagName("head")[0];
window.addEventListener('load', function () {
loadCSS(urlStr+"css/base.css", headTag);
loadCSS(urlStr+"css/navbar.css", headTag);
load(urlStr+"components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr+"js/navbar.js", headTag);
loadCSS(urlStr+"css/footer.css", headTag);
load(urlStr+"components/footer.html", document.getElementsByTagName("Footer")[0], urlStr+"js/footer.js", headTag);
loadCSS(urlStr + "css/base.css", headTag);
loadCSS(urlStr + "css/navbar.css", headTag);
load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag);
loadCSS(urlStr + "css/footer.css", headTag);
load(urlStr + "components/footer.html", document.getElementsByTagName("Footer")[0], urlStr + "js/footer.js", headTag)
setTimeout(() => {
//Will change
popUpPlacement("black-bg");
}, 200);
})