FLO-Whatsapp Update v0.1
This commit is contained in:
sairajzero
parent
426bad6444
commit
6d25eeb424
200
app.js
200
app.js
@ -7,7 +7,9 @@ if (!window.indexedDB) {
|
||||
window.alert("Your browser doesn't support a stable version of IndexedDB.")
|
||||
}
|
||||
|
||||
contacts = []
|
||||
var contacts = [];
|
||||
var receiverID,senderID;
|
||||
var selfwebsocket;
|
||||
|
||||
function convertStringToInt(string){
|
||||
return parseInt(string,10);
|
||||
@ -15,12 +17,34 @@ function convertStringToInt(string){
|
||||
|
||||
function userDataStartUp(){
|
||||
console.log("StartUp");
|
||||
getDatafromAPI().then(function (res) {
|
||||
console.log(res);
|
||||
getDatafromAPI().then(function (result) {
|
||||
console.log(result);
|
||||
getuserID().then(function(result){
|
||||
console.log(result);
|
||||
getDatafromIDB().then(function(result){
|
||||
contacts = arrayToObject(result);
|
||||
console.log(contacts);
|
||||
displayContacts();
|
||||
initselfWebSocket();
|
||||
//startChats();
|
||||
}).catch(function (error) {
|
||||
console.log(error.message);
|
||||
});
|
||||
}).catch(function (error) {
|
||||
console.log(error.message);
|
||||
});
|
||||
}).catch(function (error) {
|
||||
console.log(error.message);
|
||||
});
|
||||
|
||||
function arrayToObject(array){
|
||||
obj = {};
|
||||
array.forEach(element => {
|
||||
obj[element.floID] = {onionAddr : element.onionAddr, name : element.name};
|
||||
});
|
||||
return obj;
|
||||
}
|
||||
|
||||
function storedata(data){
|
||||
return new Promise(
|
||||
function(resolve, reject) {
|
||||
@ -114,34 +138,9 @@ function userDataStartUp(){
|
||||
}
|
||||
);
|
||||
}
|
||||
function getDataFromIDB(){
|
||||
return new Promise(
|
||||
function(resolve, reject) {
|
||||
var idb = indexedDB.open("FLO_chat");
|
||||
idb.onerror = function(event) {
|
||||
console.log("Error in opening IndexedDB!");
|
||||
};
|
||||
idb.onsuccess = function(event) {
|
||||
var db = event.target.result;
|
||||
var obs = db.transaction('contacts', "readwrite").objectStore('contacts');
|
||||
appdetails = [];
|
||||
var cursorRequest = obs.openCursor();
|
||||
cursorRequest.onsuccess = function(event) {
|
||||
var cursor = event.target.result;
|
||||
if(cursor) {
|
||||
appdetails.push(cursor.value);
|
||||
cursor.continue();
|
||||
}else {
|
||||
resolve(appdetails);
|
||||
}
|
||||
};
|
||||
db.close();
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
userDataStartUp();
|
||||
|
||||
function getuserID(){
|
||||
@ -163,15 +162,17 @@ function getuserID(){
|
||||
while(!validateAddr(userID)){
|
||||
userID = prompt("Retry!Enter A Valid Flo ID!");
|
||||
}
|
||||
console.log(window.location.host);
|
||||
|
||||
var obs2 = db.transaction('contacts', "readwrite").objectStore('contacts');
|
||||
var getReq2 = obs2.get(userID);
|
||||
getReq2.onsuccess = function(event){
|
||||
var onionAddr = event.target.result;
|
||||
if(onionAddr === window.location.host)
|
||||
res(userID);
|
||||
else if(onionAddr === undefined)
|
||||
var data = event.target.result;
|
||||
console.log(window.location.host);
|
||||
//console.log(data.onionAddr);
|
||||
if(data === undefined)
|
||||
var reg = confirm('FLO ID is not registers to FLO chat!\nRegister FLO ID?');
|
||||
else if(data.onionAddr == window.location.host)
|
||||
res(userID);
|
||||
else
|
||||
var reg = confirm('FLO ID is registered to another onion!\nChange FLO ID to this onion?');
|
||||
if(reg)
|
||||
@ -180,18 +181,143 @@ function getuserID(){
|
||||
rej('Unable to register userID!\nTry again later!');
|
||||
}
|
||||
}
|
||||
else
|
||||
res(userID);
|
||||
}
|
||||
}).then(function(result){
|
||||
console.log(result);
|
||||
var obs = db.transaction('lastTx', "readwrite").objectStore('lastTx');
|
||||
senderID = result;
|
||||
obs.put(result,'userID');
|
||||
db.close();
|
||||
resolve('userID Initiated')
|
||||
}).catch(function(error){
|
||||
console.log(error);
|
||||
db.close();
|
||||
console.log(error.message);
|
||||
reject('userID Initiation Failed');
|
||||
});
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
getuserID();
|
||||
|
||||
function getDatafromIDB(){
|
||||
return new Promise(
|
||||
function(resolve,reject){
|
||||
var idb = indexedDB.open("FLO_Chat");
|
||||
idb.onerror = function(event) {
|
||||
reject("Error in opening IndexedDB!");
|
||||
};
|
||||
idb.onsuccess = function(event) {
|
||||
var db = event.target.result;
|
||||
var obs = db.transaction("contacts", "readwrite").objectStore("contacts");
|
||||
var getReq = obs.getAll();
|
||||
getReq.onsuccess = function(event){
|
||||
resolve(event.target.result);
|
||||
}
|
||||
getReq.onerror = function(event){
|
||||
reject('Unable to read contacts!')
|
||||
}
|
||||
db.close();
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function displayContacts(){
|
||||
console.log('displayContacts');
|
||||
var listElement = document.getElementById('contact-display');
|
||||
for(floID in contacts){
|
||||
var createLi = document.createElement('div');
|
||||
createLi.setAttribute("id", floID);
|
||||
createLi.setAttribute("onClick", 'changeReceiver(this)');
|
||||
createLi.setAttribute("class", "row sideBar-body");
|
||||
createLi.innerHTML = `<div class="col-sm-11 col-xs-11 sideBar-main">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-xs-8 sideBar-name">
|
||||
<span class="name-meta">${floID}
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-4 pull-right sideBar-time">
|
||||
<span class="time-meta pull-right">${contacts[floID].name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
listElement.appendChild(createLi);
|
||||
}
|
||||
}
|
||||
|
||||
function initselfWebSocket(){
|
||||
var selfwebsocket = new WebSocket("ws://"+location.host+"/ws");
|
||||
selfwebsocket.onopen = function(evt){
|
||||
console.log("CONNECTED");
|
||||
selfwebsocket.send(senderID);
|
||||
};
|
||||
selfwebsocket.onclose = function(evt){
|
||||
console.log("DISCONNECTED");
|
||||
};
|
||||
selfwebsocket.onmessage = function(evt){
|
||||
console.log(evt.data);
|
||||
try{
|
||||
var disp = document.getElementById("conversation");
|
||||
var data = JSON.parse(evt.data);
|
||||
var msgdiv = document.createElement('div');
|
||||
msgdiv.setAttribute("class", "row message-body");
|
||||
msgdiv.innerHTML = `<div class="col-sm-12 message-main-receiver">
|
||||
<div class="receiver">
|
||||
<span class="message-text">
|
||||
<b>${data.from} : </b><br/>${data.msg}
|
||||
</span>
|
||||
<span class="message-time pull-right">
|
||||
Time
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
disp.appendChild(msgdiv);
|
||||
}catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
selfwebsocket.onerror = function(evt){
|
||||
console.log(evt);
|
||||
};
|
||||
}
|
||||
|
||||
function changeReceiver(param){
|
||||
console.log(param.id);
|
||||
receiverID = param.id;
|
||||
document.getElementById('recipient-floID').innerHTML = receiverID;
|
||||
}
|
||||
|
||||
function sendMsg(){
|
||||
var msg = document.getElementById('sendMsgInput').value;
|
||||
console.log(msg);
|
||||
var ws = new WebSocket("ws://"+contacts[receiverID].onionAddr+"/ws");
|
||||
ws.onopen = function(evt){
|
||||
var data = {from:senderID,msg:msg};
|
||||
data = JSON.stringify(data);
|
||||
ws.send(data);
|
||||
console.log(`sentMsg : ${data}`);
|
||||
var disp = document.getElementById("conversation");
|
||||
var msgdiv = document.createElement('div');
|
||||
msgdiv.setAttribute("class", "row message-body");
|
||||
msgdiv.innerHTML = `<div class="col-sm-12 message-main-sender">
|
||||
<div class="sender">
|
||||
<span class="message-text"><b>${receiverID} : </b><br/>${msg}
|
||||
</span>
|
||||
<span class="message-time pull-right">
|
||||
Time
|
||||
</span>
|
||||
</div>
|
||||
</div>`;
|
||||
disp.appendChild(msgdiv);
|
||||
//send_check = 1;
|
||||
//recursion_called = 0;
|
||||
//addSentChat(msg.substring(2+msgArray[0].length+msgArray[1].length),timer,msgArray[0]);
|
||||
//addTick(message);
|
||||
}
|
||||
ws.onerror = function(ev) { console.log(ev); };
|
||||
ws.onclose = function(ev) { console.log(ev); };
|
||||
}
|
||||
179
index.html
179
index.html
@ -1,89 +1,100 @@
|
||||
<html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Flo-Whatsapp</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css">
|
||||
<link rel="stylesheet" href="https://rawgit.com/marvelapp/devices.css/master/assets/devices.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="floid-container">
|
||||
<center><font color="#00ff00" size='6' face="Comic Sans MS">Contacts</font></center>
|
||||
<ul id="contact-list">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="page">
|
||||
<div class="marvel-device nexus5">
|
||||
<div class="top-bar"></div>
|
||||
<div class="sleep"></div>
|
||||
<div class="volume"></div>
|
||||
<div class="camera"></div>
|
||||
<div class="screen">
|
||||
<div class="screen-container">
|
||||
<div class="status-bar">
|
||||
<div class="time"></div>
|
||||
<div class="battery">
|
||||
<i class="zmdi zmdi-battery"></i>
|
||||
</div>
|
||||
<div class="network">
|
||||
<i class="zmdi zmdi-network"></i>
|
||||
</div>
|
||||
<div class="wifi">
|
||||
<i class="zmdi zmdi-wifi-alt-2"></i>
|
||||
</div>
|
||||
<div class="star">
|
||||
<i class="zmdi zmdi-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat">
|
||||
<div class="chat-container">
|
||||
<div class="user-bar">
|
||||
<div class="back">
|
||||
<i class="zmdi zmdi-arrow-left"></i>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img src="https://avatars2.githubusercontent.com/u/398893?s=128" alt="Avatar">
|
||||
</div>
|
||||
<div class="name">
|
||||
<span class="user"></span>
|
||||
<span class="status"></span>
|
||||
</div>
|
||||
<div class="actions more">
|
||||
<i class="zmdi zmdi-more-vert"></i>
|
||||
</div>
|
||||
<div class="actions attachment">
|
||||
<i class="zmdi zmdi-attachment-alt"></i>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<i class="zmdi zmdi-phone"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation">
|
||||
<div class="conversation-container">
|
||||
|
||||
</div>
|
||||
<form class="conversation-compose">
|
||||
<div class="emoji">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" id="smiley" x="3147" y="3209"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.153 11.603c.795 0 1.44-.88 1.44-1.962s-.645-1.96-1.44-1.96c-.795 0-1.44.88-1.44 1.96s.645 1.965 1.44 1.965zM5.95 12.965c-.027-.307-.132 5.218 6.062 5.55 6.066-.25 6.066-5.55 6.066-5.55-6.078 1.416-12.13 0-12.13 0zm11.362 1.108s-.67 1.96-5.05 1.96c-3.506 0-5.39-1.165-5.608-1.96 0 0 5.912 1.055 10.658 0zM11.804 1.01C5.61 1.01.978 6.034.978 12.23s4.826 10.76 11.02 10.76S23.02 18.424 23.02 12.23c0-6.197-5.02-11.22-11.216-11.22zM12 21.355c-5.273 0-9.38-3.886-9.38-9.16 0-5.272 3.94-9.547 9.214-9.547a9.548 9.548 0 0 1 9.548 9.548c0 5.272-4.11 9.16-9.382 9.16zm3.108-9.75c.795 0 1.44-.88 1.44-1.963s-.645-1.96-1.44-1.96c-.795 0-1.44.878-1.44 1.96s.645 1.963 1.44 1.963z" fill="#7d8489"/></svg>
|
||||
</div>
|
||||
<input class="input-msg" name="input" placeholder="Select A Contact!" autocomplete="off" autofocus disabled></input>
|
||||
<div class="photo">
|
||||
<i class="zmdi zmdi-camera"></i>
|
||||
</div>
|
||||
<button class="send">
|
||||
<div class="circle">
|
||||
<i class="zmdi zmdi-mail-send"></i>
|
||||
</div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
|
||||
<title>FLO Whatsapp</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<!-- Font Awesome File -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
<script type="text/javascript" src="registerID.js"></script>
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container app">
|
||||
<div class="row app-one">
|
||||
|
||||
<div class="col-sm-4 side">
|
||||
<div class="side-one">
|
||||
<!-- Heading -->
|
||||
<div class="row heading">
|
||||
<div class="col-sm-1 col-xs-1 heading-dot pull-right">
|
||||
<i class="fa fa-ellipsis-v fa-2x pull-right" aria-hidden="true" onclick="min();"></i>
|
||||
</div>
|
||||
<div class="col-sm-2 col-xs-2 heading-compose pull-right">
|
||||
<i class="fa fa-comments fa-2x pull-right" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Heading End -->
|
||||
|
||||
<!-- SearchBox -->
|
||||
<div class="row searchBox">
|
||||
<div class="col-sm-12 searchBox-inner">
|
||||
<div class="form-group has-feedback">
|
||||
<input id="searchText" type="text" class="form-control" name="searchText" placeholder="Search">
|
||||
<span class="glyphicon glyphicon-search form-control-feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Box End -->
|
||||
<!-- sideBar -->
|
||||
<div class="row sideBar" id="contact-display">
|
||||
</div>
|
||||
<!-- Sidebar End -->
|
||||
</div>
|
||||
<!-- Sidebar End -->
|
||||
</div>
|
||||
<!-- New Message Sidebar End -->
|
||||
|
||||
<!-- Conversation Start -->
|
||||
<div class="col-sm-8 conversation">
|
||||
<!-- Heading -->
|
||||
<div class="row heading">
|
||||
<div class="col-sm-8 col-xs-8 heading-name">
|
||||
<span class="heading-name-meta" id="recipient-floID">Select Contact
|
||||
</span>
|
||||
<span class="heading-online" id="recipient-status">Unknown</span>
|
||||
</div>
|
||||
<div class="col-sm-1 col-xs-1 heading-dot pull-right">
|
||||
<i class="fa fa-ellipsis-v fa-2x pull-right" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Heading End -->
|
||||
|
||||
<!-- Message Box -->
|
||||
<div class="row message" id="conversation">
|
||||
</div>
|
||||
<!-- Message Box End -->
|
||||
|
||||
<!-- Reply Box -->
|
||||
<div class="row reply">
|
||||
<div class="col-sm-1 col-xs-1 reply-emojis">
|
||||
<i class="fa fa-smile-o fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-sm-9 col-xs-9 reply-main">
|
||||
<input class="form-control" rows="1" id="sendMsgInput" placeholder="Type message" autocomplete="off"></input>
|
||||
</div>
|
||||
<div class="col-sm-1 col-xs-1 reply-recording">
|
||||
<i class="fa fa-microphone fa-2x" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="col-sm-1 col-xs-1 reply-send" onclick = "sendMsg()">
|
||||
<i class="fa fa-send fa-2x" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reply Box End -->
|
||||
</div>
|
||||
<!-- Conversation End -->
|
||||
</div>
|
||||
<!-- App One End -->
|
||||
</div>
|
||||
|
||||
<!-- App End -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
460
style.css
460
style.css
@ -1,460 +0,0 @@
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.marvel-device .screen {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.screen-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Status Bar */
|
||||
|
||||
.status-bar {
|
||||
height: 25px;
|
||||
background: #004e45;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.status-bar:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.status-bar div {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin: 0 0 0 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Chat */
|
||||
|
||||
.chat {
|
||||
height: calc(100% - 69px);
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* User Bar */
|
||||
|
||||
.user-bar {
|
||||
height: 55px;
|
||||
background: #005e54;
|
||||
color: #fff;
|
||||
padding: 0 8px;
|
||||
font-size: 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.user-bar:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.user-bar div {
|
||||
float: left;
|
||||
transform: translateY(-50%);
|
||||
position: relative;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.user-bar .actions {
|
||||
float: right;
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
|
||||
.user-bar .actions.more {
|
||||
margin: 0 12px 0 32px;
|
||||
}
|
||||
|
||||
.user-bar .actions.attachment {
|
||||
margin: 0 0 0 30px;
|
||||
}
|
||||
|
||||
.user-bar .actions.attachment i {
|
||||
display: block;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.user-bar .avatar {
|
||||
margin: 0 0 0 5px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.user-bar .avatar img {
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-bar .name {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: 0.3px;
|
||||
margin: 0 0 0 8px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.user-bar .status {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Conversation */
|
||||
|
||||
.conversation {
|
||||
height: calc(100% - 12px);
|
||||
position: relative;
|
||||
background: #efe7dd url("https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg") repeat;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.conversation ::-webkit-scrollbar {
|
||||
transition: all .5s;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.conversation ::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.conversation ::-webkit-scrollbar-thumb {
|
||||
background: #b3ada7;
|
||||
}
|
||||
|
||||
.conversation .conversation-container {
|
||||
height: calc(100% - 68px);
|
||||
box-shadow: inset 0 10px 10px -10px #000000;
|
||||
overflow-x: hidden;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.conversation .conversation-container:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
|
||||
.message {
|
||||
color: #000;
|
||||
clear: both;
|
||||
line-height: 18px;
|
||||
font-size: 15px;
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
margin: 8px 0;
|
||||
max-width: 85%;
|
||||
word-wrap: break-word;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.message:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
padding: 0 0 0 7px;
|
||||
position: relative;
|
||||
bottom: -4px;
|
||||
}
|
||||
|
||||
.metadata .time {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
font-size: 11px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.metadata .tick {
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.metadata .tick svg {
|
||||
position: absolute;
|
||||
transition: .5s ease-in-out;
|
||||
}
|
||||
|
||||
.metadata .tick svg:first-child {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: perspective(800px) rotateY(180deg);
|
||||
transform: perspective(800px) rotateY(180deg);
|
||||
}
|
||||
|
||||
.metadata .tick svg:last-child {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: perspective(800px) rotateY(0deg);
|
||||
transform: perspective(800px) rotateY(0deg);
|
||||
}
|
||||
|
||||
.metadata .tick-animation svg:first-child {
|
||||
-webkit-transform: perspective(800px) rotateY(0);
|
||||
transform: perspective(800px) rotateY(0);
|
||||
}
|
||||
|
||||
.metadata .tick-animation svg:last-child {
|
||||
-webkit-transform: perspective(800px) rotateY(-179.9deg);
|
||||
transform: perspective(800px) rotateY(-179.9deg);
|
||||
}
|
||||
|
||||
.message:first-child {
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
|
||||
.message.received {
|
||||
background: #fff;
|
||||
border-radius: 0px 5px 5px 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.message.received .metadata {
|
||||
padding: 0 0 0 16px;
|
||||
}
|
||||
|
||||
.message.received:after {
|
||||
border-width: 0px 10px 10px 0;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
top: 0;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.message.sent {
|
||||
background: #e1ffc7;
|
||||
border-radius: 5px 0px 5px 5px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.message.sent:after {
|
||||
border-width: 0px 0 10px 10px;
|
||||
border-color: transparent transparent transparent #e1ffc7;
|
||||
top: 0;
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
/* Compose */
|
||||
|
||||
.conversation-compose {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.conversation-compose div,
|
||||
.conversation-compose input {
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.conversation-compose .emoji {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: white;
|
||||
border-radius: 5px 0 0 5px;
|
||||
flex: 0 0 auto;
|
||||
margin-left: 8px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.conversation-compose .input-msg {
|
||||
border: 0;
|
||||
flex: 1 1 auto;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.conversation-compose .photo {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 0 0 5px 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.conversation-compose .photo:after {
|
||||
border-width: 0px 0 10px 10px;
|
||||
border-color: transparent transparent transparent #fff;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
top: 0;
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
.conversation-compose .photo i {
|
||||
display: block;
|
||||
color: #7d8488;
|
||||
font-size: 24px;
|
||||
transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.conversation-compose .send {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.conversation-compose .send .circle {
|
||||
background: #008a7c;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.conversation-compose .send .circle i {
|
||||
font-size: 24px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#floid-container{
|
||||
height: 100%;
|
||||
width: 160px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: black;
|
||||
padding-top: 20px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#contact-list li{
|
||||
color: #00ff00;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
#contact-list li:hover{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.button__badge {
|
||||
background-color: grey;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
padding: 3px;
|
||||
font-size: 12px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Small Screens */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.marvel-device.nexus5 {
|
||||
border-radius: 0;
|
||||
flex: none;
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.marvel-device > .screen .chat {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.marvel-device {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.marvel-device .status-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.screen-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.conversation {
|
||||
height: calc(100vh - 55px);
|
||||
}
|
||||
.conversation .conversation-container {
|
||||
height: calc(100vh - 120px);
|
||||
}
|
||||
}
|
||||
591
styles.css
Normal file
591
styles.css
Normal file
@ -0,0 +1,591 @@
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: no-repeat fixed center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-2x {
|
||||
font-size: 1.5em !important;
|
||||
}
|
||||
|
||||
.app {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
top: 19px;
|
||||
height: calc(100% - 38px);
|
||||
margin: auto !important;
|
||||
padding: 0 !important;
|
||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.app-one {
|
||||
background-color: #f7f7f7;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.side {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
height: 100%;
|
||||
}
|
||||
.side-one {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
display: block;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.side-two {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
top: -100%;
|
||||
left: -100%;
|
||||
-webkit-transition: left 0.3s ease;
|
||||
transition: left 0.3s ease;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.heading {
|
||||
padding: 10px 16px 10px 15px;
|
||||
margin: 0 !important;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
background-color: #eee;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.heading-avatar {
|
||||
padding: 0 !important;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.heading-avatar-icon img {
|
||||
border-radius: 50%;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.heading-name {
|
||||
padding: 0 !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.heading-name-meta {
|
||||
font-weight: 700;
|
||||
font-size: 100%;
|
||||
padding: 5px;
|
||||
padding-bottom: 0;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
display: block;
|
||||
}
|
||||
.heading-online {
|
||||
display: none;
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
color: #93918f;
|
||||
}
|
||||
.heading-compose {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.heading-compose i {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
color: #93918f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.heading-dot {
|
||||
padding: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.heading-dot i {
|
||||
text-align: right;
|
||||
padding: 5px;
|
||||
color: #93918f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.searchBox-inner {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 10px !important;
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
|
||||
/*#searchBox-inner input {
|
||||
box-shadow: none;
|
||||
}*/
|
||||
|
||||
.searchBox-inner input:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sideBar {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
background-color: #fff;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #f7f7f7;
|
||||
height: calc(100% - 120px);
|
||||
}
|
||||
|
||||
.sideBar-body {
|
||||
position: relative;
|
||||
padding: 10px !important;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
height: 72px;
|
||||
margin: 0 !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sideBar-body:hover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.sideBar-avatar {
|
||||
text-align: center;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.avatar-icon img {
|
||||
border-radius: 50%;
|
||||
height: 49px;
|
||||
width: 49px;
|
||||
}
|
||||
|
||||
.sideBar-main {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.sideBar-main .row {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sideBar-name {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.name-meta {
|
||||
font-size: 100%;
|
||||
padding: 1% !important;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.sideBar-time {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.time-meta {
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
padding: 1% !important;
|
||||
color: rgba(0, 0, 0, .4);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/*New Message*/
|
||||
|
||||
.newMessage {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
left: -100%;
|
||||
}
|
||||
.newMessage-heading {
|
||||
padding: 10px 16px 10px 15px !important;
|
||||
margin: 0 !important;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
background-color: #00bfa5;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.newMessage-main {
|
||||
padding: 10px 16px 0 15px !important;
|
||||
margin: 0 !important;
|
||||
height: 60px;
|
||||
margin-top: 30px !important;
|
||||
width: 100%;
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.newMessage-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
padding: 10px 5px !important;
|
||||
}
|
||||
.newMessage-back {
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
padding: 12px 5px !important;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.newMessage-back i {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.composeBox {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.composeBox-inner {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 10px !important;
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
.composeBox-inner input:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.compose-sideBar {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
background-color: #fff;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #f7f7f7;
|
||||
height: calc(100% - 160px);
|
||||
}
|
||||
|
||||
/*Conversation*/
|
||||
|
||||
.conversation {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
height: 100%;
|
||||
/*width: 100%;*/
|
||||
border-left: 1px solid rgba(0, 0, 0, .08);
|
||||
/*overflow-y: auto;*/
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
background: url("w.jpg") no-repeat fixed center;
|
||||
background-size: cover;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #f7f7f7;
|
||||
height: calc(100% - 120px);
|
||||
}
|
||||
.message-previous {
|
||||
margin : 0 !important;
|
||||
padding: 0 !important;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.previous {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
padding: 10px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.previous a {
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.message-body {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.message-main-receiver {
|
||||
/*padding: 10px 20px;*/
|
||||
max-width: 60%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.message-main-sender {
|
||||
padding: 3px 20px !important;
|
||||
margin-left: 40% !important;
|
||||
max-width: 60%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
margin: 0 !important;
|
||||
padding: 5px !important;
|
||||
word-wrap:break-word;
|
||||
font-weight: 200;
|
||||
font-size: 14px;
|
||||
padding-bottom: 0 !important;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
margin: 0 !important;
|
||||
margin-left: 50px !important;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
color: #9a9a9a;
|
||||
height: auto;
|
||||
|
||||
}
|
||||
|
||||
.receiver {
|
||||
float: left;
|
||||
width: auto !important;
|
||||
padding: 4px 10px 7px !important;
|
||||
border-radius: 10px 10px 10px 0;
|
||||
background: #ffffff;
|
||||
font-size: 12px;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
||||
word-wrap: break-word;
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
|
||||
}
|
||||
|
||||
.sender {
|
||||
width: auto !important;
|
||||
height: auto;
|
||||
background: gray;
|
||||
border-radius: 10px 10px 0 10px;
|
||||
padding: 4px 10px 7px !important;
|
||||
font-size: 12px;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
||||
display: inline-block;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
/*Reply*/
|
||||
|
||||
.reply {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
background-color: #f5f1ee;
|
||||
padding: 10px 5px 10px 5px !important;
|
||||
margin: 0 !important;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.reply-emojis {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
.reply-emojis i {
|
||||
text-align: center;
|
||||
padding: 5px 5px 5px 5px !important;
|
||||
color: #93918f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reply-recording {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
.reply-recording i {
|
||||
text-align: center;
|
||||
padding: 5px !important;
|
||||
color: #93918f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reply-send {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
.reply-send i {
|
||||
text-align: center;
|
||||
padding: 5px !important;
|
||||
color: #93918f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reply-main {
|
||||
padding: 2px 5px !important;
|
||||
}
|
||||
|
||||
.reply-main textarea {
|
||||
width: 100%;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
padding: 5px !important;
|
||||
outline: none;
|
||||
border: none;
|
||||
text-indent: 5px;
|
||||
box-shadow: none;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.reply-main textarea:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
text-indent: 5px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.app {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.heading {
|
||||
height: 70px;
|
||||
background-color: #009688;
|
||||
}
|
||||
.fa-2x {
|
||||
font-size: 2.3em !important;
|
||||
}
|
||||
.heading-avatar {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.heading-avatar-icon img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.heading-compose {
|
||||
padding: 5px !important;
|
||||
}
|
||||
.heading-compose i {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.heading-dot {
|
||||
padding: 5px !important;
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
.heading-dot i {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sideBar {
|
||||
height: calc(100% - 130px);
|
||||
}
|
||||
.sideBar-body {
|
||||
height: 80px;
|
||||
}
|
||||
.sideBar-avatar {
|
||||
text-align: left;
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
.avatar-icon img {
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
}
|
||||
.sideBar-main {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.sideBar-main .row {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.sideBar-name {
|
||||
padding: 10px 5px !important;
|
||||
}
|
||||
.name-meta {
|
||||
font-size: 16px;
|
||||
padding: 5% !important;
|
||||
}
|
||||
.sideBar-time {
|
||||
padding: 10px !important;
|
||||
}
|
||||
.time-meta {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
padding: 4% !important;
|
||||
color: rgba(0, 0, 0, .4);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/*Conversation*/
|
||||
.conversation {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
height: 100%;
|
||||
/*width: 100%;*/
|
||||
border-left: 1px solid rgba(0, 0, 0, .08);
|
||||
/*overflow-y: auto;*/
|
||||
}
|
||||
.message {
|
||||
height: calc(100% - 140px);
|
||||
}
|
||||
.reply {
|
||||
height: 70px;
|
||||
}
|
||||
.reply-emojis {
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
.reply-emojis i {
|
||||
padding: 5px 2px !important;
|
||||
font-size: 1.8em !important;
|
||||
}
|
||||
.reply-main {
|
||||
padding: 2px 8px !important;
|
||||
}
|
||||
.reply-main textarea {
|
||||
padding: 8px !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
.reply-recording {
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
.reply-recording i {
|
||||
padding: 5px 0 !important;
|
||||
font-size: 1.8em !important;
|
||||
}
|
||||
.reply-send {
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
.reply-send i {
|
||||
padding: 5px 2px 5px 0 !important;
|
||||
font-size: 1.8em !important;
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
PROG = websocket_chat
|
||||
MODULE_CFLAGS = -DMG_ENABLE_FILESYSTEM=1
|
||||
include ../examples.mk
|
||||
16548
util/mongoose.c
Normal file
16548
util/mongoose.c
Normal file
File diff suppressed because it is too large
Load Diff
6683
util/mongoose.h
Normal file
6683
util/mongoose.h
Normal file
File diff suppressed because it is too large
Load Diff
@ -18,89 +18,33 @@ static int is_websocket(const struct mg_connection *nc) {
|
||||
return nc->flags & MG_F_IS_WEBSOCKET;
|
||||
}
|
||||
|
||||
struct pair{
|
||||
char floId[101];
|
||||
struct mg_connection *connPointer;
|
||||
};
|
||||
|
||||
struct pair hashmap[1000];
|
||||
|
||||
static void broadcast(struct mg_connection *nc, const struct mg_str msg,char id[]) {
|
||||
|
||||
char buf[500000];
|
||||
static void broadcast(struct mg_connection *nc, const struct mg_str msg) {
|
||||
struct mg_connection *c;
|
||||
char buf[500];
|
||||
char addr[32];
|
||||
mg_sock_addr_to_str(&nc->sa, addr, sizeof(addr),
|
||||
MG_SOCK_STRINGIFY_IP | MG_SOCK_STRINGIFY_PORT);
|
||||
|
||||
snprintf(buf, sizeof(buf), "%s %.*s", addr, (int) msg.len, msg.p);
|
||||
snprintf(buf, sizeof(buf), "%.*s", (int) msg.len, msg.p);
|
||||
printf("%s\n", buf); /* Local echo. */
|
||||
printf("sendTo %s\n",id);
|
||||
|
||||
for(int i=0;i<1000;i++)
|
||||
{
|
||||
if(strlen(hashmap[i].floId)==0)
|
||||
continue;
|
||||
printf("%s %s\n",id,hashmap[i].floId);
|
||||
|
||||
if(strcmp(hashmap[i].floId,id) == 0)
|
||||
{
|
||||
printf("Msg Sent\n");
|
||||
mg_send_websocket_frame(hashmap[i].connPointer, WEBSOCKET_OP_TEXT, buf, strlen(buf));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
for (c = mg_next(nc->mgr, NULL); c != NULL; c = mg_next(nc->mgr, c)) {
|
||||
if (c == nc) continue; /* Don't send to the sender. */
|
||||
mg_send_websocket_frame(c, WEBSOCKET_OP_TEXT, buf, strlen(buf));
|
||||
}
|
||||
}
|
||||
|
||||
static void ev_handler(struct mg_connection *nc, int ev, void *ev_data) {
|
||||
switch (ev) {
|
||||
case MG_EV_WEBSOCKET_HANDSHAKE_DONE: {
|
||||
//printf("-1-1-1\n");
|
||||
/* New websocket connection. Tell everybody. */
|
||||
broadcast(nc, mg_mk_str("++ joined"));
|
||||
break;
|
||||
}
|
||||
case MG_EV_WEBSOCKET_FRAME: {
|
||||
struct websocket_message *wm = (struct websocket_message *) ev_data;
|
||||
/* New websocket message. Tell everybody. */
|
||||
struct mg_str d = {(char *) wm->data, wm->size};
|
||||
|
||||
char id[101],data[500001];
|
||||
printf("%s\n",(char *)wm->data);
|
||||
strcpy(data,(char *)wm->data);
|
||||
printf("%s\n",data);
|
||||
int len = strlen(data);
|
||||
int flag=0;
|
||||
for(int i=0;i<len;i++)
|
||||
{
|
||||
if(data[i] == '$')
|
||||
{
|
||||
flag=1;
|
||||
break;
|
||||
}
|
||||
if(data[i] == ' ')
|
||||
break;
|
||||
id[i] = data[i];
|
||||
}
|
||||
printf("%s\n",id);
|
||||
int len2 = strlen(id);
|
||||
|
||||
if(len2 == len-1 || flag == 1)
|
||||
{
|
||||
|
||||
for(int i=0;i<1000;i++)
|
||||
{
|
||||
if(strlen(hashmap[i].floId) == 0)
|
||||
{
|
||||
strcpy(hashmap[i].floId,id);
|
||||
hashmap[i].connPointer = nc;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
//printf("%d %d\n",len2,len-1);
|
||||
if(len2 != len-1 && flag == 0)
|
||||
broadcast(nc,d,id);
|
||||
|
||||
broadcast(nc, d);
|
||||
break;
|
||||
}
|
||||
case MG_EV_HTTP_REQUEST: {
|
||||
@ -108,19 +52,9 @@ static void ev_handler(struct mg_connection *nc, int ev, void *ev_data) {
|
||||
break;
|
||||
}
|
||||
case MG_EV_CLOSE: {
|
||||
|
||||
/* Disconnect. Tell everybody. */
|
||||
if (is_websocket(nc)) {
|
||||
|
||||
printf("Disconnect\n");
|
||||
for(int i=0;i<1000;i++)
|
||||
{
|
||||
if(hashmap[i].connPointer == nc)
|
||||
{
|
||||
printf("Matched\n");
|
||||
strcpy(hashmap[i].floId,"");
|
||||
break;
|
||||
}
|
||||
}
|
||||
broadcast(nc, mg_mk_str("-- left"));
|
||||
}
|
||||
break;
|
||||
}
|
||||
@ -144,7 +78,6 @@ int main(void) {
|
||||
s_http_server_opts.enable_directory_listing = "yes";
|
||||
|
||||
printf("Started on port %s\n", s_http_port);
|
||||
|
||||
while (s_signal_received == 0) {
|
||||
mg_mgr_poll(&mgr, 200);
|
||||
}
|
||||
|
||||
BIN
websocket_chat
BIN
websocket_chat
Binary file not shown.
Loading…
Reference in New Issue
Block a user