summaryrefslogtreecommitdiff
path: root/share/frontend/im
diff options
context:
space:
mode:
Diffstat (limited to 'share/frontend/im')
-rw-r--r--share/frontend/im/colors/iframe.js25
-rw-r--r--share/frontend/im/colors/images/Thumbs.dbbin7680 -> 0 bytes
-rw-r--r--share/frontend/im/colors/js/ancient.js528
-rw-r--r--share/frontend/im/css/style.css170
-rwxr-xr-xshare/frontend/im/gallery_style.css51
-rwxr-xr-xshare/frontend/im/img/arrow_pointing_left.png (renamed from share/frontend/im/arrow_pointing_left.png)bin336 -> 336 bytes
-rwxr-xr-xshare/frontend/im/img/imcupbg.jpg (renamed from share/frontend/im/imcupbg.jpg)bin18738 -> 18738 bytes
-rwxr-xr-xshare/frontend/im/img/new.gif (renamed from share/frontend/im/new.gif)bin144 -> 144 bytes
-rwxr-xr-xshare/frontend/im/index.html322
-rwxr-xr-xshare/frontend/im/js/jquery-ui-1.8.16.custom.min.js (renamed from share/frontend/im/jquery-ui-1.8.16.custom.min.js)0
-rw-r--r--share/frontend/im/js/main.js138
11 files changed, 313 insertions, 921 deletions
diff --git a/share/frontend/im/colors/iframe.js b/share/frontend/im/colors/iframe.js
deleted file mode 100644
index 4b7d2ac..0000000
--- a/share/frontend/im/colors/iframe.js
+++ /dev/null
@@ -1,25 +0,0 @@
-$("#lnkcolorbox").click(function() {
- $.fancybox.open({
- href : 'colors.htm',
- width : 700, // set the width
- height : 610,
- fitToView : true,
- autoDimensions:false,
- autoSize:false,
- type : 'iframe',
- closeBtn : false,
- padding : 5,
- beforeShow : function(){
- $('.fancybox-iframe').contents().find('#submitvalue').click(function(){
- $('.fancybox-iframe').contents().find('form').submit();
- $.fancybox.close();
- });
- },
- beforeClose : function(){
- x = $('.fancybox-iframe').contents().find('#namespace').val();
- },
- afterClose: function(){
- $('#img-hue').val(x);
- }
- });
-});
diff --git a/share/frontend/im/colors/images/Thumbs.db b/share/frontend/im/colors/images/Thumbs.db
deleted file mode 100644
index ec01f6a..0000000
--- a/share/frontend/im/colors/images/Thumbs.db
+++ /dev/null
Binary files differ
diff --git a/share/frontend/im/colors/js/ancient.js b/share/frontend/im/colors/js/ancient.js
deleted file mode 100644
index 5bf15c0..0000000
--- a/share/frontend/im/colors/js/ancient.js
+++ /dev/null
@@ -1,528 +0,0 @@
-var old = {};
-var colorsheight;
-var colorswidth;
-var widthratio = 7;
-var numberacross = 10;
-var backgroundstate = 2;
-var infostate = 0;
-var names = true;
-var hexes = false;
-var rgbs = false;
-var favshow = false;
-var selectedname = "";
-var selectedrgb;
-var curfavcolor = "";
-var curfavcolorId = "";
-var separate = ';';
-//---------element objects----------
-var transbutton = $('#transbutton');
-var submitvalue = $('#submitvalue');
-var addfav = $('#addfavlist');
-var openfav = $('#openfavlist');
-var preview = $('#preview');
-var colornames = $('#colornames');
-var namespace = $('#namespace');
-var extra = $('#extra');
-var container = $('#container');
-var switches = $('#switches');
-var transparent = $('#transparent');
-var infospace = $('#infospace');
-var infoswitch = $('#infoswitch');
-var backgroundswitch = $('#backgroundswitch');
-var bg_menu = $('#bg_menu');
-var vasebackground = $('#vasebackground');
-var hexswitch = $('#hexswitch');
-var favpanel = $('#favpanel');
-var orgheight = 0;
-var bscroll = false;
-//----------------------------------
-$(function(){
- ColorPicker.show();
-});
-
-function selectfavColor(selcolor, id)
-{
- addfav.html('Remove from Favorites');
- curfavcolor = selcolor;
- curfavcolorId = id;
- var rgbregex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
- var hexregex = /^#(?:[0-9a-f]{3}){1,2}$/i;
- hexes = false;
- names = false;
- rgbs = false;
- var match = rgbregex.exec(selcolor);
- if (match != null) {
- selectedname = rgbtoname[selcolor];
- selectedrgb = selcolor;
- hexes = true;
- hexswitch.html('CLICK TO SWITCH TO HEX VALUES');
- } else if((match = hexregex.exec(selcolor))!= null) {
- names = true;
- selectedrgb = hextorgb[selcolor];
- selectedname = rgbtoname[selectedrgb];
- hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');
- } else {
- selectedname = selcolor;
- selectedrgb = hextorgb[nametohex[selectedname]];
- hexswitch.html('CLICK TO SWITCH TO RGB VALUES');
- rgbs = true;
- }
- colornames.html(selcolor);
- namespace.val(selcolor);
- preview.css({'background-color':selectedrgb,'border-style':'none'});
- vasebackground.css('background-color',selectedrgb);
-}
-
-var ColorPicker = {
- GoldenFuncs: {
- regolden: function(num) {
- ratio = (1+Math.sqrt(5))/2;
- newnum = Math.round(num/ratio);
- return newnum;
- },
- goldenize: function(num) {
- ratio = (1+Math.sqrt(5))/2;
- newnum = Math.round(num*ratio);
- return newnum;
- },
- getproperty: function(idandselectr, propertystr) {
- //turns css property width or height into an integer value
- grab = $(idandselectr).css(propertystr);
- grab = grab.slice(0,-2);
- numval = parseInt(grab);
- return numval;
- },
- makegolden: function(idandselectr, propertystr) {
- result = ColorPicker.GoldenFuncs.getproperty(idandselectr, propertystr);
- newval = ColorPicker.GoldenFuncs.goldenize(result) + 60;
- propval = newval.toString()+'px';
- if(propertystr == 'height') {
- $(idandselectr).css('width', propval);
- }else if(propertystr == 'width') {
- $(idandselectr).css('height', propval);
- }
- }
- },
- Events: {
- addEventListener: function(){
- //--------event handler of transparent button-------
- transbutton.click(function() {
- namespace.val('transparent');
- preview.css({'background-color':'transparent','border-style':'dashed','border-width':'2px'});
- colornames.html('transparent');
- colornames.fadeOut(100);
- colornames.fadeIn(500);
- extra.html('<br><br><span style="color:red;background-color:black;border-color:red; border-width:1px; border-style:solid; font-size:14px;">note: the .jpg image format does not support transparency</span>');
- });
- transbutton.hover(function(){ transbutton.addClass('hovertrans')},
- function(){ transbutton.attr('class','defaulttrans')});
- submitvalue.hover(function(){ submitvalue.addClass('hovertrans')},
- function(){ submitvalue.attr('class','defaulttrans')});
- addfav.hover(function(){ addfav.addClass('hovertrans')},
- function(){ addfav.attr('class','defaulttrans')});
- $('.bgOptions').click(function(){
- if (this.id == "bg1")
- {
- $('#colorpicker').css({'background-image':'url("./images/bg.dither.gif")','background-color':'gray','background-color':'black'});
- }else if(this.id == "bg5"){
- $('#' + this.id).bind('keypress', function(event){
- var key = event.which || event.keyCode;
- if(key === 13) {
- $('#colorpicker').css({'background-image':"url('" + $('#bgURI').val() + "')"});
- $('#opt_bgURI').val($('#bgURI').val());
- $('#bgURI').val('');
- }
- });
- }else{
- $('#colorpicker').css({'background-image':'none','background-color':$('#' + this.id).html().toLowerCase()});
- }
- $('#opt_bgColor').val(this.id);
- });
- //--------event handler over colorpanel-------
- var firstwidth;
- $('.colors').mouseover(function() {
- extra.html("");
- if(this.id != 'd0') {
- $(this).css({'height':ColorPicker.GoldenFuncs.goldenize(colorsheight),
- 'width':ColorPicker.GoldenFuncs.goldenize(colorswidth)});
- firstwidth = container.css('width');
- newwidth = firstwidth+ColorPicker.GoldenFuncs.goldenize(colorswidth)-colorswidth;
- container.css('width',newwidth);
- }
- });
- $('.colors').mouseout(function() {
- $(this).css('height',colorsheight)
- $(this).css('width', colorswidth)
- container.css('width',firstwidth)
- });
- $('.colors').hover(function() {
- var stringvalue = 'CLICK TO CHOOSE THE COLOR';
- colornames.fadeOut(100);
- colornames.fadeIn(500);
- stringvalue = ColorPicker.showcolorname(this.id);
- colornames.html(stringvalue);
- });
- $('.colors').click(function() {
- selectednameid = $(this).attr('id')
- selectedname = divtoname['#'+selectednameid];
- selectedrgb = $(this).css('background-color');
- ColorPicker.putitin();
- });
- //-------------others handler-------------------------------
- infoswitch.hover(function(){infospace.show()}, function(){infospace.hide('slow')} );
- infoswitch.click(function(){ColorPicker.switchcolorinfo()});
- backgroundswitch.clicked = false;
- backgroundswitch.click(function(){
- if (! backgroundswitch.clicked){
- bg_menu.slideDown("fast", function(){
- backgroundswitch.clicked = true;
- backgroundswitch.addClass("switches_depressed");
- });
- }else{
- bg_menu.slideUp("fast", function(){
- backgroundswitch.clicked = false;
- backgroundswitch.removeClass("switches_depressed");
- })
- }
- });
- addfav.click(function(){ColorPicker.addfavourites()});
- openfav.click(function(){ColorPicker.openfavourites()});
- hexswitch.click(function(){ColorPicker.hexcolorswitch()});
- $('.theswitches').hover(function(){ ColorPicker.switchhovercss(this.id, 'over') },
- function(){ ColorPicker.switchhovercss(this.id, 'out') });
- //-------handler for window resive----
- $(window).resize(function()
- {
- ColorPicker.setupdimensions();
- });
- }
- },
- getcolorfromfavorite: function(fvalue){
- var rgbregex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
- var hexregex = /^#(?:[0-9a-f]{3}){1,2}$/i;
- var retcolor = '';
- var match = rgbregex.exec(fvalue);
- if (match != null) {
- retcolor = fvalue;
- } else if((match = hexregex.exec(fvalue))!= null) {
- retcolor = hextorgb[fvalue];
- } else {
- retcolor = hextorgb[nametohex[fvalue]];
- }
- return retcolor;
- },
- initfavpanel: function(){
- var fcolors = $('#favcolors').val();
- var clist=fcolors.split(separate);
- for(var i=0; i < clist.length; i++) {
- if (clist[i] != '')
- {
- var colname = clist[i];
- favpanel.append('<span class="favcolor" id="favcol' + i + '" ><input name="favcolor" type="radio" onclick="selectfavColor(\'' + clist[i]
- + '\',\'favcol' + i +'\');"><label>' + colname + '</label><span class="favcolorbox" style="background-color:' + ColorPicker.getcolorfromfavorite(clist[i]) + '">&nbsp;</span></span>');
- }
- }
- },
- existsfavcolor: function(fcolor) {
- var fcolors = $('#favcolors').val();
- var clist=fcolors.split(separate);
- for(var i=0; i < clist.length; i++) {
- if (clist[i] == fcolor)
- {
- return i;
- }
- }
- return -1;
- },
- setpaneldimension: function(){
- var fcolors = $('#favcolors').val();
- var clist=fcolors.split(separate);
- },
- addfavourites: function() {
- var fcolors = $('#favcolors').val();
-
- if (curfavcolor != '') {
- var clist=fcolors.split(separate);
- var index = ColorPicker.existsfavcolor(curfavcolor);
- if(index != 0 && index == clist.length - 1)
- {
- fcolors = fcolors.replace(separate + curfavcolor, '');
- }else if(clist.length == 1) {
- fcolors = fcolors.replace(curfavcolor, '');
- }else{
- fcolors = fcolors.replace(curfavcolor+ separate, '');
- }
- $('#' + curfavcolorId).remove();
- addfav.html('Add to Favorites');
- curfavcolor = "";
- curfavcolorId = "";
- $('#favnone').attr('checked','checked');
- if (fcolors == '')
- {
- favpanel.hide();
- favshow = false;
- openfav.attr('class','defaulttrans');
- }
- }else {
- if (ColorPicker.existsfavcolor(namespace.val()) == -1)
- {
- if (fcolors.length > 0) {
- fcolors = fcolors + separate + namespace.val();
- }else {
- fcolors = namespace.val();
- }
- var colname = namespace.val();
- var clist=fcolors.split(separate);
- var id = clist.length - 1;
- $('#favmsg').remove();
- favpanel.append('<span class="favcolor" id="favcol' + id + '" ><input name="favcolor" type="radio" onclick="selectfavColor(\'' + namespace.val()
- + '\',\'favcol' + id +'\');"><label>' + colname + '</label><span class="favcolorbox" style="background-color:' + ColorPicker.getcolorfromfavorite(namespace.val()) + '">&nbsp;</span></span>');
- }
- }
- $('#favcolors').val(fcolors);
- ColorPicker.setpaneldimension();
- },
- openfavourites: function() {
- if (favshow) {
- favpanel.hide();
- openfav.attr('class','defaulttrans');
- favshow = false;
- $('#favmsg').remove();
- bscroll = false;
- }else {
- favpanel.show();
- openfav.addClass('hovertrans');
- favshow = true;
- var fcolors = $('#favcolors').val();
- if(fcolors == '') {
- favpanel.append('<span class="favmsg" id="favmsg">No favourite colors.</span>');
- }
- bscroll = true;
- ColorPicker.setpaneldimension();
- }
- addfav.html('Add to Favorites');
- curfavcolor = "";
- curfavcolorId = "";
- $('.favcolor input[type=radio]').attr('checked',false);
- },
- loadColorStorage: function() {
- var opts = $('#opt_hexswitch').val();
- names = false;
- rgbs = false;
- hexes = false;
- if(opts == 'names') {
- selectedname = namespace.val();
- selectedrgb = hextorgb[nametohex[selectedname]];
- hexswitch.html('CLICK TO SWITCH TO RGB VALUES');
- rgbs = true;
- }else if(opts == 'rgbs') {
- selectedname = rgbtoname[namespace.val()];
- selectedrgb = namespace.val();
- hexes = true;
- hexswitch.html('CLICK TO SWITCH TO HEX VALUES')
- }else if(opts == 'hexes') {
- names = true;
- selectedrgb = hextorgb[namespace.val()];
- selectedname = rgbtoname[selectedrgb];
- hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');
- }
- colornames.html(selectedname);
- preview.css({'background-color':selectedrgb,'border-style':'none'});
- vasebackground.css('background-color',selectedrgb);
- infostate = parseInt($('#opt_infoswitch').val());
- ColorPicker.switchcolorinfo();
- var bgOpt = $('#opt_bgColor').val();
- if (bgOpt == "bg1")
- {
- $('#colorpicker').css({'background-image':'url("./images/bg.dither.gif")','background-color':'gray','background-color':'black'});
- }else if(bgOpt == "bg5"){
- $('#colorpicker').css({'background-image':"url('" + $('#opt_bgURI').val() + "')"});
- }else{
- $('#colorpicker').css({'background-image':'none','background-color':$('#' + bgOpt).html()});
- }
- $('#bgURI').val($('#opt_bgURI').val());
- ColorPicker.initfavpanel();
- },
- switchhovercss: function(sel, uno) {
- var chng = {};
- chng['color'] = 'white';
- chng['text-shadow'] = 'black 1px 2px';
- chng['background-image'] = "url('./images/hoverbackground.jpg')";
- if(uno == 'over') {
- for(var key in chng) {
- old[key] = $('#'+sel).css(key);
- }
- for(var key in chng){
- $('#'+sel).css(key, chng[key]);
- }
- }else if(uno == 'out') {
- for(var key in old){
- $('#'+sel).css(key, old[key]);
- }
- }
- },
- showcolorname: function(divstr) {
- var rgb = $('#'+divstr).css('background-color');
- var colorname = divtoname['#'+divstr];
- var imname = colorname;
- if (hexes === true) {
- imname = rgb;
- }else if(rgbs === true) {
- imname = colorname;
- }else if (names === true) {
- imname = rgbtohex[rgb];
- }
- return imname;
- },
- hexcolorswitch: function() {
- if(names == true) {
- hexes = false;
- rgbs = false;
- hexswitch.html('CLICK TO SWITCH TO RGB VALUES');
- namespace.val(selectedname);
- names = false;
- rgbs = true;
- $('#opt_hexswitch').val('names');
- }else if(hexes == true) {
- rgbs = false;
- names = false;
- hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');
- namespace.val(rgbtohex[selectedrgb]);
- hexes = false;
- names = true;
- $('#opt_hexswitch').val('hexes');
- }else if(rgbs == true) {
- names = false;
- hexes = false;
- hexswitch.html('CLICK TO SWITCH TO HEX VALUES')
- namespace.val(selectedrgb)
- rgbs = false;
- hexes = true;
- $('#opt_hexswitch').val('rgbs');
- }
- },
- putitin: function() {
- if (rgbs === true) { thecolor = selectedname; }
- if (hexes === true) { thecolor = selectedrgb; }
- if (names === true) { thecolor = rgbtohex[selectedrgb]; }
- namespace.val(thecolor);
- preview.css({'background-color':selectedrgb,'border-style':'none'});
- vasebackground.css('background-color',selectedrgb);
- },
- getcontainerwidth: function () {
- basis = $('.colors').css('width');
- basis = parseInt(basis.slice(0,-2));
- secondbasis = '2px';
- secondbasis = parseInt(secondbasis.slice(0,-2));
- widthval = (secondbasis*(numberacross*2))+(basis*numberacross)+(basis*.44);//(goldenize(basis)-basis)
- if (widthval < 406){
- widthval = 406;
- }
- widthval = widthval.toString()+'px';
- return widthval;
- },
- shrinkwidth: function(arg, ratio) {
- for(var i=0; i < ratio; i++) {
- arg = ColorPicker.GoldenFuncs.regolden(arg);
- }
- division = Math.round(arg);
- return division;
- },
- setupfonts: function () {
- fontratioone = ColorPicker.shrinkwidth(windowWidth, 9);
- $('.theswitches').css('font-size',fontratioone);
- fontratiotwo = ColorPicker.shrinkwidth(windowWidth, 8);
- $('.subtitle').css('font-size',fontratiotwo);
- colornames.css('font-size', ColorPicker.GoldenFuncs.goldenize(fontratiotwo)+'px');
- colornames.css('text-shadow', 'black 1px 2px');
- var transfont = ColorPicker.GoldenFuncs.regolden(fontratioone);
- $('.smalltitle').css({'width':'100%','font-size':fontratioone});
- },
- setupsides: function() {
- container.css({'position':'relative','z-index':'1'});
- switches.css('z-index','10');
- var basis = container.css('width');
- basis = parseInt(basis.slice(0,-2));
- remainder = (100-basis)/2;
- widths = ColorPicker.GoldenFuncs.regolden(basis);
- widths = widths.toString()+'px';
- lateralbasis = ColorPicker.GoldenFuncs.regolden(remainder);
- leftside = toString(lateralbasis)+'%';
- rightside = toString(100-lateralbasis)+'%';
- colornames.css('left', leftside);
- switches.css({'width': widths, 'left': rightside});
- },
- previewdimensions: function() {
- first = switches.css('width');
- first = parseInt(first.slice(0,-2));
- width = ColorPicker.GoldenFuncs.regolden(first);
- height = ColorPicker.GoldenFuncs.regolden(width);
- width = width.toString()+'px';
- height = height.toString()+'px';
- preview.css({'width':width, 'height':height});
- },
- setupdimensions: function() {
- if(window.innerWidth > 933) {
- windowWidth = window.innerWidth
- }else{ windowWidth = 933 }
- colorswidth = ColorPicker.shrinkwidth(windowWidth, widthratio);
- $('.colors').css('width', colorswidth.toString()+'px');
- colorsheight = ColorPicker.GoldenFuncs.regolden(colorswidth);
- propval = colorsheight.toString()+'px';
- $('.colors').css('height', propval);
- var containerwidth = ColorPicker.getcontainerwidth();
- container.css('width',containerwidth);
-
- ColorPicker.setupfonts();
- ColorPicker.setupsides();
- ColorPicker.GoldenFuncs.makegolden('#' + switches.attr('id'),'width');
- ColorPicker.previewdimensions();
- transparent.css({'float':'bottom','width':'inherit'});
- orgheight = switches.height();
- },
- switchcolorinfo: function() {
- if(infostate == 1) {
- for(var i=0; i < color_values.length; i++) {
- $('#d' + i).html(divtoname['#d' + i]);
- }
- infostate = 2;
- infospace.html('(NAMES)');
- $('#opt_infoswitch').val('1');
- }else if(infostate == 0) {
- $('.colors').html("");
- infostate = 1;
- infospace.html('(NONE)');
- $('#opt_infoswitch').val('0');
- }else if(infostate == 2) {
- for(var i=0; i < color_values.length; i++) {
- $('#d' + i).html(nametohex[divtoname['#d' + i]]);
- }
- infostate = 3;
- infospace.html('(HEXES)');
- $('#opt_infoswitch').val('2');
- }else if(infostate == 3) {
- for(var i=0; i < color_values.length; i++) {
- $('#d' + i).html(hextorgb[nametohex[divtoname['#d' + i]]]);
- }
- infostate = 0;
- infospace.html('(RGBS)');
- $('#opt_infoswitch').val('3');
- }
- },
- show: function() {
- //-------create color panel--------
- for (i=1; i < color_values.length ; i++)
- {
- $('#d0').attr('style','background-color:' + color_values[0]);
- var colorbox = $('#d0').clone();
- colorbox.attr('id','d' + i);
- colorbox.attr('style','background-color:' + color_values[i]);
- container.append(colorbox);
- }
- //--------initialize------------
- ColorPicker.setupdimensions();
- ColorPicker.switchcolorinfo();
- ColorPicker.hexcolorswitch();
- ColorPicker.Events.addEventListener();
- },
-}
diff --git a/share/frontend/im/css/style.css b/share/frontend/im/css/style.css
new file mode 100644
index 0000000..3f0e597
--- /dev/null
+++ b/share/frontend/im/css/style.css
@@ -0,0 +1,170 @@
+*
+ {
+ padding: 0;
+ margin: 0;
+ font-family: sans-serif;
+ }
+body
+ {
+ background-color: #efedee;
+ // background-color: #838388;
+ color: #555;
+ }
+#down_for_maintenance{
+ position: absolute;
+ background: url("http://asdf.us/impattern/patterns/38.png");
+ z-index:2000;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left:0;
+ display: none;
+}
+#down_for_maintenance > span{
+ background: white;
+}
+#controls,#result
+ {
+ display: inline-block;
+ margin: 10px;
+ width: 430px;
+ float: left;
+ }
+#controls
+ {
+ font-size: 14px;
+ top: 0; left: 0;
+ z-index: 5;
+ }
+#result
+ {
+ background-color: #d6d0d0;
+// background-color: #131412;
+ margin-left: 20px;
+ padding: 10px;
+ display: none;
+ z-index: 5;
+ }
+#sendtoinput
+ {
+ font-size: 10px;
+ }
+#instructions
+ {
+ position: absolute;
+ bottom: 10px;
+ left: 10px;
+ line-height: 18px;
+ z-index: 1;
+ }
+p,form
+ {
+// background-color: #010101;
+ background-color: #fff;
+ background-position: center center;
+ padding: 10px;
+ font-size: 14px;
+ width: 430px;
+ display: block;
+ }
+#gallery-link
+ {
+ background-color: #fff;
+// background-image: url(imcupbg.jpg);
+ background-position: center center;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ padding: 10px;
+ z-index: 10;
+ }
+.error
+ {
+ color: red;
+ font-size: 20px;
+ }
+a
+ {
+// color: #b4d;
+ color: #a39;
+ font-weight: bold;
+ }
+label
+ {
+ display: inline-block;
+ width: 190px;
+ padding-right: 10px;
+ text-align: right;
+ }
+small
+ {
+ color: #777;
+ }
+input[type=text]
+ {
+ width: 100px;
+ }
+#img-url,#output-url,#img-background
+ {
+ width: 200px;
+ }
+#bgswitcheroo, #colorswitcheroo
+ {
+ width: 19px;
+ height:38px;
+ display: inline-block;
+ position: absolute;
+ background-image: url(http://i.asdf.us/im/7e/user_convo_1353562627_1355449919.png);
+ //background-image: url( http://i.asdf.us/im/7b/user_convo_1353562627.png);
+ background-repeat:no-repeat;
+ background-position: 3px 10px;
+ cursor: pointer;
+ }
+#img-fuzz,#img-width,#img-height,#img-brightness,#img-saturation,#img-contrast,#img-hue,#img-rotate
+ {
+ width: 50px;
+ text-align: right;
+ }
+button
+ {
+ padding: 2px 5px;
+ font-size: 16px;
+ }
+#result img
+ {
+ max-width: 400px;
+ max-height: 400px;
+ }
+#output-cmd
+ {
+ font-size: 12px;
+ white-space: pre;
+ }
+.shim
+ {
+ height: 10px;
+ clear: both;
+ display: block;
+ }
+#output-url
+ {
+ width: 320px;
+ }
+#likebutton
+ {
+ display: none;
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ width: 350px;
+ background-color: #fff;
+// background-image: url(imcupbg.jpg);
+ padding: 10px;
+ color: #ddd;
+ font-family: trebuchet ms, sans-serif;
+ }
+div#controls, span#userlink {
+ display: none;
+} span#userlink a {
+ text-transform: capitalize;
+}
diff --git a/share/frontend/im/gallery_style.css b/share/frontend/im/gallery_style.css
deleted file mode 100755
index 2d78a0e..0000000
--- a/share/frontend/im/gallery_style.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/**** Isotope Filtering ****/
-
-.isotope-item {
- z-index: 2;
-}
-
-.isotope-hidden.isotope-item {
- pointer-events: none;
- z-index: 1;
-}
-
-/**** Isotope CSS3 transitions ****/
-
-.isotope,
-.isotope .isotope-item {
- -webkit-transition-duration: 0.3s;
- -moz-transition-duration: 0.3s;
- -ms-transition-duration: 0.3s;
- -o-transition-duration: 0.3s;
- transition-duration: 0.3s;
-}
-
-
-.isotope {
- -webkit-transition-property: height, width;
- -moz-transition-property: height, width;
- -ms-transition-property: height, width;
- -o-transition-property: height, width;
- transition-property: height, width;
-}
-
-.isotope .isotope-item {
- -webkit-transition-property: -webkit-transform, opacity;
- -moz-transition-property: -moz-transform, opacity;
- -ms-transition-property: -ms-transform, opacity;
- -o-transition-property: -o-transform, opacity;
- transition-property: transform, opacity;
-}
-
-/**** disabling Isotope CSS3 transitions ****/
-
-.isotope.no-transition,
-.isotope.no-transition .isotope-item,
-.isotope .isotope-item.no-transition {
- -webkit-transition-duration: 0s;
- -moz-transition-duration: 0s;
- -ms-transition-duration: 0s;
- -o-transition-duration: 0s;
- transition-duration: 0s;
-}
-
diff --git a/share/frontend/im/arrow_pointing_left.png b/share/frontend/im/img/arrow_pointing_left.png
index ba1fb53..ba1fb53 100755
--- a/share/frontend/im/arrow_pointing_left.png
+++ b/share/frontend/im/img/arrow_pointing_left.png
Binary files differ
diff --git a/share/frontend/im/imcupbg.jpg b/share/frontend/im/img/imcupbg.jpg
index b3cf3f5..b3cf3f5 100755
--- a/share/frontend/im/imcupbg.jpg
+++ b/share/frontend/im/img/imcupbg.jpg
Binary files differ
diff --git a/share/frontend/im/new.gif b/share/frontend/im/img/new.gif
index 37c39d2..37c39d2 100755
--- a/share/frontend/im/new.gif
+++ b/share/frontend/im/img/new.gif
Binary files differ
diff --git a/share/frontend/im/index.html b/share/frontend/im/index.html
index c19770f..313fe04 100755
--- a/share/frontend/im/index.html
+++ b/share/frontend/im/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>PHOTOBLASTER</title>
@@ -13,179 +13,7 @@
<!--FOR THE COLORS IFRAME-->
<link rel="stylesheet" type="text/css" href="/im/colors/css/jquery.fancybox.css?v=2.1.5" media="screen" />
-<style type="text/css">
-*
- {
- padding: 0;
- margin: 0;
- font-family: sans-serif;
- }
-body
- {
- background-color: #efedee;
- // background-color: #838388;
- color: #555;
- }
-#down_for_maintenance{
- position: absolute;
- background: url("http://asdf.us/impattern/patterns/38.png");
- z-index:2000;
- height: 100%;
- width: 100%;
- top: 0;
- left:0;
- display: none;
-}
-#down_for_maintenance > span{
- background: white;
-}
-#controls,#result
- {
- display: inline-block;
- margin: 10px;
- width: 430px;
- float: left;
- }
-#controls
- {
- font-size: 14px;
- top: 0; left: 0;
- z-index: 5;
- }
-#result
- {
- background-color: #d6d0d0;
-// background-color: #131412;
- margin-left: 20px;
- padding: 10px;
- display: none;
- z-index: 5;
- }
-#sendtoinput
- {
- font-size: 10px;
- }
-#instructions
- {
- position: absolute;
- bottom: 10px;
- left: 10px;
- line-height: 18px;
- z-index: 1;
- }
-p,form
- {
-// background-color: #010101;
- background-color: #fff;
-// background-image: url(imcupbg.jpg);
- background-position: center center;
- padding: 10px;
- font-size: 14px;
- width: 430px;
- display: block;
- }
-#gallery-link
- {
- background-color: #fff;
-// background-image: url(imcupbg.jpg);
- background-position: center center;
- position: absolute;
- top: 10px;
- right: 10px;
- padding: 10px;
- z-index: 10;
- }
-.error
- {
- color: red;
- font-size: 20px;
- }
-a
- {
-// color: #b4d;
- color: #a39;
- font-weight: bold;
- }
-label
- {
- display: inline-block;
- width: 190px;
- padding-right: 10px;
- text-align: right;
- }
-small
- {
- color: #777;
- }
-input[type=text]
- {
- width: 100px;
- }
-#img-url,#output-url,#img-background
- {
- width: 200px;
- }
-#bgswitcheroo, #colorswitcheroo
- {
- width: 19px;
- height:38px;
- display: inline-block;
- position: absolute;
- background-image: url(http://i.asdf.us/im/7e/user_convo_1353562627_1355449919.png);
- //background-image: url( http://i.asdf.us/im/7b/user_convo_1353562627.png);
- background-repeat:no-repeat;
- background-position: 3px 10px;
- cursor: pointer;
- }
-#img-fuzz,#img-width,#img-height,#img-brightness,#img-saturation,#img-contrast,#img-hue,#img-rotate
- {
- width: 50px;
- text-align: right;
- }
-button
- {
- padding: 2px 5px;
- font-size: 16px;
- }
-#result img
- {
- max-width: 400px;
- max-height: 400px;
- }
-#output-cmd
- {
- font-size: 12px;
- white-space: pre;
- }
-.shim
- {
- height: 10px;
- clear: both;
- display: block;
- }
-#output-url
- {
- width: 320px;
- }
-#likebutton
- {
- display: none;
- position: absolute;
- bottom: 10px;
- right: 10px;
- width: 350px;
- background-color: #fff;
-// background-image: url(imcupbg.jpg);
- padding: 10px;
- color: #ddd;
- font-family: trebuchet ms, sans-serif;
- }
-div#controls, span#userlink {
- display: none;
-} span#userlink a {
- text-transform: capitalize;
-}
-</style>
+<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
@@ -372,7 +200,7 @@ div#controls, span#userlink {
<span class="shim"></span>
<p>
- <img src="new.gif" width="32" height="16" />
+ <img src="img/new.gif" width="32" height="16" />
Draw color codes &rarr; <a href="/ascii/">Ascii</a>
<span class="shim"></span>
Mess around with heightmaps and textures &rarr; <a href="/imlandscape">ImLandscape</a>
@@ -383,7 +211,6 @@ div#controls, span#userlink {
<span class="shim"></span>
Oh now it's on....payback time &rarr; <a href="/imbreak/">FOTO FUCKER</a>
<span class="shim"></span>
- <!--<img src="new.gif" width="32" height="16" />-->
Transform images in 3D &rarr; <a href="/imgrid/">Grid Generator</a>
<span class="shim"></span>
Gradients make everything better &rarr; <a href="/imgradient/">Gradient Generator</a>
@@ -417,149 +244,10 @@ div#controls, span#userlink {
-->
<script type="text/javascript" src="/js/jquery.js"></script>
-<script type="text/javascript">
-var Main =
- {
- API_HEADER: "#@im",
- generating: false,
- enter: function (e)
- {
- if (Main.generating)
- return
- if (e.keyCode === 13)
- Main.go()
- },
- go: function ()
- {
- if (Main.generating)
- return
- Main.generating = true
- $("#output-cmd").html('generating...').show()
- $("#result").show()
- var data =
- {
- url: $("#img-url").val(),
- transparent: $('#img-transparent:checked').val() !== undefined ? "true" : "false",
- flip: $('#img-flip:checked').val() !== undefined ? "true" : "false",
- flop: $('#img-flop:checked').val() !== undefined ? "true" : "false",
- nearest: $('#img-nearest:checked').val() !== undefined ? "true" : "false",
- rotate: $("#img-rotate").val(),
- subtract: $("#img-subtract").val(),
- fuzz: $("#img-fuzz").val(),
- width: $("#img-width").val(),
- height: $("#img-height").val(),
- black: $("#img-black").val(),
- white: $("#img-white").val(),
- //brightness: $("#img-brightness").val(),
- //saturation: $("#img-saturation").val(),
- hue: $("#img-hue").val(),
- contrast: $("#img-contrast").val(),
- background: $("#img-background").val(),
- // merge_early: $('#img-merge_early:checked').val() !== undefined ? "true" : "false",
- compose: $('#img-compose :selected').text(),
- gravity: $('#img-gravity :selected').text(),
- // tile: $('#img-tile:checked').val() !== undefined ? "true" : "false",
- format: $('#img-format :selected').text(),
- dispose: $('#dispose').val(),
- username: $("#img-name").val(),
- }
- if (data.rotate.match(/-/)){ data.rotate=360-parseInt(data.rotate.replace("-","")); };
- $("#img-rotate").val("");
- if (data.username.length > 0)
- document.cookie = "imname="+data.username+";path=/;domain=.asdf.us;max-age=1086400"
- $.post("/im/api/generate", data, Main.callback)
- },
- error: function (s)
- {
- $("#output-cmd").html("<span class='error'>ERROR: " + s + "</span>").show()
- $("#output-url").hide()
- $("#output-img").hide()
- },
- callback: function (data)
- {
- Main.generating = false
- $("#output-cmd").html("size: "+Main.filesize(data.size)+"<br/>"
- + data.width + " x " + data.height);
-
- $("#output-url").val(data.url);
- $("#output-img").hide().attr("src", data.url).fadeIn(700)
- $("#sendtoinput").html("&nbsp;send to input <img src=\"arrow_pointing_left.png\"/>&nbsp;").css({"border": "1px solid gray", "cursor" : "pointer"}).click(function(){
- $("#img-url").val(data.url);
- });
-
- },
- filesize: function (size)
- {
- if (size < 1024)
- return size + " bytes"
- if (size < 1024 * 1024)
- return Math.floor (size/1024) + " KB"
- else
- return Math.floor (size/(1024*1024)) + " MB"
- },
- cookie: function ()
- {
- if (document.cookie)
- {
- var cookies = document.cookie.split(";")
- for (i in cookies)
- {
- var cookie = cookies[i].split("=")
- if (cookie[0].indexOf("imname") !== -1)
- {
- if (cookie[1] !== 'false' && cookie[1] !== 'undefined' && cookie[1].length)
- {
- return cookie[1]
- }
- }
- }
- }
- return ""
- },
- preloadSize: function(url,label,tag){
- console.log(url)
- var img = new Image()
- img.onload = function(){ $(label).html( tag + ": " + img.naturalWidth + " x " + img.naturalHeight ) }
- img.src = url
- },
- init: function ()
- {
- var name = Main.cookie ()
- $("#img-name").val(name)
- if (name)
- {
- $("#userlink").show()
- $("#userlink a").attr("href", "/im/gallery/?name="+name).html(name+"'s photoblasts")
- }
- $("#likebutton,#controls").fadeIn(0)
- $("#img-generate").bind("click", Main.go)
- $("div input[type=text]").bind("keydown", Main.enter)
- $("#img-url").change(function(){Main.preloadSize(this.value,"#img-url-label","image")})
- $("#img-background").change(function(){Main.preloadSize(this.value,"#background-url-label","bg")})
- $("#bgswitcheroo").click(function() {
- a = $("#img-url").val();
- b = $("#img-background").val();
- $("#img-url").val(b);
- $("#img-background").val(a);
- });
- $("#colorswitcheroo").click(function() {
- a = $("#img-white").val();
- b = $("#img-black").val();
- $("#img-white").val(b);
- $("#img-black").val(a);
- });
- $("#img-format").change(function(){
- $("#gif-options").css( "visibility", $("#img-format").val() === "gif" ? "visible" : "hidden")
- })
-
- },
- }
-document.getElementById('imform').reset();
-Main.init ()
-</script>
+<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="http://asdf.us/js/pbembed.js"></script>
<!--for the colors iframe-->
-<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
+<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/im/colors/js/jquery.remember-state.js"></script>
<script type="text/javascript" src="/im/colors/js/jquery.fancybox.js?v=2.1.5"></script>
<script type="text/javascript" src="colors_iframe.js"></script>
diff --git a/share/frontend/im/jquery-ui-1.8.16.custom.min.js b/share/frontend/im/js/jquery-ui-1.8.16.custom.min.js
index 3042d0b..3042d0b 100755
--- a/share/frontend/im/jquery-ui-1.8.16.custom.min.js
+++ b/share/frontend/im/js/jquery-ui-1.8.16.custom.min.js
diff --git a/share/frontend/im/js/main.js b/share/frontend/im/js/main.js
new file mode 100644
index 0000000..8f8b01a
--- /dev/null
+++ b/share/frontend/im/js/main.js
@@ -0,0 +1,138 @@
+var Main =
+ {
+ API_HEADER: "#@im",
+ generating: false,
+ enter: function (e)
+ {
+ if (Main.generating)
+ return
+ if (e.keyCode === 13)
+ Main.go()
+ },
+ go: function ()
+ {
+ if (Main.generating)
+ return
+ Main.generating = true
+ $("#output-cmd").html('generating...').show()
+ $("#result").show()
+ var data =
+ {
+ url: $("#img-url").val(),
+ transparent: $('#img-transparent:checked').val() !== undefined ? "true" : "false",
+ flip: $('#img-flip:checked').val() !== undefined ? "true" : "false",
+ flop: $('#img-flop:checked').val() !== undefined ? "true" : "false",
+ nearest: $('#img-nearest:checked').val() !== undefined ? "true" : "false",
+ rotate: $("#img-rotate").val(),
+ subtract: $("#img-subtract").val(),
+ fuzz: $("#img-fuzz").val(),
+ width: $("#img-width").val(),
+ height: $("#img-height").val(),
+ black: $("#img-black").val(),
+ white: $("#img-white").val(),
+ //brightness: $("#img-brightness").val(),
+ //saturation: $("#img-saturation").val(),
+ hue: $("#img-hue").val(),
+ contrast: $("#img-contrast").val(),
+ background: $("#img-background").val(),
+ // merge_early: $('#img-merge_early:checked').val() !== undefined ? "true" : "false",
+ compose: $('#img-compose :selected').text(),
+ gravity: $('#img-gravity :selected').text(),
+ // tile: $('#img-tile:checked').val() !== undefined ? "true" : "false",
+ format: $('#img-format :selected').text(),
+ dispose: $('#dispose').val(),
+ username: $("#img-name").val(),
+ }
+ if (data.rotate.match(/-/)){ data.rotate=360-parseInt(data.rotate.replace("-","")); };
+ $("#img-rotate").val("");
+ if (data.username.length > 0)
+ document.cookie = "imname="+data.username+";path=/;domain=.asdf.us;max-age=1086400"
+ $.post("/im/api/generate", data, Main.callback)
+ },
+ error: function (s)
+ {
+ $("#output-cmd").html("<span class='error'>ERROR: " + s + "</span>").show()
+ $("#output-url").hide()
+ $("#output-img").hide()
+ },
+ callback: function (data)
+ {
+ Main.generating = false
+ $("#output-cmd").html("size: "+Main.filesize(data.size)+"<br/>"
+ + data.width + " x " + data.height);
+
+ $("#output-url").val(data.url);
+ $("#output-img").hide().attr("src", data.url).fadeIn(700)
+ $("#sendtoinput").html("&nbsp;send to input <img src=\"img/arrow_pointing_left.png\"/>&nbsp;").css({"border": "1px solid gray", "cursor" : "pointer"}).click(function(){
+ $("#img-url").val(data.url);
+ });
+
+ },
+ filesize: function (size)
+ {
+ if (size < 1024)
+ return size + " bytes"
+ if (size < 1024 * 1024)
+ return Math.floor (size/1024) + " KB"
+ else
+ return Math.floor (size/(1024*1024)) + " MB"
+ },
+ cookie: function ()
+ {
+ if (document.cookie)
+ {
+ var cookies = document.cookie.split(";")
+ for (i in cookies)
+ {
+ var cookie = cookies[i].split("=")
+ if (cookie[0].indexOf("imname") !== -1)
+ {
+ if (cookie[1] !== 'false' && cookie[1] !== 'undefined' && cookie[1].length)
+ {
+ return cookie[1]
+ }
+ }
+ }
+ }
+ return ""
+ },
+ preloadSize: function(url,label,tag){
+ console.log(url)
+ var img = new Image()
+ img.onload = function(){ $(label).html( tag + ": " + img.naturalWidth + " x " + img.naturalHeight ) }
+ img.src = url
+ },
+ init: function ()
+ {
+ var name = Main.cookie ()
+ $("#img-name").val(name)
+ if (name)
+ {
+ $("#userlink").show()
+ $("#userlink a").attr("href", "/im/gallery/?name="+name).html(name+"'s photoblasts")
+ }
+ $("#likebutton,#controls").fadeIn(0)
+ $("#img-generate").bind("click", Main.go)
+ $("div input[type=text]").bind("keydown", Main.enter)
+ $("#img-url").change(function(){Main.preloadSize(this.value,"#img-url-label","image")})
+ $("#img-background").change(function(){Main.preloadSize(this.value,"#background-url-label","bg")})
+ $("#bgswitcheroo").click(function() {
+ a = $("#img-url").val();
+ b = $("#img-background").val();
+ $("#img-url").val(b);
+ $("#img-background").val(a);
+ });
+ $("#colorswitcheroo").click(function() {
+ a = $("#img-white").val();
+ b = $("#img-black").val();
+ $("#img-white").val(b);
+ $("#img-black").val(a);
+ });
+ $("#img-format").change(function(){
+ $("#gif-options").css( "visibility", $("#img-format").val() === "gif" ? "visible" : "hidden")
+ })
+
+ },
+ }
+document.getElementById('imform').reset();
+Main.init ()
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 20:27:36 +0000