Bootstrap 101 Template.html 6.06 KB
Newer Older
Ag3m's avatar
Ag3m committed
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
<!DOCTYPE html>
<!-- saved from url=(0048)file:///home/ag3m/Bureau/Code/PiPhone/index.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="file:///home/ag3m/Bureau/Code/PiPhone/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Custom css -->
    <style>
    //	.tropgros {display: none;} 
    //	p,div,span {margin:0!important; padding:0!important; text-align: center;} 
      .riquiqui {display: none;} 
    
    	.panel {margin:0.5em !important; padding: 0.5em !important;}
    	form {margin:0.5em;}
    	.form-group + button {padding:0!important; }
    </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">
			<div class="row">
				<div class="col-sm-12">
					<!-- contact page -->
					<div class="col-sm-2 tropgros"><!-- image à gauche -->	
						<img class="img-responsive img-circle" src="./Bootstrap 101 Template_files/108570.jpg" alt="mep">
					</div><!-- /image à gauche -->
				
					<div class="col-sm-10"><!-- pas image -->
						<div class="row">
							<div class="col-sm-8"><!-- gauche -->
							<div><!-- titre -->
								<h2 class="tropgros" id="name">{{ @contact.first_name }} <br class="visible-xs-block">{{ @contact.last_name }}</h2>
								<h3 class="riquiqui" id="name">{{ @contact.first_name }} <br>{{ @contact.last_name }}</h3>
							</div><!-- /titre -->
							
							<div class="visible-xs-block"><!-- infos -->
								<address style="margin-top:1em;" class="tropgros">
									<strong>Informations</strong><br>
									Blablabla<br>
								</address>
									<p class="lead text-center"><abbr title="Numéro de téléphone">Tel:</abbr> <a href="tel: {{ @contact.tel }}">{{ @contact.tel }}</a></p>
								
							</div><!-- /infos -->
								
							<div><!-- groupes -->
									<repeat group="{{ @contact.groups }}" value="{{ @group }}">
										<check if="{{ @group.type!=&#39;Committee&#39; }}">
								<dl class="dl-horizontal tropgros" id="resume">
											<dt>{{ @group.type }}:</dt>
											<dd><a href="https://memopol.lqdn.fr/europe/parliament/group/Greens/EFA/"><img src="./Bootstrap 101 Template_files/GreensEFA.png" height="24" alt="Greens/EFA"></a> - {{ @group.name }}</dd>
											<dt>{{ @group.type }}:</dt>
											<dd><a href="https://memopol.lqdn.fr/europe/parliament/group/Greens/EFA/"><img src="./Bootstrap 101 Template_files/GreensEFA.png" height="24" alt="Greens/EFA"></a> - {{ @group.name }}</dd>
								</dl>
								<ul class="list-inline riquiqui" id="committee">
											<li><img src="./Bootstrap 101 Template_files/GreensEFA.png" height="24" alt="Greens/EFA"></li>
											<li><img src="./Bootstrap 101 Template_files/GreensEFA.png" height="24" alt="Greens/EFA"></li>
								</ul>
										</check>
									</repeat>
							</div><!-- /groupes -->
							
							
							<div><!-- committee -->
								<repeat group="{{ @contact.groups }}" value="{{ @group }}">
									<check if="{{ @group.type==&#39;Committee&#39; }}">
										<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></ahref="https:></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></ahref="https:></abbr></li>
										</ul>
									</check>
								</repeat>
							</div><!-- /committee -->
							</div><!-- /-- gauche -->
					
							<div class="col-sm-4"><!-- droite -->
							<div class="hidden-xs text-right"><!-- infos -->
								<address style="margin-top:1em;">
									<strong>Informations</strong><br>
									Blablabla<br>
									<p class="lead text-center"><abbr title="Numéro de téléphone">Tel:</abbr> <a href="tel: {{ @contact.tel }}">{{ @contact.tel }}</a></p>
								</address>
							</div><!-- /infos -->
					
							<div class="text-center"><!-- actions -->
								<button type="button" class="btn btn-primary" title="Appeler maintenant"><span class="glyphicon glyphicon-earphone"></span></button>
								<button type="button" class="btn btn-default" title="Plus d&#39;informations"><a href="https://memopol.lqdn.fr/europe/parliament/deputy/AmeliaAndersdotter/"><span class="glyphicon glyphicon-info-sign"></span></a></button>
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label for="country">Choisissez un pays : </label>
										<select name="country" id="country" onchange="$(&#39;#selcountry&#39;).submit()"><option value="">-- Toute l'Europe -- </option></select>
									</div><!-- /form-group -->
									<button type="submit" class="btn btn-default" title="Choisir un autre député"><span class="glyphicon glyphicon-refresh"></span></button>
								</form>
  
  
								
							</div><!-- /actions -->
						</div><!-- /droite -->
					
						</div><!-- /row-->
					</div><!--/.col-sm-6--><!-- /pas image -->
			<!-- contact page -->
		  	</div>
		  </div>
		</div><!-- /container-fluid -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="./Bootstrap 101 Template_files/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="./Bootstrap 101 Template_files/bootstrap.min.js"></script>
  

</body></html>