Add icon picker

canvas.js

@@ -20,6 +20,7 @@ let draw = function() {
   let fgColor = document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value;
   let fillText = document.getElementById('step2value').value.trim();
   let font = document.querySelector('#step3 input[type="radio"]:checked').value;
+  let icon = document.querySelector('#step4 input[type="radio"]:checked').value;
   let signature = document.getElementById('signature').value.trim();
 
   // Clear canvas
@@ -66,8 +67,8 @@ let draw = function() {
   ctx.fillText('La Quadrature du Net !', offset, height * 0.9);
 
   //Draw picto
-  get('./imgs/1.svg', function(res) {
-    let img = new Image;
+  get('./imgs/' + icon + '.svg', function(res) {
+    let img = new Image();
     let imgXml = res.replace(/#FFD201/g, fgColor);
     img.src = 'data:image/svg+xml;base64,' + btoa(imgXml);
     img.addEventListener('load', function() {
@@ -77,7 +78,7 @@ let draw = function() {
   });
 }
 
-let bgColorElems = document.querySelectorAll('.colorpicker input[type="radio"], #step3 input[type="radio"]');
+let bgColorElems = document.querySelectorAll('.colorpicker input[type="radio"], #step3 input[type="radio"], #step4 input[type="radio"]');
 for (let i = 0; i < bgColorElems.length; ++i) {
   bgColorElems[i].onchange = draw;
 }

index.html

@@ -162,6 +162,34 @@
       </div>
       <div id="step4">
 	<h2>Choisissez votre icône</h2>
+	<div class="container">
+	  <div class="row">
+	    <input type="radio" id="radio-icon-1" name="icon" value="1" checked/>
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-1">1</label>
+	    <input type="radio" id="radio-icon-2" name="icon" value="2" />
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-2">2</label>
+	    <input type="radio" id="radio-icon-3" name="icon" value="3" />
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-3">3</label>
+	    <input type="radio" id="radio-icon-4" name="icon" value="4" />
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-4">4</label>
+	    <input type="radio" id="radio-icon-5" name="icon" value="5" />
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-5">5</label>
+	    <input type="radio" id="radio-icon-6" name="icon" value="6" />
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-6">6</label>
+	    <input type="radio" id="radio-icon-7" name="icon" value="7" />
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-7">7</label>
+	    <input type="radio" id="radio-icon-8" name="icon" value="8" />
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-8">8</label>
+	    <input type="radio" id="radio-icon-9" name="icon" value="9" />
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-9">9</label>
+	    <input type="radio" id="radio-icon-10" name="icon" value="10" />
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-10">10</label>
+	    <input type="radio" id="radio-icon-11" name="icon" value="11" />
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-11">11</label>
+	    <input type="radio" id="radio-icon-12" name="icon" value="12" />
+	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-12">12</label>
+	  </div>
+	</div>
 	<div class="navButtons">
 	  <a href="#step3" class="prevButton">&lsaquo;</a>
 	  <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>

style.css

@@ -170,13 +170,15 @@ div#step2 > textarea {
   padding: 20px;
 }
 
-div#step3 > div:nth-of-type(1) {
+div#step3 > div:nth-of-type(1),
+div#step4 > div:nth-of-type(1) {
   margin-left: 10%;
   width: 80%;
   background-color: #ebf3ff;
 }
 
-div#step3 > div:nth-of-type(1) > input[type="radio"] {
+div#step3 > div:nth-of-type(1) > input[type="radio"],
+div#step4 input[type="radio"] {
   display: none;
 }
 
@@ -188,10 +190,15 @@ div#step3 > div:nth-of-type(1) > input[type="radio"] + label {
   padding-right: 20px;
 }
 
-div#step3 > div:nth-of-type(1) > input[type="radio"]:checked + label {
+div#step4 input[type="radio"] + label {
+  font-size: 2.4em;
+  text-align: center;
+}
+
+div#step3 > div:nth-of-type(1) > input[type="radio"]:checked + label,
+div#step4 input[type="radio"]:checked + label {
   color: #ebf3ff;
   background-color: #497ed5;
-
 }
 
 div#step5 > input[type="text"]#signature {