New file |
0,0 → 1,160 |
<?php |
$icones = array('glyphicon-eye-open', 'glyphicon-grain', 'glyphicon-home'); |
$index_icones = 0; |
?> |
<!DOCTYPE html> |
<html> |
<head> |
<title>Smart'Flore</title> |
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> |
<meta http-equiv="content-style-type" content="text/css" /> |
<meta http-equiv="content-script-type" content="text/javascript" /> |
<meta http-equiv="content-language" content="fr" /> |
<meta http-equiv="cache-control" content="no-cache"> |
|
<!-- Favicones --> |
<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" /> |
|
<!-- Viewport --> |
<meta name="apple-mobile-web-app-capable" content="yes" /> |
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<!-- CSS --> |
<link href="http://www.tela-botanica.org/commun/jquery/photoswipe/3.0.5/photoswipe.css" type="text/css" rel="stylesheet" /> |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> |
<link href="<?= $css ?>" rel="stylesheet" type="text/css" id="custom-css" /> |
<link href="modules/mobile/presentations/css/smartflore.css" rel="stylesheet" type="text/css" id="smart-flore-css" /> |
|
<!-- Javascript --> |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
<script src="http://www.tela-botanica.org/commun/jquery/photoswipe/3.0.5/klass.min.js"></script> |
<script src="http://www.tela-botanica.org/commun/jquery/photoswipe/3.0.5/code.photoswipe.jquery-3.0.5.min.js"></script> |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> |
<script src="modules/mobile/presentations/js/mobile.js"></script> |
|
<style> |
.btn {border-radius:2em;} |
.container-fluid {padding: 0px;} |
[class*="span"] {margin-left: 0px;} |
.accordion {margin-top: 1em;} |
.accordion-heading .accordion-toggle {padding: 0pt 10px;} |
</style> |
</head> |
|
<body> |
<div id="smartflore-fiche"> |
<div id="smartflore-entete"> |
<h1> |
<img id="smart-flore-logo-tela" src="http://resources.tela-botanica.org/tb/img/128x128/logo_carre_officiel.png" /> <span class="smart-flore-sf">S</span>mart'<span class="smart-flore-sf">F</span>lore |
</h1> |
</div> |
|
<div id="smartflore-illustrations"> |
<div id="smartflore-noms"> |
<h2 class="smartflore-nom-verna"> |
<?= $texte['titre'][0]; ?> |
</h2> |
<h3 class="smartflore-nom-sci"> |
<?= $texte['titre'][1]; ?> |
</h3> |
<h4 class="smartflore-famille"> |
Famille des <?= $texte['titre'][2]; ?> |
</h4> |
</div> |
|
<div id="smartflore-illustrations-galerie"> |
<? if (count($illustrations) != 0) : ?> |
<div id="smartflore-illustrations-galerie-carousel" class="carousel slide" data-ride="carousel" data-interval="false"> |
<!-- Indicators --> |
<ol class="carousel-indicators"> |
<? for($ill = 0; $ill < count($illustrations); $ill++) { ?> |
<li data-target="#smartflore-illustrations-galerie-carousel" data-slide-to="<?= $ill; ?>" class="active"></li> |
<?php } ?> |
</ol> |
|
<!-- Wrapper for slides --> |
<div class="carousel-inner" role="listbox"> |
<? for($ill = 0; $ill < count($illustrations); $ill++) { ?> |
<div class="item <?= ($ill == 0) ? 'active' : ''; ?>"> |
<? if (trim($illustrations[$ill]['legende']['texte']) != ' ') : ?> |
<? $alt = $illustrations[$ill]['legende']['titre'].' ('.$illustrations[$ill]['legende']['texte'].')'; ?> |
<? else : ?> |
<? $alt = $illustrations[$ill]['legende']['titre']; ?> |
<? endif; ?> |
<img class="img-responsive center-block" src="<?= $illustrations[$ill]['src']; ?>" alt="<?= $alt; ?>"> |
<div class="carousel-caption"> |
<?= $alt; ?> |
</div> |
</div> |
<?php } ?> |
</div> |
|
<!-- Controls --> |
<a class="left carousel-control" href="#smartflore-illustrations-galerie-carousel" role="button" data-slide="prev"> |
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> |
<span class="sr-only">Previous</span> |
</a> |
<a class="right carousel-control" href="#smartflore-illustrations-galerie-carousel" role="button" data-slide="next"> |
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> |
<span class="sr-only">Next</span> |
</a> |
</div> |
<? endif; ?> |
</div> |
</div> |
|
<div id="smartflore-sections"> |
<div class="panel-group" id="smartflore-accordeon-sections" role="tablist" aria-multiselectable="true"> |
<div class="panel panel-default"> |
<? foreach($texte['corps'] as $titre_section => $texte_section) : ?> |
<div class="panel-heading smartflore-titre-section" role="tab" id="heading<?= md5($titre_section); ?>"> |
<h4 class="panel-title"> |
<a data-toggle="collapse" data-parent="#smartflore-accordeon-sections" href="#collapse<?= md5($titre_section); ?>" aria-expanded="true" aria-controls="collapse<?= md5($titre_section); ?>"> |
<span class="glyphicon <?= $icones[$index_icones++]; ?> margin-left-1em margin-top-03em"></span> |
<?= $titre_section; ?> |
</a> |
</h4> |
</div> |
<div id="collapse<?= md5($titre_section); ?>" class="panel-collapse collapse smartflore-contenu-section" role="tabpanel" aria-labelledby="heading<?= md5($titre_section); ?>"> |
<div class="panel-body"> |
<?= $texte_section; ?> |
</div> |
</div> |
<? endforeach; ?> |
</div> |
</div> |
</div> |
|
<div id="smartflore-footer"> |
<div class="col-md-12"> |
<div class="col-md-4 col-xs-4 smartflore-footer-bouton"> |
<a href="<?= $lien_fiche; ?>" target="_blank"> |
<button type="button" class="btn btn-default" aria-label="Left Align"> |
En savoir plus |
</button> |
</a> |
</div> |
|
<div class="col-md-4 col-xs-4 smartflore-footer-bouton"> |
<button id="smartflore-footer-button-sources" type="button" class="btn btn-default" aria-label="Left Align"> |
Sources |
</button> |
|
<div id="smartflore-sources"> |
<?= $texte['sources']; ?> |
</div> |
</div> |
|
<div class="col-md-4 col-xs-4 smartflore-footer-bouton"> |
<button type="button" class="btn btn-default" aria-label="Left Align"> |
Modifier |
</button> |
</div> |
</div> |
</div> |
</div> |
</body> |
</html> |