Skip to content

Commit 4e623da

Browse files
Ox03bbOx03bb
committed
fix the js in time line
1 parent 3c22785 commit 4e623da

File tree

4 files changed

+208
-45
lines changed

4 files changed

+208
-45
lines changed

‎css/re_section4.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
font-size: 1rem;
5353
color: black;
5454
direction: rtl;
55-
font-size: 0.8rem;
55+
font-size: 1rem;
5656
z-index: 2;
5757
margin-bottom: 15px;
5858
}

‎css/re_section5.css‎

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,82 @@
166166

167167

168168

169+
170+
.speakers-container {
171+
display: flex;
172+
flex-direction: column;
173+
gap: 20px;
174+
}
175+
176+
.speaker-item {
177+
display: flex;
178+
align-items: center;
179+
gap: 15px;
180+
padding: 10px;
181+
border-radius: 8px;
182+
transition: all 0.3s ease;
183+
}
184+
185+
.speaker-item.active {
186+
background: rgba(13, 20, 38, 0.7);
187+
}
188+
189+
.speaker-item:not(.active) {
190+
filter: grayscale(100%);
191+
opacity: 0.7;
192+
}
193+
194+
.speaker-item:not(.active):hover {
195+
opacity: 0.9;
196+
}
197+
198+
.speaker-image {
199+
width: 80px;
200+
height: 80px;
201+
border-radius: 50%;
202+
object-fit: cover;
203+
cursor: pointer;
204+
border: 3px solid transparent;
205+
transition: all 0.3s ease;
206+
}
207+
208+
.speaker-item.active .speaker-image {
209+
border-color: #67FF34;
210+
box-shadow: 0 0 10px rgba(103, 255, 52, 0.5);
211+
}
212+
213+
.speaker-info {
214+
flex: 1;
215+
}
216+
217+
.speaker-name {
218+
font-weight: bold;
219+
margin-bottom: 5px;
220+
font-family: SpaceGrotesk-Medium, Arial, sans-serif;
221+
}
222+
223+
.speaker-title {
224+
font-family: SpaceGrotesk-Light,Arial,sans-serif;
225+
font-size: 14px;
226+
color: #67FF34;
227+
margin-bottom: 5px;
228+
}
229+
230+
.speaker-time, .speaker-affiliation {
231+
font-family: SpaceGrotesk-Light,Arial,sans-serif;
232+
font-size: 13px;
233+
opacity: 0.8;
234+
margin-bottom: 3px;
235+
}
236+
237+
.speaker-bio {
238+
font-family: SpaceGrotesk-Light,Arial,sans-serif;
239+
font-size: 13px;
240+
line-height: 1.4;
241+
margin-top: 8px;
242+
opacity: 0.9;
243+
}
244+
169245
@media (max-width: 768px) {
170246
.schedule-container {
171247
grid-template-columns: repeat(2, 1fr);
@@ -258,4 +334,6 @@
258334
width: 88%;
259335
transform: translate(0%, 14%);
260336
}
261-
}
337+
}
338+
339+

‎index.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@
3434
</a>
3535

3636
<ul class="navlinks">
37-
<li class="nav-btns"><a href="#">Description</a></li>
38-
<li class="nav-btns"><a href="#">Timeline</a></li>
39-
<li class="nav-btns"><a href="#">Details</a></li>
37+
<li class="nav-btns"><a href="#ds">Description</a></li>
38+
<li class="nav-btns"><a href="#tm">Timeline</a></li>
39+
<li class="nav-btns"><a href="#dt">Details</a></li>
4040

4141
<li >
4242
<button class="circle-button">
@@ -163,7 +163,7 @@ <h1 id="s3t4-1" class="s3t4 ppnm">Conferences and Workshops</h1>
163163

164164
<!--! section 04 -->
165165

166-
<section class="section-04">
166+
<section class="section-04" id="ds">
167167

168168
<div class="five-content">
169169
<p id="Text-five-content" class="ppnm"> What's Waiting You <br> in this edition</p>
@@ -233,7 +233,7 @@ <h2 class="sgl">Hackathon</h2>
233233
</section>
234234

235235
<!--! section05 -->
236-
<section class="section-05">
236+
<section class="section-05" id="tm">
237237
<div class="img-seven-content"><img src="images/Group 35.png" id="decorator_img_5" loading="lazy" alt="text"></div>
238238

239239
<div class="sec5sub1">
@@ -254,7 +254,7 @@ <h2 class="sgl">Hackathon</h2>
254254
</section>
255255

256256
<!--! section06 -->
257-
<section class="section-06">
257+
<section class="section-06" id="dt">
258258
<div class="eight-content">
259259
<div class="sec6sub1">
260260
<div class="eight-content-row" style="flex-direction: row;">
@@ -380,7 +380,7 @@ <h1 >Contact Us</h1>
380380
</div>
381381

382382
<div class="reseau-so">
383-
<i class="fa-brands fa-square-facebook" style="margin-left: 1rem;"></i>
383+
<i href="https://www.facebook.com/tech.geeks.guelma/" class="fa-brands fa-square-facebook" style="margin-left: 1rem;"></i>
384384
<i class="fa-brands fa-linkedin"style="margin-left: 1rem;"></i>
385385
<i class="fa-brands fa-instagram"style="margin-left: 1rem;"></i>
386386
</div><br>

‎js/schedule.js‎

Lines changed: 121 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,73 @@ const schedules = {
9595
`
9696
};
9797

98+
// Informations des speakers
99+
const speakersInfo = {
100+
"main-speaker": {
101+
title: "AI in Start-ups and Entrepreneurship",
102+
time: "12:30 AM",
103+
name: "John Doe",
104+
affiliation: "Stanford Artificial Intelligence Laboratory",
105+
bio: "Expert in AI applications for startups with 10+ years of experience. Published over 50 papers on machine learning applications in business."
106+
},
107+
"speaker-2": {
108+
title: "Advanced Machine Learning Techniques",
109+
time: "2:00 PM",
110+
name: "Jane Smith",
111+
affiliation: "Dijon University",
112+
bio: "Pioneer in neural networks and deep learning architectures. Recipient of the 2022 AI Innovation Award for her work on transformer models."
113+
},
114+
"speaker-3": {
115+
title: "Ethics in Artificial Intelligence",
116+
time: "3:30 PM",
117+
name: "Ahmed Khan",
118+
affiliation: "Guelma University",
119+
bio: "Leading researcher in AI ethics and responsible innovation. Chair of the Global AI Ethics Committee and author of 'Responsible AI Practices'."
120+
}
121+
};
122+
123+
// Template du sous-programme avec affichage vertical
124+
const subProgram = `
125+
<div class="banner">
126+
<div class="diagonal-line"></div>
127+
<div class="speakers-container">
128+
<!-- Speaker 1 -->
129+
<div class="speaker-item active" data-speaker="main-speaker">
130+
<img src="images/A profile pic for a professor at stanford university.png" class="speaker-image">
131+
<div class="speaker-info">
132+
<div class="speaker-name">John Doe</div>
133+
<div class="speaker-title">AI in Start-ups and Entrepreneurship</div>
134+
<div class="speaker-time">12:30 AM</div>
135+
<div class="speaker-affiliation">Stanford Artificial Intelligence Laboratory</div>
136+
<div class="speaker-bio">Expert in AI applications for startups with 10+ years of experience...</div>
137+
</div>
138+
</div>
139+
140+
<!-- Speaker 2 -->
141+
<div class="speaker-item" data-speaker="speaker-2">
142+
<img src="images/A profile pic for a Professor in dijon university.png" class="speaker-image">
143+
<div class="speaker-info">
144+
<div class="speaker-name">Jane Smith</div>
145+
<div class="speaker-title">Advanced Machine Learning Techniques</div>
146+
<div class="speaker-time">2:00 PM</div>
147+
<div class="speaker-affiliation">Dijon University</div>
148+
</div>
149+
</div>
150+
151+
<!-- Speaker 3 -->
152+
<div class="speaker-item" data-speaker="speaker-3">
153+
<img src="images/A profile pic for a professor in Guelma university.png" class="speaker-image">
154+
<div class="speaker-info">
155+
<div class="speaker-name">Ahmed Khan</div>
156+
<div class="speaker-title">Ethics in Artificial Intelligence</div>
157+
<div class="speaker-time">3:30 PM</div>
158+
<div class="speaker-affiliation">Guelma University</div>
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
`;
164+
98165
// Sélectionner le conteneur du programme
99166
const scheduleContainer = document.querySelector('.schedule-container');
100167

@@ -118,57 +185,75 @@ dayButtons.forEach((button, index) => {
118185
});
119186
});
120187

121-
// Définir le sous-programme
122-
const subProgram = `
123-
<div class="banner">
124-
<button class="close-button">×</button>
125-
<div class="diagonal-line"></div>
126-
<div class="content">
127-
<div class="speaker-main">
128-
<img src="images/A profile pic for a professor at stanford university.png" alt="Main Speaker">
129-
</div>
130-
131-
<div class="info">
132-
<div class="titre">AI in Start-ups and Entrepreneurship</div>
133-
<div class="details">
134-
<span>Time: 12:30 AM</span>
135-
<span>Speaker: John Doe</span>
136-
<span>Stanford Artificial Intelligence Laboratory</span>
137-
</div>
138-
</div>
139-
140-
<div class="other-speakers">
141-
<div class="speaker-small">
142-
<img src="images/A profile pic for a Professor in dijon university.png" alt="Speaker 2">
143-
</div>
144-
<div class="speaker-small">
145-
<img src="images/A profile pic for a professor in Guelma university.png" alt="Speaker 3">
146-
</div>
147-
</div>
148-
</div>
149-
</div>
150-
`;
151-
152188
// Fonction pour afficher le sous-programme
153189
function showSubProgram(event) {
190+
// Vérifier si un sous-programme est déjà affiché pour cet élément
191+
const parentScheduleItem = event.target.closest('.schedule-item');
192+
const existingSubProgram = parentScheduleItem.nextElementSibling;
193+
194+
// Si un sous-programme existe déjà, on le supprime
195+
if (existingSubProgram && existingSubProgram.classList.contains('banner-container')) {
196+
existingSubProgram.remove();
197+
return;
198+
}
199+
154200
// Créer un conteneur pour le sous-programme
155201
const subProgramContainer = document.createElement('div');
202+
subProgramContainer.className = 'banner-container';
156203
subProgramContainer.innerHTML = subProgram;
157204

158205
// Insérer le sous-programme après l'élément parent du bouton cliqué
159-
const parentScheduleItem = event.target.closest('.schedule-item');
160206
parentScheduleItem.insertAdjacentElement('afterend', subProgramContainer);
161207

162-
// Ajouter un écouteur d'événements au bouton de fermeture
163-
const closeButton = subProgramContainer.querySelector('.close-button');
164-
closeButton.addEventListener('click', () => {
165-
subProgramContainer.remove(); // Supprimer le sous-programme
208+
// Configurer les écouteurs d'événements pour les speakers
209+
setupSpeakerEventListeners(subProgramContainer);
210+
}
211+
212+
// Fonction pour configurer les écouteurs d'événements des speakers
213+
function setupSpeakerEventListeners(container) {
214+
const speakerItems = container.querySelectorAll('.speaker-item');
215+
216+
speakerItems.forEach(item => {
217+
item.addEventListener('click', function() {
218+
const speakerId = this.getAttribute('data-speaker');
219+
220+
// Retirer la classe active de tous les éléments
221+
speakerItems.forEach(i => {
222+
i.classList.remove('active');
223+
// Réduire les infos des autres speakers
224+
const infoDiv = i.querySelector('.speaker-info');
225+
if (i !== this) {
226+
infoDiv.innerHTML = `
227+
<div class="speaker-name">${speakersInfo[i.getAttribute('data-speaker')].name}</div>
228+
<div class="speaker-title">${speakersInfo[i.getAttribute('data-speaker')].title}</div>
229+
<div class="speaker-time">${speakersInfo[i.getAttribute('data-speaker')].time}</div>
230+
<div class="speaker-affiliation">${speakersInfo[i.getAttribute('data-speaker')].affiliation}</div>
231+
`;
232+
}
233+
});
234+
235+
// Ajouter la classe active à l'élément cliqué
236+
this.classList.add('active');
237+
238+
// Mettre à jour les informations détaillées pour le speaker sélectionné
239+
const infoDiv = this.querySelector('.speaker-info');
240+
infoDiv.innerHTML = `
241+
<div class="speaker-name">${speakersInfo[speakerId].name}</div>
242+
<div class="speaker-title">${speakersInfo[speakerId].title}</div>
243+
<div class="speaker-time">${speakersInfo[speakerId].time}</div>
244+
<div class="speaker-affiliation">${speakersInfo[speakerId].affiliation}</div>
245+
<div class="speaker-bio">${speakersInfo[speakerId].bio}</div>
246+
`;
247+
});
166248
});
167249
}
168250

169251
// Fonction pour attacher les écouteurs d'événements aux boutons arrow-button
170252
function attachArrowButtonListeners() {
171253
document.querySelectorAll('.arrow-button').forEach(button => {
254+
// Supprimer d'abord les écouteurs existants pour éviter les doublons
255+
button.removeEventListener('click', showSubProgram);
256+
// Ajouter le nouvel écouteur
172257
button.addEventListener('click', showSubProgram);
173258
});
174259
}

0 commit comments

Comments
 (0)