<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <meta name="viewport" content="width = 1050, user-scalable = no" />
    <script type="text/javascript" src="<?= base_url('bower_components/jquery/dist/jquery.min.js') ?>"></script>
    <script type="text/javascript" src="<?= base_url('dist/js/modernizr.2.5.3.min.js') ?>"></script>
</head>
<body>

<div class="flipbook-viewport">
    <div class="container">
        <?php
        if($profil==1){
            ?>
            <div class="flipbook" >
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/super/background1.jpg')?>" width=595 height=841>
                        </div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">1</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:197.81px;top:556.31px" class="cls_004"><span class="cls_004">iLink World Corporation</span></div>
                        <div style="position:absolute;left:166.10px;top:594.98px" class="cls_005"><span class="cls_005">Mode d’emploi pour l’utilisation du backoffice</span></div>
                        <div style="position:absolute;left:188.21px;top:624.62px" class="cls_006"><span class="cls_006">Liens : </span>https://ilink-app.com/backofficebeta/</span></div>
                    </div>
                </div>
                <div class="hard"></div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/super/background2.jpg')?>" width=595 height=841>
                        </div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">2</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:129.02px;top:380.51px" class="cls_008"><span class="cls_008">SUPERVISEUR</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:20px;right:20px;top:100px">
                            <img src="<?= base_url('turnjs/super/login-ilink.PNG')?>" width=500 height=290></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">3</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:268.37px;top:75.78px" class="cls_006"><span class="cls_006">I-Connexion</span></div>
                        <div style="position:absolute;left:251.69px;top:394.53px" class="cls_014"><span class="cls_014">Figure 1 : Interface Login</span></div>
                        <div style="position:absolute;left:70.82px;top:445.91px" class="cls_002"><span class="cls_002">Première interface du backoffice, le Superviseur est appelé à saisir :</span></div>
                        <div style="position:absolute;left:88.82px;top:471.83px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Son code parrain</span></div>
                        <div style="position:absolute;left:88.82px;top:487.91px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Son mot de passe</span></div>
                        <div style="position:absolute;left:88.82px;top:503.87px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  S’assurer que le dernier champ soit à « </span><span class="cls_003">Agent</span><span class="cls_002"> ».</span></div>
                        <div style="position:absolute;left:70.82px;top:529.31px" class="cls_002"><span class="cls_002">Au coin supérieur gauche, les différents drapeaux désignent les langues disponibles pour le</span></div>
                        <div style="position:absolute;left:70.82px;top:544.79px" class="cls_002"><span class="cls_002">backoffice. Pour changer de langue, il suffit de cliquer sur le drapeau correspondant (notons que par</span></div>
                        <div style="position:absolute;left:70.82px;top:560.27px" class="cls_002"><span class="cls_002">défaut, le backoffice s’affiche dans la langue utilisée par le navigateur)͘</span></div>
                        <div style="position:absolute;left:70.82px;top:636.62px" class="cls_002"><span class="cls_002">Le lien </span><span class="cls_003">mot de passe oublié</span><span class="cls_002"> est uniquement réservé aux administrateurs.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:20px;right:20px;top:150px">
                            <img src="<?= base_url('turnjs/super/super_dash.PNG')?>" width=500 height=290>
                        </div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">4</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:245.57px;top:75.78px" class="cls_005"><span class="cls_005">II-Tableau de bord</span></div>
                        <div style="position:absolute;left:70.82px;top:120.74px" class="cls_002"><span class="cls_002">Après connexion, le Superviseur est redirigé vers son tableau de bord.</span></div>
                        <div style="position:absolute;left:225.89px;top:444.35px" class="cls_009"><span class="cls_009">Figure 2 : Tableau de bord Superviseur</span></div>
                        <div style="position:absolute;left:70.82px;top:465.23px" class="cls_002"><span class="cls_002">Le tableau de bord Superviseur présente :</span></div>
                        <div style="position:absolute;left:88.82px;top:491.15px" class="cls_011"><span class="cls_011">-></span><span class="cls_012"> </span><span class="cls_002">  Le nombre d’utilisateurs géolocalisés</span></div>
                        <div style="position:absolute;left:88.82px;top:507.11px" class="cls_011"><span class="cls_011">-></span><span class="cls_012"> </span><span class="cls_002">  Le nombre de demandes de crédits</span></div>
                        <div style="position:absolute;left:88.82px;top:523.19px" class="cls_011"><span class="cls_011">-></span><span class="cls_012"> </span><span class="cls_002">  Le nombre de demandes de crédits traitées et celui des demandes non traités.</span></div>
                        <div style="position:absolute;left:88.82px;top:539.27px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le diagramme </span><span class="cls_003">Adhésion</span><span class="cls_002"> montre le nombre d’adhésion (adhésions en orange et demandes</span></div>
                        <div style="position:absolute;left:106.82px;top:554.63px" class="cls_002"><span class="cls_002">de crédits en bleu) des 12 derniers mois.</span></div>
                        <div style="position:absolute;left:88.82px;top:570.71px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le diagramme </span><span class="cls_003">Adhésion par mois sur une année</span><span class="cls_002"> fait le découpage des adhésions par mois</span></div>
                        <div style="position:absolute;left:106.82px;top:586.10px" class="cls_002"><span class="cls_002">sur l’année en cours͘</span></div>
                        <div style="position:absolute;left:88.82px;top:602.18px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le diagramme </span><span class="cls_003">Demande de crédits par utilisateurs</span><span class="cls_002"> montre le nombre de demande de crédit</span></div>
                        <div style="position:absolute;left:106.82px;top:617.78px" class="cls_002"><span class="cls_002">par utilisateur simple.</span></div>
                        <div style="position:absolute;left:70.82px;top:643.22px" class="cls_002"><span class="cls_002">Le menu de gauche se compose de 3 onglets:</span></div>
                        <div style="position:absolute;left:88.82px;top:669.14px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Tableau de bord</span><span class="cls_002"> : pour le tableau de bord</span></div>
                        <div style="position:absolute;left:88.82px;top:685.10px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Utilisateurs géolocalisés</span><span class="cls_002"> : pour consulter les informations sur les utilisateurs géolocalisés</span></div>
                        <div style="position:absolute;left:88.82px;top:701.18px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Demandes de crédits</span><span class="cls_002"> : pour consulter les informations sur les demandes de crédits.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:20px;right:20px;top:95px">
                            <img src="<?= base_url('turnjs/super/geolocated_super.PNG')?>" width=500 height=290></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">5</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:238.13px;top:75.78px" class="cls_002"><span class="cls_002">III-Utilisateurs géolocalisés</span></div>
                        <div style="position:absolute;left:234.41px;top:398.97px" class="cls_009"><span class="cls_009">Figure 3 : Utilisateurs géolocalisés</span></div>
                        <div style="position:absolute;left:70.82px;top:445.19px" class="cls_002"><span class="cls_002">Le Superviseur dispose d’une carte sur laquelle sont marquées les positions de ses points géolocalisés</span></div>
                        <div style="position:absolute;left:70.82px;top:460.67px" class="cls_002"><span class="cls_002">et d’un tableau avec les informations suivantes :</span></div>
                        <div style="position:absolute;left:88.82px;top:486.59px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Catégorie</span><span class="cls_002"> : pour la catégorie de l’utilisateur (qui sera toujours </span><span class="cls_003">geolocated</span><span class="cls_002"> pour des</span></div>
                        <div style="position:absolute;left:106.82px;top:502.07px" class="cls_002"><span class="cls_002">utilisateurs géolocalisés).</span></div>
                        <div style="position:absolute;left:88.82px;top:518.03px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Parrain</span><span class="cls_002"> : en cliquant sur le parrain une fenêtre d’information présente les informations</span></div>
                        <div style="position:absolute;left:106.82px;top:533.51px" class="cls_002"><span class="cls_002">supplémentaires.</span></div>
                        <div style="position:absolute;left:88.82px;top:549.59px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Nom</span><span class="cls_002"> : le nom ou l’enseigne du point géolocalisé͘</span></div>
                        <div style="position:absolute;left:88.82px;top:565.55px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Adresse</span><span class="cls_002"> : l’adresse physique du point géolocalisé͘</span></div>
                        <div style="position:absolute;left:88.82px;top:581.66px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Réseau</span><span class="cls_002"> : le réseau courant.</span></div>
                        <div style="position:absolute;left:88.82px;top:597.62px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Code</span><span class="cls_002"> </span><span class="cls_003">membre</span><span class="cls_002"> : le code membre point géolocalisé.</span></div>
                        <div style="position:absolute;left:88.82px;top:613.70px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Email</span><span class="cls_002"> : l’email de la structure͘</span></div>
                        <div style="position:absolute;left:88.82px;top:629.78px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Contact</span><span class="cls_002"> : le numéro de téléphone d’appel du point géolocalisé͘</span></div>
                        <div style="position:absolute;left:88.82px;top:645.74px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Active</span><span class="cls_002"> : Oui si le compte est activé, Non sinon.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:20px;right:20px;top:95px">
                            <img src="<?= base_url('turnjs/super/demande_super.PNG')?>" width=500 height=290>
                        </div>
                        <div style="position:absolute;left:20px;right:20px;top:570px">
                            <img src="<?= base_url('turnjs/super/deconnexion.PNG')?>" width=300 height=100>
                        </div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">6</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:250.61px;top:75.78px" class="cls_002"><span class="cls_002">Demandes de crédits</span></div>
                        <div style="position:absolute;left:240.29px;top:386.97px" class="cls_009"><span class="cls_009">Figure 4 : Demandes de crédits</span></div>
                        <div style="position:absolute;left:70.82px;top:407.85px" class="cls_002"><span class="cls_002">Le superviseur dispose des informations suivantes :</span></div>
                        <div style="position:absolute;left:88.82px;top:433.79px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le </span><span class="cls_003">temps moyen de traitement</span><span class="cls_002"> des demandes qu’il reçoit͘</span></div>
                        <div style="position:absolute;left:88.82px;top:449.87px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le</span><span class="cls_003"> temps moyen de traitement</span><span class="cls_002"> des demandes qu’il effectue͘</span></div>
                        <div style="position:absolute;left:88.82px;top:465.83px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Deux tableaux listant chacun un type de demande.</span></div>
                        <div style="position:absolute;left:88.82px;top:481.91px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Des tableaux montrant les 5 demandes entrantes/sortantes les plus rapidement/tardivement</span></div>
                        <div style="position:absolute;left:106.82px;top:497.39px" class="cls_002"><span class="cls_002">traités.</span></div>
                        <div style="position:absolute;left:268.37px;top:524.39px" class="cls_002"><span class="cls_002">Déconnexion</span></div>
                        <div style="position:absolute;left:255.41px;top:702.98px" class="cls_009"><span class="cls_009">Figure 5 : déconnexion</span></div>
                        <div style="position:absolute;left:70.82px;top:723.74px" class="cls_002"><span class="cls_002">Pour se déconnecter, le Superviseur clique sur son nom d’utilisateur dans le coin supérieur droit pour</span></div>
                        <div style="position:absolute;left:70.82px;top:739.10px" class="cls_002"><span class="cls_002">faire apparaitre le menu de déconnexion lui présentant : Le réseau courant, son code parrain, son</span></div>
                        <div style="position:absolute;left:70.82px;top:754.72px" class="cls_002"><span class="cls_002">adresse email, son pays, son numéro de téléphone et </span><span class="cls_003">le bouton de déconnexion</span><span class="cls_002">.</span></div>
                    </div>
                </div>
                <div></div>
                <div class="hard"></div>
            </div>
        <?php }elseif ($profil==2){ ?>
            <div class="flipbook" style="position:relative">
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/Hyper/background1.jpg')?>" width=595 height=841></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">1</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:197.81px;top:556.31px" class="cls_004"><span class="cls_004">iLink World Corporation</span></div>
                        <div style="position:absolute;left:166.10px;top:594.98px" class="cls_005"><span class="cls_005">Mode d’emploi pour l’utilisation du backoffice</span></div>
                        <div style="position:absolute;left:188.21px;top:624.62px" class="cls_006"><span class="cls_006">Liens : </span><A HREF="https://ilink-app.com/backofficebeta/">https://ilink-app.com/backofficebeta/</A> </span></div>
                    </div>
                </div>
                <div class="hard"></div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/Hyper/background2.jpg')?>" width=595 height=841>
                        </div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">2</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:125px;top:380.51px" class="cls_008"><span class="cls_008">HYPERVISEUR</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:20px;right:20px;top:100px">
                            <img src="<?= base_url('turnjs/super/login-ilink.PNG')?>" width=500 height=290></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">3</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:268.37px;top:75.78px" class="cls_006"><span class="cls_006">I-Connexion</span></div>
                        <div style="position:absolute;left:251.69px;top:394.53px" class="cls_017"><span class="cls_017">Figure 1 : Interface Login</span></div>
                        <div style="position:absolute;left:70.82px;top:445.91px" class="cls_002"><span class="cls_002">Première interface du backoffice, l’Hyperviseur est appelé à saisir :</span></div>
                        <div style="position:absolute;left:88.82px;top:471.83px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Son code parrain</span></div>
                        <div style="position:absolute;left:88.82px;top:487.91px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Son mot de passe</span></div>
                        <div style="position:absolute;left:88.82px;top:503.87px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  S’assurer que le dernier champ soit à « </span><span class="cls_003">Agent</span><span class="cls_002"> ».</span></div>
                        <div style="position:absolute;left:70.82px;top:529.31px" class="cls_002"><span class="cls_002">Au coin supérieur gauche, les différents drapeaux désignent les langues disponibles pour le</span></div>
                        <div style="position:absolute;left:70.82px;top:544.79px" class="cls_002"><span class="cls_002">backoffice. Pour changer de langue, il suffit de cliquer sur le drapeau correspondant (notons que par</span></div>
                        <div style="position:absolute;left:70.82px;top:560.27px" class="cls_002"><span class="cls_002">défaut, le backoffice s’affiche dans la langue utilisée par le navigateur)͘</span></div>
                        <div style="position:absolute;left:70.82px;top:636.62px" class="cls_002"><span class="cls_002">*Le lien </span><span class="cls_003">mot de passe oublié</span><span class="cls_002"> est uniquement réservé aux administrateurs.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:20px;right:20px;top:118px">
                            <img src="<?= base_url('turnjs/Hyper/dashbord_hyper.PNG')?>" width=500 height=290></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">4</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:245.57px;top:75.78px" class="cls_005"><span class="cls_005">II-Tableau de bord</span></div>
                        <div style="position:absolute;left:70.82px;top:98.74px" class="cls_002"><span class="cls_002">Après connexion, l’Hyperviseur est redirigé vers son tableau de bord.</span></div>
                        <div style="position:absolute;left:225.41px;top:415.79px" class="cls_009"><span class="cls_009">Figure 2 : Tableau de bord Hyperviseur</span></div>
                        <div style="position:absolute;left:70.82px;top:436.67px" class="cls_002"><span class="cls_002">Le tableau de bord Hyperviseur présente :</span></div>
                        <div style="position:absolute;left:88.82px;top:462.59px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le nombre d’utilisateurs géolocalisés.</span></div>
                        <div style="position:absolute;left:88.82px;top:478.67px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le nombre de superviseurs.</span></div>
                        <div style="position:absolute;left:88.82px;top:494.63px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le nombre de demandes de crédits.</span></div>
                        <div style="position:absolute;left:88.82px;top:510.71px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le nombre de demandes de crédits traitées et celui des demandes non traités.</span></div>
                        <div style="position:absolute;left:88.82px;top:526.79px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le diagramme </span><span class="cls_003">Adhésion</span><span class="cls_002"> montre le nombre d’adhésion (utilisateurs géolocalisés en orange et</span></div>
                        <div style="position:absolute;left:106.82px;top:542.15px" class="cls_002"><span class="cls_002">superviseurs en bleu) des 12 derniers mois.</span></div>
                        <div style="position:absolute;left:88.82px;top:558.23px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le diagramme </span><span class="cls_003">Utilisateurs géolocalisés par ville</span><span class="cls_002"> fait la répartition des points géolocalisés par</span></div>
                        <div style="position:absolute;left:106.82px;top:573.59px" class="cls_002"><span class="cls_002">ville.</span></div>
                        <div style="position:absolute;left:88.82px;top:589.70px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le diagramme </span><span class="cls_003">Demande de crédits par superviseurs</span><span class="cls_002"> montre le nombre de demande de</span></div>
                        <div style="position:absolute;left:106.82px;top:605.30px" class="cls_002"><span class="cls_002">crédit effectué par superviseur.</span></div>
                        <div style="position:absolute;left:70.82px;top:630.74px" class="cls_002"><span class="cls_002">Le menu de gauche se compose de 3 onglets :</span></div>
                        <div style="position:absolute;left:88.82px;top:656.66px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Tableau de bord</span><span class="cls_002"> : pour le tableau de bord</span></div>
                        <div style="position:absolute;left:88.82px;top:672.62px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Utilisateurs géolocalisés</span><span class="cls_002"> : pour consulter les informations sur les utilisateurs géolocalisés.</span></div>
                        <div style="position:absolute;left:88.82px;top:688.70px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Superviseurs </span><span class="cls_002">: pour consulter les informations sur les superviseurs.</span></div>
                        <div style="position:absolute;left:88.82px;top:704.66px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Demandes de crédits</span><span class="cls_002"> : pour consulter les informations sur les demandes de crédits.</span></div>
                        <div style="position:absolute;left:88.82px;top:720.74px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Demandes d’adhésion </span><span class="cls_002">: pour consulter les informations sur les demandes d’adhésion͘</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:20px;right:20px;top:140px">
                            <img src="<?= base_url('turnjs/Hyper/geolocated_hyper.PNG')?>" width=500 height=280></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">5</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:238.13px;top:75.78px" class="cls_002"><span class="cls_002">III-Utilisateurs géolocalisés</span></div>
                        <div style="position:absolute;left:70.82px;top:102.54px" class="cls_002"><span class="cls_002">En cliquant sur </span><span class="cls_003">Utilisateurs géolocaliés</span><span class="cls_002"> dans le menu de gauche, l’hyperviseur est emmené à choisir</span></div>
                        <div style="position:absolute;left:70.82px;top:118.02px" class="cls_003"><span class="cls_003">la ville</span><span class="cls_002"> pour laquelle il désire consulter les informations des points géolocalisés.</span></div>
                        <div style="position:absolute;left:234.41px;top:427.61px" class="cls_009"><span class="cls_009">Figure 3 : Utilisateurs géolocalisés</span></div>
                        <div style="position:absolute;left:70.82px;top:453.83px" class="cls_002"><span class="cls_002">L’Hyperviseur dispose d’une carte sur laquelle sont marquées les positions de points géolocalisés de</span></div>
                        <div style="position:absolute;left:70.82px;top:469.43px" class="cls_002"><span class="cls_002">son réseau et d’un tableau avec les informations suivantes :</span></div>
                        <div style="position:absolute;left:88.82px;top:495.35px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Catégorie</span><span class="cls_002"> : pour la catégorie de l’utilisateur (qui sera toujours </span><span class="cls_003">geolocated</span><span class="cls_002"> pour des</span></div>
                        <div style="position:absolute;left:106.82px;top:510.71px" class="cls_002"><span class="cls_002">utilisateurs géolocalisés).</span></div>
                        <div style="position:absolute;left:88.82px;top:526.79px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Parrain</span><span class="cls_002"> : code parrain du superviseur du point géolocalisé (en cliquant sur le parrain une</span></div>
                        <div style="position:absolute;left:106.82px;top:542.15px" class="cls_002"><span class="cls_002">fenêtre d’information présente des informations supplémentaires sur le superviseur.)</span></div>
                        <div style="position:absolute;left:88.82px;top:558.23px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Nom</span><span class="cls_002"> : le nom ou l’enseigne du point géolocalisé͘</span></div>
                        <div style="position:absolute;left:88.82px;top:574.31px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Adresse</span><span class="cls_002"> : l’adresse physique du point géolocalisé͘</span></div>
                        <div style="position:absolute;left:88.82px;top:590.30px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Réseau</span><span class="cls_002"> : le réseau courant.</span></div>
                        <div style="position:absolute;left:88.82px;top:606.38px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Code</span><span class="cls_002"> </span><span class="cls_003">membre</span><span class="cls_002"> : le code membre point géolocalisé.</span></div>
                        <div style="position:absolute;left:88.82px;top:622.34px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Email</span><span class="cls_002"> : l’email de la structure͘</span></div>
                        <div style="position:absolute;left:88.82px;top:638.42px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Contact</span><span class="cls_002"> : le numéro de téléphone d’appel du point géolocalisés.</span></div>
                        <div style="position:absolute;left:88.82px;top:654.38px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Active</span><span class="cls_002"> : Oui si le compte est activé, Non sinon.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:20px;right:20px;top:135px">
                            <img src="<?= base_url('turnjs/Hyper/Superviseur_hyper.PNG')?>" width=500 height=280></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">6</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:263.21px;top:101.22px" class="cls_002"><span class="cls_002">III-Superviseurs</span></div>
                        <div style="position:absolute;left:255.53px;top:430.41px" class="cls_009"><span class="cls_009">Figure 4 : Superviseurs</span></div>
                        <div style="position:absolute;left:70.82px;top:470.63px" class="cls_002"><span class="cls_002">L’Hyperviseur dispose d’une carte sur laquelle sont marquées les positions des superviseurs de son</span></div>
                        <div style="position:absolute;left:70.82px;top:480.23px" class="cls_002"><span class="cls_002">réseau et d’un tableau avec les mêmes informations que celui des utilisateurs géolocalisés͘</span></div>
                        <div style="position:absolute;left:70.82px;top:510.67px" class="cls_002"><span class="cls_002">Notons que dans ce cas la catégorie est à Super.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:20px;right:20px;top:155px">
                            <img src="<?= base_url('turnjs/Hyper/demande_hyper.PNG')?>" width=500 height=280></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">7</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:250.61px;top:75.78px" class="cls_002"><span class="cls_002">Demandes de crédits</span></div>
                        <div style="position:absolute;left:70.82px;top:107.98px" class="cls_002"><span class="cls_002">En cliquant sur </span><span class="cls_003">Demandes de crédits</span><span class="cls_002"> dans le menu de gauche, l’hyperviseur est emmené ă</span></div>
                        <div style="position:absolute;left:70.82px;top:117.46px" class="cls_002"><span class="cls_002">sélectionner </span><span class="cls_003">le superviseur</span><span class="cls_002"> pour lequel il désire consulter les demandes de crédit.</span></div>
                        <div style="position:absolute;left:240.29px;top:440.07px" class="cls_009"><span class="cls_009">Figure 4 : Demandes de crédits</span></div>
                        <div style="position:absolute;left:70.82px;top:467.39px" class="cls_002"><span class="cls_002">L’Hyperviseur dispose des informations suivantes :</span></div>
                        <div style="position:absolute;left:88.82px;top:493.31px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Le</span><span class="cls_002"> </span><span class="cls_003">temps moyen de traitement</span><span class="cls_002"> des demandes qu’il reçoit͘</span></div>
                        <div style="position:absolute;left:88.82px;top:509.39px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Un tableau listant les </span><span class="cls_003">demandes qu’il reçoit</span><span class="cls_002"> avec leur </span><span class="cls_003">statut</span><span class="cls_002">, </span><span class="cls_015">la date et le délai de traitement</span><span class="cls_002">.</span></div>
                        <div style="position:absolute;left:88.82px;top:525.35px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Des tableaux montrant les </span><span class="cls_003">5 demandes</span><span class="cls_002"> les plus rapidement/tardivement traités.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:20px;right:20px;top:135px">
                            <img src="<?= base_url('turnjs/Hyper/adhesion_hyper.PNG')?>" width=500 height=280></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">8</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:247.97px;top:75.78px" class="cls_002"><span class="cls_002">Demandes d’adhésion</span></div>
                        <div style="position:absolute;left:70.82px;top:102.66px" class="cls_013"><span class="cls_013">Les demandes d’adhésion sont celles des nouveaux superviseurs vers l’hyperviseur.</span></div>
                        <div style="position:absolute;left:237.89px;top:405.13px" class="cls_009"><span class="cls_009">Figure 5 : Demandes d’adhésion</span></div>
                        <div style="position:absolute;left:70.82px;top:444.47px" class="cls_002"><span class="cls_002">L’Hyperviseur dispose des informations suivantes :</span></div>
                        <div style="position:absolute;left:88.82px;top:470.39px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Le</span><span class="cls_002"> </span><span class="cls_003">temps moyen de traitement</span><span class="cls_002"> des demandes qu’il reçoit͘</span></div>
                        <div style="position:absolute;left:88.82px;top:486.47px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Un tableau listant les </span><span class="cls_003">demandes qu’il reçoit</span><span class="cls_002"> avec leur </span><span class="cls_003">statut</span><span class="cls_002">, </span><span class="cls_015">la date et le délai de traitement</span><span class="cls_002">.</span></div>
                        <div style="position:absolute;left:88.82px;top:502.43px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Des tableaux montrant les </span><span class="cls_003">5 demandes</span><span class="cls_002"> les plus rapidement/tardivement traités.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:20px;right:20px;top:110px">
                            <img src="<?= base_url('turnjs/Hyper/deconnexion_hyper.PNG')?>" width=300 height=200></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">9</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:268.37px;top:75.78px" class="cls_002"><span class="cls_002">Déconnexion</span></div>
                        <div style="position:absolute;left:255.41px;top:321.81px" class="cls_009"><span class="cls_009">Figure 6 : déconnexion</span></div>
                        <div style="position:absolute;left:70.82px;top:368.01px" class="cls_002"><span class="cls_002">Pour se déconnecter, l’Hyperviseur clique sur son nom d’utilisateur dans le coin supérieur droit pour</span></div>
                        <div style="position:absolute;left:70.82px;top:383.37px" class="cls_002"><span class="cls_002">faire apparaitre le menu de déconnexion lui présentant : Le réseau courant, son code parrain, son</span></div>
                        <div style="position:absolute;left:70.82px;top:398.97px" class="cls_002"><span class="cls_002">adresse email, son pays, son numéro de téléphone et </span><span class="cls_003">le bouton de déconnexion</span><span class="cls_002">.</span></div>
                    </div>
                </div>
                <div></div>
                <div class="hard"></div>
            </div>
        <?php }elseif ($profil==3){ ?>
            <div class="flipbook" style="position:relative">
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/Admin/background01.jpg')?>" width=595 height=841></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">1</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:197.81px;top:556.31px" class="cls_004"><span class="cls_004">iLink World Corporation</span></div>
                        <div style="position:absolute;left:166.10px;top:594.98px" class="cls_005"><span class="cls_005">Mode d’emploi pour l’utilisation du backoffice</span></div>
                        <div style="position:absolute;left:188.21px;top:624.62px" class="cls_006"><span class="cls_006">Liens : </span><A HREF="https://ilink-app.com/backofficebeta/">https://ilink-app.com/backofficebeta/</A> </span></div>
                    </div>
                </div>
                <div class="hard"></div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/Admin/background02.jpg')?>" width=595 height=841></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">2</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:113.18px;top:391.31px;" class="cls_008"><span class="cls_008" style="font-size: 39.0px">ADMINISTRATEUR</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/Admin/background03.jpg')?>" width=595 height=841></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">3</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:268.37px;top:75.78px" class="cls_006"><span class="cls_006">I-Connexion</span></div>
                        <div style="position:absolute;left:251.69px;top:394.53px" class="cls_017"><span class="cls_017">Figure 1 : Interface Login</span></div>
                        <div style="position:absolute;left:70.82px;top:445.91px" class="cls_002"><span class="cls_002">Première interface du backoffice, l’administrateur est appelé à saisir :</span></div>
                        <div style="position:absolute;left:88.82px;top:471.83px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Son adresse email</span></div>
                        <div style="position:absolute;left:88.82px;top:487.91px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Son mot de passe</span></div>
                        <div style="position:absolute;left:88.82px;top:503.87px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  S’assurer que le dernier champ soit à « </span><span class="cls_003">Administrateur</span><span class="cls_002"> ».</span></div>
                        <div style="position:absolute;left:70.82px;top:529.31px" class="cls_002"><span class="cls_002">Au coin supérieur gauche, les différents drapeaux désignent les langues disponibles pour le</span></div>
                        <div style="position:absolute;left:70.82px;top:544.79px" class="cls_002"><span class="cls_002">backoffice. Pour changer de langue, il suffit de cliquer sur le drapeau correspondant (notons que par</span></div>
                        <div style="position:absolute;left:70.82px;top:560.27px" class="cls_002"><span class="cls_002">défaut, le backoffice s’affiche dans la langue utilisée par le navigateur)͘</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/Hyper/background4.jpg')?>" width=595 height=841></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">4</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:245.57px;top:75.78px" class="cls_005"><span class="cls_005">II-Tableau de bord</span></div>
                        <div style="position:absolute;left:70.82px;top:157.74px" class="cls_002"><span class="cls_002">Après connexion, l’Hyperviseur est redirigé vers son tableau de bord.</span></div>
                        <div style="position:absolute;left:225.41px;top:415.79px" class="cls_009"><span class="cls_009">Figure 2 : Tableau de bord Hyperviseur</span></div>
                        <div style="position:absolute;left:70.82px;top:436.67px" class="cls_002"><span class="cls_002">Le tableau de bord Hyperviseur présente :</span></div>
                        <div style="position:absolute;left:88.82px;top:462.59px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le nombre d’utilisateurs géolocalisés.</span></div>
                        <div style="position:absolute;left:88.82px;top:478.67px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le nombre de superviseurs.</span></div>
                        <div style="position:absolute;left:88.82px;top:494.63px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le nombre de demandes de crédits.</span></div>
                        <div style="position:absolute;left:88.82px;top:510.71px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le nombre de demandes de crédits traitées et celui des demandes non traités.</span></div>
                        <div style="position:absolute;left:88.82px;top:526.79px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le diagramme </span><span class="cls_003">Adhésion</span><span class="cls_002"> montre le nombre d’adhésion (utilisateurs géolocalisés en orange et</span></div>
                        <div style="position:absolute;left:106.82px;top:542.15px" class="cls_002"><span class="cls_002">superviseurs en bleu) des 12 derniers mois.</span></div>
                        <div style="position:absolute;left:88.82px;top:558.23px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le diagramme </span><span class="cls_003">Utilisateurs géolocalisés par ville</span><span class="cls_002"> fait la répartition des points géolocalisés par</span></div>
                        <div style="position:absolute;left:106.82px;top:573.59px" class="cls_002"><span class="cls_002">ville.</span></div>
                        <div style="position:absolute;left:88.82px;top:589.70px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Le diagramme </span><span class="cls_003">Demande de crédits par superviseurs</span><span class="cls_002"> montre le nombre de demande de</span></div>
                        <div style="position:absolute;left:106.82px;top:605.30px" class="cls_002"><span class="cls_002">crédit effectué par superviseur.</span></div>
                        <div style="position:absolute;left:70.82px;top:630.74px" class="cls_002"><span class="cls_002">Le menu de gauche se compose de 3 onglets :</span></div>
                        <div style="position:absolute;left:88.82px;top:656.66px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Tableau de bord</span><span class="cls_002"> : pour le tableau de bord</span></div>
                        <div style="position:absolute;left:88.82px;top:672.62px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Utilisateurs géolocalisés</span><span class="cls_002"> : pour consulter les informations sur les utilisateurs géolocalisés.</span></div>
                        <div style="position:absolute;left:88.82px;top:688.70px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Superviseurs </span><span class="cls_002">: pour consulter les informations sur les superviseurs.</span></div>
                        <div style="position:absolute;left:88.82px;top:704.66px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Demandes de crédits</span><span class="cls_002"> : pour consulter les informations sur les demandes de crédits.</span></div>
                        <div style="position:absolute;left:88.82px;top:720.74px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Demandes d’adhésion </span><span class="cls_002">: pour consulter les informations sur les demandes d’adhésion͘</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/Hyper/background5.jpg')?>" width=595 height=841></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">5</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:238.13px;top:75.78px" class="cls_002"><span class="cls_002">III-Utilisateurs géolocalisés</span></div>
                        <div style="position:absolute;left:70.82px;top:102.54px" class="cls_002"><span class="cls_002">En cliquant sur </span><span class="cls_003">Utilisateurs géolocaliés</span><span class="cls_002"> dans le menu de gauche, l’hyperviseur est emmené à choisir</span></div>
                        <div style="position:absolute;left:70.82px;top:118.02px" class="cls_003"><span class="cls_003">la ville</span><span class="cls_002"> pour laquelle il désire consulter les informations des points géolocalisés.</span></div>
                        <div style="position:absolute;left:234.41px;top:407.61px" class="cls_009"><span class="cls_009">Figure 3 : Utilisateurs géolocalisés</span></div>
                        <div style="position:absolute;left:70.82px;top:453.83px" class="cls_002"><span class="cls_002">L’Hyperviseur dispose d’une carte sur laquelle sont marquées les positions de points géolocalisés de</span></div>
                        <div style="position:absolute;left:70.82px;top:469.43px" class="cls_002"><span class="cls_002">son réseau et d’un tableau avec les informations suivantes :</span></div>
                        <div style="position:absolute;left:88.82px;top:495.35px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Catégorie</span><span class="cls_002"> : pour la catégorie de l’utilisateur (qui sera toujours </span><span class="cls_003">geolocated</span><span class="cls_002"> pour des</span></div>
                        <div style="position:absolute;left:106.82px;top:510.71px" class="cls_002"><span class="cls_002">utilisateurs géolocalisés).</span></div>
                        <div style="position:absolute;left:88.82px;top:526.79px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Parrain</span><span class="cls_002"> : code parrain du superviseur du point géolocalisé (en cliquant sur le parrain une</span></div>
                        <div style="position:absolute;left:106.82px;top:542.15px" class="cls_002"><span class="cls_002">fenêtre d’information présente des informations supplémentaires sur le superviseur.)</span></div>
                        <div style="position:absolute;left:88.82px;top:558.23px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Nom</span><span class="cls_002"> : le nom ou l’enseigne du point géolocalisé͘</span></div>
                        <div style="position:absolute;left:88.82px;top:574.31px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Adresse</span><span class="cls_002"> : l’adresse physique du point géolocalisé͘</span></div>
                        <div style="position:absolute;left:88.82px;top:590.30px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Réseau</span><span class="cls_002"> : le réseau courant.</span></div>
                        <div style="position:absolute;left:88.82px;top:606.38px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Code</span><span class="cls_002"> </span><span class="cls_003">membre</span><span class="cls_002"> : le code membre point géolocalisé.</span></div>
                        <div style="position:absolute;left:88.82px;top:622.34px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Email</span><span class="cls_002"> : l’email de la structure͘</span></div>
                        <div style="position:absolute;left:88.82px;top:638.42px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Contact</span><span class="cls_002"> : le numéro de téléphone d’appel du point géolocalisés.</span></div>
                        <div style="position:absolute;left:88.82px;top:654.38px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Active</span><span class="cls_002"> : Oui si le compte est activé, Non sinon.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/Hyper/background6.jpg')?>" width=595 height=841></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">6</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:263.21px;top:101.22px" class="cls_002"><span class="cls_002">III-Superviseurs</span></div>
                        <div style="position:absolute;left:255.53px;top:394.41px" class="cls_009"><span class="cls_009">Figure 4 : Superviseurs</span></div>
                        <div style="position:absolute;left:70.82px;top:440.63px" class="cls_002"><span class="cls_002">L’Hyperviseur dispose d’une carte sur laquelle sont marquées les positions des superviseurs de son</span></div>
                        <div style="position:absolute;left:70.82px;top:456.23px" class="cls_002"><span class="cls_002">réseau et d’un tableau avec les mêmes informations que celui des utilisateurs géolocalisés͘</span></div>
                        <div style="position:absolute;left:70.82px;top:481.67px" class="cls_013"><span class="cls_013">Notons que dans ce cas la catégorie est à Super.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/Hyper/background7.jpg')?>" width=595 height=841></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">7</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:250.61px;top:75.78px" class="cls_002"><span class="cls_002">Demandes de crédits</span></div>
                        <div style="position:absolute;left:70.82px;top:127.98px" class="cls_002"><span class="cls_002">En cliquant sur </span><span class="cls_003">Demandes de crédits</span><span class="cls_002"> dans le menu de gauche, l’hyperviseur est emmené ă</span></div>
                        <div style="position:absolute;left:70.82px;top:143.46px" class="cls_002"><span class="cls_002">sélectionner </span><span class="cls_003">le superviseur</span><span class="cls_002"> pour lequel il désire consulter les demandes de crédit.</span></div>
                        <div style="position:absolute;left:240.29px;top:421.07px" class="cls_009"><span class="cls_009">Figure 4 : Demandes de crédits</span></div>
                        <div style="position:absolute;left:70.82px;top:467.39px" class="cls_002"><span class="cls_002">L’Hyperviseur dispose des informations suivantes :</span></div>
                        <div style="position:absolute;left:88.82px;top:493.31px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Le</span><span class="cls_002"> </span><span class="cls_003">temps moyen de traitement</span><span class="cls_002"> des demandes qu’il reçoit͘</span></div>
                        <div style="position:absolute;left:88.82px;top:509.39px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Un tableau listant les </span><span class="cls_003">demandes qu’il reçoit</span><span class="cls_002"> avec leur </span><span class="cls_003">statut</span><span class="cls_002">, </span><span class="cls_015">la date et le délai de traitement</span><span class="cls_002">.</span></div>
                        <div style="position:absolute;left:88.82px;top:525.35px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Des tableaux montrant les </span><span class="cls_003">5 demandes</span><span class="cls_002"> les plus rapidement/tardivement traités.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/Hyper/background8.jpg')?>" width=595 height=841></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">8</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:247.97px;top:75.78px" class="cls_002"><span class="cls_002">Demandes d’adhésion</span></div>
                        <div style="position:absolute;left:70.82px;top:102.66px" class="cls_013"><span class="cls_013">Les demandes d’adhésion sont celles des nouveaux superviseurs vers l’hyperviseur.</span></div>
                        <div style="position:absolute;left:237.89px;top:398.13px" class="cls_009"><span class="cls_009">Figure 5 : Demandes d’adhésion</span></div>
                        <div style="position:absolute;left:70.82px;top:444.47px" class="cls_002"><span class="cls_002">L’Hyperviseur dispose des informations suivantes :</span></div>
                        <div style="position:absolute;left:88.82px;top:470.39px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Le</span><span class="cls_002"> </span><span class="cls_003">temps moyen de traitement</span><span class="cls_002"> des demandes qu’il reçoit͘</span></div>
                        <div style="position:absolute;left:88.82px;top:486.47px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Un tableau listant les </span><span class="cls_003">demandes qu’il reçoit</span><span class="cls_002"> avec leur </span><span class="cls_003">statut</span><span class="cls_002">, </span><span class="cls_015">la date et le délai de traitement</span><span class="cls_002">.</span></div>
                        <div style="position:absolute;left:88.82px;top:502.43px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Des tableaux montrant les </span><span class="cls_003">5 demandes</span><span class="cls_002"> les plus rapidement/tardivement traités.</span></div>
                    </div>
                </div>
                <div>
                    <div style="position:absolute;left:50%;margin-left:-297px;top:0px;width:595px;height:841px;border-style:outset;overflow:hidden">
                        <div style="position:absolute;left:0px;top:0px">
                            <img src="<?= base_url('turnjs/Hyper/background9.jpg')?>" width=595 height=841></div>
                        <div style="position:absolute;left:417.34px;top:33.76px" class="cls_002"><span class="cls_002">iLink World Corporation</span></div>
                        <div style="position:absolute;left:535.30px;top:33.76px" class="cls_002"><span class="cls_002">9</span></div>
                        <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutorial Backoffice</span></div>
                        <div style="position:absolute;left:268.37px;top:75.78px" class="cls_002"><span class="cls_002">Déconnexion</span></div>
                        <div style="position:absolute;left:255.41px;top:321.81px" class="cls_009"><span class="cls_009">Figure 6 : déconnexion</span></div>
                        <div style="position:absolute;left:70.82px;top:368.01px" class="cls_002"><span class="cls_002">Pour se déconnecter, l’Hyperviseur clique sur son nom d’utilisateur dans le coin supérieur droit pour</span></div>
                        <div style="position:absolute;left:70.82px;top:383.37px" class="cls_002"><span class="cls_002">faire apparaitre le menu de déconnexion lui présentant : Le réseau courant, son code parrain, son</span></div>
                        <div style="position:absolute;left:70.82px;top:398.97px" class="cls_002"><span class="cls_002">adresse email, son pays, son numéro de téléphone et </span><span class="cls_003">le bouton de déconnexion</span><span class="cls_002">.</span></div>
                    </div>
                </div>
                <div></div>
                <div class="hard"></div>
            </div>
        <?php } ?>
    </div>
</div>


<script type="text/javascript">

    function loadApp() {

        // Create the flipbook

        $('.flipbook').turn({
            // Width

            width:922,

            // Height

            height:600,

            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true

        });
    }

    // Load the HTML4 version if there's not CSS transform

    yepnope({
        test : Modernizr.csstransforms,
        yep: ["<?= base_url('dist/js/turn.js') ?>"],
        nope: ["<?= base_url('dist/js/turn.html4.min.js') ?>"],
        both: ["<?= base_url('dist/js/basic.css') ?>"],
        complete: loadApp
    });

</script>

</body>
</html>
