devops_admin
/
odex25_standard
mirror of https://github.com/hydracp9/odex25_standard
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add sidebar menu - scroll top - menu animations

This commit is contained in:
MohamedGad100 2024-10-30 11:13:45 +03:00
parent cc5e72d511
commit ab3b7ac34a
12 changed files with 8192 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
odex25_base/odex_new_website/static/img/logout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 582 B

BIN
odex25_base/odex_new_website/static/img/public-user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
odex25_base/odex_new_website/static/img/top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

74
odex25_base/odex_new_website/static/js/hdr_footer.js
View File

@ -2,9 +2,10 @@ $(document).ready(function () {
gsap.registerPlugin(ScrollTrigger);
// Navbar // Hide Navbar Up
const showAnim = gsap.from("nav.navbar", { yPercent: -100, paused: true, duration: 0.2 }).progress(1);
// Global ScrollTrigger to show the navbar anytime we scroll up
// Navbar // Global ScrollTrigger to show the navbar anytime we scroll up
let lastScrollY = window.scrollY;
window.addEventListener("scroll", function () {
@ -32,12 +33,79 @@ $(document).ready(function () {
}
});
// set the contact call number
// Mobile Menu // Menu Icon & Mobile Popup Menu
let menuBtn = document.getElementById("menu-btn-container");
let mobileMenuOverlay = document.querySelector(".popup-overlay");
let mobileMenuOverlayTransition = document.querySelector(".popup-overlay-transition");
const mobileMenuAnimation = gsap.timeline({ paused: true })
mobileMenuAnimation.to('.popup-container', { duration: .1, display: "block" })
.to('.popup-overlay', { duration: .2, x: 0, ease: "expo.inOut" }, 0)
.to('.popup-menu', { duration: .5, x: 0, ease: "expo.inOut" }, .3)
.to(mobileMenuOverlayTransition, { duration: 1, width: "0px", ease: "expo.inOut" }, .3)
// .from('.sequence', { stagger: .1, y: 20, opacity: 0 })
// Open / Close Popup Menu
if (menuBtn) {
menuBtn.addEventListener("click", (e) => {
e.preventDefault();
menuBtn.classList.toggle("openmenu");
if (menuBtn.classList.contains("openmenu")) {
mobileMenuAnimation.play();
} else {
mobileMenuAnimation.reverse();
}
});
}
// Close From Overlay
if (mobileMenuOverlay) {
mobileMenuOverlay.addEventListener("click", (e) => {
e.preventDefault();
// mobileMenuAnimation.reverse()
menuBtn.classList.toggle("openmenu");
if (menuBtn.classList.contains("openmenu")) {
mobileMenuAnimation.play();
} else {
mobileMenuAnimation.reverse();
}
});
}
// Footer // set the contact call number
var footerCallLink = document.getElementById('call-link');
if (footerCallLink) {
footerCallLink.setAttribute('href', 'tel:0504448524');
footerCallLink.setAttribute('href', 'tel:009660545941651');
} else {
console.error("Element with ID 'call-link' not found.");
}
// Scroll To Top
let scrollToTop = document.querySelector(".scroll-top");
gsap.from(scrollToTop, {
duration: 1,
opacity: 0,
scrollTrigger: {
trigger: document.body,
start: "100vh top",
end: "bottom top",
scrub: true
}
});
if (scrollToTop) {
scrollToTop.addEventListener("click", () => {
gsap.to(window, { duration: 1, scrollTo: 0 });
});
}
})

4039
odex25_base/odex_new_website/static/src/css/hdr_footer.css
View File

File diff suppressed because it is too large Load Diff

2
odex25_base/odex_new_website/static/src/css/hdr_footer.css.map
View File

File diff suppressed because one or more lines are too long

4060
odex25_base/odex_new_website/static/src/css/hdr_footer.scss
View File

File diff suppressed because it is too large Load Diff

14
odex25_base/odex_new_website/static/src/css/index.css
View File

@ -2765,14 +2765,14 @@
margin-bottom: 30px;
}
.header .swiper.cta .swiper-wrapper .swiper-slide .content-home .call-to-action-headline .title {
font-size: 24px;
font-size: 22px;
font-weight: 500;
color: white;
text-transform: initial;
margin-bottom: 0px;
}
.header .swiper.cta .swiper-wrapper .swiper-slide .content-home .call-to-action-headline .call-to-action-message {
font-size: 18px;
font-size: 16px;
font-weight: 300;
color: white;
text-transform: initial;
@ -2848,7 +2848,7 @@
margin-bottom: 30px;
}
.courses_show_case_container .section_title_container h2 {
font-size: 24px;
font-size: 22px;
font-weight: 700;
color: #2D2D2D;
text-align: center;
@ -2856,7 +2856,7 @@
margin-bottom: 30px;
}
.courses_show_case_container .section_title_container h3 {
font-size: 18px;
font-size: 16px;
font-weight: 300;
color: #8F8F8F;
text-align: center;
@ -3088,7 +3088,7 @@
padding: 100px 40px;
}
.our_team_container h2 {
font-size: 24px;
font-size: 22px;
font-weight: 700;
color: white;
text-align: center;
@ -3127,13 +3127,13 @@
padding-inline-start: 30px;
}
.our_team_container .our_team_sectors .sector .sector_content h3 {
font-size: 18px;
font-size: 16px;
font-weight: 700;
color: white;
text-align: start;
}
.our_team_container .our_team_sectors .sector .sector_content span {
font-size: 16px;
font-size: 15px;
font-weight: 400;
color: white;
text-align: start;

14
odex25_base/odex_new_website/static/src/css/index.scss
View File

@ -2719,14 +2719,14 @@
gap: 20px;
margin-bottom: 30px;
.title{
font-size: 24px;
font-size: 22px;
font-weight: 500;
color: white;
text-transform: initial;
margin-bottom: 0px;
}
.call-to-action-message{
font-size: 18px;
font-size: 16px;
font-weight: 300;
color: $accent;
text-transform: initial;
@ -2805,7 +2805,7 @@
height: auto;
margin-bottom: 30px;
h2{
font-size: 24px;
font-size: 22px;
font-weight: 700;
color: #2D2D2D;
text-align: center;
@ -2813,7 +2813,7 @@
margin-bottom: 30px;
}
h3{
font-size: 18px;
font-size: 16px;
font-weight: 300;
color: #8F8F8F;
text-align: center;
@ -3047,7 +3047,7 @@
background-size: cover;
padding: 100px 40px;
h2{
font-size: 24px;
font-size: 22px;
font-weight: 700;
color: white;
text-align: center;
@ -3083,13 +3083,13 @@
border-left: 3px solid white;
padding-inline-start: 30px;
h3{
font-size: 18px;
font-size: 16px;
font-weight: 700;
color: white;
text-align: start;
}
span{
font-size: 16px;
font-size: 15px;
font-weight: 400;
color: white;
text-align: start;

4
odex25_base/odex_new_website/template/courses.xml
View File

@ -957,6 +957,10 @@
</div>
</div>
<div class="scroll-top">
<img src="/odex_new_website/static/img/top.png" alt="" title=""/>
</div>
</div>
</t>
</template>

72
odex25_base/odex_new_website/template/header.xml
View File

@ -2,29 +2,83 @@
<odoo>
<template id="my_header" inherit_id="website.layout" name="Header">
<!-- <xpath expr="//header/div[hasclass('navbar')]" position="replace"> -->
<!-- <xpath expr="//header//nav" position="replace"> -->
<xpath expr="//header//nav" position="replace">
<nav class="navbar">
<div class="menu-container">
<div id="menu-btn-container">
<div class="menu-mobile" id="menu">
<div class="menu-lines">
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="popup-container">
<div class="popup-overlay"></div>
<div class="popup-menu">
<div class="popup-overlay-transition"></div>
<div class="popup-menu-container">
<div class="user-settings-mobile-container">
</div>
<div class="user-login-info">
<div class="user-img">
<t t-if="uid">
<img t-att-src="'data:image/png;base64,%s' % to_text(request.env.user.partner_id.image_128)" alt="user image"/>
</t>
<t t-else="">
<img src="/odex_new_website/static/img/public-user.png" alt="default user image" loading="lazy"/>
</t>
</div>
<div class="user-name-email">
<t t-if="uid">
<p class="user-login-name" t-field="request.env.user.partner_id"/>
</t>
<t t-else="">
</t>
<p class="user-login-email" t-field="request.env.user.email"/>
</div>
</div>
<div class="popup-content">
<div class="popup-links">
<a class="sequence" href="/">Home</a>
<a class="sequence" href="/courses">Training courses</a>
</div>
<div class="lang-container-mobile">
<t t-call="website.language_selector_inline"/>
</div>
<div class="logout-btn">
<t t-if="uid">
<a role="menuitem" id="o_logout" class="dropdown-item" data-oe-model="ir.ui.view" data-oe-id="441" data-oe-field="arch" data-oe-xpath="/t[1]/li[1]/div[1]/a[1]" href="/web/session/logout?redirect=/">Logout<img src="/odex_new_website/static/img/logout.png" alt=""/></a>
</t>
<t t-else="">
</t>
</div>
<div class="social">
<a href="#"><img src="/odex_new_website/static/img/youtube.png" alt="" title=""/></a>
<a href="#"><img src="/odex_new_website/static/img/facebook.png" alt="" title=""/></a>
<a href="#"><img src="/odex_new_website/static/img/x.png" alt="" title=""/></a>
<a href="#"><img src="/odex_new_website/static/img/linkedin.png" alt="" title=""/></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="logo">
<a href="/">
<img src="/odex_new_website/static/img/logo.png" alt="" title=""/>
</a>
</div>
<ul class="main_menu">
<li><a href="/">Home</a></li>
<li><a href="/courses">Training courses</a></li>
<li><a href="/" data-replace="Home"><span>Home</span></a></li>
<li><a href="/courses" data-replace="Training courses"><span>Training courses</span></a></li>
</ul>
<div class="nav_actions">
<a href="">Search</a>
<span class="divider"></span>
<!-- <t t-if="uid">
<a role="menuitem" id="o_logout" class="dropdown-item" data-oe-model="ir.ui.view" data-oe-id="441" data-oe-field="arch" data-oe-xpath="/t[1]/li[1]/div[1]/a[1]" href="/web/session/logout?redirect=/">Logout<img src="/odex_website/static/img/logout.svg" alt=""/></a>
</t>
<t t-else="">
</t> -->
<div class="signin">
<!-- Sign In -->
<t t-call="portal.placeholder_user_sign_in">

4
odex25_base/odex_new_website/template/index.xml
View File

@ -277,6 +277,10 @@
</div>
</div>
<div class="scroll-top">
<img src="/odex_new_website/static/img/top.png" alt="Scroll To Top" title=""/>
</div>
</div>
<!-- <script src="/odex_new_website/static/js/aos.js"></script> -->
</t>