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("'+
+ ''+
+ (new Date(1000*Number(e["time"]))).toLocaleString()+
+ ''+
+ ''+
+ e["user"]+
+ '
'+
+ msg.text+
+ '