HTML de la base de données "Livre de recettes provençales"
2. Modèle vue fiche unique
<div id="defaulttemplate-single" class="my-5">
<div class="defaulttemplate-single-body my-5">
<div class="row my-6">
<div class="col-auto">##userpicture##</div>
<div class="col">
<div class="row h-100">
<div class="col-3 align-self-center">
##user##<br><span class="data-timeinfo">##timeadded##</span>
</div>
<div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
<span class="font-weight-bold ">Dernière modification : </span>##timemodified##
</div>
<div class="col-4 col-md-3 ml-auto align-self-center d-flex flex-row-reverse">
<div>##actionsmenu##</div>
<div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
</div>
</div>
</div>
</div>
<hr>
<div class="my-6">
<div class="mt-4"><br>
<h3 style="text-align: center;"><strong><span class="" style="color: rgb(37, 83, 97);">[[Titre de la recette]]</span></strong></h3>
</div>
<div class="mt-4">
<p class="mt-2" style="text-align: center;">[[Photo du plat]]</p>
<p class="mt-2"><br></p>
</div>
</div>
</div>
</div>
<div class="my-5">
<div class="defaulttemplate-single-body my-5">
<div class="my-6">
<div class="mt-4">
<table style="margin-left:auto;margin-right:auto">
<thead>
<tr>
<th scope="col" style="text-align: center;">
<h3><strong>⏳</strong></h3>
</th>
<th scope="col" style="text-align: center;">
<h3><strong>🦾</strong></h3>
</th>
<th scope="col" style="text-align: center;">
<h3><strong>💰</strong></h3>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong> [[Durée de la recette]] min </strong></td>
<td><strong> [[Difficulté de la recette]] </strong></td>
<td><strong> [[Coût de la recette]] </strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="my-5">
<div class="defaulttemplate-single-body my-5">
<div class="my-6">
<div class="mt-4">
<p class="mt-2"><strong><br>Recette pour [[Nombre de personnes]] personne(s)</strong></p>
</div>
<div class="mt-4">
<span class="font-weight-bold">Ingrédients</span>
<p class="mt-2">[[Ingrédients]]</p>
<p class="mt-2"><br>
</p>
<table style="margin-left:auto;margin-right:auto">
<thead>
<tr>
<th scope="col" style="text-align: center;">Temps de préparation</th>
<th scope="col" style="text-align: center;">Temps de cuisson</th>
</tr>
</thead>
<tbody>
<tr>
<td> [[Temps de préparation]] min </td>
<td> [[Temps de cuisson]] min </td>
<td></td>
</tr>
</tbody>
</table>
<br>
</div>
<div class="mt-4">
</div>
<div class="mt-4">
<span class="font-weight-bold">Les étapes de préparation</span>
<p class="mt-2">[[Les étapes de préparation]]</p>
</div><br>
<div class="mt-4">
</div>
</div>
</div>
</div>