<section class="sales-crowd-promo salescrowd-orange white-text text-promo-center no-nav">
    <div class="container">
        <div class="anaylzer-box">
            <div class="analysis-pulse"></div>
            <h1>Headline Analysis Tool</h1>
            <h3>Enter your text to begin the headline analysis:</h3>

            <form class="analyzer-bar">
                <input type="text" ng-model="submission" name="submission" placeholder="Enter Your Status..." />
                <button type="submit" class="button button-blue" ng-click="headlineResponse()">
                    <i class="icon salescrowd-icon-flash animated infinite hinge pulse"></i> Analyze Headline
                </button>
            </form>
            <pre class="tool-history" ng-class="{historyvisible: loaded == true}">History= {[{list}]}</pre>
        </div>

        <img src="images/analyzer-header.png" alt="" />
    </div>
</section>
<main class="sales-crowd-main-content">
    <div class="content overlap">
        <!--<div class="headline-tool-wrapper" ng-show="loaded">-->
        <div class="headline-tool-wrapper" ng-class="{toolvisible: loaded == true}">
            <section class="one-column page-content text-center">
                <div class="headline-tool-header">
                    <div class="headline-tool-line"></div>
                    <h3><span>Current Headline</span></h3>
                </div>

                <p class="headline-current">
            <span ng-bind="word.txt" ng-repeat="word in wordData" ng-class="word.cls">

            </span>
                </p>

                <div ng-if="headline.score.total >= 80" class="text-center headline-well-done">
                    <h3><i class="icon icon-large salescrowd-icon-prize-award gold-text animated infinite hinge pulse">&nbsp;&nbsp;</i>Congratulations! Your Headline is in the Top 10% of Headlines Today</h3>
                </div>





                <div class="headline-advice final-score">



                    <div class="score-total">
                        <h4>Headline Score</h4>
                        <span class="scoretotal" ng-bind="headline.score.total"></span>
                        <canvas class="chart chart-doughnut" data="totalData" labels="totalLabels" colours="totalColours" options="radialOptions"> </canvas>
                        <!-- <div class="easypiechart chart total" options="options" percent="percent"><span class="percent total" ng-bind="percent"></span></div>-->
                        <!--<span class="chart total" easypiechart ng-init="options = { animate:1000, barColor:'#A6C771', scaleColor:true, lineWidth:14, lineCap:'butt' }" percent="percent" options="options">
      <span class="percent total" ng-bind="percent"></span>
    </span>-->

                        <!--<span class="chart total" data-percent="{[{ headline.base_score }]}" data-scale-color="false" data-bar-color="#A6C771" data-size="100">
                                <span class="percent total" ng-bind="percent"></span>
                            </span>-->
                    </div>
                    <div class="score-advice">
                        <p ng-show="headline.suggestions.word_count.message"><strong>Wordy:</strong> {[{headline.suggestions.word_count.message }]} <em>{[{headline.suggestions.word_count.suggestion }]}</em></p>
                        <p ng-show="headline.suggestions.type.message"><strong>Type:</strong> {[{headline.suggestions.type.message }]} <em>{[{headline.suggestions.type.suggestion }]}</em></p>
                        <p ng-show="headline.suggestions.power_words.message"><strong>Power Words:</strong> {[{headline.suggestions.power_words.message }]} <em>{[{headline.suggestions.power_words.suggestion }]}</em></p>
                        <p ng-show="headline.suggestions.superlative_words.message"><strong>Superlatives:</strong> {[{headline.suggestions.superlative_words.message }]} <em>{[{headline.suggestions.superlative_words.suggestion }]}</em></p>
                    </div>
                </div>
                <div class="cta text-center"><p><a href="" class="button button-green button-no-margin">Download our cheat sheet</a>&nbsp; to creating great headlines that engage...</p></div>

                <div class="headline-tool-header">
                    <div class="headline-tool-line"></div>
                    <h3><span>Word Density / Balance</span></h3>
                </div>
            </section>

            <section class="one-column">

                <section class="two-columns page-content">
                    <!--<div id="density-legend"></div>-->

                    <ul class="doughnut-legend">
                        <li class="item-Common" style="background-color:#a6c771">
                            <h3>Common</h3>

                            <canvas class="chart legend-chart chart-doughnut" data="commonData" labels="commonLabels" colours="commonColours" options="radialOptions" width="70" height="70"> </canvas>
                            <div class="legend-data">
                                <span class="legend-percentage" ng-class="{singledigit: headline.word_balance.common.percentage <= 9}" ng-bind="headline.word_balance.common.percentage"></span>
                            </div>
                            <p>Make up the basic structure of readable headlines. Great headlines are usually made up of&nbsp;20-30% common words.</p>
                        </li>

                        <li class="item-Uncommon" style="background-color:#5a85b1">
                            <h3>Uncommon</h3>     <canvas class="chart legend-chart chart-doughnut" data="uncommonData" labels="uncommonLabels" colours="uncommonColours" options="radialOptions" width="70" height="70"> </canvas>
                            <div class="legend-data">
                                <span class="legend-percentage" ng-class="{singledigit: headline.word_balance.uncommon.percentage <= 9}" ng-bind="headline.word_balance.uncommon.percentage"></span>
                            </div>
                            <p>Occur less frequently than common words, but give your headline
                                substance. Great headlines are usually made up of 10-20% uncommon
                                words.</p>
                        </li>

                        <li class="item-Power" style="background-color:#9772AA">
                            <h3>Power</h3>

                            <canvas class="chart legend-chart chart-doughnut" data="powerData" labels="powerLabels" colours="powerColours" options="radialOptions" width="70" height="70"> </canvas>
                            <div class="legend-data">
                                <span class="legend-percentage" ng-class="{singledigit: headline.word_balance.power.percentage <= 9}" ng-bind="headline.word_balance.power.percentage"></span>
                            </div>

                            <p>Or phrases indicate intense trigger words that frequently
                                command a readers attention and action. Great headlines contain at
                                least 1 power phrase or word.</p>
                        </li>

                        <li class="item-Emotional" style="background-color:#C46AA4">
                            <h3>Emotional</h3>

                            <canvas class="chart legend-chart chart-doughnut" data="emotionalData" labels="emotionalLabels" colours="emotionalColours" options="radialOptions" width="70" height="70"> </canvas>
                            <div class="legend-data">
                                <span class="legend-percentage" ng-class="{singledigit: headline.word_balance.emotional.percentage <= 9}" ng-bind="headline.word_balance.emotional.percentage"></span>
                            </div>

                            <p>Frequently stir an emotional response in the reader. They have
                                been proven to drive clicks and shares. Great headlines are usually
                                made up of 10-15% emotional words.</p>
                        </li>

                        <li class="item-Superlative" style="background-color:#e3a56b">
                            <h3>Superlative</h3>

                            <canvas class="chart legend-chart chart-doughnut" data="superlativeData" labels="superlativeLabels" colours="superlativeColours" options="radialOptions" width="70" height="70"> </canvas>
                            <div class="legend-data">
                                <span class="legend-percentage" ng-class="{singledigit: headline.word_balance.superlative.count <= 9}" ng-bind="headline.word_balance.superlative.count"></span>
                            </div>

                            <p>Fusce egestas et ante eu laoreet. Duis pellentesque est eget
                                metus tincidunt.</p>
                        </li>

                        <li class="item-Misc" style="background-color:#312b25">
                            <h3>Misc</h3>

                            <canvas class="chart legend-chart chart-doughnut" data="miscData" labels="miscLabels" colours="miscColours" options="radialOptions" width="70" height="70"> </canvas>
                            <div class="legend-data">
                                <span class="legend-percentage" ng-class="{singledigit: headline.word_balance.unknown.percentage <= 9}" ng-bind="headline.word_balance.unknown.percentage"></span>
                            </div>

                            <p>Metus tincidunt fusce egestas et ante eu laoreet. Duis
                                pellentesque est eget metus tincidunt.</p>
                        </li>
                    </ul>

                    &nbsp;
                </section>
                <section class="two-columns page-content canvas-holder">

                    <canvas class="chart chart-bar" data="balanceData" labels="balanceLabels" colours="balanceColours"></canvas>
                    <br/><br/>
                    <!--<div id="rating">
    <h3 class="rating-score">A+</h3>
                       <p class="rating-summary">Fusce egestas et ante eu laoreet. Duis pellentesque est eget metus tincidunt.</p>
                    </div>-->
                    <div class="stats">
                        <ul>
                            <li><b class="headline-common">{[{ headline.word_balance.common.count }]}</b><span>Common</span></li>
                            <li><b class="headline-uncommon">{[{ headline.word_balance.uncommon.count }]}</b><span>Uncommon</span></li>
                            <li><b class="headline-power">{[{ headline.word_balance.power.count }]}</b><span>Power</span></li>
                            <li><b class="headline-emotion">{[{ headline.word_balance.emotional.count }]}</b><span>Emotion</span></li>
                            <li><b class="headline-superlative">{[{ headline.word_balance.superlative.count }]}</b><span>Superlative</span></li>
                            <li><b class="headline-misc">{[{ headline.word_balance.unknown.count }]}</b><span>Misc</span></li>
                        </ul>
                    </div>

                    <div id="breakdown" class="one-column word-breakdown">
                        <p ng-show="commonWords"><span>Common Words:</span> {[{ commonWords }]}</p>
                        <!--<p class="note">Try reducing the number of common words slightly.</p>-->
                        <p ng-show="uncommonWords"><span>Uncommon Words:</span> {[{ uncommonWords }]}</p>
                        <!--<p class="note">You need a few more uncommon words in there.</p>-->
                        <p ng-show="powerWords"><span>Power:</span> {[{ powerWords }]}</p>
                        <p ng-show="emotionalWords"><span>Emotional:</span> {[{ emotionalWords }]}</p>
                        <!--<p><span>Superlatives:</span> N/A</p>-->
                        <p ng-show="miscWords"><span>Misc:</span> {[{ miscWords }]}</p>
                    </div>

                    <!--<div class="one-column">
                        <div class="headline-advice text-center">
                            <h3>Headline Type</h3>
                            <p>Your headline type is a <span>How To</span></p>
                        </div>
                    </div>-->

                </section>


            </section>
            <section class="one-column page-content text-center">
                <div class="headline-tool-header">
                    <div class="headline-tool-line"></div>
                    <h3><span>Headline Type</span></h3>
                </div>

                <br/>
                <h4 class="headline-type">Your headline type is <span class="headline-type-result">{[{ headline.type }]}</span></h4>

                <br/><br/>
                <div class="headline-tool-header">
                    <div class="headline-tool-line"></div>
                    <h3><span>Word &amp; Character Counts</span></h3>
                </div>
            </section>

            <article class="one-column">




                <section class="two-columns page-content">
                    <div class="box-count">
                        <h3>Word Count</h3>
                        <div class="count-roundall" ng-class="{positive: headline.word_count.summary =='positive', neutral: headline.word_count.summary =='neutral', negative: headline.word_count.summary =='negative'}">
                            <p>Score</p>
                            <h4>{[{ headline.word_count.score }]}</h4>
                            </h4>
                        </div>

                        <p><span>You have {[{ headline.word_count.length }]} words.</span> Your headline is the right length. Headlines 55 characters long tend to earn the highest number of click-throughs.</p>
                    </div>


                    <div class="box-count">
                        <h3>Sentiment</h3>
                        <div ng-show="headline.sentiment.summary == 'positive'">
                            <i class="icon salescrowd-icon-smile sentiment-positive"></i>
                            <p><span>You make me feel good!</span> Your headline shows positive sentiment. Headlines that convey positive sentiment tend to perform the best.</p>
                        </div>
                        <div ng-show="headline.sentiment.summary == 'neutral'">
                            <i class="icon salescrowd-icon-smile-meh sentiment-neutral"></i>
                            <p><span>I am niether this or that...</span> Your headline shows neutral sentiment. Headlines that convey positive sentiment tend to perform the best.</p>
                        </div>
                        <div ng-show="headline.sentiment.summary == 'negative'">
                            <i class="icon salescrowd-icon-smile-frown sentiment-negative"></i>
                            <p><span>I hate the world! Blaahh!</span> Your headline shows negative sentiment. Headlines that convey positive sentiment tend to perform the best.</p>
                        </div>

                    </div>
                </section>
                <section class="two-columns page-content">
                    <div class="box-count">
                        <h3>Character Count</h3>
                        <div class="count-roundall" ng-class="{positive: headline.char_count.summary =='positive', neutral: headline.char_count.summary =='neutral', negative: headline.char_count.summary =='negative'}">
                            <p>Score</p>
                            <h4>{[{ headline.char_count.score }]}</h4>
                        </div>

                        <p><span>You have {[{ headline.char_count.length }]} characters.</span> Your headline is the right length. Headlines with approx 6 words tend to earn the highest number of click-throughs.</p>
                    </div>

                    <div class="box-count">
                        <h3>Keywords</h3>
                        <br/>  <br/>
                        <p>
                            <span ng-repeat="keyword in keywordData" class="keyword" ng-bind="keyword"></span>
                        </p>
                        <br/>
                        <p><span>Use Keywords For SEO Benefits</span> Headlines should include searchable keywords and phrases so that readers can find your content easily.</p>
                    </div>


                </section>



            </article>


        </div>
        <section class="one-column page-content not-loaded" ng-hide="loaded">

            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

        </section>

    </div>

</main>

{{> signup}}
