Skip to main content
Kreller Group
Lost password?
Kreller Group
Lost password?

Hello, Friends!

We provide demo accounts for easy access. Click below to view the credentials.

Welcome Back!

Here are the login credentials for your access:

# Username Password
1. student1 Abcd_1234
2. student2 Abcd_1234
3. student3 Abcd_1234
4. teacher1 Abcd_1234
5. teacher2 Abcd_1234

Demo Accounts

Here are the login credentials for your access:

# Username Password
1. student1 Abcd_1234
2. student2 Abcd_1234
3. student3 Abcd_1234
4. teacher1 Abcd_1234
5. teacher2 Abcd_1234
You are not logged in.
Data retention summary
// Professional Enhancements for Block04 document.addEventListener('DOMContentLoaded', function() { // 1. Card Numbering with Animation const cards = document.querySelectorAll('.single-project'); cards.forEach((card, index) => { // Add number indicator const numberDiv = document.createElement('div'); numberDiv.className = 'card-number'; numberDiv.textContent = index + 1; numberDiv.style.opacity = '0'; numberDiv.style.transform = 'scale(0.5)'; card.appendChild(numberDiv); // Animate number in setTimeout(() => { numberDiv.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)'; numberDiv.style.opacity = '1'; numberDiv.style.transform = 'scale(1)'; }, 100 + (index * 100)); // Add country badge based on content const title = card.querySelector('h5 a'); if (title) { const titleText = title.textContent.toLowerCase(); // Country detection logic const countries = { 'south america': 'SOUTH AMERICA', 'russia': 'RUSSIA', 'greece': 'GREECE', 'usa': 'USA', 'canada': 'CANADA', 'europe': 'EUROPE', 'asia': 'ASIA', 'australia': 'AUSTRALIA' }; let matchedCountry = null; for (const [key, value] of Object.entries(countries)) { if (titleText.includes(key)) { matchedCountry = value; break; } } if (matchedCountry) { const badge = document.createElement('div'); badge.className = 'country-badge'; badge.textContent = matchedCountry; const projectInner = card.querySelector('.project-inner'); if (projectInner) { projectInner.insertBefore(badge, projectInner.firstChild); // Animate badge badge.style.opacity = '0'; badge.style.transform = 'translateY(20px)'; setTimeout(() => { badge.style.transition = 'all 0.5s ease'; badge.style.opacity = '1'; badge.style.transform = 'translateY(0)'; }, 300 + (index * 100)); } } } // 2. Add hover effect for cards card.addEventListener('mouseenter', function() { this.style.zIndex = '10'; // Add floating animation const number = this.querySelector('.card-number'); if (number) { number.style.transform = 'scale(1.15) rotate(5deg)'; } }); card.addEventListener('mouseleave', function() { this.style.zIndex = '1'; const number = this.querySelector('.card-number'); if (number) { number.style.transform = 'scale(1)'; } }); }); // 3. Enhanced View All Button with Ripple Effect const viewAllBtn = document.querySelector('.hire-us-btn'); if (viewAllBtn) { // Add ripple effect viewAllBtn.addEventListener('click', function(e) { // Create ripple const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.cssText = ` position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transform: scale(0); animation: ripple 0.6s linear; width: ${size}px; height: ${size}px; top: ${y}px; left: ${x}px; z-index: 0; `; this.appendChild(ripple); // Remove ripple after animation setTimeout(() => { ripple.remove(); }, 600); // Smooth scroll if needed if (this.getAttribute('href') === '#') { e.preventDefault(); const carousel = document.querySelector('#block04design1Carousel'); if (carousel) { carousel.scrollIntoView({ behavior: 'smooth', block: 'center' }); } } }); // Add tooltip viewAllBtn.setAttribute('title', 'Explore all case studies'); // Add keyboard navigation viewAllBtn.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); } }); } // 4. Auto-rotate carousel with pause on hover const carousels = [ document.querySelector('#block04design1Carousel'), document.querySelector('#block04design1CarouselMobile') ]; carousels.forEach((carousel, index) => { if (!carousel) return; let autoRotate = true; let rotationInterval; function startRotation() { if (autoRotate) { rotationInterval = setInterval(() => { const nextBtn = carousel.querySelector('.carousel-control-next'); if (nextBtn) { nextBtn.click(); } }, 5000); } } function stopRotation() { clearInterval(rotationInterval); } // Pause on hover carousel.addEventListener('mouseenter', stopRotation); carousel.addEventListener('mouseleave', () => { if (autoRotate) { startRotation(); } }); // Start rotation startRotation(); // Add progress indicator const progressBar = document.createElement('div'); progressBar.className = 'carousel-progress'; progressBar.style.cssText = ` position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, #ff7a18, #ffb347); width: 0%; z-index: 10; transition: width 5s linear; border-radius: 0 0 20px 20px; `; const carouselInner = carousel.querySelector('.carousel-inner'); if (carouselInner) { carouselInner.appendChild(progressBar); // Update progress bar carousel.addEventListener('slide.bs.carousel', function() { progressBar.style.width = '100%'; progressBar.style.transition = 'width 5s linear'; setTimeout(() => { progressBar.style.width = '0%'; progressBar.style.transition = 'none'; setTimeout(() => { progressBar.style.transition = 'width 5s linear'; }, 50); }, 5000); }); } }); // 5. Intersection Observer for animations const observerOptions = { threshold: 0.2, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animated'); // Animate child elements sequentially const cards = entry.target.querySelectorAll('.single-project'); cards.forEach((card, i) => { setTimeout(() => { card.style.animation = `fadeInUp 0.6s ease forwards`; card.style.opacity = '1'; }, i * 150); }); } }); }, observerOptions); // Observe carousel sections const sections = document.querySelectorAll('.block04design1'); sections.forEach(section => observer.observe(section)); // 6. Performance optimization with debounce function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Handle window resize window.addEventListener('resize', debounce(() => { const cards = document.querySelectorAll('.single-project'); cards.forEach(card => { const number = card.querySelector('.card-number'); if (number && window.innerWidth < 768) { number.style.width = '40px'; number.style.height = '40px'; number.style.fontSize = '16px'; } else if (number) { number.style.width = '45px'; number.style.height = '45px'; number.style.fontSize = '18px'; } }); }, 250)); // 7. Analytics tracking (optional) function trackCardClick(cardNumber, cardTitle) { if (typeof gtag !== 'undefined') { gtag('event', 'card_click', { 'card_number': cardNumber, 'card_title': cardTitle, 'event_category': 'engagement' }); } // Also log to console for debugging console.log(`Card ${cardNumber} clicked: ${cardTitle}`); } // Attach click tracking to all cards document.querySelectorAll('.single-project').forEach(card => { card.addEventListener('click', function() { const number = this.querySelector('.card-number')?.textContent || 'unknown'; const title = this.querySelector('h5 a')?.textContent || 'untitled'; trackCardClick(number, title); }); }); }); // 8. Keyboard navigation for carousel document.addEventListener('keydown', function(e) { const activeCarousel = document.querySelector('.carousel.showing'); if (!activeCarousel) return; switch(e.key) { case 'ArrowLeft': const prevBtn = activeCarousel.querySelector('.carousel-control-prev'); if (prevBtn) prevBtn.click(); break; case 'ArrowRight': const nextBtn = activeCarousel.querySelector('.carousel-control-next'); if (nextBtn) nextBtn.click(); break; } }); // 9. Smooth scroll function for View All button function smoothScrollToCarousel() { const carousel = document.querySelector('#block04design1Carousel'); if (carousel) { carousel.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }
Powered by Moodle