Maj de bootstrap en V4 finale

Création d'un module à part pour gérer les applications
 - Ajout de VautMeUp
 - Préparation de l'appli karting
Ajout d'un bloc "Projets personnels"
This commit is contained in:
2018-06-27 00:46:00 +02:00
parent 2cdbbadcc2
commit 5659eb6309
35 changed files with 14681 additions and 9663 deletions

5
module/CV/.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
.buildpath
.project
.settings/
.DS_Store
vendor/

28
module/CV/LICENSE.md Normal file
View File

@ -0,0 +1,28 @@
Copyright (c) 2005-2015, Zend Technologies USA, Inc.
All rights reserved.
Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:
- Redistributions of source code must retain the above copyright notice,
this list of conditions and the following disclaimer.
- Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
- Neither the name of Zend Technologies USA, Inc. nor the names of its
contributors may be used to endorse or promote products derived from this
software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

86
module/CV/README.md Normal file
View File

@ -0,0 +1,86 @@
# Zend Framework Skeleton Module
This is a sample skeleton module for use with
[zend-mvc](https://docs.zendframework.com/zend-mvc) applications.
## Installation
First, decide on a namespace for your new module. For purposes of this README,
we will use `MyNewModule`.
Clone this repository into your application:
```bash
$ cd module
$ git clone https://github.com/zendframework/ZendSkeletonModule MyNewModule
$ cd MyNewModule
```
If you wish to version the new module with your application, and not as a
separate project, remove the various Git artifacts within it:
```bash
$ rm -Rf .git .gitignore
```
If you want to version it separately, remove the origin remote so you can
specify a new one later:
```bash
$ git remote remove origin
```
The next step will be to change the namespace in the various files. Open each
of `config/module.config.php`, `src/Module.php`, and
`src/Controller/SkeletonController.php`, and replace any occurence of
`ZendSkeletonModule` with your new namespace.
> ### find and sed
>
> You can also do this with the Unix utilties `find` and `sed`:
>
> ```bash
> $ for php in $(find . -name '*.php');do
> > sed --in-place -e 's/ZendSkeletonModule/MyNewModule/g' $php
> > done
> ```
Next, we need to setup autoloading in your application. Open the `composer.json`
file in your application root, and add an entry under the `autoload.psr-4` key:
```json
"autoload": {
"psr-4": {
"MyNewModule\\": "module/MyNewModule/src/"
}
}
```
When done adding the entry:
```bash
$ composer dump-autoload
```
Finally, notify your application of the module. Open
`config/modules.config.php`, and add it to the bottom of the list:
```php
return [
/* ... */
'MyNewModule',
]
```
> ### application.config.php
>
> If you are using an older version of the skeleton application, you may not
> have a `modules.config.php` file. If that is the case, open `config/application.config.php`
> instead, and add your module under the `modules` key:
>
> ```php
> 'modules' => [
> /* ... */
> 'MyNewModule',
> ],
> ```

View File

@ -0,0 +1,53 @@
<?php
namespace CV;
use Zend\ServiceManager\Factory\InvokableFactory;
return [
'controllers' => [
'factories' => [
Controller\IndexController::class => InvokableFactory::class,
],
],
'router' => [
'routes' => [
'CV' => [
'type' => 'Literal',
'options' => [
// Change this to something specific to your module
'route' => '/cv',
'defaults' => [
'controller' => Controller\IndexController::class,
'action' => 'index',
],
],
'may_terminate' => true,
'child_routes' => [
// You can place additional routes that match under the
// route defined above here.
],
],
'Vault' => [
'type' => 'Literal',
'options' => [
// Change this to something specific to your module
'route' => '/vault',
'defaults' => [
'controller' => Controller\IndexController::class,
'action' => 'vault',
],
],
'may_terminate' => true,
'child_routes' => [
// You can place additional routes that match under the
// route defined above here.
],
],
],
],
'view_manager' => [
'template_path_stack' => [
'CV' => __DIR__ . '/../view',
],
],
];

View File

@ -0,0 +1,27 @@
<?php
/**
* @link http://github.com/zendframework/ZendSkeletonModule for the canonical source repository
* @copyright Copyright (c) 2005-2016 Zend Technologies USA Inc. (http://www.zend.com)
* @license http://framework.zend.com/license/new-bsd New BSD License
*/
namespace CV\Controller;
use Zend\Mvc\Controller\AbstractActionController;
use Zend\View\Model\JsonModel;
use Zend\View\Model\ViewModel;
class IndexController extends AbstractActionController
{
public function indexAction()
{ $view = new ViewModel();
$view->setTerminal(true);
return $view;
}
public function vaultAction()
{ $view = new ViewModel();
$view->setTerminal(true);
return $view;
}
}

16
module/CV/src/Module.php Normal file
View File

@ -0,0 +1,16 @@
<?php
/**
* @link http://github.com/zendframework/ZendSkeletonModule for the canonical source repository
* @copyright Copyright (c) 2005-2016 Zend Technologies USA Inc. (http://www.zend.com)
* @license http://framework.zend.com/license/new-bsd New BSD License
*/
namespace CV;
class Module
{
public function getConfig()
{
return include __DIR__ . '/../config/module.config.php';
}
}

View File

@ -0,0 +1,582 @@
{extends '../../../../../module/Application/view/layout/layout.tpl'}
{block 'content'}
<!--------------------------------------HEADER-------------------------------------->
<header id="main-header">
<div class="header-wrapper">
<a class="logo" href="#">Nicolas</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<!--Main nav to navigate to different parts of the page-->
<li><a id="hero-link" href="#hero">Accueil</a></li>
<li><a id="about-link" href="#about">À propos </a></li>
<li><a id="competences-link" href="#competences">Competences</a></li>
<li><a id="experiences-link" href="#experiences">Experiences</a></li>
{*<li><a id="engagement-link" href="#engagement">Engagements</a></li>*}
<li><a id="projets-link" href="#projets">Projets</a></li>
<li><a id="contact-link" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!--------------------------------------HERO IMAGE-------------------------------------->
<section id="hero">
<div id="particles-js">
<div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
<div class="static col-xs-10 col-sm-10 col-md-10 col-lg-10">
<div class="hero-content">
<img src="img/profile-pic2.jpg">
<h1>Nicolas Riault</h1>
<h2 id="hero-text-animation">Web Developer Full Stack, Consultant IT</h2>
<button class="download"><a download href="downloads/example.txt">Télécharger mon CV</a></button>
<!--To add your file simply replace example.txt with whatever file you want-->
</div>
</div>
</div>
</div>
</section>
<!--------------------------------------ABOUT SECTION-------------------------------------->
<section id="about">
<div class="container">
<div class="row left-xs left-sm left-md left-lg">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="about-text">
<h2>Bonjour, je m'appelle <span class="accent-text">Nicolas</span></h2>
<p>
Ouvert et curieux de caractère, je suis à laise dans la relation client et apprécie le travail
en équipe.
Jaime ce travail de développeur qui nécessite une capacité dadaptation et découte au service
dun projet.
<br>
Du point de vue technique, je développe principalement en PHP, C#. Je suis également a l'aise
avec SQL Server et la solution MSBI.
<br>
Sur mon temps libre je travaille sur des projets personnels que j'autilise au quotidien en
utilisant de nouvelles technologies (AngularJs, Ionic ... ).
</p>
<ul class="about-social">
<!--Social icons for the about section-->
<!--These icons are font-awesome icons and more can be looked up at https://fontawesome.com/icons?d=gallery-->
<li><a href="http://www.google.com"><i class="fab fa-facebook-f"></i></a></li>
<!--Simply replace the google link with your social media link-->
<li><a href="http://www.google.com"><i class="fab fa-twitter"></i></a></li>
<li><a href="http://www.google.com"><i class="far fa-envelope"></i></a></li>
<li><a href="http://www.google.com"><i class="fab fa-google-plus-g"></i></a></li>
<li><a href="http://www.google.com"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="about-resume">
<div class="education">
<h2>Cursus et certifications</h2>
<div class="eduction-block">
<h4>SQL Server 2014 Performance Tuning and Optimization</h4>
<p>2017 - IB Formation - Paris</p>
</div>
<div class="eduction-block">
<h4>Licence Professionelle logiciel libre et propriétaire</h4>
<p>2012 - UFR Des Sciences - Angers</p>
</div>
<div class="eduction-block">
<h4>BTS Informatique de Gestion</h4>
<p>2011 - Lycée Chevrollier - Angers</p>
</div>
<div class="eduction-block">
<h4>Lycée Notre Dame</h4>
<p>2009 - Baccalauréat Scientifique - La Flèche</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--------------------------------------COMPETENCES SECTION-------------------------------------->
<section id="competences">
<div class="container">
<div class="section-title">
<h1>Mes <span class="accent-text">Compétences</span></h1>
</div>
<div class="row left-xs left-sm left-md left-lg">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="about-resume">
<div class="skills">
<h2>Développement</h2>
<div class="skill-progress-container">
<p>PHP</p>
<div class="skill-bar">
<div class="bar-percent php">
<div class="inner-percent"></div>
</div>
</div>
</div>
<div class="skill-progress-container">
<p>Javascript</p>
<div class="skill-bar">
<div class="bar-percent php">
<div class="inner-percent"></div>
</div>
</div>
</div>
<div class="skill-progress-container">
<p>HTML / CSS</p>
<div class="skill-bar">
<div class="bar-percent html">
<div class="inner-percent"></div>
</div>
</div>
</div>
<div class="skill-progress-container">
<p>.NET / C#</p>
<div class="skill-bar">
<div class="bar-percent net">
<div class="inner-percent"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="about-resume">
<div class="skills">
<h2>SGBD / Business intelligence</h2>
<div class="skill-progress-container">
<p>SQL Server</p>
<div class="skill-bar">
<div class="bar-percent php">
<div class="inner-percent"></div>
</div>
</div>
</div>
<div class="skill-progress-container">
<p>Microsoft BI</p>
<div class="skill-bar">
<div class="bar-percent msbi">
<div class="inner-percent"></div>
</div>
</div>
</div>
<div class="skill-progress-container">
<p>MySQL</p>
<div class="skill-bar">
<div class="bar-percent mysql">
<div class="inner-percent"></div>
</div>
</div>
</div>
<div class="skill-progress-container">
<p>PostgreSQL</p>
<div class="skill-bar">
<div class="bar-percent postgresql">
<div class="inner-percent"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row left-xs left-sm left-md left-lg">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="about-resume">
<div class="skills">
<h2>Autres</h2>
<div class="skill-progress-container">
<p>MongoDb / CassandraDb</p>
<div class="skill-bar">
<div class="bar-percent msbi">
<div class="inner-percent"></div>
</div>
</div>
</div>
<div class="skill-progress-container">
<p>Python</p>
<div class="skill-bar">
<div class="bar-percent msbi">
<div class="inner-percent"></div>
</div>
</div>
</div>
<div class="skill-progress-container">
<p>NodeJs</p>
<div class="skill-bar">
<div class="bar-percent mysql">
<div class="inner-percent"></div>
</div>
</div>
</div>
<div class="skill-progress-container">
<p>AngularJS</p>
<div class="skill-bar">
<div class="bar-percent mysql">
<div class="inner-percent"></div>
</div>
</div>
</div>
<div class="skill-progress-container">
<p>Ionic Framework</p>
<div class="skill-bar">
<div class="bar-percent postgresql">
<div class="inner-percent"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--------------------------------------EXPERIENCES SECTION-------------------------------------->
<section id="experiences" class="timeline">
<div class="container">
<div class="section-title">
<h1>Mes <span class="accent-text">Experiences</span></h1>
</div>
<div class="timeline-item">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInLeft">
<h3>Développeur Full Stack - Serveurcom</h3>
<div class="date">12/2015 - Actuel</div>
<p>
Maintenance évolutive d'une application de facturation pour les télécoms.
<br>
Macro gestion de l'équipe de développement.
<br>
Formation Microsoft 55144B.
</p>
<a class="bnt-more" onclick="launchModale('#modalServeurcom')">Détail</a>
</div>
</div>
<div class="timeline-item">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInRight">
<h3>Consultant SI - Capgémini</h3>
<div class="date">02/2013 - 11/2015</div>
<p>
Développeur référent pour une TMA pour le groupe La Poste.
<br>
<small><i>PHP(CakePhp), MSBI/Asp.NET ( SSAS, SSRS, SSIS)</i></small>
<br>
TMA pour le ministère des sports.
<br>
<small><i>.NET/MSBI</i></small>
<br>
TMA pour l'Agence nationale de la recherche.
<br>
<small><i>C#, ASP, Sharepoint</i></small>
<br>
</p>
<a class="bnt-more" onclick="launchModale('#modalCapgemini')">Détail</a>
</div>
</div>
<div class="timeline-item">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInLeft">
<div class="date">04/2012 - 11/2012</div>
<h3>Développeur - INRA</h3>
<p>
Développement d'une application web pour informatiser le métier des chercheurs.
<br>
<small><i>Qooxdoo, Python, PostgreSQL</i></small>
</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-img"></div>
<div class="timeline-content js--fadeInRight">
<h3>Développeur Web - Archimède</h3>
<div class="date">06/2011 - 07/2011</div>
<p>Developpement d'un site vitrine sous Joomla</p>
</div>
</div>
</div>
</section>
<!--------------------------------------ENGAGEMENT SECTION-------------------------------------->
{*
<section id="engagement">
<div class="container">
<div class="section-title">
<h1>Mes <span class="accent-text">Engagements</span></h1>
</div>
<div class="row center-xs center-sm center-md center-lg trigger"><!--Row 1-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
<div class="service-block">
<i class="icon fas fa-code"></i>
<h3>Web Development</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
<div class="service-block">
<i class="icon fas fa-laptop"></i>
<h3>Web Design</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
<div class="service-block">
<i class="icon fas fa-mobile-alt"></i>
<h3>Responsif</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
<div class="service-block">
<i class="icon far fa-file-alt"></i>
<h3>Documentation</h3>
<p>
Analyse du besoin, qualification, chiffrage, rédaction des spécifications et des cahiers de
test.
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
<div class="service-block">
<i class="icon far fa-copy"></i>
<h3>Clean Coder</h3>
<p>
Adepte du manifeste "Software craftsmanship manifesto".
<br>
<small>
<i>Pas seulement une application qui marche, mais une application bien faite, perreine,
robuste, maintenable et évolutive. </i>
</small>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
<div class="service-block">
<i class="icon fas fa-cogs"></i>
<h3>Support</h3>
<p>Gestion du SAV, priorisation des tickets.</p>
</div>
</div>
</div>
</div>
</section>
*}
<!--------------------------------------PROJETS PERSONELS SECTION-------------------------------------->
<section id="projets">
<div class="container">
<div class="section-title">
<h1>Mes projets <span class="accent-text">Personels</span></h1>
</div>
<div class="row center-xs center-sm center-md center-lg">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="carousel-projets" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#carousel-projets" data-slide-to="0" class="active"></li>
<li data-target="#carousel-projets" data-slide-to="1"></li>
<li data-target="#carousel-projets" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/hero8.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="img/hero9.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="img/hero10.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#carousel-projets" data-slide="prev">
<span class="carousel-control-prev-icon"><i class="fas fa-chevron-left"></i></span>
</a>
<a class="carousel-control-next" href="#carousel-projets" data-slide="next">
<span class="carousel-control-next-icon"><i class="fas fa-chevron-right"></i></span>
</a>
</div>
</div>
</div>
</section>
<!--------------------------------------CONTACT SECTION-------------------------------------->
<section id="contact">
<div class="container">
<div class="section-title">
<h1>Contactez <span class="accent-text">Moi</span></h1>
</div>
<div class="row center-xs center-sm center-md center-lg">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="contact-info">
<div class="contact-block">
<i class="fas fa-mobile-alt"></i>
<div class="contact-text">
<p>Numéro :</p>
<p>+33637290170</p>
</div>
</div>
<div class="contact-block">
<i class="far fa-envelope"></i>
<div class="contact-text">
<p>Email : </p>
<p>nicolas.riault@gmail.com</p>
</div>
</div>
<div class="contact-block">
<i class="fas fa-location-arrow"></i>
<div class="contact-text">
<p>
Addresse :
</p>
<p>
90 boulevard de la butte
72230 - Mulsanne
</p>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<form id="contact-form" onsubmit="submitForm(); return false;">
<div class="field">
Nom<br>
<input type="text" id="name" value="" required>
</div>
<div class="field">
Email<br>
<input type="text" id="email" value="" required>
</div>
<div class="field">
Sujet<br>
<input type="text" id="subject" value="" required>
</div>
<div class="field">
Message<br>
<textarea id="message" rows="10" cols="75"
required></textarea>
</div>
<div class="field">
<input type="submit" id="contact-submit" value="Envoyer"><span id="status"></span>
</div>
</form>
</div>
</div>
</div>
</section>
<!--------------------------------------MODALES LIST-------------------------------------->
<div class="modal fade" id="modalServeurcom" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Développeur Full Stack - Serveurcom</h5>
</div>
<div class="modal-body">
<p>
Reprise en interne puis maintenance évolutive d'une application de facturation
Télécom développée par un prestataire externe.<br>
Développements de plusieurs briques dont une refonte visuelle complète de
l'application et la création de tableaux de bords complets dans le but de suivre
l'activité de l'entreprise mais aussi permettre aux revendeurs de suivre leur
activité.<br>
Responsable de la tenue des performances et de l'optimisation des traitements de
facturation sous SQL Server 2014.<br>
Rédaction de spécifications fonctionnelles pour les évolutions, définition de
roadmap pour planifier les besoins, macro gestion de l'équipe de développeurs et
organisation de daily meetings pour gérer lactivité de l'équipe de développement.<br>
Mise en place de JIRA pour gérer les taches de l'équipe.<br>
<br>
Formation Microsoft 55144B : "SQL Server 2014 Performance Tuning and
Optimization"
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalCapgemini" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Consultant SI - Capgémini</h5>
</div>
<div class="modal-body">
<p>
Projet de TMA pour le groupe La Poste, Développeur référent <br>
- 6 applications php, sous framework CakePhp<br>
- 3 applications MSBI/Asp.NET ( SSAS, SSRS, SSIS)<br>
- Outre le développement pur, j'ai régulièrement réalisé les conceptions techniques, la mise à jour
des spécifications fonctionnelles, mais aussi la rédaction et le passage des campagnes de tests sous
quality center.<br>
-Communication régulière avec le client<br><br>
TMA pour le ministère des sports.<br>
- Développeur en support pour 2 applications .NET/MSBI pour le ministère des sports.<br>
- Réalisation de conception techniques, mise à jour des spécifications fonctionnelles, rédaction et
passage des campagnes de tests sous quality center.<br><br>
Développeur - Projet de TMA pour l'ANR.<br>
- Maintenance et évolution d'une application de gestion des demandes
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
<script src="js/libs/particles-conf.js"></script>
{/block}

View File

@ -0,0 +1,40 @@
{extends '../../../../../module/Application/view/layout/layout.tpl'}
{block 'content'}
<header id="vault-header">
<div class="header-wrapper">
<a class="navbar-brand" href="/vault">
<img src="img/texte-logo.png">
</a>
</div>
</header>
<link href="css/vault.css" type="text/css" rel="stylesheet"/>
<section class="contact-wrap">
<form class="material-form" onsubmit="return genpass();">
<div class="input-block floating-field">
<label>Url du site</label>
<input value="" class="form-control" name="url" type="url" id="url" required>
</div>
<div class="input-block floating-field">
<label>Votre mot de passe pour encoder</label>
<input name="salt" type="password" class="form-control" id="salt" required/>
</div>
<div class="input-block floating-field">
<label>Taille</label>
<input name="maxchars" type="number" class="form-control" value="10" id="maxchars" required/>
</div>
<button class="btn square-button material-btn d-sm-none">Générer</button>
<button class="btn square-button material-btn d-none d-sm-block">Générer votre mot de passe sécurisé</button>
<p class="result">
<label for="resAlNum">Alphanumérique</label>
<input name="resAlNum" class="feedback-input" type="text" class="" id="resAlNum" disabled/>
<label for="resAlNumSpe">Alphanumérique + Spé</label>
<input name="resAlNumSpe" class="feedback-input" type="text" class="" id="resAlNumSpe" disabled/>
</p>
</form>
</section>
<script src="js/libs/sha512.js"></script>
<script src="js/vault.js"></script>
{/block}