| 1410 |
aurelien |
1 |
<?php
|
|
|
2 |
$icones = array('glyphicon-eye-open', 'glyphicon-grain', 'glyphicon-home');
|
|
|
3 |
$index_icones = 0;
|
|
|
4 |
?>
|
|
|
5 |
<!DOCTYPE html>
|
|
|
6 |
<html>
|
|
|
7 |
<head>
|
|
|
8 |
<title>Smart'Flore</title>
|
|
|
9 |
|
|
|
10 |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
|
|
11 |
<meta http-equiv="content-style-type" content="text/css" />
|
|
|
12 |
<meta http-equiv="content-script-type" content="text/javascript" />
|
|
|
13 |
<meta http-equiv="content-language" content="fr" />
|
|
|
14 |
<meta http-equiv="cache-control" content="no-cache">
|
|
|
15 |
|
|
|
16 |
<!-- Favicones -->
|
|
|
17 |
<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
|
|
|
18 |
|
|
|
19 |
<!-- Viewport -->
|
|
|
20 |
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
21 |
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
|
22 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
23 |
|
|
|
24 |
|
|
|
25 |
<!-- CSS -->
|
|
|
26 |
<link href="http://www.tela-botanica.org/commun/jquery/photoswipe/3.0.5/photoswipe.css" type="text/css" rel="stylesheet" />
|
|
|
27 |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
|
|
28 |
<link href="<?= $css ?>" rel="stylesheet" type="text/css" id="custom-css" />
|
|
|
29 |
<link href="modules/mobile/presentations/css/smartflore.css" rel="stylesheet" type="text/css" id="smart-flore-css" />
|
|
|
30 |
|
|
|
31 |
<!-- Javascript -->
|
|
|
32 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
|
33 |
<script src="http://www.tela-botanica.org/commun/jquery/photoswipe/3.0.5/klass.min.js"></script>
|
|
|
34 |
<script src="http://www.tela-botanica.org/commun/jquery/photoswipe/3.0.5/code.photoswipe.jquery-3.0.5.min.js"></script>
|
|
|
35 |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
|
|
36 |
<script src="modules/mobile/presentations/js/mobile.js"></script>
|
|
|
37 |
|
|
|
38 |
<style>
|
|
|
39 |
.btn {border-radius:2em;}
|
|
|
40 |
.container-fluid {padding: 0px;}
|
|
|
41 |
[class*="span"] {margin-left: 0px;}
|
|
|
42 |
.accordion {margin-top: 1em;}
|
|
|
43 |
.accordion-heading .accordion-toggle {padding: 0pt 10px;}
|
|
|
44 |
</style>
|
|
|
45 |
</head>
|
|
|
46 |
|
|
|
47 |
<body>
|
|
|
48 |
<div id="smartflore-fiche">
|
|
|
49 |
<div id="smartflore-entete">
|
|
|
50 |
<h1>
|
|
|
51 |
<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
|
|
|
52 |
</h1>
|
|
|
53 |
</div>
|
|
|
54 |
|
|
|
55 |
<div id="smartflore-illustrations">
|
|
|
56 |
<div id="smartflore-noms">
|
|
|
57 |
<h2 class="smartflore-nom-verna">
|
|
|
58 |
<?= $texte['titre'][0]; ?>
|
|
|
59 |
</h2>
|
|
|
60 |
<h3 class="smartflore-nom-sci">
|
|
|
61 |
<?= $texte['titre'][1]; ?>
|
|
|
62 |
</h3>
|
|
|
63 |
<h4 class="smartflore-famille">
|
|
|
64 |
Famille des <?= $texte['titre'][2]; ?>
|
|
|
65 |
</h4>
|
|
|
66 |
</div>
|
|
|
67 |
|
|
|
68 |
<div id="smartflore-illustrations-galerie">
|
|
|
69 |
<? if (count($illustrations) != 0) : ?>
|
|
|
70 |
<div id="smartflore-illustrations-galerie-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
|
|
|
71 |
<!-- Indicators -->
|
|
|
72 |
<ol class="carousel-indicators">
|
|
|
73 |
<? for($ill = 0; $ill < count($illustrations); $ill++) { ?>
|
|
|
74 |
<li data-target="#smartflore-illustrations-galerie-carousel" data-slide-to="<?= $ill; ?>" class="active"></li>
|
|
|
75 |
<?php } ?>
|
|
|
76 |
</ol>
|
|
|
77 |
|
|
|
78 |
<!-- Wrapper for slides -->
|
|
|
79 |
<div class="carousel-inner" role="listbox">
|
|
|
80 |
<? for($ill = 0; $ill < count($illustrations); $ill++) { ?>
|
|
|
81 |
<div class="item <?= ($ill == 0) ? 'active' : ''; ?>">
|
|
|
82 |
<? if (trim($illustrations[$ill]['legende']['texte']) != ' ') : ?>
|
|
|
83 |
<? $alt = $illustrations[$ill]['legende']['titre'].' ('.$illustrations[$ill]['legende']['texte'].')'; ?>
|
|
|
84 |
<? else : ?>
|
|
|
85 |
<? $alt = $illustrations[$ill]['legende']['titre']; ?>
|
|
|
86 |
<? endif; ?>
|
|
|
87 |
<img class="img-responsive center-block" src="<?= $illustrations[$ill]['src']; ?>" alt="<?= $alt; ?>">
|
|
|
88 |
<div class="carousel-caption">
|
|
|
89 |
<?= $alt; ?>
|
|
|
90 |
</div>
|
|
|
91 |
</div>
|
|
|
92 |
<?php } ?>
|
|
|
93 |
</div>
|
|
|
94 |
|
|
|
95 |
<!-- Controls -->
|
|
|
96 |
<a class="left carousel-control" href="#smartflore-illustrations-galerie-carousel" role="button" data-slide="prev">
|
|
|
97 |
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
|
|
98 |
<span class="sr-only">Previous</span>
|
|
|
99 |
</a>
|
|
|
100 |
<a class="right carousel-control" href="#smartflore-illustrations-galerie-carousel" role="button" data-slide="next">
|
|
|
101 |
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
|
|
102 |
<span class="sr-only">Next</span>
|
|
|
103 |
</a>
|
|
|
104 |
</div>
|
|
|
105 |
<? endif; ?>
|
|
|
106 |
</div>
|
|
|
107 |
</div>
|
|
|
108 |
|
|
|
109 |
<div id="smartflore-sections">
|
|
|
110 |
<div class="panel-group" id="smartflore-accordeon-sections" role="tablist" aria-multiselectable="true">
|
|
|
111 |
<div class="panel panel-default">
|
|
|
112 |
<? foreach($texte['corps'] as $titre_section => $texte_section) : ?>
|
|
|
113 |
<div class="panel-heading smartflore-titre-section" role="tab" id="heading<?= md5($titre_section); ?>">
|
|
|
114 |
<h4 class="panel-title">
|
|
|
115 |
<a data-toggle="collapse" data-parent="#smartflore-accordeon-sections" href="#collapse<?= md5($titre_section); ?>" aria-expanded="true" aria-controls="collapse<?= md5($titre_section); ?>">
|
| 1413 |
aurelien |
116 |
<span class="glyphicon <?= $icones[$index_icones++]; ?> smartflore-titre-section-icone margin-left-1em margin-top-03em"></span>
|
| 1410 |
aurelien |
117 |
<?= $titre_section; ?>
|
|
|
118 |
</a>
|
|
|
119 |
</h4>
|
|
|
120 |
</div>
|
|
|
121 |
<div id="collapse<?= md5($titre_section); ?>" class="panel-collapse collapse smartflore-contenu-section" role="tabpanel" aria-labelledby="heading<?= md5($titre_section); ?>">
|
|
|
122 |
<div class="panel-body">
|
|
|
123 |
<?= $texte_section; ?>
|
|
|
124 |
</div>
|
|
|
125 |
</div>
|
|
|
126 |
<? endforeach; ?>
|
|
|
127 |
</div>
|
|
|
128 |
</div>
|
|
|
129 |
</div>
|
|
|
130 |
|
|
|
131 |
<div id="smartflore-footer">
|
|
|
132 |
<div class="col-md-12">
|
|
|
133 |
<div class="col-md-4 col-xs-4 smartflore-footer-bouton">
|
|
|
134 |
<a href="<?= $lien_fiche; ?>" target="_blank">
|
|
|
135 |
<button type="button" class="btn btn-default" aria-label="Left Align">
|
|
|
136 |
En savoir plus
|
|
|
137 |
</button>
|
|
|
138 |
</a>
|
|
|
139 |
</div>
|
|
|
140 |
|
|
|
141 |
<div class="col-md-4 col-xs-4 smartflore-footer-bouton">
|
|
|
142 |
<button id="smartflore-footer-button-sources" type="button" class="btn btn-default" aria-label="Left Align">
|
|
|
143 |
Sources
|
|
|
144 |
</button>
|
|
|
145 |
|
|
|
146 |
<div id="smartflore-sources">
|
|
|
147 |
<?= $texte['sources']; ?>
|
|
|
148 |
</div>
|
|
|
149 |
</div>
|
|
|
150 |
|
|
|
151 |
<div class="col-md-4 col-xs-4 smartflore-footer-bouton">
|
|
|
152 |
<button type="button" class="btn btn-default" aria-label="Left Align">
|
|
|
153 |
Modifier
|
|
|
154 |
</button>
|
|
|
155 |
</div>
|
|
|
156 |
</div>
|
|
|
157 |
</div>
|
|
|
158 |
</div>
|
|
|
159 |
</body>
|
|
|
160 |
</html>
|