diff --git a/Assets/Images/mit-ico/accenture.svg b/Assets/Images/mit-ico/accenture.svg new file mode 100644 index 0000000..a4baf78 --- /dev/null +++ b/Assets/Images/mit-ico/accenture.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Assets/Images/mit-ico/ebmpapst.svg b/Assets/Images/mit-ico/ebmpapst.svg new file mode 100644 index 0000000..bf03486 --- /dev/null +++ b/Assets/Images/mit-ico/ebmpapst.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Assets/Images/mit-ico/hcl.svg b/Assets/Images/mit-ico/hcl.svg new file mode 100644 index 0000000..edf7974 --- /dev/null +++ b/Assets/Images/mit-ico/hcl.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/Assets/Images/mit-ico/infosys.svg b/Assets/Images/mit-ico/infosys.svg new file mode 100644 index 0000000..0086c3a --- /dev/null +++ b/Assets/Images/mit-ico/infosys.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Assets/Images/mit-ico/jbl.svg b/Assets/Images/mit-ico/jbl.svg new file mode 100644 index 0000000..b235111 --- /dev/null +++ b/Assets/Images/mit-ico/jbl.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Assets/Images/mit-ico/ust.svg b/Assets/Images/mit-ico/ust.svg new file mode 100644 index 0000000..995c6af --- /dev/null +++ b/Assets/Images/mit-ico/ust.svg @@ -0,0 +1,3 @@ + + + diff --git a/footer.html b/footer.html deleted file mode 100644 index 8f60f76..0000000 --- a/footer.html +++ /dev/null @@ -1,376 +0,0 @@ - - \ No newline at end of file diff --git a/index.html b/index.html index 160c07f..b0fa57c 100644 --- a/index.html +++ b/index.html @@ -5,458 +5,7 @@ Kodepilot Clone - + @@ -569,110 +118,6 @@ - - -
@@ -707,8 +152,92 @@
-
-
+
+
+
+
+ +
+
+
+ Business Meeting +
+

Business Innovation

+

Modern workspace collaboration

+
+
+
+ Architecture +
+

Modern Architecture

+

Contemporary design solutions

+
+
+
+
+ + +
+
+
+ Analytics +
+

Data Analytics

+

Business intelligence insights

+
+
+
+ Technology +
+

Technology Hub

+

Innovation and development

+
+
+
+
+ + +
+
+
+ Creativity +
+

Creative Space

+

Inspiration and expression

+
+
+
+ Beach +
+

Tropical Paradise

+

Natural beauty and relaxation

+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+

Our Numbers

@@ -745,229 +274,150 @@
- - +

Learning Paths

+ + +
+

Resources

+ +

Community

+ +
+ +
+
+
+ About Us + Contact Us + Careers + We're hiring • + Instructors + Become an Instructor +
+
+ Student Reviews + FAQs + Course Catalog + Certificates + Student Support +
+
+ Affiliate Program + Corporate Training + Bulk Enrollment + Student Discount +
+
+ Terms & Conditions + Privacy Policy + Refund Policy + Sitemap +
+

+ Copyright © 2025 Kode Pilot Learning Pvt Ltd - All rights + reserved. +

+
+
+ + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..26d79f6 --- /dev/null +++ b/main.css @@ -0,0 +1,1123 @@ + body { + margin: 0; + font-family: Arial, sans-serif; + background: #fff; + color: #333; + } + + .navbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 30px; + background: #fff; + border-bottom: 1px solid #eee; + } + + .logo { + font-size: 22px; + font-weight: bold; + color: #003366; + } + + .search { + flex: 1; + margin: 0 20px; + padding: 8px 12px; + border: 1px solid #ddd; + border-radius: 20px; + } + + nav a { + margin: 0 10px; + text-decoration: none; + color: #333; + } + + .buttons button { + margin-left: 10px; + padding: 8px 15px; + border: none; + border-radius: 20px; + cursor: pointer; + } + + .host { + background: #eee; + } + + .business { + background: #ffcc00; + } + + .login { + background: #007bff; + color: #fff; + } + + .hero { + text-align: start; + padding: 50px 20px; + line-height: 20px; + } + + .hero h1 { + font-size: 42px; + color: #383838; + } + + .hero h1 .blue_text { + color: #1c4980; + } + + .hero p { + font-size: 18px; + color: #717171; + font-size: 16px; + line-height: 140%; + margin-top: 12px; + margin-bottom: 0; + width: 470px; + } + + .hero_container { + display: flex; + gap: 40px; + max-width: 1200px; + margin: auto; + padding: 20px; + flex-wrap: wrap; + } + + .cards_box { + margin-top: 80px; + flex: 1 1 300px; + } + + .cards { + flex: 2 1 60px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 20px; + } + + .card { + position: relative; + border-radius: 12px; + cursor: pointer; + padding: 12px 16px; + overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; + height: 90px; + } + + .card:hover { + transform: translateY(-10px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); + } + + + .card small { + display: block; + margin-top: 10px; + font-weight: normal; + } + + .green { + background: #9BE6C1; + } + + .orange { + background: #fec192; + } + + .blue { + background: #9bc9ff; + background-image: url('https://d8it4huxumps7.cloudfront.net/uploads/images/67724b0c0d0f7_img1.png?d=211x163'); + background-size: 140px; + background-repeat: no-repeat; + background-position: bottom right; + } + + + .purple { + background: #c8bbff; + } + + .yellow { + background: #ffdd80; + color: #333; + } + + .pink { + background: #ffb1cc; + } + + .users { + padding: 0px 20px; + display: flex; + justify-content: center; + align-items: center; + text-align: start; + } + + .users_box { + max-width: 1200px; + } + + .know-cards { + display: flex; + justify-content: space-between; + align-items: center; + } + + .user-cards { + display: flex; + justify-content: center; + gap: 20px; + margin-top: 30px; + flex-wrap: wrap; + } + + .button_blue_box { + margin-top: 24px; + padding: 8px 25px 8px 10px; + border: 0px solid #717171; + background-color: #ebe8fd; + display: flex; + align-items: center; + gap: 10px; + border-radius: 50px; + } + + .nameContainer { + display: flex; + color: #717171; + } + + .crd { + display: flex; + align-items: center; + gap: 16px; + padding: 16px; + border: 1px solid #ddd; + border-radius: 12px; + background: #fff; + max-width: 600px; + margin-left: 10px; + margin-right: 10px; + } + + .crd img { + flex-shrink: 0; + border-radius: 8px; + padding: 8px; + height: 79px; + width: auto; + } + + .crd .h4 { + font-size: 16px; + font-weight: 500; + line-height: 140%; + color: #383838; + margin-bottom: 6px; + } + + .crd p { + font-size: 12px; + line-height: 140%; + color: #383838; + } + + .knon_more { + margin-left: 50%; + margin-top: 20px; + } + + .user-card { + background: #f9f9f9; + padding: 20px; + border-radius: 12px; + width: 280px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + } + + .mnc { + padding: 40px 20px; + display: flex; + justify-content: center; + align-items: center; + text-align: start; + } + + .mnc-box { + display: flex; + align-items: center; + max-width: 1200px; + + } + + .mnc-row { + display: flex; + align-items: center; + gap: 40px; + flex-wrap: wrap; + } + + .mnc h2 { + font-size: 22px; + font-weight: 600; + } + + .mnc h2 .gray, + .mnc h2 .blue_text { + display: block; + } + + .mnc h2 .blue_text { + color: #1c4980; + } + + + .mnc-logos { + display: flex; + align-items: center; + gap: 40px; + flex-wrap: wrap; + } + + .mnc-logos img { + height: 40px; + object-fit: contain; + transition: transform 0.3s ease; + } + + .mnc-logos img:hover { + transform: scale(1.1); + } + + .our-numbers { + max-width: 1200px; + margin: 0 auto 47px auto; + } + + .our-numbers h2 { + text-align: center; + font-size: 2.5rem; + color: #2d3748; + margin-bottom: 20px; + font-weight: 600; + } + + .stats-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 20px; + justify-items: center; + align-items: stretch; + } + + .stat-item { + background: HSL(0, 0%, 96.5%); + text-align: center; + padding: 20px 10px; + border-radius: 14px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 120px; + width: 100%; + box-sizing: border-box; + } + + .stat-number { + display: block; + font-size: clamp(1.8rem, 2.5vw, 3rem); + font-weight: 700; + color: #2d3748; + margin-bottom: 10px; + line-height: 1; + white-space: nowrap; + } + + .stat-number .highlight { + color: #3182ce; + } + + .highlight { + color: #1c4980; + } + + .stat-label { + font-size: clamp(0.8rem, 1vw, 1rem); + color: #718096; + font-weight: 500; + text-transform: capitalize; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + } + + @media (max-width: 1024px) { + .stats-grid { + grid-template-columns: repeat(3, 1fr); + gap: 15px; + } + + .stat-item { + min-height: 100px; + padding: 15px 8px; + } + } + + @media (max-width: 768px) { + .our-numbers { + padding: 40px 20px; + } + + .our-numbers h2 { + font-size: 2rem; + margin-bottom: 40px; + } + + .stats-grid { + grid-template-columns: repeat(2, 1fr); + gap: 30px; + } + + .stat-number { + font-size: 2.5rem; + } + + .stat-item { + min-height: 110px; + padding: 20px; + } + } + + @media (max-width: 480px) { + .stats-grid { + grid-template-columns: 1fr; + gap: 25px; + } + + .stat-number { + font-size: 2.2rem; + } + } + + @keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + + to { + opacity: 1; + transform: translateY(0); + } + } + + .stat-item { + animation: fadeInUp 0.6s ease forwards; + } + + .stat-item:nth-child(1) { + animation-delay: 0.1s; + } + + .stat-item:nth-child(2) { + animation-delay: 0.2s; + } + + .stat-item:nth-child(3) { + animation-delay: 0.3s; + } + + .stat-item:nth-child(4) { + animation-delay: 0.4s; + } + + .stat-item:nth-child(5) { + animation-delay: 0.5s; + } + + .stat-item:nth-child(6) { + animation-delay: 0.6s; + } + + .opportunity-section { + padding: 0 0 50px 0; + } + + .container { + max-width: 1152px; + margin: 0 auto; + } + + .header { + text-align: start; + margin-bottom: 10px; + } + + .title { + font-size: 35px; + font-weight: bold; + color: #111827; + margin-bottom: 10px; + } + + .header-content { + display: flex; + align-items: start; + justify-content: start; + gap: 16px; + } + + .subtitle { + color: #6b7280; + line-height: 0px; + } + + .arrow-icon { + width: 16px; + height: 16px; + } + + .cards-grid { + display: grid; + grid-template-columns: 1fr; + gap: 24px; + } + + @media (min-width: 768px) { + .cards-grid { + grid-template-columns: repeat(3, 1fr); + } + } + + @media (min-width: 1024px) { + .cards-grid { + grid-template-columns: repeat(5, 1fr); + } + } + + .card-add { + border-radius: 24px; + padding: 24px; + position: relative; + overflow: hidden; + min-height: 160px; + cursor: pointer; + transition: transform 0.3s ease; + } + + .card-add:hover { + transform: scale(1.05); + } + + .card-add h3 { + font-size: 20px; + font-weight: bold; + margin-bottom: 16px; + } + + .card-quizzes { + background: linear-gradient(to bottom right, #60a5fa, #2563eb); + color: white; + } + + .card-hackathons { + background: linear-gradient(to bottom right, #4ade80, #22c55e); + color: white; + } + + .card-scholarships { + background: linear-gradient(to bottom right, #a855f7, #7c3aed); + color: white; + } + + .card-conferences { + background: linear-gradient(to bottom right, #fed7aa, #fdba74); + color: #1f2937; + } + + .card-festivals { + background: linear-gradient(to bottom right, #facc15, #eab308); + color: #1f2937; + } + + .corces { + display: flex; + /* makes children in a row */ + flex-wrap: wrap; + /* wrap to next line if overflow */ + justify-content: center; + /* center overall row */ + align-items: flex-start; + /* align items at top */ + text-align: start; + max-width: 1200px; + margin: 0 auto 47px auto; + gap: 20px; + /* spacing between boxes */ + } + + .course-card { + height: 300px; + border: 1px solid #ddd; + border-radius: 8px; + overflow: hidden; + width: 300px; + font-family: Arial, sans-serif; + background: #fff; + } + + .course-card a { + text-decoration: none; + color: inherit; + } + + .course-image { + width: 100%; + height: 152px; + background-size: cover; + background-position: center; + } + + .course-content { + padding: 17px; + } + + .course-category { + font-size: 12px; + color: #888; + margin-bottom: 5px; + } + + .course-name { + display: block; + font-weight: bold; + margin-bottom: 5px; + color: #333; + } + + .course-description { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + text-overflow: ellipsis; + display: block; + max-height: 4.5em; + line-height: 1.5em; + } + + .hover-slider { + padding: 0 0 50px 0; + } + + .container-slider { + height: 200px; + max-width: 1152px; + margin: 0 auto; + display: flex; + gap: 20px; + align-items: center; + } + + .container-slider-baby { + width: 100px; + height: 100px; + background: red; + } + + .slide1r-container { + margin: 0 auto; + max-width: 1000px; + width: 100%; + position: relative; + border-radius: 20px; + padding: 25px; + font-family: 'Arial', sans-serif; + } + + .slide1r-wrapper { + overflow: hidden; + border-radius: 16px; + position: relative; + } + + .slide1r-track { + display: flex; + transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); + } + + .slide1 { + min-width: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .slide1-box { + display: flex; + gap: 25px; + width: 100%; + height: 300px; + } + + .image-container { + flex: 1; + height: 100%; + position: relative; + overflow: hidden; + border-radius: 16px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); + transition: all 0.3s ease; + } + + .image-container:hover { + transform: translateY(-5px); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18); + } + + .slide1-box img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.4s ease; + opacity: 0; + animation: fadeIn 0.5s ease forwards; + } + + .image-container:hover img { + transform: scale(1.05); + } + + /* Image overlays */ + .image-overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); + color: white; + padding: 20px; + transform: translateY(100%); + transition: transform 0.3s ease; + } + + .image-container:hover .image-overlay { + transform: translateY(0); + } + + .image-overlay h4 { + margin: 0 0 5px 0; + font-size: 16px; + font-weight: 600; + } + + .image-overlay p { + margin: 0; + font-size: 13px; + opacity: 0.9; + } + + /* Navigation buttons */ + .nav-button { + position: absolute; + outline: solid rgba(166, 166, 166, 0.485) 1px; + top: 50%; + transform: translateY(-50%); + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border: none; + width: 60px; + height: 60px; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + color: #333; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 10; + } + + .nav-button:hover { + background: white; + box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25); + } + + .prev-btn { + left: -50px; + } + + .next-btn { + right: -50px; + } + + .nav-button::before { + content: ''; + width: 12px; + height: 12px; + border-top: 2.5px solid currentColor; + border-right: 2.5px solid currentColor; + } + + .prev-btn::before { + transform: rotate(-135deg); + margin-left: 3px; + } + + .next-btn::before { + transform: rotate(45deg); + margin-right: 3px; + } + + /* Dots */ + .dots-container { + display: flex; + justify-content: center; + gap: 12px; + margin-top: 25px; + } + + .dot { + width: 14px; + height: 14px; + border-radius: 50%; + background: #e0e0e0; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + .dot.active { + background: #667eea; + transform: scale(1.3); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); + } + + .dot:hover:not(.active) { + background: #bbb; + transform: scale(1.1); + } + + /* Mobile responsive */ + @media (max-width: 768px) { + .slide1r-container { + margin: 15px; + padding: 20px; + } + + .slide1-box { + flex-direction: column; + gap: 15px; + height: auto; + } + + .image-container { + height: 250px; + } + + .nav-button { + width: 50px; + height: 50px; + font-size: 18px; + } + + .prev-btn { + left: -20px; + } + + .next-btn { + right: -20px; + } + + .image-overlay { + padding: 15px; + } + + .image-overlay h4 { + font-size: 15px; + } + + .image-overlay p { + font-size: 12px; + } + } + + @media (max-width: 480px) { + .slide1r-container { + padding: 15px; + } + + .slide1-box { + gap: 12px; + padding: 5px; + } + + .image-container { + height: 200px; + } + + .nav-button { + width: 45px; + height: 45px; + font-size: 16px; + } + + .prev-btn { + left: -15px; + } + + .next-btn { + right: -15px; + } + } + + @keyframes fadeIn { + to { + opacity: 1; + } + } + + .footer { + background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); + color: white; + padding: 60px 0 30px 0; + font-size: 14px; + } + + .footer-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 50px; + } + + .footer-section h3 { + font-size: 18px; + font-weight: 600; + margin-bottom: 20px; + color: #ffffff; + } + + .footer-section ul { + list-style: none; + } + + .footer-section ul li { + margin-bottom: 12px; + } + + .footer-section ul li a { + color: #cbd5e1; + text-decoration: none; + font-size: 14px; + transition: color 0.3s ease; + } + + .footer-section ul li a:hover { + color: #ffffff; + } + + .company-section { + grid-column: 1; + } + + .company-section .logo { + font-size: 28px; + font-weight: bold; + margin-bottom: 10px; + color: white; + } + + .company-section .tagline { + color: #cbd5e1; + margin-bottom: 30px; + font-size: 14px; + } + + .company-section .tagline .heart { + color: #ef4444; + } + + .contact-info { + margin-bottom: 20px; + } + + .contact-info h4 { + font-size: 16px; + margin-bottom: 15px; + color: white; + } + + .contact-item { + display: flex; + align-items: center; + margin-bottom: 10px; + color: #cbd5e1; + } + + .contact-item i { + margin-right: 10px; + width: 16px; + } + + .social-icons { + display: flex; + gap: 15px; + margin-top: 20px; + } + + .social-icons a { + color: #cbd5e1; + font-size: 20px; + transition: color 0.3s ease; + } + + .social-icons a:hover { + color: #ffffff; + } + + .newsletter-section { + margin-top: 30px; + } + + .newsletter-section h4 { + font-size: 16px; + margin-bottom: 10px; + color: white; + } + + .newsletter-section p { + color: #cbd5e1; + font-size: 13px; + margin-bottom: 15px; + line-height: 1.5; + } + + .newsletter-form { + display: flex; + margin-bottom: 15px; + } + + .newsletter-form input { + flex: 1; + padding: 12px 15px; + border: none; + border-radius: 6px 0 0 6px; + font-size: 14px; + outline: none; + } + + .newsletter-form button { + background-color: #3b82f6; + color: white; + border: none; + padding: 12px 20px; + border-radius: 0 6px 6px 0; + cursor: pointer; + font-size: 14px; + transition: background-color 0.3s ease; + } + + .newsletter-form button:hover { + background-color: #2563eb; + } + + .action-buttons { + display: flex; + gap: 10px; + } + + .btn { + padding: 10px 20px; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 13px; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 8px; + transition: background-color 0.3s ease; + } + + .btn-primary { + background-color: #3b82f6; + color: white; + } + + .btn-secondary { + background-color: #475569; + color: white; + } + + .btn:hover { + opacity: 0.9; + } + + .footer-bottom { + border-top: 1px solid #475569; + margin-top: 40px; + padding-top: 20px; + font-size: 12px; + color: #94a3b8; + text-align: left; + } + + .footer-bottom-links { + display: flex; + flex-wrap: wrap; + gap: 20px; + margin-top: 10px; + } + + .footer-bottom-links a { + color: #94a3b8; + text-decoration: none; + } + + .footer-bottom-links a:hover { + color: white; + } + + .hiring-badge { + background-color: #10b981; + color: white; + padding: 4px 8px; + border-radius: 12px; + font-size: 11px; + font-weight: 600; + margin-left: 5px; + } + + @media (max-width: 768px) { + .footer-container { + grid-template-columns: 1fr; + gap: 30px; + } + + .newsletter-form { + flex-direction: column; + } + + .newsletter-form input, + .newsletter-form button { + border-radius: 6px; + margin-bottom: 10px; + } + + .action-buttons { + flex-direction: column; + } + } \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..2318c21 --- /dev/null +++ b/main.js @@ -0,0 +1,285 @@ +function goToLogin() { + window.location.href = "/login"; +} + +(function () { + if (window.Slide1rSliderLoaded) { + return; + } + window.Slide1rSliderLoaded = true; + + class Slide1rSlider { + constructor() { + setTimeout(() => { + this.initSlider(); + }, 100); + } + + initSlider() { + try { + this.track = document.getElementById('slide1rTrack'); + this.slides = document.querySelectorAll('.slide1'); + this.prevBtn = document.getElementById('prevBtn'); + this.nextBtn = document.getElementById('nextBtn'); + + if (!this.track || this.slides.length === 0) { + console.warn("Slider DOM elements not found. Retrying..."); + // Retry after a short delay + setTimeout(() => this.initSlider(), 200); + return; + } + + this.currentIndex = 0; + this.totalSlides = this.slides.length; + this.autoPlayDuration = 5000; + + this.init(); + } catch (err) { + console.error("Slider initialization failed:", err); + } + } + + init() { + try { + this.updateSlider(); + this.bindEvents(); + this.startAutoPlay(); + this.bindKeyboardEvents(); + } catch (err) { + console.error("Slider init error:", err); + } + } + + + updateSlider() { + try { + const translateX = -this.currentIndex * 100; + this.track.style.transform = `translateX(${translateX}%)`; + + } catch (err) { + console.error("Error updating slider:", err); + } + } + + nextSlide() { + try { + this.currentIndex = (this.currentIndex + 1) % this.totalSlides; + this.updateSlider(); + this.restartAutoPlay(); + } catch (err) { + console.error("Error going to next slide:", err); + } + } + + prevSlide() { + try { + this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1; + this.updateSlider(); + this.restartAutoPlay(); + } catch (err) { + console.error("Error going to previous slide:", err); + } + } + + goToSlide(index) { + try { + this.currentIndex = index; + this.updateSlider(); + this.restartAutoPlay(); + } catch (err) { + console.error("Error going to slide:", err); + } + } + + startAutoPlay() { + try { + this.stopAutoPlay(); + + this.autoPlayInterval = setInterval(() => { + this.nextSlide(); + }, this.autoPlayDuration); + + } catch (err) { + console.error("Error starting autoplay:", err); + } + } + + stopAutoPlay() { + if (this.autoPlayInterval) { + clearInterval(this.autoPlayInterval); + this.autoPlayInterval = null; + } + } + + restartAutoPlay() { + this.stopAutoPlay(); + this.startAutoPlay(); + } + + bindEvents() { + try { + if (this.nextBtn) { + this.nextBtn.addEventListener('click', () => this.nextSlide()); + } + + if (this.prevBtn) { + this.prevBtn.addEventListener('click', () => this.prevSlide()); + } + + // Pause on hover + const container = document.querySelector('.slide1r-container'); + if (container) { + container.addEventListener('mouseenter', () => this.stopAutoPlay()); + container.addEventListener('mouseleave', () => this.startAutoPlay()); + } + + // Touch support + let startX = 0; + let endX = 0; + + if (this.track) { + this.track.addEventListener('touchstart', (e) => { + startX = e.touches[0].clientX; + this.stopAutoPlay(); + }); + + this.track.addEventListener('touchmove', (e) => { + endX = e.touches[0].clientX; + }); + + this.track.addEventListener('touchend', () => { + const deltaX = startX - endX; + if (Math.abs(deltaX) > 50) { + if (deltaX > 0) { + this.nextSlide(); + } else { + this.prevSlide(); + } + } + this.startAutoPlay(); + }); + } + } catch (err) { + console.error("Error binding events:", err); + } + } + + bindKeyboardEvents() { + // Use a more specific event listener to avoid conflicts + const keyHandler = (e) => { + // Only respond if the slider container is visible + const container = document.querySelector('.slide1r-container'); + if (container && this.isElementInViewport(container)) { + if (e.key === 'ArrowLeft') { + this.prevSlide(); + } else if (e.key === 'ArrowRight') { + this.nextSlide(); + } + } + }; + + document.addEventListener('keydown', keyHandler); + } + + isElementInViewport(el) { + const rect = el.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth) + ); + } + } + + // Initialize the slider immediately + new Slide1rSlider(); +})(); + +const allCourses = [ + { + category: "Software Development & Engineering", + link: "https://kodepilot.in/course/view.php?id=16", + image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2008_28_21%20PM.png", + name: "UI/UX Design", + description: "Go beyond aesthetics. Design seamless journeys that users love. Translate user needs into intuitive prototypes and pixel-perfect designs for web and mobile." + }, + { + category: "Software Development & Engineering", + link: "https://kodepilot.in/course/view.php?id=17", + image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2008_28_21%20PM.png", + name: "Python Basics", + description: "Learn Python from scratch. Master variables, loops, functions, and create real projects." + }, + { + category: "Data Science", + link: "https://kodepilot.in/course/view.php?id=20", + image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2008_28_21%20PM.png", + name: "Data Analysis with Pandas", + description: "Analyze data efficiently using Pandas. Explore datasets, clean data, and visualize results." + } +]; + +(async () => { + const baseUrl = 'https://kodepilot.in/course/index.php'; + + // Step 1: Fetch categories dynamically + const res = await fetch(baseUrl); + const html = await res.text(); + const categoryRegex = /

([^<]+)<\/a><\/h3>/g; + + const categories = []; + let match; + while ((match = categoryRegex.exec(html)) !== null) { + categories.push({ url: match[1], name: match[2] }); + } + + console.log('Categories found:', categories); + + // Step 2: Fetch courses for each category + const allCourses = []; + + for (const category of categories) { + const resCat = await fetch(category.url); + const catHtml = await resCat.text(); + const cleanHtml = catHtml.replace(/\n/g, ' '); // Flatten HTML for easier regex + + // Regex to extract course info + const courseRegex = /
]*>.*?]*>.*?background-image: url\(([^)]+)\);".*?(.*?)<\/span>.*?
\s*([^<]+)<\/div>.*?
.*?

(.*?)<\/p>/g; + + while ((match = courseRegex.exec(cleanHtml)) !== null) { + allCourses.push({ + category: match[4].trim(), + link: match[1].trim(), + image: match[2].trim(), + name: match[3].trim(), + description: match[5].replace(//g, ' ').trim() + }); + } + } + + console.log('All courses:', allCourses); +})(); + + +// Test printing all courses +console.log("Testing allCourses array:"); +const container = document.querySelector('.corces'); + +allCourses.forEach(course => { + const courseDiv = document.createElement('div'); + courseDiv.className = 'course-card'; // you can style this class later + + courseDiv.innerHTML = ` + +

+ +
+
${course.category}
+ ${course.name} +
${course.description}
+
+ `; + + container.appendChild(courseDiv); +}); diff --git a/slide.html b/slide.html deleted file mode 100644 index 4dafdc0..0000000 --- a/slide.html +++ /dev/null @@ -1,29 +0,0 @@ - - -
-
-
-
-
-
-
-
\ No newline at end of file diff --git a/slider.html b/slider.html deleted file mode 100644 index 022443e..0000000 --- a/slider.html +++ /dev/null @@ -1,334 +0,0 @@ - - -
-
-
- -
-
-
- Business Meeting -
-

Business Innovation

-

Modern workspace collaboration

-
-
-
- Architecture -
-

Modern Architecture

-

Contemporary design solutions

-
-
-
-
- - -
-
-
- Analytics -
-

Data Analytics

-

Business intelligence insights

-
-
-
- Technology -
-

Technology Hub

-

Innovation and development

-
-
-
-
- - -
-
-
- Creativity -
-

Creative Space

-

Inspiration and expression

-
-
-
- Beach -
-

Tropical Paradise

-

Natural beauty and relaxation

-
-
-
-
-
-
- - - -
\ No newline at end of file