<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/">E-System</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Actions <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/create_person.jsp">Создать лицо</a></li>
<li><a href="/recharge_account.jsp">Пополнить счет</a></li>
<li><a href="/create_transaction.jsp">Совершить перевод</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Entities lists <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/persons.jsp">Persons</a></li>
<li><a href="/accounts.jsp">Accounts</a></li>
<li><a href="/transactions.jsp">Transactions</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Показать</button>
</form>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="row bs-wizard" style="border-bottom:0;">
<div class="col-xs-4 col-xs-offset-2">
<h1>E-System project:</h1>
</div>
<div class="col-xs-6">
<p>
<strong>13.</strong>Электронная платежная система. Операции удаленного объекта: создание счета с начальной суммой,
пополнение счета, выполнение платежа с указанием получателя и цели, просмотр истории операций.
Сериализуемый объект: платеж (получатель, цель, сумма). Пополнение счета считать особым видом
платежа и также отображать в истории операций.
</p>
</div>
</div>
<div class="row bs-wizard" style="border-bottom:0;">
<div class="col-xs-3 bs-wizard-step complete">
<div class="text-center bs-wizard-stepnum">Step 1</div>
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot"></a>
<div class="bs-wizard-info text-center">ER decomposition.</div>
</div>
<div class="col-xs-3 bs-wizard-step complete"><!-- complete -->
<div class="text-center bs-wizard-stepnum">Step 2</div>
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot"></a>
<div class="bs-wizard-info text-center">Entity classes</div>
</div>
<div class="col-xs-3 bs-wizard-step active"><!-- complete -->
<div class="text-center bs-wizard-stepnum">Step 3</div>
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot"></a>
<div class="bs-wizard-info text-center">EJB & business logic</div>
</div>
<div class="col-xs-3 bs-wizard-step disabled"><!-- active -->
<div class="text-center bs-wizard-stepnum">Step 4</div>
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot"></a>
<div class="bs-wizard-info text-center">JSP pages and some fun</div>
</div>
</div>
<!-- progress end -->
<div class="col-xs-4">
<div class="offer offer-default">
<div class="shape">
<div class="shape-text">
JSP
</div>
</div>
<div class="offer-content">
<h3 class="lead">
JavaServer Pages (JSP) is a technology that helps software developers create dynamically generated web pages like this:
</h3>
<p>
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><p></span>Counting to three:<span style="color: #007700"></p></span>
<span style="color: #008800; font-weight: bold"><%</span> <span style="color: #008800; font-weight: bold">for</span> <span style="color: #333333">(</span><span style="color: #333399; font-weight: bold">int</span> i<span style="color: #333333">=</span><span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333">;</span> i<span style="color: #333333"><</span><span style="color: #0000DD; font-weight: bold">4</span><span style="color: #333333">;</span> i<span style="color: #333333">++)</span> <span style="color: #333333">{</span> <span style="color: #008800; font-weight: bold">%></span>
<span style="color: #007700"><p></span>This number is <span style="color: #008800; font-weight: bold"><%=</span> i <span style="color: #008800; font-weight: bold">%></span>.<span style="color: #007700"></p></span>
<span style="color: #008800; font-weight: bold"><%</span> <span style="color: #333333">}</span> <span style="color: #008800; font-weight: bold">%></span>
<span style="color: #007700"><p></span>OK.<span style="color: #007700"></p></span>
</pre></div>
</p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="offer offer-success">
<div class="shape">
<div class="shape-text">
J2EE
</div>
</div>
<div class="offer-content">
<h3 class="lead">
Java Platform, Enterprise Edition
</h3>
<p>
Java EE is Oracle's enterprise Java computing platform.
<br> The platform provides an API and runtime environment
<br> for developing and running enterprise software,
<br> including network and web services, and other
<br> large-scale, multi-tiered, scalable, reliable,
<br> and secure network applications.
</p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="offer offer-radius offer-primary">
<div class="shape">
<div class="shape-text">
Java
</div>
</div>
<div class="offer-content">
<h3 class="lead">
The language of realization
</h3>
<p>
It's not so nice as python,
<br> but its ecosystem
<br> is really huge and full
<br> of many great ideas!
</p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="offer offer-info">
<div class="shape">
<div class="shape-text">
EJB
</div>
</div>
<div class="offer-content">
<h3 class="lead">
Enterprise JavaBeans aka EJB
</h3>
<p>
is a managed, server-side component
<br> architecture for modular construction
<br> of enterprise applications.
<br>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="offer offer-warning">
<div class="shape">
<div class="shape-text">
JPA
</div>
</div>
<div class="offer-content">
<h3 class="lead">
The Java Persistence API (JPA) is
</h3>
<p>
a Java programming language application programming
<br/> interface specification that describes the
<br/> management of relational data in applications
<br/> using Java Platform, Standard Edition and
<br/> Java Platform, Enterprise Edition.
The Java Persistence API originated as part of the work of the JSR 220 Expert Group of the Java Community Process. JPA 2.0 was the work of the JSR 317 Expert Group.
</p>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
.shape{
border-style: solid; border-width: 0 70px 40px 0; float:right; height: 0px; width: 0px;
-ms-transform:rotate(360deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
transform:rotate(360deg);
}
.offer{
background:#fff; border:1px solid #ddd; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin: 15px 0; overflow:hidden;
}
.offer-radius{
border-radius:7px;
}
.offer-danger { border-color: #d9534f; }
.offer-danger .shape{
border-color: transparent #d9534f transparent transparent;
border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-success { border-color: #5cb85c; }
.offer-success .shape{
border-color: transparent #5cb85c transparent transparent;
border-color: rgba(255,255,255,0) #5cb85c rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-default { border-color: #999999; }
.offer-default .shape{
border-color: transparent #999999 transparent transparent;
border-color: rgba(255,255,255,0) #999999 rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-primary { border-color: #428bca; }
.offer-primary .shape{
border-color: transparent #428bca transparent transparent;
border-color: rgba(255,255,255,0) #428bca rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-info { border-color: #5bc0de; }
.offer-info .shape{
border-color: transparent #5bc0de transparent transparent;
border-color: rgba(255,255,255,0) #5bc0de rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-warning { border-color: #f0ad4e; }
.offer-warning .shape{
border-color: transparent #f0ad4e transparent transparent;
border-color: rgba(255,255,255,0) #f0ad4e rgba(255,255,255,0) rgba(255,255,255,0);
}
.shape-text{
color:#fff; font-size:12px; font-weight:bold; position:relative; right:-40px; top:2px; white-space: nowrap;
-ms-transform:rotate(30deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
transform:rotate(30deg);
}
.offer-content, code {
padding:0 20px 10px;
}
code {
background-color: #fff;
}
.bs-wizard {margin-top: 40px;}
/*Form Wizard*/
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; }
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
/*END Form Wizard*/
body {
padding-top: 70px;
}
