diff options
Diffstat (limited to 'frontend/impattern/index.html')
| -rwxr-xr-x | frontend/impattern/index.html | 340 |
1 files changed, 340 insertions, 0 deletions
diff --git a/frontend/impattern/index.html b/frontend/impattern/index.html new file mode 100755 index 0000000..b26ded5 --- /dev/null +++ b/frontend/impattern/index.html @@ -0,0 +1,340 @@ +<html> +<head> +<link href='http://fonts.googleapis.com/css?family=Orienta|Roboto' rel='stylesheet' type='text/css'> +<link href='css/normalize.css' rel='stylesheet' type='text/css'> +<link href='css/unsemantic-grid-responsive.css' rel='stylesheet' type='text/css'> +<link href='css/impattern-main.css' rel='stylesheet' type='text/css'/> +<link href='css/overlay.css' rel='stylesheet' type='text/css'/> +<link href='css/sketch.css' rel='stylesheet' type='text/css'/> +<link href='css/result.css' rel='stylesheet' type='text/css'/> +<title>imPattern</title> + +</head> +<body> +<div id="top-row" class="grid-100 mobile-grid-100"> + + <div id="impattern" class="grid-50 mobile-grid-50"> + <img src="img/logo.gif"/> + </div> + <div id="sample" class="grid-50 mobile-grid-50"> + </div> +</div> +<hr> +<div class="grid-100 mobile-grid-100" id="choose_your_pattern"> + <b>FIRST:</b> Choose your pattern: +</div> +</br> +<table class="dithertable" id="dithertable"> +<tr> +<!--{{{--> +<td class='patterns' style='background-image:url(patterns/1.png)' id='dither_1'> </td> +<td class='patterns' style='background-image:url(patterns/10.png)' id='dither_10'> </td> +<td class='patterns' style='background-image:url(patterns/11.png)' id='dither_11'></td> +<td class='patterns' style='background-image:url(patterns/12.png)' id='dither_12'></td> +<td class='patterns' style='background-image:url(patterns/13.png)' id='dither_13'></td> +<td class='patterns' style='background-image:url(patterns/14.png)' id='dither_14'></td> +<td class='patterns' style='background-image:url(patterns/15.png)' id='dither_15'></td> +<td class='patterns' style='background-image:url(patterns/16.png)' id='dither_16'></td> +<td class='patterns' style='background-image:url(patterns/17.png)' id='dither_17'></td> +<td class='patterns' style='background-image:url(patterns/18.png)' id='dither_18'></td> +<td class='patterns' style='background-image:url(patterns/19.png)' id='dither_19'></td> +<td class='patterns' style='background-image:url(patterns/2.png)' id='dither_2'></td> +<td class='patterns' style='background-image:url(patterns/20.png)' id='dither_20'></td> +<td class='patterns' style='background-image:url(patterns/21.png)' id='dither_21'></td> +<td class='patterns' style='background-image:url(patterns/22.png)' id='dither_22'></td> +<td class='patterns' style='background-image:url(patterns/23.png)' id='dither_23'></td> +<td class='patterns' style='background-image:url(patterns/24.png)' id='dither_24'></td> +<td class='patterns' style='background-image:url(patterns/25.png)' id='dither_25'></td> +<td class='patterns' style='background-image:url(patterns/26.png)' id='dither_26'></td> +<td class='patterns' style='background-image:url(patterns/27.png)' id='dither_27'></td> +<td class='patterns' style='background-image:url(patterns/28.png)' id='dither_28'></td> +<td class='patterns' style='background-image:url(patterns/29.png)' id='dither_29'></td> +<td class='patterns' style='background-image:url(patterns/3.png)' id='dither_3'></td> +<td class='patterns' style='background-image:url(patterns/30.png)' id='dither_30'></td> +</tr> +<tr> +<td class='patterns' style='background-image:url(patterns/31.png)' id='dither_31'></td> +<td class='patterns' style='background-image:url(patterns/32.png)' id='dither_32'></td> +<td class='patterns' style='background-image:url(patterns/33.png)' id='dither_33'></td> +<td class='patterns' style='background-image:url(patterns/34.png)' id='dither_34'></td> +<td class='patterns' style='background-image:url(patterns/35.png)' id='dither_35'></td> +<td class='patterns' style='background-image:url(patterns/36.png)' id='dither_36'></td> +<td class='patterns' style='background-image:url(patterns/37.png)' id='dither_37'></td> +<td class='patterns' style='background-image:url(patterns/38.png)' id='dither_38'></td> +<td class='patterns' style='background-image:url(patterns/39.png)' id='dither_39'></td> +<td class='patterns' style='background-image:url(patterns/4.png)' id='dither_4'></td> +<td class='patterns' style='background-image:url(patterns/40.png)' id='dither_40'></td> +<td class='patterns' style='background-image:url(patterns/41.png)' id='dither_41'></td> +<td class='patterns' style='background-image:url(patterns/42.png)' id='dither_42'></td> +<td class='patterns' style='background-image:url(patterns/43.png)' id='dither_43'></td> +<td class='patterns' style='background-image:url(patterns/44.png)' id='dither_44'></td> +<td class='patterns' style='background-image:url(patterns/45.png)' id='dither_45'></td> +<td class='patterns' style='background-image:url(patterns/46.png)' id='dither_46'></td> +<td class='patterns' style='background-image:url(patterns/47.png)' id='dither_47'></td> +<td class='patterns' style='background-image:url(patterns/48.png)' id='dither_48'></td> +<td class='patterns' style='background-image:url(patterns/49.png)' id='dither_49'></td> +<td class='patterns' style='background-image:url(patterns/5.png)' id='dither_5'></td> +<td class='patterns' style='background-image:url(patterns/50.png)' id='dither_50'></td> +<td class='patterns' style='background-image:url(patterns/51.png)' id='dither_51'></td> +<td class='patterns' style='background-image:url(patterns/52.png)' id='dither_52'></td> +</tr> +<tr> + +<td class='patterns' style='background-image:url(patterns/53.png)' id='dither_53'></td> +<td class='patterns' style='background-image:url(patterns/54.png)' id='dither_54'></td> +<td class='patterns' style='background-image:url(patterns/55.png)' id='dither_55'></td> +<td class='patterns' style='background-image:url(patterns/56.png)' id='dither_56'></td> +<td class='patterns' style='background-image:url(patterns/57.png)' id='dither_57'></td> +<td class='patterns' style='background-image:url(patterns/58.png)' id='dither_58'></td> +<td class='patterns' style='background-image:url(patterns/59.png)' id='dither_59'></td> +<td class='patterns' style='background-image:url(patterns/6.png)' id='dither_6'></td> +<td class='patterns' style='background-image:url(patterns/60.png)' id='dither_60'></td> + +<td class='patterns' style='background-image:url(patterns/61.png)' id='dither_61'></td> +<td class='patterns' style='background-image:url(patterns/62.png)' id='dither_62'></td> +<td class='patterns' style='background-image:url(patterns/63.png)' id='dither_63'></td> +<td class='patterns' style='background-image:url(patterns/64.png)' id='dither_64'></td> +<td class='patterns' style='background-image:url(patterns/65.png)' id='dither_65'></td> +<td class='patterns' style='background-image:url(patterns/66.png)' id='dither_66'></td> +<td class='patterns' style='background-image:url(patterns/67.png)' id='dither_67'></td> +<td class='patterns' style='background-image:url(patterns/68.png)' id='dither_68'></td> +<td class='patterns' style='background-image:url(patterns/69.png)' id='dither_69'></td> +<td class='patterns' style='background-image:url(patterns/7.png)' id='dither_7'></td> +<td class='patterns' style='background-image:url(patterns/70.png)' id='dither_70'></td> +<td class='patterns' style='background-image:url(patterns/71.png)' id='dither_71'></td> +<td class='patterns' style='background-image:url(patterns/72.png)' id='dither_72'></td> +<td class='patterns' style='background-image:url(patterns/73.png)' id='dither_73'></td> +<td class='patterns' style='background-image:url(patterns/74.png)' id='dither_74'></td> +</tr> +<tr> +<td class='patterns' style='background-image:url(patterns/75.png)' id='dither_75'></td> +<td class='patterns' style='background-image:url(patterns/76.png)' id='dither_76'></td> +<td class='patterns' style='background-image:url(patterns/77.png)' id='dither_77'></td> +<td class='patterns' style='background-image:url(patterns/78.png)' id='dither_78'></td> +<td class='patterns' style='background-image:url(patterns/79.png)' id='dither_79'></td> +<td class='patterns' style='background-image:url(patterns/8.png)' id='dither_8'></td> +<td class='patterns' style='background-image:url(patterns/80.png)' id='dither_80'></td> +<td class='patterns' style='background-image:url(patterns/81.png)' id='dither_81'></td> +<td class='patterns' style='background-image:url(patterns/82.png)' id='dither_82'></td> +<td class='patterns' style='background-image:url(patterns/83.png)' id='dither_83'></td> +<td class='patterns' style='background-image:url(patterns/84.png)' id='dither_84'></td> +<td class='patterns' style='background-image:url(patterns/85.png)' id='dither_85'></td> +<td class='patterns' style='background-image:url(patterns/86.png)' id='dither_86'></td> +<td class='patterns' style='background-image:url(patterns/87.png)' id='dither_87'></td> +<td class='patterns' style='background-image:url(patterns/88.png)' id='dither_88'></td> +<td class='patterns' style='background-image:url(patterns/89.png)' id='dither_89'></td> +<td class='patterns' style='background-image:url(patterns/9.png)' id='dither_9'></td> +<td class='patterns' style='background-image:url(patterns/90.png)' id='dither_90'></td> +<td class='patterns' style='background-image:url(patterns/91.png)' id='dither_91'></td> +<td class='patterns' style='background-image:url(patterns/92.png)' id='dither_92'></td> +<td class='patterns' style='background-image:url(patterns/93.png)' id='dither_93'></td> +<td class='patterns' style='background-image:url(patterns/94.png)' id='dither_94'></td> +<td class='patterns' style='background-image:url(patterns/95.png)' id='dither_95'></td> +<td class='patterns' style='background-image:url(patterns/96.png)' id='dither_96'></td> + +</tr> +<tr> +<td class='patterns' style='background-image:url(patterns/a0.png)' id='dither_a0'></td> +<td class='patterns' style='background-image:url(patterns/a1.png)' id='dither_a1'></td> +<td class='patterns' style='background-image:url(patterns/a10.png)' id='dither_a10'></td> +<td class='patterns' style='background-image:url(patterns/a11.png)' id='dither_a11'></td> +<td class='patterns' style='background-image:url(patterns/a12.png)' id='dither_a12'></td> +<td class='patterns' style='background-image:url(patterns/a13.png)' id='dither_a13'></td> +<td class='patterns' style='background-image:url(patterns/a14.png)' id='dither_a14'></td> +<td class='patterns' style='background-image:url(patterns/a15.png)' id='dither_a15'></td> +<td class='patterns' style='background-image:url(patterns/a16.png)' id='dither_a16'></td> +<td class='patterns' style='background-image:url(patterns/a17.png)' id='dither_a17'></td> +<td class='patterns' style='background-image:url(patterns/a18.png)' id='dither_a18'></td> +<td class='patterns' style='background-image:url(patterns/a19.png)' id='dither_a19'></td> +<td class='patterns' style='background-image:url(patterns/a2.png)' id='dither_a2'></td> +<td class='patterns' style='background-image:url(patterns/a20.png)' id='dither_a20'></td> +<td class='patterns' style='background-image:url(patterns/a21.png)' id='dither_a21'></td> +<td class='patterns' style='background-image:url(patterns/a22.png)' id='dither_a22'></td> +<td class='patterns' style='background-image:url(patterns/a23.png)' id='dither_a23'></td> +<td class='patterns' style='background-image:url(patterns/a24.png)' id='dither_a24'></td> +<td class='patterns' style='background-image:url(patterns/a25.png)' id='dither_a25'></td> +<td class='patterns' style='background-image:url(patterns/a26.png)' id='dither_a26'></td> +<td class='patterns' style='background-image:url(patterns/a27.png)' id='dither_a27'></td> +<td class='patterns' style='background-image:url(patterns/a28.png)' id='dither_a28'></td> +<td class='patterns' style='background-image:url(patterns/a29.png)' id='dither_a29'></td> +<td class='patterns' style='background-image:url(patterns/a3.png)' id='dither_a3'></td> + +</tr> +<tr> +<td class='patterns' style='background-image:url(patterns/a30.png)' id='dither_a30'></td> +<td class='patterns' style='background-image:url(patterns/a31.png)' id='dither_a31'></td> +<td class='patterns' style='background-image:url(patterns/a32.png)' id='dither_a32'></td> +<td class='patterns' style='background-image:url(patterns/a33.png)' id='dither_a33'></td> +<td class='patterns' style='background-image:url(patterns/a34.png)' id='dither_a34'></td> +<td class='patterns' style='background-image:url(patterns/a35.png)' id='dither_a35'></td> +<td class='patterns' style='background-image:url(patterns/a36.png)' id='dither_a36'></td> +<td class='patterns' style='background-image:url(patterns/a37.png)' id='dither_a37'></td> +<td class='patterns' style='background-image:url(patterns/a38.png)' id='dither_a38'></td> +<td class='patterns' style='background-image:url(patterns/a39.png)' id='dither_a39'></td> +<td class='patterns' style='background-image:url(patterns/a4.png)' id='dither_a4'></td> +<td class='patterns' style='background-image:url(patterns/a40.png)' id='dither_a40'></td> +<td class='patterns' style='background-image:url(patterns/a41.png)' id='dither_a41'></td> +<td class='patterns' style='background-image:url(patterns/a5.png)' id='dither_a5'></td> +<td class='patterns' style='background-image:url(patterns/a6.png)' id='dither_a6'></td> +<td class='patterns' style='background-image:url(patterns/a7.png)' id='dither_a7'></td> +<td class='patterns' style='background-image:url(patterns/a8.png)' id='dither_a8'></td> +<td class='patterns' style='background-image:url(patterns/a9.png)' id='dither_a9'></td> +<!--}}}--> +</tr> +</table> +</br> +</br> +<div class="grid-100 mobile-grid-100" id="create_your_own"> + <b>OR:</b> <a href="">Create your Own</a> pattern... +</div> +<hr> + <div class="grid-100 mobile-grid-100" id="controls"> +<div class="grid-100 mobile-grid-100" id="choose_your_image"> +<b>NEXT:</b> Choose your image: + </div> + <div class="parameter grid-50 mobile-grid-50"> +Image Url:<input type="text/css" class="image_input" value="Enter an image url here"></input> + </div> + <div class="parameter grid-50 mobile-grid-50"> + Photoblaster Username <i>(optional)</i>: <input id="username" value=""></input> + +<!-- Or Upload:<button>Upload</button>--> + </div> + + </div> + <div id="username_wrapper"> + </div> + <div id="submit_wrapper" class="grid-100 mobile-grid-100" > + <button class="grid-33 push-33 mobile-grid-50 big_button" id="submit">ROCK</button> + + </div> +<div class="processing dontshowme"></div> +<div class="result dontshowme"></div> + +<div id="overlay"> + <div id="draw_protector"> + </div> + <div class="close">CLOSE</div> + <div class="content"> +<!-- {{{DRAW--> + <div id="draw"> + <div>Draw an image below. + </br>(Each square will be 1 sq. pixel)</div> + </br> + <div id="canvas_wrapper"> + </div> + <table> + <tr> + <td> + <input size="2" type="text" id="cols" value="10">COLUMNS</input> + </td> + </tr> + <tr> + <td> + <input size="2" type="text" id="rows" value="10">ROWS</input> + </td> + </tr> + </table> + + <div id="tools"> + <div id="brush" class="brush_tools">Brush</div> + <div id="eraser" class="brush_tools">Eraser</div> + </div> + <input type="checkbox" id="show_grid" checked>Show grid?</input> + <button id="drawing_finished">DONE</button> + + </div> +<!-- }}}--> + <div id="final_image"> + <div class="result">Your Result:</div> + <img src=""/> + <div id="links"> + URL:<input type="text" value=""></input> + </br> + </br> + view more at →<a href="http://asdf.us/im/gallery">PHOTOBLASTER GALLERY:</a> + </div> + </div> + </div> +</div> +<script type="text/javascript" src="js/jquery.min.js"></script> +<script type="text/javascript" src="js/urls.js"></script> +<script type="text/javascript" src="js/inputs.js"></script> +<script type="text/javascript" src="js/preview.js"></script> +<script type="text/javascript" src="js/username.js"></script> +<script type="text/javascript" src="js/sketch.js"></script> +<script type="text/javascript" src="js/overlay.js"></script> +<script type="text/javascript"> +function checkForEmptyUrl(){ + if (($('input.image_input').val() == "") + || ( ! ($('input.image_input').val())) + || ( $('input.image_input').attr("clicked") == "false") + ){ + return true; + } + return false; +} + +function checkForEmptyPattern(){ + if ( + ($('.patterns').attr("current_pattern") == "" || ! $('.patterns').attr("current_pattern")) && + window.custom_pattern == "" + ){ + return true; + } + return false; +} + +$(document).ready(function(){ + $("#submit").click(function(){ + + if (checkForEmptyUrl()){ + return alert("Please supply an image url"); + } + if (checkForEmptyPattern()){ + return alert("Please select a pattern"); + } + console.log( + { + 'pattern_data' : JSON.stringify(window.custom_pattern), + 'pattern_url' : $('.patterns').attr("current_pattern"), + 'image_url' : $('input.image_input').val(), + 'username' : $('#username').val(), + } + ); + $(this).prop("disabled", true); + $(this).html("Workin'..."); + $('body').css("background", "url(img/loading.gif)"); + $.ajax({ + type: "POST", + url: PROCESS_URL, + data: { + 'pattern_data' : JSON.stringify(window.custom_pattern), + 'pattern_url' : $('.patterns').attr("current_pattern"), + 'image_url' : $('input.image_input').val(), + 'username' : $('#username').val(), + } + }).done(function( msg ) { + msg = JSON.parse(msg) + $('#submit').prop("disabled", false); + $('#submit').html("ROCK"); + $('body').css("background", "url(img/loading.gif)"); + $('body').css("background", "white"); + if (msg.error){ + alert( "There was an error processing your request "); + console.log(msg); + } + console.log(msg) + console.log("new url: "+msg.url); + update_username($("#username").val()); + show_finished_image(msg.url); + }) + + }); +}) +</script> + +<div id="acknowledgments">site by pepper...thanks to jules (<a href="http://asdf.us/ascii">http://asdf.us/ascii</a>) and timb (superpaint...RIP)</div> +</body> +</html> + |