ki9
/
tracman-server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

#104 Added pricing to homepage

master
Keith Irwin 2017-08-20 19:56:05 -04:00
parent 000e905420
commit b3f502e529
No known key found for this signature in database
GPG Key ID: 378933C743E2BBC0
2 changed files with 111 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
static/css/index.css
View File

@ -1,15 +1,15 @@
/* Animations */
@keyframes pulse {
0% { transform: scale(1); }
0% { transform: scale(1); }
50% { transform: scale(0.8); }
100% { transform: scale(1); }
}
@keyframes spin {
0% { transform: rotate(30deg); }
0% { transform: rotate(30deg); }
100% { transform: rotate(210deg); }
}
@keyframes spin2 {
0% { transform: rotate(150deg); }
0% { transform: rotate(150deg); }
100% { transform: rotate(330deg); }
}
/* End Animations */
@ -180,16 +180,60 @@
background: rgba(0,0,0,0.2);
}
.disclaimer {
color: #fb6e3d;
background: #000;
.pricing {
text-align: center;
background-color: #222;
}
.disclaimer .container {
.pricing > h2 {
font-weight: 300;
}
.pricing > div > div {
float: left;
width: 33%;
margin-top: 60px;
background: #282828;
padding: 40px;
}
.pricing > div > div h3 {
background: #555;
color: #fff;
display: block;
margin: -40px -40px 35px -40px;
padding: 30px;
position: relative;
z-index: 10;
}
.disclaimer a, .disclaimer a:hover {
color:#fb6e3d;
.pricing > div > div h3 span {
display: block;
}
.pricing > div > div h3 span .fa {
margin: 0 1px;
}
.pricing > div > div .price {
font-size: 40px;
}
.pricing > div > div:nth-of-type(2) {
width: calc(34% + 20px);
margin: 40px -10px 0 -10px;
box-shadow: 0px 5px 20px -5px rgba(0,0,0,0.3);
position: relative;
z-index: 50;
}
.pricing > div > div:nth-of-type(2) h3 {
background: #fbc93d;
color: #555;
display: block;
}
.pricing ul {
padding: 0;
margin: 27px 0;
}
.pricing ul li {
display: block;
line-height: 40px;
border-bottom: 1px solid #eee;
}
.pricing ul li:last-child {
border-bottom: 0;
}
.join {
@ -275,6 +319,19 @@
.feature > div > div {
width: 60%;
}
.pricing > div > div{
width: 100% !important;
float: none;
margin: 0 0 20px 0 !important;
box-shadow: none !important;
}
.pricing > div > div h3{
background: #555 !important;
color: #fff !important;
}
.pricing h2{
margin-bottom: 40px;
}
}
@media (max-width: 600px) {

52
views/index.html
View File

@ -98,22 +98,58 @@
</div>
</section>
<section class='disclaimer' id='disclaimer'>
{% if not user %}
<section class='pricing'>
<div class='container'>
<h2>Warning! </h2>
<p>This is beta software, so there are still kinks to be worked out. </p>
<p>Keep in mind that publishing your location online could be a bad idea. </p>
<h1>Pricing</h1>
<h2>Realtime GPS tracking for every budget</h2>
<div>
<h3>Basic<span><i class="fa fa-star"></i></span></h3>
<div class="price">free</div>
<ul>
<li>Map with URL</li>
<li>Realtime updates</li>
<li>Android integration</li>
</ul>
<a class="btn yellow smaller" href="/signup">Signup<i class="fa fa-angle-right"></i></a>
</div>
<div>
<h3>Pro<span><i class="fa fa-star"></i><i class="fa fa-star"></i></span></h3>
<div class="price">$5/month</div>
<ul>
<li>All Basic features</li>
<li>Streetview image</li>
<li>Show speed</li>
<li>Show altitude</li>
<li>Hide ads</li>
</ul>
<a class="btn yellow smaller" href="/signup">Signup<i class="fa fa-angle-right"></i></a>
</div>
<div>
<h3>Enterprise<span><i class="fa fa-star"></i><i class="fa fa-star"></i><i class='fa fa-star'></i></span></h3>
<div class="price">coming soon</div>
<ul>
<li>All Pro features</li>
<li>Multiple vehicles</li>
</ul>
<a class="btn yellow smaller" href="/contact">Contact<i class="fa fa-angle-right"></i></a>
</div>
</div>
</section>
{% if not user %}
<section class='join light' id='join'>
<div class='container'>
<h2>Hook me up!</h2>
<p>Just click that there button to create an account. </p>
<a class='btn btn-lg' href="/login#signup">Join Tracman</a>
<p>Just click the button to create an account. </p>
<a class='btn btn-lg' href="/signup">Join Tracman</a>
</div>
</section>
{% endif %}
{% endblock %}