index.html

---
layout: empty
title: Home
titleInTab: false
needsCarousel: true
---
<div ng-controller="carouselCtrl">
    <div id="carousel">
        <img src="{{ 'img/northbridge_wikimedia.jpg' | prepend: site.url }}">
        <img src="{{'img/wikimedia_a_neon_colored_computer.jpg' | prepend: site.url}}">
        <img src="{{'img/wikimedia_homebuildpc.jpg' | prepend: site.url}}">
        <img src="{{'img/wikimedia_diy_pc_watercooling.jpg' | prepend: sitelurl}}">
<!--
        <img src="https://dummyimage.com/1200x425/dadada/000caf.png">
        <img src="https://dummyimage.com/1200x425/dadada/000caf.png">
-->
    </div>
</div>

<!--<div ng-controller="storeCtrl"></div>-->
<div class="page-content">
    <div layout="column" layout-gt-xs="row" layout-align="center start">
        <div layout="column" flex=50>
            <md-card>
                <md-card-title>
                    <span class="md-headline">Welcome!</span>
                </md-card-title>
                <md-card-content>
                    <p>We're a small local shop in Greenville, South Carolina that has been selling high-quality compter parts since January 1st, 1970 at 12:00 AM.</p>
                </md-card-content>
                <md-card-actions layout="row" layout-align="end center">
                    <md-button ng-href="{{'about' | prepend: site.url}}">More Info</md-button>
                </md-card-actions>
            </md-card>
            <md-card>
                <img ng-src="{{ 'img/sale.png' | prepend: site.url }}"
                     class="md-card-image">
                <md-card-title>
                    <span class="md-headline">Accessories on-sale this week!</span>
                </md-card-title>
                <md-card-content>
                    <p>Those of you looking to build a PC this summer are in luck! We're having a huge sale on accessories over the next week, ending 06/03/2016.</p>
                </md-card-content>
                <md-card-actions layout="row" layout-align="end center">
                    <md-button ng-href="{{ 'category/accessories' | prepend: site.url }}">Check it out!</md-button>
                </md-card-actions>
            </md-card>
        </div>
        <div layout="column" flex=40>
            <md-card>
                <img ng-src="{{'img/public-domain-image-computer-motherboard.jpg' | prepend: site.url}}" 
                     class="md-card-image" alt="pc">
                <md-card-title>
                    <span class="md-headline">Need a hand?</span>
                </md-card-title>
                <md-card-content>
                    <p>We also can build you a custom-built PC for a small fee. We'll work with you to help you find the perfect balance between practicality, performance, and price to create a PC that fits your needs. Call us!</p>
                </md-card-content>
            </md-card>
            <md-card>
                <md-card-title>
                    <span class="md-headline">Sign up for our newsletter!</span>
                </md-card-title>
                <md-card-content>
                    <div id="emailForm">
                        <form onsubmit="fixForm();" layout="column" layout-align="start center" layout-fill>
                            <md-input-container layout-fill flex=100>
                                <label>Name</label>
                                <input type="text" required>
                            </md-input-container>
                            <md-input-container layout-fill flex=100>
                                <label>Email</label>
                                <input type="email" required>
                            </md-input-container>
                            <md-button type="submit">Submit</md-button>
                        </form>
                    </div>
                </md-card-content>
            </md-card>
        </div>
    </div>
</div>


<script>
    
//    This is here to fix a problem with the image carousel not loading correctly.
//    The issue arises because this runs before the AngularJS compiler does, so
//      the carouosel gets the size of a blank page (since it's uncompiled) and
//      renders the carousel at a very tiny size.
//    Stack Overflow had a similar thread about Angular and OWL together, but the 
//      answers there didn's work.
//    Apparently, when all else failed, this 25 *millisecond* delay was just enough
//      time to get the compiler to execute before this does. 
    
    $(document).ready(function() {
        setTimeout(doCarousel, 25);
    });
    
    function doCarousel() {
        $('#carousel').owlCarousel({ 
            items: 1, 
            margin: 10, 
            loop: true, 
            autoplay: true, 
            autoplayTimeout: 3000, 
            autoplayHoverPause: true, 
            dots: true 
        });
    }
</script>

<script>
    
//    Handles the animation after the user submits the email form. 
    
    function fixForm() {
        $thankYou = $('<p id="emailThanks">Thanks! Well be in touch.<p>')
        $($thankYou).hide();
        
        $('#emailForm').slideUp(250);
        $('#emailForm').after($thankYou);
        setTimeout(function() {$('#emailThanks').slideDown();},250);
        localStorage["showEmail"] = false;
    }
    
</script>