Commit cee4298a authored by Luc Didry's avatar Luc Didry
Browse files

Allow to save, show, load, download and delete stickers in a gallery

parent f2fa3410
......@@ -17,3 +17,10 @@ canvas, #svg {
display: block !important;
}
}
.card {
float: left;
width: 33.333%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
}
.row,.buttons a{margin-top:1rem}.row.buttons{margin-top:0}canvas,#svg{margin-left:auto;margin-right:auto}@media print{nav.navbar,nav.sidebar,#settings,.controls{display:none!important}#canvas{display:block!important}}
\ No newline at end of file
.row,.buttons a{margin-top:1rem}.row.buttons{margin-top:0}canvas,#svg{margin-left:auto;margin-right:auto}@media print{nav.navbar,nav.sidebar,#settings,.controls{display:none!important}#canvas{display:block!important}}.card{float:left;width:33.333%;padding:.75rem;margin-bottom:2rem;border:0}
\ No newline at end of file
......@@ -28,6 +28,7 @@
<a class="dropdown-item" href="#" data-setting="set-fonts">Fonts</a>
<a class="dropdown-item" href="#" data-setting="set-positions">Positions</a>
<a class="dropdown-item" href="#" data-setting="set-img-size">Image size</a>
<a class="dropdown-item" href="#" data-setting="gallery">Gallery</a>
</div>
</li>
<li class="nav-item">
......@@ -85,389 +86,401 @@
<li class="nav-item">
<a class="nav-link" href="#" data-setting="set-img-size">Image size</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-setting="gallery">Gallery</a>
</li>
</ul>
</nav>
</div>
<main class="col ml-sm-auto col-md-10 pt-3">
<noscript>You need Javascript to use this tool!</noscript>
<div class="row text-center controls">
<div class="col-md-4 col-sm-12 form-group">
<label for="wemake">First line</label>
<input id="wemake" placeholder="WE MAKE" type="text" value="WE MAKE" class="form-control text-md-right text-center">
</div>
<div class="col-md-4 col-sm-12 form-group">
<label for="porn">Second line</label>
<input id="porn" placeholder="PORN" type="text" value="PORN" autofocus class="form-control text-md-left text-center">
</div>
<div class="col-md-4 col-sm-12 form-group">
<label for="filename">Filename</label>
<input id="filename" placeholder="WE_MAKE_PORN.png" type="text" value="WE_MAKE_PORN.png" class="form-control text-center">
</div>
</div>
<div class="row text-center buttons controls">
<div class="col-md-3 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="toggle-svg">Work with SVG</a>
</div>
<div class="col-md-3 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="download">Download</a>
<div id="main-tool">
<div class="row text-center controls">
<div class="col-md-4 col-sm-12 form-group">
<label for="wemake">First line</label>
<input id="wemake" placeholder="WE MAKE" type="text" value="WE MAKE" class="form-control text-md-right text-center">
</div>
<div class="col-md-4 col-sm-12 form-group">
<label for="porn">Second line</label>
<input id="porn" placeholder="PORN" type="text" value="PORN" autofocus class="form-control text-md-left text-center">
</div>
<div class="col-md-4 col-sm-12 form-group">
<label for="filename">Filename</label>
<input id="filename" placeholder="WE_MAKE_PORN.png" type="text" value="WE_MAKE_PORN.png" class="form-control text-center">
</div>
</div>
<div class="col-md-3 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="reset">Reset to default</a>
<div class="row text-center buttons controls">
<div class="col-md-6 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="download">Download</a>
</div>
<div class="col-md-6 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="reset">Reset to default</a>
</div>
</div>
<div class="col-md-3 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="print">Print</a>
<div class="row text-center buttons controls">
<div class="col-md-4 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="toggle-svg">Work with SVG</a>
</div>
<div class="col-md-4 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="print">Print</a>
</div>
<div class="col-md-4 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="save">Save</a>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-12 col-lg-6 d-none text-left" id="settings">
<div class="row d-none" id="set-corner-shape">
<div class="col-12">
<div class="row">
<label for="corners" class="col-sm-12 col-md-6">Corners shape</label>
<div class="col-sm-12 col-md-6">
<select id="corners" class="form-control">
<option value="20" selected>Rounded corners</option>
<option value="0">Square corners</option>
</select>
<div class="row text-center">
<div class="col-md-12 col-lg-6 d-none text-left" id="settings">
<div class="row d-none" id="set-corner-shape">
<div class="col-12">
<div class="row">
<label for="corners" class="col-sm-12 col-md-6">Corners shape</label>
<div class="col-sm-12 col-md-6">
<select id="corners" class="form-control">
<option value="20" selected>Rounded corners</option>
<option value="0">Square corners</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row d-none" id="set-colors">
<div class="col-12">
<div class="row wemake text-center">
First line
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="wemake-color" class="col-sm-12 col-md-6 color">Color</label>
<div class="col-sm-12 col-md-6">
<input id="wemake-color" type="color" value="#000000" class="form-control">
<div class="row d-none" id="set-colors">
<div class="col-12">
<div class="row wemake text-center">
First line
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="wemake-color" class="col-sm-12 col-md-6 color">Color</label>
<div class="col-sm-12 col-md-6">
<input id="wemake-color" type="color" value="#000000" class="form-control">
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="wemake-alpha" class="col-sm-12 col-md-6 transparency">Transparency</label>
<div class="col-sm-12 col-md-6 input-group">
<input id="wemake-alpha" type="number" min="0" max="100" value="0" class="form-control">
<div class="input-group-addon">%</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="wemake-alpha" class="col-sm-12 col-md-6 transparency">Transparency</label>
<div class="col-sm-12 col-md-6 input-group">
<input id="wemake-alpha" type="number" min="0" max="100" value="0" class="form-control">
<div class="input-group-addon">%</div>
<div class="row porn text-center">
Second line
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="porn-color" class="col-sm-12 col-md-6 color">Color</label>
<div class="col-sm-12 col-md-6">
<input id="porn-color" type="color" value="#000000" class="form-control">
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="porn-alpha" class="col-sm-12 col-md-6 transparency">ransparency</label>
<div class="col-sm-12 col-md-6 input-group">
<input id="porn-alpha" type="number" min="0" max="100" value="0" class="form-control">
<div class="input-group-addon">%</div>
</div>
</div>
</div>
</div>
</div>
<div class="row porn text-center">
Second line
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="porn-color" class="col-sm-12 col-md-6 color">Color</label>
<div class="col-sm-12 col-md-6">
<input id="porn-color" type="color" value="#000000" class="form-control">
<div class="row border-txt text-center">
Border
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="rect-color" class="col-sm-12 col-md-6 color">Color</label>
<div class="col-sm-12 col-md-6">
<input id="rect-color" type="color" value="#000000" class="form-control">
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="rect-alpha" class="col-sm-12 col-md-6 transparency">Transparency</label>
<div class="col-sm-12 col-md-6 input-group">
<input id="rect-alpha" type="number" min="0" max="100" value="0" class="form-control">
<div class="input-group-addon">%</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="porn-alpha" class="col-sm-12 col-md-6 transparency">ransparency</label>
<div class="col-sm-12 col-md-6 input-group">
<input id="porn-alpha" type="number" min="0" max="100" value="0" class="form-control">
<div class="input-group-addon">%</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="row">
<a href="#" id="switch-colors" class="btn btn-info">Switch texts' colors</a>
</div>
</div>
</div>
</div>
<div class="row border-txt text-center">
Border
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="rect-color" class="col-sm-12 col-md-6 color">Color</label>
<div class="col-sm-12 col-md-6">
<input id="rect-color" type="color" value="#000000" class="form-control">
</div>
<div class="row d-none" id="set-fonts">
<div class="col-12">
<div class="row wemake text-center">
First line
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="wemake-font" class="col-sm-12 col-md-6 font">Font</label>
<div class="col-sm-12 col-md-6">
<select id="wemake-font" class="form-control">
<option value="sans-serif">Sans serif</option>
<option value="Comic Spice">Comic Spice</option>
<option value="Comic Neue">Comic Neue</option>
<option value="Hack">Hack</option>
<option value="Open Sans" selected>Open Sans</option>
<option value="Nosifer">Nosifer</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="wemake-font-style" class="col-sm-12 col-md-6 style">Style</label>
<div class="col-sm-12 col-md-6">
<select id="wemake-font-style" class="form-control">
<option value="regular">Regular</option>
<option value="bold" selected>Bold</option>
<option value="italic">Italic</option>
<option value="italic bold">Bold italic</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="wemake-size" class="col-sm-12 col-md-6 text-size">Text size</label>
<div class="col-sm-12 col-md-6">
<input id="wemake-size" type="number" min="1" value="150" class="form-control">
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="rect-alpha" class="col-sm-12 col-md-6 transparency">Transparency</label>
<div class="col-sm-12 col-md-6 input-group">
<input id="rect-alpha" type="number" min="0" max="100" value="0" class="form-control">
<div class="input-group-addon">%</div>
<div class="row porn text-center">
Second line
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="porn-font" class="col-sm-12 col-md-6 font">Font</label>
<div class="col-sm-12 col-md-6">
<select id="porn-font" class="form-control">
<option value="sans-serif">Sans serif</option>
<option value="Comic Spice">Comic Spice</option>
<option value="Comic Neue">Comic Neue</option>
<option value="Hack">Hack</option>
<option value="Open Sans" selected>Open Sans</option>
<option value="Nosifer">Nosifer</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="porn-font-style" class="col-sm-12 col-md-6 style">Style</label>
<div class="col-sm-12 col-md-6">
<select id="porn-font-style" class="form-control">
<option value="regular">Regular</option>
<option value="bold" selected>Bold</option>
<option value="italic">Italic</option>
<option value="italic bold">Bold italic</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="porn-size" class="col-sm-12 col-md-6 text-size">Text size</label>
<div class="col-sm-12 col-md-6">
<input id="porn-size" type="number" min="1" value="220" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="row">
<a href="#" id="switch-colors" class="btn btn-info">Switch texts' colors</a>
<div class="row border-txt text-center">
Border
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="border-thickness" class="col-sm-12 col-md-6 text-size">Thickness</label>
<div class="col-sm-12 col-md-6">
<input id="border-thickness" type="number" min="0" value="20" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row d-none" id="set-fonts">
<div class="col-12">
<div class="row wemake text-center">
First line
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="wemake-font" class="col-sm-12 col-md-6 font">Font</label>
<div class="col-sm-12 col-md-6">
<select id="wemake-font" class="form-control">
<option value="sans-serif">Sans serif</option>
<option value="Comic Spice">Comic Spice</option>
<option value="Comic Neue">Comic Neue</option>
<option value="Hack">Hack</option>
<option value="Open Sans" selected>Open Sans</option>
<option value="Nosifer">Nosifer</option>
</select>
</div>
<div class="row d-none" id="set-bg">
<div class="col">
<div class="row">
<div class="form-check col text-center">
<label class="form-check-label">
<input id="add-glitter" type="checkbox" class="form-check-input">
<span>Add glitter</span>
</label>
</div>
</div>
<div class="row">
<label for="bg-type" class="col-sm-12 col-md-6">Background type</label>
<div class="col-sm-12 col-md-6">
<select id="bg-type" class="form-control">
<option value="plain" selected>Plain color</option>
<option value="gradient">Gradient color</option>
<option value="rainbow">Rainbow gradient</option>
<option value="img">Image</option>
</select>
</div>
</div>
<div class="row" id="bg-color">
<label for="bgu-color" class="col-sm-12 col-md-6">Background color</label>
<div class="col-sm-12 col-md-6">
<input id="bgu-color" type="color" value="#fcd205" class="form-control">
</div>
</div>
<div class="col-sm-12">
<div class="d-none" id="gradient-settings">
<div class="row">
<label for="wemake-font-style" class="col-sm-12 col-md-6 style">Style</label>
<label for="bgr-color" class="col-sm-12 col-md-6">Begin gradient color</label>
<div class="col-sm-12 col-md-6">
<select id="wemake-font-style" class="form-control">
<option value="regular">Regular</option>
<option value="bold" selected>Bold</option>
<option value="italic">Italic</option>
<option value="italic bold">Bold italic</option>
</select>
<input id="bgr-color" type="color" value="#fcd205" class="form-control">
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="wemake-size" class="col-sm-12 col-md-6 text-size">Text size</label>
<label for="egr-color" class="col-sm-12 col-md-6">End gradient color</label>
<div class="col-sm-12 col-md-6">
<input id="wemake-size" type="number" min="1" value="150" class="form-control">
<input id="egr-color" type="color" value="#FFFFFF" class="form-control">
</div>
</div>
</div>
</div>
<div class="row porn text-center">
Second line
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="porn-font" class="col-sm-12 col-md-6 font">Font</label>
<label for="gr-orientation" class="col-sm-12 col-md-6">Gradient orientation</label>
<div class="col-sm-12 col-md-6">
<select id="porn-font" class="form-control">
<option value="sans-serif">Sans serif</option>
<option value="Comic Spice">Comic Spice</option>
<option value="Comic Neue">Comic Neue</option>
<option value="Hack">Hack</option>
<option value="Open Sans" selected>Open Sans</option>
<option value="Nosifer">Nosifer</option>
<select id="gr-orientation" class="form-control">
<option value="lr" selected>Left to right</option>
<option value="rl">Right to left</option>
<option value="tb">Top to bottom</option>
<option value="bt">Bottom to top</option>
<option value="r">Radial</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row d-none" id="bg-img-settings">
<label for="bg-img" class="col-sm-12 col-md-6">Choose a background image</label>
<div class="col-sm-12 col-md-6">
<select id="bg-img" class="form-control">
<option value="beer" selected>Beer</option>
<option value="glitter">Glitter</option>
<option value="rainbow-flag">Rainbow flag</option>
<option value="sky">Sky</option>
<option value="field">Field</option>
<option value="bridge">Bridge</option>
<option value="telechat">Téléchat</option>
<option value="uyuni">Uyuni</option>
<option value="bark">Tree bark</option>
</select>
</div>
</div>
<div class="row">
<label for="custom-img" class="col-sm-12 col-md-6">Upload a background image</label><br/>
<div class="col-sm-12 col-md-6">
<input type="file" id="custom-img" name="custom-img" class="form-control-file"/>
</div>
</div>
<div class="d-none" id="bg-custom-img-settings">
<div class="row">
<label for="porn-font-style" class="col-sm-12 col-md-6 style">Style</label>
<label for="custom-x" class="col-sm-12 col-md-6">Custom image x position</label>
<div class="col-sm-12 col-md-6">
<select id="porn-font-style" class="form-control">
<option value="regular">Regular</option>
<option value="bold" selected>Bold</option>
<option value="italic">Italic</option>
<option value="italic bold">Bold italic</option>
</select>
<input id="custom-x" type="number" min="0" max="800" value="0" class="form-control">
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="porn-size" class="col-sm-12 col-md-6 text-size">Text size</label>
<label for="custom-y" class="col-sm-12 col-md-6">Custom image y position</label>
<div class="col-sm-12 col-md-6">
<input id="porn-size" type="number" min="1" value="220" class="form-control">
<input id="custom-y" type="number" min="0" max="400" value="0" class="form-control">
</div>
</div>
</div>
</div>
<div class="row border-txt text-center">
Border
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="border-thickness" class="col-sm-12 col-md-6 text-size">Thickness</label>
<label for="custom-size" class="col-sm-12 col-md-6">Custom image size</label>
<div class="col-sm-12 col-md-6">
<input id="border-thickness" type="number" min="0" value="20" class="form-control">
<input id="custom-size" type="number" min="0" step="0.001" value="1.000" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row d-none" id="set-bg">
<div class="col">
<div class="row">
<div class="form-check col text-center">
<label class="form-check-label">
<input id="add-glitter" type="checkbox" class="form-check-input">
<span>Add glitter</span>
</label>
</div>
</div>
<div class="row">
<label for="bg-type" class="col-sm-12 col-md-6">Background type</label>
<div class="col-sm-12 col-md-6">
<select id="bg-type" class="form-control">
<option value="plain" selected>Plain color</option>
<option value="gradient">Gradient color</option>
<option value="rainbow">Rainbow gradient</option>
<option value="img">Image</option>
</select>
<div class="row d-none" id="set-positions">
<div class="col">
<div class="row wemake text-center">
First line
</div>
</div>
<div class="row" id="bg-color">
<label for="bgu-color" class="col-sm-12 col-md-6">Background color</label>
<div class="col-sm-12 col-md-6">
<input id="bgu-color" type="color" value="#fcd205" class="form-control">
</div>
</div>
<div class="d-none" id="gradient-settings">
<div class="row">
<label for="bgr-color" class="col-sm-12 col-md-6">Begin gradient color</label>
<div class="col-sm-12 col-md-6">
<input id="bgr-color" type="color" value="#fcd205" class="form-control">
<label for="wemake-x" class="col-sm-12 col-md-8 x-position">x position</label>
<div class="col-sm-12 col-md-4">
<input id="wemake-x" type="number" min="0" value="400" class="form-control">
</div>
</div>
<div class="row">
<label for="egr-color" class="col-sm-12 col-md-6">End gradient color</label>
<div class="col-sm-12 col-md-6">
<input id="egr-color" type="color" value="#FFFFFF" class="form-control">
<label for="wemake-y" class="col-sm-12 col-md-8 y-position">y position</label>
<div class="col-sm-12 col-md-4">
<input id="wemake-y" type="number" min="0" value="160" class="form-control">
</div>
</div>
<div class="row porn text-center">
Second line
</div>
<div class="row">
<label for="gr-orientation" class="col-sm-12 col-md-6">Gradient orientation</label>
<div class="col-sm-12 col-md-6">
<select id="gr-orientation" class="form-control">
<option value="lr" selected>Left to right</option>
<option value="rl">Right to left</option>
<option value="tb">Top to bottom</option>
<option value="bt">Bottom to top</option>
<option value="r">Radial</option>
</select>
<label for="porn-x" class="col-sm-12 col-md-8 x-position">x position</label>
<div class="col-sm-12 col-md-4">
<input id="porn-x" type="number" min="0" value="400" class="form-control">
</div>
</div>
</div>
<div class="row d-none" id="bg-img-settings">
<label for="bg-img" class="col-sm-12 col-md-6">Choose a background image</label>
<div class="col-sm-12 col-md-6">
<select id="bg-img" class="form-control">
<option value="beer" selected>Beer</option>
<option value="glitter">Glitter</option>
<option value="rainbow-flag">Rainbow flag</option>
<option value="sky">Sky</option>
<option value="field">Field</option>
<option value="bridge">Bridge</option>
<option value="telechat">Téléchat</option>
<option value="uyuni">Uyuni</option>
<option value="bark">Tree bark</option>
</select>
</div>
</div>
<div class="row">