jqwidgets-framework/demos/Showcase/angular-fitnesstracker/src/app/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<!-- HEADER container -->
    <div id="fitnessTrackerHeader">
        <div class="sampleheader container">
            <div id="fitnessTracker" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="col-xs-12">
                    <div id="header">
                        <span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span>
                        <span>Fitness Tracker</span>
                    </div>
                    <div #person></div>
                </div>
            </div>
        </div>
    </div>
	
    <!-- CONTENT container -->
    <div class="samplecontainer container">			
		<!-- Today -->
        <div id="todayDetails" class="row bargauge">
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 ptiles">
                <div class="description">Today</div>
				<div class="ptiles">
				<customBargauge #bargauge1
					[currentValue]="0"
					[maxValue]="2200"
					[values]="[0]"
					[color]="'#3AB54B'"
					[backgroundColor]="'#B0D2C8'"
					[title]="'Calories intake'"
					[subtitle]="'calories pending'">
				</customBargauge>
				</div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 ptiles">
                <div class="description">&nbsp;</div>
				<div class="ptiles">
				<customBargauge #bargauge2
					[currentValue]="0"
					[maxValue]="1000"
					[values]="[0]"
					[color]="'#B24848'"
					[backgroundColor]="'#C9A5A6'"
					[title]="'Calories burnt'"
					[subtitle]="'calories pending'">
				</customBargauge>
				</div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 ptiles">
                <div class="description">Workout Progress</div>
				<div class="ptiles"></div>
				<customBargauge #bargauge3
					[currentValue]="0"
					[maxValue]="7"
					[values]="[0]"
					[color]="'#D2AACE'"
					[backgroundColor]="'#DBCDDC'"
					[title]="'Exercises'"
					[subtitle]="'sets pending'">
				</customBargauge>				
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <div class="description">&nbsp;</div>
				<div class="ptiles">
				<customBargauge #bargauge4
					[currentValue]="0"
					[maxValue]="4"
					[values]="[0]"
					[color]="'#978CC2'"
					[backgroundColor]="'#CBCBE0'"
					[title]="'Exercises'"
					[subtitle]="'sets pending'">
				</customBargauge>
				</div>
            </div>
        </div>
        <!-- MEAL -->
        <div class="row description">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <div>
                    Meal Summary
                </div>
            </div>
        </div>
        <div id="mealSummary" class="row">
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
				<donutChart #donutChart></donutChart>
            </div>
            <div id="addDeleteSet" class="col-xs-12 col-sm-6 col-md-8 col-lg-8">
				<dropdownlistMeal #dropdownlistFood (selectedFood)="selectedFood($event);"></dropdownlistMeal>
                
                <div style="display: inline-block;">
                    <cbutton #addMeal (clickEvent)="clickAddMeal()"></cbutton>
                </div>
            </div>
            <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                <div id="gridContent">
					<gridFood #foodGridValues (removeFoodEvent)="removeFood($event)" (bindingcomplete)="gridFoodReady()"></gridFood>
                </div>
            </div>
        </div>
        <!-- Daily Calorie Balance -->
        <div class="row description">Daily Calorie Balance</div>
        <div id="caloriesBallance" class="row">
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
				<pieChart #pieChart [initialValues]="dailyCalories"></pieChart>
            </div>
            <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                <div id="gridCaloriesContent" class="ptiles">
                    <gridDailyCalories #dailyCaloriesGrid (changedvalue)="calculateDailyCalories($event)" (bindingcomplete)="gridReady()"></gridDailyCalories>
                </div>
            </div>
        </div>
        <!-- Daily Calorie Balance Second -->
        <div class="row description">Daily Calorie Balance - Second</div>
        <div id="caloriesBalanceSecond" class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<chartCalories #chartCalories></chartCalories>
            </div>
        </div>
        <div class="row description">Macronutrients Balance</div>
        <div id="macronutrientsBalance" class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <chartNutritionalValues #nutritionalValues></chartNutritionalValues>
            </div>
        </div>
        <div class="row description"></div>
    </div>