YellowLabTools/front/src/views/index.html

<h2 class="promess">Online test to help speeding up <b>heavy</b> web pages</h2>
<p class="price">Free and open source!</p>

<form ng-submit="launchTest()" >
    <input type="text" name="url" ng-model="url" placeholder="https://www.mysite.com" class="url" />
    <input type="submit" value="Launch test" class="launchBtn" ng-class="{disabled: !url}" />
    <div class="settings">
        <div class="device">
            <div>Choose the simulated device:</div>
            <a href="" class="item" ng-class="{active: settings.device == 'phone'}" ng-click="settings.device = 'phone'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M368 0H144c-26 0-48 22-48 48v416c0 26 22 48 48 48h224c26 0 48-22 48-48V48c0-26-22-48-48-48zM192 24h128v16H192V24zm64 456a32 32 0 110-64 32 32 0 010 64zm128-96H128V64h256v320z"/></svg>Phone</a>
            <a href="" class="item" ng-class="{active: settings.device == 'tablet'}" ng-click="settings.device = 'tablet'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M400 0H80C54 0 32 22 32 48v416c0 26 22 48 48 48h320c26 0 48-22 48-48V48c0-26-22-48-48-48zM240 496a16 16 0 110-32 16 16 0 010 32zm144-48H96V64h288v384z"/></svg>Tablet</a>
            <a href="" class="item" ng-class="{active: settings.device == 'desktop'}" ng-click="settings.device = 'desktop'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M512 416V32H0v384h224v32h-96v32h256v-32h-96v-32h224zM64 96h384v256H64V96z"/></svg>Desktop</a>
            <a href="" class="item" ng-class="{active: settings.device == 'desktop-hd'}" ng-click="settings.device = 'desktop-hd'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M512 416V32H0v384h224v32h-96v32h256v-32h-96v-32zM64 96h384v256H64z"/><path d="M270 297V161h28c14 0 25 2 33 4 8 3 16 7 23 14 14 13 21 29 21 50s-7 38-22 51c-7 6-15 11-23 13-8 3-18 4-32 4zm20-19h10c9 0 16-1 23-3a47 47 0 0031-46c0-15-5-27-15-36-9-8-22-12-39-12h-10zm-123-64h59v-53h20v136h-20v-63h-59v63h-20V161h20z"/></svg>Desktop</a>
        </div>
        [ <a href="" class="showAdvanced" ng-click="settings.showAdvanced = !settings.showAdvanced">
            <span ng-if="!settings.showAdvanced">Advanced settings &nbsp;✚</span>
            <span ng-if="settings.showAdvanced">Hide advanced settings &nbsp;✖</span>
        </a> ]
        <span class="currentSettings" ng-if="!settings.showAdvanced && (settings.waitForSelector || settings.cookie || settings.authUser || settings.authPass || settings.proxy || settings.domains)">
            Currently set:
            <span ng-if="settings.waitForSelector">wait for selector</span>
            <span ng-if="settings.cookie">cookie</span>
            <span ng-if="settings.authUser || settings.authPass">authentication</span>
            <span ng-if="settings.proxy">proxy</span>
            <span ng-if="settings.domains">domain blocking</span>
        </span>
        <div class="advanced" ng-show="settings.showAdvanced">
            <!--<div>
                <div class="label">
                    Wait selector
                    <span class="settingsTooltip">
                        <svg width="14" height="14" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="M224 352h64v64h-64zm128-224c18 0 32 14 32 32v96l-96 64h-64v-32l96-64v-32H160v-64h192zm-96-80A207 207 0 0048 256a207 207 0 00208 208 207 207 0 00208-208A207 207 0 00256 48zm0-48a256 256 0 110 512 256 256 0 010-512z"/></svg>
                        <div><b>Wait for a CSS selector</b><br><br>Once the page is considered loaded, PhantomJS will repeatedly try to match the given CSS selector until it is found in the page. A 60 seconds timeout still applies anyway.<br><br>Example: "body.loaded"</div>
                    </span>
                </div>
                <div><input type="text" name="waitForSelector" ng-model="settings.waitForSelector" /></div>
            </div>-->
            <div>
                <div class="label">
                    Cookie
                    <span class="settingsTooltip">
                        <svg width="14" height="14" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="M224 352h64v64h-64zm128-224c18 0 32 14 32 32v96l-96 64h-64v-32l96-64v-32H160v-64h192zm-96-80A207 207 0 0048 256a207 207 0 00208 208 207 207 0 00208-208A207 207 0 00256 48zm0-48a256 256 0 110 512 256 256 0 010-512z"/></svg>
                        <div><b>Cookie</b><br><br>Adds cookies, separated by a pipe character.<br><br>Example: "bar1=foo1;domain=.domain1.com|bar2=foo2;domain=www.domain2.com"</div>
                    </span>
                </div>
                <div><input type="text" name="cookie" ng-model="settings.cookie" /></div>
            </div>
            <div>
                <div class="label">
                    Authent
                    <span class="settingsTooltip">
                        <svg width="14" height="14" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="M224 352h64v64h-64zm128-224c18 0 32 14 32 32v96l-96 64h-64v-32l96-64v-32H160v-64h192zm-96-80A207 207 0 0048 256a207 207 0 00208 208 207 207 0 00208-208A207 207 0 00256 48zm0-48a256 256 0 110 512 256 256 0 010-512z"/></svg>
                        <div><b>Basic HTTP authentication</b><br><br>Enter your credentials here if you need to bypass a basic authentication.<br><br><i>PS: if your authentication is not basic, you might be able to copy the session cookie from your browser, paste it in the "Cookie" setting and launch a run before your cookie expires.</i></div>
                    </span>
                </div>
                <div class="subTable">
                    <div>
                        <div>username</div>
                        <div><input type="text" class="authField" name="authUser" ng-model="settings.authUser" /></div>
                    </div>
                    <div>
                        <div><span>password</div>
                        <div><input type="password" class="authField" name="authPass" ng-model="settings.authPass" /></div>
                    </div>
                </div>
            </div>
            <div>
                <div class="label">
                    HTTP proxy
                    <span class="settingsTooltip">
                        <svg width="14" height="14" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="M224 352h64v64h-64zm128-224c18 0 32 14 32 32v96l-96 64h-64v-32l96-64v-32H160v-64h192zm-96-80A207 207 0 0048 256a207 207 0 00208 208 207 207 0 00208-208A207 207 0 00256 48zm0-48a256 256 0 110 512 256 256 0 010-512z"/></svg>
                        <div><b>HTTP proxy</b><br><br>Insert here your proxy settings with the format "host:port".<br><br>Example: "192.168.10.0:3333"</div>
                    </span>
                </div>
                <div><input type="text" name="proxy" ng-model="settings.proxy" /></div>
            </div>
            <div>
                <div class="label">
                    Block domains
                    <span class="settingsTooltip">
                        <svg width="14" height="14" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="M224 352h64v64h-64zm128-224c18 0 32 14 32 32v96l-96 64h-64v-32l96-64v-32H160v-64h192zm-96-80A207 207 0 0048 256a207 207 0 00208 208 207 207 0 00208-208A207 207 0 00256 48zm0-48a256 256 0 110 512 256 256 0 010-512z"/></svg>
                        <div><b>Block some domains</b><br><br>One line per domain or subdomain.<br><br><i><b>Example:</b><br>google-analytics.com<br>ads.yahoo.com<br>ajax.googleapis.com</i><br><br>An empty allow list will block all domains except the main domain.</div>
                    </span>
                </div>
                <div>
                    <div>
                        <input type="radio" name="blockOrAllow" ng-model="settings.domainsBlockOrAllow" value="block" />block list
                        <input type="radio" name="blockOrAllow" ng-model="settings.domainsBlockOrAllow" value="allow" />allow list
                    </div>
                    <textarea name="domains" ng-model="settings.domains" rows="5"></textarea>
                </div>
            </div>
        </div>
    </div>
</form>


<div class="features">
    <div>
        <h3>Page speed audit</h3>
        <p>Checks if performance good practices are respected</p>
    </div>

    <div>
        <h3>Front-end analyzis</h3>
        <p>Detects problems on HTML, CSS, JS, images, fonts and more</p>
    </div>

    <div>
        <h3>In-depth details</h3>
        <p>Provides precise information to fix the detected performance issues</p>
    </div>
</div>

<%if (sponsoring.home) { %>
    <div class="homeSponsor"><%- sponsoring.home %></div>
<% } %>