From af30034df4f6b1aa97b5884ffe6d4fe6f339f36a Mon Sep 17 00:00:00 2001 From: Kai Hendry Date: Wed, 30 Nov 2011 16:53:00 +0800 Subject: [PATCH] trying a trendy JS notification --- ajax-loader.gif | Bin 2892 -> 0 bytes humane.min.js | 10 ++++ index.shtml | 12 +++-- themes/bigbox.css | 124 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 142 insertions(+), 4 deletions(-) delete mode 100644 ajax-loader.gif create mode 100644 humane.min.js create mode 100644 themes/bigbox.css diff --git a/ajax-loader.gif b/ajax-loader.gif deleted file mode 100644 index 58bfafe5aed2567c9b6c9ceff8b6b6fde53a0af9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2892 zcmd7U{aX^&0taximZ0{sRf_0sRvHLuD^n4&)zei$t(=x1Xg4cG5LZs8yxH4Q5wxwc z35u(H1u-`@6-0YcO99trrt;=mc~$VOo0|!ucHN$9mwWF&aL@Cc^TT=0bDr~gzUM6% z8-(z;8UdNW9!M873E z5R+e;3UQ@;nQScDZTqN^)mKq0CikySNZ4Qcjh|gD=TZ44P-8&FXS(Mt9TCl%+S>V% z>^9lRXFaV~2g&E0V)rO7q@Iq&{-nJy?q^!a7_{yV!dK=rSMj=$Fui?_9tJW2N&I+W zZgjU{5X+Z3LNGQhNOFM&Po6iSIBU137jNw8%tot^77jn+be5+W>~`{w zk$w}F$K4|6eRsAox`yh%X88^`y&NCRKhbsVEJF9JX<}l5?z;|FmHm;cuMrByjCED8 zF}zcH6%Q|^Vd(z+!5nw830&lE6Gihgi9jetk>;UXuVJ*ni4d%~IjF-w(Pl(U zE1404rYiTvtRSo`5%-r77n@y5H=k8d3<^RD_0kPmvZJHVld_!&#;YlYlGH2d-^6yb zE!?<=uNJ(iG`oC#P&cFAZ0FDiOC9U5YTR4fXEVFg`*_gqnl<9bgL|D0??))6QLo#Y zNVCKv{PSIdZpJJU2AS{%ngP~J=2Q;;NPasI$afcE<!xjeeUPyCDPdS=nQixVrAbITCEGKiyt>hA$bcFjeYt zSbs19IbW8p$(aW#;F^$mN)f8KP>zQ?7EdT-aT9t`HJgd`s45O}s_9YVNpu|(mb%?f!q#xNsYU%=Yt8njhm{)Dqk&^q#@AvCkOR47H(u_h?OzYFk+g177Y3cke zaZ|t7=c5aSLlxWZBX$^^?z;FmUQWNVC0G9IkNn}}v`F`j|8Sz54$G-m`-Ff0piYhY z#jF2hlY^$C=;t(Azt=hLgV*OCfBhU61)Vzv&MJITG1mo_6k?EIEWP_>w>5~T?)D+m ztwVfq{6<3vu&l*%M!`XPA%(+<=Q~6$zT1;W4?rkg_)R~U-(0RZadY0068EIMPa6wIgx{J? zdyA>io-&)(ZYU$4G%-}M%V1G(=uwuZ*pFY8{wU@D_Pk4|R^YW2pQa!fUg!c3hI=O5QE^0x* zO)mZmI2JV&+R~bNH}>hGXGxgnnYQs?Kp)RfD3M1AD_Ec<)?ybgzirIi4K_!CSIhM! z{QkOibCf#n!$uYYT77G$$@Z>`_o=7)hi>H1@<#)@4?^8f9#?%4b?@h@XUa9H4~T}F znuf}{$9K@?&pR4MeIVgo;?bF<-Ai2=1;P5%x2seIuqH`Aa(0!xtSU%uudjj$`Em>? z(SeSX{)QPCkr>p`YbkUb<`m>x1&6^z!KG*vI*4m4KsbktLzwbhX^pN`;gM~}Y$c%= zxKn6XPlAW&F2UAwT1Sv4dpKSsCcKpFqCAF6+SbKP2qeL9wcXQ(I z4XyoaTKpwc(bEgFUChN#eP7K5b!Ru{sH)to9~!+Aff+&`JIXQG0Ty9xu#eU|Y79L8 z!gdl?RHV@O5;QwfwxI1|C!ICL zd8~?(sk~}qdULc5hXHqmj|2meU<8tA)W}1M z_|;;C>`G{YS&g7p+fKrXV!Kdn>m;if3F*;csR68gLxlH{*;<_yQ zzD)mct+AypK)L0)RTckL{}sPe>zi%ixF@dOMuaD`FRqam;7i6QY@W4?d>r*fMxNK) z{bM-jV?vxeS(=442Gb3ElOqV# zLPyd$?$rb%tzMA}Q52!X;YDEdJSD_dc23EYakWY_NGBqSClT7oP4DkdJ4;5{|1ka! N|BvWD{=0vce**RaQgHwP diff --git a/humane.min.js b/humane.min.js new file mode 100644 index 0000000..ac05f7a --- /dev/null +++ b/humane.min.js @@ -0,0 +1,10 @@ +/** + * HumaneJS + * Humanized Messages for Notifications + * @author Marc Harter (@wavded) + * @contributers + * Alexander (@bga_) + * Jose (@joseanpg) + * @example + * humane('hello world'); + */(function(a,b){function m(){h=b.createElement("div"),h.id="humane",h.className="humane",b.body.appendChild(h),k=!0}function n(){d(b.body,"mousemove",n),d(b.body,"click",n),d(b.body,"keypress",n),d(b.body,"touchstart",n),f=!1,g&&p(0)}function o(){if(g&&!a.humane.forceNew)return;if(!l.length){n();return}g=!0,i&&(clearTimeout(i),i=null),i=setTimeout(function(){f||(c(b.body,"mousemove",n),c(b.body,"click",n),c(b.body,"keypress",n),c(b.body,"touchstart",n),f=!0,a.humane.waitForMove||n())},a.humane.timeout);var d=l.shift(),j=d[0],k=d[1];e(k)&&(k="
  • "+k.join("
  • ")+"
"),h.innerHTML=k,p(j,1)}function p(a,b){b===1?h.className="humane humane-"+a+" humane-animate":(h.className=h.className.replace(" humane-animate",""),q())}function q(){setTimeout(function(){g=!1,h.className="humane",o()},500)}function s(b,c){var d,e;c===1?(e=0,h.className="humane humane-js-animate humane-"+b,h.filters&&(h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=0),a.humane.forceNew&&(e=j?h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity/100|0:h.style.opacity|0),d=setInterval(function(){e<1?(e+=.1,e>1&&(e=1),r(e)):clearInterval(d)},5)):(e=1,d=setInterval(function(){e>0?(e-=.1,e<0&&(e=0),r(e)):(h.className=h.className.replace(" humane-js-animate",""),clearInterval(d),q())},5))}function t(a){return function(b){l.push([a,b]),k&&o()}}var c,d,e;"addEventListener"in a?(c=function(a,b,c){a.addEventListener(b,c,!1)},d=function(a,b,c){a.removeEventListener(b,c,!1)}):(c=function(a,b,c){a.attachEvent("on"+b,c)},d=function(a,b,c){a.detachEvent("on"+b,c)}),e=Array.isArray||function(a){return Object.prototype.toString.call(a)==="[object Array]"};var f=!1,g=!1,h=null,i=null,j=/msie [678]/i.test(navigator.userAgent),k=!1,l=[];c(a,"load",function(){var a=function(a){var b=["MozT","WebkitT","OT","msT","KhtmlT","t"];for(var c=0,d;d=b[c];c++)if(d+"ransition"in a)return!0;return!1}(b.body.style);a||(p=s),m(),o()});var r=function(){return j?function(a){h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=a*100}:function(a){h.style.opacity=String(a)}}();a.humane=t("log"),a.humane.log=t("log"),a.humane.error=t("error"),a.humane.info=t("info"),a.humane.success=t("success"),a.humane.timeout=2500,a.humane.waitForMove=!1,a.humane.forceNew=!1})(window,document); \ No newline at end of file diff --git a/index.shtml b/index.shtml index aa77896..ae06c82 100644 --- a/index.shtml +++ b/index.shtml @@ -3,13 +3,17 @@ GrepTweet + + diff --git a/themes/bigbox.css b/themes/bigbox.css new file mode 100644 index 0000000..c1ee39b --- /dev/null +++ b/themes/bigbox.css @@ -0,0 +1,124 @@ +html, +body { + height: 100%; +} +.humane { + position: fixed; + -moz-transition: all 0.3s ease-out; + -webkit-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; + z-index: -1; +} +.humane.humane-animate, +.humane.humane-js-animate { + z-index: 100000; +} +.humane { + font-family: Ubuntu, Verdana, sans-serif; + line-height: 40px; + font-size: 35px; + top: 25%; + left: 25%; + opacity: 0; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + width: 50%; + min-height: 40px; + padding: 30px; + text-align: center; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAc0lEQVQokb2RQQ6EMAwDx/7/n80BtIEC3RYhLlXrVLGTAYiBWBIGtkPSP01SfreTVoV5re9Rcee1scwDk9NurbR62sZJcpzy9O+2X5KsXabyPaQFYNuvkqkRviDTp9Vs8opC0TpkHvJtVjeReW/5kEyX1gKeLEKE9peeWAAAAABJRU5ErkJggg=='); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000), color-stop(1, rgba(0,0,0,0.90))) no-repeat; + background: -moz-linear-gradient(top, #000 0%, rgba(0,0,0,0.90) 100%) no-repeat; + background: -webkit-linear-gradient(top, #000 0%, rgba(0,0,0,0.90) 100%) no-repeat; + background: -ms-linear-gradient(top, #000 0%, rgba(0,0,0,0.90) 100%) no-repeat; + background: -o-linear-gradient(top, #000 0%, rgba(0,0,0,0.90) 100%) no-repeat; + background: linear-gradient(top, #000 0%, rgba(0,0,0,0.90) 100%) no-repeat; + *background-color: #000; + color: #fff; + -moz-border-radius: 15px; + -webkit-border-radius: 15px; + -ms-border-radius: 15px; + -o-border-radius: 15px; + border-radius: 15px; + text-shadow: 0 -1px 1px #ddd; + -moz-box-shadow: 0 15px 15px -15px #000; + -webkit-box-shadow: 0 15px 15px -15px #000; + -ms-box-shadow: 0 15px 15px -15px #000; + -o-box-shadow: 0 15px 15px -15px #000; + box-shadow: 0 15px 15px -15px #000; + -moz-transform: scale(0.1); + -webkit-transform: scale(0.1); + -ms-transform: scale(0.1); + -o-transform: scale(0.1); + transform: scale(0.1); +} +.humane p, +.humane ul { + margin: 0; + padding: 0; +} +.humane ul { + list-style: none; +} +.humane.humane-info { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAQElEQVQokWNgYEj5z8TAwPCfiYGBgQGVIEKMTG2DTYwRVez/IHIaNcUGyBnYgpORel6gpvFEJhBqpxIaG8/AAADsKDq/HhYQ2AAAAABJRU5ErkJggg=='); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000064), color-stop(1, rgba(0,0,100,0.90))) no-repeat; + background: -moz-linear-gradient(top, #000064 0%, rgba(0,0,100,0.90) 100%) no-repeat; + background: -webkit-linear-gradient(top, #000064 0%, rgba(0,0,100,0.90) 100%) no-repeat; + background: -ms-linear-gradient(top, #000064 0%, rgba(0,0,100,0.90) 100%) no-repeat; + background: -o-linear-gradient(top, #000064 0%, rgba(0,0,100,0.90) 100%) no-repeat; + background: linear-gradient(top, #000064 0%, rgba(0,0,100,0.90) 100%) no-repeat; + *background-color: #030; +} +.humane.humane-success { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWNgSGH4z8TAACEYUAkixMjUNsjEGFHF/g8ip1FVbGCcgS04GannBaoaT1wCwWkvmXbQ2HgGBgYA8Yw6v+m4Kh8AAAAASUVORK5CYII='); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006400), color-stop(1, rgba(0,100,0,0.90))) no-repeat; + background: -moz-linear-gradient(top, #006400 0%, rgba(0,100,0,0.90) 100%) no-repeat; + background: -webkit-linear-gradient(top, #006400 0%, rgba(0,100,0,0.90) 100%) no-repeat; + background: -ms-linear-gradient(top, #006400 0%, rgba(0,100,0,0.90) 100%) no-repeat; + background: -o-linear-gradient(top, #006400 0%, rgba(0,100,0,0.90) 100%) no-repeat; + background: linear-gradient(top, #006400 0%, rgba(0,100,0,0.90) 100%) no-repeat; + *background-color: #030; +} +.humane.humane-error { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWNIYWD4z8QAJRhQCSLEyNQ2uMQYUcX+DyKnUVdsQJyBLTgZqecF6hpPVALBaS+ZdtDYeAYGBgYA9vA6v4OR3MkAAAAASUVORK5CYII='); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #640000), color-stop(1, rgba(100,0,0,0.90))) no-repeat; + background: -moz-linear-gradient(top, #640000 0%, rgba(100,0,0,0.90) 100%) no-repeat; + background: -webkit-linear-gradient(top, #640000 0%, rgba(100,0,0,0.90) 100%) no-repeat; + background: -ms-linear-gradient(top, #640000 0%, rgba(100,0,0,0.90) 100%) no-repeat; + background: -o-linear-gradient(top, #640000 0%, rgba(100,0,0,0.90) 100%) no-repeat; + background: linear-gradient(top, #640000 0%, rgba(100,0,0,0.90) 100%) no-repeat; + *background-color: #300; +} +.humane.humane-animate { + opacity: 1; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + -moz-transform: scale(1); + -webkit-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); +} +.humane.humane-animate:hover { + opacity: 0.6; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); + -moz-transform: scale(0.8); + -webkit-transform: scale(0.8); + -ms-transform: scale(0.8); + -o-transform: scale(0.8); + transform: scale(0.8); +} +.humane.humane-js-animate { + opacity: 1; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + -moz-transform: scale(1); + -webkit-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); +} +.humane.humane-js-animate:hover { + opacity: 0.6; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); +}