-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (178 loc) · 9.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<title>Soutenqnce de thèse - Mehdi ABDELWAHED</title>
<style>
@font-face {
font-family: "TBF";
src: url("theboldfont.ttf");
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Poppins', sans-serif;
}
#mehdi {
font-family: "TBF";
text-transform: uppercase;
}
/* Color adjustments */
.bg-primary {
background-color: #4bb3fd;
/* Turquoise */
}
.text-primary {
color: #4bb3fd;
}
.bg-secondary {
background-color: #50c878;
/* Emerald */
}
.text-secondary {
color: #50c878;
}
/* Fullscreen styles */
#streamContainer:fullscreen {
width: 100vw;
/* Full width */
height: calc(100vw * 9 / 16);
/* 16:9 aspect ratio */
top: 0;
left: 0;
position: fixed;
z-index: 9999;
/* Ensure it is on top */
}
#streamIframe {
width: 100%;
height: 100%;
}
html {
scroll-behavior: smooth;
}
</style>
</head>
<body class="text-gray-800 bg-gray-50">
<!-- Split Image Hero Section -->
<section id="hero" class="bg-white">
<div class="relative isolate px-6 pt-14 lg:px-8">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#50c878] to-[#4bb3fd] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
</div>
</div>
<div class="mx-auto max-w-2xl py-16">
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div
class="relative rounded-full px-3 py-1 text-sm/6 text-primary ring-1 ring-gray-900/10 hover:ring-gray-900/20">
Jeudi 19 Décembre 2024 - 13h30 - Amphithéâtre E2 - CY Cergy Paris université, site de Saint-Martin
</div>
</div>
<div class="text-center">
<h1 id="mehdi" class="text-balance text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl">
Mehdi ABDELWAHED</h1>
<p class="mt-8 text-lg font-medium text-gray-500 sm:text-xl/8">Développement d’un capteur tactile type peau artificielle
appliqué à la voiture autonome utilisant l’influence du Multi fréquentielle
en Tomographie par Impédance Electrique ainsi que de l’IA pour le traitement des données.</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#" id="playOverlay"
class="rounded-md bg-primary px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
<svg class="inline w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
Lancer le livestream
</a>
<a href="mehdi_abdelwahed_thesis.pdf" target="_blank"
class="rounded-md bg-secondary px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary">
<svg class="inline w-4 h-4 mr-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M6 2C4.89 2 4 2.89 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2H6ZM13 9V3.5L18.5 9H13Z" />
</svg>
Lire la thèse
</a>
<a href="#infos" class="text-sm/6 font-semibold text-gray-900">En savoir plus <span
aria-hidden="true">→</span></a>
</div>
</div>
<!-- Conteneur iframe -->
<div class="stream-container relative aspect-video" id="streamContainer">
<button
class="fullscreen-button absolute top-2 right-2 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 transition duration-200 flex items-center z-10"
id="fullscreenButton">
<svg viewBox="0 0 24 24" class="w-5 h-5 mr-1" fill="currentColor">
<path d="M5 14h3v3h2v-5H5v2zm3-6H5v2h5V5H8v3zm6 9h2v-3h3v-2h-5v5zm4-9h-3v-3h-2v5h5z" />
</svg>
<span id="fullscreenText">Plein écran</span>
</button>
<iframe id="streamIframe" class="w-full h-72 md:h-96 rounded-lg shadow-lg" title="PhD Defense Live Stream"
allow="autoplay; microphone; camera" allowfullscreen src="">
</iframe>
</div>
<div class="relative rounded-full px-3 py-1 text-sm/6 text-primary ring-1 ring-gray-900/10 hover:ring-gray-900/20">
Jeudi 19 Décembre 2024 - 13h30 - Amphithéâtre E2 - CY Cergy Paris Université, site de Saint-Martin
</div>
<p>
</p>
</div>
</div>
</section>
<!-- Additional sections can be updated similarly -->
<footer class="footer py-6 border-t border-gray-300">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div class="text-center text-sm text-gray-600">
<p class="text-gray-600">© 2024 Mehdi ABDELWAHED</p>
</div>
</div>
</footer>
</body>
</html>
<script>
const fullscreenButton = document.getElementById('fullscreenButton');
const streamContainer = document.getElementById('streamContainer');
fullscreenButton.addEventListener('click', async () => {
try {
if (!document.fullscreenElement) {
// Enter fullscreen on the container instead of the iframe
await streamContainer.requestFullscreen();
} else {
await document.exitFullscreen();
}
} catch (err) {
console.error('Error attempting to toggle fullscreen:', err);
}
});
// Update button text based on fullscreen state
document.addEventListener('fullscreenchange', () => {
const isFullscreen = document.fullscreenElement;
const buttonText = isFullscreen ? 'Quitter' : 'Plein écran';
fullscreenButton.querySelector('#fullscreenText').textContent = buttonText;
});
const streamIframe = document.getElementById('streamIframe');
const iframe = document.getElementById('streamIframe');
const loadingOverlay = document.getElementById('loadingOverlay');
// Événement lorsqu'un iframe est chargé
iframe.addEventListener('load', () => {
// Masque le conteneur de chargement
loadingOverlay.style.display = 'none';
});
// Exemple : Charger l'iframe après une interaction utilisateur ou un événement
const playOverlay = document.getElementById('playOverlay');
const playOverlay2 = document.getElementById('playOverlay2');
playOverlay.addEventListener('click', () => {
iframe.src = src = "https://teams.microsoft.com/convene/townhall?eventId=2cfe4175-0940-4801-ba98-8d5c7875b260@b8c19512-2aed-471d-a8d1-9b06e7da786a&sessionId=c2e8eaa2-af56-41a0-8e5b-ea2765a06c6c";
playOverlay.classList.add('hidden');
playOverlay2.classList.add('hidden')
});
playOverlay2.addEventListener('click', () => {
// Set the src only after user interaction
streamIframe.src = "https://teams.microsoft.com/convene/townhall?eventId=2cfe4175-0940-4801-ba98-8d5c7875b260@b8c19512-2aed-471d-a8d1-9b06e7da786a&sessionId=c2e8eaa2-af56-41a0-8e5b-ea2765a06c6c";
playOverlay.classList.add('hidden');
playOverlay2.classList.add('hidden')
});
</script>