<div class="index">
<style>
.index {
margin-top: 20px;
}
.campaign {
text-align: center;
position: relative;
}
.campaign .desc {
color: #888888;
font-size: 140%;
}
.message .try {
margin: 15px;
}
.message .title {
font-size: 300%;
}
.message .btn-large {
font-size: 125%;
padding: 10px 30px;
}
.demo-video {
margin-top: 40px;
position: relative;
}
.demo-video .play-video {
max-width: 900px;
width: 100%;
border: 2px dashed #ccc;
}
.demo-video .fa-play {
display: none;
border-radius: 50px !important;
border: 1px solid #03A9F4;
background: #E1F5FE;
color: #03A9F4;
font-size: 300%;
height: 100px;
left: calc(50% - 50px);
padding: 25px 35px;
position: absolute;
width: 100px;
top: calc(50% - 50px);
z-index: 1;
}
.video .desc {
padding-top: 10px;
text-transform: uppercase;
font-size: 100%;
}
.signup-wall {
background-color: #ffffff;
box-shadow: none;
}
.page-content {
margin: auto;
}
.about {
margin-bottom: 25px
}
.section {
padding-top: 20px;
}
.section .title {
margin-bottom: 15px;
text-transform: uppercase;
}
.section .title .message {
margin-top: 10px;
padding-left: 10px;
}
.section .feature {
margin-bottom: 15px;
}
.section .feature-title {
display: block;
color: #ff286d;
}
.emailid {
color: #66595c;
padding-left: 5px;
}
.emailid:hover, .emailid:visited {
color: #999999;
text-decoration: none;
}
@media screen and (max-width: 550px) {
.message .title {
font-size: 200%;
}
.campaign .desc {
font-size: 110%;
}
.demo-video .fa-play {
font-size: 150%;
height: 50px;
left: calc(50% - 25px);
padding: 12px 17px;
position: absolute;
width: 50px;
top: calc(50% - 25px);
z-index: 1;
}
.signup-wall {
margin-top: 0px;
padding: 0px;
}
.signup-wall .page-content {
padding: 12px;
width: 100%;
}
}
</style>
<div class="dialog" ng-show="isVisible.loading">
<div class="content">
<div class="loading">
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="campaign">
<div class="message">
<div class="title ib-pink-txt">The Timeline Of Your Life</div>
<div class="desc">Capture all that matters to you and take actions based on that.</div>
<div class="try">
<a class="btn btn-large button-submit" ng-show="!isAuthenticated" href="/#/demo">Try now</a>
<a class="btn btn-large button-submit" ng-show="isAuthenticated" href="/#/home">Visit Home</a>
</div>
</div>
<div class="video">
<div class="demo-video">
<img class="play-video" src="../../img/start-video.png" alt="watch inputbox demo">
<i class="fa fa-play" aria-hidden="true"></i>
</div>
<!-- <figcaption class="desc">Watch demo video</figcaption> -->
<figcaption class="desc">Inputbox Screenshot</figcaption>
</div>
</div>
<div class="signup-wall col-md-10 col-md-offset-1">
<div class="page-content">
<div class="about">
<div class="section motto">
<div class="title ib-blue-bg-only">
<h3 class="message">
Embracing Individuality
</h3>
</div>
<p>
We believe every aspect of your life is important. And keeping track of them helps to get more out of your time and resources.
</p>
<p>
<ul>
<li class="feature"><span class="feature-title">NOTES</span>Write your notes, journal, pen down thoughts and ideas.</li>
<li class="feature"><span class="feature-title">LISTS</span>Make your list of books, movies, places, etc.</li>
<li class="feature"><span class="feature-title">TRACK</span>Track your mood, food, money, workout, and get insights about them.</li>
<li class="feature"><span class="feature-title">ACTIVITY</span>Add activities to pen them down on your timeline.</li>
<li class="feature"><span class="feature-title">HABIT</span>Make habits, mark them and see your weekly trail.</li>
<li class="feature"><span class="feature-title">TASKS</span>Create calendar items for reminders, meetings, etc.</li>
<li class="feature"><span class="feature-title">CHECKINS</span>You can add checkins as well, which will be used to build your timeline.</li>
</ul>
</p>
</div>
<div class="section motto">
<div class="title ib-blue-bg-only">
<h3 class="message">
Personal Dashboard
</h3>
</div>
<div>
<p>
InputBox serves as a personal dashboard. It allows you to add data related to your life within the app. It also fetches data from different apps that you use.
It consist of three sections:
</p>
<ul>
<li class="feature"><span class="feature-title">WIDGETS</span>All the stats collected from various sources are presented into the widgets.</li>
<li class="feature"><span class="feature-title">TIMELINE</span>All the updates posted within are shown in the timeline. The timeline view may also contain location timeline, depending on the availability of such information.</li>
<li class="feature"><span class="feature-title">SIDEBAR</span>Any item requiring action from your end would be added to sidebar. It may include your todo task, meetings, followups, and more importantly your habits with a weekly trail. These items are categorised based on what time of day these are to be done. Eg. Morning, Afternoon, etc.</li>
</ul>
</div>
</div>
<div class="section contact">
<div class="title ib-blue-bg-only">
<h3 class="message">
Contact Us
</h3>
</div>
<div class="content">
<div class="email">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<a class="emailid" href="mailto:hello@inputbox.co">hello@inputbox.co</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>