website: add terminal demos
This commit is contained in:
Jack Pearkes
parent
8e071eb28d
commit
66a74fc3f5
|
|
@ -7,7 +7,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="jumbo-logo-wrap col-lg-offset-1 col-lg-5 col-md-6 hidden-xs hidden-sm">
|
<div class="jumbo-logo-wrap col-lg-offset-1 col-lg-5 col-md-6 hidden-xs hidden-sm">
|
||||||
<div class="jumbo-logo"></div>
|
<div class="jumbo-logo"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <p><a class="btn btn-primary btn-lg">Learn more »</a></p> -->
|
<!-- <p><a class="btn btn-primary btn-lg">Learn more »</a></p> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="jumbotron-dots"></div>
|
<div class="jumbotron-dots"></div>
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
|
|
||||||
<div id="features">
|
<div id="features">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<div class="row double-row">
|
<div class="row double-row">
|
||||||
<div class="col-lg-6 col-md-6">
|
<div class="col-lg-6 col-md-6">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -69,3 +68,87 @@
|
||||||
|
|
||||||
</div> <!-- /container -->
|
</div> <!-- /container -->
|
||||||
</div> <!-- /features -->
|
</div> <!-- /features -->
|
||||||
|
|
||||||
|
<div id="demos">
|
||||||
|
<div class="container">
|
||||||
|
<div class="terminals row">
|
||||||
|
|
||||||
|
<div class="col-xs-12 col-lg-12 explantion">
|
||||||
|
<h2>DNS Query Interface</h2>
|
||||||
|
<p>Make use of Consul's built-in DNS server to resolve requests directly, avoiding expensive HTTP requests.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="terminal-item col-xs-12 col-lg-12">
|
||||||
|
<div class="terminal">
|
||||||
|
<header>
|
||||||
|
<h4>Terminal</h4>
|
||||||
|
<ul class='shell-dots'>
|
||||||
|
<li></li>
|
||||||
|
<li></li>
|
||||||
|
<li></li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
<div class="terminal-window">
|
||||||
|
<div class="terminal">
|
||||||
|
<div class="display">
|
||||||
|
<p class="command"><span class="txt-r">admin@hashicorp</span>: dig web-frontend.service.consul. ANY</p>
|
||||||
|
<p>; <<>> DiG 9.8.3-P1 <<>> web-frontend.service.consul. ANY</p>
|
||||||
|
<p>;; global options: +cmd</p>
|
||||||
|
<p> </p>
|
||||||
|
<p>;; Got answer:</p>
|
||||||
|
<p>;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 29981</p>
|
||||||
|
<p>;; flags: qr aa rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 0</p>
|
||||||
|
<p> </p>
|
||||||
|
<p>;; QUESTION SECTION:</p>
|
||||||
|
<p>;web-frontend.service.consul. IN ANY</p>
|
||||||
|
<p> </p>
|
||||||
|
<p>;; ANSWER SECTION:</p>
|
||||||
|
<p>web-frontend.service.consul. 0 IN A <span class="txt-p">10.0.3.83</span></p>
|
||||||
|
<p>web-frontend.service.consul. 0 IN A <span class="txt-p">10.0.1.109</span></p>
|
||||||
|
<p class="command"><span class="txt-r">admin@hashicorp</span>: <span class="cursor"> </span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> <!-- /.terminal-item -->
|
||||||
|
|
||||||
|
<div class="col-xs-12 col-lg-12 explantion">
|
||||||
|
<h2>Key Value Storage</h2>
|
||||||
|
<p>Consul provides a flexible key/value store accessible via a simple HTTP API to store just about anything for your application.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="terminal-item col-xs-12 col-lg-12">
|
||||||
|
<div class="terminal">
|
||||||
|
<header>
|
||||||
|
<h4>Terminal</h4>
|
||||||
|
<ul class='shell-dots'>
|
||||||
|
<li></li>
|
||||||
|
<li></li>
|
||||||
|
<li></li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
<div class="terminal-window">
|
||||||
|
<div class="terminal">
|
||||||
|
<div class="display">
|
||||||
|
<p class="command"><span class="txt-r">admin@hashicorp</span>: curl -X PUT -d 'bar' http://localhost:8500/v1/kv/foo</p>
|
||||||
|
<p>true</p>
|
||||||
|
<p class="command"><span class="txt-r">admin@hashicorp</span>: curl http://localhost:8500/v1/kv/foo</p>
|
||||||
|
<p>[</p>
|
||||||
|
<p> {</p>
|
||||||
|
<p> "CreateIndex":100,</p>
|
||||||
|
<p> "ModifyIndex":200,</p>
|
||||||
|
<p> "Key":"zip",</p>
|
||||||
|
<p> "Flags":0,</p>
|
||||||
|
<p> "Value":"<span class="txt-p">aGVsbG8gd29ybGQK==</span>"</p>
|
||||||
|
<p> }</p>
|
||||||
|
<p>]</p>
|
||||||
|
<p class="command"><span class="txt-r">admin@hashicorp</span>: <span class="cursor"> </span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> <!-- /.terminal-item -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><!-- /#demos -->
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@ body.page-home{
|
||||||
.config{
|
.config{
|
||||||
background-image: url( ../images/feature-config@2x.png);
|
background-image: url( ../images/feature-config@2x.png);
|
||||||
background-size: 157px 179px;
|
background-size: 157px 179px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#trusted{
|
#trusted{
|
||||||
|
|
@ -131,7 +131,7 @@ body.page-home{
|
||||||
padding: 50px 0;
|
padding: 50px 0;
|
||||||
background-color: @consul-footer-gray;
|
background-color: @consul-footer-gray;
|
||||||
background: @consul-footer-gray url(../images/consul-footer-logo.png) center center no-repeat;
|
background: @consul-footer-gray url(../images/consul-footer-logo.png) center center no-repeat;
|
||||||
.img-retina("../images/consul-footer-logo.png", "../images/consul-footer-logo@2x.png", 446px, 443px);
|
.img-retina("../images/consul-footer-logo.png", "../images/consul-footer-logo@2x.png", 446px, 443px);
|
||||||
|
|
||||||
.footer-links{
|
.footer-links{
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
@ -177,3 +177,191 @@ body.page-home{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#demos{
|
||||||
|
padding: 30px 0 20px;
|
||||||
|
background-color: @light-purple;
|
||||||
|
|
||||||
|
.explantion {
|
||||||
|
margin: 40px 0 40px 0;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
color: lighten(@gray-light, 15%);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: @font-family-museo;
|
||||||
|
font-weight: @font-weight-museo-xb;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
line-height: 1.5em;
|
||||||
|
color: @consul-gray;
|
||||||
|
font-family: @font-family-museo;
|
||||||
|
font-weight: @font-weight-museo-sb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminals{
|
||||||
|
.terminal-item{
|
||||||
|
border-bottom: 1px solid #eaeae;
|
||||||
|
|
||||||
|
&.last{
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
>header{
|
||||||
|
.left{
|
||||||
|
span.icn{
|
||||||
|
display: inline-block;
|
||||||
|
width: 83px;
|
||||||
|
height: 74px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right{
|
||||||
|
padding-left: 25px;
|
||||||
|
|
||||||
|
h2{
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 28px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal{
|
||||||
|
background-color: darken(@gray-darker, 15%);
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
header{
|
||||||
|
position: relative;
|
||||||
|
background-color: @consul-gray;
|
||||||
|
text-align: center;
|
||||||
|
padding: 3px;
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
|
||||||
|
h4{
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: @gray-darker;
|
||||||
|
font-family: @font-family-museo;
|
||||||
|
font-weight: @font-weight-museo-xb;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.shell-dots{
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 8px;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
li{
|
||||||
|
display: inline-block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: @gray-darker;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-window{
|
||||||
|
min-height: 140px;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
|
||||||
|
color: @white;
|
||||||
|
|
||||||
|
.txt-r {
|
||||||
|
color: lighten(@red, 8%);;
|
||||||
|
}
|
||||||
|
.txt-p {
|
||||||
|
font-weight: bold;
|
||||||
|
color: lighten(@purple, 15%);
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
margin-bottom: 2px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.cursor {
|
||||||
|
background-color: @light-purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-bullets{
|
||||||
|
list-style-type: none;
|
||||||
|
padding-left: 35px;
|
||||||
|
|
||||||
|
li{
|
||||||
|
padding: 5px 0 5px 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||||
|
#demos{
|
||||||
|
.terminals{
|
||||||
|
.terminal-item{
|
||||||
|
.feature-bullets{
|
||||||
|
li{
|
||||||
|
background-size: 12px 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
#demos{
|
||||||
|
.terminals{
|
||||||
|
.terminal-item{
|
||||||
|
>header{
|
||||||
|
.left{
|
||||||
|
span.icn{
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right{
|
||||||
|
padding-left: 54px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#demos{
|
||||||
|
.terminals{
|
||||||
|
.terminal-item{
|
||||||
|
>header{
|
||||||
|
.left{
|
||||||
|
span.icn{
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right{
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,5 +25,4 @@
|
||||||
// Components w/ JavaScript
|
// Components w/ JavaScript
|
||||||
/*@import "modals.less";*/
|
/*@import "modals.less";*/
|
||||||
|
|
||||||
|
// 4
|
||||||
// 2
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue