{% extends 'cosmicdb/base.html' %}

{% load static cosmic_tags sitetree %}

{% block style %}

    {{ block.super }}

    .ui.vertical.stripe {
        padding: 8em 0em;
    }
    .ui.vertical.stripe h3 {
        font-size: 2em;
    }
    .ui.vertical.stripe h3 {
        margin-top: 3em;
    }
    .ui.vertical.stripe .floated.image {
        clear: both;
    }
    .ui.vertical.stripe p {
        font-size: 1.33em;
    }
    .ui.vertical.stripe .horizontal.divider {
        margin: 3em 0em;
    }

    .quote.stripe.segment {
        padding: 0em;
    }
    .quote.stripe.segment .grid .column {
        padding-top: 5em;
        padding-bottom: 5em;
    }

    .masthead.segment {
        min-height: 500px;
        padding: 1em 0em;
    }

    @media only screen and (max-width: 700px) {
        .ui.fixed.menu {
            display: none !important;
        }
        .secondary.pointing.menu .item,
        .secondary.pointing.menu .menu {
            display: none;
        }
        .secondary.pointing.menu .toc.item {
            display: block;
        }
        .masthead h1.ui.header {
            font-size: 2em;
            margin-top: 1.5em;
        }
        .masthead h2 {
            margin-top: 0.5em;
            font-size: 1.5em;
        }
        .masthead.segment {
            min-height: 350px;
        }
    }

{% endblock %}

{% block page_header %}
<div class="ui inverted vertical masthead center aligned segment">

    <!-- Page Menu -->
    <div class="ui secondary inverted pointing menu">
        <a class="toc item"><i class="sidebar icon"></i></a>
        <div class="header item">
            {% get_site_title %}
        </div>
        {% sitetree_menu from "cosmicdb" include "trunk" template "cosmicdb/page_menu.html" %}
    </div>

    <div class="ui text container">
        <img class="ui small image centered" src="{% static 'cosmicdb/img/icon300.png' %}"/>
        <h1 class="ui inverted header">
            {% get_site_title %}
        </h1>
        <h2>Is your business stuck using too many spreadsheets?</h2>
        <h4>Start using a custom cloud database</h4>
    </div>

</div>
{% endblock %}

{% block content %}
    <div class="ui vertical stripe segment">
        <div class="ui middle aligned stackable grid centered container">
            <div class="row">
                <div class="eight wide column">
                    <h3 class="ui header"><i class="database icon"></i> Consolidate</h3>
                    <p>Easily consolidate your business logic into your cloud database.</p>
                    <p>Is storing all of your important data in spreadsheets starting to take too much time to find the data you need?</p>
                    <p>Enter your important data into database forms that not only validate your data, but also quicken data entry time.</p>
                    <p>Once you have your business rules and data entry screens setup, you can access your data from anywhere, as well as connect to any web service.</p>
                    <h3 class="ui header"><i class="linkify icon"></i> Connect</h3>
                    <p>Connect your database to any web service you need, such as:</p>
                    <div class="ui list bulleted">
                        <div class="item">Google Apps</div>
                        <div class="item">Xero</div>
                        <div class="item">MailChimp</div>
                        <div class="item">Dropbox</div>
                        <div class="item">Any other API</div>
                    </div>
                    <p>Want to automatically send quotes or invoices to Xero, based on data you have already entered into your database?</p>
                    <p>Once your business logic is in the cloud, you can connect to any web services you need now or in the future.</p>
                    <p>You're not tied into any platform. Want to change accounting web service? Just connect your database to your new web service.</p>
                </div>
                <div class="six wide right floated column">
                    <img src="{% static 'cosmicdb/img/demo1.png' %}" class="ui large bordered image">
                </div>
            </div>
        </div>
    </div>


    <div class="ui vertical stripe segment">
        <div class="ui middle aligned stackable grid centered container">
            <div class="row">
                <div class="six wide right floated column">
                    <img src="{% static 'cosmicdb/img/demo2.png' %}" class="ui small centered bordered image">
                </div>
                <div class="eight wide column">
                    <h3 class="ui header"><i class="expand arrows alternate icon"></i> Responsive Pages</h3>
                    <p>Every page and form will look great on any device. Responsive pages resize based upon each devices screen size.</p>

                    <h3 class="ui header"><i class="th icon"></i> Dashboard</h3>
                    <p>Create custom dashboards for your database.</p>
                    <p>See all key indicators that you care about on your dashboard, you can use:</p>
                    <div class="ui list bulleted">
                        <div class="item">Graphs</div>
                        <div class="item">Custom report summaries</div>
                        <div class="item">Custom data feeds (see alerts sent whenever someone enters a sale into your database for example)</div>
                        <div class="item">Recent actions feed (see what users are changing in your database)</div>
                    </div>
    
                </div>
            </div>
            <div class="row">
                <div class="twelve wide column">
                    <h3 class="ui header"><i class="list icon"></i> Report</h3>
                    <p>Easily report on and export your data, from all your connected web services.</p>
                    <p>Get reports in:</p>
                    <div class="ui list bulleted">
                        <div class="item">PDF</div>
                        <div class="item">HTML</div>
                        <div class="item">Excel Spreadsheet</div>
                        <div class="item">Text</div>
                    </div>
                    <p>Get exports in:</p>
                    <div class="ui list bulleted">
                        <div class="item">Excel Spreadsheet</div>
                        <div class="item">CSV</div>
                        <div class="item">SQL</div>
                        <div class="item">Text</div>
                    </div>
                    <p>Want to see summarised data from Xero, as well as data from MailChimp in one report? Easy!</p>
                </div>
            </div>
        </div>
    </div>

    <div class="ui vertical stripe segment">
        <div class="ui equal width stackable internally celled grid">
            <div class="center aligned row">
                <div class="column">
                    <h3 >Your Choice Of Templates</h3>
                </div>
            </div>
            <div class="center aligned row">
                <div class="column">
                    <h3>Semantic</h3>
                    <a href="https://demosemantic.cosmicdb.com.au/login/" class="ui huge primary button">View Demo <i class="right arrow icon"></i></a>
                    <h5>To use our demo, use a username of 'demo', password of 'demo1234'</h5>
                    <a href="https://bitbucket.org/davidbradleycole/demosemantic/src/master/"><i class="bitbucket icon"></i> Semantic Demo Repository</a>
                </div>
                <div class="column">
                    <h3>Admin</h3>
                    <a href="https://demo.cosmicdb.com.au/login/" class="ui huge primary button">View Demo <i class="right arrow icon"></i></a>
                    <h5>To use our demo, use a username of 'demo', password of 'demo1234'</h5>
                    <a href="https://bitbucket.org/davidbradleycole/demo/src/master/"><i class="bitbucket icon"></i> Admin Demo Repository</a>
                </div>
            </div>
        </div>
    </div>
    
{% endblock %}

{% block footer %}
    {% include 'cosmicdb/footer.html' %}
{% endblock %}
