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

first design

Browse Source
php
Marc Wäckerlin 9 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
Split 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)">
<label for="recv">receiver:</label> <input type="text" id="recv" oninput="checkpartner(this.value)" autofocus/>
<label for="msg">message:</label> <input type="text" id="msg"/>
<form id="chat" autocomplete="off" onsubmit="sendmessage(this.elements['recv'].value, this.elements['msg'].value)">
<input placeholder="receiver" autocomplete="off" type="text" id="recv" oninput="checkpartner(this.value)" />
<input placeholder="message" autocomplete="off" type="text" id="msg"/>
<input type="submit" id="send" disabled/>
</form>
<table id="msgs"></table>
<div id="msgs"></div>

5
html/index.html
Unescape View File

@ -2,6 +2,7 @@
<html>
<head>
<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" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="openpgp.js"></script>
@ -13,7 +14,9 @@
<body>
<h1>Safe Chat</h1>
<div id="header">
<h1>Safe Chat</h1>
</div>
<div id="main">

12
html/newuser.html
Unescape View File

@ -1,10 +1,8 @@
<h2>Create New 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>
<h2>Register User (Step 1 of 1)</h2>
<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/>
<label for="pwd">Password:</label><input 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="user name" type="text" id="user" oninput="checkuser(this.value)"/>
<input placeholder="password" type="password" id="pwd" oninput="checkpwd(this.value, document.getElementById('pwd2').value)"/>
<input placeholder="repeat password" type="password" id="pwd2" oninput="checkpwd(document.getElementById('pwd').value, this.value)"/>
<input id="createuser" type="submit" disabled/>
</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>Be careful: You won't be able to change the user name, nor the password later.</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>

110
html/safechat.css
Unescape View File

@ -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;
}

34
html/safechat.js
Unescape View File

@ -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("<tr><td>"
+e["id"]
+"</td><td>"
+(new Date(1000*Number(e["time"]))).toLocaleString()
+'</td><td><a href="javascript:void(0)" onclick="setreceiver(this.innerHTML)">'
+e["user"]
+"</a></td><td>"
+(msg.signatures[0].valid?"✔":"✘")
+'</td><td class="msg">'
+msg.text
+"</td></tr>");
$("#msgs") // todo: check msg.signatures[0].valid
.prepend('<div id="id'+(e["id"])+'" class="msg '+
(e["user"]==userid()?"me":"other")+
'"><div class="header">'+
'<span class="date">'+
(new Date(1000*Number(e["time"]))).toLocaleString()+
'</span><span class="sender">'+
'<a href="javascript:void(0)" onclick="setreceiver(this.innerHTML)">'+
e["user"]+
'</a></span></div><div class="text">'+
msg.text+
'</div></div><div class="clear"/>');
$('#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('<form>'+
' <label for="pwd">password for '+userid()+':</label>'+
' <input id="pwd" oninput="setpw(this.value)" type="password" autofocus/>'+
' <input placeholder="password for '+userid()+
'" id="pwd" oninput="setpw(this.value)" type="password" />'+
'</form>');
}

Write Preview
Loading…
Cancel
Save