Skip to content

GitLab

piphone-front
piphone-front
Commit 7fdb238e authored by Ag3m's avatar Ag3m
Browse files
Options

Première version du design

parent d6336284
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 652 additions and 0 deletions
design/css/bootstrap.min.css 0 → 100644
View file @ 7fdb238e
This diff is collapsed.
design/fonts/glyphicons-halflings-regular.svg 0 → 100644
View file @ 7fdb238e
This diff is collapsed.
design/img/Bootstrap 101 Template.html 0 → 100644
View file @ 7fdb238e
<!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>
\ No newline at end of file
design/img/Bootstrap 101 Template_files/GreensEFA.png 0 → 100644
View file @ 7fdb238e
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /static/img/groups/eu/GreensEFA.png was not found on this server.</p>
<hr>
<address>Apache/2.2.16 (Debian) Phusion_Passenger/2.2.11 PHP/5.3.3-7+squeeze22 with Suhosin-Patch mod_ssl/2.2.16 OpenSSL/0.9.8o mod_wsgi/3.3 Python/2.6.6 Server at memopol.lqdn.fr Port 443</address>
</body></html>
design/img/Bootstrap 101 Template_files/bootstrap.min.js 0 → 100644
View file @ 7fdb238e
This diff is collapsed.
design/img/Bootstrap 101 Template_files/jquery.min.js 0 → 100644
View file @ 7fdb238e
This diff is collapsed.
design/index.html 0 → 100644
View file @ 7fdb238e
<!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">
<title>Bootstrap 101 Template</title>
<!-- 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;}
.well {background: #9954BB; color: #FFFFFF;}
h1 {font-size: 2em;}
a {color: #000000;}
</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 -->
<img class= "img-responsive img-circle" src="http://www.europarl.europa.eu/mepphoto/108570.jpg" alt="mep">
<div class="visible-sm-block"><!-- infos -->
<address style="margin-top:1em;">
<strong>Informations</strong><br>
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.
</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 -->
<repeat group="{{ @contact.groups }}" value="{{ @group }}">
<check if="{{ @group.type!='Committee' }}">
<dl class="dl-horizontal hidden-xs" id="resume">
<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>
</dl>
<ul class="list-inline visible-xs-block" id="committee">
<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>
</ul>
</check>
</repeat>
</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>
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.
</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>
design/js/bootstrap.min.js 0 → 100644
View file @ 7fdb238e
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment