profile download implemented; closes #15

php
Marc Wäckerlin 9 years ago
parent 32acb4e442
commit e1f0c81415
  1. 9
      html/index.html.in
  2. 6
      html/menu.svg
  3. 33
      html/safechat.css
  4. 28
      html/safechat.js

@ -16,8 +16,17 @@
<div id="header"> <div id="header">
<h1>Safe Chat @PACKAGE_VERSION@</h1> <h1>Safe Chat @PACKAGE_VERSION@</h1>
<div id="togglemenu">
<span id="username">[unknown]</span>
<img onclick="togglemenu()" src="menu.svg" />
</div>
</div> </div>
<ul id="menu" style="display: none">
<li onclick="backup()">Backup</li>
<li onclick="restore()">Restore</li>
</ul>
<div id="main"> <div id="main">
<p>start up engine, please wait ...</p> <p>start up engine, please wait ...</p>

@ -4,8 +4,8 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="27px" height="20px" viewBox="0 0 27 20" enable-background="new 0 0 27 20" xml:space="preserve"> width="27px" height="20px" viewBox="0 0 27 20" enable-background="new 0 0 27 20" xml:space="preserve">
<g> <g>
<rect fill="#4D4D4D" width="27" height="4"/> <rect fill="#FFFFFF" width="27" height="4"/>
<rect y="8" fill="#4D4D4D" width="27" height="4"/> <rect y="8" fill="#FFFFFF" width="27" height="4"/>
<rect y="16" fill="#4D4D4D" width="27" height="4"/> <rect y="16" fill="#FFFFFF" width="27" height="4"/>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 631 B

After

Width:  |  Height:  |  Size: 631 B

@ -75,9 +75,14 @@ td:last-child {
background-color: green; background-color: green;
color: white; color: white;
} }
#header #togglemenu {
display: inline;
float: right;
}
#header h1 { #header h1 {
font-weight: bold; font-weight: bold;
font-size: 100%; font-size: 100%;
display: inline;
} }
#status { #status {
@ -89,11 +94,9 @@ td:last-child {
padding: 0 1em 0 1em; padding: 0 1em 0 1em;
text-align: right; text-align: right;
} }
@media (min-width: 45em) { @media (max-width: 45em) {
#status { #username {
bottom: auto; display: none;
left: auto;
top: 0;
} }
} }
#status.error { #status.error {
@ -109,8 +112,28 @@ td:last-child {
color: black; color: black;
} }
#menu {
clear: both;
padding: 2em 0em 1em 0em;
margin: 0 1em 0 1em;
float: right;
background-color: lightblue;
list-style-type: none;
border: 1px solid black;
}
#menu li {
padding: 0 1em 0 1em;
cursor: pointer;
}
#menu li + li {
border-top: 1px solid black;
margin-top: 0.5em;
padding-top: 0.5em;
}
#main { #main {
padding: 2em 1em 2em 1em; padding: 2em 1em 2em 1em;
clear: both;
} }
.clear { .clear {

@ -132,6 +132,33 @@ function alert() {
(new Audio("A-Tone-His_Self-1266414414.mp3")).play(); (new Audio("A-Tone-His_Self-1266414414.mp3")).play();
} }
/// Toggle Menu Display
function togglemenu() {
$("#menu").toggle();
}
/// Download Profile Backup
function backup() {
status("<p>Starting Download...</p>");
var download = document.createElement('a');
download.href = 'data:attachment/text,'+encodeURI(JSON.stringify(localStorage));
download.target = '_blank';
function pad(n) {return n<10 ? '0'+n : n}
var now = new Date();
download.download =
pad(now.getFullYear())+pad(now.getMonth()+1)+pad(now.getDate())+
"-safechat.bak";
var clickEvent = new MouseEvent("click", {
"view": window,
"bubbles": true,
"cancelable": false
});
download.dispatchEvent(clickEvent);
status("<p>Download:</p><pre>"+download.outerHTML.replace("<", "&lt;")+"</pre>");
togglemenu();
setTimeout(start, 20000);
}
/// Check if user name is available /// Check if user name is available
/** Calls checknewuser.php on server and displays an error, if the /** Calls checknewuser.php on server and displays an error, if the
user name is already in use. This function is used when creating a user name is already in use. This function is used when creating a
@ -484,6 +511,7 @@ function getpwd() {
get() which polls for new messages. */ get() which polls for new messages. */
function chat() { function chat() {
if (!password) return getpwd(); if (!password) return getpwd();
$("#username").html(userid()+"@safechat.ch");
$.ajax({url: "chat.html", success: function(res) { $.ajax({url: "chat.html", success: function(res) {
status(res); status(res);
setTimeout(get, 2000); setTimeout(get, 2000);

Loading…
Cancel
Save