Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Évaluation du Retentissement</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Fredoka:wght@400;500;600&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
background-color: #EFF6FF;
}
.slide-container {
width: 1280px;
min-height: 720px;
display: flex;
flex-direction: column;
background-color: #EFF6FF;
position: relative;
overflow: hidden;
}
.title-font {
font-family: 'Fredoka', sans-serif;
}
.blob {
position: absolute;
border-radius: 50%;
opacity: 0.5;
z-index: 0;
}
.blob-1 { width: 600px; height: 600px; top: -200px; left: -200px; background-color: #DBEAFE; }
.blob-2 { width: 400px; height: 400px; bottom: -100px; right: -100px; background-color: #FCE7F3; }
.content-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
}
.assessment-item {
transition: all 0.3s;
}
.assessment-item:hover {
transform: translateX(5px);
background-color: #F0F9FF;
}
.clinical-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
}
</style>
</head>
<body>
<div class="slide-container p-12">
<!-- Decorative Elements -->
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<!-- Header -->
<div class="relative z-10 flex justify-between items-center mb-8">
<div>
<div class="inline-block px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm font-semibold mb-2">
Diagnostic & Suivi
</div>
<h1 class="title-font text-4xl font-bold text-gray-800">
Évaluation du Retentissement
</h1>
</div>
<div class="flex items-center space-x-2">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white">
<i class="fas fa-weight-scale"></i>
</div>
<span class="text-purple-800 font-semibold">Orientation vers Fonctionnel vs Organique</span>
</div>
</div>
<!-- Main Content Area -->
<div class="relative z-10 flex flex-1 gap-8">
<!-- Left Column: Image/Visual (40%) -->
<div class="w-5/12 flex flex-col">
<div class="content-card p-6 flex-1 flex flex-col bg-white border border-purple-100 h-full">
<div class="flex items-center mb-4 border-b border-purple-50 pb-2">
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center text-red-500 mr-3">
<i class="fas fa-child"></i>
</div>
<h3 class="title-font text-xl font-bold text-gray-700">Signes de Malnutrition</h3>
</div>
<div class="relative rounded-xl overflow-hidden shadow-inner border border-gray-100 flex-1 bg-gray-50 flex flex-col">
<div class="h-64 w-full relative overflow-hidden rounded-t-xl">
<img alt="Enfant montrant des signes de malnutrition comme une distension abdominale et une fonte musculaire" class="w-full h-full object-cover" src="https://www.genspark.ai/image_placeholder.png"/>
<div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-xs text-center">
Illustration : Fonte musculaire et distension abdominale
</div>
</div>
<div class="p-4 bg-white flex-1">
<p class="text-sm font-semibold text-gray-700 mb-2">Signes cliniques visibles :</p>
<div class="grid grid-cols-2 gap-2">
<div class="flex items-center text-xs text-gray-600 bg-red-50 p-2 rounded">
<i class="fas fa-bone text-red-400 mr-2"></i> Amyotrophie
</div>
<div class="flex items-center text-xs text-gray-600 bg-blue-50 p-2 rounded">
<i class="fas fa-tint text-blue-400 mr-2"></i> Œdèmes
</div>
<div class="flex items-center text-xs text-gray-600 bg-yellow-50 p-2 rounded">
<i class="fas fa-meh text-yellow-400 mr-2"></i> Apathie
</div>
<div class="flex items-center text-xs text-gray-600 bg-green-50 p-2 rounded">
<i class="fas fa-expand-alt text-green-400 mr-2"></i> Distension
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Content (60%) -->
<div class="w-7/12 flex flex-col gap-4">
<!-- Section 1: Anthropométrie -->
<div class="content-card p-5 bg-white border-l-4 border-blue-500">
<h3 class="title-font text-lg font-bold text-gray-800 mb-3 flex items-center">
<span class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-3 text-sm">
<i class="fas fa-ruler-vertical"></i>
</span>
Anthropométrie (Essentiel)
</h3>
<div class="space-y-2 pl-11">
<div class="assessment-item p-2 rounded-lg border border-transparent hover:border-blue-100">
<p class="text-gray-700 font-medium text-sm">Rapport Poids/Taille (P/T) & IMC</p>
<p class="text-gray-500 text-xs">Indicateur de dénutrition aiguë. Cassure de la courbe = alerte majeure.</p>
</div>
<div class="assessment-item p-2 rounded-lg border border-transparent hover:border-blue-100">
<p class="text-gray-700 font-medium text-sm">Rattrapage Staturo-Pondéral</p>
<p class="text-gray-500 text-xs">Surveillance de la vitesse de croissance (cm/an).</p>
</div>
</div>
</div>
<!-- Section 2: Biologie -->
<div class="content-card p-5 bg-white border-l-4 border-purple-500">
<h3 class="title-font text-lg font-bold text-gray-800 mb-3 flex items-center">
<span class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mr-3 text-sm">
<i class="fas fa-flask"></i>
</span>
Bilan Biologique Nutritionnel
</h3>
<div class="grid grid-cols-2 gap-3 pl-11">
<div class="bg-purple-50 p-3 rounded-lg">
<p class="font-bold text-purple-700 text-sm mb-1">Protéines</p>
<p class="text-xs text-gray-600">Albumine ↓, Pré-albumine ↓</p>
<span class="text-[10px] text-purple-500 mt-1 block">Signe entéropathie exsudative ou dénutrition sévère</span>
</div>
<div class="bg-yellow-50 p-3 rounded-lg">
<p class="font-bold text-yellow-700 text-sm mb-1">Micronutriments</p>
<p class="text-xs text-gray-600">Fer, Vitamine D, B12, Folates</p>
<span class="text-[10px] text-yellow-600 mt-1 block">Anémie carentielle fréquente</span>
</div>
<div class="bg-red-50 p-3 rounded-lg col-span-2 flex items-center justify-between">
<div>
<p class="font-bold text-red-700 text-sm">Coagulation (TP/INR)</p>
<p class="text-xs text-gray-600">Reflet carence en Vitamine K (liposoluble)</p>
</div>
<i class="fas fa-exclamation-triangle text-red-300 text-xl"></i>
</div>
</div>
</div>
<!-- Section 3: Clinique -->
<div class="content-card p-5 bg-white border-l-4 border-green-500 flex-1">
<h3 class="title-font text-lg font-bold text-gray-800 mb-2 flex items-center">
<span class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3 text-sm">
<i class="fas fa-stethoscope"></i>
</span>
Signes Cliniques de Carence
</h3>
<div class="flex flex-wrap gap-2 pl-11">
<span class="clinical-badge bg-gray-100 text-gray-700 border border-gray-200">Œdèmes (Hypoprotidémie)</span>
<span class="clinical-badge bg-gray-100 text-gray-700 border border-gray-200">Fonte musculaire (Fessiers)</span>
<span class="clinical-badge bg-gray-100 text-gray-700 border border-gray-200">Pâleur (Anémie)</span>
<span class="clinical-badge bg-gray-100 text-gray-700 border border-gray-200">Anorexie</span>
<span class="clinical-badge bg-gray-100 text-gray-700 border border-gray-200">Retard Pubertaire</span>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="absolute bottom-4 w-full flex justify-between items-center pr-24 text-gray-400 text-xs">
<p>© 2025 Dr. Maryam Elbouami</p>
<p>Source : Cours Pr M. HIDA - CHU Fès</p>
</div>
</div>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
11
Requests
5
Domains
492KB
Transfer Size
3192KB
Content Size
313.0ms
Dom Content Loaded
684.0ms
First Paint
590.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...