public_html/index.html
<html>
<head>
<title>OpenSecureChat</title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Prepare SocketIO and JS files -->
<script src="socket.io/socket.io.js"></script>
<script src="js/bower_components/jsencrypt/jsencrypt.min.js"></script>
<script src="js/bower_components/cryptojslib/core-min.js"></script>
<script src="js/bower_components/cryptojslib/enc-base64-min.js"></script>
<script src="js/bower_components/cryptojslib/sha256-min.js"></script>
<script src="js/bower_components/cryptojslib/sha1-min.js"></script>
<script src="js/bower_components/cryptojslib/aes.js"></script>
<script src="js/bower_components/jquery/jquery.js"></script>
<script src="js/osc.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Prepare CSS -->
<link type="text/css" rel="stylesheet" href="css/resetosc.min.css"/>
<link type="text/css" rel="stylesheet" href="css/styleosc.min.css"/>
</head>
<body onload="init()">
<!--
<div id="menu">
<a id="logInBtn" href="#!" class="modal-action modal-close waves-effect waves-white btn" onclick="showRegisterUserModal()">Log In</a>
<a id="logOutBtn" style="display:none" href="#!" class="modal-action modal-close waves-effect waves-white btn" onclick="logOut()">Log Out</a>
<span id="welcomeMsg" style="display:none">Welcome <span id="welcomeUsername"></span>!</span>
</div>
-->
<!-- Chats Content -->
<div class="container clearfix" style="max-height:815px">
<div class="people-list" id="people-list">
<div class="search">
<input type="text" id="recentSearchTxt" placeholder="search" onkeypress="filterRecentChats()"/>
<i class="fa fa-search"></i>
</div>
<ul id="userChats" class="list">
<!--
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01.jpg" alt="avatar" />
<div class="about">
<div class="name">Vincent Porter</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
-->
</ul>
<div style="position:relative;bottom:200px;left:20px;">
<img id="imageProfile" src="" class="circle tooltipped" data-position="top" data-delay="50" data-tooltip="Anyone" style="width:80px;height:80px" onerror="setDefaultPicture(this)">
</div>
<div style="position:relative;bottom:185px;left:60px;">
<a class="btn-floating btn-large waves-effect waves-light red tooltipped" data-position="top" data-delay="50" data-tooltip="New chat" onclick="newChat()"><i class="material-icons">add</i></a>
<a class="btn-floating btn waves-effect waves-light blue tooltipped" data-position="top" data-delay="50" data-tooltip="Settings" onclick="showEditProfile()"><i class="material-icons">settings</i></a>
<a id="logUserBtn" class="btn-floating btn waves-effect waves-light green tooltipped" data-position="top" data-delay="50" data-tooltip="Log In" onclick="logOut()"><i class="material-icons">exit_to_app</i></a>
</div>
</div>
<div class="chat" style="max-height:815px">
<div class="chat-header clearfix">
<img id="chatPicture" src="" onerror="setDefaultPicture(this)" alt="avatar" class="circle" style="width:70px;height:70px" />
<div class="chat-about">
<div id="chatWith" class="chat-with">Anyone</div>
<div id="chatNumMessages" class="chat-num-messages">0</div>
</div>
<a href="#!" onclick="deleteMessages()" style="color:red"><i class="material-icons right">delete</i></a>
</div> <!-- end chat-header -->
<div class="chat-history">
<ul id="chatWindow" >
<!--
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:10 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Hi Vincent, how are you? How is the project coming along?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:12 AM, Today</span>
</div>
<div class="message my-message">
Are we meeting today? Project has been already finished and I have results to show you.
</div>
</li>
-->
</ul>
<div style="text-align:center">
<a href="#!" onclick="getMoreMessagesWithLinkClick()">Load More</a>
</div>
</div> <!-- end chat-history -->
<div class="chat-message clearfix">
<textarea name="message-to-send" id="messageTxt" placeholder ="Type your message" rows="3" onkeypress="checkSendMessage(event)"></textarea>
<div>
<div class="input-field left" style="position:relative;bottom:85px;left:380px;">
<input type="file" id="fileInput" style="display:none">
<label class="active" for="fileInput"><a class="btn-floating btn waves-effect waves-light blue tooltipped" data-position="top" data-delay="50" data-tooltip="Send File"><i class="material-icons">cloud_upload</i></a></label>
</div>
<a class="btn-floating btn waves-effect waves-light green tooltipped right" style="position:relative;bottom:30px;left:0px;" data-position="top" data-delay="50" data-tooltip="Send Message" onclick="sendMessage()"><i class="material-icons">send</i></a>
<!-- <button class="right" onclick="sendMessage()">Send</button> -->
</div>
</div> <!-- end chat-message -->
</div> <!-- end chat -->
</div> <!-- end container -->
<!-- Footer -->
<br><br><br>
<div id="footer" style="align:center;">
<a href="https://github.com/segura2010/CC-Proyecto-OpenSecureChat" target="_blank"><img src="images/github.png"> Fork me on Github</a>
</div>
<!-- login and register modal -->
<div id="loginAndRegister" class="modal">
<div class="modal-content row">
<div class="col s6">
<h3 style="color:black">Log In</h3>
<div class="input-field col s12">
<input value="" style="color:black" id="emailLogInTxt" type="text" class="validate">
<label class="active" for="emailLogInTxt">Email</label>
</div>
<div class="input-field col s12">
<input value="" style="color:black" id="passwordLogInTxt" type="password" class="validate">
<label class="active" for="passwordLogInTxt">Password</label>
</div>
<a href="#!" class="modal-action modal-close waves-effect waves-white btn" onclick="logInUser()">Log In</a>
</div>
<div class="col s6">
<h3 style="color:black">Sign Up</h3>
<div class="input-field col s12">
<input value="" style="color:black" id="usernameRegTxt" type="text" class="validate">
<label class="active" for="usernameRegTxt">Username</label>
</div>
<div class="input-field col s12">
<input value="" style="color:black" id="passwordRegTxt" type="password" class="validate">
<label class="active" for="passwordRegTxt">Password</label>
</div>
<div class="input-field col s12">
<input value="" style="color:black" id="emailRegTxt" type="text" class="validate">
<label class="active" for="emailRegTxt">Email</label>
</div>
<a href="#!" class="modal-action modal-close waves-effect waves-white btn" onclick="registerUser()">Sign Up</a>
</div>
</div>
<div class="modal-footer">
<i></i>
</div>
</div>
<!-- new chat modal -->
<div id="newChat" class="modal">
<div class="modal-content row">
<div class="col s6">
<h3 style="color:black">New Chat</h3>
<div class="input-field col s12">
<input value="" style="color:black" id="newChatUsernameTxt" type="text" class="validate">
<label class="active" for="newChatUsernameTxt">Username</label>
</div>
<div class="input-field col s12">
<input value="" style="color:black" id="newChatMessageTxt" type="text" class="validate">
<label class="active" for="newChatMessageTxt">Message</label>
</div>
<a href="#!" class="modal-action modal-close waves-effect waves-white btn" onclick="createChat()">Create</a>
</div>
<div class="col s6">
</div>
</div>
<div class="modal-footer">
<i>Put the username of the other user to create the chat</i>
</div>
</div>
<!-- edit profile modal -->
<div id="editProfile" class="modal">
<div class="modal-content row">
<h3 style="color:black">Edit Profile</h3>
<img id="editProfileImage" src="" class="circle" style="width:120px;height:120px" onerror="setDefaultPicture(this)">
<br>
<input type="file" id="profileImageInput">
<br><br>
<h3 style="color:black">Activate PushBullet to receive your notifications for new messages on your devices!</h3>
<a id="pushbulletSignInLink" href=""><img src="https://lh3.googleusercontent.com/kR7yrU5ioduH9D0LGM1qr6GAPxFv6gybYmIvQwxwhvIkDj_hJA1GrwP4pqOn5wW5Hawp-kvNGWEHch4AAo6aiUGcug"></a>
<!--
<a href="#!" class="modal-action modal-close waves-effect waves-white btn" onclick="">Save</a>
-->
</div>
<div class="modal-footer">
<i></i>
</div>
</div>
<!-- chat file modal -->
<div id="chatFileModal" class="modal">
<div class="modal-content row">
<h1 style="color:black" id="chatFileName"></h1>
<a id="chatFileDownloadLink" href="" download="" target="_blank">Download</a>
<a id="chatFileDeleteLink" href="#!" class="modal-close right" style="color:red"><i class="material-icons right">delete</i></a>
<br>
<iframe id="chatFileIframe" src="" style="width:500px;height:500px"></iframe>
</div>
<div class="modal-footer">
<i></i>
</div>
</div>
</body>
</html>