willy.club/views/templates/blog/footer.php
2023-02-06 23:44:08 +01:00

194 lines
4.4 KiB
PHP

</main>
</div>
<style>
#mydiv {
position: absolute;
z-index: 9;
background: #1111119e;
text-align: center;
border: 1px solid #d3d3d3;
width: 300px;
height: 500px;
bottom: 10px;
right: 10px;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background: #000;
color: #fff;
}
#mydivinner {
padding: .75rem;
height: 100%;
}
</style>
<body>
<div id="mydiv">
<div id="mydivheader">LIVE CHAT SUPPORT</div>
<div id="mydivinner">
<style>
.willychat {
width: 100%;
height: 100%;
}
</style>
<iframe class="willychat" src="<?=url('/chat/')?>" frameborder="0" scrolling="no"></iframe>
</div>
</div>
<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var fScriptTag = document.getElementsByTagName('script')[0];
fScriptTag.parentNode.insertBefore(tag, fScriptTag);
var player;
function startTheThang() {
myModal.style.display = 'none';
player = new YT.Player('player', {
height: '0',
width: '0',
videoId: 'p0jTwrI774o',
playerVars:{'mute' : 0,'autoplay':1},
events: { }
});
}
</script>
<div id="player"></div>
<script>
// this isbetter than react
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.tagName == 'A') {
changePage(element.href)
return false; // prevent default action and stop event propagation
}
};
window.addEventListener('popstate', (event) => {
changePage(document.location);
});
function changePage(href) {
fetch(href).then(function (response) {
// The API call was successful!
return response.text();
}).then(function (html) {
// Convert the HTML string into a document object
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
document.getElementById('pageContent').animate([
// keyframes
{ transform: 'scale(100%)' },
{ transform: 'scale(0%)' }
], {
// timing options
duration: 500,
iterations: 1
});
setTimeout(() => {
document.getElementById('pageContent').animate([
// keyframes
{ transform: 'scale(0%)' },
{ transform: 'scale(100%)' }
], {
// timing options
duration: 500,
iterations: 1
});
document.getElementById('pageContent').innerHTML = doc.getElementById('pageContent').innerHTML;
}, 500);
window.history.pushState('fart', 'Title', href);
}).catch(function (err) {
// There was an error
console.warn('Something went wrong.', err);
});
}
</script>
<style>
.changePage {
animation: booooom 1s linear infinite;
}
@keyframes booooom {
0% {
font-size: 1rem;
}
100% {
font-size: 10rem;
}
}
</style>
</html>