consumerportal/views/diet/dashboard.html

mydna Custimised for you

<div ng-if="!vm.loaded" class="window shadow loading"><span>Loading Details...</span></div>
<div class="window shadow report" ng-if="vm.loaded" ng-init="reportLabel = vm.reportLabel || 'Diet'">
    <report-navigator title="reportLabel" links="vm.navigation" selected-value="'dashboard'"></report-navigator>
    <div class="main dietDashboard">
        <diet-age-warning ng-if="vm.user.Age < 19"></diet-age-warning>

        <div class="inline collapse">
            <div class="text shadow padding">
                <div class="big">{{vm.user.Username}}</div>
                <div>{{vm.user.Age}}yo {{vm.user.Gender === 'M' ? 'Male' : 'Female'}}</div>
                <div class="gap"></div>
                <div class="title">Welcome!</div>
                <p>
                    Your journey to better health starts here.
                </p>
            </div>
            <div class="hero" ng-click="vm.download()">
                <div>
                    <div class="title" ng-bind-template="Your Personalised {{reportLabel}} Report"></div>
                    <div class="text">We have created a PDF file which uncovers your genetic findings and the
                        science behind your <span ng-bind-template=" Personalised {{reportLabel}} Report"></span>. Here you can also find the evidence rating
                        for all our recommendations. Please download and review it for a full understanding of
                        your results.
                    </div>
                    <div class="link" ng-bind="vm.downloadMessage"></div>
                </div>
            </div>
        </div>

        <diet-metrics ng-if="vm.details.loss"></diet-metrics>
        <diet-goal-title  title="vm.details[vm.details.goal].plan.Type" kj="vm.details[vm.details.goal].plan.Kj"></diet-goal-title>
        <div class="gap"></div>
        <div class="inline">
            <div class="block">
                <div class="title">
                    Based on your genetic results and weight goal, this is your optimal diet
                </div>
                <div class="dietTypeCards">
                    <div ng-click="vm.openSection('guidelines')" ng-class="{selected: vm.selected.guidelines.Reference === 'higherprotein'}"><div>Higher Protein</div></div>
                    <div ng-click="vm.openSection('guidelines')" ng-class="{selected: vm.selected.guidelines.Reference === 'higherproteinlowerfat'}"><div>Higher Protein / Lower Fat</div></div>
                    <div ng-click="vm.openSection('guidelines')" ng-class="{selected: vm.selected.guidelines.Reference === 'higherproteinlowerfatomega3'}"><div>Higher Protein / Lower Fat<br>(Omega-3 Rich)</div></div>
                    <div ng-click="vm.openSection('guidelines')" ng-class="{selected: vm.selected.guidelines.Reference === 'lowerfat'}"><div>Lower Fat</div></div>
                    <div ng-click="vm.openSection('guidelines')" ng-class="{selected: vm.selected.guidelines.Reference === 'lowerfatomega3'}"><div>Lower Fat<br>(Omega-3 Rich)</div></div>
                    <div ng-click="vm.openSection('guidelines')" ng-class="{selected: vm.selected.guidelines.Reference === 'mediterranean'}"><div>Mediterranean</div></div>
                </div>
            </div>
        </div>
        <div class="inline">
            <div class="block">
                <div class="title">
                    Your Daily Breakdown
                </div>
                <div class="line">
                    <div class="carbs" ng-style="{width: vm.selected.guidelines.CarbsPc + '%'}">
                        <span>Carbohydrate</span>
                        <span>{{vm.selected.guidelines.CarbsPc}}%</span>
                    </div>
                    <div class="protein" ng-style="{width: vm.selected.guidelines.ProteinPc + '%'}">
                        <span>Protein</span>
                        <span>{{vm.selected.guidelines.ProteinPc}}%</span>
                    </div>
                    <div class="fat" ng-style="{width: vm.selected.guidelines.FatPc + '%'}">
                        <span>Fat</span>
                        <span>{{vm.selected.guidelines.FatPc}}%</span>
                    </div>
                </div>

                <div class="line breakdown">
                    <div class="carbs" ng-style="{width: vm.selected.guidelines.CarbsPc + '%'}">
                        <div class="image dietGrain"></div>
                        <div class="text">
                            <div>{{vm.selected.guidelines.CarbsG | number:0}}g</div>
                        </div>
                    </div>
                    <div class="protein" ng-style="{width: vm.selected.guidelines.ProteinPc + '%'}">
                        <div class="image dietMeat"></div>
                        <div class="text">
                            <div>{{vm.selected.guidelines.ProteinG | number:0}}g</div>
                        </div>
                    </div>
                    <div class="fat" ng-style="{width: vm.selected.guidelines.FatPc + '%'}">
                        <div class="image dietFat"></div>
                        <div class="text">
                            <div>{{vm.selected.guidelines.FatG | number:0}}g</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="inline">
            <a ng-click="vm.openSection('servings')">
                <div class="card shadow">
                    <div class="title"><div>Serving Size Guide</div></div>
                    <div class="text">
                        Find out how much you should eat each day from each of the five food groups based on your genetic results
                    </div>
                </div>
            </a>
            <a ng-click="vm.openSection('meals')">
                <div class="card shadow">
                    <div class="title"><div>Sample Meal Plans</div></div>
                    <div class="text">
                        Learn how to best combine your recommended serving sizes for each food groups to create easy and healthy meals
                    </div>
                </div>
            </a>

        </div>
        <p class="small">
            Please note: when you download your PDF report, you will find a Healthcare Professional Section. Please
            consider taking it to a healthcare professional who can assess your needs and develop further personalised
            recommendations based on your goals, height, weight, activity level, existing medical conditions and medical
            history, medication and supplementation, blood tests and current nutritional status.
        </p>
    </div>
</div>