<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>iLink | Tutorial</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="<?= base_url('bower_components/bootstrap/dist/css/bootstrap.min.css') ?>">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<?= base_url('bower_components/font-awesome/css/font-awesome.min.css') ?>">
    <!-- Ionicons -->
    <link rel="stylesheet" href="<?= base_url('bower_components/Ionicons/css/ionicons.min.css') ?>">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?= base_url('dist/css/AdminLTE.css') ?>">

    <link rel="stylesheet" href="<?= base_url('dist/css/main.css') ?>">
    <!-- iCheck -->
    <link rel="stylesheet" href="<?= base_url('plugins/iCheck/square/blue.css') ?>">
    <link rel="shortcut icon" href="<?= base_url('favicon.ico') ?>" type="image/x-icon">
    <link rel="icon" href="<?= base_url('favicon.ico') ?>" type="image/x-icon">
    <!-- Google Font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

    <link rel="stylesheet" href="<?= base_url('dist/css/turn.css') ?>">

    <style type="text/css">
        <!--
        span.cls_002{font-family:"Calibri",serif;font-size:11.1px;color:rgb(0,0,0);font-weight:normal;font-style:normal;text-decoration: none}
        div.cls_002{font-family:"Calibri",serif;font-size:11.1px;color:rgb(0,0,0);font-weight:normal;font-style:normal;text-decoration: none}
        span.cls_003{font-family:"Calibri Bold",serif;font-size:11.1px;color:rgb(0,0,0);font-weight:bold;font-style:normal;text-decoration: none}
        div.cls_003{font-family:"Calibri Bold",serif;font-size:11.1px;color:rgb(0,0,0);font-weight:bold;font-style:normal;text-decoration: none}
        span.cls_004{font-family:"Calibri Bold",serif;font-size:20.1px;color:rgb(0,0,0);font-weight:bold;font-style:normal;text-decoration: none}
        div.cls_004{font-family:"Calibri Bold",serif;font-size:20.1px;color:rgb(0,0,0);font-weight:bold;font-style:normal;text-decoration: none}
        span.cls_005{font-family:"Calibri",serif;font-size:14.1px;color:rgb(0,0,0);font-weight:normal;font-style:normal;text-decoration: none}
        div.cls_005{font-family:"Calibri",serif;font-size:14.1px;color:rgb(0,0,0);font-weight:normal;font-style:normal;text-decoration: none}
        span.cls_006{font-family:"Calibri",serif;font-size:12.1px;color:rgb(0,0,0);font-weight:normal;font-style:normal;text-decoration: none}
        div.cls_006{font-family:"Calibri",serif;font-size:12.1px;color:rgb(0,0,0);font-weight:normal;font-style:normal;text-decoration: none}
        span.cls_013{font-family:"Calibri",serif;font-size:12.1px;color:rgb(0,0,255);font-weight:normal;font-style:normal;text-decoration: underline}
        div.cls_013{font-family:"Calibri",serif;font-size:12.1px;color:rgb(0,0,255);font-weight:normal;font-style:normal;text-decoration: none}
        span.cls_008{font-family:"Calibri Bold",serif;font-size:48.0px;color:rgb(0,0,0);font-weight:bold;font-style:normal;text-decoration: none}
        div.cls_008{font-family:"Calibri Bold",serif;font-size:48.0px;color:rgb(0,0,0);font-weight:bold;font-style:normal;text-decoration: none}
        span.cls_014{font-family:"Calibri Bold",serif;font-size:9.1px;color:rgb(79,129,188);font-weight:bold;font-style:normal;text-decoration: underline}
        div.cls_014{font-family:"Calibri Bold",serif;font-size:9.1px;color:rgb(79,129,188);font-weight:bold;font-style:normal;text-decoration: none}
        span.cls_011{font-family:Arial,serif;font-size:11.1px;color:rgb(0,0,0);font-weight:normal;font-style:normal;text-decoration: none}
        div.cls_011{font-family:Arial,serif;font-size:11.1px;color:rgb(0,0,0);font-weight:normal;font-style:normal;text-decoration: none}
        span.cls_012{font-family:Arial,serif;font-size:11.1px;color:rgb(0,0,0);font-weight:normal;font-style:normal;text-decoration: none}
        div.cls_012{font-family:Arial,serif;font-size:11.1px;color:rgb(0,0,0);font-weight:normal;font-style:normal;text-decoration: none}
        span.cls_009{font-family:"Calibri Bold",serif;font-size:9.1px;color:rgb(79,129,188);font-weight:bold;font-style:normal;text-decoration: none}
        div.cls_009{font-family:"Calibri Bold",serif;font-size:9.1px;color:rgb(79,129,188);font-weight:bold;font-style:normal;text-decoration: none}
        -->
    </style>
    <script type="text/javascript" src="<?= base_url('turnjs/super/wz_jsgraphics.js')?>"></script>
</head>
<body class="hold-transition login-page">
    <!--<form action="<?php //echo base_url('Users/redirect_tutorial')?>" method="get" target="_blank">
        <button class="btn-lg btn-success btn-margin">Superviseur</button>
    </form>
    <form action="<?php //echo base_url('Users/redirect_tutorial')?>" method="get" target="_blank">
        <button class="btn-lg btn-success btn-margin">Hyperviseur</button>
    </form>
    <form action="<?php //echo base_url('Users/redirect_tutorial')?>" method="get" target="_blank">
        <button class=" btn-lg btn-success btn-margin">Administrateur</button>
    </form>-->
    <div id="" class="col-xs-6 col-md-6 col-sm-6" style="width: 100%; ">

        <?php
            if($profil==1){
        ?>
        <div id="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/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"><?= $this->lang->line('Tutoriel Backoffice'); ?></span></div>
                    <div style="position:absolute;left:0;right:0;top:556.31px" class="cls_004"><span class="cls_004" style="font-size: 30px;">iLink World Corporation</span></div>
                    <div style="position:absolute;left:0;right:0;top:614.98px" class="cls_004"><span class="cls_004"><?= $this->lang->line('Guide utilisateur'); ?></span></div>
                    <div style="position:absolute;left:0;right:0;top:644.62px" class="cls_004"><span class="cls_004"><?= $this->lang->line('Superviseur'); ?></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">2</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003"><?= $this->lang->line('Tutoriel Backoffice'); ?></span></div>
                    <div style="position:absolute;left:268.37px;top:75.78px" class="cls_006"><span class="cls_006">I-<?= $this->lang->line('Connexion'); ?></span></div>
                    <div style="position:absolute;left:251.69px;top:394.53px" class="cls_014"><span class="cls_014">Figure 1 : <?= $this->lang->line('Connexion'); ?></span></div>
                    <div style="position:absolute;left:70.82px;top:445.91px" class="cls_002"><span class="cls_002"><?= $this->lang->line('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">  <?= $this->lang->line('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">  <?= $this->lang->line('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">  <?= $this->lang->line('S’assurer que le dernier champ soit à'); ?> « </span><span class="cls_003"><?= $this->lang->line('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"><?= $this->lang->line('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"><?= $this->lang->line('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"><?= $this->lang->line('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"><?= $this->lang->line('Le lien '); ?> </span><span class="cls_003"><?= $this->lang->line('mot de passe oublié'); ?></span><span class="cls_002"> <?= $this->lang->line('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">3</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003"><?= $this->lang->line('Tutoriel Backoffice'); ?></span></div>
                    <div style="position:absolute;left:245.57px;top:75.78px" class="cls_005"><span class="cls_005">II-<?= $this->lang->line('Tableau de bord'); ?></span></div>
                    <div style="position:absolute;left:70.82px;top:120.74px" class="cls_002"><span class="cls_002"><?= $this->lang->line('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 : <?= $this->lang->line('Tableau de bord Superviseur'); ?></span></div>
                    <div style="position:absolute;left:70.82px;top:465.23px" class="cls_002"><span class="cls_002"><?= $this->lang->line('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">  <?= $this->lang->line('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">  <?= $this->lang->line('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">  <?= $this->lang->line('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">  <?= $this->lang->line('Le diagramme'); ?> </span><span class="cls_003"><?= $this->lang->line('Adhésion'); ?></span><span class="cls_002"> <?= $this->lang->line('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"><?= $this->lang->line('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">  <?= $this->lang->line('Le diagramme'); ?> </span><span class="cls_003"><?= $this->lang->line('Adhésion par mois sur une année'); ?></span><span class="cls_002"> <?= $this->lang->line('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"><?= $this->lang->line('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">  <?= $this->lang->line('Le diagramme'); ?> </span><span class="cls_003"><?= $this->lang->line('Demande de crédits par utilisateurs'); ?></span><span class="cls_002"> <?= $this->lang->line('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"><?= $this->lang->line('par utilisateur simple.'); ?></span></div>
                    <div style="position:absolute;left:70.82px;top:643.22px" class="cls_002"><span class="cls_002"><?= $this->lang->line('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">  <?= $this->lang->line('Tableau de bord'); ?></span><span class="cls_002"> : <?= $this->lang->line('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">  <?= $this->lang->line('Utilisateurs géolocalisés'); ?></span><span class="cls_002"> : <?= $this->lang->line('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">  <?= $this->lang->line('Demandes de crédits'); ?></span><span class="cls_002"> : <?= $this->lang->line('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">4</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003"><?= $this->lang->line('Tutoriel Backoffice'); ?></span></div>
                    <div style="position:absolute;left:238.13px;top:75.78px" class="cls_002"><span class="cls_002">III-<?= $this->lang->line('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 : <?= $this->lang->line('Utilisateurs géolocalisés'); ?></span></div>
                    <div style="position:absolute;left:70.82px;top:445.19px" class="cls_002"><span class="cls_002"><?= $this->lang->line('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">  <?= $this->lang->line('Catégorie'); ?></span><span class="cls_002"> :  <?= $this->lang->line('pour la catégorie de l’utilisateur (qui sera toujours'); ?> </span><span class="cls_003">geolocated</span><span class="cls_002"><?= $this->lang->line(' pour des'); ?></span></div>
                    <div style="position:absolute;left:106.82px;top:502.07px" class="cls_002"><span class="cls_002"><?= $this->lang->line('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">  <?= $this->lang->line('Parrain'); ?></span><span class="cls_002"> :  <?= $this->lang->line('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"><?= $this->lang->line('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">  <?= $this->lang->line('Nom'); ?></span><span class="cls_002"> : <?= $this->lang->line('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">  <?= $this->lang->line('Adresse'); ?></span><span class="cls_002"> : <?= $this->lang->line('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">  <?= $this->lang->line('Reseau'); ?></span><span class="cls_002"> : <?= $this->lang->line('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">  <?= $this->lang->line('Code'); ?></span><span class="cls_002"> </span><span class="cls_003"><?= $this->lang->line('Membre'); ?></span><span class="cls_002"> : <?= $this->lang->line('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">  <?= $this->lang->line('Email'); ?></span><span class="cls_002"> : <?= $this->lang->line('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">  <?= $this->lang->line('Contact'); ?></span><span class="cls_002"> : <?= $this->lang->line('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">  <?= $this->lang->line('Active'); ?></span><span class="cls_002"> : <?= $this->lang->line('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>                           <?= $this->lang->line(''); ?>
                    </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"><?= $this->lang->line('Tutoriel Backoffice'); ?></span></div>
                    <div style="position:absolute;left:250.61px;top:75.78px" class="cls_002"><span class="cls_002"><?= $this->lang->line('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 : <?= $this->lang->line('Demandes de crédits'); ?></span></div>
                    <div style="position:absolute;left:70.82px;top:407.85px" class="cls_002"><span class="cls_002"><?= $this->lang->line('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">  <?= $this->lang->line('Le'); ?> </span><span class="cls_003"> <?= $this->lang->line('temps moyen de traitement'); ?></span><span class="cls_002"> <?= $this->lang->line('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">  <?= $this->lang->line('Le'); ?> </span><span class="cls_003"> <?= $this->lang->line('temps moyen de traitement'); ?></span><span class="cls_002"> <?= $this->lang->line('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">  <?= $this->lang->line('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">  <?= $this->lang->line('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"><?= $this->lang->line('traités'); ?>.</span></div>
                    <div style="position:absolute;left:268.37px;top:524.39px" class="cls_002"><span class="cls_002"><?= $this->lang->line('Déconnexion'); ?></span></div>
                    <div style="position:absolute;left:255.41px;top:702.98px" class="cls_009"><span class="cls_009">Figure 5 : <?= $this->lang->line('Déconnexion'); ?></span></div>
                    <div style="position:absolute;left:70.82px;top:723.74px" class="cls_002"><span class="cls_002"><?= $this->lang->line('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"><?= $this->lang->line('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"><?= $this->lang->line('adresse email, son pays, son numéro de téléphone et'); ?> </span><span class="cls_003"><?= $this->lang->line('le bouton de déconnexion'); ?></span><span class="cls_002">.</span></div>
                </div>
            </div>
            <div></div>
        </div>
        <?php }elseif ($profil==2){ ?>
        <div id="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">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:0;right:0;top:556.31px" class="cls_004"><span class="cls_004" style="font-size: 30px;">iLink World Corporation</span></div>
                    <div style="position:absolute;left:0;right:0;top:614.98px" class="cls_004"><span class="cls_004">Guide utilisateur</span></div>
                    <div style="position:absolute;left:0;right:0;top:644.62px" class="cls_004"><span class="cls_004">Hyperviseur</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">2</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel 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">3</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel 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">4</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel 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">5</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel 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">6</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel 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">7</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel 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">8</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel 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>
        <?php }elseif ($profil==3){ ?>
        <div id="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">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:0;right:0;top:556.31px" class="cls_004"><span class="cls_004" style="font-size: 30px;">iLink World Corporation</span></div>
                    <div style="position:absolute;left:0;right:0;top:614.98px" class="cls_004"><span class="cls_004">Guide utilisateur</span></div>
                    <div style="position:absolute;left:0;right:0;top:644.62px" class="cls_004"><span class="cls_004">Administrateur</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:0;right:0;top:100px">
                        <img src="<?= base_url('turnjs/Admin/login_admin.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">2</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel 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:0;right:0;top:110px">
                        <img src="<?= base_url('turnjs/Admin/filtre_admin.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">3</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:274.61px;top:74.80px" class="cls_002"><span class="cls_002">II-1</span><span class="cls_002"><sup>er</sup></span><span class="cls_002"> Filtre</span></div>
                    <div style="position:absolute;left:246.89px;top:395.69px" class="cls_009"><span class="cls_009">Figure 2 : Interface de filtre</span></div>
                    <div style="position:absolute;left:77.22px;top:421.89px" class="cls_002"><span class="cls_002">Après s’être connecté, l’administrateur parvient à cette interface qui lui permet d’appliquer un</span></div>
                    <div style="position:absolute;left:70.82px;top:437.37px" class="cls_002"><span class="cls_002">premier filtre sur les informations qu’il désire consulter͘ En effet il doit choisir un pays puis un réseau</span></div>
                    <div style="position:absolute;left:70.82px;top:452.99px" class="cls_002"><span class="cls_002">et enfin une ville.</span></div>
                    <div style="position:absolute;left:70.82px;top:478.31px" class="cls_002"><span class="cls_002">Le bouton « Gestion des villes et des codes » permet quant ă lui d’être dirigé vers la partie du</span></div>
                    <div style="position:absolute;left:70.82px;top:493.67px" class="cls_002"><span class="cls_002">backoffice   qui   gère   l’ajout   des   villes,   la   génération   des   différents   codes,   l’ajout, l’activation et la</span></div>
                    <div style="position:absolute;left:70.82px;top:509.15px" class="cls_002"><span class="cls_002">désactivation des réseaux, les comptes administrateurs et l’avancé des campagnes de géolocalisation.</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:0;right:0;top:100px">
                        <img src="<?= base_url('turnjs/Admin/dashbord_admin.PNG')?>" width=450 height=250>
                    </div>
                    <div style="position:absolute;left:0;right:0;top:485px">
                        <img src="<?= base_url('turnjs/Admin/infoAdmin.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">4</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:255.29px;top:75.78px" class="cls_002"><span class="cls_002">III-Tableau de bord</span></div>
                    <div style="position:absolute;left:212.21px;top:369.81px" class="cls_009"><span class="cls_009">Figure 3 : Tableau de bord de l'administrateur</span></div>
                    <div style="position:absolute;left:70.82px;top:389.61px" class="cls_002"><span class="cls_002">Page vers laquelle l’administrateur est redirigé après avoir appliqué le 1er filtre.</span></div>
                    <div style="position:absolute;left:70.82px;top:404.01px" class="cls_002"><span class="cls_002">A gauche se trouve le menu.</span></div>
                    <div style="position:absolute;left:70.82px;top:417.47px" class="cls_002"><span class="cls_002">Au centre nous avons des statistiques.</span></div>
                    <div style="position:absolute;left:70.82px;top:444.35px" class="cls_002"><span class="cls_002">En haut à droite on retrouve le nom du pays dont on consulte les informations, la ville et le nom de</span></div>
                    <div style="position:absolute;left:70.82px;top:459.83px" class="cls_002"><span class="cls_002">l’administrateur͘ En cliquant sur ces informations, on fait apparaitre un menu͘</span></div>
                    <div style="position:absolute;left:70.82px;top:675.74px" class="cls_002"><span class="cls_002">Ce menu nous montre le nom du réseau courant, le code parrain de l’hyperviseur du réseau et son</span></div>
                    <div style="position:absolute;left:70.82px;top:691.34px" class="cls_002"><span class="cls_002">numéro de téléphone.</span></div>
                    <div style="position:absolute;left:70.82px;top:716.66px" class="cls_002"><span class="cls_002">Le bouton « Réseau » nous permet d’appliquer un nouveau filtre pour par exemple changer de ville</span></div>
                    <div style="position:absolute;left:70.82px;top:732.14px" class="cls_002"><span class="cls_002">de réseau ou même de pays.</span></div>
                    <div style="position:absolute;left:70.82px;top:757.48px" class="cls_002"><span class="cls_002">« Terminer » quant à lui nous redirige vers le premier filtre pour par exemple avoir accès au bouton</span></div>
                    <div style="position:absolute;left:70.82px;top:773.08px" class="cls_002"><span class="cls_002">« Gestion des villes et des codes ».</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:0;right:0;top:105px">
                        <img src="<?= base_url('turnjs/Admin/geolocated_admin.PNG')?>" width=450 height=250>
                    </div>
                    <div style="position:absolute;left:0;right:0;top:510px">
                        <img src="<?= base_url('turnjs/Admin/infos_parrain_admin.PNG')?>" width=450 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">5</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:237.77px;top:75.78px" class="cls_002"><span class="cls_002">IV-Utilisateurs géolocalisés</span></div>
                    <div style="position:absolute;left:234.41px;top:369.81px" class="cls_009"><span class="cls_009">Figure 4 : Utilisateurs géolocalisés</span></div>
                    <div style="position:absolute;left:70.82px;top:390.57px" class="cls_002"><span class="cls_002">En cliquant sur « Utilisateurs géolocalisés » via le menu de droite, l’administrateur est redirigé vers</span></div>
                    <div style="position:absolute;left:70.82px;top:406.05px" class="cls_002"><span class="cls_002">cette interface qui se compose d’une carte avec des marqueurs(les marqueurs représentant les</span></div>
                    <div style="position:absolute;left:70.82px;top:421.55px" class="cls_002"><span class="cls_002">positions des points géolocalisés, les superviseurs du réseau et l’hyperviseur)͘</span></div>
                    <div style="position:absolute;left:70.82px;top:446.99px" class="cls_002"><span class="cls_002">Le tableau lui, permet d’avoir des informations sur les points géolocalisés du réseau consulté. Notons</span></div>
                    <div style="position:absolute;left:70.82px;top:462.35px" class="cls_002"><span class="cls_002">qu’en cliquant sur le code parrain une fenêtre s’ouvre apportant des informations sur le supérieur du</span></div>
                    <div style="position:absolute;left:70.82px;top:477.95px" class="cls_002"><span class="cls_002">point géolocalisé ou de l’agent͘</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:0;right:0;top:95px">
                        <img src="<?= base_url('turnjs/Admin/utilisateurs_simples_admin.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">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:249.29px;top:75.78px" class="cls_002"><span class="cls_002">V-Utilisateurs simples</span></div>
                    <div style="position:absolute;left:242.81px;top:372.69px" class="cls_009"><span class="cls_009">Figure 5 : Utilisateurs simples</span></div>
                    <div style="position:absolute;left:70.82px;top:419.03px" class="cls_002"><span class="cls_002">Liste des utilisateurs simples du réseau consulté.</span></div>
                    <div style="position:absolute;left:70.82px;top:444.47px" class="cls_002"><span class="cls_002">L’administrateur 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_002">  Le nom de l’utilisateur͘</span></div>
                    <div style="position:absolute;left:88.82px;top:486.35px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Son pays.</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">  Son adresse physique.</span></div>
                    <div style="position:absolute;left:88.82px;top:518.39px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Son réseau.</span></div>
                    <div style="position:absolute;left:88.82px;top:534.47px" 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:550.55px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Son solde</span></div>
                    <div style="position:absolute;left:88.82px;top:566.51px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_002">  Son numéro de téléphone.</span></div>
                    <div style="position:absolute;left:70.82px;top:591.98px" class="cls_002"><span class="cls_002">L’administrateur peut en cliquant sur </span><span class="cls_003">Modifier</span><span class="cls_002">, modifier les informations de l’utilisateur simple ou</span></div>
                    <div style="position:absolute;left:70.82px;top:607.58px" class="cls_002"><span class="cls_002">supprimer l’utilisateur en cliquant sur </span><span class="cls_003">Supprimer.</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:0;right:0;top:100px">
                        <img src="<?= base_url('turnjs/Admin/code_membre_admin.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">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:259.61px;top:75.78px" class="cls_002"><span class="cls_002">VI-Code membre</span></div>
                    <div style="position:absolute;left:253.61px;top:385.69px" class="cls_009"><span class="cls_009">Figure 6 : code membre</span></div>
                    <div style="position:absolute;left:70.82px;top:414.89px" class="cls_003"><span class="cls_003">Demande d’adhésion</span><span class="cls_002"> présente les différentes demandes d’adhésion, leurs statuts et dates</span></div>
                    <div style="position:absolute;left:70.82px;top:430.51px" class="cls_002"><span class="cls_002">d’émission͘ Seules les demandes non traitées peuvent être supprimées͘</span></div>
                    <div style="position:absolute;left:70.82px;top:465.95px" class="cls_002"><span class="cls_002">Codes valides présente les codes utilisés par le réseau qu’ils soient assignés ou non :</span></div>
                    <div style="position:absolute;left:88.82px;top:481.87px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Code</span><span class="cls_002"> : le code concerné.</span></div>
                    <div style="position:absolute;left:88.82px;top:497.95px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Catégorie</span><span class="cls_002"> : catégorie de l’utilisateur auquel il est ou sera assigné͘</span></div>
                    <div style="position:absolute;left:88.82px;top:513.91px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Créer le</span><span class="cls_002"> : date de création du code.</span></div>
                    <div style="position:absolute;left:88.82px;top:529.99px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Parrain </span><span class="cls_002">: le code parrain de l’utilisateur du code͘</span></div>
                    <div style="position:absolute;left:70.82px;top:555.55px" class="cls_002"><span class="cls_002">*</span><span class="cls_014">Seuls les codes non-assignés peuvent être </span><span class="cls_015">supprimés</span><span class="cls_014">.</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:0;right:0;top:145px">
                        <img src="<?= base_url('turnjs/Admin/gestion_ville.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">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:251.33px;top:75.78px" class="cls_002"><span class="cls_002">VII-Gestion des villes</span></div>
                    <div style="position:absolute;left:70.82px;top:101.58px" class="cls_002"><span class="cls_002">Après avoir suivi le chemin « 1</span><span class="cls_013"><sup>e</sup></span><span class="cls_002"> filtre -> Gestion des villes et codes -> Villes », l’administrateur</span></div>
                    <div style="position:absolute;left:70.82px;top:118.02px" class="cls_002"><span class="cls_002">parvient à cette interface.</span></div>
                    <div style="position:absolute;left:247.01px;top:435.89px" class="cls_009"><span class="cls_009">Figure 7 : Gestion des villes</span></div>
                    <div style="position:absolute;left:70.82px;top:460.55px" class="cls_002"><span class="cls_002">Le formulaire de droite permet d’ajouter une ville en sélectionnant le pays correspondant dans la</span></div>
                    <div style="position:absolute;left:70.82px;top:476.03px" class="cls_002"><span class="cls_002">liste déroulante et en saisissant le nom de la ville.</span></div>
                    <div style="position:absolute;left:70.82px;top:501.47px" class="cls_002"><span class="cls_002">Dans le tableau de gauche, l’administrateur peut :</span></div>
                    <div style="position:absolute;left:88.82px;top:527.39px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Modifier</span><span class="cls_002"> les informations d’une ville (Nom/pays)͘</span></div>
                    <div style="position:absolute;left:88.82px;top:543.47px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Activer/Désactiver</span><span class="cls_002"> une ou plusieurs villes en se servant des </span><span class="cls_003">cases à cocher</span><span class="cls_002"> et du </span><span class="cls_003">bouton</span></div>
                    <div style="position:absolute;left:106.82px;top:559.07px" class="cls_003"><span class="cls_003">Activer/Désactiver</span><span class="cls_002"> en dessous du tableau.</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:0;right:0;top:155px">
                        <img src="<?= base_url('turnjs/Admin/gestion_code.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">9</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:245.33px;top:75.78px" class="cls_002"><span class="cls_002">VIII-Codes hyperviseurs</span></div>
                    <div style="position:absolute;left:70.82px;top:101.58px" class="cls_002"><span class="cls_002">Après avoir suivi le chemin « 1</span><span class="cls_013"><sup>e</sup></span><span class="cls_002"> filtre -> Gestion des villes et codes -> Codes hyperviseurs »,</span></div>
                    <div style="position:absolute;left:70.82px;top:118.02px" class="cls_002"><span class="cls_002">l’administrateur parvient ă cette interface͘</span></div>
                    <div style="position:absolute;left:252.89px;top:445.61px" class="cls_009"><span class="cls_009">Figure 8 : codes générés</span></div>
                    <div style="position:absolute;left:70.82px;top:479.39px" class="cls_002"><span class="cls_002">Le formulaire permet de générer, en entrant un nombre, des codes hyperviseurs non-assignés par</span></div>
                    <div style="position:absolute;left:70.82px;top:494.99px" class="cls_002"><span class="cls_002">défaut.</span></div>
                    <div style="position:absolute;left:70.82px;top:520.31px" class="cls_002"><span class="cls_002">Le tableau quant à lui, liste les codes hyperviseurs générés avec leurs dates de création et leurs</span></div>
                    <div style="position:absolute;left:70.82px;top:535.91px" class="cls_002"><span class="cls_002">statuts.</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:0;right:0;top:155px">
                        <img src="<?= base_url('turnjs/Admin/gestion_reseaux.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">10</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:246.77px;top:75.78px" class="cls_002"><span class="cls_002">IX-Gestion des réseaux</span></div>
                    <div style="position:absolute;left:70.82px;top:101.58px" class="cls_002"><span class="cls_002">Après avoir suivi le chemin « 1</span><span class="cls_013"><sup>e</sup></span><span class="cls_002"> filtre -> Gestion des villes et codes -> Réseaux », l’administrateur</span></div>
                    <div style="position:absolute;left:70.82px;top:118.02px" class="cls_002"><span class="cls_002">parvient à cette interface.</span></div>
                    <div style="position:absolute;left:241.85px;top:450.89px" class="cls_009"><span class="cls_009">Figure 9 : Gestion des réseaux</span></div>
                    <div style="position:absolute;left:70.82px;top:485.23px" class="cls_002"><span class="cls_002">L’administrateur peut :</span></div>
                    <div style="position:absolute;left:88.82px;top:511.15px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Ajouter</span><span class="cls_002"> un réseau à </span><span class="cls_003">la liste de réseaux d’iLink world</span><span class="cls_002">.</span></div>
                    <div style="position:absolute;left:88.82px;top:537.11px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Assigner</span><span class="cls_002"> un des réseaux d’iLink ă un pays͘</span></div>
                    <div style="position:absolute;left:88.82px;top:560.19px" class="cls_011"><span class="cls_011"></span><span class="cls_012"> </span><span class="cls_003">  Activer, Désactiver, Modifier, Supprimer</span><span class="cls_002"> des réseaux.</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:0;right:0;top:155px">
                        <img src="<?= base_url('turnjs/Admin/gestion_admin.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">11</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:257.09px;top:75.78px" class="cls_002"><span class="cls_002">X-Administrateurs</span></div>
                    <div style="position:absolute;left:70.82px;top:101.58px" class="cls_002"><span class="cls_002">Après avoir suivi le chemin « 1</span><span class="cls_013"><sup>e</sup></span><span class="cls_002"> filtre -> Gestion des villes et codes -> Administrateurs »,</span></div>
                    <div style="position:absolute;left:70.82px;top:118.02px" class="cls_002"><span class="cls_002">l’administrateur parvient ă cette interface.</span></div>
                    <div style="position:absolute;left:246.89px;top:450.33px" class="cls_009"><span class="cls_009">Figure 10 : Administrateurs</span></div>
                    <div style="position:absolute;left:70.82px;top:481.23px" class="cls_002"><span class="cls_002">Le formulaire permet ă l’administrateur de </span><span class="cls_003">créer d’autres comptent administrateur</span><span class="cls_002">.</span></div>
                    <div style="position:absolute;left:70.82px;top:500.67px" class="cls_002"><span class="cls_002">Le tableau quant à lui, </span><span class="cls_003">liste les administrateurs</span><span class="cls_002"> et permet de Modifier ou Supprimer des comptes.</span></div>
                    <div style="position:absolute;left:70.82px;top:531.99px" class="cls_002"><span class="cls_002">Notons que seuls les super administrateurs peuvent supprimer des administrateurs ou nommer des</span></div>
                    <div style="position:absolute;left:70.82px;top:547.59px" class="cls_002"><span class="cls_002">super-administrateurs</span><span class="cls_002">.</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:0;right:0;top:95px">
                        <img src="<?= base_url('turnjs/Admin/gestion_campagne.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">12</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:268.01px;top:75.78px" class="cls_002"><span class="cls_002">XI-Campagne</span></div>
                    <div style="position:absolute;left:211.97px;top:395.25px" class="cls_009"><span class="cls_009">Figure 11 : Interface évolution des campagnes</span></div>
                    <div style="position:absolute;left:70.82px;top:440.51px" class="cls_002"><span class="cls_002">Après avoir suivi le chemin « 1<sup>er</sup> filtre -> Gestion des villes et codes -> Campagne », l’administrateur</span></div>
                    <div style="position:absolute;left:70.82px;top:457.07px" class="cls_002"><span class="cls_002">parvient à cette interface.</span></div>
                    <div style="position:absolute;left:70.82px;top:482.39px" class="cls_002"><span class="cls_002">Tout en haut un filtre permet de sélectionner le pays et la période pour laquelle on veut consulter</span></div>
                    <div style="position:absolute;left:70.82px;top:497.99px" class="cls_002"><span class="cls_002">l’avancement͘</span></div>
                    <div style="position:absolute;left:70.82px;top:523.31px" class="cls_002"><span class="cls_002">Le groupe « Décompte » liste pour chaque agent de terrain « Superviseurs » le nombre de point qu’il</span></div>
                    <div style="position:absolute;left:70.82px;top:538.67px" class="cls_002"><span class="cls_002">a géolocalisé. On distingue les points physiques représentant le lieu physique sur lequel le point</span></div>
                    <div style="position:absolute;left:70.82px;top:554.15px" class="cls_002"><span class="cls_002">géolocalisé exerce, les point correctes (les agents ayant pu récupérer des numéros correctes) et les</span></div>
                    <div style="position:absolute;left:70.82px;top:569.75px" class="cls_002"><span class="cls_002">points géolocalisé(réseaux).</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:0;right:0;top:75px">
                        <img src="<?= base_url('turnjs/Admin/gestion_campagne2.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">13</span></div>
                    <div style="position:absolute;left:438.94px;top:47.20px" class="cls_003"><span class="cls_003">Tutoriel Backoffice</span></div>
                    <div style="position:absolute;left:235.13px;top:366.81px" class="cls_009"><span class="cls_009">Figure 12 : Répartition par réseau</span></div>
                    <div style="position:absolute;left:70.82px;top:387.57px" class="cls_002"><span class="cls_002">En défilant, nous avons une répartition des points géolocalisés par les agents mais cette fois en</span></div>
                    <div style="position:absolute;left:70.82px;top:403.17px" class="cls_002"><span class="cls_002">fonction des réseaux.</span></div>
                </div>
            </div>
            <div></div>
        </div>
        <?php } ?>
    </div>
<!-- jQuery 2.2.4 -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- Bootstrap 3.3.7 -->
<script src="<?= base_url('bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
<!-- iCheck -->
<script src="<?= base_url('plugins/iCheck/icheck.min.js') ?>"></script>

<script src="<?= base_url('dist/js/turn.js') ?>"></script>

<script type="text/javascript">
    $("#flipbook").turn({
        // Elevation

        elevation: 50,

        // Enable gradients

        gradients: true
    });
</script>

<script>
    $(document).ready(function(){
        resizeDiv();
    });

    window.onresize = function(event) {
        resizeDiv();
    };

    function resizeDiv() {
        vpw = $(window).width();
        vph = $(window).height();
        $("#flipbook").css({'height': vph + 'px'});
</script>

</body>
</html>
