index.html 12.3 KB
Newer Older
Ag3m's avatar
Ag3m committed
1
2
3
4
5
6
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
Ag3m's avatar
Ag3m committed
7
    <title>Module PiPhone</title>
Ag3m's avatar
Ag3m committed
8
9
10
11
12
13
14
15
16
17
18
19
20

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Custom css -->
    <style>
    	@media (max-width: 768px) {
		  	.pasmodal p, .pasmodal div, .pasmodal span, .pasmodal hr {margin:0.1em!important; padding:0!important; text-align: center;}
		  	.modal ul {padding:0.1em!important;}
    	}
    	
    	.panel {margin:0.5em !important; padding: 0.5em !important;}
    	.form-inline > * {margin:0.5em!important;}
Ag3m's avatar
Ag3m committed
21
    	.well {background: #777777; color: #FFFFFF;}
Ag3m's avatar
Ag3m committed
22
23
    	h1 {font-size: 2em;}
    	a {color: #000000;}
Ag3m's avatar
Ag3m committed
24
25
    	.btn-info {background: #777777; border-color: #777777;}
    	.btn-info:hover {background: #666666; border-color: #666666;}
Ag3m's avatar
Ag3m committed
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body style="background:black;">
		<div class="container-fluid panel panel-default pasmodal">
			<div class="row">
				<div class="col-sm-12">
					<!-- contact page -->
					<div class="col-md-2 col-sm-4 hidden-xs"><!-- image à gauche -->	
Ag3m's avatar
Ag3m committed
41
						<img class= "img-responsive img-circle" src="http://www.europarl.europa.eu/mepphoto/108570.jpg" width="140px" alt="mep">
Ag3m's avatar
Ag3m committed
42
43
44
45
						
							<div class="visible-sm-block"><!-- infos -->
								<address style="margin-top:1em;">
									<strong>Informations</strong><br>
Ag3m's avatar
Ag3m committed
46
47
48
49
    								Cred messenger bag ethical semiotics, <br>
    								Pinterest pug skateboard fap hella slow-carb, <br>
    								Synth squid ugh cray trust fund listicle, <br>
    								Bold-pressed hoodie retro.
Ag3m's avatar
Ag3m committed
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
								</address>
							</div><!-- /infos -->
					</div><!-- /image à gauche -->
				
					<div class="col-md-10 col-sm-8"><!-- pas image -->
						<div class="row">
							<div class="col-md-8"><!-- gauche -->
							<div><!-- titre -->
								<h1 class="text-center" id="name">{{ @contact.first_name }} <br class="visible-xs-block">{{ @contact.last_name }}</h2>
								
								<div class="text-center row"><!-- actions -->
									<p class="lead text-center">
										<abbr title="Numéro de téléphone">Tel:</abbr> <a href="tel: {{ @contact.tel }}">{{ @contact.tel }}</a>
										<br class="visible-xs-block">
										
										<button type="button" class="btn btn-default" title="Appeler maintenant" data-toggle="modal" data-target="#CallModal"><span class="glyphicon glyphicon-earphone"></span></button>
										<a type="button" class="btn btn-info" title="Plus d'informations" href="https://memopol.lqdn.fr/europe/parliament/deputy/AmeliaAndersdotter/"><span class="glyphicon glyphicon-info-sign"></span></a>
										<a type="button" class="btn btn-default visible-xs-inline-block" title="Choisir un autre député" href="#"><span class="glyphicon glyphicon-refresh"></span></a>
									</p>
								</div><!-- /actions -->
							</div><!-- /titre -->
								
							<div><!-- groupes -->
Ag3m's avatar
Ag3m committed
73
74
75
								<repeat group="{{ @contact.groups }}" value="{{ @group }}">
									<check if="{{ @group.type!='Committee' }}">
							            <dl class="dl-horizontal hidden-xs" id="resume">
Ag3m's avatar
Ag3m committed
76
77
78
79
											<dt>{{ @group.type }}:</dt>
											<dd><a href="https://memopol.lqdn.fr/europe/parliament/group/Greens/EFA/"><img src="https://memopol.lqdn.fr/static/img/groups/eu/GreensEFA.png" height="24" alt="Greens/EFA" /></a> - {{ @group.name }}</a></dd>
											<dt>{{ @group.type }}:</dt>
											<dd><a href="https://memopol.lqdn.fr/europe/parliament/group/Greens/EFA/"><img src="https://memopol.lqdn.fr/static/img/groups/eu/GreensEFA.png" height="24" alt="Greens/EFA" /></a> - {{ @group.name }}</a></dd>
Ag3m's avatar
Ag3m committed
80
81
							            </dl>
							            <ul class="list-inline visible-xs-block" id="committee">
Ag3m's avatar
Ag3m committed
82
83
											<li><img src="https://memopol.lqdn.fr/static/img/groups/eu/GreensEFA.png" height="24" alt="Greens/EFA" /></li>
											<li><img src="https://memopol.lqdn.fr/static/img/groups/eu/GreensEFA.png" height="24" alt="Greens/EFA" /></li>
Ag3m's avatar
Ag3m committed
84
85
86
						                </ul>
									</check>
								</repeat>
Ag3m's avatar
Ag3m committed
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
							</div><!-- /groupes -->
							
							
							<div><!-- committee -->
								<repeat group="{{ @contact.groups }}" value="{{ @group }}">
									<check if="{{ @group.type=='Committee' }}">
										<ul class="list-inline" id="committee">
											<li><abbr title="Committee on Industry, Research and Energy" class="initialism"><ahref="https://memopol.lqdn.fr/europe/parliament/committee/ITRE/"><div class="well well-sm">{{ @group.name }}</div></a></abbr></li>
											<li><abbr title="Committee on Industry, Research and Energy" class="initialism"><ahref="https://memopol.lqdn.fr/europe/parliament/committee/ITRE/"><div class="well well-sm">{{ @group.name }}</div></a></abbr></li>
										</ul>
									</check>
								</repeat>
							</div><!-- /committee -->
							</div><!-- /-- gauche -->
					
							<div class="col-md-4"><!-- droite -->
							<div class="hidden-xs hidden-sm text-right"><!-- infos -->
								<address style="margin-top:1em;">
									<strong>Informations</strong><br>
Ag3m's avatar
Ag3m committed
106
107
108
109
    								Cred messenger bag ethical semiotics, <br>
    								Pinterest pug skateboard fap hella slow-carb, <br>
    								Synth squid ugh cray trust fund listicle, <br>
    								Bold-pressed hoodie retro.
Ag3m's avatar
Ag3m committed
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
								</address>
							</div><!-- /infos -->
					
								<hr class="hidden-xs">
								
							<div class="text-center"><!-- random -->
								<form class="form-inline" role="form">
									<div class="form-group hidden-xs">
										<label class="" for="country">Pays : </label>
										<select class="form-control" name="country" id="country" onchange="$('#selcountry').submit()"><option value="">-- Toute l'Europe -- </select>
									</div><!-- /form-group -->
									<button class="btn btn-default invisible hidden-xs hidden-sm" title="Choisir un autre député"><span class="glyphicon glyphicon-refresh"></span></button>
									
									<div class="form-group hidden-xs">
										<label class="" for="country">Pays : </label>
										<select class="form-control" name="country" id="country" onchange="$('#selcountry').submit()"><option value="">-- Toute l'Europe -- </select>
									</div><!-- /form-group -->
									<button type="submit" class="btn btn-default hidden-xs" title="Choisir un autre député"><span class="glyphicon glyphicon-refresh"></span></button>
								</form>
							</div><!-- /random -->
						</div><!-- /droite -->
					
						</div><!-- /row-->
					</div><!--/.col-sm-6--><!-- /pas image -->
			<!-- contact page -->
		  	</div>
		  </div>
		</div><!-- /container-fluid -->

<!-- ********** POP-UP ********** -->

<div class="modal fade" id="CallModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content row">
		  <div class="col-sm-6">
		  
		  	<div class="modal-header">
		  		<h4 class="modal-title" id="myModalLabel">Appeler gratuitement</h4>
      	</div>
      	
      	<div class="modal-body">
        	<p>Si vous voulez appeler gratuitement, vous devez nous donner votre numéro de téléphone commençant par l'<a href="http://en.wikipedia.org/wiki/List_of_country_calling_codes#Zones_3.2F4_.E2.80.93_Europe" title="Voir sur Wikipedia">indicatif</a> de votre pays, sans le premier 0 (le PiPhone rappellera ce numéro pour démarrer la communication).</p>
        	<form class="form-inline" role="form">
        		<div class="form-group">
							<div class="input-group">
								<label class="sr-only" for="numeroTel">Votre numéro</label>
								<div class="input-group-addon hidden-xs"><span class="glyphicon glyphicon-earphone"></span></div>
								<input type="tel" class="form-control" id="numeroTel" placeholder="+33123456789001">
							</div>
						</div>
						<button type="submit" class="btn btn-default">Je suis prêt&middot;e !</button>
					</form>
      	</div>
		  
		  	<div class="modal-header">
		  		<h4 class="modal-title" id="myModalLabel">Mes arguments</h4>
      	</div>
      	
      	<div class="modal-body">
      		<ul>
      			<li>Artisan pour-over Pinterest, four dollar toast chillwave vegan aesthetic meggings mustache keytar forage tattooed bespoke Williamsburg Godard.</li>
      			<li>Authentic drinking vinegar lo-fi, raw denim gentrify health goth single-origin coffee pork belly master cleanse.</li>
      			<li>Single-origin coffee locavore photo booth lo-fi, typewriter vegan actually blog kale chips banjo.</li>
      		</ul>
      		<p class="text-center"><a type="button" class="btn btn-default" title="Plus d'arguments" href="https://memopol.lqdn.fr/europe/parliament/deputy/AmeliaAndersdotter/"><span class="glyphicon glyphicon-plus"></span></a></p>
      	</div>
      	
		  </div><!-- /col-sm-6 -->
		  <div class="col-sm-6">
		  	<div class="modal-header">
		  		<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		  		<h4 class="modal-title" id="myModalLabel2">Votre appel</h4>
      	</div>
      	<div class="modal-body">
        	<form role="form">
						<div class="checkbox">
							<label>
								<input type="checkbox"> J'ai réussi à parler à quelqu'un
							</label>
						</div>
						<div class="radio">
							<label>
								<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">J'ai pu parler au/à la député&middot;e.
							</label>
							<label>
								<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">J'ai parlé à son assistant&middot;e.
							</label>
						</div>
						<div class="form-group">
							<label for="question1">Quelles informations avez vous obtenues ?</label>
							<input type="text" class="form-control" id="question1" placeholder="question1">
						</div>
						<div class="form-group">
							<label for="question2">Ressenti général de la conversation</label>
							<textarea class="form-control" id="question2" placeholder="question2" row="3"></textarea>
						</div>
						<div class="checkbox">
							<label>
								<input type="checkbox"> Je souhaite m'abonner à la newsletter de la campagne
							</label>
						</div>
						<div class="form-group">
							<label for="email">Email address</label>
							<input type="email" class="form-control" id="email" placeholder="Entrer votre email">
						</div>
						<p class="text-center">
							<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#CallModal">Envoyer</button>
						</p>
					</form>
      	</div>
		  </div><!-- /col-sm-6 -->
      
    </div>
  </div>
</div>

<!-- ******** FIN POP-UP ******** -->

<!-- ********** POP-UP 2 ********** -->

<div class="modal fade" id="ThanxModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content row">
		  
		  	<div class="modal-header">
		  		<h4 class="modal-title" id="myModalLabel">Merci d'avoir participé !</h4>
      	</div>
      	
      	<div class="modal-body">
					<p class="text-center">
						Souhaitez-vous partager votre action sur les réseaux sociaux ?
					</p>
					<p class="text-center">
						<a type="button" class="btn btn-default" title="Partager sur facebook" href="">fb</a>
						<a type="button" class="btn btn-default" title="Partager sur twitter" href="">tw</a>
						<a type="button" class="btn btn-default" title="Partager sur google+" href="">g+</a>
					</p>
				
					<p class="text-center">
						<button type="submit" class="btn btn-default">Retour au site</button>
						<button type="submit" class="btn btn-primary">Appeler un&middot;e autre député&middot;e</button>
					</p>
					
      	</div>
		  </div><!-- /col-sm-6 -->
      
    </div>
  </div>
</div>

<!-- ******** FIN POP-UP 2 ******** -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>