diff --git a/html/chat.html b/html/chat.html index b79bf2f..5aedfdf 100644 --- a/html/chat.html +++ b/html/chat.html @@ -1,6 +1,6 @@ -
- - + + +
-
+
diff --git a/html/index.html b/html/index.html index 18bd508..a025647 100644 --- a/html/index.html +++ b/html/index.html @@ -2,6 +2,7 @@ + @@ -13,7 +14,9 @@ -

Safe Chat

+
diff --git a/html/newuser.html b/html/newuser.html index 7f65e6e..ac25b55 100644 --- a/html/newuser.html +++ b/html/newuser.html @@ -1,10 +1,8 @@ -

Create New User (Step 1 of 1)

-

Welcome to Safechat. Yor are here for the first time, at least with this browser. We do not collect your private data. Please chose any username, either a pseudony or your real name, and chose a safe password.

+

Register User (Step 1 of 1)

- - - + + +
-

Please choose any user name and a safe password. Chose a user name so, that your friends can find you, for example your real name, email address or phone number.

-

Be careful: You won't be able to change the user name, nor the password later.

+

Please chose any username, e.g. a pseudonym, your e-mail, your phone number, your real name, and chose a safe password.

diff --git a/html/safechat.css b/html/safechat.css index 24fa352..5cb690f 100644 --- a/html/safechat.css +++ b/html/safechat.css @@ -3,8 +3,62 @@ padding: 0; } +p { + padding: .5em 0 1em 0; +} + +form { + padding: .5em 0 1em 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; +} + +@media (max-width: 45em) { + form { + flex-direction: column; + flex-wrap: wrap; + } +} + +form > * { + flex-grow: 1; +} +form input[type="submit"] { + flex-grow: 0; +} +form input#msg { + flex-grow: 4; +} + +table { + width: 100%; +} +tr { + display: flex; + align-items: stretch; +} +td:last-child { + flex:1; /* last td to fill remaining width */ +} + +#header { + position: fixed; + left: 0; + right: 0; + top: 0; + margin: 0; + padding: 0 1em 0 1em; + background-color: green; + color: white; +} +#header h1 { + font-weight: bold; + font-size: 100%; +} + #status { - position: absolute; + position: fixed; left: 0; right: 0; bottom: 0; @@ -12,6 +66,13 @@ padding: 0 1em 0 1em; text-align: right; } +@media (min-width: 45em) { + #status { + bottom: auto; + left: auto; + top: 0; + } +} #status.error { background-color: lightred; } @@ -21,12 +82,47 @@ #status.success { background-color: lightgreen; } + #main { - border: .1em solid blue; - background-color: lightblue; - border-radius: 1em; - -webkit-border-radius: 1em; + padding: 2em 1em 2em 1em; +} + +.clear { + clear: both; +} +#msgs .msg { + border: 1px solid black; + margin: 1ex; + padding: 1ex; + border-radius: 2ex; -moz-border-radius: 1em; - margin: 1em; - padding: 1em; + -webkit-border-radius: 1em; +} +#msgs .me { + float: left; +} +#msgs .other { + float: right; +} +#msgs .msg .header { + border-bottom: 1px solid black; + margin-bottom: .25ex; + padding-bottom: .25ex; + position: relative; + height: 1em; +} +#msgs .msg .header .date { + font-size: xx-small; + float: left; + /*position: absolute; + left: 0;*/ +} +#msgs .msg .header .sender { + font-size: small; + float: right; + /*position: absolute; + right: 0;*/ +} +#msgs .msg .text { + float: left; } diff --git a/html/safechat.js b/html/safechat.js index ce5c6c2..f74afae 100644 --- a/html/safechat.js +++ b/html/safechat.js @@ -59,7 +59,9 @@ function status(text, msg) { $("#main").fadeOut("slow", function() { $("#main").html(text); success(msg); - $("#main").fadeIn("slow"); + $("#main").fadeIn("slow", function() { + $("form input:first-child").focus(); + }) }); } @@ -174,18 +176,19 @@ function get() { if (privkey.decrypt(password)) openpgp.decryptAndVerifyMessage(privkey, key.keys, message) .then(function(msg) { - $("#msgs") - .prepend("" - +e["id"] - +"" - +(new Date(1000*Number(e["time"]))).toLocaleString() - +'' - +e["user"] - +"" - +(msg.signatures[0].valid?"✔":"✘") - +'' - +msg.text - +""); + $("#msgs") // todo: check msg.signatures[0].valid + .prepend('
'+ + ''+ + (new Date(1000*Number(e["time"]))).toLocaleString()+ + ''+ + ''+ + e["user"]+ + '
'+ + msg.text+ + '
'); + $('#id'+(e["id"])).emoticonize(); if (!beeped) (new Audio("A-Tone-His_Self-1266414414.mp3")) .play(); @@ -200,7 +203,6 @@ function get() { }); }); } - if (beeped) $(".msg").emoticonize(); // only if new messages added setTimeout(get, 10000); }).fail(error); } @@ -243,8 +245,8 @@ function setpw(pwd) { function getpwd() { status('
'+ - ' '+ - ' '+ + ' '+ '
'); }