You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
5.3 KiB
147 lines
5.3 KiB
<?xml version="1.0" encoding="UTF-8" ?>
|
|
<odoo>
|
|
<template id="custom_message" inherit_id="website.layout" name="Custom Header">
|
|
<!-- Add an element after the top menu -->
|
|
<xpath expr="//div[@id='wrapwrap']/main" position="before">
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Zen</title>
|
|
<!-- bootstrap css -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
|
|
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"/>
|
|
<!-- google icon css -->
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
|
|
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"/>
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
|
|
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"/>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
|
|
<!-- Owl css -->
|
|
<link rel="stylesheet" href="css/owl.carousel.min.css"/>
|
|
<link rel="stylesheet" href="css/owl.theme.default.min.css"/>
|
|
|
|
<!-- Css` -->
|
|
<link rel="stylesheet" href="css/style.css"/>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<section class="main_body">
|
|
</section>
|
|
<!-- Mouse pointer -->
|
|
<script>
|
|
var cursor = {
|
|
delay: 8,
|
|
_x: 0,
|
|
_y: 0,
|
|
endX: (window.innerWidth / 2),
|
|
endY: (window.innerHeight / 2),
|
|
cursorVisible: true,
|
|
cursorEnlarged: false,
|
|
$dot: document.querySelector('.cursor-dot'),
|
|
$outline: document.querySelector('.cursor-dot-outline'),
|
|
init: function () {
|
|
// Set up element sizes
|
|
this.dotSize = this.$dot.offsetWidth;
|
|
this.outlineSize = this.$outline.offsetWidth;
|
|
this.setupEventListeners();
|
|
this.animateDotOutline();
|
|
},
|
|
// updateCursor: function(e) {
|
|
// var self = this;
|
|
// console.log(e)
|
|
// // Show the cursor
|
|
// self.cursorVisible = true;
|
|
// self.toggleCursorVisibility();
|
|
// // Position the dot
|
|
// self.endX = e.pageX;
|
|
// self.endY = e.pageY;
|
|
// self.$dot.style.top = self.endY + 'px';
|
|
// self.$dot.style.left = self.endX + 'px';
|
|
// },
|
|
setupEventListeners: function () {
|
|
var self = this;
|
|
// Anchor hovering
|
|
document.querySelectorAll('a').forEach(function (el) {
|
|
el.addEventListener('mouseover', function () {
|
|
self.cursorEnlarged = true;
|
|
self.toggleCursorSize();
|
|
});
|
|
el.addEventListener('mouseout', function () {
|
|
self.cursorEnlarged = false;
|
|
self.toggleCursorSize();
|
|
});
|
|
});
|
|
// Click events
|
|
document.addEventListener('mousedown', function () {
|
|
self.cursorEnlarged = true;
|
|
self.toggleCursorSize();
|
|
});
|
|
document.addEventListener('mouseup', function () {
|
|
self.cursorEnlarged = false;
|
|
self.toggleCursorSize();
|
|
});
|
|
document.addEventListener('mousemove', function (e) {
|
|
// Show the cursor
|
|
self.cursorVisible = true;
|
|
self.toggleCursorVisibility();
|
|
// Position the dot
|
|
self.endX = e.pageX;
|
|
self.endY = e.pageY;
|
|
self.$dot.style.top = self.endY + 'px';
|
|
self.$dot.style.left = self.endX + 'px';
|
|
});
|
|
// Hide/show cursor
|
|
document.addEventListener('mouseenter', function (e) {
|
|
self.cursorVisible = true;
|
|
self.toggleCursorVisibility();
|
|
self.$dot.style.opacity = 1;
|
|
self.$outline.style.opacity = 1;
|
|
});
|
|
document.addEventListener('mouseleave', function (e) {
|
|
self.cursorVisible = true;
|
|
self.toggleCursorVisibility();
|
|
self.$dot.style.opacity = 0;
|
|
self.$outline.style.opacity = 0;
|
|
});
|
|
},
|
|
animateDotOutline: function () {
|
|
var self = this;
|
|
self._x += (self.endX - self._x) / self.delay;
|
|
self._y += (self.endY - self._y) / self.delay;
|
|
self.$outline.style.top = self._y + 'px';
|
|
self.$outline.style.left = self._x + 'px';
|
|
requestAnimationFrame(this.animateDotOutline.bind(self));
|
|
},
|
|
toggleCursorSize: function () {
|
|
var self = this;
|
|
if (self.cursorEnlarged) {
|
|
self.$dot.style.transform = 'translate(-50%, -50%) scale(0.75)';
|
|
self.$outline.style.transform = 'translate(-50%, -50%) scale(1.5)';
|
|
} else {
|
|
self.$dot.style.transform = 'translate(-50%, -50%) scale(1)';
|
|
self.$outline.style.transform = 'translate(-50%, -50%) scale(1)';
|
|
}
|
|
},
|
|
toggleCursorVisibility: function () {
|
|
var self = this;
|
|
if (self.cursorVisible) {
|
|
self.$dot.style.opacity = 1;
|
|
self.$outline.style.opacity = 1;
|
|
} else {
|
|
self.$dot.style.opacity = 0;
|
|
self.$outline.style.opacity = 0;
|
|
}
|
|
}
|
|
}
|
|
cursor.init();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
</xpath>
|
|
</template>
|
|
</odoo>
|