diff --git a/web/css/main.css b/web/css/main.css new file mode 100644 index 0000000..d93d2a2 --- /dev/null +++ b/web/css/main.css @@ -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; +} diff --git a/web/img/logo_small.png b/web/img/logo_small.png new file mode 100644 index 0000000..a2ced0b Binary files /dev/null and b/web/img/logo_small.png differ diff --git a/web/index.htm b/web/index.htm deleted file mode 100644 index a33b517..0000000 --- a/web/index.htm +++ /dev/null @@ -1,27 +0,0 @@ - - -keygen - - - - - - - -

keygen

-

by ervanalb

-
-
Type:
-
Outline:
-
Warding:
-
-
Bitting:
- -
- - - - diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..3a15d2a --- /dev/null +++ b/web/index.html @@ -0,0 +1,57 @@ + + +keygen + + + + + + + + +
+ +

keygen

+
+
+
+
+
Type
+
Outline
+
Warding
+
+
Bitting
+ +
+
+
+
+
keygen generates
+
working, high-quality
+ 3D-printable models of keys +
based on given parameters.
+

Select a key type to get started.

+
+ + +
+
+ +
+
+ + diff --git a/web/js/3d_preview.js b/web/js/3d_preview.js index 1f8d36f..cf3550b 100644 --- a/web/js/3d_preview.js +++ b/web/js/3d_preview.js @@ -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 ); diff --git a/web/js/keygen.js b/web/js/keygen.js index d9368cb..8c0e30f 100644 --- a/web/js/keygen.js +++ b/web/js/keygen.js @@ -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(); });