templates/app/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>BlueStork</title>
  6.         <meta name="viewport" content ="width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />
  7.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <link rel="manifest" href="manifest.json">
  11.         <style>
  12.             @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
  13.         </style>
  15.         <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  16.         <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  17.         <link rel="stylesheet" href="/css/mobiscroll.jquery.min.css">
  18.         <link rel="stylesheet" href="/css/main.css">
  20.         <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
  21.         <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  22.         <script src="/js/mobiscroll.jquery.min.js"></script>
  23.         <script src="https://js.stripe.com/v3/"></script>
  25.         <script type="text/javascript">
  27.             if('serviceWorker' in navigator) {
  28.                 navigator.serviceWorker.register('/js/sw.js')
  29.                     .then(() => console.log("Service Worker Registered"))
  30.                     .catch(e => console.log(e));
  31.             }
  33.             ons.disableAutoStyling();
  34.         </script>
  35.     </head>
  36.     <body>
  38.         <ons-navigator page="landing.html" id="home-navigator" swipeable="true"></ons-navigator>
  40.         <template id="landing.html">
  41.             <ons-page id="landing">
  43.                 <div onclick="fn.pushPage({'id': 'register.html'}, 'fade-ios')" style="height: 100%; display: flex; overflow: hidden;" class="logo-container">
  44.                     <img style="width: 100%; height: auto; object-fit: contain; transform: scale(2);" src="/images/bluestork.png">
  45.                 </div>
  47.             </ons-page>
  48.         </template>
  50.         <template id="smscode.html">
  51.             <ons-page id="smscode">
  53.                 <div class="registerdone-container" style="height: 100%; overflow: hidden; position: relative">
  54.                     <img style="display: block; margin: 10% auto;" class="register-logo" src="/images/bluestork_white.png">
  56.                     <div style="color: white; text-align: center; text-transform: uppercase; font-size: 19px;">Un code vous été envoyé par SMS</div>
  57.                     <p style="text-align: center">
  58.                         <ons-input style="width: 70%;" id="codeSMS" modifier="underbar" placeholder="Code reçu par SMS" float></ons-input>
  59.                     </p>
  60.                     <div style="height: 100%; width: 100%; position: absolute; top: 0; z-index: -1;">
  61.                         <img style="position: absolute; z-index: -1;" class="register-img" src="/images/register.png">
  62.                         <div style="height: 100%;width: 100%;background: #000000a6;"></div>
  63.                     </div>
  64.                 </div>
  66.                 <div class="tunnel-bottom">
  67.                     <div class="btn-next" onclick="validateTel()">continuer <ons-icon icon="fa-arrow-right"></ons-icon></div>
  68.                 </div>
  69.             </ons-page>
  70.         </template>
  72.         <template id="login-password.html">
  73.             <ons-page id="login-password">
  75.                 <div class="registerdone-container" style="height: 100%; overflow: hidden; position: relative">
  76.                     <img style="display: block; margin: 10% auto;" class="register-logo" src="/images/bluestork_white.png">
  78.                     <div style="color: white; text-align: center; text-transform: uppercase; font-size: 19px;">Mot de passe</div>
  79.                     <p style="text-align: center">
  80.                         <ons-input style="width: 70%;" id="log_pw" modifier="underbar" type="password" placeholder="Mot de passe" float></ons-input>
  81.                     </p>
  82.                     <div style="height: 100%; width: 100%; position: absolute; top: 0; z-index: -1;">
  83.                         <img style="position: absolute; z-index: -1;" class="register-img" src="/images/register.png">
  84.                         <div style="height: 100%;width: 100%;background: #000000a6;"></div>
  85.                     </div>
  86.                 </div>
  88.                 <div class="tunnel-bottom">
  89.                     <div class="btn-next" onclick="login()">continuer <ons-icon icon="fa-arrow-right"></ons-icon></div>
  90.                 </div>
  91.             </ons-page>
  92.         </template>
  94.         <template id="register.html">
  95.             <ons-page id="register">
  97.                 <div class="register-container" style="position: relative; height: 100%; overflow: hidden">
  98.                     <img style="position: absolute" class="register-img" src="/images/register.png">
  99.                     <img style="position: absolute; top: -40px; right: -145px;" class="register-logo" src="/images/bluestork.png">
  100.                 </div>
  102.                 <div class="tunnel-bottom">
  103.                     <p style="text-align: center">
  104.                         <ons-input style="width: 70%;" id="tel" modifier="underbar" placeholder="Entrez votre n° de téléphone" float></ons-input>
  105.                     </p>
  106.                     <div class="btn-next" onclick="checkUser()">Valider mon numéro de tel.  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  107.                 </div>
  108.             </ons-page>
  109.         </template>
  111.         <template id="registerdone.html">
  112.             <ons-page id="registerdone">
  114.                 <div class="registerdone-container" style="height: 100%; overflow: hidden; position: relative">
  115.                     <img style="display: block; margin: 10% auto;" class="register-logo" src="/images/bluestork_white.png">
  116.                     <p style="text-align: center">
  117.                         <img style="height: 100%" src="/images/check.png">
  118.                     </p>
  120.                     <div style="color: white; text-align: center; font-weight: 600; text-transform: uppercase; font-size: 24px; margin-top: 60px;">Votre numéro de téléphone</div>
  121.                     <div style="color: white; text-align: center; text-transform: uppercase; font-size: 24px;">a été vérifié</div>
  122.                     <div style="height: 100%; width: 100%; position: absolute; top: 0; z-index: -1;">
  123.                         <img style="position: absolute; z-index: -1;" class="register-img" src="/images/register.png">
  124.                         <div style="height: 100%;width: 100%;background: #000000a6;"></div>
  125.                     </div>
  126.                 </div>
  128.                 <div class="tunnel-bottom">
  129.                     <div class="btn-next" onclick="fn.pushPage({'id': 'registerform.html'})">continuer <ons-icon icon="fa-arrow-right"></ons-icon></div>
  130.                 </div>
  131.             </ons-page>
  132.         </template>
  134.         <template id="registerform.html">
  135.             <ons-page id="registerform" class="tunnel noof">
  137.                 <ons-toolbar class="tunnel-toolbar">
  138.                     <div class="center">
  139.                         <img src="/images/bluestork.png">
  140.                     </div>
  141.                 </ons-toolbar>
  143.                 <div class="header">
  144.                     <div class="left">01</div>
  145.                     <div class="center">Création de profil</div>
  146.                 </div>
  148.                 <div class="tunnel-nav">
  149.                     <div class="item active">Formulaire obligatoire</div>
  150.                 </div>
  152.                 <div class="tunnel-content register" style="padding: 25px;">
  153.                     <ons-input type="password" id="password" modifier="underbar" placeholder="Mot de passe" float></ons-input>
  154.                     <ons-input type="password" style="margin-bottom: 15px;" id="confirm_password" modifier="underbar" placeholder="Confirmer mot de passe" float></ons-input>
  155.                     <ons-input style="margin-bottom: 15px;" id="email" modifier="underbar" placeholder="Email" float></ons-input>
  156.                     <ons-input id="firstname" modifier="underbar" placeholder="Prénom" float></ons-input>
  157.                     <ons-input id="name" modifier="underbar" placeholder="Nom" float></ons-input>
  158.                     <ons-input id="address" modifier="underbar" placeholder="Adresse" float></ons-input>
  159.                     <ons-input id="subaddress" modifier="underbar" placeholder="Complément adresse" float></ons-input>
  160.                     <ons-input id="cp" modifier="underbar" placeholder="Code postal" float></ons-input>
  161.                     <ons-input id="town" modifier="underbar" placeholder="Ville" float></ons-input>
  162.                 </div>
  164.                 <div class="btn-next" onclick="registerUser()">Continuer  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  166.             </ons-page>
  167.         </template>
  169.         <template id="location.html">
  170.             <ons-page id="location">
  172.                 <div class="location-container" style="position: relative; height: 100%; overflow: hidden">
  173.                     <img style="position: absolute; left: -362px; top: -83px;" class="register-img" src="/images/moselle.png">
  174.                 </div>
  176.                 <div class="tunnel-bottom">
  177.                     <p style="text-align: center">
  178.                         <ons-input style="width: 70%;" id="tel" value="Département de la Moselle (57)" modifier="underbar" placeholder="Entrez votre n° de téléphone" float></ons-input>
  179.                     </p>
  180.                     <div class="btn-next" onclick="goToHome()">Entrer dans Blue stork</div>
  181.                 </div>
  182.             </ons-page>
  183.         </template>
  186.         <template id="home.html">
  187.             <ons-page id="home">
  189.                 <p class="home-toolbar">
  190.                     <ons-icon size="32px" icon="fa-user" onclick="fn.pushPage({'id': 'user.html', 'title': 'PullHook'}, 'lift')"></ons-icon>
  191.                     <ons-icon size="32px" icon="fa-exclamation-triangle"></ons-icon>
  192.                 </p>
  194.                 <img class="home-illustration" src="/images/illustration1.png">
  196.                 <div class="home-img">
  197.                     <img src="/images/bluestork.png">
  198.                 </div>
  199.                 <div class="home-slogan">dépannage à domicile</div>
  201.                 <div class="home-menu" onclick="fn.pushPage({'id': 'fuite.html', 'title': 'PullHook'})">
  202.                     <div class="number">01</div>
  203.                     <div class="label">J'ai une fuite</div>
  204.                 </div>
  206.                 <div class="home-menu" onclick="fn.pushPage({'id': 'entretien.html', 'title': 'PullHook'})">
  207.                     <div class="number">02</div>
  208.                     <div class="label">Entretien de chaudière</div>
  209.                 </div>
  211.                 <div class="home-menu disabled">
  212.                     <div class="number">03</div>
  213.                     <div class="label">Remplacer un équipement</div>
  214.                 </div>
  216.                 <div class="home-menu disabled">
  217.                     <div class="number">04</div>
  218.                     <div class="label">Dépanner ma chaudière</div>
  219.                 </div>
  220.             </ons-page>
  221.         </template>
  224.         <template id="fuite.html">
  225.             <ons-page id="fuite" class="tunnel">
  226.                 <ons-toolbar class="tunnel-toolbar">
  227.                     <div class="left">
  228.                         <ons-back-button></ons-back-button>
  229.                     </div>
  230.                     <div class="center">
  231.                         <img src="/images/bluestork.png">
  232.                     </div>
  233.                     <div class="right">
  234.                         <ons-toolbar-button>
  235.                             <ons-icon icon="fa-phone"></ons-icon>
  236.                         </ons-toolbar-button>
  237.                     </div>
  238.                 </ons-toolbar>
  240.                 <div class="banner">
  241.                     J'ai une fuite
  242.                 </div>
  243.                 <div class="header">
  244.                     <div class="left">01</div>
  245.                     <div class="center">Qui êtes vous ?</div>
  246.                     <div class="right">/10</div>
  247.                 </div>
  249.                 <div class="tunnel-content image">
  250.                     <div style="position: relative;">
  251.                         <div class="choice-fullimg left" onclick="nextFuite(1, 'fuite2.html', 'Propriétaire')"></div>
  252.                         <div class="choice-fullimg right" onclick="nextFuite(1, 'fuite2.html', 'Locataire')"></div>
  253.                         <img class="img-background" src="/images/femme.png">
  254.                     </div>
  255.                 </div>
  257.                 <div class="tunnel-bottom image">
  258.                     <div class="left" onclick="nextFuite(1, 'fuite2.html', 'Propriétaire')">
  259.                         <div class="btn-splitted">Propriétaire</div>
  260.                     </div>
  261.                     <div class="right" onclick="nextFuite(1, 'fuite2.html', 'Locataire')">
  262.                         <div class="btn-splitted">Locataire</div>
  263.                     </div>
  264.                 </div>
  266.             </ons-page>
  267.         </template>
  269.         <template id="fuite2.html">
  270.             <ons-page id="fuite2" class="tunnel noof">
  271.                 <ons-toolbar class="tunnel-toolbar">
  272.                     <div class="left">
  273.                         <ons-back-button></ons-back-button>
  274.                     </div>
  275.                     <div class="center">
  276.                         <img src="/images/bluestork.png">
  277.                     </div>
  278.                     <div class="right">
  279.                         <ons-toolbar-button>
  280.                             <ons-icon icon="fa-phone"></ons-icon>
  281.                         </ons-toolbar-button>
  282.                     </div>
  283.                 </ons-toolbar>
  285.                 <div class="banner">
  286.                     J'ai une fuite
  287.                 </div>
  288.                 <div class="header">
  289.                     <div class="left">02</div>
  290.                     <div class="center">Vos coordonnées</div>
  291.                     <div class="right">/10</div>
  292.                 </div>
  294.                 <div class="tunnel-nav">
  295.                     <div class="item active">Coordonnées</div>
  296.                     <div class="item">Type de bien</div>
  297.                     <div class="item">Pièces</div>
  298.                     <div class="item">Type de fuite</div>
  299.                     <div class="item">Photos</div>
  300.                     <div class="item">Infos</div>
  301.                     <div class="item">Tarifs</div>
  302.                     <div class="item">Empreinte</div>
  303.                 </div>
  305.                 <div class="tunnel-content addressform-fuite" style="padding: 25px;">
  306.                     <ons-input id="address_fuite" modifier="underbar" placeholder="Adresse" float></ons-input>
  307.                     <ons-input id="subaddress_fuite" modifier="underbar" placeholder="Complément adresse" float></ons-input>
  308.                     <ons-input id="cp_fuite" modifier="underbar" placeholder="Code postal" float></ons-input>
  309.                     <ons-input id="town_fuite" modifier="underbar" placeholder="Ville" float></ons-input>
  310.                     <div class="btn-next" onclick="nextFuite(2, 'fuite3.html')">Prochaine étape  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  311.                 </div>
  313.             </ons-page>
  314.         </template>
  316.         <template id="fuite3.html">
  317.             <ons-page id="fuite3" class="tunnel">
  318.                 <ons-toolbar class="tunnel-toolbar">
  319.                     <div class="left">
  320.                         <ons-back-button></ons-back-button>
  321.                     </div>
  322.                     <div class="center">
  323.                         <img src="/images/bluestork.png">
  324.                     </div>
  325.                     <div class="right">
  326.                         <ons-toolbar-button>
  327.                             <ons-icon icon="fa-phone"></ons-icon>
  328.                         </ons-toolbar-button>
  329.                     </div>
  330.                 </ons-toolbar>
  332.                 <div class="banner">
  333.                     J'ai une fuite
  334.                 </div>
  335.                 <div class="header">
  336.                     <div class="left">03</div>
  337.                     <div class="center">Quel type de bien avez vous ?</div>
  338.                     <div class="right">/10</div>
  339.                 </div>
  341.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  342.                     <div class="item active">Type de bien</div>
  343.                     <div class="item">Pièces</div>
  344.                     <div class="item">Type de fuite</div>
  345.                     <div class="item">Photos</div>
  346.                     <div class="item">Infos</div>
  347.                     <div class="item">Tarifs</div>
  348.                     <div class="item">Empreinte</div>
  349.                 </div>
  351.                 <div class="tunnel-content image">
  352.                     <div style="position: relative;">
  353.                         <div class="choice-fullimg left" onclick="nextFuite(3, 'fuite4.html', 'Maison')"></div>
  354.                         <div class="choice-fullimg right" onclick="nextFuite(3, 'fuite4.html', 'Appartement')"></div>
  355.                         <img class="img-background" style="width: 110%; filter: grayscale(1);" src="/images/typedebien.jpg">
  356.                     </div>
  357.                 </div>
  359.                 <div class="tunnel-bottom image">
  360.                     <div class="left" style="margin-left: 40px;" onclick="nextFuite(3, 'fuite4.html', 'Maison')">
  361.                         <div class="btn-splitted">Maison</div>
  362.                     </div>
  363.                     <div class="right" onclick="nextFuite(3, 'fuite4.html', 'Appartement')">
  364.                         <div class="btn-splitted">Appartement</div>
  365.                     </div>
  366.                 </div>
  368.             </ons-page>
  369.         </template>
  371.         <template id="fuite4.html">
  372.             <ons-page id="fuite4" class="tunnel noof">
  373.                 <ons-toolbar class="tunnel-toolbar">
  374.                     <div class="left">
  375.                         <ons-back-button></ons-back-button>
  376.                     </div>
  377.                     <div class="center">
  378.                         <img src="/images/bluestork.png">
  379.                     </div>
  380.                     <div class="right">
  381.                         <ons-toolbar-button>
  382.                             <ons-icon icon="fa-phone"></ons-icon>
  383.                         </ons-toolbar-button>
  384.                     </div>
  385.                 </ons-toolbar>
  387.                 <div class="banner">
  388.                     J'ai une fuite
  389.                 </div>
  390.                 <div class="header">
  391.                     <div class="left">04</div>
  392.                     <div class="center">De quelle pièce provient la fuite ?</div>
  393.                     <div class="right">/10</div>
  394.                 </div>
  396.                 <div class="tunnel-nav">
  397.                     <div class="item active">Pièces</div>
  398.                     <div class="item">Type de fuite</div>
  399.                     <div class="item">Photos</div>
  400.                     <div class="item">Infos</div>
  401.                     <div class="item">Tarifs</div>
  402.                     <div class="item">Empreinte</div>
  403.                 </div>
  405.                 <div class="tunnel-content">
  406.                     <div class="img-choice piece">
  407.                         <img class="main" src="/images/wc.png" alt="WC">
  408.                     </div>
  409.                     <div class="grid-choice piece">
  410.                         <div class="active" onclick="selectPiece(this)">WC</div>
  411.                         <div onclick="selectPiece(this)">Salle de bain</div>
  412.                         <div onclick="selectPiece(this)">Cuisine</div>
  413.                         <div onclick="selectPiece(this)">Buanderie</div>
  414.                         <div onclick="selectPiece(this)">Cave</div>
  415.                         <div onclick="selectPiece(this)">Garage</div>
  416.                     </div>
  417.                     <div class="btn-next" onclick="nextFuite(4, 'fuite5.html')">Prochaine étape  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  418.                 </div>
  420.             </ons-page>
  421.         </template>
  423.         <template id="fuite5.html">
  424.             <ons-page id="fuite5" class="tunnel noof">
  425.                 <ons-toolbar class="tunnel-toolbar">
  426.                     <div class="left">
  427.                         <ons-back-button></ons-back-button>
  428.                     </div>
  429.                     <div class="center">
  430.                         <img src="/images/bluestork.png">
  431.                     </div>
  432.                     <div class="right">
  433.                         <ons-toolbar-button>
  434.                             <ons-icon icon="fa-phone"></ons-icon>
  435.                         </ons-toolbar-button>
  436.                     </div>
  437.                 </ons-toolbar>
  439.                 <div class="banner">
  440.                     J'ai une fuite
  441.                 </div>
  442.                 <div class="header">
  443.                     <div class="left">05</div>
  444.                     <div class="center">Quelle type de fuite avez vous ?</div>
  445.                     <div class="right">/10</div>
  446.                 </div>
  448.                 <div class="tunnel-nav">
  449.                     <div class="item active">Type de fuite</div>
  450.                     <div class="item">Photos</div>
  451.                     <div class="item">Infos</div>
  452.                     <div class="item">Tarifs</div>
  453.                     <div class="item">Empreinte</div>
  454.                 </div>
  456.                 <div class="tunnel-content">
  457.                     <div class="img-choice fuite">
  458.                         <div class="more-infos fuite">
  459.                             <img src="/images/info.png" alt="info" onclick="document.getElementById('home-navigator').pushPage('fuite_info.html', {animation: 'lift'});">
  460.                         </div>
  461.                         <img class="main" src="/images/tuyauterie.png" alt="WC">
  462.                     </div>
  463.                     <div class="grid-choice fuite">
  464.                         <div class="active" onclick="selectFuite(this)">Tuyauterie</div>
  465.                         <div onclick="selectFuite(this)">écoulement</div>
  466.                         <div onclick="selectFuite(this)">siphon et wc</div>
  467.                         <div onclick="selectFuite(this)">robinetterie</div>
  468.                         <div onclick="selectFuite(this)">radiateur</div>
  469.                         <div onclick="selectFuite(this)">autres</div>
  470.                     </div>
  471.                     <div class="btn-next" onclick="nextFuite(5, 'fuite6.html')">Prochaine étape  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  472.                 </div>
  474.             </ons-page>
  475.         </template>
  477.         <template id="fuite6.html">
  478.             <ons-page id="fuite6" class="tunnel noof">
  480.                 <ons-toolbar class="tunnel-toolbar">
  481.                     <div class="left">
  482.                         <ons-back-button></ons-back-button>
  483.                     </div>
  484.                     <div class="center">
  485.                         <img src="/images/bluestork.png">
  486.                     </div>
  487.                     <div class="right">
  488.                         <ons-toolbar-button>
  489.                             <ons-icon icon="fa-phone"></ons-icon>
  490.                         </ons-toolbar-button>
  491.                     </div>
  492.                 </ons-toolbar>
  494.                 <div class="banner">
  495.                     J'ai une fuite
  496.                 </div>
  497.                 <div class="header">
  498.                     <div class="left">06</div>
  499.                     <div class="center">Prendre 3 photos</div>
  500.                     <div class="right">/10</div>
  501.                 </div>
  503.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  504.                     <div class="item active">Photos</div>
  505.                     <div class="item">Infos</div>
  506.                     <div class="item">Planning</div>
  507.                     <div class="item">Tarifs</div>
  508.                     <div class="item">Empreinte bancaire</div>
  509.                 </div>
  511.                 <div class="tunnel-content">
  512.                     <div class="img-choice">
  513.                         <img src="/images/photos.png" alt="photos">
  514.                     </div>
  515.                     <div class="btn-next" onclick="nextFuite(6, 'fuite7.html')">Prochaine étape  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  517.                 </div>
  519.             </ons-page>
  520.         </template>
  522.         <template id="fuite7.html">
  523.             <ons-page id="fuite7" class="tunnel">
  524.                 <ons-toolbar class="tunnel-toolbar">
  525.                     <div class="left">
  526.                         <ons-back-button></ons-back-button>
  527.                     </div>
  528.                     <div class="center">
  529.                         <img src="/images/bluestork.png">
  530.                     </div>
  531.                     <div class="right">
  532.                         <ons-toolbar-button>
  533.                             <ons-icon icon="fa-phone"></ons-icon>
  534.                         </ons-toolbar-button>
  535.                     </div>
  536.                 </ons-toolbar>
  538.                 <div class="banner">
  539.                     J'ai une fuite
  540.                 </div>
  541.                 <div class="header">
  542.                     <div class="left">07</div>
  543.                     <div class="center">Informations supplémentaires</div>
  544.                     <div class="right">/10</div>
  545.                 </div>
  547.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  548.                     <div class="item active">Infos</div>
  549.                     <div class="item">Planning</div>
  550.                     <div class="item">Tarifs</div>
  551.                     <div class="item">Empreinte bancaire</div>
  552.                 </div>
  554.                 <div class="tunnel-content">
  555.                     <textarea class="textarea fuite-info" placeholder="La fuite est importante lorsque je tire la chasse d'eau..." style="width: 86%; height: 100px; margin: 25px;"></textarea>
  556.                 </div>
  558.                 <div class="tunnel-bottom">
  559.                     <div class="btn-next" onclick="nextFuite(7, 'fuite8.html')">Prochaine étape  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  560.                 </div>
  562.             </ons-page>
  563.         </template>
  565.         <template id="fuite8.html">
  566.             <ons-page id="fuite8" class="tunnel noof">
  568.                 <ons-toolbar class="tunnel-toolbar">
  569.                     <div class="left">
  570.                         <ons-back-button></ons-back-button>
  571.                     </div>
  572.                     <div class="center">
  573.                         <img src="/images/bluestork.png">
  574.                     </div>
  575.                     <div class="right">
  576.                         <ons-toolbar-button>
  577.                             <ons-icon icon="fa-phone"></ons-icon>
  578.                         </ons-toolbar-button>
  579.                     </div>
  580.                 </ons-toolbar>
  582.                 <div class="banner">
  583.                     J'ai une fuite
  584.                 </div>
  585.                 <div class="header">
  586.                     <div class="left">08</div>
  587.                     <div class="center">Planning</div>
  588.                     <div class="right">/10</div>
  589.                 </div>
  591.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  592.                     <div class="item active">Planning</div>
  593.                     <div class="item">Tarifs</div>
  594.                     <div class="item">Empreinte bancaire</div>
  595.                     <div class="item">Récap</div>
  596.                 </div>
  598.                 <div class="tunnel-content">
  599.                     <div id="planning"></div>
  600.                     <div class="btn-next" onclick="nextFuite(8, 'fuite9.html')">Prochaine étape  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  601.                 </div>
  603.             </ons-page>
  604.         </template>
  606.         <template id="fuite9.html">
  607.             <ons-page id="fuite9" class="tunnel noof">
  608.                 <ons-toolbar class="tunnel-toolbar">
  609.                     <div class="left">
  610.                         <ons-back-button></ons-back-button>
  611.                     </div>
  612.                     <div class="center">
  613.                         <img src="/images/bluestork.png">
  614.                     </div>
  615.                     <div class="right">
  616.                         <ons-toolbar-button>
  617.                             <ons-icon icon="fa-phone"></ons-icon>
  618.                         </ons-toolbar-button>
  619.                     </div>
  620.                 </ons-toolbar>
  622.                 <img class="tarif-illustration" src="/images/illustration2.png">
  624.                 <div class="banner">
  625.                     J'ai une fuite
  626.                 </div>
  627.                 <div class="header">
  628.                     <div class="left">09</div>
  629.                     <div class="center">Tarifs de l'intervention</div>
  630.                     <div class="right">/10</div>
  631.                 </div>
  633.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  634.                     <div class="item active">Tarifs</div>
  635.                     <div class="item">Empreinte bancaire</div>
  636.                     <div class="item">Récap</div>
  637.                 </div>
  639.                 <div class="tunnel-content">
  640.                     <div class="tarif-container">
  641.                         <div class="title">Fourniture & pose</div>
  642.                         <div class="label">Montant total :</div>
  643.                         <div class="price">250€</div>
  644.                         <div class="label">Durée d'intervention :</div>
  645.                         <div class="time">2h</div>
  646.                     </div>
  647.                     <div class="btn-next" onclick="fn.pushPage({'id': 'fuite10.html'})">Passer commande  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  648.                 </div>
  650.             </ons-page>
  651.         </template>
  653.         <template id="fuite10.html">
  654.             <ons-page id="fuite10" class="tunnel noof">
  655.                 <ons-toolbar class="tunnel-toolbar">
  656.                     <div class="left">
  657.                         <ons-back-button></ons-back-button>
  658.                     </div>
  659.                     <div class="center">
  660.                         <img src="/images/bluestork.png">
  661.                     </div>
  662.                     <div class="right">
  663.                         <ons-toolbar-button>
  664.                             <ons-icon icon="fa-phone"></ons-icon>
  665.                         </ons-toolbar-button>
  666.                     </div>
  667.                 </ons-toolbar>
  669.                 <div class="banner">
  670.                     J'ai une fuite
  671.                 </div>
  672.                 <div class="header">
  673.                     <div class="left">10</div>
  674.                     <div class="center">Empreinte bancaire</div>
  675.                     <div class="right">/10</div>
  676.                 </div>
  678.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  679.                     <div class="item">Tarifs</div>
  680.                     <div class="item active">Empreinte bancaire</div>
  681.                     <div class="item">Récap</div>
  682.                 </div>
  684.                 <div class="tunnel-content">
  685.                     <div style="margin: 60px 30px" id="card-element"><!--Stripe.js injects the Card Element--></div>
  686.                     <div class="btn-next btn-payment" id="payment-form">
  687.                         <div class="spinner hidden" id="spinner"></div>
  688.                         Finaliser l'intervention  <ons-icon icon="fa-arrow-right"></ons-icon>
  689.                     </div>
  690.                 </div>
  692.             </ons-page>
  693.         </template>
  695.         <template id="fuite11.html">
  696.             <ons-page id="fuite11" class="tunnel noof">
  697.                 <ons-toolbar class="tunnel-toolbar">
  698.                     <div class="left">
  699.                         <ons-back-button></ons-back-button>
  700.                     </div>
  701.                     <div class="center">
  702.                         <img src="/images/bluestork.png">
  703.                     </div>
  704.                     <div class="right">
  705.                         <ons-toolbar-button>
  706.                             <ons-icon icon="fa-phone"></ons-icon>
  707.                         </ons-toolbar-button>
  708.                     </div>
  709.                 </ons-toolbar>
  711.                 <div class="banner">
  712.                     J'ai une fuite
  713.                 </div>
  714.                 <div class="header">
  715.                     <div class="left">10</div>
  716.                     <div class="center">Empreinte bancaire</div>
  717.                     <div class="right">/10</div>
  718.                 </div>
  720.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  721.                     <div class="item">Tarifs</div>
  722.                     <div class="item active">Empreinte bancaire</div>
  723.                     <div class="item">Récap</div>
  724.                 </div>
  726.                 <div class="tunnel-content">
  727.                     <div class="paymentsuccess-container">
  728.                         <div style="color: #079DD8; font-size: 74px;"><ons-icon icon="fa-thumbs-up"></ons-icon></div>
  729.                         <div style="text-transform: uppercase; font-weight: bolder; margin-top: 19px;">Paiement réalisé</div>
  730.                         <div style="margin-top: 51px; color: #757575;">Félicitations ! Votre transaction a été réalisée.</div>
  731.                         <div style="color: #757575; margin-top: 90px;" id="transaction_nbr_fuite">Transaction N°: 252-121X454-SD4</div>
  732.                         <div style="color: #757575; margin-top: 15px;" id="transaction_date_fuite">Date de la transaction: 17 Décembre 2021</div>
  733.                     </div>
  734.                     <div class="btn-next" onclick="nextFuite(11, 'fuite12.html')">Finaliser l'intervention  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  735.                 </div>
  737.             </ons-page>
  738.         </template>
  740.         <template id="fuite12.html">
  741.             <ons-page id="fuite12" class="tunnel">
  742.                 <ons-toolbar class="tunnel-toolbar">
  743.                     <div class="center">
  744.                         <img src="/images/bluestork.png">
  745.                     </div>
  746.                 </ons-toolbar>
  748.                 <div class="tunnel-content">
  749.                     <div class="recap-container">
  750.                         <p style="font-size: 36px; text-align: center; text-transform: uppercase;">Récapitulatif</p>
  751.                         <div class="recap">Vous avez planifié une intervention le Jeudi 16 octobre 2020 à 10h-12h</div>
  752.                         <p style="text-align: center; padding: 0 37px; margin-top: 5%; color: #757575; font-size: 2vh;">Vous pouvez modifier le jour et l’heure de votre intervention jusqu’à moins de 48h. Si vous annulez le rdv au dernier moment, nous encaisserons des frais de gestion et de déplacement d’un montant de 60€</p>
  753.                     </div>
  754.                 </div>
  756.                 <div class="tunnel-bottom">
  757.                     <div class="btn-next" onclick="goToHome();">Revenir à l'accueil</div>
  758.                 </div>
  760.             </ons-page>
  761.         </template>
  763.         <template id="fuite_info.html">
  764.             <ons-page id="fuite_info">
  766.                 <div class="background" style="background-color: #333333"></div>
  768.                 <div class="header" style="display: inline-block; width: 100%; color: white;">
  769.                     <div class="left" style="font-size: 18vw; display: inline-block; margin: 10px 0 10px 30px;">05</div>
  770.                     <div class="center" style="width: 55%; display: inline-block;">Quelle type de fuite avez vous ?</div>
  771.                 </div>
  773.                 <div class="tunnel-content fuite_info_container">
  774.                     <div style="margin: 50px 0;"></div>
  775.                     <div style="margin: 50px 0;">Robinet d'évier</div>
  776.                     <div style="margin: 50px 0;">Robinet d'évier</div>
  777.                     <div style="margin: 50px 0;">Robinet d'évier</div>
  778.                 </div>
  780.                 <div class="btn-next" onclick="document.getElementById('home-navigator').popPage({animation: 'lift'});">Fermer</div>
  781.             </ons-page>
  782.         </template>
  785.         <template id="entretien.html">
  786.             <ons-page id="entretien" class="tunnel">
  787.                 <ons-toolbar class="tunnel-toolbar">
  788.                     <div class="left">
  789.                         <ons-back-button></ons-back-button>
  790.                     </div>
  791.                     <div class="center">
  792.                         <img src="/images/bluestork.png">
  793.                     </div>
  794.                     <div class="right">
  795.                         <ons-toolbar-button>
  796.                             <ons-icon icon="fa-phone"></ons-icon>
  797.                         </ons-toolbar-button>
  798.                     </div>
  799.                 </ons-toolbar>
  801.                 <div class="banner">
  802.                     Entretien de chaudière
  803.                 </div>
  804.                 <div class="header">
  805.                     <div class="left">01</div>
  806.                     <div class="center">Type de chaudière</div>
  807.                     <div class="right">/09</div>
  808.                 </div>
  810.                 <div class="tunnel-content image">
  811.                     <div style="position: relative;">
  812.                         <div class="choice-fullimg left" onclick="nextEntretien(1, 'entretien2.html', 'Murale')"></div>
  813.                         <div class="choice-fullimg right" onclick="nextEntretien(1, 'entretien2.html', 'Sol')"></div>
  814.                         <img class="img-background" src="/images/chaudiere.png">
  815.                     </div>
  816.                 </div>
  818.                 <div class="tunnel-bottom image">
  819.                     <div class="left" onclick="nextEntretien(1, 'entretien2.html', 'Murale')">
  820.                         <div class="btn-splitted">Murale</div>
  821.                     </div>
  822.                     <div class="right" onclick="nextEntretien(1, 'entretien2.html', 'Sol')">
  823.                         <div class="btn-splitted">Sol</div>
  824.                     </div>
  825.                 </div>
  826.             </ons-page>
  827.         </template>
  829.         <template id="entretien2.html">
  830.             <ons-page id="entretien2" class="tunnel">
  831.                 <ons-toolbar class="tunnel-toolbar">
  832.                     <div class="left">
  833.                         <ons-back-button></ons-back-button>
  834.                     </div>
  835.                     <div class="center">
  836.                         <img src="/images/bluestork.png">
  837.                     </div>
  838.                     <div class="right">
  839.                         <ons-toolbar-button>
  840.                             <ons-icon icon="fa-phone"></ons-icon>
  841.                         </ons-toolbar-button>
  842.                     </div>
  843.                 </ons-toolbar>
  845.                 <div class="banner">
  846.                     Entretien de chaudière
  847.                 </div>
  848.                 <div class="header">
  849.                     <div class="left">02</div>
  850.                     <div class="center">Vos coordonnées</div>
  851.                     <div class="right">/09</div>
  852.                 </div>
  854.                 <div class="tunnel-nav">
  855.                     <div class="item active">Coordonnées</div>
  856.                     <div class="item">Type de bien</div>
  857.                     <div class="item">Pièces</div>
  858.                     <div class="item">Photos</div>
  859.                     <div class="item">Infos</div>
  860.                     <div class="item">Planning</div>
  861.                     <div class="item">Tarifs</div>
  862.                     <div class="item">Empreinte</div>
  863.                 </div>
  865.                 <div class="tunnel-content addressform-entretien" style="padding: 25px;">
  866.                     <ons-input id="address_entretien" modifier="underbar" placeholder="Adresse" float></ons-input>
  867.                     <ons-input id="subaddress_entretien" modifier="underbar" placeholder="Complément adresse" float></ons-input>
  868.                     <ons-input id="cp_entretien" modifier="underbar" placeholder="Code postal" float></ons-input>
  869.                     <ons-input id="town_entretien" modifier="underbar" placeholder="Ville" float></ons-input>
  870.                 </div>
  872.                 <div class="tunnel-bottom">
  873.                     <div class="btn-next" onclick="nextEntretien(2, 'entretien3.html')">Prochaine étape  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  874.                 </div>
  876.             </ons-page>
  877.         </template>
  879.         <template id="entretien3.html">
  880.             <ons-page id="entretien3" class="tunnel">
  881.                 <ons-toolbar class="tunnel-toolbar">
  882.                     <div class="left">
  883.                         <ons-back-button></ons-back-button>
  884.                     </div>
  885.                     <div class="center">
  886.                         <img src="/images/bluestork.png">
  887.                     </div>
  888.                     <div class="right">
  889.                         <ons-toolbar-button>
  890.                             <ons-icon icon="fa-phone"></ons-icon>
  891.                         </ons-toolbar-button>
  892.                     </div>
  893.                 </ons-toolbar>
  895.                 <div class="banner">
  896.                     Entretien de chaudière
  897.                 </div>
  899.                 <div class="header">
  900.                     <div class="left">03</div>
  901.                     <div class="center">Quel type de bien avez vous ?</div>
  902.                     <div class="right">/09</div>
  903.                 </div>
  905.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  906.                     <div class="item active">Type de bien</div>
  907.                     <div class="item">Pièces</div>
  908.                     <div class="item">Photos</div>
  909.                     <div class="item">Infos</div>
  910.                     <div class="item">Planning</div>
  911.                     <div class="item">Tarifs</div>
  912.                     <div class="item">Empreinte</div>
  913.                 </div>
  915.                 <div class="tunnel-content image">
  916.                     <div style="position: relative;">
  917.                         <div class="choice-fullimg left" onclick="nextEntretien(3, 'entretien4.html', 'Maison')"></div>
  918.                         <div class="choice-fullimg right" onclick="nextEntretien(3, 'entretien4.html', 'Appartement')"></div>
  919.                         <img class="img-background" style="width: 110%; filter: grayscale(1);" src="/images/typedebien.jpg">
  920.                     </div>
  921.                 </div>
  923.                 <div class="tunnel-bottom image">
  924.                     <div class="left" style="margin-left: 40px;" onclick="nextEntretien(3, 'entretien4.html', 'Maison')">
  925.                         <div class="btn-splitted">Maison</div>
  926.                     </div>
  927.                     <div class="right" onclick="nextEntretien(3, 'entretien4.html', 'Appartement')">
  928.                         <div class="btn-splitted">Appartement</div>
  929.                     </div>
  930.                 </div>
  932.             </ons-page>
  933.         </template>
  935.         <template id="entretien4.html">
  936.             <ons-page id="entretien4" class="tunnel">
  937.                 <ons-toolbar class="tunnel-toolbar">
  938.                     <div class="left">
  939.                         <ons-back-button></ons-back-button>
  940.                     </div>
  941.                     <div class="center">
  942.                         <img src="/images/bluestork.png">
  943.                     </div>
  944.                     <div class="right">
  945.                         <ons-toolbar-button>
  946.                             <ons-icon icon="fa-phone"></ons-icon>
  947.                         </ons-toolbar-button>
  948.                     </div>
  949.                 </ons-toolbar>
  951.                 <div class="banner">
  952.                     J'ai une fuite
  953.                 </div>
  954.                 <div class="header">
  955.                     <div class="left">04</div>
  956.                     <div class="center">Dans quelle pièce est votre chaudière</div>
  957.                     <div class="right">/09</div>
  958.                 </div>
  960.                 <div class="tunnel-nav">
  961.                     <div class="item active">Pièces</div>
  962.                     <div class="item">Photos</div>
  963.                     <div class="item">Infos</div>
  964.                     <div class="item">Planning</div>
  965.                     <div class="item">Tarifs</div>
  966.                     <div class="item">Empreinte</div>
  967.                 </div>
  969.                 <div class="tunnel-content">
  970.                     <div class="img-choice piece">
  971.                         <img class="main" src="/images/wc.png" alt="WC">
  972.                     </div>
  973.                     <div class="grid-choice piece">
  974.                         <div class="active" onclick="selectPiece(this)">WC</div>
  975.                         <div onclick="selectPiece(this)">Salle de bain</div>
  976.                         <div onclick="selectPiece(this)">Cuisine</div>
  977.                         <div onclick="selectPiece(this)">Buanderie</div>
  978.                         <div onclick="selectPiece(this)">Cave</div>
  979.                         <div onclick="selectPiece(this)">Garage</div>
  980.                     </div>
  981.                     <div class="btn-next" onclick="nextEntretien(4, 'entretien5.html')">Prochaine étape  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  982.                 </div>
  983.             </ons-page>
  984.         </template>
  986.         <template id="entretien5.html">
  987.             <ons-page id="entretien5" class="tunnel">
  989.                 <ons-toolbar class="tunnel-toolbar">
  990.                     <div class="left">
  991.                         <ons-back-button></ons-back-button>
  992.                     </div>
  993.                     <div class="center">
  994.                         <img src="/images/bluestork.png">
  995.                     </div>
  996.                     <div class="right">
  997.                         <ons-toolbar-button>
  998.                             <ons-icon icon="fa-phone"></ons-icon>
  999.                         </ons-toolbar-button>
  1000.                     </div>
  1001.                 </ons-toolbar>
  1003.                 <div class="banner">
  1004.                     Entretien de chaudière
  1005.                 </div>
  1006.                 <div class="header">
  1007.                     <div class="left">05</div>
  1008.                     <div class="center">Prendre 3 photos</div>
  1009.                     <div class="right">/09</div>
  1010.                 </div>
  1012.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  1013.                     <div class="item active">Photos</div>
  1014.                     <div class="item">Infos</div>
  1015.                     <div class="item">Planning</div>
  1016.                     <div class="item">Tarifs</div>
  1017.                     <div class="item">Empreinte</div>
  1018.                 </div>
  1020.                 <div class="tunnel-content">
  1021.                     <div class="img-choice">
  1022.                         <img src="/images/photos.png" alt="photos">
  1023.                     </div>
  1024.                     <div class="btn-next" onclick="fn.pushPage({'id': 'entretien6.html'})">Prochaine étape  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  1025.                 </div>
  1027.             </ons-page>
  1028.         </template>
  1030.         <template id="entretien6.html">
  1031.             <ons-page id="entretien6" class="tunnel">
  1032.                 <ons-toolbar class="tunnel-toolbar">
  1033.                     <div class="left">
  1034.                         <ons-back-button></ons-back-button>
  1035.                     </div>
  1036.                     <div class="center">
  1037.                         <img src="/images/bluestork.png">
  1038.                     </div>
  1039.                     <div class="right">
  1040.                         <ons-toolbar-button>
  1041.                             <ons-icon icon="fa-phone"></ons-icon>
  1042.                         </ons-toolbar-button>
  1043.                     </div>
  1044.                 </ons-toolbar>
  1046.                 <div class="banner">
  1047.                     entretien de chaudière
  1048.                 </div>
  1049.                 <div class="header">
  1050.                     <div class="left">06</div>
  1051.                     <div class="center">Informations supplémentaires</div>
  1052.                     <div class="right">/09</div>
  1053.                 </div>
  1055.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  1056.                     <div class="item active">Infos</div>
  1057.                     <div class="item">Planning</div>
  1058.                     <div class="item">Tarifs</div>
  1059.                     <div class="item">Empreinte</div>
  1060.                     <div class="item">Récap</div>
  1061.                 </div>
  1063.                 <div class="tunnel-content">
  1064.                     <textarea class="textarea entretien-info" placeholder="La chaudière est difficile d'accès..." style="width: 86%; height: 100px; margin: 25px;"></textarea>
  1065.                 </div>
  1067.                 <div class="tunnel-bottom">
  1068.                     <div class="btn-next" onclick="nextEntretien(6, 'entretien7.html')">Prochaine étape  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  1069.                 </div>
  1071.             </ons-page>
  1072.         </template>
  1074.         <template id="entretien7.html">
  1075.             <ons-page id="entretien7" class="tunnel">
  1076.                 <ons-toolbar class="tunnel-toolbar">
  1077.                     <div class="left">
  1078.                         <ons-back-button></ons-back-button>
  1079.                     </div>
  1080.                     <div class="center">
  1081.                         <img src="/images/bluestork.png">
  1082.                     </div>
  1083.                     <div class="right">
  1084.                         <ons-toolbar-button>
  1085.                             <ons-icon icon="fa-phone"></ons-icon>
  1086.                         </ons-toolbar-button>
  1087.                     </div>
  1088.                 </ons-toolbar>
  1090.                 <div class="banner">
  1091.                     entretien de chaudière
  1092.                 </div>
  1093.                 <div class="header">
  1094.                     <div class="left">07</div>
  1095.                     <div class="center">Planning</div>
  1096.                     <div class="right">/09</div>
  1097.                 </div>
  1099.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  1100.                     <div class="item active">Planning</div>
  1101.                     <div class="item">Tarifs</div>
  1102.                     <div class="item">Empreinte</div>
  1103.                     <div class="item">Récap</div>
  1104.                 </div>
  1106.                 <div class="tunnel-content">
  1107.                     <div id="planning"></div>
  1108.                     <div class="btn-next" onclick="nextEntretien(7, 'entretien8.html')">Prochaine étape  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  1109.                 </div>
  1111.             </ons-page>
  1112.         </template>
  1114.         <template id="entretien8.html">
  1115.             <ons-page id="entretien8" class="tunnel">
  1116.                 <ons-toolbar class="tunnel-toolbar">
  1117.                     <div class="left">
  1118.                         <ons-back-button></ons-back-button>
  1119.                     </div>
  1120.                     <div class="center">
  1121.                         <img src="/images/bluestork.png">
  1122.                     </div>
  1123.                     <div class="right">
  1124.                         <ons-toolbar-button>
  1125.                             <ons-icon icon="fa-phone"></ons-icon>
  1126.                         </ons-toolbar-button>
  1127.                     </div>
  1128.                 </ons-toolbar>
  1130.                 <img class="tarif-illustration" src="/images/illustration2.png">
  1132.                 <div class="banner">
  1133.                     entretien de chaudière
  1134.                 </div>
  1135.                 <div class="header">
  1136.                     <div class="left">08</div>
  1137.                     <div class="center">Tarifs de l'intervention</div>
  1138.                     <div class="right">/09</div>
  1139.                 </div>
  1141.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  1142.                     <div class="item">Planning</div>
  1143.                     <div class="item active">Tarifs</div>
  1144.                     <div class="item">Empreinte</div>
  1145.                     <div class="item">Récap</div>
  1146.                 </div>
  1148.                 <div class="tunnel-content">
  1149.                     <div class="tarif-container">
  1150.                         <div class="label" style="margin-top: 135px;">Notre tarif est de :</div>
  1151.                         <div class="price">250€</div>
  1152.                         <div class="label">Durée d'intervention :</div>
  1153.                         <div class="time">2h</div>
  1154.                     </div>
  1155.                     <div class="btn-next" onclick="fn.pushPage({'id': 'entretien9.html'})">Passer commande  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  1156.                 </div>
  1158.             </ons-page>
  1159.         </template>
  1161.         <template id="entretien9.html">
  1162.             <ons-page id="entretien9" class="tunnel">
  1163.                 <ons-toolbar class="tunnel-toolbar">
  1164.                     <div class="left">
  1165.                         <ons-back-button></ons-back-button>
  1166.                     </div>
  1167.                     <div class="center">
  1168.                         <img src="/images/bluestork.png">
  1169.                     </div>
  1170.                     <div class="right">
  1171.                         <ons-toolbar-button>
  1172.                             <ons-icon icon="fa-phone"></ons-icon>
  1173.                         </ons-toolbar-button>
  1174.                     </div>
  1175.                 </ons-toolbar>
  1177.                 <div class="banner">
  1178.                     entretien de chaudière
  1179.                 </div>
  1180.                 <div class="header">
  1181.                     <div class="left">09</div>
  1182.                     <div class="center">Empreinte bancaire</div>
  1183.                     <div class="right">/09</div>
  1184.                 </div>
  1186.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  1187.                     <div class="item">Planning</div>
  1188.                     <div class="item">Tarifs</div>
  1189.                     <div class="item active">Empreinte</div>
  1190.                     <div class="item">Récap</div>
  1191.                 </div>
  1193.                 <div class="tunnel-content">
  1194.                     <div style="margin: 60px 30px" id="card-element-entretien"><!--Stripe.js injects the Card Element--></div>
  1196.                     <div class="btn-next btn-payment" id="payment-form-entretien">
  1197.                         <div class="spinner hidden" id="spinner"></div>
  1198.                         Finaliser l'intervention  <ons-icon icon="fa-arrow-right"></ons-icon>
  1199.                     </div>
  1200.                 </div>
  1201.             </ons-page>
  1202.         </template>
  1204.         <template id="entretien10.html">
  1205.             <ons-page id="entretien10" class="tunnel">
  1206.                 <ons-toolbar class="tunnel-toolbar">
  1207.                     <div class="left">
  1208.                         <ons-back-button></ons-back-button>
  1209.                     </div>
  1210.                     <div class="center">
  1211.                         <img src="/images/bluestork.png">
  1212.                     </div>
  1213.                     <div class="right">
  1214.                         <ons-toolbar-button>
  1215.                             <ons-icon icon="fa-phone"></ons-icon>
  1216.                         </ons-toolbar-button>
  1217.                     </div>
  1218.                 </ons-toolbar>
  1220.                 <div class="banner">
  1221.                     entretien de chaudière
  1222.                 </div>
  1223.                 <div class="header">
  1224.                     <div class="left">09</div>
  1225.                     <div class="center">Empreinte bancaire</div>
  1226.                     <div class="right">/09</div>
  1227.                 </div>
  1229.                 <div class="tunnel-nav" style="margin-bottom: 16px;">
  1230.                     <div class="item">Planning</div>
  1231.                     <div class="item">Tarifs</div>
  1232.                     <div class="item active">Empreinte</div>
  1233.                     <div class="item">Récap</div>
  1234.                 </div>
  1236.                 <div class="tunnel-content">
  1237.                     <div class="paymentsuccess-container">
  1238.                         <div style="color: #079DD8; font-size: 74px;"><ons-icon icon="fa-thumbs-up"></ons-icon></div>
  1239.                         <div style="text-transform: uppercase; font-weight: bolder; margin-top: 19px;">Paiement réalisé</div>
  1240.                         <div style="margin-top: 51px; color: #757575;">Félicitations ! Votre transaction a été réalisée.</div>
  1241.                         <div style="color: #757575; margin-top: 90px;" id="transaction_nbr_entretien">Transaction N°: 252-121X454-SD4</div>
  1242.                         <div style="color: #757575; margin-top: 15px;" id="transaction_date_entretien">Date de la transaction: 17 Décembre 2021</div>
  1243.                     </div>
  1244.                     <div class="btn-next" onclick="fn.pushPage({'id': 'entretien11.html'})">Finaliser l'intervention  <ons-icon icon="fa-arrow-right"></ons-icon></div>
  1245.                 </div>
  1246.             </ons-page>
  1247.         </template>
  1249.         <template id="entretien11.html">
  1250.             <ons-page id="entretien11" class="tunnel">
  1251.                 <ons-toolbar class="tunnel-toolbar">
  1252.                     <div class="center">
  1253.                         <img src="/images/bluestork.png">
  1254.                     </div>
  1255.                 </ons-toolbar>
  1257.                 <div class="tunnel-content">
  1258.                     <div class="recap-container">
  1259.                         <p style="font-size: 36px; text-align: center; text-transform: uppercase;">Récapitulatif</p>
  1260.                         <div class="recap">Vous avez planifié une intervention le Jeudi 16 octobre 2020 à 10h-12h</div>
  1261.                         <p style="text-align: center; padding: 0 37px; margin-top: 115px; color: #757575;">Vous pouvez modifier le jour et l’heure de votre intervention jusqu’à moins de 48h. Si vous annulez le rdv au dernier moment, nous encaisserons des frais de gestion et de déplacement d’un montant de 60€</p>
  1262.                     </div>
  1263.                     <div class="btn-next" onclick="goToHome();">Revenir à l'accueil</div>
  1264.                 </div>
  1266.             </ons-page>
  1267.         </template>
  1270.         <template id="user.html">
  1271.             <ons-page id="user" class="tunnel noof">
  1272.                 <ons-toolbar class="tunnel-toolbar" style="background-color: #079DD8; height:  120px;">
  1273.                     <div class="left">
  1274.                         <ons-back-button></ons-back-button>
  1275.                     </div>
  1276.                     <div class="center">
  1277.                         <img style="height: 125px;" src="/images/bluestork_white.png">
  1278.                     </div>
  1279.                 </ons-toolbar>
  1281.                 <div class="content profil">
  1282.                     <div class="banner">
  1283.                         MON PROFIL
  1284.                     </div>
  1286.                     <p class="profil_name"></p>
  1288.                     <div class="profil_menu">
  1289.                         <div class="menu_container" onclick="fn.pushPage({'id': 'edit_profil.html'})">
  1290.                             <div class="number">01</div>
  1291.                             <div class="label">Mon profil</div>
  1292.                         </div>
  1293.                         <div class="menu_container" onclick="fn.pushPage({'id': 'interventions.html'})">
  1294.                             <div class="number">02</div>
  1295.                             <div class="label">Mes interventions</div>
  1296.                         </div>
  1297.                         <div class="menu_container" onclick=" window.open('https://bluestork.fr/a-propos-de-nous/contact-us/', '_blank')">
  1298.                             <div class="number">03</div>
  1299.                             <div class="label">Nous contacter</div>
  1300.                         </div>
  1301.                     </div>
  1303.                     <div class="profil_mentions">
  1304.                         <p>Conditions générales de ventes</p>
  1305.                         <p>Mentions légales</p>
  1306.                     </div>
  1307.                 </div>
  1309.             </ons-page>
  1310.         </template>
  1312.         <template id="edit_profil.html">
  1313.             <ons-page id="edit_profil" class="tunnel noof">
  1314.                 <ons-toolbar class="tunnel-toolbar" style="background-color: #079DD8; height:  120px;">
  1315.                     <div class="left">
  1316.                         <ons-back-button></ons-back-button>
  1317.                     </div>
  1318.                     <div class="center">
  1319.                         <img style="height: 125px;" src="/images/bluestork_white.png">
  1320.                     </div>
  1321.                 </ons-toolbar>
  1323.                 <div class="content profil">
  1324.                     <div class="banner">
  1325.                         MON PROFIL
  1326.                     </div>
  1328.                     <p class="profil_name">Abdelkader ZOUAOUI</p>
  1330.                     <div class="tunnel-content addressform-fuite" style="padding: 25px;">
  1331.                         <ons-input id="prenom_profil" modifier="underbar" placeholder="Prénom" float></ons-input>
  1332.                         <ons-input id="nom_profil" modifier="underbar" placeholder="Nom" float></ons-input>
  1333.                         <ons-input id="email_profil" modifier="underbar" placeholder="Email" float></ons-input>
  1334.                         <ons-input id="address_profil" modifier="underbar" placeholder="Adresse" float></ons-input>
  1335.                         <ons-input id="subaddress_profil" modifier="underbar" placeholder="Complément adresse" float></ons-input>
  1336.                         <ons-input id="cp_profil" modifier="underbar" placeholder="Code postal" float></ons-input>
  1337.                         <ons-input id="town_profil" modifier="underbar" placeholder="Ville" float></ons-input>
  1338.                         <div class="btn-next" onclick="setUserInfos();">Valider le profil</div>
  1339.                     </div>
  1340.                 </div>
  1342.             </ons-page>
  1343.         </template>
  1345.         <template id="interventions.html">
  1346.             <ons-page id="interventions" class="tunnel noof">
  1347.                 <ons-toolbar class="tunnel-toolbar" style="background-color: #079DD8; height:  120px;">
  1348.                     <div class="left">
  1349.                         <ons-back-button></ons-back-button>
  1350.                     </div>
  1351.                     <div class="center">
  1352.                         <img style="height: 125px;" src="/images/bluestork_white.png">
  1353.                     </div>
  1354.                 </ons-toolbar>
  1356.                 <div class="content profil" style="background-color: #EFEFEF;">
  1357.                     <div class="banner">
  1358.                         Mes interventions
  1359.                     </div>
  1361.                     <div class="interventions_container" style="padding: 7%;">
  1362.                         {#<div class="intervention_card">#}
  1363.                             {#<div class="ligne"></div>#}
  1364.                             {#<div class="title">26.09.2020 à 14h</div>#}
  1365.                             {#<div class="address">7 rue oberlin 67000 strasbourg</div>#}
  1366.                         {#</div>#}
  1367.                     </div>
  1368.                 </div>
  1370.             </ons-page>
  1371.         </template>
  1373.         <script src="/js/main.js"></script>
  1374.     </body>
  1375. </html>