notBrad/keygen
1
0
Fork 0
mirror of https://github.com/ervanalb/keygen.git synced 2025-12-14 20:35:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

add some swanky css

Browse Source
This commit is contained in:
Eric Van Albert
2017-06-24 01:40:49 -04:00
parent 292b318afb
commit bdec717d04
6 changed files with 224 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
web/css/main.css Normal file
View File

@@ -0,0 +1,150 @@
body {
margin:1em auto;
max-width:40em;
padding:0 .62em;
font:1.2em/1.62 sans-serif;
color: #ffffff;
background-color: #000000;
}
a {
color: #e2bd00;
}
a:active {
color: #eeeeee;
}
a:visited {
color: #725f00;
}
#main {
background-color: #333333;
padding: 1em;
border-radius: 0.3em;
min-height: 25em;
}
#main:after {
content: "";
display: table;
clear: both;
}
#nav {
margin-top: .3em;
float: right;
}
#nav p {
margin: 0;
}
h1 {
margin: 0;
margin-bottom: .5em;
line-height: 1.2em;
}
h1 img {
height: 1em;
width: 1em;
vertical-align: middle;
margin-right: 0.15em;
margin-bottom: 0.1em;
}
@media print{
body{
max-width:none
}
}
#description {
margin-top: 3em;
}
#description strong {
display: block;
}
#parameters {
display: block;
width:50%;
min-width: 15em;
float:left;
}
#key_form {
display: block;
margin: 1em;
max-width: 15em;
}
.field select, .field input {
background-color: #222222;
color: #ffffff;
border: 1px solid #ffffff;
font-size: 0.7em;
padding: 0.3em;
}
#key_description {
font-size: .7em;
margin-bottom: 1em;
}
.field {
margin-bottom: 1em;
}
.field_label {
text-transform: uppercase;
font-size: .7em;
color: #cccccc;
}
#result {
width:50%;
float:left;
text-align: center;
}
#generate_button {
display: block;
padding: 1em;
width: 100%;
text-transform: uppercase;
background-color: #e2bd00;
font-weight: bold;
color: #333333;
border: none;
border-radius: 0.5em;
}
#generate_button:disabled {
background-color: #877a38;
}
#generate_button:active {
background-color: #bd9e00;
}
#please_wait {
margin-top: 5em;
}
#generated_key {
}
#key_preview {
margin: auto;
width: 10em;
height: 20em;
background-color: red;
}
#about {
font-size: 0.8em;
}

BIN
web/img/logo_small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

27
web/index.htm
View File

@@ -1,27 +0,0 @@
<html>
<head>
<title>keygen</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/STLLoader.js"></script>
<script type="text/javascript" src="js/3d_preview.js"></script>
<script type="text/javascript" src="js/keygen.js"></script>
</head>
<body>
<h1>keygen</h1>
<p id="byline">by <a href="https://github.com/ervanalb/keygen">ervanalb</a></p>
<form id="key_form">
<div>Type: <select id="key_type"></select></div>
<div>Outline: <select id="key_outline"></select></div>
<div>Warding: <select id="key_warding"></select></div>
<div id="key_description"></div>
<div>Bitting: <input id="key_bitting"></input></div>
<input type="submit" value="Generate" id="generate_button"></input>
</form>
<div id="please_wait" style="display:none;">Please wait...</div>
<div id="generated_key" style="display:none;">
<div id="key_preview" style="width:200px; height:400px;"></div>
<a id="key_download" href="#">Download</a>
</div>
</body>
</html>

57
web/index.html Normal file
View File

@@ -0,0 +1,57 @@
<html>
<head>
<title>keygen</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/STLLoader.js"></script>
<script type="text/javascript" src="js/3d_preview.js"></script>
<script type="text/javascript" src="js/keygen.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="main">
<div id="nav">
<a href="#about" id="about_link">about</a>
</div>
<h1 id="title"><img src="img/logo_small.png"></img>keygen</h1>
<div id="content">
<div id="generator">
<div id="parameters">
<form id="key_form">
<div class="field"><div class="field_label">Type</div><select id="key_type"></select></div>
<div class="field"><div class="field_label">Outline</div><select id="key_outline"></select></div>
<div class="field"><div class="field_label">Warding</div><select id="key_warding"></select></div>
<div id="key_description"></div>
<div class="field"><div class="field_label">Bitting</div><input id="key_bitting"></input></div>
<input type="submit" value="Generate" id="generate_button"></input>
</form>
</div>
<div id="result">
<div id="description">
<div>keygen generates</div>
<div>working, high-quality</div>
<strong>3D-printable models of keys</strong>
<div>based on given parameters.</div>
<p>Select a key type to get started.</p>
</div>
<div id="please_wait" style="display:none;">Please wait...</div>
<div id="generated_key" style="display:none;">
<div id="key_preview"></div>
<a id="key_download" href="#">Download STL</a>
</div>
</div>
</div>
<div id="about" style="display:none;">
<p>keygen generates working, high-quality 3D-printable models of keys based on given parameters.</p>
<p>To generate a key, select your key type and shapes. Then, follow the instructions on how to properly enter the bitting.</p>
<p>Click <strong>Download STL</strong> to save your key in a format suitable for 3D printing at e.g. <a href="https://shapeways.com">shapeways</a>.</p>
<p>This site is simply a web interface to <em>keygen</em>, a light wrapper around OpenSCAD. You can download and use this tool offline if you so desire.</p>
<p>If you need to generate a large number of keys, please download and run this tool locally. It eases load on the server, and will be faster and more flexible.</p>
<p>Contributions of key types and shapes are always welcome. Direct any comments or questions to <a href="https://github.com/ervanalb/keygen">the github project</a>.</p>
<p><em>~ervanalb</em></p>
<a href="#">close</a>
</div>
</div>
</div>
</body>
</html>

2
web/js/3d_preview.js
View File

@@ -45,7 +45,7 @@ function preview_init() {
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0xFFFFFF );
renderer.setClearColor( 0x333333 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( container.offsetWidth, container.offsetHeight );

16
web/js/keygen.js
View File

@@ -47,6 +47,7 @@ function populate_outlines_wardings() {
function generate_key() {
$("#generated_key").hide();
$("#generate_button").prop("disabled", true);
$("#description").hide();
$("#please_wait").show();
get_data = $.param({
"key": $("#key_type").val(),
@@ -81,10 +82,25 @@ function generate_key() {
xhr.send();
}
function handle_hash() {
hash = window.location.hash;
if(hash == "#about") {
$("#generator").hide();
$("#about").show();
$("#about_link").hide();
} else {
$("#about").hide();
$("#generator").show();
$("#about_link").show();
}
}
$(document).ready(function() {
$("#key_type").on("change", populate_outlines_wardings);
$("#key_form").submit(function(e) {generate_key(); e.preventDefault();});
$(window).on('hashchange', handle_hash);
populate_types();
preview_init();
handle_hash();
});