Login dialog in javascript

2 files changed, 27 insertions, 2 deletions

diff --git a/web/scripts3.js b/web/scripts3.js
index bf283594..ca111020 100644
--- a/web/scripts3.js
+++ b/web/scripts3.js
@@ -212,6 +212,22 @@ function checkUsername() {
 
 /******************************************************************************/
 
+function openDialogLogin() {
+    var html='<div class="dialoglogin"><p>Пожалуйста, представьтесь:'
+    +'<a href="/_fblogin" id="signfb">Facebook</a> '
+    +'<a href="/_vklogin" id="signvk">ВКонтакте</a></p>'
+    +'<p>Уже зарегистрированы?</p>'
+    +'<form action="/login" method="POST">'
+    +'<input class="signinput" type="text" name="username" placeholder="Имя пользователя"/><br/>'
+    +'<input class="signinput" type="password" name="password" placeholder="Пароль"/><br/>'
+    +'<input class="signsubmit" type="submit" value="OK"/>'
+    +'</form></div>';
+    openDialog(html);
+    return false;
+}
+
+/******************************************************************************/
+
 function setPopular(e,mid,popular) {
     $.ajax('http://api.juick.com/messages/set_popular?mid='+mid+'&popular='+popular+'&hash='+hash).done(function() {
         var a=$(e).closest("article");
diff --git a/web/style3.css b/web/style3.css
index f2a16f8a..43af1fdc 100644
--- a/web/style3.css
+++ b/web/style3.css
@@ -154,6 +154,15 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef
 #dialogw { position: relative; display: inline-block; text-align: left; z-index: 11; }
 #dialogc { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; z-index: 12; cursor: pointer; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAEEElEQVQ4y32Va2yTVRzGf23fd10vUNqxsY1dGIyba7BsTgiwhcRkgxHkFkJAuQzIggY0IXGYkKA4DeAQMQTIiIB+MyRAJn7hAxJRJKIRiJgQIhESZxYFEuja9f74oe1aoPh/vrx5z3nO/3qeA0+aBSvW+UaT2VBUb+91HXY3FDUUNZnzDaxYsfBcs2DDpHjqqC1ln07YU79t0oGX+mY1V3dWv1/VWVrqphgTW+EDLBjYS91tZZ/5v+34d1/sijIWv/bw2IXFy2urfKVu7BjP0q0YOCaMWVlzfF7wdJY2mLybzH4/+mpq3cxKrwcHBtanvTqrfK/X97+avCvFUn2xtjDBNJpDn8SGU1Ls+oXVTTUeL8587xYMHKN97fWnlikqnU/UDmWJWUwL/ZKQpPOvTZvg8eLI0W3Y8cyo+3hB4p50MmYLUgC24EdRSTq6rLIaD/Z06SyYuMdWvjnv4TfS+URhahpHYlLwR16gHDcmVrBSPNrXOv2LTimUrMoE3BiaO5Jz2dCmiDNIkGBRcCAuffde1WR8FGMDKy5n5cp5f34pHYqlt/tDkrQ7SpDgxNBASurLrHRFpPsXmUEFbgyw4fFM7FgQvi7NznirHQorTZ8cGkhJUm80vVIylJA0ppU6xlAEBiXj/EvWSI+TuewWhdP0xylJOhPPVeJGVNqxbdQ0xlIMprusoXnzW9LtRH5xFoUjmfHIpxL8Oiod3ed6kXE4wHRW+Od0dku/J57s7P1UmvxBNP//2ah0+CCNVOICk8qyOS3bpAeJfOpgSpISypUujZ+GpXd6HC8zPkM2Z9Vtiv0jZRvlGRrM5Lo4k/vWSHZUHsWlGW+YI+QKs7lh/Z1L0tuZLbPDuVzTpTsVT6+0haXB31hNUzbsMjMwZdWBz6XBuDOY7efWiG3kYuyOZmO6FJLOnWM5mYIZlDDd3lHVPXAt18/C2DAsBf8u2cECpqdbZcNDndHi27S5T5I2DD+POjccT0qHz9JJS3ZIrLioIGBbNu7dI6claVdB72uHI0np8lW6WUIgO55WivFRT6ttvffDQ/2SdCuyatiZR2wLXwlL0uVf6WEdrdRnL4YFEzfl+Gm3dXn2bun/67YkRZI3oscjxyM/Rx7FJenBwP6L7KWLdvy5K5kRA6qZSYety9nDiYM//HFLeXbvzsmr5kl66KKDmeSJQUaG8FJDgHbW0e3YzwnPmVe+33lz582Oy+P7OcF+ullHOwFqeEKGMgKIl2r8tLCUjWxnl7HH6KXX2GPdxXY2spQW/FTzlACOSC8eyplEgBYWsoI1rGUta1jBQloIMIlyCkhv9r2w48JLObVMwU+ARhoJ4GcKtZTjxZXL9Vm6BSsGJnYcOHFl4MSBHRMDK5b/e69yxzyNAvYf9TCL+HAwka4AAAAASUVORK5CYII="); }
 
+.dialoglogin { width: 300px; background: #EEEEE5; padding: 25px; }
+#signfb,#signvk { display: block; width: 100%; height: 32px; line-height: 32px; text-indent: 37px; text-decoration: none; overflow: hidden; margin: 10px 0; }
+#signfb { color: #FFF; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAADNQTFRFO1edX3ewl6bLnKrOoK3QrrrYvMXe2N7r3OLu3+Tv5urz7O/29vf6+Pn7+vv9/Pz9////ykQjsQAAAEZJREFUOMtjYBgFuAATO68ADxdOaUYuATDAqYBbAL8CFgECCjiBcqz4XMiPz3oQEKCtAgEkwEdIAQchBWyEFDAPkDdHsAIAhZkIwz/VK/UAAAAASUVORK5CYII=") no-repeat #3A569C; }
+#signvk { margin-bottom: 30px; color: #FFF; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAHJQTFRFbY+zbo+zbpCzb5C0cpO1c5O2dZW3dpa4e5m6gJ29gZ69lq/In7bNo7jPrcDUs8XXvs3dv87dy9fkztnlz9rm0Nrm093o1N7o1+Dq3OTt3ubu4Ofv5Orw7fH27vL28PP38vX49Pb5+vv8+/z9/Pz9////2jSYlQAAAG5JREFUOMvtkEcOgDAMBE3vvXdIyP+/iMMRKfYHmMtcRtE6AD8f1Is8pyKgAs0RGYO2HSWqMQaoBHVRgYsS3AsrtyFlrqgdJlCLb95gxQO6IkZCqL+KCjz0TQU5ejOf2a3aJXPF7BOB2PvMhp8PDzGRFgEe7xvEAAAAAElFTkSuQmCC") no-repeat #6d8fb3; }
+.dialoglogin form { margin-top: 7px; }
+.signinput,.signsubmit { border: 1px solid #CCC; margin: 3px 0; padding: 3px; }
+.signinput { width: 292px; }
+.signsubmit { width: 70px; }
+
 .dialogshare { padding: 20px; background: #EEEEE5; border: 1px solid #999; min-width: 300px; overflow: auto; }
 .dialogl { padding: 5px; margin: 3px 0 20px; border: 1px solid #DDD; background: #F5F5E9; }
 .dialogshare li { float: left; margin: 5px 10px 0 0; }
@@ -192,9 +201,9 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef
     article>nav.s { display: block; }
     article textarea { width: 205px; }
     article footer { float: left; }
-    
+
     #content textarea { width: 100%; }
-    
+
     .msg,.msg-cont { width: auto; min-width: 280px; }
     .msg-cont,.ads { margin-left: 0; }
     .msg-avatar { margin: 10px 10px 0 10px; width: 40px; height: 40px; }