Subversion Repositories eFlore/Applications.cel

Rev

Rev 2848 | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<!DOCTYPE html>
<html lang="fr" manifest="mobile.appcache"> 
        <head>
                <base href="http://www.tela-botanica.org/eflore-test/cel/widget/modules/saisie/squelettes/mobile/"/>
                <title>CEL Mobile</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 name="revisit-after" content="15 days" />
                <meta name="robots" content="index,follow" />
                <meta name="author" content="Jean-Pascal MILCENT, Isabelle NEMBROT" />
                <meta name="keywords" content="Tela Botanica, CEL, mobile" />
                <meta name="description" content="Widget de saisie du CEL pour smartphone" />
                
                <!-- Favicones -->
                <link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
                
                <!-- Viewport -->
                <meta name="viewport" content="width=device-width, initial-scale=1"> 
                <meta name="apple-mobile-web-app-capable" content="yes" />
                <meta name="apple-mobile-web-app-status-bar-style" content="black">
                
                <!-- CSS -->
                <link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
                <link href="http://www.tela-botanica.org/eflore/cel/widget/modules/saisie/squelettes/mobile/css/mobile.css" rel="stylesheet" type="text/css" media="screen" />
                
                <!-- Javascript -->
                <script src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
                
                <!-- Javascript : appli saisie -->
                <script type="text/javascript" src="config.js"></script>
                <script type="text/javascript" src="js/mobile.js"></script>
                <script type="text/javascript" src="js/bdtfx.js"></script>
                
                <!-- Javascript : Jquery Mobile -->
                <script src="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

                <!--  Google Analytics -->
                <?php if($prod): ?>
                        <?php include "analytics.html"; ?>
                <?php endif; ?>
        </head>
        
        
        <body data-theme="b">
                <div id="menu" data-role="page"> <!--data-add-back-btn="true" data-back-btn-text="Retour"-->
                        <div data-role="header">
                                <h1>Accueil</h1>
                                <a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
                        </div>
                        <div data-role="content" data-theme="g">
                                <p class="center"> 
                                        Bienvenue sur le Carnet En Ligne mobile ! <br />
                                </p>
                                <ul data-role="listview">
                                        <li>
                                                <img src="http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png" class="ui-li-icon"/>
                                                <a href="#saisie" class="saisie" data-role="button">1 - Saisir une observation</a>
                                        </li>
                                        <li>
                                                <img src="http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png" class="ui-li-icon"/>
                                                <a href="#liste" data-role="button">2 - Voir mes observations</a>
                                        </li>
                                        <li>
                                                <img src="http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png" class="ui-li-icon"/>
                                                <a href="#transmission" data-role="button">3 - Transmettre mes observations</a>
                                        </li>
                                        <li></li>
                                </ul>
                        </div>
                        <div data-role="footer" data-position="fixed"></div>
                </div>

                <div id="saisie" data-role="page">
                        <div data-role="header" data-position="inline">
                                <a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
                                <h1>Saisie</h1>
                                <a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
                        </div>
                        <form id="form-saisie-observation" method="post" action="#">
                                <div data-role="content">
                                        <div id="obs-saisie-infos"></div>
                                        <div data-role="fieldcontain">
                                                <label for="nom">Espèce : </label>
                                                <span id="nom"></span>
                                                
                                                <br />
                                                <a href="#saisie-popup" id="saisie-popup-btn"
                                                                data-role="button" data-icon="search" data-iconpos="right" 
                                                                data-rel="dialog" data-transition="pop" data-theme="b">
                                                        Changer l'espèce
                                                </a>
                                                <hr />

                                                <label for="date">
                                                        Date :
                                                        <span id="date"></span>
                                                </label>
                                                <hr />
                                                
                                                <button id="geolocaliser" 
                                                                data-role="button" data-icon="refresh" data-iconpos="" data-ajax="false">
                                                        Recalculer ma position
                                                </button>
                                                
                                                <label for="lat">
                                                        Latitude :
                                                        <span id="lat"></span>
                                                </label>
                                                
                                                <br />
                                                <label for="lng">
                                                        Longitude :
                                                        <span id="lng"></span>
                                                </label>
                                                
                                                <br />
                                                <label for="location">
                                                        Commune :
                                                        <span id="location"></span>
                                                        <input id="code-insee" type="hidden" name="code-insee" />
                                                </label>
                                                
                                                <br />
                                                <hr />
                                                <button id="sauver-obs" data-role="button" data-icon="check">Sauver</button>
                                                
                                                <input id="referentiel" type="hidden" name="referentiel" />
                                                <input id="nom-sci-select" type="hidden" name="nom-sci-select" />
                                                <input id="num-nom-select" type="hidden" name="num-nom-select" />
                                        </div>
                                </div>
                                <div data-role="footer" data-position="fixed">
                                        <div data-role="navbar">
                                                <ul>
                                                        <li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
                                                        <li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
                                                </ul>
                                        </div>
                                </div>
                        </form>
                </div>
                
                <div id="saisie-popup" data-role="page" data-history="false" data-close-btn="right">
                        <div data-role="header">
                                <h1></h1>
                        </div>
                        <div data-role="content">
                                <ul id="liste-noms-latins" data-role="listview" 
                                        data-inset="true" data-filter="true" data-filter-reveal="true" 
                                        data-filter-placeholder="Trouver une espèce...">
                                </ul>
                                <div class="hidden">
                                        <button id="recherche-chargement" data-theme="a" data-textonly="true" data-textvisible="true" data-msgtext="Chargement des résultats..." ></button>
                                </div>
                        </div>
                </div>
                
                <div id="liste" data-role="page">
                        <div data-role="header" data-position="inline">
                                <a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
                                <h1>Observations</h1>
                                <a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
                        </div>
                        <div data-role="content">
                                <div id="obs-suppression-infos"></div>
                                <ul id="liste-obs" data-role="listview" data-split-icon="delete" data-split-theme="g" data-theme="g" data-inset="true"></ul>
                        </div>
                        <div data-role="footer" data-position="fixed">
                                <div data-role="navbar">
                                        <ul>
                                                <li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
                                                <li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
                                        </ul>
                                </div>
                        </div>
                </div>
                
                <div id="observation" data-role="page">
                        <div data-role="header" data-position="inline">
                                <a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
                                <h1>Détails de l'observation</h1>
                                <a href="#liste" data-icon="notepad" data-iconpos="notext" ></a>
                        </div>
                        <div data-role="content">
                                <label for="id-obs">Identifiant :</label> <span id="id-obs"></span>
                                <div id="details-obs"></div>
                                
                                <input type="file" id="pic" name="photos-obs[]" accept="image/*" multiple>
                                <button id="valider-photos"
                                                data-role="button" data-icon="search" data-iconpos="" data-ajax="false">
                                        Ajouter les images sélectionnées
                                </button>

                                <div data-role="popup" id="cache-plein" class="ui-content" data-position-to="#valider-photos">
                                        <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
                                        <p>
                                                La mémoire de cette application est pleine. <br />
                                                Veuillez supprimer des images ou transmettre vos observations.
                                        </p>
                                </div>
                                
                                <div data-role="popup" id="photo-zoom" class="ui-content">
                                        <span id="photo-zoom-infos"></span>
                                        <button data-role="button" data-theme="a" onclick="$('#photo-zoom').popup('close');">
                                                Fermer cet aperçu
                                        </button>
                                </div>
                                
                                <div id="photo-suppression-infos"></div>
                                <ul id="photos-obs" data-role="listview" data-inset="true"></ul>
                                <canvas id="photo-canvas" class="hidden"></canvas>
                        </div>
                        <div data-role="footer" data-position="fixed">
                                <div data-role="navbar">
                                        <ul>
                                                <li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
                                                <li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
                                        </ul>
                                </div>
                        </div>
                </div>
                
                <div id="transmission" data-role="page">
                        <div data-role="header">
                                <a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
                                <h1>Transmission</h1>
                                <a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
                        </div>
                        <div data-role="content" data-theme="d">        
                                <p>
                                        <span id="identification-texte">
                                                Ajouter au compte
                                        </span>
                                        <strong><span id="utilisateur-compte"></span></strong>
                                </p>
                                <a href="#identification-popup" id="identification-btn"
                                        data-role="button" data-icon="grid" data-iconpos="right" 
                                        data-rel="dialog" data-transition="pop" data-theme="b">
                                                Modifier le compte
                                </a>    
                                <div id="identification-infos"></div>
                                <hr />
                                <button data-role="button" data-icon="cloud-black" id="transmettre-obs" >
                                        Transmettre
                                </button>                       
                        </div>
                        <div data-role="footer" data-position="fixed">
                                <div data-role="navbar">
                                        <ul>
                                                <li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
                                                <li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
                                        </ul>
                                </div>
                        </div>
                </div>
                
                <div id="identification-popup" data-role="page" data-history="false" data-close-btn="right">
                        <div data-role="header">
                                <h1>Compte Tela Botanica</h1>
                        </div>
                        <form id="form-transmission" method="post" action="#">
                                <div data-role="content">
                                        <div data-role="fieldcontain"> 
                                                <label for="courriel">Courriel * :</label>
                                                <input id="courriel" type="email" name="courriel"/>
                                                <input id="id-utilisateur" name="id-utilisateur" type="hidden"/>
                                                
                                                <button id="valider-courriel" data-role="button" 
                                                        data-icon="forward" data-iconpos="">
                                                                Vérifier ce compte Tela
                                                </button>
                                        </div>
                                        <div id="zone-courriel-confirmation" data-role="fieldcontain" class="hidden">
                                                <label for="courriel-confirmation">
                                                        <strong class="obligatoire">*</strong> Courriel (confirmation) : 
                                                </label>
                                                <input id="courriel-confirmation" name="courriel-confirmation" type="text"/>
                                        </div>
                                        <div id="zone-prenom-nom" data-role="fieldcontain" class="hidden">
                                                <div>
                                                        <label for="nom">Nom :</label>
                                                        <input id="nom-utilisateur" name="nom" type="text"/>
                                                </div>
                                                
                                                <div>
                                                        <label for="prenom">Prénom :</label>
                                                        <input id="prenom-utilisateur" name="prenom" type="text"/>
                                                </div>
                                        </div>
                                        <input type="checkbox" name="courriel-memoire" id="courriel-memoire" checked="checked">
                                        <label for="courriel-memoire">Se souvenir de moi</label>
                                                
                                        <button id="valider-identification" data-role="button" 
                                                data-icon="check" data-iconpos="right" data-theme="b">
                                                        Valider le formulaire
                                        </button>
                                </div>
                        </form>
                        <div data-role="footer"></div>
                </div><!-- /page popup -->              
                
                <div id="infos" data-role="page" data-add-back-btn="true" data-back-btn-text="Retour">
                        <div data-role="header">
                                <h1>Infos</h1>
                        </div>
                        <div data-role="content">
                                <p>
                                        Développement : 
                                        <ul>
                                                <li>Jean-Pascal MILCENT</li>
                                                <li>Isabelle NEMBROT</li>
                                        </ul>
                                        sur une idée originale de Aurélien PERONNET.
                                </p>
                        </div>
                        <div data-role="footer" data-position="fixed">
                                <p class="center">
                                        Icônes par <a href="http://glyphish.com">Joseph Wain - Glyphish</a>. <br />
                                        © Copyright <span id="annee"></span> - <a href="http://www.tela-botanica.org/site:accueil">Tela Botanica</a>
                                </p>
                        </div>
                </div>
        </body>
</html>