Vous devez être connecté.
Vous devez être connecté.
Mesures corporelles
Suivi alimentation
#fast-suivi-app{
max-width:1100px;
margin:0 auto;
padding:20px;
font-family:Arial,sans-serif;
}
.fast-suivi-header{
background:linear-gradient(180deg,#D90429,#a0001c);
color:white;
padding:30px;
border-radius:24px;
text-align:center;
margin-bottom:25px;
box-shadow:0 8px 22px rgba(0,0,0,0.15);
}
.fast-suivi-header h1{
margin:0;
font-size:30px;
}
.fast-suivi-header p{
margin:10px 0 0;
}
.fast-image-guide{
background:white;
padding:15px;
border-radius:22px;
box-shadow:0 6px 18px rgba(0,0,0,0.10);
margin-bottom:25px;
}
.fast-image-guide img{
width:100%;
border-radius:16px;
display:block;
}
.fast-card{
background:white;
border-radius:22px;
padding:22px;
margin-bottom:25px;
box-shadow:0 6px 18px rgba(0,0,0,0.10);
border:1px solid #eee;
}
.fast-section-title{
display:flex;
justify-content:space-between;
gap:12px;
align-items:center;
flex-wrap:wrap;
margin-bottom:18px;
}
.fast-section-title h2{
margin:0;
color:#111;
}
button{
border:none;
cursor:pointer;
border-radius:14px;
font-weight:700;
}
#addMeasureColumn,
#addFoodWeek,
.add-day,
.add-meal,
.add-food{
background:#D90429;
color:white;
padding:12px 18px;
}
.fast-table-scroll{
overflow-x:auto;
border-radius:16px;
border:1px solid #eee;
}
#measureTable{
border-collapse:collapse;
min-width:760px;
width:max-content;
}
#measureTable th,
#measureTable td{
border-bottom:1px solid #eee;
padding:12px;
text-align:center;
min-width:145px;
}
#measureTable th{
background:#f7f7f7;
font-weight:800;
}
#measureTable input{
width:100%;
padding:9px;
border:1px solid #ddd;
border-radius:10px;
text-align:center;
}
.fixed-col{
position:sticky;
left:0;
z-index:2;
background:#fff !important;
min-width:245px !important;
text-align:left !important;
font-weight:800;
box-shadow:4px 0 8px rgba(0,0,0,0.05);
}
.measure-label{
text-align:left !important;
background:white;
position:sticky;
left:0;
z-index:1;
min-width:245px !important;
font-weight:700;
box-shadow:4px 0 8px rgba(0,0,0,0.05);
}
.date-input{
font-weight:700;
}
.food-week{
border:1px solid #eee;
border-radius:18px;
margin-bottom:18px;
overflow:hidden;
}
.food-week-header{
background:#f7f7f7;
padding:15px;
display:flex;
gap:10px;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}
.food-week-header input{
flex:1;
min-width:220px;
font-size:17px;
font-weight:800;
padding:10px;
border:1px solid #ddd;
border-radius:12px;
}
.week-actions{
display:flex;
gap:8px;
}
.week-actions button{
background:#D90429;
color:white;
padding:10px 12px;
}
.food-week-content{
padding:16px;
}
.food-day{
background:#fafafa;
border:1px solid #eee;
border-radius:16px;
margin-bottom:14px;
padding:14px;
}
.food-day-header{
display:flex;
gap:10px;
align-items:center;
margin-bottom:12px;
}
.food-day-header input{
flex:1;
padding:10px;
border:1px solid #ddd;
border-radius:12px;
font-weight:700;
}
.delete-btn{
background:#333;
color:white;
padding:10px 12px;
}
.food-meal{
background:white;
border:1px solid #eee;
border-radius:14px;
padding:12px;
margin-bottom:12px;
}
.food-meal-header{
display:flex;
gap:10px;
margin-bottom:10px;
}
.food-meal-header input{
flex:1;
padding:10px;
border:1px solid #ddd;
border-radius:12px;
font-weight:700;
}
.food-line{
display:grid;
grid-template-columns:1fr 100px 100px 40px;
gap:8px;
margin-bottom:8px;
}
.food-line input{
padding:9px;
border:1px solid #ddd;
border-radius:10px;
}
.collapsed .food-week-content{
display:none;
}
@media(max-width:700px){
.food-line{
grid-template-columns:1fr;
}
.fast-suivi-header h1{
font-size:24px;
}
}
document.addEventListener(“DOMContentLoaded”, function(){
const storageKey = “fast_suivi_perf_” + window.location.pathname;
const measures = [
“A — Tour d’épaules (cm)”,
“B — Tour de poitrine (cm)”,
“C — Tour de bras / biceps (cm)”,
“D — Tour d’avant-bras (cm)”,
“E — Tour du ventre / nombril (cm)”,
“F — Tour de taille (cm)”,
“G — Poids (kg)”,
“H — Taux de masse grasse (%)”,
“I — Tour de cuisse (cm)”,
“J — Tour de mollet (cm)”,
“K — Tour de fessier (cm)”,
“L — IMC”
];
let data = JSON.parse(localStorage.getItem(storageKey) || “{}”);
if(!data.measureDates){
data.measureDates = [];
}
if(!data.measureValues){
data.measureValues = {};
}
if(!data.foodWeeks){
data.foodWeeks = [];
}
function save(){
localStorage.setItem(storageKey, JSON.stringify(data));
}
function renderMeasures(){
const header = document.getElementById(“measureHeader”);
const body = document.getElementById(“measureBody”);
header.innerHTML = ‘
Mesure | ‘;
body.innerHTML = “”;
data.measureDates.forEach(function(date, colIndex){
const th = document.createElement(“th”);
th.innerHTML = ”;
th.querySelector(“input”).addEventListener(“input”, function(){
data.measureDates[colIndex] = this.value;
save();
});
header.appendChild(th);
});
measures.forEach(function(label, rowIndex){
const tr = document.createElement(“tr”);
tr.innerHTML = ‘
‘ + label + ‘ | ‘;
data.measureDates.forEach(function(date, colIndex){
const key = rowIndex + “_” + colIndex;
const td = document.createElement(“td”);
td.innerHTML = ”;
td.querySelector(“input”).addEventListener(“input”, function(){
data.measureValues[key] = this.value;
save();
});
tr.appendChild(td);
});
body.appendChild(tr);
});
}
document.getElementById(“addMeasureColumn”).addEventListener(“click”, function(){
const today = new Date().toLocaleDateString(“fr-FR”);
data.measureDates.unshift(today);
const newValues = {};
Object.keys(data.measureValues).forEach(function(key){
const parts = key.split(“_”);
const row = parts[0];
const col = parseInt(parts[1],10);
newValues[row + “_” + (col + 1)] = data.measureValues[key];
});
data.measureValues = newValues;
save();
renderMeasures();
});
function renderFood(){
const box = document.getElementById(“foodWeeks”);
box.innerHTML = “”;
data.foodWeeks.forEach(function(week, weekIndex){
const weekDiv = document.createElement(“div”);
weekDiv.className = “food-week ” + (week.collapsed ? “collapsed” : “”);
weekDiv.innerHTML = `
`;
weekDiv.querySelector(“.food-week-header input”).addEventListener(“input”, function(){
data.foodWeeks[weekIndex].title = this.value;
save();
});
weekDiv.querySelector(“.toggle-week”).addEventListener(“click”, function(){
data.foodWeeks[weekIndex].collapsed = !data.foodWeeks[weekIndex].collapsed;
save();
renderFood();
});
weekDiv.querySelector(“.delete-week”).addEventListener(“click”, function(){
if(confirm(“Supprimer cette semaine alimentation ?”)){
data.foodWeeks.splice(weekIndex,1);
save();
renderFood();
}
});
weekDiv.querySelector(“.add-day”).addEventListener(“click”, function(){
data.foodWeeks[weekIndex].days.unshift({
title:”Nouveau jour”,
meals:[]
});
save();
renderFood();
});
const daysBox = weekDiv.querySelector(“.days-box”);
week.days.forEach(function(day, dayIndex){
const dayDiv = document.createElement(“div”);
dayDiv.className = “food-day”;
dayDiv.innerHTML = `
`;
dayDiv.querySelector(“.food-day-header input”).addEventListener(“input”, function(){
data.foodWeeks[weekIndex].days[dayIndex].title = this.value;
save();
});
dayDiv.querySelector(“.delete-day”).addEventListener(“click”, function(){
data.foodWeeks[weekIndex].days.splice(dayIndex,1);
save();
renderFood();
});
dayDiv.querySelector(“.add-meal”).addEventListener(“click”, function(){
data.foodWeeks[weekIndex].days[dayIndex].meals.push({
title:”Nouveau repas”,
foods:[]
});
save();
renderFood();
});
const mealsBox = dayDiv.querySelector(“.meals-box”);
day.meals.forEach(function(meal, mealIndex){
const mealDiv = document.createElement(“div”);
mealDiv.className = “food-meal”;
mealDiv.innerHTML = `
`;
mealDiv.querySelector(“.food-meal-header input”).addEventListener(“input”, function(){
data.foodWeeks[weekIndex].days[dayIndex].meals[mealIndex].title = this.value;
save();
});
mealDiv.querySelector(“.delete-meal”).addEventListener(“click”, function(){
data.foodWeeks[weekIndex].days[dayIndex].meals.splice(mealIndex,1);
save();
renderFood();
});
mealDiv.querySelector(“.add-food”).addEventListener(“click”, function(){
data.foodWeeks[weekIndex].days[dayIndex].meals[mealIndex].foods.push({
title:””,
mass:””,
calories:””
});
save();
renderFood();
});
const foodsBox = mealDiv.querySelector(“.foods-box”);
meal.foods.forEach(function(food, foodIndex){
const foodLine = document.createElement(“div”);
foodLine.className = “food-line”;
foodLine.innerHTML = `
`;
const inputs = foodLine.querySelectorAll(“input”);
inputs[0].addEventListener(“input”, function(){
data.foodWeeks[weekIndex].days[dayIndex].meals[mealIndex].foods[foodIndex].title = this.value;
save();
});
inputs[1].addEventListener(“input”, function(){
data.foodWeeks[weekIndex].days[dayIndex].meals[mealIndex].foods[foodIndex].mass = this.value;
save();
});
inputs[2].addEventListener(“input”, function(){
data.foodWeeks[weekIndex].days[dayIndex].meals[mealIndex].foods[foodIndex].calories = this.value;
save();
});
foodLine.querySelector(“button”).addEventListener(“click”, function(){
data.foodWeeks[weekIndex].days[dayIndex].meals[mealIndex].foods.splice(foodIndex,1);
save();
renderFood();
});
foodsBox.appendChild(foodLine);
});
mealsBox.appendChild(mealDiv);
});
daysBox.appendChild(dayDiv);
});
box.appendChild(weekDiv);
});
}
document.getElementById(“addFoodWeek”).addEventListener(“click”, function(){
const today = new Date().toLocaleDateString(“fr-FR”);
data.foodWeeks.unshift({
title:”Semaine du ” + today,
collapsed:false,
days:[]
});
save();
renderFood();
});
renderMeasures();
renderFood();
});
