💄 Rend l'alerte un peu plus belle

css/alertify.css

@@ -0,0 +1,158 @@
+.alertify,
+.alertify-show {
+  -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
+  -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
+  -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
+  -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
+  transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
+}
+.alertify-hide {
+  -webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
+  -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
+  -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
+  -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
+  transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
+}
+.alertify-cover {
+  background-color: black;
+  /* IE8 */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+  /* IE8 */
+  background-color: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  /*display: none;*/
+  z-index: 10000;
+}
+.alertify-cover-hidden {
+  display: none;
+}
+.alertify {
+  width: 250px;
+  padding: 20px;
+  background: rgb(255, 255, 255) none repeat scroll 0 0;
+  display: block;
+  min-height: 150px;
+  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
+  border-radius: 5px;
+  box-sizing: border-box;
+  text-align: center;
+  margin: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  z-index: 99999;
+  top: 50px; left: 50%;
+  margin-left: -275px;
+  opacity: 1;
+}
+.alertify-hidden {
+  -webkit-transform: translate(0,-150px);
+  -moz-transform: translate(0,-150px);
+  -ms-transform: translate(0,-150px);
+  -o-transform: translate(0,-150px);
+  transform: translate(0,-150px);
+  opacity: 0;
+  display: none;
+}
+/* overwrite display: none; for everything except IE6-8 */
+:root *> .alertify-hidden {
+  display: block;
+  visibility: hidden;
+}
+.alertify-dialog {
+  padding: 25px;
+}
+.alertify-resetFocus {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+.alertify-inner {
+  text-align: center;
+}
+.alertify-text, .alertify-message {
+  display: block;
+  font-size: 18px;
+  text-align: center;
+  font-weight: 300;
+  position: relative;
+  float: none;
+  margin: 0;
+  padding: 0;
+  line-height: normal;
+  color: #545454;
+}
+.alertify-buttons {
+}
+.alertify-button,
+.alertify-button:hover,
+.alertify-button:active,
+.alertify-button:visited {
+  background-color: rgb(43, 120, 193);
+  border-left-color: rgb(48, 133, 214);
+  border-right-color: rgb(48, 133, 214);
+  border: 0;
+  border-radius: 3px;
+  box-shadow: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 17px;
+  font-weight: 500;
+  margin: 0 5px;
+  padding: 10px 32px;
+  white-space: nowrap;
+  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
+  text-align: center;
+}
+.alertify-button:focus {
+  outline: none;
+  box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
+.alertify-button:hover {
+  background-color: #7ecff4; }
+.alertify-button:active {
+  background-color: #5dc2f1; }
+.alertify-button.cancel {
+  background-color: #C1C1C1; }
+.alertify-button.cancel:hover {
+  background-color: #b9b9b9; }
+.alertify-button.cancel:active {
+  background-color: #a8a8a8; }
+.alertify-button.cancel:focus {
+  box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px
+  inset !important; }
+@media only screen and (max-width: 680px) {
+  .alertify {
+    width: 90%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .alertify {
+    left: 5%;
+    margin: 0;
+  }
+}
+.alertify-button:hover,
+.alertify-button:focus {
+  outline: none;
+  background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
+  background-image:    -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
+  background-image:     -ms-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
+  background-image:      -o-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
+  background-image:         linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
+}
+.alertify-button-ok,
+.alertify-button-ok:hover,
+.alertify-button-ok:focus {
+  background-color: #5CB811;
+  border: 1px solid #3B7808;
+}

index.php

@@ -3,11 +3,35 @@ ini_set("display_errors", "off");
 ini_set("log_errors", "on");
 ini_set('error_log', dirname(__FILE__) . '/log.log');
 
-$config = include 'config.php';
+$config = include dirname(__FILE__) . '/config.php';
 
 // launch by bookmarklet
 if (isset($_GET['v'])) {
     header("Content-type: text/javascript");
+    echo 'function loadScript( url, callback ) {
+  var script = document.createElement("script");
+  script.type = "text/javascript";
+  if(script.readyState) {  //IE
+    script.onreadystatechange = function() {
+      if ( script.readyState === "loaded" || script.readyState === "complete" ) {
+        script.onreadystatechange = null;
+        callback();
+      }
+    };
+  } else {  //Others
+    script.onload = function() {
+      callback();
+    };
+  }
+
+  script.src = url;
+  document.head.appendChild(script);
+}';
+    echo 'var style = document.createElement("link");
+      style.rel = "stylesheet";
+      style.type = "text/css";
+      style.href = "//' . $_SERVER['HTTP_HOST'].'/css/alertify.css";
+      document.head.appendChild(style);';
     $email      = isset($_GET['m']) ? $_GET['m'] : '';
     $url        = isset($_GET['u']) ? $_GET['u'] : '';
     $title      = isset($_GET['t']) ? $_GET['t'] : '';
@@ -44,7 +68,8 @@ if (isset($_GET['v'])) {
             else
                 $mail->Body = '<hr/>' . nl2br($body) . '<hr/>';
             if ($mail->send()) {
-                echo 'alert("Email Sent.");';
+                echo 'loadScript("//' . $_SERVER['HTTP_HOST'].' /js/alertify.min.js",
+function() { alertify.alert("Email Sent."); });';
             } else {
                 echo ':(';
             }
@@ -73,7 +98,7 @@ if (isset($_GET['v'])) {
         if ($_POST['html'] == 'on') { // bookmarklet pour l'envoi en HTML
             $include = '<a href="javascript:void((function(){if(typeof(jQuery)!=\'function\'){var%20n=document.createElement(\'script\');n.setAttribute(\'src\',\'//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js\');document.getElementsByTagName(\'head\')[0].appendChild(n);}function%20v(){if(typeof(jQuery)==\'function\'){clearInterval(i);c();}}var%20i=window.setInterval(v,100);function%20c(){q=\'\';function%20gx(el){el=el.get(0);xp=\'\';for(;el&&el.nodeType==1;el=el.parentNode){id=jQuery(el.parentNode).children(el.tagName).index(el)+1;id>1?(id=\'[\'+id+\']\'):(id=\'\');xp=\'/\'+el.tagName.toLowerCase()+id+xp;}return%20xp;}jQuery(\'*\').bind(\'mouseenter\',function(){jQuery(\'*\').removeClass(\'shikihover\');jQuery(\'*\').css(\'border\',\'\');jQuery(this).css(\'border\',\'3px%20solid%20yellow\');jQuery(this).addClass(\'shikihover\');});jQuery(\'.shikihover\').live(\'click\',function(){jQuery(\'*\').unbind(\'mouseenter\').removeClass(\'shikihover\');jQuery(this).css(\'border\',\'\');var%20q=\'&q=\'+gx(jQuery(this)),d=document,t=d.title,f=\'//' . $_SERVER['HTTP_HOST'] . substr($_SERVER[PHP_SELF], 0, -9) . '\',m=\'' . $_POST['email'] . '\',l=d.location,e=encodeURIComponent,p=\'?v=1&u=\'+e(l.href)+\'&t=\'+e(t)+\'&m=\'+e(m),u=f+p+q;newScript=d.createElement(\'script\');newScript.type=\'text/javascript\';newScript.src=u;d.body.appendChild(newScript);});}})())">Bookmark by email</a>';
         } else { // bookmarklet pour l'envoi normal
-            $include = "<a href='javascript:var%20d=document,t=d.title,f=\"//" . $_SERVER['HTTP_HOST'] . substr($_SERVER[PHP_SELF], 0, -9) . "\",m=\"" . $_POST['email'] . "\",l=d.location,e=encodeURIComponent,p=\"?v=1&u=\"+e(l.href)+\"&t=\"+e(t)+\"&m=\"+e(m),u=f+p;var%20ns=document.createElement(\"script\");ns.type=\"text/javascript\";ns.src=u;document.body.appendChild(ns);void(0)'>Bookmark by email</a>";
+            $include = "<a href='javascript:var%20d=document,t=d.title,f=\"//" . $_SERVER['HTTP_HOST'] . substr($_SERVER['PHP_SELF'], 0, -9) . "\",m=\"" . $_POST['email'] . "\",l=d.location,e=encodeURIComponent,p=\"?v=1&u=\"+e(l.href)+\"&t=\"+e(t)+\"&m=\"+e(m),u=f+p;var%20ns=document.createElement(\"script\");ns.type=\"text/javascript\";ns.src=u;document.body.appendChild(ns);void(0)'>Bookmark by email</a>";
         }
 
         //ADDING STATS

js/alertify.min.js

@@ -0,0 +1,2 @@
+/*! alertify - v0.3.11 - 2013-10-08 */
+!function(a,b){"use strict";var c,d=a.document;c=function(){var c,e,f,g,h,i,j,k,l,m,n,o,p,q={},r={},s=!1,t={ENTER:13,ESC:27,SPACE:32},u=[];return r={buttons:{holder:'<nav class="alertify-buttons">{{buttons}}</nav>',submit:'<button type="submit" class="alertify-button alertify-button-ok" id="alertify-ok">{{ok}}</button>',ok:'<button class="alertify-button alertify-button-ok" id="alertify-ok">{{ok}}</button>',cancel:'<button class="alertify-button alertify-button-cancel" id="alertify-cancel">{{cancel}}</button>'},input:'<div class="alertify-text-wrapper"><input type="text" class="alertify-text" id="alertify-text"></div>',message:'<p class="alertify-message">{{message}}</p>',log:'<article class="alertify-log{{class}}">{{message}}</article>'},p=function(){var a,c,e=!1,f=d.createElement("fakeelement"),g={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",transition:"transitionend"};for(a in g)if(f.style[a]!==b){c=g[a],e=!0;break}return{type:c,supported:e}},c=function(a){return d.getElementById(a)},q={labels:{ok:"OK",cancel:"Cancel"},delay:5e3,buttonReverse:!1,buttonFocus:"ok",transition:b,addListeners:function(a){var b,c,i,j,k,l="undefined"!=typeof f,m="undefined"!=typeof e,n="undefined"!=typeof o,p="",q=this;b=function(b){return"undefined"!=typeof b.preventDefault&&b.preventDefault(),i(b),"undefined"!=typeof o&&(p=o.value),"function"==typeof a&&("undefined"!=typeof o?a(!0,p):a(!0)),!1},c=function(b){return"undefined"!=typeof b.preventDefault&&b.preventDefault(),i(b),"function"==typeof a&&a(!1),!1},i=function(){q.hide(),q.unbind(d.body,"keyup",j),q.unbind(g,"focus",k),l&&q.unbind(f,"click",b),m&&q.unbind(e,"click",c)},j=function(a){var d=a.keyCode;(d===t.SPACE&&!n||n&&d===t.ENTER)&&b(a),d===t.ESC&&m&&c(a)},k=function(){n?o.focus():!m||q.buttonReverse?f.focus():e.focus()},this.bind(g,"focus",k),this.bind(h,"focus",k),l&&this.bind(f,"click",b),m&&this.bind(e,"click",c),this.bind(d.body,"keyup",j),this.transition.supported||this.setFocus()},bind:function(a,b,c){"function"==typeof a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,c)},handleErrors:function(){if("undefined"!=typeof a.onerror){var b=this;return a.onerror=function(a,c,d){b.error("["+a+" on line "+d+" of "+c+"]",0)},!0}return!1},appendButtons:function(a,b){return this.buttonReverse?b+a:a+b},build:function(a){var b="",c=a.type,d=a.message,e=a.cssClass||"";switch(b+='<div class="alertify-dialog">',b+='<a id="alertify-resetFocusBack" class="alertify-resetFocus" href="#">Reset Focus</a>',"none"===q.buttonFocus&&(b+='<a href="#" id="alertify-noneFocus" class="alertify-hidden"></a>'),"prompt"===c&&(b+='<div id="alertify-form">'),b+='<article class="alertify-inner">',b+=r.message.replace("{{message}}",d),"prompt"===c&&(b+=r.input),b+=r.buttons.holder,b+="</article>","prompt"===c&&(b+="</div>"),b+='<a id="alertify-resetFocus" class="alertify-resetFocus" href="#">Reset Focus</a>',b+="</div>",c){case"confirm":b=b.replace("{{buttons}}",this.appendButtons(r.buttons.cancel,r.buttons.ok)),b=b.replace("{{ok}}",this.labels.ok).replace("{{cancel}}",this.labels.cancel);break;case"prompt":b=b.replace("{{buttons}}",this.appendButtons(r.buttons.cancel,r.buttons.submit)),b=b.replace("{{ok}}",this.labels.ok).replace("{{cancel}}",this.labels.cancel);break;case"alert":b=b.replace("{{buttons}}",r.buttons.ok),b=b.replace("{{ok}}",this.labels.ok)}return l.className="alertify alertify-"+c+" "+e,k.className="alertify-cover",b},close:function(a,b){var c,d,e=b&&!isNaN(b)?+b:this.delay,f=this;this.bind(a,"click",function(){c(a)}),d=function(a){a.stopPropagation(),f.unbind(this,f.transition.type,d),m.removeChild(this),m.hasChildNodes()||(m.className+=" alertify-logs-hidden")},c=function(a){"undefined"!=typeof a&&a.parentNode===m&&(f.transition.supported?(f.bind(a,f.transition.type,d),a.className+=" alertify-log-hide"):(m.removeChild(a),m.hasChildNodes()||(m.className+=" alertify-logs-hidden")))},0!==b&&setTimeout(function(){c(a)},e)},dialog:function(a,b,c,e,f){j=d.activeElement;var g=function(){m&&null!==m.scrollTop&&k&&null!==k.scrollTop||g()};if("string"!=typeof a)throw new Error("message must be a string");if("string"!=typeof b)throw new Error("type must be a string");if("undefined"!=typeof c&&"function"!=typeof c)throw new Error("fn must be a function");return this.init(),g(),u.push({type:b,message:a,callback:c,placeholder:e,cssClass:f}),s||this.setup(),this},extend:function(a){if("string"!=typeof a)throw new Error("extend method must have exactly one paramter");return function(b,c){return this.log(b,a,c),this}},hide:function(){var a,b=this;u.splice(0,1),u.length>0?this.setup(!0):(s=!1,a=function(c){c.stopPropagation(),b.unbind(l,b.transition.type,a)},this.transition.supported?(this.bind(l,this.transition.type,a),l.className="alertify alertify-hide alertify-hidden"):l.className="alertify alertify-hide alertify-hidden alertify-isHidden",k.className="alertify-cover alertify-cover-hidden",j.focus())},init:fuLine truncated