Subversion Repositories eFlore/Applications.eflore-consultation

Compare Revisions

Ignore whitespace Rev 1427 → Rev 1428

/branches/v5.10-vilmorin/modules/mobile/squelettes/smartflore.tpl.html
New file
0,0 → 1,186
<?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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<!-- 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="<?= ($ill == 0) ? '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']) != '&nbsp;') : ?>
<? $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>
<? 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++]; ?> smartflore-titre-section-icone 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">
<a href="<?= $lien_edition; ?>" target="_blank">
<button type="button" class="btn btn-default" aria-label="Left Align">
Modifier
</button>
</a>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12" id="smartflore-partenaires">
<div class="panel-group" id="smartflore-accordeon-partenaires" role="tablist" aria-multiselectable="true">
<div class="panel-heading smartflore-titre-partenaires" role="tab" id="heading-partenaires">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#smartflore-accordeon-partenaires" href="#collapse-partenaires" aria-expanded="true" aria-controls="collapse-partenaires">
<span class="glyphicon glyphicon-linkglyphicon glyphicon-link smartflore-titre-partenaires-icone margin-left-1em margin-top-03em"></span>
Partenaires
</a>
</h4>
</div>
<div id="collapse-partenaires" class="panel-collapse collapse smartflore-contenu-partenaires" role="tabpanel" aria-labelledby="heading-partenaires">
<div class="panel-body">
<div class="col-md-6 col-xs-6">
<img class="smartflore-footer-partenaires-logo" src="<?= $url_logos; ?>logo-msjs.jpg" />
</div>
<div class="col-md-6 col-xs-6">
<img class="smartflore-footer-partenaires-logo" src="<?= $url_logos; ?>logo-fondation-nd.jpg" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>