fix/feat: !
This commit is contained in:
parent
9bac09bf16
commit
fbc5ea491d
BIN
Assets/Images/logo/favicon.ico
Normal file
BIN
Assets/Images/logo/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
81
index.html
81
index.html
@ -7,6 +7,7 @@
|
||||
<title>Kodepilot Clone</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<link rel="stylesheet" href="templateapi/main.css">
|
||||
<link rel="icon" type="image/x-icon" href="assets/images/logo/favicon.ico">
|
||||
<style>
|
||||
.center-container {
|
||||
display: flex;
|
||||
@ -164,13 +165,11 @@
|
||||
<div class="logo">Kodepilot</div>
|
||||
<input type="text" class="search" placeholder="Search Opportunities">
|
||||
<nav>
|
||||
<a href="#">Internships</a>
|
||||
<a href="#">Jobs</a>
|
||||
<a href="#">Competitions</a>
|
||||
<a href="/login">Log in</a>
|
||||
</nav>
|
||||
<div class="buttons">
|
||||
<a href="/my/"><button class="business">Dashboard</button></a>
|
||||
<button class="login" onclick="goToLogin()">Login</button>
|
||||
<button class="business" onclick="getInTouch()">Get in touch</button>
|
||||
<button class="login" onclick="goToApplay()">Apply</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -258,15 +257,8 @@
|
||||
<img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
|
||||
<img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
|
||||
<img class="image-hcl" src="https://repo.dhanu.cloud/ico/hcl.svg" alt="hcl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ebmpapst.svg" alt="ebmpapst">
|
||||
<img src="https://repo.dhanu.cloud/ico/infosys.svg" alt="infosys">
|
||||
<img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
|
||||
<img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -610,71 +602,6 @@
|
||||
<section class="corces-s">
|
||||
<div class="corces"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
console.log("test");
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const allCourses = [];
|
||||
|
||||
const baseUrl = 'https://kodepilot.in/course/index.php';
|
||||
const res = await fetch(baseUrl);
|
||||
const html = await res.text();
|
||||
|
||||
const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;
|
||||
const categories = [];
|
||||
let match;
|
||||
while ((match = categoryRegex.exec(html)) !== null) {
|
||||
categories.push({ url: match[1], name: match[2] });
|
||||
}
|
||||
|
||||
for (const category of categories) {
|
||||
const resCat = await fetch(category.url);
|
||||
const catHtml = await resCat.text();
|
||||
const cleanHtml = catHtml.replace(/\n/g, ' ');
|
||||
|
||||
const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/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(/<br\s*\/?>/g, ' ').trim()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
renderCourses(allCourses);
|
||||
});
|
||||
|
||||
function renderCourses(allCourses) {
|
||||
const container = document.querySelector('.corces');
|
||||
if (!container) {
|
||||
console.error("⚠️ No .corces container found in DOM");
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = ''; // clear old content
|
||||
|
||||
allCourses.forEach(course => {
|
||||
const courseDiv = document.createElement('div');
|
||||
courseDiv.className = 'course-card';
|
||||
courseDiv.innerHTML = `
|
||||
<a href="${course.link}" target="_blank">
|
||||
<div class="course-image" style="background-image: url(${course.image});"></div>
|
||||
</a>
|
||||
<div class="course-content">
|
||||
<div class="course-category">${course.category}</div>
|
||||
<a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
|
||||
<div class="course-description">${course.description}</div>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(courseDiv);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-section company-section">
|
||||
|
||||
53
main.css
53
main.css
@ -22,16 +22,22 @@
|
||||
|
||||
.search {
|
||||
flex: 1;
|
||||
margin: 0 20px;
|
||||
margin: 0 20px 0 10px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 20px;
|
||||
max-width: 344px;
|
||||
position: absolute;
|
||||
left: 142px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
right: 235px;
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
.buttons button {
|
||||
@ -293,14 +299,13 @@
|
||||
.mnc-logos {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.mnc-logos-track {
|
||||
display: flex;
|
||||
gap: 5vw;
|
||||
animation: stepScroll 12s infinite;
|
||||
height: 100%;
|
||||
gap: 40px;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.mnc-logos img {
|
||||
@ -311,33 +316,7 @@
|
||||
|
||||
.mnc-logos img.image-hcl {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
@keyframes stepScroll {
|
||||
|
||||
0%,
|
||||
20% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
25%,
|
||||
45% {
|
||||
transform: translateX(-25%);
|
||||
}
|
||||
|
||||
50%,
|
||||
70% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
75%,
|
||||
95% {
|
||||
transform: translateX(-75%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.our-numbers {
|
||||
@ -554,8 +533,8 @@
|
||||
}
|
||||
|
||||
.card-quizzes {
|
||||
background: linear-gradient(to bottom right, #60a5fa, #2563eb);
|
||||
color: white;
|
||||
background: linear-gradient(to bottom right, #60a5fa, #2563eb), url('http://127.0.0.1:5500/Assets/Images/learn/learn.png') no-repeat center/cover;
|
||||
}
|
||||
|
||||
.card-hackathons {
|
||||
@ -1320,7 +1299,7 @@
|
||||
|
||||
.card-simple {
|
||||
max-width: 1200px;
|
||||
margin: 50px auto 50px auto;
|
||||
margin: 70px auto 70px auto;
|
||||
}
|
||||
|
||||
.card-easy {
|
||||
@ -1448,15 +1427,11 @@
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 18px;
|
||||
/* controls height and width */
|
||||
border-radius: 25px;
|
||||
font-size: 0.9em;
|
||||
width: auto;
|
||||
/* ensures it doesn't stretch */
|
||||
max-width: 155px;
|
||||
/* optional limit */
|
||||
display: inline-block;
|
||||
/* prevents flex from stretching it */
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
@ -1475,12 +1450,10 @@
|
||||
|
||||
.card-easy-right {
|
||||
padding: 80px 50px;
|
||||
/* more top/bottom space increases height */
|
||||
}
|
||||
|
||||
.card-easy-left img {
|
||||
width: 90%;
|
||||
max-height: 100%;
|
||||
/* image takes more vertical space */
|
||||
}
|
||||
}
|
||||
248
main.js
248
main.js
@ -1,7 +1,12 @@
|
||||
function goToLogin() {
|
||||
window.location.href = "/my/";
|
||||
function goToApplay() {
|
||||
window.location.href = "/applay/";
|
||||
}
|
||||
|
||||
function getInTouch() {
|
||||
window.open("https://wa.me/1234567890?text=Hi%20Link%20kodepilote%20Team...", "_blank");
|
||||
}
|
||||
|
||||
|
||||
(function () {
|
||||
if (window.Slide1rSliderLoaded) {
|
||||
return;
|
||||
@ -227,4 +232,243 @@ const observer = new IntersectionObserver((entries) => {
|
||||
});
|
||||
}, { threshold: 0.2 });
|
||||
|
||||
console.log("test");
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
// const allCourses = [];
|
||||
|
||||
// const baseUrl = 'https://kodepilot.in/course/index.php';
|
||||
// const res = await fetch(baseUrl);
|
||||
// const html = await res.text();
|
||||
|
||||
// const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;
|
||||
// const categories = [];
|
||||
// let match;
|
||||
// while ((match = categoryRegex.exec(html)) !== null) {
|
||||
// categories.push({ url: match[1], name: match[2] });
|
||||
// }
|
||||
|
||||
// for (const category of categories) {
|
||||
// const resCat = await fetch(category.url);
|
||||
// const catHtml = await resCat.text();
|
||||
// const cleanHtml = catHtml.replace(/\n/g, ' ');
|
||||
|
||||
// const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/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(/<br\s*\/?>/g, ' ').trim()
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
const allCourses = [
|
||||
{
|
||||
category: "Software Development & Engineering",
|
||||
link: "https://kodepilot.in/course/view.php?id=16",
|
||||
image: "https://kodepilot.in/pluginfile.php/53/course/overviewfiles/UiUx.png",
|
||||
name: "UI/UX Design",
|
||||
description: "Learn the fundamentals of user interface and user experience design."
|
||||
},
|
||||
{
|
||||
category: "Software Development & Engineering",
|
||||
link: "https://kodepilot.in/course/view.php?id=9",
|
||||
image: "https://kodepilot.in/pluginfile.php/39/course/overviewfiles/IOS.png",
|
||||
name: "iOS Development",
|
||||
description: "Build iOS apps using Swift and Apple’s development tools."
|
||||
},
|
||||
{
|
||||
category: "Software Development & Engineering",
|
||||
link: "https://kodepilot.in/course/view.php?id=7",
|
||||
image: "https://kodepilot.in/pluginfile.php/35/course/overviewfiles/RD.png",
|
||||
name: "React Development",
|
||||
description: "Master React.js for building fast and scalable web apps."
|
||||
},
|
||||
{
|
||||
category: "Software Development & Engineering",
|
||||
link: "https://kodepilot.in/course/view.php?id=5",
|
||||
image: "https://kodepilot.in/pluginfile.php/31/course/overviewfiles/PFS.png",
|
||||
name: "Full Stack Development",
|
||||
description: "End-to-end training in frontend, backend, and databases."
|
||||
},
|
||||
{
|
||||
category: "Software Development & Engineering",
|
||||
link: "https://kodepilot.in/course/view.php?id=3",
|
||||
image: "https://kodepilot.in/pluginfile.php/25/course/overviewfiles/JFS.png",
|
||||
name: "Java Full Stack",
|
||||
description: "Become a full stack developer with Java, Spring, and modern tools."
|
||||
},
|
||||
{
|
||||
category: "Quality & Testing",
|
||||
link: "https://kodepilot.in/course/view.php?id=13",
|
||||
image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/PT.png",
|
||||
name: "Performance Testing",
|
||||
description: "Learn tools and techniques for testing system performance."
|
||||
},
|
||||
{
|
||||
category: "Quality & Testing",
|
||||
link: "https://kodepilot.in/course/view.php?id=10",
|
||||
image: "https://kodepilot.in/pluginfile.php/41/course/overviewfiles/QA.png",
|
||||
name: "QA Testing",
|
||||
description: "Understand quality assurance practices for reliable software."
|
||||
},
|
||||
{
|
||||
category: "Cloud & DevOps",
|
||||
link: "https://kodepilot.in/course/view.php?id=17",
|
||||
image: "https://kodepilot.in/pluginfile.php/55/course/overviewfiles/GC.png",
|
||||
name: "Google Cloud",
|
||||
description: "Get hands-on with Google Cloud Platform services and tools."
|
||||
},
|
||||
{
|
||||
category: "Cloud & DevOps",
|
||||
link: "https://kodepilot.in/course/view.php?id=4",
|
||||
image: "https://kodepilot.in/pluginfile.php/28/course/overviewfiles/AWSA.png",
|
||||
name: "AWS Associate",
|
||||
description: "Prepare for AWS certifications and cloud computing skills."
|
||||
},
|
||||
{
|
||||
category: "AI, Data & Emerging Tech (On-demand & trending)",
|
||||
link: "https://kodepilot.in/course/view.php?id=26",
|
||||
image: "https://kodepilot.in/pluginfile.php/73/course/overviewfiles/DE.png",
|
||||
name: "Data Engineering",
|
||||
description: "Build pipelines and manage data at scale for analytics."
|
||||
},
|
||||
{
|
||||
category: "AI, Data & Emerging Tech (On-demand & trending)",
|
||||
link: "https://kodepilot.in/course/view.php?id=18",
|
||||
image: "https://kodepilot.in/pluginfile.php/58/course/overviewfiles/PE.png",
|
||||
name: "Prompt Engineering",
|
||||
description: "Learn to design prompts for AI models like ChatGPT."
|
||||
},
|
||||
{
|
||||
category: "AI, Data & Emerging Tech (On-demand & trending)",
|
||||
link: "https://kodepilot.in/course/view.php?id=12",
|
||||
image: "https://kodepilot.in/pluginfile.php/44/course/overviewfiles/AI%28Ess%29.png",
|
||||
name: "AI Essentials",
|
||||
description: "Introduction to AI, ML concepts, and real-world use cases."
|
||||
},
|
||||
{
|
||||
category: "Enterprise & Business Tech",
|
||||
link: "https://kodepilot.in/course/view.php?id=24",
|
||||
image: "https://kodepilot.in/pluginfile.php/70/course/overviewfiles/ServiceNow.png",
|
||||
name: "ServiceNow",
|
||||
description: "Learn ITSM and workflow automation with ServiceNow."
|
||||
},
|
||||
{
|
||||
category: "Enterprise & Business Tech",
|
||||
link: "https://kodepilot.in/course/view.php?id=19",
|
||||
image: "https://kodepilot.in/pluginfile.php/61/course/overviewfiles/SAP.png",
|
||||
name: "SAP",
|
||||
description: "Master SAP ERP modules for enterprise solutions."
|
||||
},
|
||||
{
|
||||
category: "Cybersecurity & Compliance",
|
||||
link: "https://kodepilot.in/course/view.php?id=23",
|
||||
image: "https://kodepilot.in/pluginfile.php/69/course/overviewfiles/Security.png",
|
||||
name: "Security Fundamentals",
|
||||
description: "Understand core concepts of IT security and defense."
|
||||
},
|
||||
{
|
||||
category: "Cybersecurity & Compliance",
|
||||
link: "https://kodepilot.in/course/view.php?id=22",
|
||||
image: "https://kodepilot.in/pluginfile.php/68/course/overviewfiles/CyE.png",
|
||||
name: "Cyber Essentials",
|
||||
description: "Learn the basics of cybersecurity and compliance standards."
|
||||
}
|
||||
];
|
||||
|
||||
console.table(allCourses);
|
||||
|
||||
|
||||
renderCourses(allCourses);
|
||||
});
|
||||
|
||||
function renderCourses(allCourses) {
|
||||
const container = document.querySelector('.corces');
|
||||
if (!container) {
|
||||
console.error("⚠️ No .corces container found in DOM");
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
// Group courses by category
|
||||
const grouped = {};
|
||||
allCourses.forEach(course => {
|
||||
if (!grouped[course.category]) grouped[course.category] = [];
|
||||
grouped[course.category].push(course);
|
||||
});
|
||||
|
||||
// Render each category section
|
||||
Object.keys(grouped).forEach(category => {
|
||||
const section = document.createElement('div');
|
||||
section.className = 'course-section';
|
||||
|
||||
section.innerHTML = `
|
||||
<h2 class="course-category-title">${category}</h2>
|
||||
<div class="course-slider">
|
||||
<button class="prev-btn">◀</button>
|
||||
<div class="course-track"></div>
|
||||
<button class="next-btn">▶</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const track = section.querySelector('.course-track');
|
||||
|
||||
grouped[category].forEach(course => {
|
||||
const courseDiv = document.createElement('div');
|
||||
courseDiv.className = 'course-card';
|
||||
courseDiv.innerHTML = `
|
||||
<a href="${course.link}" target="_blank">
|
||||
<div class="course-image" style="background-image: url(${course.image});"></div>
|
||||
</a>
|
||||
<div class="course-content">
|
||||
<a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
|
||||
<div class="course-description">${course.description}</div>
|
||||
</div>
|
||||
`;
|
||||
track.appendChild(courseDiv);
|
||||
});
|
||||
|
||||
const prevBtn = section.querySelector('.prev-btn');
|
||||
const nextBtn = section.querySelector('.next-btn');
|
||||
|
||||
let scrollAmount = 0;
|
||||
prevBtn.addEventListener('click', () => {
|
||||
track.scrollBy({ left: -300, behavior: 'smooth' });
|
||||
});
|
||||
nextBtn.addEventListener('click', () => {
|
||||
track.scrollBy({ left: 300, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
container.appendChild(section);
|
||||
});
|
||||
}
|
||||
|
||||
statItems.forEach(item => observer.observe(item));
|
||||
|
||||
|
||||
const track = document.querySelector('.mnc-logos-track');
|
||||
const gap = 40;
|
||||
let index = 0;
|
||||
|
||||
function stepScroll() {
|
||||
const items = track.children;
|
||||
const first = items[0];
|
||||
const moveWidth = first.offsetWidth + gap;
|
||||
|
||||
track.style.transform = `translateX(-${moveWidth}px)`;
|
||||
|
||||
track.addEventListener('transitionend', function handler() {
|
||||
track.appendChild(first);
|
||||
track.style.transition = 'none';
|
||||
track.style.transform = 'translateX(0)';
|
||||
void track.offsetWidth; // force reflow
|
||||
track.style.transition = 'transform 0.5s ease';
|
||||
track.removeEventListener('transitionend', handler);
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(stepScroll, 3000);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user