Verified Commit 97d7eb6f authored by Thibaut Broggi's avatar Thibaut Broggi
Browse files

Add fonts selector

parent 44da5be7
...@@ -19,6 +19,7 @@ let draw = function() { ...@@ -19,6 +19,7 @@ let draw = function() {
let bgColor = document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value; let bgColor = document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value;
let fgColor = document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value; let fgColor = document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value;
let fillText = document.getElementById('step2value').value.trim(); let fillText = document.getElementById('step2value').value.trim();
let font = document.querySelector('#step3 input[type="radio"]:checked').value;
let signature = document.getElementById('signature').value.trim(); let signature = document.getElementById('signature').value.trim();
// Clear canvas // Clear canvas
...@@ -30,7 +31,7 @@ let draw = function() { ...@@ -30,7 +31,7 @@ let draw = function() {
ctx.fill(); ctx.fill();
// Write text // Write text
ctx.font = fontSize + 'px Arial'; ctx.font = fontSize + 'px ' + font;
ctx.fillStyle = 'white'; ctx.fillStyle = 'white';
ctx.textBaseline = 'top'; ctx.textBaseline = 'top';
ctx.fillText('Internet,', width * 0.08, height * 0.2); ctx.fillText('Internet,', width * 0.08, height * 0.2);
...@@ -67,7 +68,7 @@ let draw = function() { ...@@ -67,7 +68,7 @@ let draw = function() {
ctx.fillText('La Quadrature du Net !', offset, height * 0.9); ctx.fillText('La Quadrature du Net !', offset, height * 0.9);
} }
let bgColorElems = document.querySelectorAll('.colorpicker input[type="radio"]'); let bgColorElems = document.querySelectorAll('.colorpicker input[type="radio"], #step3 input[type="radio"]');
let i; let i;
for (i in bgColorElems) { for (i in bgColorElems) {
......
...@@ -142,9 +142,17 @@ ...@@ -142,9 +142,17 @@
<div id="step3"> <div id="step3">
<h2>Choisissez votre police</h2> <h2>Choisissez votre police</h2>
<div> <div>
<input type="radio" id="radio-font-1" name="font" value="1" /><label for="radio-font-1">Font 1</label> <input type="radio" id="radio-font-1" name="font" value="bilbo-inc" /><label for="radio-font-1" style="font-family: bilbo-inc">Bilbo inc</label>
<input type="radio" id="radio-font-2" name="font" value="2" checked/><label for="radio-font-2">Font 2</label> <input type="radio" id="radio-font-2" name="font" value="bluu-next" checked/><label for="radio-font-2" style="font-family: bluu-next">Bluu Next</label>
<input type="radio" id="radio-font-3" name="font" value="3" /><label for="radio-font-3">Font 3</label> <input type="radio" id="radio-font-3" name="font" value="boeticher" /><label for="radio-font-3" style="font-family: boeticher">Boeticher</label>
<input type="radio" id="radio-font-4" name="font" value="combat" /><label for="radio-font-4" style="font-family: combat">Combat</label>
<input type="radio" id="radio-font-5" name="font" value="gulax" /><label for="radio-font-5" style="font-family: gulax">Gulax</label>
<input type="radio" id="radio-font-6" name="font" value="lineal" /><label for="radio-font-6" style="font-family: lineal">Lineal</label>
<input type="radio" id="radio-font-7" name="font" value="resistance" /><label for="radio-font-7" style="font-family: resistance">Resistance</label>
<input type="radio" id="radio-font-8" name="font" value="savate" /><label for="radio-font-8" style="font-family: savate">Savate</label>
<input type="radio" id="radio-font-9" name="font" value="solid-mirage" /><label for="radio-font-9" style="font-family: solid-mirage">Solid Mirage</label>
<input type="radio" id="radio-font-10" name="font" value="steps-mono" /><label for="radio-font-10" style="font-family: steps-mono">Steps-Mono</label>
<input type="radio" id="radio-font-11" name="font" value="terminal" /><label for="radio-font-11" style="font-family: terminal">Terminal</label>
</div> </div>
<div class="navButtons"> <div class="navButtons">
<a href="#step2" class="prevButton">&lsaquo;</a> <a href="#step2" class="prevButton">&lsaquo;</a>
......
...@@ -189,3 +189,80 @@ textarea, input[type="text"] { ...@@ -189,3 +189,80 @@ textarea, input[type="text"] {
border: none; border: none;
resize: none; resize: none;
} }
@font-face {
font-family: 'bilbo-inc';
src: url('/fonts/BilboINC.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bluu-next';
src: url('/fonts/BluuNext-Bold.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'boeticher';
src: url('/fonts/Boeticher-Roman.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'combat';
src: url('/fonts/Combat.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'gulax';
src: url('/fonts/Gulax.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'lineal';
src: url('/fonts/Lineal.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'resistance';
src: url('/fonts/Resistance.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'savate';
src: url('/fonts/savate-regular.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'solid-mirage';
src: url('/fonts/SolideMirageMono.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'steps-mono';
src: url('/fonts/Steps-Mono.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'terminal';
src: url('/fonts/terminal-grotesque_open.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment