This repository was archived by the owner on Dec 28, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 9
Expand file tree
/
Copy pathindex.html
More file actions
262 lines (238 loc) · 16.1 KB
/
index.html
File metadata and controls
262 lines (238 loc) · 16.1 KB
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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/newstyles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
<link rel="icon" href="/assets/favicon.png" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="google-site-verification" content="xSYfibs_AKhXuCPTi1UalemeTaH308E4-UZ9pm56FwM" />
<title>Accueil - MobiFer</title>
<meta name="description" content="MobiFer vous propose de naviguer dans le réseau ferré d’Île-de-France (Métro, RER, Transilien et Tramway) par des plans de ligne et des pages de stations, réalisés par notre équipe. Ce centre d’informations concentre entre autres, dans le style de la charte graphique RATP et Île-de-France Mobilités, la liste et la position des sorties des stations, les prochains passages des trains, et quelques articles rédigés par des contributeurs.">
<meta name="theme-color" content="#0b0082">
<style>
@media (max-width: 400px) {
.row-journal {
column-count: 1;
}
}
</style>
</head>
<body>
<a href="/" class="header"><h1>MobiFer</h1></a>
<div class="slideshow-container" style="max-width: 1200px !important; margin: auto; margin-bottom: 10px;">
<div class="slide fade">
<img src="assets/slider/slider1.webp" alt="Slide 1">
<div class="caption">© ArsTC</div>
</div>
<div class="slide fade">
<img src="assets/slider/slider2.webp" alt="Slide 2">
<div class="caption">© Doums_19</div>
</div>
<div class="slide fade">
<img src="assets/slider/slider3.webp" alt="Slide 3">
<div class="caption">© ArsTC</div>
</div>
<div class="slide fade">
<img src="assets/slider/slider4.webp" alt="Slide 4">
<div class="caption">© ArsTC</div>
</div>
<div class="slide fade">
<img src="assets/slider/slider5.webp" alt="Slide 5">
<div class="caption">© Lau290</div>
</div>
<div class="slide fade">
<img src="assets/slider/slider6.webp" alt="Slide 6">
<div class="caption">© ArsTC</div>
</div>
<div class="slide fade">
<img src="assets/slider/slider7.jpg" alt="Slide 7">
<div class="caption">© Aluminium</div>
</div>
</div>
<div class="row-home">
<div class="item">
<div class="box image-center" style="max-width: 1200px !important; margin-top: 0px;">
<h2 class="centered" id="Accueil">Accueil <span class="integrated"><img src="/assets/favicon.svg" alt="de MobiFer" title="MobiFer"></span></h2>
<h3 class="centered">Bienvenue sur MobiFer, un site collaboratif dédié aux transports en commun ferrés d’Île-de-France !</h3>
<p class="justified">Le nom <strong><em>MobiFer</em></strong> tient d’un jeu de mots avec le nom des trains de type <strong>MF</strong> (<strong>M</strong>atériel roulant <strong>F</strong>er) en circulation sur le métro de Paris, comme le MF 01 ou le MF 19.<br>
MobiFer vous propose ainsi de naviguer dans le réseau ferré d’Île-de-France (Métro, RER, Transilien et Tramway) par des <strong>plans de ligne</strong> et des <strong>pages de stations</strong>, réalisés par notre équipe. Ce centre d’informations concentre de petites galeries photo de notre équipe, la liste et la position des <strong>sorties des stations</strong>, ou encore les <strong>prochains passages</strong> des trains aux stations.</p>
<p class="justified"><span class="integrated"><img src="/assets/icons/Perturbation_travaux_couleur_RVB.svg" alt="Travaux"></span> <strong>Attention !</strong> Ce site est encore en construction active et certaines pages n’ont pas encore été créées. À terme, le site vous assurera une navigation sans interruption entre lignes et stations, dénuée d’erreurs 404. <span class="integrated"><img src="/assets/icons/Perturbation_travaux_couleur_RVB.svg" alt="Travaux"></span></p>
</div>
<div class="box image-center" id="Stations" style="max-width: 1200px !important;">
<h2 class="centered">Stations</h2>
<div class="searchbox">
<input type="search" class="stationinput" id="search" placeholder="Rechercher une station..." style="pointer-events: all; cursor: text; opacity: 1; margin-bottom: 20px;">
</div>
<div id="search-results"></div>
<a href="/stations/"><p class="centered">Voir la liste des stations disponibles</p></a>
</div>
<!-- <p class="centered"><em>You can also visit this website in <a href="/en/">English</a>!</em></p> -->
<div class="box image-center" id="Métro" style="max-width: 1200px !important;">
<h2 class="centered"><span class="integrated"><img src="/assets/icons/symbole_metro_RVB.svg" title="Métro"></span> Métropolitain</h2>
<p class="justified">Sélectionnez une ligne parmi celles ci-dessous pour en savoir plus : plan, informations générales et bilan carbone.</p>
<div class="svg-container">
<a href="lines/m01.html"><img src="/assets/icons/metro_1_couleur_RVB.svg" alt="Ligne 1" class="hovereffect"></a>
<a href="lines/m02.html"><img src="/assets/icons/metro_2_couleur_RVB.svg" alt="Ligne 2" class="hovereffect"></a>
<a href="lines/m03.html"><img src="/assets/icons/metro_3_couleur_RVB.svg" alt="Ligne 3" class="hovereffect"></a>
<a href="lines/m03b.html"><img src="/assets/icons/metro_3bis_couleur_RVB.svg" alt="Ligne 3 bis" class="hovereffect"></a>
<a href="lines/m04.html"><img src="/assets/icons/metro_4_couleur_RVB.svg" alt="Ligne 4" class="hovereffect"></a>
<a href="lines/m05.html"><img src="/assets/icons/metro_5_couleur_RVB.svg" alt="Ligne 5" class="hovereffect"></a>
<a href="lines/m06.html"><img src="/assets/icons/metro_6_couleur_RVB.svg" alt="Ligne 6" class="hovereffect"></a>
<a href="lines/m07.html"><img src="/assets/icons/metro_7_couleur_RVB.svg" alt="Ligne 7" class="hovereffect"></a>
<a href="lines/m07b.html"><img src="/assets/icons/metro_7bis_couleur_RVB.svg" alt="Ligne 7 bis" class="hovereffect"></a>
<a href="lines/m08.html"><img src="/assets/icons/metro_8_couleur_RVB.svg" alt="Ligne 8" class="hovereffect"></a>
<a href="lines/m09.html"><img src="/assets/icons/metro_9_couleur_RVB.svg" alt="Ligne 9" class="hovereffect"></a>
<a href="lines/m10.html"><img src="/assets/icons/metro_10_couleur_RVB.svg" alt="Ligne 10" class="hovereffect"></a>
<a href="lines/m11.html"><img src="/assets/icons/metro_11_couleur_RVB.svg" alt="Ligne 11" class="hovereffect"></a>
<a href="lines/m12.html"><img src="/assets/icons/metro_12_couleur_RVB.svg" alt="Ligne 12" class="hovereffect"></a>
<a href="lines/m13.html"><img src="/assets/icons/metro_13_couleur_RVB.svg" alt="Ligne 13" class="hovereffect"></a>
<a href="lines/m14.html"><img src="/assets/icons/metro_14_couleur_RVB.svg" alt="Ligne 14" class="hovereffect"></a>
<br>
<a href="lines/m15.html"><img src="/assets/icons/metro_15_couleur_RVB.svg" alt="Ligne 15" class="hovereffect"></a>
<a href="lines/m16.html"><img src="/assets/icons/metro_16_couleur_RVB.svg" alt="Ligne 16" class="hovereffect"></a>
<a href="lines/m17.html"><img src="/assets/icons/metro_17_couleur_RVB.svg" alt="Ligne 17" class="hovereffect"></a>
<a href="lines/m18.html"><img src="/assets/icons/metro_18_couleur_RVB.svg" alt="Ligne 18" class="hovereffect"></a>
</div>
<h3 style="margin-bottom: 0px;">Lignes spéciales</h3>
<div class="svg-container">
<a href="lines/orv.html"><img src="/assets/icons/LIG_IDFM_C01388.svg" alt="Orlyval" class="hovereffect" title="OrlyVal"></a>
<a href="lines/cgv.html"><img src="/assets/icons/LIG_IDFM_C00563.svg" alt="CDG Val" class="hovereffect" title="CDG Val"></a>
<a href="lines/fun.html"><img src="/assets/icons/funiculaire_montmartre_couleur_RVB.svg" alt="Funiculaire de Montmartre" class="hovereffect" title="Funiculaire de Montmartre"></a>
</div>
</div>
<div class="box image-center" id="Train" style="max-width: 1200px !important;">
<h2 class="centered"><span class="integrated"><img src="/assets/icons/symbole_RER_RVB.svg" title="RER"></span> Réseau Express Régional (RER) et <span class="integrated"><img src="/assets/icons/symbole_train_RVB.svg" title="Transilien"></span> Transilien</h2>
<p class="justified">Sélectionnez une ligne parmi celles ci-dessous pour en savoir plus : plan et informations générales.</p>
<div class="svg-container">
<a href="lines/rerA.html"><img src="/assets/icons/RER_A_couleur_RVB.svg" alt="RER A" class="hovereffect"></a>
<a href="lines/rerB.html"><img src="/assets/icons/RER_B_couleur_RVB.svg" alt="RER B" class="hovereffect"></a>
<a href="lines/rerC.html"><img src="/assets/icons/RER_C_couleur_RVB.svg" alt="RER C" class="hovereffect"></a>
<a href="lines/rerD.html"><img src="/assets/icons/RER_D_couleur_RVB.svg" alt="RER D" class="hovereffect"></a>
<a href="lines/rerE.html"><img src="/assets/icons/RER_E_couleur_RVB.svg" alt="RER E" class="hovereffect"></a>
<br>
<a href="lines/trainH.html"><img src="/assets/icons/train_H_couleur_RVB.svg" alt="Transilien H" class="hovereffect"></a>
<a href="lines/trainJ.html"><img src="/assets/icons/train_J_couleur_RVB.svg" alt="Transilien J" class="hovereffect"></a>
<a href="lines/trainK.html"><img src="/assets/icons/train_K_couleur_RVB.svg" alt="Transilien K" class="hovereffect"></a>
<a href="lines/trainL.html"><img src="/assets/icons/train_L_couleur_RVB.svg" alt="Transilien L" class="hovereffect"></a>
<a href="lines/trainN.html"><img src="/assets/icons/train_N_couleur_RVB.svg" alt="Transilien N" class="hovereffect"></a>
<a href="lines/trainP.html"><img src="/assets/icons/train_P_couleur_RVB.svg" alt="Transilien P" class="hovereffect"></a>
<a href="lines/trainR.html"><img src="/assets/icons/train_R_couleur_RVB.svg" alt="Transilien R" class="hovereffect"></a>
<a href="lines/trainU.html"><img src="/assets/icons/train_U_couleur_RVB.svg" alt="Transilien U" class="hovereffect"></a>
<a href="lines/trainV.html"><img src="/assets/icons/train_V_couleur_RVB.svg" alt="Transilien V" class="hovereffect"></a>
</div>
</div>
</div>
<div class="item">
<div class="box image-center" id="Tramway" style="max-width: 1200px !important;">
<h2 class="centered"><span class="integrated"><img src="/assets/icons/symbole_tram_RVB.svg" title="Tramway"></span> Tramway</h2>
<p class="justified">Sélectionnez une ligne parmi celles ci-dessous pour en savoir plus : plan et informations générales et bilan carbone.</p>
<div class="svg-container">
<a href="lines/t01.html"><img src="/assets/icons/tram_T1_couleur_RVB.svg" alt="Tramway T1" class="hovereffect"></a>
<a href="lines/t02.html"><img src="/assets/icons/tram_T2_couleur_RVB.svg" alt="Tramway T2" class="hovereffect"></a>
<a href="lines/t03a.html"><img src="/assets/icons/tram_T3a_couleur_RVB.svg" alt="Tramway T3a" class="hovereffect"></a>
<a href="lines/t03b.html"><img src="/assets/icons/tram_T3b_couleur_RVB.svg" alt="Tramway T3b" class="hovereffect"></a>
<a href="lines/t04.html"><img src="/assets/icons/tram_T4_couleur_RVB.svg" alt="Tramway T4" class="hovereffect"></a>
<a href="lines/t05.html"><img src="/assets/icons/tram_T5_couleur_RVB.svg" alt="Tramway T5" class="hovereffect"></a>
<a href="lines/t06.html"><img src="/assets/icons/tram_T6_couleur_RVB.svg" alt="Tramway T6" class="hovereffect"></a>
<a href="lines/t07.html"><img src="/assets/icons/tram_T7_couleur_RVB.svg" alt="Tramway T7" class="hovereffect"></a>
<a href="lines/t08.html"><img src="/assets/icons/tram_T8_couleur_RVB.svg" alt="Tramway T8" class="hovereffect"></a>
<a href="lines/t09.html"><img src="/assets/icons/tram_T9_couleur_RVB.svg" alt="Tramway T9" class="hovereffect"></a>
<a href="lines/t10.html"><img src="/assets/icons/tram_T10_couleur_RVB.svg" alt="Tramway T10" class="hovereffect"></a>
<a href="lines/t11.html"><img src="/assets/icons/tram_T11_couleur_RVB.svg" alt="Tramway T11" class="hovereffect"></a>
<a href="lines/t12.html"><img src="/assets/icons/tram_T12_couleur_RVB.svg" alt="Tramway T12" class="hovereffect"></a>
<a href="lines/t13.html"><img src="/assets/icons/tram_T13_couleur_RVB.svg" alt="Tramway T13" class="hovereffect"></a>
<a href="lines/t14.html"><img src="/assets/icons/tram_T14_couleur_RVB.svg" alt="Tramway T14" class="hovereffect"></a>
</div>
</div>
<div class="box image-center" id="Câble" style="max-width: 1200px !important;">
<h2 class="centered"><span class="integrated"><img src="/assets/icons/symbole_cable_RVB.svg"></span> Câble</h2>
<p class="justified">Sélectionnez la ligne ci-dessous pour en savoir plus : plan et informations générales et bilan carbone.</p>
<div class="svg-container">
<a href="lines/c01.html"><img src="/assets/icons/cable_C1_couleur_RVB.svg" alt="Câble C1" class="hovereffect"></a>
</div>
</div>
<div class="box image-center" id="Journal" style="max-width: 1200px !important;">
<h2 class="centered">À la une</h2>
<div id="journal">
</div>
</div>
<div class="box image-center" id="Contact" style="max-width: 1200px !important;">
<h2 class="centered">Contact</h2>
<p class="justified">MobiFer est un projet <strong>open-source</strong> et <strong>collaboratif</strong>. Vous pouvez consulter le code source sur GitHub et nous rejoindre sur Discord pour discuter avec la communauté de vos suggestions par exemple.</p>
<div class="buttons" style="margin-bottom: 10px;">
<a href="https://github.com/Mobifer/mobifer" target="_blank" class="button github"><span class="integrated"><img src="/assets/icons/github.svg" alt="Consultez le code source sur "></span> GitHub</a>
<a href="https://discord.gg/zWraJq5eE5" target="_blank" class="button discord"><span class="integrated"><img src="/assets/icons/discord.svg" alt="Venez discuter avec nous sur "></span> Discord</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer-container" style="margin-top: 10px;"></div>
<script src="/addons/footer.js"></script>
<script>
let slideIndex = 0;
const slides = document.getElementsByClassName("slide");
function showSlides() {
for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1; }
slides[slideIndex - 1].classList.add("active");
setTimeout(showSlides, 3000); // or any interval you like
}
showSlides();
</script>
<script>
const container = document.getElementById("journal");
async function loadArticles() {
try {
const response = await fetch('data/articles.json');
const data = await response.json();
displayArticles(data.articles);
} catch (error) {
console.error('Erreur de chargement des articles :', error);
container.innerHTML = '<p>Erreur de chargement des articles</p>';
}
}
function displayArticles(articles) {
articles = articles.reverse();
const article = articles[0];
const articleElement = document.createElement('div');
articleElement.classList.add('article');
const p = article.paragraphs[0];
// Limit article to the 20 first words
const words = p.content.split(' ');
if (words.length > 50) {
p.content = words.slice(0, 50).join(' ') + '…';
}
let html = `
<h2>${article.title}</h2>
<div class='row-home row-journal'>
<div class='item'>
<img src="${article.titleImage}" alt="Image principale" class="article-img">
<p class="author">Écrit par : ${article.author}
${article.lastMod ? `<br>Dernière modification le : ${article.lastMod}</p>` : `<br>Dernière modification le : ${article.date}</p>`}
</div>
<div class='item'>
<h3>${p.title}</h3>
<p style='text-align: justify'>
${p.content} <a href="/journal.html#${article.id}"><br><strong><em>Lire la suite</em></strong></a>
</p>
${p.image ? `<img src="${p.image}" alt="Illustration du paragraphe" class="article-img">` : ''}
${article.sources ? `<p class="sources">Sources :${article.sources}</p>` : ''}
</div>
</div>
`;
articleElement.innerHTML += html;
container.appendChild(articleElement);
}
window.onload = loadArticles;
</script>
<script src="/assets/script/stationsearch.js" type="module"></script>
</body>
</html>