olinox14
/
eligibilite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785
							<!DOCTYPE html>
<html
  ng-app = "application"
  lang   = "en-US">

  <head>

    <!-- Page title -->
    <title>Manche Numérique</title>

    <!-- Meta tags -->
    <meta charset = "UTF-8">
    <meta name = "description" content = "Zeno-Labs">
    <meta name = "keywords"    content = "HTML,CSS,JavaScript">
    <meta name = "author"      content = "Francois Beaufils">

    <!-- Angulars Material CSS using RawGit to load directly from `bower-material/master` -->
    <link rel = "stylesheet" href = "css/angular-material.css">
    <link rel = "stylesheet" href = "css/theme.css">

    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

    <!-- Material design CSS font http://zavoloklom.github.io/material-design-iconic-font/examples.html -->
    <link rel="stylesheet" href="css/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- Roboto font-->
    <link href='http://fonts.googleapis.com/css?family=Roboto:500,300,400' rel='stylesheet' type='text/css'>

    <!-- Specific CSS -->
    <link rel = "stylesheet" href = "css/main.css">

    <script type = "text/javascript" src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script type = "text/javascript" src = "js/proj4js/dist/proj4.js"></script>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>

    <!-- Angular Material Dependencies -->
    <script type = "text/javascript" src = "http://cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
    <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
    <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
    <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.29/skrollr.min.js"></script>


    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="js/typeahead.js"></script>
    <!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
    <script type = "text/javascript" src = "js/angular-material.js"></script>

    <script type = "text/javascript" src = "js/angular-adaptive-detection.js"></script>
    <script type = "text/javascript" src = "js/app.js"></script>
  </head>

  <!--[If lte IE 9]>

    <div class = "ie-compatibility">
        Votre navigateur Internet Explorer n'est pas compatible avec notre logiciel, il vous faut au minimum Internet Explorer 10.<br><br>
        Vous pouvez aussi télécharger un de ces navigateurs:<br><br>
        - <a href="https://www.google.fr/intl/fr/chrome/" target = "_blank">Google Chrome</a><br>
        - <a href="http://www.mozilla.org/download" target = "_blank">Mozilla Firefox</a>
    </div>
  <![endif]-->

  <body ng-controller = "mainController">

    <div class = "title">

      <img
        src      = "img/logo.png"
        ng-click = "toggleResultPane()"/>
    </div>

    <div class = "address-bar">

      <div class = "input-type">

        <input
          type                 = "text"
          placeholder          = "Pour tester votre éligibilité, merci de saisir une adresse"
          ng-model             = "address"
          ng-focus             = "closeRight()"
          class                = "typeahead"
          options              = "typeAheadOpts"
          datasets             = "allAdresses"
          typeahead-on-select  = "onSubmitAddress($item, $model, $label)"
          uib-typeahead        = "address for address in suggestLocation($viewValue)"
          typeahead-loading    = "loadingLocations"
          typeahead-no-results = "noResults"
          autofocus/>

        <div
          ng-show = "loadingLocations"
          class   = "loading-typeahead-results">

          <i
            class   = "glyphicon glyphicon-refresh">
          </i>

          Recherche en cours...
        </div>


        <div
          ng-show = "noResults"
          class   = "no-typeahead-results">

          <i class = "glyphicon glyphicon-remove"></i>

          Aucun résultat trouvé!
        </div>
      </div>

      <md-button
        aria-label = "submit"
        ng-click   = "suggestionsReady && onSubmitAddress()"
        class      = "md-raised md-primary">

        <i class = "md-search md-2x"></i>
      </md-button>

      <i class = "md-menu md-2x" ng-click = "toggleRight()"></i>
    </div>

    <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
      <md-toolbar class="md-theme-light">
        <h1 class="md-toolbar-tools">Options</h1>

        <md-progress-circular
          id          = "layer-loading"
          class       = "md-warn md-hue-3 force-hidden"
          md-mode     = "indeterminate"
          md-diameter = "25">
        </md-progress-circular>
      </md-toolbar>
      <md-content class="md-padding">

        <div class = "section-title">

          Type de vue
        </div>

        <md-radio-group ng-model="mapType">

          <md-radio-button
            value      = "Satellite"
            ng-click   = "changeMap('satellite')"
            aria-label = "Satellite">Satellite
          </md-radio-button>

          <br/>

          <md-radio-button
            value      = "Carte"
            ng-click   = "changeMap('carte')"
            aria-label = "Carte">Carte
          </md-radio-button>
        </md-radio-group>
      </md-content>
    </md-sidenav>

    <div id="map"></div>

    <div id="result">

      <div
        class         = "result-container"
        layout        = "row"
        layout-margin>

        <div
          flex
          flex-order = "1"
          class      = "result-box">

          <div class = "box-header">
            <div class = "box-logo">

              <img src = "img/fibre.png"/>
            </div>

            <div class = "box-title-description">

              <div class = "box-title">

                Fibre optique (FTTH)
              </div>

              <div class = "box-desc">

                Le Ftth (Fiber To The Home) “signifie la fibre optique jusqu'à l'abonné”. Cette technologie présente des atouts majeurs (un débit  très fortement  augmenté - de l’ordre de 100 Mbit/s à 1 Gbit/s)  et ouvre des possibilités nouvelles en termes d 'usages numériques.

                <a
                  href   = "http://www.manchenumerique.fr/Un-citoyen/Equipes-et-connectes/Internet-a-tres-haut-debit#ancre_contenu"
                  target = "_blank">

                  En savoir plus
                </a>
              </div>
            </div>
          </div>

          <div
            class    = "box-body  box-body-ftth"
            ng-style = "{'border-color': colors.ftth}">

            <hr>

            <div
              class = "box-eligibilite-title"
              ng-if = "results.ftth !== undefined && results.ftth.date !== true && !results.ftth.eligible && inscription.cas !== 6">

              possibilité inscription

              <span ng-init = "refreshInscriptionInfo()">

                <span
                  ng-if = "inscription.open"
                  class = "box-eligibilite-yes">

                  OUI
                </span>

                <span
                  ng-if = "!inscription.open"
                  class = "box-eligibilite-no">

                  NON
                </span>

                <div
                  ng-if = "results.ftth.date && inscription.open"
                  style = "text-align: center; margin-top: 14px;">

                  <button
                    type          = "button"
                    class         = "btn btn-primary btn-lg"
                    data-toggle   = "modal"
                    data-backdrop = "static"
                    data-keyboard = "false"
                    ng-click      = "initPopup()"
                    data-target   = "#mn_inscription">

                    Inscription
                  </button>
                </div>
              </span>
            </div>

            <div class = "box-eligibilite">

              <div
                ng-if = "results.ftth !== undefined">

                <div
                  ng-if        = "results.ftth && results.ftth.date !== true && inscription.cas !== 5 && inscription.cas !== 6"
                  style        = "margin-top: 30px;"
                  ng-bind-html = "formatDateFTTH(results.ftth.date)">
                </div>

                <div
                  ng-if        = "results.ftth.eligible"
                  style        = "text-align: center; font-weight: bold;">

                  <i
                    class = "fa fa-check-circle"
                    style = "font-size: 45px; color: #1fa67a">
                  </i>

                  <br>

                  Vous êtes situé dans une zone éligible à la fibre optique.<br>
                  Si vous souhaitez souscrire à une offre très haut débit merci de contacter:<br>

                  <table style = "width: 100%;">
                    <tr>
                      <td style = "text-align: center;">

                        <a
                          href   = "https://boutique.orange.fr/internet/offres-fibre"
                          target = "_blank">

                          <img
                            src   = "img/orange.jpg"
                            alt   = "Orange"
                            style = "width: 80px;"/>
                        </a>
                      </td>

                      <td>

                        <a
                          href   = "http://www.sfr.fr/offre-internet/fibre-optique"
                          target = "_blank">

                          <img
                            src   = "img/sfr.jpg"
                            alt   = "SFR"
                            style = "width: 80px;"/>
                        </a>
                      </td>
                    </tr>
                  </table>
                </div>

                <div ng-if = "inscription.message">

                  {{inscription.message}}

                  <div ng-if = "inscription.cas === 6">

                    <table style="width:100%;">
                      <tr>
                        <td style="width:33%;text-align:center;">
                          <a href = "http://www.comcable.fr" target="_blank">
                            <img style="width:100%;" src="./img/comcable.png"/>
                          </a>
                        </td>
                        <td style="width:33%;text-align:center;">
                          <a href = "http://www.k-net.fr" target="_blank">
                            <img style="width:100%;" src="./img/knet.png"/>
                          </a>
                        </td>
                        <td style="width:33%;text-align:center;">
                          <a href = "http://www.ozone.net" target="_blank">
                            <img style="width:100%;" src="./img/ozone.png"/>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td style="width:33%;text-align:center;">
                          <a href = "http://www.wibox.fr" target="_blank">
                            <img style="width:110%;" src="./img/wibox.png"/>
                          </a>
                        </td>
                        <td style="width:33%;text-align:center;">
                          <a href = "http://www.lafibrevideofutur.fr/" target="_blank">
                            <img style="width:80%;" src="./img/videofutur.png"/>
                          </a>
                        </td>
                        <td style="width:33%;text-align:center;">
                          <a href = "https://www.coriolis.com/forfait-internet/fibre" target="_blank">
                            <img style="width:80%;" src="./img/coriolis.png"/>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td style="width:33%;text-align:center;">
                          <a href = "https://www.nordnet.com/connexion-internet/internet-fibre" target="_blank">
                            <img style="width:100%;" src="./img/nordnet.png"/>
                          </a>
                        </td>
                        <td style="width:33%;text-align:center;">
                          &nbsp;
                        </td>
                        <td style="width:33%;text-align:center;">
                          &nbsp;
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>

                <div
                  class = "box-description-more"
                  ng-if = "!results.ftth._advanced"
                  style = "margin-bottom: 30px;">

                  <a
                    href     = ""
                    ng-click = "results.ftth._advanced = true">

                    + détails
                  </a>
                </div>

                <div
                  ng-if        = "results.ftth._advanced"
                  ng-bind-html = "formatResults('ftth', results.ftth)">
                </div>
              </div>

              <div
                ng-if = "results.ftth === undefined"
                class = "box-eligibilite-spinner">

                <md-progress-circular class="md-warn md-hue-3" md-mode="indeterminate"></md-progress-circular>
              </div>
            </div>
          </div>
        </div>

        <div
          flex
          flex-order = "2"
          class      = "result-box">

          <div class = "box-header">
            <div class = "box-logo">

              <img src = "img/adsl.png"/>
            </div>

            <div class = "box-title-description">

              <div class = "box-title">

                ADSL (téléphone)
              </div>

              <div class = "box-desc">

                L'ADSL est une technologie permettant l'accès à internet haut débit par le biais de la ligne téléphonique, constituée  de fils de cuivre.  Cette  ligne  téléphonique  relie  votre domicile  au central téléphonique  de France Télécom.
                <a
                  href   = "http://www.manchenumerique.fr/Un-citoyen/Equipes-et-connectes/Acceder-a-internet-haut-debit-partout-dans-la-Manche"
                  target = "_blank">

                  En savoir plus
                </a>
              </div>
            </div>
          </div>

          <div
            class    = "box-body  box-body-adsl"
            ng-style = "{'border-color': colors.adsl}">

            <div class = "box-description-more">


            </div>


            <hr>

            <div
              class = "box-eligibilite-title"
              ng-if = "results.adsl !== undefined">

              éligibilité

              <span>

                <span
                  ng-if = "results.adsl && results.adsl.LEGENDE !== 'Non eligible' && results.adsl.classedebi !== '0'"
                  class = "box-eligibilite-yes">

                  OUI
                </span>

                <span
                  ng-if = "!results.adsl || results.adsl.LEGENDE === 'Non eligible' || results.adsl.classedebi === '0'"
                  class = "box-eligibilite-no">

                  NON
                </span>
              </span>
            </div>

            <div class = "box-eligibilite">

              <div
                ng-if = "results.adsl !== undefined">

                <div
                  class = "popup-line"
                  ng-if = "!results.adsl._advanced && results.adsl.classedebi && results.adsl.classedebi !== 'Non eligible'">

                  <span class="popup-title">

                    <span
                      ng-if = "results.adsl.classedebi === '0'">

                      Non éligible
                    </span>

                    <span
                      ng-if = "results.adsl.classedebi === '1'">

                      ADSL < 3 Mbit/s
                    </span>

                    <span
                      ng-if = "results.adsl.classedebi === '2'">

                      ADSL 3 à 8 Mbit/s
                    </span>

                    <span
                      ng-if = "results.adsl.classedebi === '3'">

                      ADSL 8 à 30 Mbit/s
                    </span>

                    <span
                      ng-if = "results.adsl.classedebi === '4'">

                      ADSL 30 à 100 Mbit/s
                    </span>
                  </span>
                </div>

                <div
                  class = "box-description-more"
                  ng-if = "!results.adsl._advanced"
                  style = "margin-bottom: 30px;">

                  <a
                    href     = ""
                    ng-click = "results.adsl._advanced = true">

                    + détails
                  </a>
                </div>

                <div
                  ng-if        = "results.adsl._advanced"
                  ng-bind-html = "formatResults('adsl', results.adsl)">
                </div>
              </div>

              <div
                ng-if = "results.adsl === undefined"
                class = "box-eligibilite-spinner">

                <md-progress-circular class="md-warn md-hue-3" md-mode="indeterminate"></md-progress-circular>
              </div>
            </div>
          </div>
        </div>

        <div
          flex
          flex-order = "3"
          class      = "result-box">

          <div class = "box-header">
            <div class = "box-logo">

              <img src = "img/mimo.png"/>
            </div>

            <div class = "box-title-description">

              <div class = "box-title">

                Réseau MiMo
              </div>

              <div class = "box-desc">

                Cette technologie hertzienne, déployée par Manche Numérique, permet de desservir les zones non-éligibles à I'ADSL dites "zones blanches" et les zones qui seront déployées ultérieurement par la fibre optique.  Le MiMo permet un accès à internet et à un service de téléphonie. Cette technologie offre des débits de l'ordre de 20 Mbit/s descendants et de 3 Mbit/s montants.

                <a
                  href   = "http://www.manchenumerique.fr/Un-citoyen/Equipes-et-connectes/MiMo"
                  target = "_blank">

                  En savoir plus
                </a>
              </div>
            </div>
          </div>

          <div
            class    = "box-body  box-body-mimo"
            ng-style = "{'border-color': colors.mimo}">

            <hr>

            <div
              class = "box-eligibilite-title"
              ng-if = "results.mimo !== undefined">

              éligibilité

              <span>

                <span
                  ng-if = "results.mimo"
                  class = "box-eligibilite-yes">

                  OUI
                </span>

                <span
                  ng-if = "!results.mimo"
                  class = "box-eligibilite-no">

                  NON
                </span>
              </span>
            </div>

            <div class = "box-eligibilite">

              <div
                ng-if = "results.mimo">

                <p class="bg-warning">Votre éligibilité à la technologie MiMo est théorique. Seul le passage d'un antenniste pourra confirmer votre niveau de signal.</p>

                <div>
                Vous pouvez souscrire à une offre d'accès internet auprès de l'un de ces FAI:

                  <table style = "width:100%">
                    <tr>
                      <td style = "width:50%">
                        <div class = "bg-info">

                          <a
                            href = "https://www.ozone.net/"
                            target = "_blank">
                            <img style="height:40px;" src="./img/ozone.png"/>
                            <br/>
                            Ozone.net
                          </a>
                          <br/>
                          <i class ="fa fa-phone"></i>
                          0 973 01 1000
                        </div>
                      </td>
                      <td style = "width:50%">
                        <div class = "bg-info">

                          <a
                            href = "https://www.nordnet.com/connexion-internet/internet-radio"
                            target = "_blank">
                            <img style="height:40px;" src="./img/nordnet.png"/>
                            <br/>
                            Nordnet.com
                          </a>
                          <br/>
                          <i class ="fa fa-phone"></i>
                          3420
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <div
                  class = "box-description-more"
                  ng-if = "!results.mimo._advanced"
                  style = "margin-bottom: 30px;">

                  <a
                    href     = ""
                    ng-click = "results.mimo._advanced = true">

                    + détails
                  </a>
                </div>

                <div
                  ng-if        = "results.mimo_advanced"
                  ng-bind-html = "formatResults('mimo', results.mimo)">
                </div>
              </div>

              <div
                ng-init = "refreshInscriptionInfo()"
                ng-if   = "(!results.ftth.date || !inscription.open) && (!results.adsl || results.adsl.legende === 'Non eligible') && !results.mimo && results.mimo !== undefined">

                <p class="bg-warning">Nous vous invitons à contacter les services de <a href="http://www.manchenumerique.fr" >Manche Numérique</a> qui vous indiqueront la procédure pour une connecion internet par satellite et bénéficier d'une prise en charge de l'installation du kit satellitaire par un antenniste.</p>

              </div>

              <div
                ng-if = "results.mimo === undefined"
                class = "box-eligibilite-spinner">

                <md-progress-circular class="md-warn md-hue-3" md-mode="indeterminate"></md-progress-circular>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div
      class           = "modal fade"
      id              = "mn_inscription"
      tabindex        = "-1"
      role            = "dialog"
      backdrop        = "static"
      aria-labelledby = "mn_inscriptionLabel">

      <div
        class = "modal-dialog"
        role  = "document">

        <div class = "modal-content">

          <div class = "modal-header">

            <button
              type         = "button"
              class        = "close"
              data-dismiss = "modal"
              aria-label   = "Close">

              <span aria-hidden = "true">&times;</span>
            </button>

            <h4
              class = "modal-title"
              id    = "mn_inscriptionLabel">

              FORMULAIRE DE MANIFESTATION D'INTERET À LA FIBRE OPTIQUE
            </h4>
          </div>

          <div class = "modal-body">

            <div ng-if = "!postForm">

              Vous souhaitez bénéficier d’un abonnement à la fibre optique et pouvoir être raccordé au réseau FttH au tarif préférentiel de 50€, nous vous remercions de bien vouloir compléter ce formulaire. Après vérification, Manche Numérique se chargera de transmettre votre demande ainsi que vos coordonnées à la société Manche Fibre, délégataire de service public, qui vous informera des modalités du raccordement final et de la date d’ouverture du réseau à la commercialisation.
            </div>

            <div
              class      = "mn-form"
              ng-if      = "!postForm"
              ng-include = "'./html/form.html'">

            </div>

            <div
              class      = "mn-form-in-progress"
              ng-if      = "postForm.inProgress">

                <i class="fa fa-circle-o-notch fa-spin"></i>
                <br/>
                Enregistrement en cours...
            </div>

            <div
              class      = "mn-form-error"
              ng-if      = "postForm.error">

                <i class="fa fa-exclamation-circle"></i>
                <br/>
                Error: {{postForm.error}}
            </div>

            <div
              class      = "mn-form-ok"
              ng-if      = "postForm.ok">

                <i class="fa fa-check-circle-o"></i>
                <br/>
                Votre demande a bien été prise en compte. Un mail de confirmation vous a été envoyé.
            </div>
          </div>

          <div class = "modal-footer">

            <button
              type         = "button"
              class        = "btn btn-default"
              data-dismiss = "modal">

              Fermer
            </button>

            <button
              type        = "button"
              ng-if       = "!postForm"
              ng-click    = "ready = true; isFormValid() ? postFormEl() : null"
              class       = "btn btn-primary">

              Valider
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>