webservices
/
safechat
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first design

Browse Source
php
Marc Wäckerlin 10 years ago
parent 4dfe4d14a1
commit 0758a9d217
5 changed files with 134 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      html/chat.html
  2. 5
      html/index.html
  3. 12
      html/newuser.html
  4. 110
      html/safechat.css
  5. 34
      html/safechat.js

8
html/chat.html
Unescape View File

@ -1,6 +1,6 @@
<form id="chat" onsubmit="sendmessage(this.elements['recv'].value, this.elements['msg'].value)"> <form id="chat" autocomplete="off" onsubmit="sendmessage(this.elements['recv'].value, this.elements['msg'].value)">
<label for="recv">receiver:</label> <input type="text" id="recv" oninput="checkpartner(this.value)" autofocus/> <input placeholder="receiver" autocomplete="off" type="text" id="recv" oninput="checkpartner(this.value)" />
<label for="msg">message:</label> <input type="text" id="msg"/> <input placeholder="message" autocomplete="off" type="text" id="msg"/>
<input type="submit" id="send" disabled/> <input type="submit" id="send" disabled/>
</form> </form>
<table id="msgs"></table> <div id="msgs"></div>

5
html/index.html
Unescape View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1" />
<link href="safechat.css" rel="stylesheet" type="text/css" /> <link href="safechat.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="openpgp.js"></script> <script type="text/javascript" src="openpgp.js"></script>
@ -13,7 +14,9 @@
<body> <body>
<h1>Safe Chat</h1> <div id="header">
<h1>Safe Chat</h1>
</div>
<div id="main"> <div id="main">

12
html/newuser.html
Unescape View File

@ -1,10 +1,8 @@
<h2>Create New User (Step 1 of 1)</h2> <h2>Register User (Step 1 of 1)</h2>
<p>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.</p>
<form id="register" onsubmit="createNewUser(this.elements['user'].value, this.elements['pwd'].value)"> <form id="register" onsubmit="createNewUser(this.elements['user'].value, this.elements['pwd'].value)">
<label for="user">User Name:</label><input type="text" id="user" oninput="checkuser(this.value)" autofocus/> <input placeholder="user name" type="text" id="user" oninput="checkuser(this.value)"/>
<label for="pwd">Password:</label><input type="password" id="pwd" oninput="checkpwd(this.value, document.getElementById('pwd2').value)"/> <input placeholder="password" type="password" id="pwd" oninput="checkpwd(this.value, document.getElementById('pwd2').value)"/>
<label for="pwd2">Repeat Password:</label><input type="password" id="pwd2" oninput="checkpwd(document.getElementById('pwd').value, this.value)"/> <input placeholder="repeat password" type="password" id="pwd2" oninput="checkpwd(document.getElementById('pwd').value, this.value)"/>
<input id="createuser" type="submit" disabled/> <input id="createuser" type="submit" disabled/>
</form> </form>
<p>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.</p> <p>Please chose any username, e.g. a pseudonym, your e-mail, your phone number, your real name, and chose a safe password.</p>
<p>Be careful: You won't be able to change the user name, nor the password later.</p>

110
html/safechat.css
Unescape View File

@ -3,8 +3,62 @@
padding: 0; 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 { #status {
position: absolute; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -12,6 +66,13 @@
padding: 0 1em 0 1em; padding: 0 1em 0 1em;
text-align: right; text-align: right;
} }
@media (min-width: 45em) {
#status {
bottom: auto;
left: auto;
top: 0;
}
}
#status.error { #status.error {
background-color: lightred; background-color: lightred;
} }
@ -21,12 +82,47 @@
#status.success { #status.success {
background-color: lightgreen; background-color: lightgreen;
} }
#main { #main {
border: .1em solid blue; padding: 2em 1em 2em 1em;
background-color: lightblue; }
border-radius: 1em;
-webkit-border-radius: 1em; .clear {
clear: both;
}
#msgs .msg {
border: 1px solid black;
margin: 1ex;
padding: 1ex;
border-radius: 2ex;
-moz-border-radius: 1em; -moz-border-radius: 1em;
margin: 1em; -webkit-border-radius: 1em;
padding: 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;
} }

34
html/safechat.js
Unescape View File

@ -59,7 +59,9 @@ function status(text, msg) {
$("#main").fadeOut("slow", function() { $("#main").fadeOut("slow", function() {
$("#main").html(text); $("#main").html(text);
success(msg); success(msg);
$("#main").fadeIn("slow"); $("#main").fadeIn("slow", function() {
$("form input:first-child").focus();
})
}); });
} }
@ -174,18 +176,19 @@ function get() {
if (privkey.decrypt(password)) if (privkey.decrypt(password))
openpgp.decryptAndVerifyMessage(privkey, key.keys, message) openpgp.decryptAndVerifyMessage(privkey, key.keys, message)
.then(function(msg) { .then(function(msg) {
$("#msgs") $("#msgs") // todo: check msg.signatures[0].valid
.prepend("<tr><td>" .prepend('<div id="id'+(e["id"])+'" class="msg '+
+e["id"] (e["user"]==userid()?"me":"other")+
+"</td><td>" '"><div class="header">'+
+(new Date(1000*Number(e["time"]))).toLocaleString() '<span class="date">'+
+'</td><td><a href="javascript:void(0)" onclick="setreceiver(this.innerHTML)">' (new Date(1000*Number(e["time"]))).toLocaleString()+
+e["user"] '</span><span class="sender">'+
+"</a></td><td>" '<a href="javascript:void(0)" onclick="setreceiver(this.innerHTML)">'+
+(msg.signatures[0].valid?"✔":"✘") e["user"]+
+'</td><td class="msg">' '</a></span></div><div class="text">'+
+msg.text msg.text+
+"</td></tr>"); '</div></div><div class="clear"/>');
$('#id'+(e["id"])).emoticonize();
if (!beeped) if (!beeped)
(new Audio("A-Tone-His_Self-1266414414.mp3")) (new Audio("A-Tone-His_Self-1266414414.mp3"))
.play(); .play();
@ -200,7 +203,6 @@ function get() {
}); });
}); });
} }
if (beeped) $(".msg").emoticonize(); // only if new messages added
setTimeout(get, 10000); setTimeout(get, 10000);
}).fail(error); }).fail(error);
} }
@ -243,8 +245,8 @@ function setpw(pwd) {
function getpwd() { function getpwd() {
status('<form>'+ status('<form>'+
' <label for="pwd">password for '+userid()+':</label>'+ ' <input placeholder="password for '+userid()+
' <input id="pwd" oninput="setpw(this.value)" type="password" autofocus/>'+ '" id="pwd" oninput="setpw(this.value)" type="password" />'+
'</form>'); '</form>');
} }

Write Preview
Loading…
Cancel
Save