Card toggle

  • Stats
  • Reminders
  • Reminders past
  • Reminder
  • Hygiene
  • Sleep
  • Activity
  • Food
  • In / Out
  • Homework
Semaine 12 -2020
23/03 - 29/03
- -
Semaine 11 -2020
23/03 - 29/03
16h00 2
Semaine 10 -2020
23/03 - 29/03
42h15 4
Semaine 9 -2020
23/03 - 29/03
36h56 3
Semaine 8 -2020
23/03 - 29/03
43h12 4
3 rappels à venir
13h37 - Jean Paul
Do not forget to lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
13h42 - Jean Paul 2
Do not forget to lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
3 rappels passés
13h37 - Jean Paul
Do not forget to lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
13h42 - Jean Paul 2
Do not forget to lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
13h37 - Jean Paul
Do not forget to lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Hygiène

Caca

Pipi

Soin

Change

Dur

normal

molle

liquide

Nez

Fièvre

Medics.

Autre

250

Sieste

250

Activité

250

Désinteressé

Neutre

Interessé

Repas

Biberon

Plat du jour

Collation

Eau

Lait

Autre

Pas faim

Bien mangé

Très bien mangé

Pas faim

Bien mangé

Très bien mangé

Pas faim

Bien mangé

Très bien mangé

Matin

Soir

Goûter

Autre

Pas faim

Bien mangé

Très bien mangé mangé

250

Interruption

250

Homework

Not Done

Not Finish

Done

250

250

Show code
<div class="cardToggle -hygiene -active"> <div class="cardToggle__header"> <div class="header__title"> Hygiène </div> <div class="header__buttons"> <button type="button" class="button -default" @@disabled="" data-trigger="@@data">Check</button> <button data-trigger-card-toggle="hygiene"><img src="../../assets/icons/arrow.svg" alt=""></button> </div> </div> <div class="cardToggle__content" data-content-card-toggle="hygiene"> <div class="field "> <label for="input5">Heure</label> <span class="field__icon"> <input type="text" placeholder="hh:mm" id="input5" value=""> <span class="icon-clock-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span> </span> </div> <div class="rowChoices field"> <div class="cardChoice" data-trigger-choice="poopChoice"> <input type="radio" value="Caca" name="hygiene"> <span class="icon-poop -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Caca</p> </div> <div class="cardChoice"> <input type="radio" value="Pipi" name="hygiene"> <span class="icon-pee -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span> <p class="cardChoice__name">Pipi</p> </div> <div class="cardChoice" data-trigger-choice="careChoice"> <input type="radio" value="Soin" name="hygiene"> <span class="icon-care -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span> <p class="cardChoice__name">Soin</p> </div> <div class="cardChoice"> <input type="radio" value="Change" name="hygiene"> <span class="icon-change -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Change</p> </div> </div> <div class="field" data-choice="poopChoice"> <div class="field"> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Dur" name="shape"> <span class="icon-hard -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span></span> <p class="cardChoice__name">Dur</p> </div> <div class="cardChoice"> <input type="radio" value="normal" name="shape"> <span class="icon-normal -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span></span> <p class="cardChoice__name">normal</p> </div> <div class="cardChoice"> <input type="radio" value="molle" name="shape"> <span class="icon-soft -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span></span> <p class="cardChoice__name">molle</p> </div> <div class="cardChoice"> <input type="radio" value="liquide" name="shape"> <span class="icon-liquid -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span></span> <p class="cardChoice__name">liquide</p> </div> </div> </div> </div> <div class="field" data-choice="careChoice"> <div class="field"> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Nez" name="care"> <span class="icon-nose -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span></span> <p class="cardChoice__name">Nez</p> </div> <div class="cardChoice"> <input type="radio" value="Fièvre" name="care"> <span class="icon-fever -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span></span> <p class="cardChoice__name">Fièvre</p> </div> <div class="cardChoice"> <input type="radio" value="Medics" name="care"> <span class="icon-medicines -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span></span> <p class="cardChoice__name">Medics.</p> </div> <div class="cardChoice"> <input type="radio" value="Autre" name="care"> <span class="icon-other -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span></span> <p class="cardChoice__name">Autre</p> </div> </div> </div> </div> <div class="field"> <label for="input10">Commentaire</label> <textarea id="input10" row="10"></textarea> </div> <button class="button -fullWidth">Ajouter</button> </div> </div>
<div class="cardToggle -nap -active"> <div class="cardToggle__header"> <div class="header__title"> Sieste </div> <div class="header__buttons"> <button class="button has-background-green-medium">Start</button> <button data-trigger-card-toggle="sleep"><img src="../../assets/icons/arrow.svg" alt="" /></button> </div> </div> <div class="cardToggle__content" data-content-card-toggle="sleep"> <div class="field"> <label for="input47">Début</label> <span class="field__icon"> <input type="text" placeholder="hh:mm" id="input47"> <span class="icon-clock-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span> </span> </div> <div class="field"> <label for="input7">Fin</label> <span class="field__icon"> <input type="text" placeholder="hh:mm" id="input7"> <span class="icon-clock-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span> </span> </div> <button class="button has-background-blue-medium-4 -fullWidth">Ajouter</button> </div> </div>
<div class="cardToggle -activity -active"> <div class="cardToggle__header"> <div class="header__title"> Activité </div> <div class="header__buttons"> <button data-trigger-card-toggle="sleep"><img src="../../assets/icons/arrow.svg" alt="" /></button> </div> </div> <div class="cardToggle__content" data-content-card-toggle="sleep"> <div class="field"> <label for="input6">Heure</label> <span class="field__icon"> <input type="text" placeholder="hh:mm" id="input6"> <img src="../../assets/icons/flat/clock.svg" /> </span> </div> <div class="field"> <label for="input10">Commentaire</label> <textarea id="input10" row="10"></textarea> </div> <div class="field rowChoices"> <div class="cardChoice"> <input type="radio" value="Pas faim" name="activity"> <img src="../../assets/icons/not-good.svg" alt="" /> <p class="cardChoice__name">Pas faim</p> </div> <div class="cardChoice"> <input type="radio" value="Bien mangé" name="activity"> <img src="../../assets/icons/good.svg" alt="" /> <p class="cardChoice__name">Bien mangé</p> </div> <div class="cardChoice"> <input type="radio" value="Très bien mangé" name="activity"> <img src="../../assets/icons/very-interested.svg" alt="" /> <p class="cardChoice__name">Très bien mangé</p> </div> </div> <button class="button has-background-blue-medium-4 -fullWidth">Ajouter</button> </div> </div>
<div class="cardToggle -food -active"> <div class="cardToggle__header"> <div class="header__title"> Repas </div> <div class="header__buttons"> <button data-trigger-card-toggle="hygiene"><img src="../../assets/icons/arrow.svg" alt="" /></button> </div> </div> <div class="cardToggle__content" data-content-card-toggle="hygiene"> <div class="field"> <label for="input457">Heure</label> <span class="field__icon"> <input type="text" placeholder="hh:mm" id="input457"> <img src="../../assets/icons/flat/clock.svg" /> </span> </div> <div class="field rowChoices"> <div class="cardChoice" data-trigger-choice="bibberChoice"> <input type="radio" value="Biberon" name="food"> <img src="../../assets/icons/bibber.svg" alt="" /> <p class="cardChoice__name">Biberon</p> </div> <div class="cardChoice" data-trigger-choice="mealChoice"> <input type="radio" value="Plat du jour" name="food"> <img src="../../assets/icons/meal.svg" alt="" /> <p class="cardChoice__name">Plat du jour</p> </div> <div class="cardChoice" data-trigger-choice="extraChoice"> <input type="radio" value="Extra" name="food"> <img src="../../assets/icons/extra-food.svg" alt="" /> <p class="cardChoice__name">Extra</p> </div> </div> <div class="field" data-choice="bibberChoice"> <div class="field"> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Eau" name="foodDrink"> <img src="../../assets/icons/water.svg" alt="" /> <p class="cardChoice__name">Eau</p> </div> <div class="cardChoice"> <input type="radio" value="Lait" name="foodDrink"> <img src="../../assets/icons/milk.svg" alt="" /> <p class="cardChoice__name">Lait</p> </div> <div class="cardChoice"> <input type="radio" value="Autre" name="foodDrink"> <img src="../../assets/icons/other.svg" alt="" /> <p class="cardChoice__name">Autre</p> </div> </div> </div> <div class="field"> <label for="input10">Quantité</label> <input type="text" placeholder="ml" id="input10"> </div> </div> <div class="field" data-choice="mealChoice"> <div class="field"> <label>Entrée</label> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Pas faim" name="apetizerMood"> <img src="../../assets/icons/not-good.svg" alt="" /> <p class="cardChoice__name">Pas faim</p> </div> <div class="cardChoice"> <input type="radio" value="Bien mangé" name="apetizerMood"> <img src="../../assets/icons/good.svg" alt="" /> <p class="cardChoice__name">Bien mangé</p> </div> <div class="cardChoice"> <input type="radio" value="Autre" name="apetizerMood"> <img src="../../assets/icons/very-interested.svg" alt="" /> <p class="cardChoice__name">Bien mangé</p> </div> </div> </div> <div class="field"> <label>Plat</label> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Pas faim" name="MealMood"> <img src="../../assets/icons/not-good.svg" alt="" /> <p class="cardChoice__name">Pas faim</p> </div> <div class="cardChoice"> <input type="radio" value="Bien mangé" name="MealMood"> <img src="../../assets/icons/good.svg" alt="" /> <p class="cardChoice__name">Bien mangé</p> </div> <div class="cardChoice"> <input type="radio" value="Autre" name="MealMood"> <img src="../../assets/icons/very-interested.svg" alt="" /> <p class="cardChoice__name">Bien mangé</p> </div> </div> </div> <div class="field"> <label>Dessert</label> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Pas faim" name="dessertMood"> <img src="../../assets/icons/not-good.svg" alt="" /> <p class="cardChoice__name">Pas faim</p> </div> <div class="cardChoice"> <input type="radio" value="Bien mangé" name="dessertMood"> <img src="../../assets/icons/good.svg" alt="" /> <p class="cardChoice__name">Bien mangé</p> </div> <div class="cardChoice"> <input type="radio" value="Autre" name="dessertMood"> <img src="../../assets/icons/very-interested.svg" alt="" /> <p class="cardChoice__name">Bien mangé</p> </div> </div> </div> </div> <div class="field" data-choice="extraChoice"> <div class="field"> <label for="input157">Type</label> <input type="text" placeholder="Sirop, ..." id="input157"> </div> </div> <button class="button -fullWidth">Ajouter</button> </div> </div>
<div class="cardToggle -stats -active"> <div class="cardToggle__header"> <div class="header__title"> <a href="../../devkit/views/profil-kid.html" class="profil"> <div class="icon"><span class="icon-kid -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></div> <div class="name"> Juliette <br> Kindermans </div> </a> </div> <div class="header__buttons"> <span class="square has-background-blue-medium">48h34</span> <span class="square has-background-pink-medium">60h</span> <button data-trigger-card-toggle="stats"><span class="icon-arrow -border"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> </div> <div class="cardToggle__content" data-content-card-toggle="stats"> <div class="cardMultitasks -noBorder"> <div class="cardMultitasks__left"> <div class="label">Semaine 12 -2020</div> <div class="subLabel">23/03 - 29/03</div> </div> <div class="cardMultitasks__right"> <span class="square border-blue">12h58</span> <span class="square border-blue">2</span> <button><span class="icon-eye -border"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> </div> <div class="cardMultitasks -noBorder"> <div class="cardMultitasks__left"> <div class="label">Semaine 12 -2020</div> <div class="subLabel">23/03 - 29/03</div> </div> <div class="cardMultitasks__right"> <span class="square border-blue">12h58</span> <span class="square border-blue">2</span> <button><span class="icon-eye -border"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> </div> <div class="cardMultitasks -noBorder"> <div class="cardMultitasks__left"> <div class="label">Semaine 11 -2020</div> <div class="subLabel">23/03 - 29/03</div> </div> <div class="cardMultitasks__right"> <span class="square border-red">8h00</span> <span class="square border-blue">1</span> <button><span class="icon-eye -border"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> </div> <div class="cardMultitasks -noBorder"> <div class="cardMultitasks__left"> <div class="label">Semaine 10 -2020</div> <div class="subLabel">23/03 - 29/03</div> </div> <div class="cardMultitasks__right"> <span class="square border-blue">12h58</span> <span class="square border-blue">2</span> <button><span class="icon-eye -border"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> </div> <div class="cardMultitasks -noBorder"> <div class="cardMultitasks__left"> <div class="label">Semaine 9 -2020</div> <div class="subLabel">23/03 - 29/03</div> </div> <div class="cardMultitasks__right"> <span class="square border-blue">12h58</span> <span class="square border-blue">2</span> <button><span class="icon-eye -border"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> </div> <div class="cardMultitasks -noBorder"> <div class="cardMultitasks__left"> <div class="label">Semaine 8 -2020</div> <div class="subLabel">23/03 - 29/03</div> </div> <div class="cardMultitasks__right"> <span class="square border-blue">12h58</span> <span class="square border-blue">2</span> <button><span class="icon-eye -border"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> </div> <button class="button -fullWidth">Afficher plus</button> </div> </div>
<div class="cardToggle -interruption -active"> <div class="cardToggle__header"> <div class="header__title"> Interruption </div> <div class="header__buttons"> <button class="button has-background-green-medium">Start</button> <button data-trigger-card-toggle="in-out"><img src="../../assets/icons/arrow.svg" alt="" /></button> </div> </div> <div class="cardToggle__content" data-content-card-toggle="in-out"> <div class="field"> <label for="input47">Début</label> <span class="field__icon"> <input type="text" placeholder="hh:mm" id="input47"> <span class="icon-clock-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span> </span> </div> <div class="field"> <label for="input7">Fin</label> <span class="field__icon"> <input type="text" placeholder="hh:mm" id="input7"> <span class="icon-clock-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span> </span> </div> <button class="button has-background-blue-medium-4 -fullWidth">Ajouter</button> </div> </div>