-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstep1.html
397 lines (341 loc) · 14.9 KB
/
step1.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
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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grande annonce</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="des infos sur le mariage">
<meta name="author" content="samy">
<!-- Le styles -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="./bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- le custom -->
<link href="./css/letsjam.css" rel="stylesheet">
<!-- le font -->
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Cabin" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="./bootstrap/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./bootstrap/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="./bootstrap/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./bootstrap/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="./bootstrap/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="./bootstrap/ico/favicon.png">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="400">
<!--[if lt IE 7]>
<p class="chromeframe">Désolé, mais votre navigateur est vraiment <strong>dépassé</strong>. Merci de <a href="http://browsehappy.com/">mettre à jour votre navigateur</a> ou <a href="http://www.google.com/chromeframe/?redirect=true">d'activer Google Chrome Frame</a> pour voir ce site correctement.</p>
<![endif]-->
<div class="container" style="width:100%">
<div class="navbar navbar-fixed-top navbar-static-top">
<div class="navbar-inner">
<a class="brand hidden-phone" href="#">Mariage Anne-Gaëlle et Samy</a>
<ul class="nav pull-right">
<li class="menu_entry"><a href="#mainevent">Good news everyone!</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Je viens, bien sûr!
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="menu_entry">
<a href="#ou">Mais ça se passe où?</a>
</li>
<li class="menu_entry">
<a href="#quand">Et ça se passe quand?</a>
</li>
<li class="menu_entry">
<a href="#contact">Comment vous contacter?</a>
</li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Je voudrais savoir...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="menu_entry">
<a href="#dresscode">... quel est le dresscode?</a>
</li>
<li class="menu_entry">
<a href="#logis">... où peut-on loger?</a>
</li>
<li class="menu_entry">
<a href="#enfants">... que faire des enfants?</a>
</li>
<li class="menu_entry">
<a href="#liste">... avez-vous une liste de mariage?</a>
</li>
<li class="menu_entry" style="display: none;">
<a href="#doomonyou">... un secret?</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="main">
<div class="block" id="mainevent" >
<div >
<h1>Anne-Gaëlle et Samy se marient!</h1>
<div class="alert alert-info">
<p><strong>Mise à jour du 4 juillet</strong></p><p>Nous avons rajouté les informations sur la <a href="#liste" title="Vers l'épluche-marionettes">liste de mariage</a>, ainsi qu'un rappel; si vous êtes invité au repas, nous organisons aussi un brunch le lendemain midi pour vous remettre de la soirée :)</p>
</div>
<p>Hé oui! Après toutes ces aventures depuis 8 ans, vous ne vous y attendiez plus (ou pas)! On ne va pas dire que nous non plus, mais presque!</p>
<p>Alors un mariage vient en général avec tout plein de questions; ce site a pour but de répondre à vos interrogations afin de vous permettre de venir nous retrouver dans les meilleures conditions possibles!</p>
</div>
</div>
<div class="block" id="ou">
<div >
<h2>Où?</h2>
<p><img src="img/x.jpg" title="Merci Junior!"/></p>
<p>Le mariage se déroulera à la Mairie de <strong class="ObnoxiousMe focusOnChatillon">Chatillon sur Seine</strong>, à 1h de Dijon et 2h30 de Paris.</p>
<div id="mobile_map" class="visible-phone map">
</div>
<p>Comment venir?</p>
<ul>
<li><strong>en voiture</strong>: Les doux vallons des autoroutes A5 et A6 peuvent nous amener à nous.</li>
<li><strong>en train</strong>: La gare la plus proche de Chatillon sur Seine se trouve à <strong class="ObnoxiousMe focusOnMontbard">Montbard</strong>, et un service de bus relie les deux villes. Si vous avez besoin de transport entre Montbard et Chatillon sur Seine, <a href="#contact">faites-le nous savoir</a>. Il est aussi possible de louer des voitures via Sixt ou Herz entre autre.
</li>
</ul>
</div>
</div>
<div class="block" id="quand" >
<div>
<h2>Quand?</h2>
<p>Réglez vos calendriers sur le 21 septembre 2013, à 16h. Pour les plus précis d'entre vous c'est <span id="farFuture">dans <span id="remainingDays"></span> jours!</span><span id="tomorrow">demain!!</span><span id="today">AUJOURD'HUI!!1!!OMFG!!!</span><span id="past">passé... mais le Doc peut vous aider :)</span></p>
<p>Si vous êtes invité au repas du soir, n'hésitez pas à repasser le <strong>dimanche midi</strong> pour un buffet.</p>
</div>
</div>
<div class="block" id="contact" >
<div>
<h2>Comment nous contacter?</h2>
<p>Si vous n'avez pas de projecteur suffisament puissant pour balayer le ciel avec nos initiales, vous pouvez utiliser les moyens suivants:</p>
<ul>
<li><strong>par email</strong>: <a href="mailto:[email protected]">[email protected]</a></li>
<li><strong>par courrier</strong>: Anne-Gaëlle Donnet et Samy Beaudoux, 8 rue Seguin, 69002 Lyon</li>
<li><strong>adresse du jour</strong>: Ferme de Bon Espoir, Route d’Aisey à Coulmier le Sec 21400 Aisey sur Seine
</ul>
</div>
</div>
<div class="block" id="dresscode">
<div >
<h2>Quel est le dresscode?</h2>
<p>Notre humour facétieux et sophistiqué pourrait nous pousser à prôner le costume de poulet ou les maillots de bain. Néammoins c'est une question sérieuse aussi nous répondrons simplement qu'il n'y a pas de dresscode particulier demandé pour les invités.</p>
<p>Prévoyez quand même une petite laine au cas ou l'automne serait particulièrement brumeux.</p>
</div>
</div>
<div class="block" id="logis">
<div >
<h2>Où peut-on loger?</h2>
<p>Une liste d'hôtels/gîtes/chambres d'hôte à proximité du <span class="ObnoxiousMe focusOnBonEspoir" title="Ferme de Bon-espoir">lieu du vin d'honneur et du repas</span> est disponible ci-dessous. Cliquez sur un lieu pour le voir sur la carte:</p>
<ul id="logements">
</ul>
<p>Il est possible de camper sur les lieux du mariage pour les afficionados de la toile de tente. Merci de nous <a href="#contact">prévenir</a> si vous choisissez cette solution.</p>
</div>
</div>
<div class="block" id="enfants">
<div >
<h2>Et les enfants?</h2>
<p>Nous sommes actuellement à la recherche des clones de Mary Poppins nécessaires à la garde des enfants pendant le repas, ces derniers seront gardés dans le gîte jouxtant la salle du mariage. Il se peut toutefois que les possibilités de garde soient modifiées en cas d'inexistence de clones de Mary Poppins...</p>
<p>Autant vous dire que ça va modifier sec.</p>
<p>Cette section sera mise à jour ultérieurement quand nous aurons plus d'informations.</p>
</div>
</div>
<div class="block" id="liste">
<div >
<h2>Avez-vous une liste de mariage?</h2>
<p>Notre plus beau cadeau ce sera à n'en pas douter votre présence (et la fête!)</p>
<p>Mais si vous souhaitez nous témoigner davantage, nous vous serons reconnaissants de participer à notre voyage de noces.</p>
<p>Nous avons décidé de partir pour l'<strong>Ouzbekistan</strong>, un des pays de la route de la soie dont une ville nous fait réver depuis bien longtemps: Samarkande.</p>
<p>Si vous voulez participer à nous dépayser, merci de contacter l'agence Asia à Lyon:</p>
<p>
Asia<br/>
46 rue du Président Edouard Herriot<br/>
69002 Lyon<br/>
04 78 38 55 75<br/>
<p>
en donnant un de nos deux noms pour qu'ils puissent retrouver le dossier (Beaudoux ou Donnet).
</p>
<p>Il est possible de participer par courrier ou par téléphone; si vous le préférez, une urne sera disponible pendant le mariage.
<pre style="display:none;">
Autrefois pour faire sa cour
On parlait d'amour
Pour mieux prouver son ardeur
On offrait son coeur
Maintenant c'est plus pareil
Ça change ça change
Pour séduire le cher ange
On lui glisse à l'oreille
Ah Gudule, viens m'embrasser, et je te donnerai...
Un frigidaire, un joli scooter, un atomixer
Et du Dunlopillo
Une cuisinière, avec un four en verre
Des tas de couverts et des pelles à gâteau!
Une tourniquette pour faire la vinaigrette
Un bel aérateur pour bouffer les odeurs
Des draps qui chauffent
Un pistolet à gaufres
Un avion pour deux...
Et nous serons heureux!
Autrefois s'il arrivait
Que l'on se querelle
L'air lugubre on s'en allait
En laissant la vaisselle
Maintenant que voulez-vous
La vie est si chère
On dit: "rentre chez ta mère"
Et on se garde tout
Ah Gudule, excuse-toi, ou je reprends tout ça...
Mon frigidaire, mon armoire à cuillers
Mon évier en fer, et mon poêle à mazout
Mon cire-godasses, mon repasse-limaces
Mon tabouret-à-glace et mon chasse-filous!
La tourniquette, à faire la vinaigrette
Le ratatine ordures et le coupe friture
Et si la belle se montre encore rebelle
On la ficelle dehors, pour confier son sort...
Au frigidaire, à l'efface-poussière
A la cuisinière, au lit qu'est toujours fait
Au chauffe-savates, au canon à patates
A l'éventre-tomate, à l'écorche-poulet!
Mais très très vite
On reçoit la visite
D'une tendre petite
Qui vous offre son coeur
Alors on cède
Car il faut qu'on s'entraide
Et l'on vit comme ça jusqu'à la prochaine fois
Et l'on vit comme ça jusqu'à la prochaine fois
Et l'on vit comme ça jusqu'à la prochaine fois</pre>
</div>
</div>
<div class="block" id="doomonyou">
<div >
<h2>Cette page contient-elle un secret?</h2>
<p>Les plus joueurs d'entre vous le savent peut-être déjà... :)</p>
</div>
</div>
</div>
<div id="company" class="hidden-phone">
<div id="mainevent_illustration" class="illustration">
<span class="legend">le mariage (allégorie) par Matthias B.</span>
</div>
<div id="ou_illustration" class="illustration map">
</div>
<div id="quand_illustration" class="illustration">
</div>
<div id="contact_illustration" class="illustration">
</div>
<div id="dresscode_illustration" class="illustration">
</div>
<div id="logis_illustration" class="illustration map">
</div>
<div id="enfants_illustration" class="illustration">
</div>
<div id="liste_illustration" class="illustration" title="Un frigidaire, un joli scooter, un atomixer
Et du Dunlopillo
Une cuisinière, avec un four en verre
Des tas de couverts et des pelles à gâteau!
Une tourniquette pour faire la vinaigrette
Un bel aérateur pour bouffer les odeurs
Des draps qui chauffent
Un pistolet à gaufres
Un avion pour deux...
Et nous serons heureux!">
</div>
<div id="doomonyou_illustration" class="illustration">
</div>
<div id="secret_illustration" class="illustration">
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<script src="./bootstrap/js/jquery.js" type="text/javascript"></script> <!-- jquery from bootstrap -->
<script src="./script/konami.1.4.1.pack.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./script/jamminnow.js"></script>
<script type="test/javascript">
var easter_egg = new Konami(function() { alert('Konami code!')});
easter_egg.pattern = "38383838";
</script>
<script id="LogisTemplate" type="text/html">
<div class="InfoBlock">
<div class="MainData">
<div class="Nom"><#= Nom #></div>
<div class="Adresse"><#= Adresse #></div>
<div class="Telephone"><#= Telephone #></div>
</div>
</div>
<div class="InfoBlock">
<div class="AdditionalData">
<ul>
<# for(var i=0; i < Infos.length; i++)
{ #>
<li><#= Infos[i]#></li>
<# } #>
</ul>
</div>
</div>
</script>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
(function() {
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://stats.beaudoux.net/";
_paq.push(["setTrackerUrl", u+"piwik.php"]);
_paq.push(["setSiteId", "1"]);
var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
})();
function toggleVideo(state) {
// if state == 'hide', hide. Else: show video
var div = document.getElementById("hello_there");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
div.style.display = state == 'hide' ? 'none' : '';
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
var easter_egg = new Konami(function() {
$('#hello_there').modal('show');
$("#surprise")[0].src = "http://www.youtube.com/embed/2u7XysaEVBs?rel=0&wmode=transparent&enablejsapi=1&autoplay=1";
});
/*$('#hello_there').on('show', function () {
toggleVideo("");
})
$('#hello_there').on('hidden', function () {
toggleVideo("hide");
})*/
</script>
<!-- Piwik Image Tracker -->
<noscript><img src="http://stats.beaudoux.net/piwik.php?idsite=1&rec=1" style="border:0" alt="" /></noscript>
<!-- End Piwik -->
<!-- End Piwik Code -->
<div class="modal fade hide" id="hello_there" style="width:670px;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Oh! Un code secret!</h3>
</div>
<div class="modal-body">
<p>
<iframe id="surprise" width="640" height="360" src="" frameborder="0" allowfullscreen></iframe>
</p>
</div>
</div>
</body>
</html>