2015-03-16 15:36:07 +01:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
2015-03-16 16:28:20 +01:00
|
|
|
|
{include="includes/header"}
|
2015-03-16 15:36:07 +01:00
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Primary Page Layout
|
|
|
|
|
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="header">
|
|
|
|
|
|
<h1>Password Card Generator</h1>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
This website allows you to generate customized password cards in
|
|
|
|
|
|
the spirit of <a href="https://www.qwertycards.com" target="_blank">Qwertycards.com</a>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
If you like the concept, please buy a card from their <a href="https://www.qwertycards.com" target="_blank">website</a>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<img src="resources/cards.png" width="100%">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="configure">
|
|
|
|
|
|
<h1>Generate a new card</h1>
|
|
|
|
|
|
<p>Pick the characters you want to use</p>
|
|
|
|
|
|
<form action="" method="POST" accept-charset="ISO-8859-15">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<input type="checkbox" name="with-numbers" id="with-numbers" class="hidden" autocomplete="off" checked>
|
|
|
|
|
|
<label for="with-numbers" class="label-with-numbers button tooltip" title="0123456789">numbers</label>
|
|
|
|
|
|
|
|
|
|
|
|
<input type="checkbox" name="with-lower" id="with-lower" class="hidden" autocomplete="off" checked>
|
|
|
|
|
|
<label for="with-lower" class="label-with-lower button tooltip" title="abcdefghijklmnopqrstuvwxyz">lower case</label>
|
|
|
|
|
|
|
|
|
|
|
|
<input type="checkbox" name="with-upper" id="with-upper" class="hidden" autocomplete="off" checked>
|
|
|
|
|
|
<label for="with-upper" class="label-with-upper button tooltip" title="ABCDEFGHIJKLMNOPQRSTUVWXYZ">upper case</label>
|
|
|
|
|
|
|
|
|
|
|
|
<input type="checkbox" name="with-symbols" id="with-symbols" class="hidden" autocomplete="off" checked>
|
|
|
|
|
|
<label for="with-symbols" class="label-with-symbols button tooltip" title="!"#$%&\'()*+,-./:;<=>?@[\]^_`{|}~">symbols</label>
|
|
|
|
|
|
|
|
|
|
|
|
<input type="checkbox" name="with-space" id="with-space" class="hidden" autocomplete="off" >
|
|
|
|
|
|
<label for="with-space" class="label-with-space button">space</label>
|
|
|
|
|
|
|
|
|
|
|
|
<input type="checkbox" name="with-other" id="with-other" class="hidden" autocomplete="off" >
|
|
|
|
|
|
<label for="with-other" class="label-with-other button tooltip" title="anything else?">other</label>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row" style="display: none; ">
|
|
|
|
|
|
<input type="text" id="other-chars" name="other-chars" placeholder="Place other symbols in here" maxlength="20" autocomplete="off"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row" style="margin-top: 30px;">
|
|
|
|
|
|
<p>What's your Keyboard layout?</p>
|
|
|
|
|
|
<select type="text" name="keyboardlayout">
|
2016-03-24 15:47:07 +01:00
|
|
|
|
<option value="azerty">AZERTY</option>
|
2015-03-16 15:36:07 +01:00
|
|
|
|
<option value="qwerty">QWERTY</option>
|
|
|
|
|
|
<option value="qwertz">QWERTZ</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row" style="margin-top: 30px;">
|
|
|
|
|
|
<p>This text goes on the back of your card</p>
|
|
|
|
|
|
<input type="text" name="msg" placeholder="For Work" maxlength="20" autocomplete="off">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row" style="margin-top: 30px;">
|
|
|
|
|
|
<p>What colors shall we use?</p>
|
|
|
|
|
|
<label for="primaryColor">Primary</label>
|
|
|
|
|
|
<div id="primary" class="colorPicker">
|
|
|
|
|
|
<a class="color"><div class="colorInner"></div></a>
|
|
|
|
|
|
<div class="track"></div>
|
|
|
|
|
|
<ul class="dropdown"><li></li></ul>
|
|
|
|
|
|
<input type="hidden" class="colorInput" value='#1ABC9C' name='primaryColor' id='primaryColor' autocomplete="off"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<label for="secondaryColor">Secondary</label>
|
|
|
|
|
|
<div id="secondary" class="colorPicker">
|
|
|
|
|
|
<a class="color"><div class="colorInner"></div></a>
|
|
|
|
|
|
<div class="track"></div>
|
|
|
|
|
|
<ul class="dropdown"><li></li></ul>
|
|
|
|
|
|
<input type="hidden" class="colorInput" value='#ffff' name='secondaryColor' id='secondaryColor' autocomplete="off"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row" style="margin-top: 30px; text-align: center;">
|
|
|
|
|
|
<p id="advancedOptionsLabel"><span id="showMoreOptions">Show</span><span id="hideMoreOptions">Hide</span> more options....</p>
|
|
|
|
|
|
<div id="advancedOptions">
|
|
|
|
|
|
<label for="seed" class="tooltip" title="using seeds allows you to reproduce cards">Seed</label><br>
|
|
|
|
|
|
<input type="text" id="seed" name="seed" placeholder="Seed" maxlength="10" autocomplete="off">
|
|
|
|
|
|
<label for="space-size">Spacebar size</label>
|
|
|
|
|
|
<input type="number" min="1" max="8" style="width: 15em;" name="space-length" id="space-size" placeholder="Spacebar size (Default: 8)" maxlength="10" autocomplete="off">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<input type="hidden" value='{{sessiontoken}}'/>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row" style="margin-top: 30px; text-align: center;">
|
|
|
|
|
|
<input type="submit" value="Generate PDF!"/><br>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
<p>Wanna buy a card? Checkout <a href="https://www.qwertycards.com" target="_blank">qwertycards.com</a>!</p>
|
|
|
|
|
|
<p>Fork me on <a href="https://github.com/raphiz/passwordcards" target="_blank">Github</a>!</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="resources/js/jquery-2.1.3.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="resources/js/jquery.tinycolorpicker.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="resources/js/index.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- End Document
|
|
|
|
|
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
