Flo-Whatsapp/app/index.html
sairajzero 2a642f5c29 Added File-Share feature
Users can now share files
Click on the file-share button next to message input to attach file
Files are encrypted and sign along with messages
Note: file size is not restricted, yet its advised to share only files with size <1.5MB
2019-09-16 19:34:21 +05:30

145 lines
5.1 KiB
HTML

<html lang="en">
<head>
<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="init.js"></script>
<script type="text/javascript" src="kBucket.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body onload="userDataStartUp();">
<div id="overlay">
<div class="userChecklist-container">
<input type="text" class="grpName form-control" placeholder="Group Name">
<div class="row searchBox">
<div class="col-sm-12 searchBox-inner">
<div class="form-group has-feedback">
<input id="searchList" type="text" class="form-control" placeholder="Search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
</div>
<div id="userChecklist"></div>
<button class="ok btn btn-success">Ok</button>
<button class="cancel btn btn-default">Cancel</button>
</div>
</div>
<div class="container app">
<div class="row app-one">
<div class="col-sm-4 side">
<div class="side-one">
<!-- Heading -->
<div class="row heading">
<span class="name-meta"><b>FLO Whatsapp </b> </span>
<!--
<div class="col-sm-1 col-xs-1 heading-icon 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-icon pull-right">
<i class="fa fa-comments fa-2x pull-right" aria-hidden="true" onclick="createGroup();"></i>
</div>
<br />
<span class="name-meta"><i>created by Ranchimall</i></span>
</div>
<!-- Heading End -->
<!-- SearchBox -->
<div class="row searchBox">
<div class="col-sm-12 searchBox-inner">
<div class="form-group has-feedback">
<input id="searchContact" type="text" class="form-control" placeholder="Search Contact/Group">
<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"><span id="recipient-status">O</span> &nbsp;&nbsp;
<span id="recipient-floID">Select Contact</span>
</span>
</div>
<div class="col-sm-1 col-xs-1 heading-icon pull-right dropdown" id="groupOptions">
<i class="fa fa-ellipsis-v fa-2x pull-right" aria-hidden="true"></i>
<div class="dropdown-content">
<li onclick="addGroupMembers()">Add Members</li>
<li onclick="rmGroupMembers()">Remove Members</li>
<li onclick="addGroupAdmins()">Add Admins</li>
<li onclick="rmGroupAdmins()">Remove Admins</li>
<li onclick="deleteGroup()">Delete Group</li>
</div>
</div>
</div>
<!-- Heading End -->
<!-- Message Box -->
<div class="row message" id="conversation">
</div>
<!-- Message Box End -->
<!-- Reply Box -->
<div class="row reply">
<form id="replyForm">
<!--
<div class="col-sm-1 col-xs-1 reply-icon">
<i class="fa fa-smile-o fa-2x"></i>
</div>
-->
<div class="col-sm-9 col-xs-9 reply-main">
<textarea class="form-control" rows="1" id="msgInput" placeholder="Type message"
autocomplete="off"></textarea>
</div>
<div class="col-sm-1 col-xs-1 reply-icon">
<label>
<i class="fa fa-file fa-2x" aria-hidden="true"></i>
<input class="attach-file" type="file" id="fileInput"><span></span>
</label>
</div>
<!--
<div class="col-sm-1 col-xs-1 reply-icon">
<i class="fa fa-microphone fa-2x" aria-hidden="true"></i>
</div>
-->
<div class="col-sm-1 col-xs-1 reply-icon" onclick="sendMsg()">
<i class="fa fa-send fa-2x" aria-hidden="true"></i>
</div>
</form>
</div>
<!-- Reply Box End -->
</div>
<!-- Conversation End -->
</div>
<!-- App One End -->
</div>
<!-- App End -->
</body>
</html>