/interface/client/templates/popupWindows/onboardingScreen.html

<template name="popupWindows_onboardingScreen">
    <div class="onboarding-screen {{mode}} active-{{TemplateVar.get 'currentActive'}} outgoing-{{TemplateVar.get 'lastActive'}} ">

        {{> elements_networkIndicator}}

        <div class="main-content">    
            <div class="onboarding-section onboarding-start">
                <p class="description">{{i18n "mist.popupWindows.onboarding.description"}}</p>
                <p> 
                    <button class="start-testnet"> {{i18n "mist.popupWindows.onboarding.goToTestnet"}} </button> 
                    {{i18n "mist.popupWindows.onboarding.goToTestnetDescription"}}
                </p>
                <p> 
                    <button class="goto-import-account"> {{i18n "mist.popupWindows.onboarding.gotoMainnet"}} </button> 
                    {{i18n "mist.popupWindows.onboarding.gotoMainnetDescription"}}
                </p>
            </div>

            <div class="onboarding-section onboarding-import-account row">
                {{> popupWindows_onboardingScreen_importAccount}}

                <div class="col col-12 footer-buttons">
                    <button class="goto-start"> {{i18n "buttons.back"}} </button> 
                    <button class="goto-password right-align"> {{i18n "buttons.skip"}} </button> 
                </div>
            </div>

            <div class="onboarding-section onboarding-password row">
                {{> popupWindows_onboardingScreen_password}}
            </div>

            <div class="onboarding-section onboarding-testnet row">
                {{> popupWindows_onboardingScreen_password}}
            </div>

            <div class="onboarding-section onboarding-account row">
                {{#if TemplateVar.get "testnet"}}
                    <h1>{{i18n "mist.popupWindows.onboarding.accountTitleTestnet"}} </h1>
                {{else}}
                    <h1>{{i18n "mist.popupWindows.onboarding.accountTitle"}} </h1>
                {{/if}}

                <div class="col col-6 col-left">
                    <p>
                        {{i18n "mist.popupWindows.onboarding.etherDescription"}}
                    </p>

                    {{#if TemplateVar.get "testnet"}}
                        <p>{{{i18n "mist.popupWindows.onboarding.mineItDescription"}}}</p>
                    {{else}}
                        <p>{{{i18n "mist.popupWindows.onboarding.loadItDescription"}}}</p>
                    {{/if}}
                </div>

                <div class="col col-6 col-deposit">
                    {{#if TemplateVar.get "newAccount"}}
                        {{> dapp_identicon identity=(TemplateVar.get "newAccount")}}
                        <div class="you"> {{i18n "mist.popupWindows.onboarding.you"}}  </div>
                        <input type="text" value="{{i18n 'mist.popupWindows.onboarding.etherbase'}}" class="name" disabled>
                        <h6 class="address"> {{TemplateVar.get "newAccount"}} </h6>

                        {{#unless TemplateVar.get "testnet"}}
                            <a href="https://shapeshift.io/shifty.html?destination={{newAccountLowerCase}}&amp;output=ETH&amp;apiKey=ef8312d8c9b9dda64fb852e8683eac6c33123f8743ff11383fb3bab29a364c01c27343fced4e628db8d5d66d763565763f8699c0fc903ec23db31cb908a944c8" class="button dapp-block-button dapp-small shapeshift" target="_popup"> {{i18n "mist.popupWindows.onboarding.depositBitcoin"}}  </a>
                            <h6> {{{i18n "mist.popupWindows.onboarding.viaShapeshift"}}} </h6>
                        {{/unless}}
                    {{/if}}
                </div>
                <div class="col col-12 footer-buttons">
                    <button class="goto-start"> {{i18n "buttons.back"}} </button>                 
                    <button class="goto-tutorial-1 right-align"> {{i18n "buttons.next"}} </button>                 
                </div>
            </div>

            <div class="onboarding-section onboarding-tutorial-1 row">
                <h1> {{i18n "mist.popupWindows.onboarding.learnIt"}} </h1>
                <div class="col col-6 col-left">
                    {{{i18n "mist.popupWindows.onboarding.tutorial1Description"}}}
                    <p><a href="https://www.ethereum.org/token" class="button" target="_blank">{{i18n "mist.popupWindows.onboarding.buttons.learnReceipt"}}</a></p>
                </div>
                <div class="col col-6 tutorial-token"></div>
                <div class="col col-12 footer-buttons">
                    <button class="goto-start"> {{i18n "buttons.back"}} </button>                 
                    <button class="goto-tutorial-2 right-align">  {{i18n "buttons.next"}} </button>                 
                </div>
            </div>

            <div class="onboarding-section onboarding-tutorial-2 row">
                <h1> {{i18n "mist.popupWindows.onboarding.learnIt"}} </h1>
                <div class="col col-6 col-left">
                    {{{i18n "mist.popupWindows.onboarding.tutorial2Description"}}}
                    <p><a href="https://www.ethereum.org/crowdsale" class="button" target="_blank">{{i18n "mist.popupWindows.onboarding.buttons.learnReceipt"}}</a></p>
                </div>
                <div class="col col-6 tutorial-crowdsale"></div>  
                <div class="col col-12 footer-buttons">
                    <button class="goto-tutorial-1"> {{i18n "buttons.back"}} </button>                 
                    <button class="goto-tutorial-3 right-align">  {{i18n "buttons.next"}} </button>                 
                </div>
            </div>

            <div class="onboarding-section onboarding-tutorial-3 row">
                <h1> {{i18n "mist.popupWindows.onboarding.learnIt"}} </h1>
                <div class="col col-6 col-left">
                    {{{i18n "mist.popupWindows.onboarding.tutorial3Description"}}}
                    <p><a href="https://www.ethereum.org/dao" class="button" target="_blank">{{i18n "mist.popupWindows.onboarding.buttons.learnReceipt"}}</a></p>
                </div>
                <div class="col col-6 tutorial-dao"></div>
                <div class="col col-12 footer-buttons">
                    <button class="goto-tutorial-2"> {{i18n "buttons.back"}} </button>                 
                </div>
            </div>
        </div>

        <footer>
            <progress value="{{#with TemplateVar.get 'syncing'}}{{progress}}{{/with}}" max="100"></progress>
            <progress class='stateBar' value="{{#with TemplateVar.get 'syncing'}}{{_displayStatesDownload}}{{/with}}" max="1"></progress>

            {{#with TemplateVar.get "syncing"}}
                <div class="status"> {{i18n "mist.popupWindows.onboarding.downloadingBlocks"}} ({{TemplateVar.get "peerCount"}} {{i18n 'mist.nodeInfo.peers'}})</div>
                <div class="blocks"> 
                    
                    {{ syncStatus }}

                </div>
            {{else}}
                {{#if TemplateVar.get 'readyToLaunch'}}
                    <button class="launch-app"> {{i18n "mist.popupWindows.onboarding.buttons.launchApp"}} </button>
                {{else}}
                    <div class="status">
                    {{#if TemplateVar.get "peerCount"}}
                        {{TemplateVar.get "peerCount"}} {{i18n 'mist.nodeInfo.peers'}}
                    {{else}}
                        {{i18n 'mist.startScreen.nodeSyncConnecting'}}
                    {{/if}}
                    </div>
                {{/if}}
            {{/with}}

        </footer>     
    </div>
</template>


<template name="popupWindows_onboardingScreen_importAccount">
    <h1>{{i18n "mist.popupWindows.onboarding.doYouHaveAWalletFile"}}</h1>
    <div class="col col-6 col-left">
        {{{i18n "mist.popupWindows.onboarding.walletFileDescription"}}}
    </div>
    {{#if TemplateVar.get "filePath"}}
        <div class="col col-6">
            {{#if TemplateVar.get "importing"}}
                <span class="dapp-identicon dapp-icon-loading"></span>
                <h2 style="display: block; text-align: center;">{{i18n "mist.popupWindows.onboarding.importing"}}</h2>
            {{else}}
                <form action="about:blank" target="dapp-form-helper-iframe">
                    <input type="{{showPassword}}" placeholder="{{i18n 'mist.popupWindows.requestAccount.enterPassword'}}" class="password">
                    <br><br>
                    <input type="checkbox" name="elements_input_bool" class="show-password abi-input">
                    <label for="show-password">{{i18n "mist.popupWindows.onboarding.buttons.showPassword"}}</label>
                    <br><br>
                    <button type="submit" style="margin-left: 15px;">{{i18n "mist.popupWindows.onboarding.buttons.importAccount"}}</button>
                </form>
            {{/if}}
        </div>
    {{else}}
        <div class="col col-6 dropable"> {{i18n "mist.popupWindows.onboarding.dropFilesHere"}}</div>
    {{/if}}
</template>


<template name="popupWindows_onboardingScreen_password">
    <h1> {{i18n "mist.popupWindows.onboarding.protectTitle"}} </h1>
    <form action="about:blank" target="dapp-form-helper-iframe">
        <div class="col col-6 col-left">
            <p> {{i18n "mist.popupWindows.onboarding.protectDescription"}} </p>
        </div>
        <div class="col col-6">
            {{#if TemplateVar.get "creatingPassword"}}
                <span class="dapp-identicon dapp-icon-loading"></span>
                <h2 style="display: block; text-align: center;">{{i18n "mist.popupWindows.onboarding.creating"}}</h2>
            {{else}}
                <input type="{{passwordInputType}}" placeholder="{{i18n 'mist.popupWindows.requestAccount.enterPassword'}}" class="password {{#if TemplateVar.get 'passwordsMismatch'}}dapp-error{{/if}}">
                <input type="{{passwordInputType}}" placeholder="{{i18n 'mist.popupWindows.requestAccount.repeatPassword'}}" class="password-repeat {{#if TemplateVar.get 'passwordsMismatch'}}dapp-error{{/if}}">
                <br><br>
                <input type="checkbox" name="elements_input_bool" class="show-password abi-input">
                <label for="show-password">{{i18n "mist.popupWindows.onboarding.buttons.showPassword"}}</label>
            {{/if}}
        </div>

        <div class="col col-12 footer-buttons">
            <button class="goto-start" type="button">  {{i18n "buttons.back"}}  </button>                 
            {{#if TemplateVar.get "passwordsNotEmpty"}}
            <button class="create-account right-align" type="submit"> {{i18n "buttons.next"}} </button>
            {{else}}
            <button class="goto-tutorial-1 right-align"> {{i18n "buttons.skip"}} </button>                 
            {{/if}}
        </div>
    </form>
</template>