Update _test folder

This commit is contained in:
2024-12-10 11:19:38 +01:00
parent 508254de52
commit b619d17589
63 changed files with 28101 additions and 1 deletions

172
_test/maps/jquery.html Normal file
View File

@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
body {
font-family:Arial, Helvetica, sans-serif;
}
p {
font-size: 16px;
line-height: 26px;
letter-spacing: 0.5px;
color: #484848;
}
/* Popup Open button */
.open-button{
text-decoration:none;
}
.open-button:hover{
}
.popup {
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
width:100%;
height:100%;
display:none;
}
/* Popup inner div */
.popup-content {
width: 700px;
margin: 0 auto;
box-sizing: border-box;
padding: 20px;
margin-top: 80px;
box-shadow: 0px 2px 6px rgba(0,0,0,1);
border-radius: 3px;
background: #fff;
position: relative;
}
.content {
padding: 20px 0px;
}
/* Popup close button */
.close-button {
width: 35px;
height: 35px;
position: absolute;
top: -13px;
right: -13px;
border-radius: 20px;
background: rgba(0,0,0,0.8);
font-size: 25px;
text-align: center;
color: #fff;
text-decoration:none;
}
.close-button:hover {
background: rgba(0,0,0,1);
}
#maps {
height: 350px;
width: 600px;
margin: auto;
}
@media screen and (max-width: 720px) {
.popup-content {
width:90%;
}
#maps {
width: 90%;
}
}
/*#maps { height:350px;width:425px; display:none; }*/
</style>
</head>
<body>
<!--a class="open-button" href="javascript:void(0)"> Popup Preview</a-->
<a href="#" class="open-button">&#x2693;</a>
<div class="popup">
<div class="popup-content">
<h3>Title of Popup </h3>
<div id="maps"></div>
<div class="content">Popup 1 content will be here. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Aliquam consequat diam ut tortor
dignissim, vel accumsan libero venenatis. Nunc pretium volutpat
convallis. Integer at metus eget neque hendrerit vestibulum.
</div>
<a class="close-button" href="#">x</a>
</div>
</div>
<script>
$(function() {
// create a center
var c = new google.maps.LatLng(46.61211515,5.8780727);
//create map options object
var mapOptions = {
zoom: 11,
center: c,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('maps'), mapOptions);
var marker = new google.maps.Marker({
position: c,
label: {
text: "\ue0c8",
fontFamily: "Material Icons",
color: "#ffffff",
fontSize: "20px",
},
animation: google.maps.Animation.DROP,
title: "Material Icon Font Marker",
});
marker.setMap(map);
$(".open-button").click(function() {
$(".popup").show(100,'linear', function(){
google.maps.event.trigger(map, "resize"); // resize map
map.setCenter(c); // set the center
});
});
$(".close-button").click(function() {
$(".popup").hide(100);
});
/*
$('body').on('mouseup', function() {
$('.popup').hide();
});
*/
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$(".popup").hide(100);
}
});
});
</script>
</body>
</html>