dhanush.s/kodepilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: dhanush.s:e79957627db29c68c91b28a3151d2272e43ed38d
Branches Tags
dhanush.s:main
dhanush.s:dhee
dhanush.s:test
dhanush.s:content
dhanush.s:rajesh
dhanush.s:reformate
dhanush.s:image
...
compare: dhanush.s:d6fd076fa8aa44a551691d82308b75451a78803a
Branches Tags
dhanush.s:main
dhanush.s:dhee
dhanush.s:test
dhanush.s:content
dhanush.s:rajesh
dhanush.s:reformate
dhanush.s:image

6 Commits
e79957627d ... d6fd076fa8

Author SHA1 Message Date
Abhishek-unni-2
d6fd076fa8 content:fixit 2025-09-27 02:00:34 +05:30
dhanush.s
94315ae34d Merge pull request 'dynamic card' (#21) from rajesh into main 
Reviewed-on: #21
 2025-09-26 20:02:08 +00:00
rajesh.n
ae6c207114 dynamic card 2025-09-27 01:18:33 +05:30
rajesh.n
9739a5a04a Merge pull request 'change UI' (#20) from rajesh into main 
Reviewed-on: #20
 2025-09-26 18:12:21 +00:00
rajesh.n
dd543361ac change UI 2025-09-26 23:40:31 +05:30
abhishek.p
e04089042d Merge pull request 'content fix' (#19) from content into main 
Reviewed-on: #19
 2025-09-26 16:54:53 +00:00
12 changed files with 451 additions and 323 deletions
Show Stats Expand all files Collapse all files

BIN
assets/images/codinghiringassesments/coding_practice.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
assets/images/codinghiringassesments/interview_preparetion.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 53 KiB

BIN
assets/images/codinghiringassesments/nope_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
assets/images/codinghiringassesments/nope_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
assets/images/codinghiringassesments/nope_3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
assets/images/codinghiringassesments/nope_4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
assets/images/codinghiringassesments/project.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 652 KiB

BIN
assets/images/codinghiringassesments/skill_based_assesment.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 110 KiB

12
assets/images/hai1/user-icon.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 60.671 60.671" xml:space="preserve">
<g>
<g>
<ellipse style="fill:#010002;" cx="30.336" cy="12.097" rx="11.997" ry="12.097"/>
<path style="fill:#010002;" d="M35.64,30.079H25.031c-7.021,0-12.714,5.739-12.714,12.821v17.771h36.037V42.9
C48.354,35.818,42.661,30.079,35.64,30.079z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 594 B

19
index.html
View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kodepilot Clone</title> <title>Kodepilot</title>
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="templateapi/main.css"> <link rel="stylesheet" href="templateapi/main.css">
<link rel="icon" type="image/x-icon" href="assets/images/logo/favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/images/logo/favicon.ico">
@ -479,7 +479,7 @@
</p> </p>
<div class="slide-logo-box"> <div class="slide-logo-box">
<div class="profile-box"> <div class="profile-box">
<img src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb" <img src="assets/images/hai1/user-icon.svg"
alt="Client Logo" class="slide-logo"> alt="Client Logo" class="slide-logo">
<div class="profile-info"> <div class="profile-info">
<p class="slide-name">Dhanush</p> <p class="slide-name">Dhanush</p>
@ -500,7 +500,7 @@
</p> </p>
<div class="slide-logo-box"> <div class="slide-logo-box">
<div class="profile-box"> <div class="profile-box">
<img src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb" <img src="assets/images/hai1/user-icon.svg"
alt="Client Logo" class="slide-logo"> alt="Client Logo" class="slide-logo">
<div class="profile-info"> <div class="profile-info">
<p class="slide-name">kevin</p> <p class="slide-name">kevin</p>
@ -520,7 +520,7 @@
</p> </p>
<div class="slide-logo-box"> <div class="slide-logo-box">
<div class="profile-box"> <div class="profile-box">
<img src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb" <img src="assets/images/hai1/user-icon.svg"
alt="Client Logo" class="slide-logo"> alt="Client Logo" class="slide-logo">
<div class="profile-info"> <div class="profile-info">
<p class="slide-name">John Doe</p> <p class="slide-name">John Doe</p>
@ -548,11 +548,12 @@
<div class="practice-card-icon">💻</div> <div class="practice-card-icon">💻</div>
<h3>Coding Practice</h3> <h3>Coding Practice</h3>
<p>Level up your coding skills by practicing the hiring Questions.</p> <p>Level up your coding skills by practicing the hiring Questions.</p>
<div class="practice-footer-text">400+ Questions</div>
</div> </div>
<a href="#" class="practice-cta-btn">Start Now ➤</a> <a href="#" class="practice-cta-btn">Start Now ➤</a>
</div> </div>
<div class="practice-card-svg"> <div class="practice-card-svg">
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice"> <img src="assets/images/codinghiringassesments/nope_1.png" alt="Coding Practice">
</div> </div>
</div> </div>
@ -562,13 +563,13 @@
<div> <div>
<div class="practice-card-icon">📋</div> <div class="practice-card-icon">📋</div>
<h3>Interview Preparation</h3> <h3>Interview Preparation</h3>
<p>Crack Top companies in just 5 days.</p> <p>Crack Top companies in just 5 days with unbelivable learning</p>
<div class="practice-footer-text">20+ Companies</div> <div class="practice-footer-text">20+ Companies</div>
</div> </div>
<a href="#" class="practice-cta-btn">Start Now ➤</a> <a href="#" class="practice-cta-btn">Start Now ➤</a>
</div> </div>
<div class="practice-card-svg"> <div class="practice-card-svg">
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice"> <img src="assets/images/codinghiringassesments/nope_2.png" alt="Coding Practice">
</div> </div>
</div> </div>
@ -584,7 +585,7 @@
<a href="#" class="practice-cta-btn">Start Now ➤</a> <a href="#" class="practice-cta-btn">Start Now ➤</a>
</div> </div>
<div class="practice-card-svg"> <div class="practice-card-svg">
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice"> <img src="assets/images/codinghiringassesments/nope_3.webp" alt="Coding Practice">
</div> </div>
</div> </div>
@ -600,7 +601,7 @@
<a href="#" class="practice-cta-btn">Start Now ➤</a> <a href="#" class="practice-cta-btn">Start Now ➤</a>
</div> </div>
<div class="practice-card-svg"> <div class="practice-card-svg">
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice"> <img src="assets/images/codinghiringassesments/nope_4.webp" alt="Coding Practice">
</div> </div>
</div> </div>
</div> </div>

370
main.css
View File

@ -1105,6 +1105,7 @@
align-items: center; align-items: center;
gap: 20px; gap: 20px;
margin-top: 76px; margin-top: 76px;
padding-bottom: 40px;
} }
.move-slider-box-static { .move-slider-box-static {
@ -1540,138 +1541,206 @@
/*----------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------*/
/* Practice Cards Component CSS - Unique class names to prevent conflicts */
/* Practice Cards Component CSS - Unique class names to prevent conflicts */
.practice-cards-container * { /* Practice Cards Component CSS - Unique class names to prevent conflicts */
/* Practice Cards Component CSS - Unique class names to prevent conflicts */
.practice-cards-container * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Segoe UI', system-ui, sans-serif; font-family: 'Segoe UI', system-ui, sans-serif;
} }
.practice-cards-container { .practice-cards-container {
background-color: #ffffff; background-color: #ffffff;
color: #1f2937; color: #1f2937;
padding: 40px 20px; padding: 40px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: flex-start;
} }
.practice-container { .practice-container {
max-width: 1300px; max-width: 1200px;
width: 100%; width: 100%;
} margin: 0 auto;
padding: 0 20px;
}
.practice-title { .practice-title {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
margin-bottom: 12px; margin-bottom: 12px;
color: #111827; color: #111827;
text-align: left; text-align: left;
} width: 100%;
}
.practice-subtitle { .practice-subtitle {
font-size: 18px; font-size: 18px;
color: #6b7280; color: #6b7280;
max-width: 700px; max-width: 700px;
/* margin: 0 auto 40px; */
line-height: 1.5; line-height: 1.5;
text-align: left; text-align: left;
} width: 100%;
}
.practice-cards-wrapper { .practice-cards-wrapper {
margin: 30px 0; margin: 30px 0;
display: flex; display: flex;
height: 380px; height: 380px;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
/* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
position: relative; position: relative;
gap: 1px; gap: 1px;
background-color: #d1d5db; background-color: #d1d5db;
padding: 1px; padding: 1px;
} width: 100%;
}
.practice-card { .practice-card {
flex: 1; flex: 1;
display: flex; display: flex;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transform-origin: center; transform-origin: center;
background-color: white; background-color: white;
border-radius: 0; border-radius: 0;
} min-width: 80px;
}
.practice-card:first-child { .practice-card:first-child {
border-radius: 11px 0 0 11px; border-radius: 11px 0 0 11px;
} }
.practice-card:last-child { .practice-card:last-child {
border-radius: 0 11px 11px 0; border-radius: 0 11px 11px 0;
} }
.practice-card-content { .practice-card-content {
flex: 1; flex: 1;
padding: 24px; padding: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
transition: all 0.7s ease; transition: all 0.5s ease;
min-width: 0; min-width: 280px;
z-index: 2; z-index: 2;
position: relative; position: relative;
} }
/* Color changes for active and hover states */ /* Default state - first card expanded */
.practice-card.active { .practice-card:first-child {
background-color: #c6e0f1; flex: 2.5;
} z-index: 10;
}
.practice-card:nth-child(1):hover, .practice-card:not(:first-child) {
.practice-card:nth-child(1).active { flex: 1;
}
.practice-card .practice-card-svg {
width: 0;
opacity: 0;
}
.practice-card .practice-cta-btn {
opacity: 0;
transform: translateY(15px);
}
/* Show SVG and CTA for first card by default */
.practice-card:first-child .practice-card-svg {
width: 35%;
opacity: 1;
}
.practice-card:first-child .practice-cta-btn {
opacity: 1;
transform: translateY(0);
}
.practice-card:first-child .practice-card-icon {
transform: scale(1.05) rotate(3deg);
}
.practice-card:first-child h3 {
transform: translateY(-2px);
}
.practice-card:first-child p,
.practice-card:first-child .practice-meta-info,
.practice-card:first-child .practice-footer-text {
transform: translateY(-1px);
}
/* Hover state - expand hovered card, shrink others */
.practice-cards-wrapper .practice-card {
transform: scale(1);
}
.practice-cards-wrapper .practice-card:hover {
flex: 2.5;
z-index: 10;
}
.practice-cards-wrapper .practice-card:not(:hover) {
flex: 1;
}
/* Color changes for hover states */
.practice-card:nth-child(1):hover {
background-color: #89CFF0; background-color: #89CFF0;
} }
.practice-card:nth-child(2):hover, .practice-card:nth-child(2):hover {
.practice-card:nth-child(2).active {
background-color: #FEB4CF; background-color: #FEB4CF;
} }
.practice-card:nth-child(3):hover, .practice-card:nth-child(3):hover {
.practice-card:nth-child(3).active {
background-color: #DFC5FE; background-color: #DFC5FE;
} }
.practice-card:nth-child(4):hover, .practice-card:nth-child(4):hover {
.practice-card:nth-child(4).active {
background-color: #FFE186; background-color: #FFE186;
} }
/* SVG Container */ /* SVG Container - UPDATED FOR IMAGES */
.practice-card-svg { .practice-card-svg {
width: 0; width: 0;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 1.3s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0; opacity: 0;
padding: 20px; padding: 20px;
background: transparent; background: transparent;
} flex-shrink: 0;
overflow: hidden; /* Added to contain the image */
}
.practice-card-svg svg { /* Image styling - NEW RULES */
width: 100%; .practice-card-svg img {
height: 100%; width: 500%;
max-width: 180px; height:1200%;
max-height: 180px; object-fit: contain; /* This will scale the image properly */
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); max-width: 200%;
} max-height: 200%;
border-radius: 8px;
}
.practice-card-icon { /* Show SVG only on hovered card and first card by default */
.practice-card:hover .practice-card-svg {
width: 35%;
opacity: 1;
}
.practice-card-icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 10px; border-radius: 10px;
@ -1681,55 +1750,59 @@
font-size: 24px; font-size: 24px;
margin-bottom: 16px; margin-bottom: 16px;
transition: transform 0.5s ease; transition: transform 0.5s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
}
.practice-card:nth-child(1) .practice-card-icon { .practice-card:nth-child(1) .practice-card-icon {
background-color: #1268f3; background-color: #1268f3;
color: white; color: white;
} }
.practice-card:nth-child(2) .practice-card-icon { .practice-card:nth-child(2) .practice-card-icon {
background-color: #ef4444; background-color: #ef4444;
color: white; color: white;
} }
.practice-card:nth-child(3) .practice-card-icon { .practice-card:nth-child(3) .practice-card-icon {
background-color: #8b5cf6; background-color: #8b5cf6;
color: white; color: white;
} }
.practice-card:nth-child(4) .practice-card-icon { .practice-card:nth-child(4) .practice-card-icon {
background-color: #f59e0b; background-color: #f59e0b;
color: white; color: white;
} }
.practice-card h3 { /* Icon animation on hover */
.practice-card:hover .practice-card-icon {
transform: scale(1.05) rotate(3deg);
}
.practice-card h3 {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
margin-bottom: 12px; margin-bottom: 12px;
color: #111827; color: #111827;
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.practice-card p { .practice-card p {
font-size: 15px; font-size: 15px;
color: #6b7280; color: #6b7280;
line-height: 1.5; line-height: 1.5;
margin-bottom: 16px; margin-bottom: 16px;
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.practice-meta-info { .practice-meta-info {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 16px; margin-bottom: 16px;
font-size: 14px; font-size: 14px;
color: #4b5563; color: #4b5563;
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.practice-meta-logo { .practice-meta-logo {
width: 24px; width: 24px;
height: 24px; height: 24px;
background-color: #3b82f6; background-color: #3b82f6;
@ -1741,17 +1814,28 @@
color: white; color: white;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
} }
.practice-footer-text { .practice-footer-text {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #374151; color: #374151;
margin-top: auto; margin-top: auto;
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.practice-cta-btn { /* Text animation on hover */
.practice-card:hover h3 {
transform: translateY(-2px);
}
.practice-card:hover p,
.practice-card:hover .practice-meta-info,
.practice-card:hover .practice-footer-text {
transform: translateY(-1px);
}
.practice-cta-btn {
margin-top: 16px; margin-top: 16px;
background-color: #111827; background-color: #111827;
color: white; color: white;
@ -1769,10 +1853,9 @@
transform: translateY(15px); transform: translateY(15px);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
}
.practice-cta-btn::before { .practice-cta-btn::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -1781,65 +1864,25 @@
height: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.8s; transition: left 0.8s;
} }
.practice-cta-btn:hover::before { .practice-cta-btn:hover::before {
left: 100%; left: 100%;
} }
.practice-cta-btn:hover { .practice-cta-btn:hover {
background-color: #374151; background-color: #374151;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
}
/* Active card styles */ /* Show CTA button only on hovered card and first card by default */
.practice-card.active { .practice-card:hover .practice-cta-btn {
flex: 3.5;
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
z-index: 10;
}
.practice-card.active .practice-card-svg {
width: 45%;
opacity: 1;
}
.practice-card.active .practice-cta-btn {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
.practice-card.active .practice-card-icon { /* Subtle overlay effect */
transform: scale(1.1) rotate(5deg); .practice-card::after {
}
.practice-card.active h3 {
transform: translateY(-3px);
}
.practice-card.active p,
.practice-card.active .practice-meta-info,
.practice-card.active .practice-footer-text {
transform: translateY(-2px);
}
/* Hover effects for non-active cards */
.practice-card:hover:not(.active) {
flex: 1.3;
transform: translateY(-4px) scale(1.01);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
z-index: 5;
}
.practice-card:hover:not(.active) .practice-card-svg {
width: 25%;
opacity: 0.8;
}
/* Subtle overlay effect */
.practice-card::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -1850,45 +1893,88 @@
opacity: 0; opacity: 0;
transition: opacity 0.6s ease; transition: opacity 0.6s ease;
pointer-events: none; pointer-events: none;
} }
.practice-card.active::after, .practice-card:hover::after {
.practice-card:hover::after {
opacity: 1; opacity: 1;
}
/* Mobile responsiveness */
@media (max-width: 992px) {
.practice-cards-container {
align-items: flex-start;
padding: 30px 15px;
} }
@media (max-width: 992px) {
.practice-cards-wrapper { .practice-cards-wrapper {
flex-direction: column; flex-direction: column;
height: auto; height: auto;
border-radius: 12px; border-radius: 12px;
gap: 0;
} }
.practice-card { .practice-card {
flex-direction: column; flex-direction: row;
height: auto; height: 120px;
border-radius: 0 !important; border-radius: 0 !important;
min-width: auto;
} }
.practice-card:first-child { .practice-card:first-child {
border-radius: 12px 12px 0 0 !important; border-radius: 12px 12px 0 0 !important;
height: 120px;
flex: 1;
} }
.practice-card:last-child { .practice-card:last-child {
border-radius: 0 0 12px 12px !important; border-radius: 0 0 12px 12px !important;
} }
.practice-card.active .practice-card-svg, .practice-card:hover {
height: 300px;
flex-direction: column;
}
.practice-card:hover .practice-card-svg { .practice-card:hover .practice-card-svg {
width: 100%; width: 100%;
height: 200px; height: 120px;
} }
.practice-card.active { /* Mobile image styling */
transform: translateY(-5px) scale(1.01); .practice-card:hover .practice-card-svg img {
object-fit: cover; /* Better fit for mobile */
} }
.practice-card:hover:not(.active) { .practice-card-content {
transform: translateY(-3px) scale(1.005); min-width: auto;
padding: 20px;
} }
}
@media (max-width: 768px) {
.practice-cards-container {
padding: 25px 10px;
} }
.practice-title {
font-size: 28px;
}
.practice-subtitle {
font-size: 16px;
}
}
@media (max-width: 480px) {
.practice-cards-container {
padding: 20px 8px;
}
.practice-title {
font-size: 24px;
}
.practice-subtitle {
font-size: 14px;
}
}

45
main.js
View File

@ -502,16 +502,45 @@ function stepScroll() {
setInterval(stepScroll, 3000); setInterval(stepScroll, 3000);
document.querySelectorAll('.course-slider').forEach(slider => {
const track = slider.querySelector('.course-track');
const prev = slider.querySelector('.prev-btn');
const next = slider.querySelector('.next-btn');
prev.addEventListener('click', () => { /*--------------------------------------------------------*/
track.scrollBy({ left: -300, behavior: 'smooth' });
document.addEventListener('DOMContentLoaded', function() {
const cards = document.querySelectorAll('.practice-card');
let activeCard = document.querySelector('.practice-card.active');
let lastActiveCard = activeCard;
// Function to set active card
function setActiveCard(card) {
// Remove active class from all cards
cards.forEach(c => {
c.classList.remove('active');
}); });
next.addEventListener('click', () => { // Add active class to the specified card
track.scrollBy({ left: 300, behavior: 'smooth' }); card.classList.add('active');
// Update last active card
lastActiveCard = card;
}
// Set first card as active by default if none is active
if (!activeCard && cards.length > 0) {
setActiveCard(cards[0]);
}
// Add click event listeners (better for mobile and accessibility)
cards.forEach(card => {
card.addEventListener('click', function() {
setActiveCard(this);
});
});
// Optional: Add hover effect for desktop (complementary to click)
cards.forEach(card => {
card.addEventListener('mouseenter', function() {
// Only activate on hover if you want that behavior
// setActiveCard(this);
});
}); });
}); });