604 lines
26 KiB
HTML
604 lines
26 KiB
HTML
<!doctype html>
|
|
<html class="no-js fuelux" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>prototype</title>
|
|
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
<script data-main="js/desktop" src="js/libs/require.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar navbar-default" role="navigation">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">BNL</a>
|
|
</div>
|
|
<button id="nav-logout-btn" type="button" class="btn btn-default navbar-btn navbar-right authed-section" style="display:none">Logout</button>
|
|
<a href="#/profile" type="button" class="btn btn-default navbar-btn navbar-right authed-section" style="display:none">Profile</a>
|
|
<p class="authed-section navbar-text navbar-right" style="display:none"><b>User: </b><span class="username-placeholder"></span></p>
|
|
<p class="authed-section navbar-text navbar-right" style="display:none"><b>Chips: </b><span class="chips-placeholder"></span></p>
|
|
<a href="#/login" type="button" class="btn btn-default navbar-btn navbar-right unauthed-section">Login</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="login" class="app-view row-fluid" style="display:none">
|
|
<div class="col-sm-3"></div>
|
|
<div class="col-sm-6">
|
|
<div class="panel panel-primary" style="margin-top:10%">
|
|
<div class="panel-heading">Login</div>
|
|
<div class="panel-body">
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label>Username</label>
|
|
<input class="form-control" type="text" name="username" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
<input class="form-control" type="password" name="password" />
|
|
</div>
|
|
<div class="form-group">
|
|
<button id="login-btn" class="btn btn-primary">Login</button>
|
|
<a href="#/register" class="btn btn-default">Register</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3"></div>
|
|
</div>
|
|
|
|
<div id="register" class="app-view row-fluid" style="display:none">
|
|
<div class="col-sm-3"></div>
|
|
<div class="col-sm-6">
|
|
<div class="panel panel-primary" style="margin-top:10%">
|
|
<div class="panel-heading">Register</div>
|
|
<div class="panel-body">
|
|
<form id="registration-form">
|
|
<div class="form-group">
|
|
<label>Username</label>
|
|
<input class="form-control" type="text" name="username" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
<input class="form-control" type="password" name="password" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Email Address</label>
|
|
<input class="form-control" type="text" name="email" />
|
|
</div>
|
|
<div class="form-group">
|
|
<button id="register-btn" class="btn btn-primary">Register</button>
|
|
<a href="#/login" class="btn btn-default">Return to Login</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3"></div>
|
|
</div>
|
|
|
|
<div id="profile" class="app-view row-fluid" style="display:none">
|
|
<div class="col-sm-4">
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">User Stats</div>
|
|
<div class="panel-body" id="user-stats-container"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">User Profile</div>
|
|
<div class="panel-body" id="profile-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script id="ProfileUpdateTmpl" type="text/template">
|
|
<form id="profile-form">
|
|
<div class="form-group">
|
|
<label>Email Address</label>
|
|
<input class="form-control" type="text" name="email" value="<%-user.email %>" />
|
|
</div>
|
|
<div class="form-group">
|
|
<button id="save-profile-btn" class="btn btn-primary">Save Changes</button>
|
|
</div>
|
|
</form>
|
|
<form id="password-form">
|
|
<div class="form-group">
|
|
<label>Old Password</label>
|
|
<input class="form-control" type="password" name="oldpassword" placeholder="Old Password" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>New Password</label>
|
|
<input class="form-control" type="password" name="password" placeholder="New Password" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Confirm Password</label>
|
|
<input class="form-control" type="password" name="password2" placeholder="Confirm Password" />
|
|
</div>
|
|
<div class="form-group">
|
|
<button id="update-password-btn" class="btn btn-primary">Update Password</button>
|
|
</div>
|
|
</form>
|
|
</script>
|
|
|
|
<script id="UserStatsTmpl" type="text/template">
|
|
<dl class="dl-horizontal">
|
|
<p>
|
|
<b>Current Chips</b><br />
|
|
<%-user.chips %> chips
|
|
</p>
|
|
<p>
|
|
<b>Hands Won</b><br />
|
|
<%-user.wins %>
|
|
</p>
|
|
<p>
|
|
<b>Largest Amount Won</b><br />
|
|
<%-user.largestWin %> chips
|
|
</p>
|
|
<p>
|
|
<b>Join Date</b><br />
|
|
<%- new Date(user.created) %>
|
|
</p>
|
|
</dl>
|
|
</script>
|
|
|
|
<div id="tables" class="app-view row-fluid" style="display:none;margin-top:25px">
|
|
<div class="col-sm-6">
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">Table List
|
|
<button id="sync-table-list" class="btn btn-sm btn-default pull-right"><span class="glyphicon glyphicon-refresh"></span> Sync</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<table class="table table-condensed table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
Blinds
|
|
</th>
|
|
<th>
|
|
Buy In
|
|
</th>
|
|
<th>
|
|
Players
|
|
</th>
|
|
<th>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table-list"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">Messenger
|
|
<button id="show-add-friend-modal-btn" class="btn btn-sm btn-default pull-right"><span class="glyphicon glyphicon-plus"></span> Add Friend</button>
|
|
<button id="sync-friend-list" class="btn btn-sm btn-default pull-right"><span class="glyphicon glyphicon-refresh"></span> Sync</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row-fluid">
|
|
<div class="col-sm-4">
|
|
<b>Friend List</b>
|
|
<ul id="friend-list" class="list-group"></ul>
|
|
</div>
|
|
<div id="messenger-input-container" class="col-sm-8" style="display:none">
|
|
<div id="messenger-area"></div>
|
|
<div class="clearfix">
|
|
<textarea id="messenger-chatbox" placeholder="Type your message.."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">Create Table</div>
|
|
<div class="panel-body" id="create-table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script id="FriendListTmpl" type="text/template">
|
|
<% if(friends.length > 0){ %>
|
|
<% _.each(friends, function(friend, key){ %>
|
|
<li <% if(friend.online){ %>did="<%- friend.id %>"<% } %> class="list-group-item <% if(friend.online !== true){ %>disabled<% } %>"><%- friend.username %><% if(showCheckbox){ %><input type="checkbox" name="friend-checkbox" /><% } %></li>
|
|
<% }); %>
|
|
<% }else{ %>
|
|
<li class="list-group-item">no matches found.</li>
|
|
<% } %>
|
|
</script>
|
|
|
|
<div id="dashboard" class="app-view row-fluid" style="display:none;margin-top:25px">
|
|
<div class="col-sm-4">
|
|
<div id="user-list-container" class="panel panel-primary">
|
|
<div class="panel-heading">User List</div>
|
|
<div class="panel-body">
|
|
<div class="list-group"></div>
|
|
</div>
|
|
</div>
|
|
<div id="chat-container" class="panel panel-primary">
|
|
<div class="panel-heading">Chat Room</div>
|
|
<div class="panel-body">
|
|
<div id="chat-area"></div>
|
|
<div class="clearfix">
|
|
<textarea placeholder="Type your message.."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="history-container" class="panel panel-primary">
|
|
<div class="panel-heading">Game History</div>
|
|
<div class="panel-body">
|
|
<div id="history-area"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<div id="poker-container" class="panel panel-primary">
|
|
<div class="panel-heading">Poker
|
|
<button id="remove-bots-btn" class="btn btn-sm btn-default pull-right">Remove Bots</button>
|
|
<button id="leave-table-btn" class="btn btn-sm btn-default pull-right">Leave Table</button>
|
|
<div id="countdown-placeholder" class="pull-right"></div>
|
|
</div>
|
|
<div class="panel-body"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script id="TableListTmpl" type="text/template">
|
|
<% if(tables.length > 0){ %>
|
|
<% _.each(tables, function(table, key){ %>
|
|
<tr did="<%- table.id %>">
|
|
<td><%- table.smallBlind %> / <%- table.bigBlind %></td>
|
|
<td><%- table.minBuyIn %> / <%- table.maxBuyIn %></td>
|
|
<td><%- table.players %> playing / <%- table.members %> member</td>
|
|
<td><button class="join-table-btn btn btn-primary">Join</button></td>
|
|
</tr>
|
|
<% }); %>
|
|
<% }else{ %>
|
|
<tr>
|
|
<td colspan="4">No games available. You can create a game yourself.</td>
|
|
</tr>
|
|
<% } %>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div class="row-fluid">
|
|
<div class="col-sm-4">members: <%- totalMembers || 0 %></div>
|
|
<div class="col-sm-4">players: <%- totalPlayers || 0 %></div>
|
|
<div class="col-sm-4">tables: <%- tables.length %></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</script>
|
|
|
|
<script id="newTableTmpl" type="text/template">
|
|
<form class="row-fluid">
|
|
<div class="form-group col-xs-6">
|
|
<label>Small Blind</label>
|
|
<input type="text" class="form-control" name="smallBlind" placeholder="Small Blind" value="50" />
|
|
</div>
|
|
<div class="form-group col-xs-6">
|
|
<label>Big Blind</label>
|
|
<input type="text" class="form-control" name="bigBlind" placeholder="Big Blind" value="100" />
|
|
</div>
|
|
<div class="form-group col-xs-6">
|
|
<label>Minimum Buy In</label>
|
|
<input type="text" class="form-control" name="minBuyIn" placeholder="Minimum Buy In" value="100" />
|
|
</div>
|
|
<div class="form-group col-xs-6">
|
|
<label>Maximum Buy In</label>
|
|
<input type="text" class="form-control" name="maxBuyIn" placeholder="Maximum Buy In" value="10000" />
|
|
</div>
|
|
<div class="form-group col-xs-6">
|
|
<label>Minimum Players</label>
|
|
<select class="form-control" name="minPlayers">
|
|
<option value="2" selected="selected">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
<option value="6">6</option>
|
|
<option value="7">7</option>
|
|
<option value="8">8</option>
|
|
<option value="9">9</option>
|
|
<option value="10">10</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group col-xs-6">
|
|
<label>Maximum Players</label>
|
|
<select class="form-control" name="maxPlayers">
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
<option value="6">6</option>
|
|
<option value="7">7</option>
|
|
<option value="8">8</option>
|
|
<option value="9">9</option>
|
|
<option value="10" selected="selected">10</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group col-xs-12">
|
|
<label>Game Mode</label>
|
|
<select class="form-control" name="gameMode">
|
|
<option value="normal">Normal (30 second hand)</option>
|
|
<option value="fast">Fast (15 second hand)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group col-xs-12">
|
|
<button id="create-table-btn" class="btn btn-primary">Create Table</button>
|
|
</div>
|
|
</form>
|
|
</script>
|
|
|
|
<script id="UserListItem" type="text/template">
|
|
<% _.each(items, function(item, key){ %>
|
|
<a tabindex="0" did="<%- item.attributes.id %>" class="list-group-item<% if(userId == item.attributes.id){ %> is-me<% } %> clearfix" data-placement="auto left" title="<%- item.attributes.username %>">
|
|
<% if(userId == item.attributes.id){ %>
|
|
<span class="glyphicon glyphicon-chevron-right"></span>
|
|
<% } %>
|
|
<%- item.attributes.username %>
|
|
<div class="pull-right">
|
|
<span class="glyphicon glyphicon-usd"></span>
|
|
<%- item.attributes.chips %>
|
|
</div>
|
|
</a>
|
|
<% }); %>
|
|
</script>
|
|
|
|
<script id="ChatMessageList" type="text/template">
|
|
<% _.each(items, function(item, key){ %>
|
|
<table>
|
|
<tr>
|
|
<td class="date"><%- item.date %></td>
|
|
<td class="nick"><%- item.user %></td>
|
|
<td class="msg-text <%- typeof type !== 'undefined' ? type : '' %>"><%- item.msg %></td>
|
|
</tr>
|
|
</table>
|
|
<% }); %>
|
|
</script>
|
|
|
|
<script id="ChatMessageItem" type="text/template">
|
|
<table>
|
|
<tr>
|
|
<td class="date"><%- date %></td>
|
|
<td class="nick"><%- user %></td>
|
|
<td class="msg-text <%- typeof type !== 'undefined' ? type : '' %>"><%- msg %></td>
|
|
</tr>
|
|
</table>
|
|
</script>
|
|
|
|
<script id="CurrentGameView" type="text/template">
|
|
<% if(!gameSession){ %>
|
|
<h4>No Game Exists</h4>
|
|
<% }else if(gameSession.state == 'JOIN'){ %>
|
|
<% if(gameSession.gameWinners && gameSession.gameWinners.length > 0){ %>
|
|
<h4>Last Game Winners</h4>
|
|
<ul>
|
|
<% _.each(gameSession.gameWinners, function(winner, key){ %>
|
|
<li><b><%- winner.playerName %></b> wins <b><%- winner.amount %> chips of the pot!</b></li>
|
|
<% }); %>
|
|
</ul>
|
|
<% } %>
|
|
<h4>Waiting for players. <% if(!gameSession.playersToAdd.some(function(el){ return el.id === user.id})){ %>Would you like to join?<% } %></h4>
|
|
<h5>GAME RULES</h5>
|
|
<dl class="dl-horizontal">
|
|
<dt>Small Blind</dt>
|
|
<dd><%- gameSession.smallBlind %></dd>
|
|
<dt>Big Blind</dt>
|
|
<dd><%- gameSession.bigBlind %></dd>
|
|
<dt>Minimum Buy In</dt>
|
|
<dd><%- gameSession.minBuyIn %></dd>
|
|
<dt>Maximum Buy In</dt>
|
|
<dd><%- gameSession.maxBuyIn %></dd>
|
|
<dt>Minimum Players</dt>
|
|
<dd><%- gameSession.minPlayers %></dd>
|
|
<dt>Maximum Players</dt>
|
|
<dd><%- gameSession.maxPlayers %></dd>
|
|
</dl>
|
|
<h5>JOINED PLAYERS</h5>
|
|
<ul>
|
|
<% _.each(gameSession.playersToAdd, function(player, key){ %>
|
|
<li><%- player.playerName %></li>
|
|
<% }); %>
|
|
</ul>
|
|
<% if(!gameSession.playersToAdd.some(function(el){ return el.id === user.id})){ %>
|
|
<% if(user.chips >= gameSession.minBuyIn){ %>
|
|
<button id="join-game-btn" class="btn btn-primary">Join Game</button>
|
|
<div class="form-group">
|
|
<label>Buy In</label>
|
|
<input type="text" class="form-control" name="user-buyin-input" placeholder="Buy In" value="<%- (gameSession.minBuyIn <= 1000 && gameSession.maxBuyIn >= 1000) ? 1000 : gameSession.minBuyIn %>" />
|
|
</div>
|
|
<% }else{ %>
|
|
<div class="alert alert-warning alert-dismissible" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
|
<strong>Sorry!</strong> You do not have enough chips for the minimum buy-in and cannot join the game.
|
|
</div>
|
|
<% } %>
|
|
<% } %>
|
|
<% if(gameSession.playersToAdd.some(function(el){ return el.id === user.id}) && gameSession.playersToAdd.length >= gameSession.minPlayers){ %>
|
|
<button id="start-game-btn" class="btn btn-primary">Start Playing</button>
|
|
<% } %>
|
|
<% }else if(gameSession.state == 'IN_PROGRESS'){ %>
|
|
<div class="panel panel-success clearfix">
|
|
<div class="panel-heading">
|
|
Board
|
|
<div class="pull-right">
|
|
<b>Pot: <%- gameSession.game.pot %> chips</b>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row-fluid">
|
|
<div class="col-md-7">
|
|
<% _.each(gameSession.game.board, function(card, key){ %>
|
|
<img src="/images/cards/<%- convertCard(card) %>" />
|
|
<% }); %>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<p class="bg-info">
|
|
<% _.each(gameSession.actions, function(action, key){ %>
|
|
Player <b><%- action.playerName %></b>
|
|
performed <b><%- action.action %></b>
|
|
<% if(action.amount){ %>
|
|
for <b><%- action.amount %></b> chips.
|
|
<% } %>
|
|
<br />
|
|
<% }); %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% _.each(gameSession.players, function(player, key){ %>
|
|
<div class="panel panel-info clearfix">
|
|
<div class="panel-heading">
|
|
<% if(gameSession.players[gameSession.currentPlayer].id == player.id){ %>
|
|
<span class="glyphicon glyphicon-user"></span>
|
|
<% } %>
|
|
<%- player.playerName %> / <%- player.chips %> chips
|
|
<div class="pull-right">
|
|
<span class="glyphicon glyphicon-plus"></span> <%- gameSession.game.bets[key] %> chips
|
|
<% if(gameSession.game.blinds[0] == key){ %>
|
|
<span class="label label-success">SMALL BLIND</span>
|
|
<% }else if(gameSession.game.blinds[1] == key){ %>
|
|
<span class="label label-success">BIG BLIND</span>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row-fluid">
|
|
<div class="col-md-6">
|
|
<% if(player.cards){ %>
|
|
<% _.each(player.cards, function(card, key){ %>
|
|
<img src="/images/cards/<%- convertCard(card) %>" />
|
|
<% }); %>
|
|
<% } %>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<% if(gameSession.players[gameSession.currentPlayer].id == player.id && player.id == user.id){ %>
|
|
<button did="call" class="game-action btn btn-primary">Call / Check</button>
|
|
<!--<button did="check" class="game-action btn btn-primary">Check</button>-->
|
|
<button did="allin" class="game-action btn btn-primary">All In</button>
|
|
<button did="fold" class="game-action btn btn-primary">Fold</button>
|
|
<div class="input-group">
|
|
<input class="form-control" name="betAmount" placeholder="Chips to Bet">
|
|
<div did="bet" class="game-action btn btn-primary input-group-addon">Bet</div>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% }); %>
|
|
<div class="row-fluid">
|
|
<div class="col-md-6">
|
|
<h4>GAME RULES</h4>
|
|
<dl class="dl-horizontal">
|
|
<dt>Small Blind</dt>
|
|
<dd><%- gameSession.smallBlind %></dd>
|
|
<dt>Big Blind</dt>
|
|
<dd><%- gameSession.bigBlind %></dd>
|
|
<dt>Minimum Buy In</dt>
|
|
<dd><%- gameSession.minBuyIn %></dd>
|
|
<dt>Maximum Buy In</dt>
|
|
<dd><%- gameSession.maxBuyIn %></dd>
|
|
<dt>Minimum Players</dt>
|
|
<dd><%- gameSession.minPlayers %></dd>
|
|
<dt>Maximum Players</dt>
|
|
<dd><%- gameSession.maxPlayers %></dd>
|
|
</dl>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h4>GAME INFO</h4>
|
|
<dl class="dl-horizontal">
|
|
<dt>Round Name</dt>
|
|
<dd><%- gameSession.game.roundName %></dd>
|
|
<dt>Bet Name</dt>
|
|
<dd><%- gameSession.game.betName %></dd>
|
|
<dt>Game State</dt>
|
|
<dd><%- gameSession.state %></dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
</script>
|
|
|
|
<div id="general-alert" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal"><span class="sr-only">Close</span></button>
|
|
<h4 class="modal-title"></h4>
|
|
</div>
|
|
<div class="modal-body"></div>
|
|
<div class="modal-footer">
|
|
<button data-dismiss="modal" type="button" class="btn btn-primary">Ok</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="confirm-alert" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal"><span class="sr-only">Close</span></button>
|
|
<h4 class="modal-title"></h4>
|
|
</div>
|
|
<div class="modal-body"></div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="submit btn btn-primary">Yes</button>
|
|
<button data-dismiss="modal" type="button" class="btn btn-default">No</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="error-alert" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal"><span class="sr-only">Close</span></button>
|
|
<h4 class="modal-title"></h4>
|
|
</div>
|
|
<div class="modal-body"></div>
|
|
<div class="modal-footer">
|
|
<button data-dismiss="modal" type="button" class="btn btn-primary">Ok</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="add-friend-alert" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal"><span class="sr-only">Close</span></button>
|
|
<h4 class="modal-title">Add Friend</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="input-group">
|
|
<input class="form-control" name="friendName" placeholder="Friend Name">
|
|
<div id="search-friends-btn" class="btn btn-primary input-group-addon">Search</div>
|
|
</div>
|
|
<ul id="friend-results-list" class="clearfix"></ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="add-friend-btn" type="button" class="btn btn-primary">Add Selected</button>
|
|
<button data-dismiss="modal" type="button" class="btn btn-primary">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|