<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--TOP MENU-->
<header role="banner" class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="navbar-inverse side-collapse in">
<nav role="navigation" class="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#Home">Home</a></li>
<li><a href="#users">Users</a></li>
<li><a href="#">Places</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!--TOP BLUE CONVAS-->
<div class="jumbotron jumbotron-sm">
<div class="container side-collapse-container">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1 class="h1">MONETA <small>Online wallet</small></h1>
</div>
</div>
</div>
</div>
<!--CONTENT-->
<div class="container side-collapse-container">
<div class="row">
<div class="row">
<div class="col-md-3">
<!--LEFT MENU-->
<div class="input-group">
<input type="password" class="form-control pwd" value="84000000.3597841 MONET">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div> <br>
<ul class="nav nav-pills nav-stacked admin-menu">
<li class="active"><a href="#" data-target-id="dashboard"><i class="fa fa-home fa-fw"></i>Dashboard</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="send"><i class="fa fa-list-alt fa-fw"></i>Send funds</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="receive"><i class="fa fa-file-o fa-fw"></i>Receive funds</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="address"><i class="fa fa-bar-chart-o fa-fw"></i>My addresses</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="transactions"><i class="fa fa-table fa-fw"></i>Transactions</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="deposit"><i class="fa fa-tasks fa-fw"></i>Deposit funs</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="exblocks"><i class="fa fa-calendar fa-fw"></i>Block explorer</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="applications"><i class="fa fa-pencil fa-fw"></i>Applications</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="settings"><i class="fa fa-cogs fa-fw"></i>Settings</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="api"><i class="fa fa-book fa-fw"></i>API</a></li>
</ul>
</div>
<div class="col-md-9 well admin-content" id="dashboard">
<h2>Dashboard</h2>
</div>
<div class="col-md-9 well admin-content" id="send">
<h2>Send funds</h2>
</div>
<div class="col-md-9 well admin-content" id="receive">
<h2>Receive funds</h2>
</div>
<div class="col-md-9 well admin-content" id="address">
<h2>My addresses</h2><br>
My addresses
</div>
<div class="col-md-9 well admin-content" id="transactions">
<h2>Transactions</h2><br>
Transactions
</div>
<div class="col-md-9 well admin-content" id="deposit">
<h2>Deposit</h2><br>
<div class="notice notice-success">
<strong>Notice</strong> notice-success
</div>
<div class="notice notice-danger">
<strong>Notice</strong> notice-danger
</div>
<div class="notice notice-info">
<strong>Notice</strong> notice-info
</div>
<div class="notice notice-warning">
<strong>Notice</strong> notice-warning
</div>
</div>
<div class="col-md-9 well admin-content" id="exblocks">
<h2>Block explorer</h2><br>
Block explorer
</div>
<div class="col-md-9 well admin-content" id="api">
<h2>Mobile-Friendly API Documentation</h2>
<p class="lead">
Emulate tables that collapse beautifully on mobile devices!
</p>
<div class="alert alert-info">
<h4>Row modifier class included</h4>
<p>This feature uses a row modifier I created called ".margin-0". When applied to a ".row" element, it will ensure the margins between the columns will be 0. </p>
<p>This is important in order to emulate the table-like effect, but it will work in any environment.</p>
</div>
<hr />
<div class="method">
<div class="row margin-0 list-header hidden-sm hidden-xs">
<div class="col-md-3"><div class="header">Property</div></div>
<div class="col-md-2"><div class="header">Type</div></div>
<div class="col-md-2"><div class="header">Required</div></div>
<div class="col-md-5"><div class="header">Description</div></div>
</div>
<div class="row margin-0">
<div class="col-md-3">
<div class="cell">
<div class="propertyname">
CurrencyCode <span class="mobile-isrequired">[Required]</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="type">
<code>String</code>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="isrequired">
Yes
</div>
</div>
</div>
<div class="col-md-5">
<div class="cell">
<div class="description">
The standard ISO 4217 3-letter currency code
</div>
</div>
</div>
</div>
<div class="row margin-0">
<div class="col-md-3">
<div class="cell">
<div class="propertyname">
PriceType <span class="mobile-isrequired">[Required]</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="type">
<code>Int32</code>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="isrequired">
Yes
</div>
</div>
</div>
<div class="col-md-5">
<div class="cell">
<div class="description">
The type of price
</div>
</div>
</div>
</div>
<div class="row margin-0">
<div class="col-md-3">
<div class="cell">
<div class="propertyname">
WarehouseID <span class="mobile-isrequired">[Required]</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="type">
<code>Int32</code>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="isrequired">
Yes
</div>
</div>
</div>
<div class="col-md-5">
<div class="cell">
<div class="description">
The unique identifier for the warehouse
</div>
</div>
</div>
</div>
<div class="row margin-0">
<div class="col-md-3">
<div class="cell">
<div class="propertyname">
ItemCodes
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="type">
<code>String[]</code>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="isrequired">
<span class="text-muted">No</span>
</div>
</div>
</div>
<div class="col-md-5">
<div class="cell">
<div class="description">
</div>
</div>
</div>
</div>
<div class="row margin-0">
<div class="col-md-3">
<div class="cell">
<div class="propertyname">
LanguageID
<a class="lookuplink" href="javascript:;">
<i class="glyphicon glyphicon-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="type">
<code>Int32?</code>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="isrequired">
<span class="text-muted">No</span>
</div>
</div>
</div>
<div class="col-md-5">
<div class="cell">
<div class="description">
The customer's preferred language ID (ex. 0 (English), 1 (Spanish), etc.)
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 well admin-content" id="applications">
<h2>Applications</h2><br>
<!-- apple store button -->
<a class="btn btn-lg btn-primary big-btn" href="#">
<i class="glyphicon glyphicon-phone pull-left"></i><div class="btn-text"><small>Available on the</small><br><strong>App Store</strong></div></a>
<!-- android button -->
<a class="btn btn-lg btn-success big-btn android-btn" href="#">
<img width="80px" class="pull-left" src="http://www.userlogos.org/files/logos/jumpordie/google_play_04.png"><div class="btn-text"><small>Available on</small><br><strong>Google Play</strong></div></a>
<!-- windows store button -->
<a class="btn btn-lg btn-success big-btn windows-btn" href="#">
<img width="60px" class="pull-left" src="http://1.bp.blogspot.com/-rD2_M6Vvv6w/UbmywLq5V8I/AAAAAAAACko/BEcR4QqtkRI/s1600/Windows%2BStore%2BLogo.png"><div class="btn-text">Windows<br>Store</div></a>
</div>
<div class="col-md-9 well admin-content" id="settings">
<h2>Settings</h2><br>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<p class="text-center">Use the form below to change your password. Your password cannot be the same as your username.</p>
<form method="post" id="passwordForm">
<input type="password" class="input-lg form-control" name="password1" id="password1" placeholder="New Password" autocomplete="off">
<div class="row">
<div class="col-sm-6">
<span id="8char" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> 8 Characters Long<br>
<span id="ucase" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Uppercase Letter
</div>
<div class="col-sm-6">
<span id="lcase" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Lowercase Letter<br>
<span id="num" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Number
</div>
</div>
<input type="password" class="input-lg form-control" name="password2" id="password2" placeholder="Repeat Password" autocomplete="off">
<div class="row">
<div class="col-sm-12">
<span id="pwmatch" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Passwords Match
</div>
</div>
<input type="submit" class="col-xs-12 btn btn-primary btn-load btn-lg" data-loading-text="Changing Password..." value="Change Password">
</form>
</div><!--/col-sm-6-->
</div><!--/row-->
</div>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">
<img class="logo" src="http://w.moneta.io/assets/img/logo.png" width="150px" alt="Moneta Wallet"> © 2015 - MONETA Developer Team
<a href="#" target="_blank" >contacts</a>
</p>
<a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
<span class="glyphicon glyphicon-star"></span> Add to favorite</a>
</div>
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
body{margin-top:20px;}
.fa-fw {width: 2em;}
body {
padding-top: 30px;
position: relative;
}
pre {
tab-size: 8;
}
@media screen and (max-width: 768px) {
.side-collapse-container{
width:100%;
position:relative;
left:0;
transition:left .4s;
}
.side-collapse-container.out{
left:200px;
}
.side-collapse {
top:50px;
bottom:0;
left:0;
width:200px;
position:fixed;
overflow:hidden;
transition:width .4s;
}
.side-collapse.in {
width:0;
}
}
.jumbotron {
background: #358CCE;
color: #FFF;
border-radius: 0px;
}
.jumbotron-sm { padding-top: 15px;
padding-bottom: 15px; }
.jumbotron small {
color: #FFF;
}
.h1 small {
font-size: 20px;
}
.notice {
padding: 15px;
background-color: #fafafa;
border-left: 6px solid #7f7f84;
margin-bottom: 10px;
-webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}
.notice-sm {
padding: 10px;
font-size: 80%;
}
.notice-lg {
padding: 35px;
font-size: large;
}
.notice-success {
border-color: #80D651;
}
.notice-success>strong {
color: #80D651;
}
.notice-info {
border-color: #45ABCD;
}
.notice-info>strong {
color: #45ABCD;
}
.notice-warning {
border-color: #FEAF20;
}
.notice-warning>strong {
color: #FEAF20;
}
.notice-danger {
border-color: #d73814;
}
.notice-danger>strong {
color: #d73814;
}
/* Methods */
.method .header, .method .cell {
padding: 6px 6px 6px 10px; }
.method .list-header .header {
font-weight: normal;
text-transform: uppercase;
font-size: 0.8em;
color: #999;
background-color: #eee; }
.method [class^="row"],
.method [class*=" row"] {
border-bottom: 1px solid #ddd; }
.method [class^="row"]:hover,
.method [class*=" row"]:hover {
background-color: #f7f7f7; }
.method .cell {
font-size: 0.85em; }
.method .cell .mobile-isrequired {
display: none;
font-weight: normal;
text-transform: uppercase;
color: #aaa;
font-size: 0.8em; }
.method .cell .propertyname {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.method .cell .type {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.method .cell code {
color: #428bca; }
.method .cell a, .method .cell a:hover {
text-decoration: none; }
.method .cell code.custom {
color: #8a6d3b;
text-decoration: none; }
.method .cell .text-muted {
color: #ddd; }
@media (max-width: 500px) {
.method [class^="row"],
.method [class*=" row"] {
padding-top: 10px;
padding-bottom: 10px; }
.method .cell {
padding: 0 10px; }
.method .cell .propertyname {
font-weight: bold;
font-size: 1.2em; }
.method .cell .propertyname .lookuplink {
font-weight: normal;
font-size: 1.5em;
position: absolute;
top: 0;
right: 10px; }
.method .cell .type {
padding-left: 10px;
font-size: 1.1em; }
.method .cell .isrequired {
padding-left: 10px;
display: none; }
.method .cell .description {
padding-left: 10px; }
.method .cell .mobile-isrequired {
display: inline; } }
/* Row Utilities */
[class^='row'].margin-0,
[class*=' row'].margin-0,
[class^='form-group'].margin-0,
[class*=' form-group'].margin-0 {
margin-left: -0px;
margin-right: -0px; }
[class^='row'].margin-0 > [class^='col-'],
[class^='row'].margin-0 > [class*=' col-'],
[class*=' row'].margin-0 > [class^='col-'],
[class*=' row'].margin-0 > [class*=' col-'],
[class^='form-group'].margin-0 > [class^='col-'],
[class^='form-group'].margin-0 > [class*=' col-'],
[class*=' form-group'].margin-0 > [class^='col-'],
[class*=' form-group'].margin-0 > [class*=' col-'] {
padding-right: 0px;
padding-left: 0px; }
[class^='row'].margin-0 [class^='row'],
[class^='row'].margin-0 [class*=' row'],
[class^='row'].margin-0 [class^='form-group'],
[class^='row'].margin-0 [class*=' form-group'],
[class*=' row'].margin-0 [class^='row'],
[class*=' row'].margin-0 [class*=' row'],
[class*=' row'].margin-0 [class^='form-group'],
[class*=' row'].margin-0 [class*=' form-group'],
[class^='form-group'].margin-0 [class^='row'],
[class^='form-group'].margin-0 [class*=' row'],
[class^='form-group'].margin-0 [class^='form-group'],
[class^='form-group'].margin-0 [class*=' form-group'],
[class*=' form-group'].margin-0 [class^='row'],
[class*=' form-group'].margin-0 [class*=' row'],
[class*=' form-group'].margin-0 [class^='form-group'],
[class*=' form-group'].margin-0 [class*=' form-group'] {
margin-left: 0;
margin-right: 0; }
.big-btn{
padding: 10px 0px 11px 0px;
width: 215px;
margin-top:5px;
}
.big-btn i{
font-size: 65px;
margin-right: 0px !important;
}
.big-btn strong{
font-size: 25px;
text-shadow: 1px 2px 0px #34659B;
color: #fff;
line-height: 24px;
}
.big-btn .btn-text{
margin-top:6px;
}
.big-btn small{font-size: 75%;}
.android-btn{
width: 240px;
padding: 13px 17px 13px 0px;
background-color: #000;
border-color: #000;
}
.android-btn:hover{
background-color: #272727;
}
.android-btn i{
font-size: 55px;
}
.android-btn .btn-text{
margin-top: 0px;
}
.android-btn strong{
font-size: 25px;
text-shadow: none;
color: #fff;
line-height: 24px;
}
.windows-btn{
background-color:#008A00;
width: 235px;
padding: 13px 5px 13px 10px;
border-color: #055805;
}
.windows-btn:hover{
background-color: #008A00;
}
.windows-btn .btn-text{
text-shadow: none;
font-size: 26px;
line-height: 25px;
}
$(document).ready(function()
{
var navItems = $('.admin-menu li > a');
var navListItems = $('.admin-menu li');
var allWells = $('.admin-content');
var allWellsExceptFirst = $('.admin-content:not(:first)');
allWellsExceptFirst.hide();
navItems.click(function(e)
{
e.preventDefault();
navListItems.removeClass('active');
$(this).closest('li').addClass('active');
allWells.hide();
var target = $(this).attr('data-target-id');
$('#' + target).show();
});
});
$(document).ready(function() {
var sideslider = $('[data-toggle=collapse-side]');
var sel = sideslider.attr('data-target');
var sel2 = sideslider.attr('data-target-2');
sideslider.click(function(event){
$(sel).toggleClass('in');
$(sel2).toggleClass('out');
});
});
$("input[type=password]").keyup(function(){
var ucase = new RegExp("[A-Z]+");
var lcase = new RegExp("[a-z]+");
var num = new RegExp("[0-9]+");
if($("#password1").val().length >= 8){
$("#8char").removeClass("glyphicon-remove");
$("#8char").addClass("glyphicon-ok");
$("#8char").css("color","#00A41E");
}else{
$("#8char").removeClass("glyphicon-ok");
$("#8char").addClass("glyphicon-remove");
$("#8char").css("color","#FF0004");
}
if(ucase.test($("#password1").val())){
$("#ucase").removeClass("glyphicon-remove");
$("#ucase").addClass("glyphicon-ok");
$("#ucase").css("color","#00A41E");
}else{
$("#ucase").removeClass("glyphicon-ok");
$("#ucase").addClass("glyphicon-remove");
$("#ucase").css("color","#FF0004");
}
if(lcase.test($("#password1").val())){
$("#lcase").removeClass("glyphicon-remove");
$("#lcase").addClass("glyphicon-ok");
$("#lcase").css("color","#00A41E");
}else{
$("#lcase").removeClass("glyphicon-ok");
$("#lcase").addClass("glyphicon-remove");
$("#lcase").css("color","#FF0004");
}
if(num.test($("#password1").val())){
$("#num").removeClass("glyphicon-remove");
$("#num").addClass("glyphicon-ok");
$("#num").css("color","#00A41E");
}else{
$("#num").removeClass("glyphicon-ok");
$("#num").addClass("glyphicon-remove");
$("#num").css("color","#FF0004");
}
if($("#password1").val() == $("#password2").val()){
$("#pwmatch").removeClass("glyphicon-remove");
$("#pwmatch").addClass("glyphicon-ok");
$("#pwmatch").css("color","#00A41E");
}else{
$("#pwmatch").removeClass("glyphicon-ok");
$("#pwmatch").addClass("glyphicon-remove");
$("#pwmatch").css("color","#FF0004");
}
});
$(".reveal").mousedown(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'text'));
})
.mouseup(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
})
.mouseout(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
});
