1class MyFooter extends HTMLElement { 2 connectedCallback() { 3 this.innerHTML = ` 4 <!-- ======= Futuristic Modern Footer ======= --> 5 <footer id="footer" class="footer-modern futuristic-footer position-relative overflow-hidden"> 6 7 <!-- Background Video --> 8 <video class="footer-video" autoplay muted loop playsinline> 9 <source src="assets/video/BG7.mp4" type="video/mp4"> 10 </video> 11 12 <!-- Animated Glow --> 13 <div class="footer-glow"></div> 14 15 <div class="footer-content"> 16 <div class="container py-3"> 17 <div class="row gy-4"> 18 19 <!-- Company Info --> 20 <div class="col-lg-4 col-md-6"> 21 <h3 class="footer-brand">Junzo Sdn Bhd</h3> 22 <p class="footer-small mb-3"> 23 <strong>201101019225 (947358-P)</strong><br><br> 24 25 <strong>HQ</strong><br> 26 Stellar Suites, Jalan Puteri 4/7,<br> 27 Bandar Puteri, 47100 Puchong,<br> 28 Selangor, Malaysia<br><br> 29 30 <strong>Penang Branch</strong><br> 31 D'Piazza Mall, Jalan Mahsuri,<br> 32 Bayan Baru, 11900 Bayan Lepas,<br> 33 Penang, Malaysia<br><br> 34 35 <strong>Phone:</strong> (+603) 8603 2585 / (+604) 611 5278<br> 36 <strong>Email:</strong> [email protected] 37 </p> 38 </div> 39 40 <!-- Quick Links --> 41 <div class="col-lg-3 col-md-6"> 42 <br> 43 <h4 class="footer-title">Quick Links</h4> 44 <ul class="footer-links list-unstyled"> 45 <li><a href="index.html">Home</a></li> 46 <li><a href="about.html">About Us</a></li> 47 <li><a href="services.html">Consultancy & Training</a></li> 48 <li><a href="gallery.html">Gallery</a></li> 49 <li><a href="Join-trainer.html">Join Our Trainer Team</a></li> 50 </ul> 51 </div> 52 53 <!-- Training --> 54 <div class="col-lg-2 col-md-6"> 55 <br> 56 <h4 class="footer-title">Training</h4> 57 <ul class="footer-links list-unstyled"> 58 <li><a href="SAP-training.html">SAP Training</a></li> 59 <li><a href="Soft-Skills-Training.html">Soft Skills</a></li> 60 <li><a href="IT-Training-programme.html">IT Training</a></li> 61 <li><a href="Artificial_Intelligence_training.html">AI Training</a></li> 62 <li><a href="Training-Course-Schedules.html">Schedules</a></li> 63 <li><a href="Custom_Training.html">Custom Training</a></li> 64 </ul> 65 </div> 66 67 <!-- Newsletter + Social --> 68 <div class="col-lg-3 col-md-6"> 69 <br> 70 <h4 class="footer-title">Stay Connected</h4> 71 <p class="footer-small">Get updates on our latest SAP training programs.</p> 72 73 <form action="https://formsubmit.co/[email protected]" method="POST" class="d-flex mb-3 footer-form"> 74 <input type="hidden" name="_subject" value="Newsletter Subscription"> 75 <input type="email" name="email" placeholder="Your Email" required class="form-control me-2"> 76 <button type="submit" class="btn btn-primary btn-sm futuristic-btn">Subscribe</button> 77 </form> 78 79 <div class="footer-social d-flex gap-3 mb-3"> 80 <a href="https://www.facebook.com/JunzoMY" target="_blank"><i class="bi bi-facebook"></i></a> 81 <a href="https://www.instagram.com/junzo.my" target="_blank"><i class="bi bi-instagram"></i></a> 82 <a href="https://www.tiktok.com/@junzo.my" target="_blank"><i class="bi bi-tiktok"></i></a> 83 <a href="https://my.linkedin.com/company/junzo" target="_blank"><i class="bi bi-linkedin"></i></a> 84 </div> 85 86 <div class="footer-certifications d-flex gap-3"> 87 <img src="assets/img/ai logo/sap_partner.png" alt="SAP Partner"> 88 <img src="assets/img/ai logo/hrdf_nobg.png" alt="HRDF"> 89 <img src="assets/img/MD_logo.png" alt="MD"> 90 </div> 91 </div> 92 93 </div> 94 </div> 95 96 <div class="footer-bottom text-center"> 97 © <span id="CurrentYear"></span> Junzo Sdn Bhd. All rights reserved. 98 </div> 99 100 </div> 101 </footer> 102 `; 103 } 104} 105 106/* ======================= 107 FUTURISTIC STYLES 108======================= */ 109 110const style = document.createElement('style'); 111style.innerHTML = ` 112.futuristic-footer { 113 background: radial-gradient(circle at 20% 20%, #0a1f3d, #050d1f 70%); 114 color: #fff; 115 position: relative; 116} 117
118/* Background Video */ 119.footer-video { 120 position: absolute; 121 top: 0; 122 left: 0; 123 width: 100%; 124 height: 100%; 125 object-fit: cover; 126 opacity: 0.5; 127 z-index: 1; 128} 129 130/* Animated Glow */ 131.footer-glow { 132 position: absolute; 133 width: 600px; 134 height: 600px; 135 background: radial-gradient(circle, rgba(13,110,253,0.5), transparent 70%); 136 top: -200px; 137 right: -200px; 138 animation: glowMove 8s ease-in-out infinite alternate; 139 z-index: 2; 140} 141 142@keyframes glowMove { 143 from { transform: translate(0,0) scale(1); } 144 to { transform: translate(-120px,100px) scale(1.2); } 145} 146 147.footer-content { 148 position: relative; 149 z-index: 3; 150 backdrop-filter: blur(8px); 151} 152 153.footer-brand { 154 font-size: 1.4rem; 155 font-weight: 700; 156 background: linear-gradient(90deg,#fff,#0d6efd); 157 -webkit-background-clip: text; 158 -webkit-text-fill-color: transparent; 159} 160 161.footer-title { 162 font-weight: 600; 163 font-size: 1rem; 164 margin-bottom: 1rem; 165 position: relative; 166} 167 168.footer-title::after { 169 content: ""; 170 width: 40px; 171 height: 2px; 172 background: #0d6efd; 173 position: absolute; 174 bottom: -6px; 175 left: 0; 176} 177 178.footer-small { 179 font-size: 1rem; 180 color: #ccc; 181 line-height: 1.7; 182} 183 184.footer-links a { 185 font-size: 1rem; 186 color: #aaa; 187 transition: 0.3s; 188} 189 190.footer-links a:hover { 191 color: #0d6efd; 192 padding-left: 6px; 193} 194 195.footer-form input { 196 background: rgba(255,255,255,0.1); 197 border: 1px solid rgba(255,255,255,0.2); 198 color: #fff; 199} 200 201.footer-form input::placeholder { 202 color: #bbb; 203} 204 205.futuristic-btn { 206 background: linear-gradient(90deg,#0d6efd,#00c6ff); 207 border: none; 208 font-weight: 600; 209} 210 211.footer-social i { 212 font-size: 1.4rem; 213 color: #bbb; 214 transition: 0.3s; 215} 216 217.footer-social a:hover i { 218 color: #0d6efd; 219 transform: translateY(-4px) scale(1.1); 220} 221 222.footer-certifications img { 223 height: 42px; 224} 225 226.footer-certifications img:hover { 227 opacity: 1; 228 transform: scale(1.05); 229} 230 231.footer-bottom { 232 border-top: 1px solid rgba(255,255,255,0.1); 233 padding: 1.2rem 0; 234 background: rgba(0,0,0,0.4); 235} 236 237/* Hide video on mobile */ 238@media (max-width: 768px) { 239 .footer-video { 240 display: none; 241 } 242} 243 244/* WhatsApp Button */ 245.whatsapp-float { 246 position: fixed; 247 bottom: 20px; 248 right: 100px; 249 z-index: 9999; 250 background-color: #128C4A; 251 border-radius: 50%; 252 padding: 10px; 253 animation: pulse 1.5s infinite; 254} 255.whatsapp-float:hover { 256 transform: scale(1.1); 257} 258.whatsapp-float img { width: 40px; height: 40px; } 259@keyframes pulse { 260 0% { box-shadow: 0 0 0 0 rgba(18,140,74,0.6); } 261 70% { box-shadow: 0 0 0 15px rgba(18,140,74,0); } 262 100% { box-shadow: 0 0 0 0 rgba(18,140,74,0); } 263} 264 265/* AI Chatbot Floating Button */ 266.ai-chatbot-float { 267 position: fixed; 268 bottom: 20px; 269 right: 24px; 270 z-index: 9999; 271 width: 60px; 272 height: 60px; 273 background: linear-gradient(135deg, #0d6efd, #00c6ff); 274 border-radius: 50%; 275 display: flex; 276 align-items: center; 277 justify-content: center; 278 cursor: pointer; 279 280 /* Glow effect */ 281 box-shadow: 0 0 10px #0d6efd, 0 0 20px #00c6ff, 0 0 40px #00c6ff; 282 animation: aiGlow 2s infinite alternate; 283 transition: 0.3s; 284} 285 286.ai-chatbot-float i { 287 color: #fff; 288 font-size: 1.5rem; 289} 290 291/* Hover effect */ 292.ai-chatbot-float:hover { 293 transform: scale(1.1); 294 box-shadow: 0 0 20px #00c6ff, 0 0 40px #0d6efd, 0 0 60px #00c6ff; 295} 296 297/* Glow animation */ 298@keyframes aiGlow { 299 from { 300 box-shadow: 0 0 10px #0d6efd, 0 0 20px #00c6ff; 301 } 302 to { 303 box-shadow: 0 0 25px #00c6ff, 0 0 50px #0d6efd; 304 } 305} 306`; 307document.head.appendChild(style); 308 309customElements.define('my-footer', MyFooter); 310 311// WhatsApp floating button 312const whatsappBtn = document.createElement('a'); 313whatsappBtn.href = "https://wa.me/601168367068"; 314whatsappBtn.target = "_blank"; 315whatsappBtn.className = "whatsapp-float futuristic-btn-float"; 316whatsappBtn.innerHTML = '<img src="https://img.icons8.com/color/48/000000/whatsapp--v1.png" alt="WhatsApp">'; 317document.body.appendChild(whatsappBtn); 318 319const aiBtn = document.createElement('div'); 320aiBtn.className = "ai-chatbot-float"; 321aiBtn.innerHTML = '<img src="assets/img/ai logo/aibotlogo.gif" style="width:60px;height:60px;border-radius:50%;">';; 322document.body.appendChild(aiBtn); 323 324// Click to open chat 325aiBtn.addEventListener("click", function () { 326 if (typeof Tawk_API !== "undefined") { 327 Tawk_API.maximize(); 328 } 329}); 330 331 332// LiveChat AI floating script 333var Tawk_API = Tawk_API || {}; 334Tawk_API.onLoad = function () { 335 Tawk_API.hideWidget(); // hide default bubble 336}; 337 338var Tawk_API = Tawk_API || {}; 339var Tawk_LoadStart = new Date(); 340 341(function () { 342 var s1 = document.createElement("script"), 343 s0 = document.getElementsByTagName("script")[0]; 344 345 s1.async = true; 346 s1.src = 'https://embed.tawk.to/69f9478f3527a91c385867be/1jnqrv2rg'; 347 s1.charset = 'UTF-8'; 348 s1.setAttribute('crossorigin', '*'); 349 350 s0.parentNode.insertBefore(s1, s0); 351})(); 352 353// Year auto-update 354document.addEventListener("DOMContentLoaded", function () { 355 const currentYear = new Date().getFullYear(); 356 document.getElementById("CurrentYear").textContent = currentYear; 357});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.