mubot-server
Version:
A server for mubot
396 lines (394 loc) • 24.1 kB
HTML
<html ng-app="myApp" ng-strict-di>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bitmark</title>
<link rel="stylesheet" href="/bitmark/css/bootstrap.min.css">
<link rel="stylesheet" href="/bitmark/css/chatstyle.css">
<link rel="stylesheet" href="/bitmark/css/style.css">
<script src="/bundle.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.min.js"></script>
<script src="/bitmark/js/disable-scroll.min.js"></script>
<script src="/bitmark/js/jquery.min.js"></script>
<script src="/bitmark/js/angular.min.js"></script>
<script src="/bitmark/js/moment.min.js"></script>
<script src="/bitmark/js/angular-moment.min.js"></script>
<script src="/bitmark/js/elastic.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> -->
<script src="/bitmark/js/bitmark_script.js"></script>
<script src="/bitmark/js/script.js"></script>
</head>
<body loaded="navbar" ng-cloak ng-controller="mainController">
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="topbar container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mn" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="padding: 0px 20px 0px 25px;" href="http://www.bitmark.io" class="navbar-brand" href="#">
<img id="btmid" src="/bitmark/images/bitmark-purple.png" width="45" height="45">
</a>
</div>
<div id="mn" class="collapse navbar-collapse"> <!-- style="padding-right: 25px"> -->
<ul class="nav navbar-nav">
<li ng-click="updateState('/bitmark/', 'home')" ng-class="state === 'home' || state.length === 24 ? 'active' : 'menu-option'">
<a style="padding-top: 17px; padding-left: 10px; padding-right: 10px;" href="#">Home</a>
</li>
<li ng-click="updateState('/bitmark/', 'wallet')" ng-class="state === 'wallet' ? 'active' : 'menu-option'">
<a style="padding-top: 17px; padding-left: 10px; padding-right: 10px;" href="#">Wallet</a>
</li>
<li ng-click="updateState('/bitmark/', 'profile')" ng-class="state === 'profile' ? 'active' : 'menu-option'">
<a style="padding-top: 17px; padding-left: 10px; padding-right: 10px;" href="#">Profile</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<div class="item">
<span ng-if="data.notifications.length > 0" class="notify-badge">{{data.notifications.amount}}</span>
<img class="avatar-navbar" ng-src="/uploads/{{data.username}}" alt="">
</div>
<span title="Your reputation." class="reputation">{{data.reputation || 0}}</span>
<span title="Your balance." class="balance">{{data.balance || 0}}</span>
</a>
<ul class="dropdown-menu top-right-menu">
<li class="top-right-menu-option" ng-repeat="notification in data.notifications track by $index" ng-init="post = posts[notification.id]">
<div ng-click="notificationClicked(notification)" id="reply" ng-style="postGlow({marks: post.marks})" class="posting"
style="margin-top: 5px; margin-bottom: 5px; overflow: hidden; height: 100px; width: 220px; display: inline-block; box-shadow: purple 0px 0px 0px;">
<img ng-src="" alt="" style="width: 100%; top: -0px;">
<!-- For pictures when they are allowed -->
<div style="position: relative; bottom: 10px"class="post-body">
<a href="/bitmark/users/{{post.username}}" onclick="event.stopPropagation()" target="_parent">
<img class="avatar" ng-src="/uploads/{{post.username}}" alt="">
<strong>{{post.username}}</strong>
</a>
<span class="spacer"></span>
<small class="time">
<span class="timestamp">{{post.date | amTimeAgo}}</span>
</small>
<p style="position: relative; bottom: 10px" class="post-paragraph">{{post.message}}</p>
<div style="float:right">
<button style="position: relative; bottom: 25px" type="button" class="btnMark">
<span class="iconMark"></span><span class="markAmnt">{{post.marks}}</span>
</button>
<div class="bcmcontainer"></div>
</div>
<div></div>
</div>
</div>
</li>
<li class="nav-divider"></li>
<li ng-if="data.username === 'Guest'" ng-click="$root.account_create = false" data-toggle="modal" data-target=".login-modal-sm">
<a href="" onclick="event.preventDefault()">Log in</a>
</li>
<li ng-if="data.username === 'Guest'" ng-click="$root.account_create = true" data-toggle="modal" data-target=".login-modal-sm">
<a href="" onclick="event.preventDefault()">Create account</a>
</li>
<li ng-if="data.username !== 'Guest'" ng-click="logout()">
<a href="" ng-click="$event.preventDefault()">Sign Out</a>
</li>
</ul>
</li>
</ul>
<div class="navbar-form navbar-right">
<input id="sp" type="text" ng-model="postsFilter.message" class="form-control search-posts" placeholder="{{replyto ? 'Search Replies' : 'Search Posts'}}">
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Start wallet -->
<div ng-if="state === 'wallet'">
<div style="margin-top: 25px; text-align: center; vertical-align: middle;">
<div style="background-color: ghostwhite; padding: 10px; border-radius: 15px; box-shadow: inset 0px 0px 50px #8b8c8e;">
<span title="Address"><strong>{{data.wallet}}</strong></span>
<br />
<span title="Balance"><strong>{{data.balance}}</strong></span>
<br />
<button ng-click="withdrawMarks(withdraw.amount, withdraw.address)">Withdraw</button> <input size="6" ng-model="withdraw.amount" placeholder="amount"> to
<input ng-model="withdraw.address" placeholder="address" size="38">
<br />
<br />
To increase your balance send Bitmarks (BTM) to your wallet address or post and get marked. <strong>1 BTM = 1000 Marks.</strong>
</div>
<h1 style="margin-top: 40px">Transaction history</h1>
<div style="margin-top: 30px" ng-repeat="tran in trans">
<div style="display: inline-block; border-radius: 7px;" ng-class="tran.type">
<a href="http://explorer.bitmark.io/tx/{{tran.txid}}">{{tran.txid}}</a>
<div><strong>{{tran.type === 'withdraw' ? '-' : '+'}}</strong>{{tran.amount}} {{tran.date | amTimeAgo}}</div>
</div>
</div>
</div>
</div>
<!-- Start profile -->
<div ng-if="state === 'profile'">
<img class="profile-pic" ng-src="/uploads/{{data.username}}">
<form class="inline" action="/bitmark/uploads" method="post" enctype="multipart/form-data">
<label for="file">To change profile picture choose file:</label><br>
<input style="display: inline-block" type="file" name="upl" ng-model="file" id="file">
<input class="btn btn-success" type="submit" name="submit" value="Submit">
</form>
</div>
<!-- Start home page -->
<div ng-if="state === 'home' || state === replyto">
<!-- Start selected post reply container -->
<div ng-if="!replyto" class="comment-container">
<img class="comment-img" ng-src="/uploads/{{data.username}}" />
<textarea ng-focus="$event.target.style.height='120px'" ng-blur="$event.target.style.height='50px'"
ng-keydown="$event.keyCode == 13 && !$event.shiftKey && create($event);" ng-model="data.message" class="post-textarea"
placeholder="{{data.username == 'Guest' ? ' You need to create a FREE account to post.' : ' What would you like to post ' + data.username + '?'}}">
</textarea>
</div>
<!-- Start selected post -->
<div ng-disable-scroll="data.mouseOverSomething" class="selected-gridcell fixed-container" id="post2">
<div ng-click="!isDisabled && select(post, $event)" ng-if="post = posts[replyto]" class="gridcell post-selected" id="post">
<div ng-style="postGlow(post)" class="post-selected posting">
<!-- For future use (allow images in posts), for now it just adds spacing -->
<img ng-src="" alt="">
<!-- <img style="max-height: {{replyto ? '620px' : '340px' }}; max-width: {{replyto ? '620px' : '340px' }};"> example to allow larger imgs ons elected post-->
<div class="post-body">
<a href="/bitmark/users/{{post.username}}" onclick="event.stopPropagation()" target="_parent">
<img class="avatar" ng-src="/uploads/{{post.username}}" alt="">
<strong>{{post.username}}</strong>
</a>
<span class="spacer"></span>
<small class="time"><span class="timestamp">{{post.date | amTimeAgo}}</span></small>
<p class="post-paragraph">{{post.message}}</p>
<div class="fright">
<div style="position:relative">
<div ng-click="back($event, {'replyto': ''})" ng-if="replyto" class="x x-big"><b></b><b></b><b></b><b></b></div>
</div>
<div ng-click="back($event, post);" ng-if="replyto" style="float: right;" class="x"><b></b><b></b><b></b><b></b></div>
<button ng-click="mark($event, post)" class="btnMark" onmouseleave="this.childNodes[1].style.transform = 'rotate(0deg)'" onmouseover="this.childNodes[1].style.transform = 'rotate(45deg)'">
<span class="iconMark"></span><span class="markAmnt">{{post.marks}}</span>
</button>
<div class="bcmcontainer">
<button class="btn-cancel-marking" ng-if="messageNeeded[post._id]" ng-click="cancelMarking($event, post)" class="btn-cancel-marking-shifted">
Cancel
</button>
</div>
</div>
<textarea class="reason-textarea" ng-model="data.marking_msg" ng-if="messageNeeded[post._id]" auto-focus ng-blur="reasonBlur(post)"
ng-keydown="$event.keyCode === 13 && !$event.shiftKey && mark($event, post)" placeholder="Reason? (This may be left blank)">
</textarea>
<div class="bcmcontainer"></div>
</div>
</div>
</div>
</div>
<!-- Start replies or posts container -->
<div ng-if="replyto" class="comment-container" loaded="post">
<img class="comment-img" ng-src="/uploads/{{data.username}}">
<textarea ng-click="$event.target.style.height = '120px'" ng-blur="$event.target.style.height = '50px'"
ng-model="data.message" class="post-textarea" ng-keydown="$event.keyCode === 13 && !$event.shiftKey && create($event)"
placeholder="{{data.username === 'Guest' ? ' You need to create a FREE account to reply.' : ' What would you like to reply ' + data.username + '?'}}">
</textarea>
</div>
<!-- Start replies or posts -->
<div class="selected-gridcell">
<div ng-click="!isDisabled && select(post, $event)" ng-repeat="post in replies[post._id || ''] | filter: postsFilter track by $index" Class="gridcell">
<div style="display: inline-block" id="reply" ng-style="postGlow(post)" class="posting">
<img ng-src="" alt="" style="width: 100%; top: -0px;">
<!-- For pictures when they are allows -->
<div class="post-body">
<a href="/bitmark/users/{{post.username}}" onclick="event.stopPropagation()" target="_parent">
<img class="avatar" ng-src="/uploads/{{post.username}}" alt="">
<strong>{{post.username}}</strong>
</a>
<span class="spacer"></span>
<small class="time">
<span class="timestamp">{{post.date | amTimeAgo}}</span>
</small>
<p class="post-paragraph">{{post.message}}</p>
<div style="float:right">
<button ng-click="mark($event, post)" type="button" class="btnMark"
onmouseout="this.childNodes[1].style.transform = 'rotate(0deg)'" onmouseover="this.childNodes[1].style.transform = 'rotate(45deg)'">
<span class="iconMark"></span><span class="markAmnt">{{post.marks}}</span>
</button>
<div class="bcmcontainer">
<button class="btn-cancel-marking"
ng-if="messageNeeded[post._id]" ng-click="cancelMarking($event, post)" class="btn-cancel-marking-shifted">
Cancel
</button>
</div>
</div>
<textarea class="reason-textarea" ng-model="data.marking_msg" ng-if="messageNeeded[post._id]" auto-focus ng-blur="reasonBlur(post)"
ng-keydown="$event.keyCode == 13 && !$event.shiftKey && mark($event, post)" placeholder="Reason? (This may be left blank)">
</textarea>
<div></div>
</div>
</div>
</div>
</div>
</div>
<!-- Start login modal -->
<div id="loginModal" class="modal fade login-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div style="min-width: 200px; min-height:200px; width: 20vw; height: 20vw" class="modal-content">
<div ng-controller="loginController" id="column_container">
<div id="row_container">
<button class="btn btn-primary" ng-click="login()">Log In</button>
<button class="btn btn-success" ng-click="createAccount(); !account_create && validateUsername()">Create Account</button>
</div>
<div ng-class="data.username.style">
<input type="text" id="username" ng-model="data.username.value" ng-change="validateUsername()" class="form-control" placeholder="Username">
</div> {{data.username.information}}
<div ng-class="data.password.style">
<input type="password" ng-model="data.password.value" ng-change="validatePassword(); validatePassword2()" class="form-control"
ng-keydown="$event.keyCode == 13 && ( !account_create && login() || account_create && createAccount() )" placeholder="Password">
</div> {{data.password.information}}
<div ng-if="account_create" ng-class="data.password2.style">
<input type="password" ng-model="data.password2.value" class="form-control" ng-change="validatePassword2()" ng-keydown="$event.keyCode == 13 && createAccount()" placeholder="Repeat Password">
</div> {{data.password2.information}}
</div>
</div>
</div>
</div>
<!-- Start footer -->
<footer class="navbar-fixed-bottom" style="width: 10%; margin-left: 90vw">
<div ng-repeat="pm in pms track by $index" class="container">
<div ng-style="{'right': pmRightOffSet($index), 'height': pm.maximized ? '348px' : '34px'}" class="popup-box-on popup-box full-pm-window" id="qnimate">
<div class="popup-head" ng-click="togglePmWindow(pm)">
<div class="popup-head-left pull-left">
<span class="pm-status" ng-class="usersOnline[pm.username].status || 'gone'"></span>
<span class="pm-username">{{pm.username}}</span>
<!-- User is typing dots -->
<div ng-if="pm.istyping" id="wave">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<span ng-if="data.awaitingPms[pm.username]" class="pm-badge">{{data.awaitingPms[pm.username]}}</span>
</div>
<div class="popup-head-right pull-right">
<div class="btn-group">
<!-- Pm window settings button -->
<button ng-click="data.dontMinimize = true;" class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
<a href="#" class="pm-settings-icon"></a>
</button>
<ul role="menu" class="dropdown-menu pull-right">
<li><a href="#">Add media</a></li>
<li><a href="#">Block</a></li>
<li><a href="#">Clear Chat</a></li>
<li><a href="#">Email Chat</a></li>
</ul>
</div>
<!-- Exit pm window button -->
<button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button">
<a href="#" ng-click="closePmWindow(pm); $event.stopPropagation(); $event.preventDefault()" class="pm-exit-icon"></a>
</button>
</div>
</div>
<div ng-mouseover="data.mouseOverSomething=true" ng-mouseleave="data.mouseOverSomething=false" ng-if="pm.maximized" class="popup-messages">
<div class="direct-chat-messages" autoscroll>
<div ng-repeat="msg in pm.history track by $index">
<div ng-if="!sameDay(msg.date, pm.history[$index-1].date)" class="chat-box-single-line">
<abbr class="timestamp">{{msg.date | date:'MMMM, dd yyyy'}}</abbr>
</div>
<div ng-if="msg.sender !== data.username && !skipSameMin()">
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">PM</span>
</div>
<img alt="message user image" src="/uploads/{{pm.username}}" class="direct-chat-img">
<div class="direct-chat-text">
{{getSameMin(pm.history, $index)}}
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">{{msg.date | date:'hh:mm a'}}</span>
</div>
<div ng-if="msg.ismarked || msg.sender !== pm.history[$index+skipSameMins+1].sender" class="direct-chat-info clearfix">
<span onmouseleave="this.childNodes[1].style.transform = 'rotate(0deg)'" onmouseover="this.childNodes[1].style.transform='rotate(45deg)'"
ng-click="!msg.ismarked && markPm(msg)" ng-class="{'pm-marked':msg.ismarked}" class="direct-chat-img-reply-small pull-left">
<span class="iconMark iconMark-pm" style="cursor: pointer"></span>
</span>
<span ng-if="msg.sender !== pm.history[$index+skipSameMins+1].sender" class="direct-chat-reply-name">{{pm.username}}</span>
</div>
</div>
</div>
<div ng-if="msg.sender === data.username && !skipSameMin()">
<div class="direct-chat-msg-self doted-border-self">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">PM</span>
</div>
<img alt="message user image" src="/uploads/{{data.username}}" class="direct-chat-img pull-right">
<div class="direct-chat-text-self">
{{getSameMin(pm.history, $index)}}
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-left">{{msg.date | date:'hh:mm a'}}</span>
</div>
<div ng-if="msg.ismarked || msg.sender !== pm.history[$index+skipSameMins+1].sender"
class="direct-chat-info clearfix pull right">
<span ng-class="{'pm-marked':msg.ismarked}" class="direct-chat-img-reply-small pull-right">
<span class="iconMark iconMark-pm"></span>
</span>
<span ng-if="msg.sender !== pm.history[$index+skipSameMins+1].sender" class="direct-chat-reply-name pull-right" style="margin-right: 10px;">{{data.username}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-if="pm.maximized" class="popup-messages-footer">
<textarea msd-elastic class="pm_text" ng-keydown="$event.keyCode !== 13 && startedTyping(pm); $event.keyCode === 13 && !$event.shiftKey && createPm($event, pm);"
auto-focus ng-model="$parent.pm.text" placeholder="{{data.username !== 'Guest' ? 'Type a message...' : 'Create an account...'}}" rows="1" name="message"></textarea>
</div>
</div>
</div>
<!-- User list button -->
<div class="popup-userlist-tab">
<a ng-click="popupUserlist = !popupUserlist" href="#" id="chat"><span class="glyphicon glyphicon-comment"></span> {{amountOnline}} Online</a>
</div>
<!-- User list -->
<div ng-if="popupUserlist" ng-mouseover="data.mouseOverSomething=true" ng-mouseleave="data.mouseOverSomething=false" id="userlist" class="popup-userlist">
<div class="content container-fluid bootstrap snippets" style="height: 100%; padding-bottom: 50px">
<div class="row row-broken" style="padding: 2px; height: 100%">
<div class="chat" style="overflow: scroll; height: 100%" tabindex="5000">
<!-- offline, busy, online, -->
<div class="chat-users">
<div id="user-container">
<div ng-if="!usersOnline[username] || usersOnline[username].status === 'offline'" style="height: 40px" ng-repeat="(username, value) in data.awaitingPms track by $index"
ng-click="openPmWindow({username: username})" class="user-container awaiting-pm">
<div class="user">
<div class="avatar">
<img class="user-list-img" src="/uploads/{{username}}" alt="{{username}}">
<div class="status gone"></div>
</div>
<div class="name">{{username}}</div>
<div class="marks"> </div>
</div>
</div>
<div ng-if="user.status !== 'offline'" ng-repeat="user in usersOnline track by $index"
ng-click="openPmWindow(user)" class="user-container" ng-class="{'awaiting-pm': data.awaitingPms[user.username]}">
<div class="user">
<div class="avatar">
<img class="user-list-img" src="/uploads/{{user.username}}" alt="{{user.username}}">
<div class="status" ng-class="usersOnline[user.username].status"></div>
</div>
<div class="name">{{user.username}}</div>
<div class="marks">{{user.balance}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="popup-userlist-tab-open">
<a class="the-userlist-link" ng-click="data.mouseOverSomething = false; $parent.popupUserlist = !popupUserlist" href="#" id="chat"><span class="glyphicon glyphicon-comment"></span> {{amountOnline}} Online</a>
</div>
</div>
</footer>
</body>
<script>
$(function(){
// Auto focus login model input.
$('#loginModal').on('shown.bs.modal', $("#username").focus)
})
</script>
</html>