690 lines
33 KiB
HTML
690 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Design Proposals - Keep App (Inspiré par Google Keep)</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
/* Material Design elevation */
|
|
.elevation-1 {
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
|
|
}
|
|
.elevation-2 {
|
|
box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
|
|
}
|
|
.elevation-3 {
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.17);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-900">
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-yellow-400 rounded-lg flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-xl font-bold">Keep App Redesign (INSPIRÉ PAR GOOGLE KEEP)</h1>
|
|
<p class="text-sm text-gray-500">Basé sur les meilleures pratiques de Google Keep</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button onclick="switchView('googlekeep')" id="btn-googlekeep" class="px-4 py-2 rounded-lg font-medium transition-colors bg-yellow-400 text-white">
|
|
Google Keep
|
|
</button>
|
|
<button onclick="switchView('proposition')" id="btn-proposition" class="px-4 py-2 rounded-lg font-medium transition-colors bg-gray-200 text-gray-700 hover:bg-gray-300">
|
|
Proposition
|
|
</button>
|
|
<button onclick="switchView('comparison')" id="btn-comparison" class="px-4 py-2 rounded-lg font-medium transition-colors bg-gray-200 text-gray-700 hover:bg-gray-300">
|
|
Comparaison
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto px-4 py-8">
|
|
|
|
<!-- GOOGLE KEEP VIEW -->
|
|
<div id="googlekeep-view" class="animate-fade-in">
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-bold mb-4">📱 Ce que Google Keep fait BIEN</h2>
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
|
|
<p class="text-yellow-800"><strong>Inspirations :</strong> Google Keep affiche TOUT le contenu (images, liens, avatars) de manière intelligente et lisible.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-8">
|
|
<!-- Google Keep Style -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<span class="w-3 h-3 bg-yellow-400 rounded-full"></span>
|
|
Style Google Keep (Reference)
|
|
</h3>
|
|
|
|
<div class="bg-white rounded-lg p-4 elevation-1 border border-gray-200">
|
|
<!-- Header avec Avatar -->
|
|
<div class="flex items-start gap-3 mb-2">
|
|
<!-- Avatar du propriétaire -->
|
|
<div class="w-10 h-10 rounded-full bg-blue-500 text-white font-semibold flex items-center justify-center flex-shrink-0">
|
|
JD
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="text-base font-medium text-gray-900">Ma note importante avec contenu</h4>
|
|
<!-- Métadonnées discrètes -->
|
|
<p class="text-xs text-gray-500">modifié il y a 2 heures</p>
|
|
</div>
|
|
<!-- Bouton pin -->
|
|
<button class="p-2 hover:bg-gray-100 rounded-full">
|
|
<svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Image (CONTENU VISIBLE) -->
|
|
<div class="mb-3 rounded-lg overflow-hidden elevation-1">
|
|
<img src="https://images.unsplash.com/photo-1506784983877-2e4ea36b7c0?w=800&auto=format&fit=crop"
|
|
alt="Image de la note"
|
|
class="w-full h-40 object-cover" />
|
|
</div>
|
|
|
|
<!-- Contenu texte -->
|
|
<p class="text-sm text-gray-700 mb-3 line-clamp-4">
|
|
Ceci est un exemple de note avec une image. Google Keep affiche les images clairement et elles font partie intégrante du contenu de la note...
|
|
</p>
|
|
|
|
<!-- Lien (CONTENU VISIBLE) -->
|
|
<div class="mb-3 flex items-center gap-2 p-3 bg-blue-50 rounded-lg">
|
|
<svg class="w-4 h-4 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
|
</svg>
|
|
<a href="#" class="text-sm text-blue-700 hover:underline flex-1 truncate">
|
|
www.example.com/article-avec-contenu-interessant
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Labels -->
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200">
|
|
Travail
|
|
</span>
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">
|
|
Projet
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Date -->
|
|
<p class="text-xs text-gray-500">créée le 15 janvier 2026</p>
|
|
</div>
|
|
|
|
<div class="mt-4 bg-green-50 border border-green-200 rounded-lg p-4">
|
|
<h4 class="font-semibold text-green-800 mb-2">✅ Ce qui fonctionne bien</h4>
|
|
<ul class="text-sm text-green-700 space-y-1">
|
|
<li>• Avatar visible pour savoir à qui appartient la note</li>
|
|
<li>• Image pleine largeur, partie intégrante du contenu</li>
|
|
<li>• Lien cliquable, bien distingué du texte</li>
|
|
<li>• Bouton pin discret mais accessible</li>
|
|
<li>• Interface claire, contenu prioritaire</li>
|
|
<li>• Métadonnées discrètes (date, modifié)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Note sans image -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<span class="w-3 h-3 bg-blue-400 rounded-full"></span>
|
|
Google Keep - Note sans image
|
|
</h3>
|
|
|
|
<div class="bg-white rounded-lg p-4 elevation-1 border border-gray-200">
|
|
<!-- Header avec Avatar -->
|
|
<div class="flex items-start gap-3 mb-2">
|
|
<div class="w-10 h-10 rounded-full bg-purple-500 text-white font-semibold flex items-center justify-center flex-shrink-0">
|
|
AC
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="text-base font-medium text-gray-900">Réunion de projet</h4>
|
|
<p class="text-xs text-gray-500">modifié il y a 30 minutes</p>
|
|
</div>
|
|
<button class="p-2 hover:bg-gray-100 rounded-full">
|
|
<svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Contenu texte -->
|
|
<p class="text-sm text-gray-700 mb-3">
|
|
Discuter des objectifs du trimestre et des livrables attendus. Points à couvrir :<br>
|
|
1. Revue des KPIs Q4<br>
|
|
2. Planning des ressources<br>
|
|
3. Coordination avec les équipes marketing
|
|
</p>
|
|
|
|
<!-- Labels -->
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800 border border-purple-200">
|
|
Réunion
|
|
</span>
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 border border-orange-200">
|
|
Important
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Date -->
|
|
<p class="text-xs text-gray-500">créée le 16 janvier 2026</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Mockup -->
|
|
<div class="mt-12">
|
|
<h3 class="text-2xl font-bold mb-4">📱 Google Keep - Style Mobile</h3>
|
|
<div class="flex justify-center">
|
|
<div class="w-[375px] h-[812px] bg-white rounded-3xl shadow-2xl overflow-hidden relative border-8 border-gray-900">
|
|
<!-- Mobile Header -->
|
|
<div class="bg-yellow-400 px-4 py-3 border-b border-yellow-500">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-lg font-semibold text-white">Keep</h1>
|
|
<button class="p-2">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Content -->
|
|
<div class="p-4 pb-24 overflow-y-auto h-[680px]">
|
|
<!-- Note 1 avec Image -->
|
|
<div class="mb-4 rounded-xl bg-gray-50 p-4 elevation-1">
|
|
<!-- Header mobile -->
|
|
<div class="flex items-start gap-3 mb-2">
|
|
<div class="w-10 h-10 rounded-full bg-blue-500 text-white font-semibold flex items-center justify-center flex-shrink-0">
|
|
JD
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="text-sm font-medium text-gray-900">Ma note avec image</h4>
|
|
<p class="text-[10px] text-gray-500">2h</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image mobile (visible) -->
|
|
<div class="mb-3 rounded-lg overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1506784983877-2e4ea36b7c0?w=400&auto=format&fit=crop"
|
|
alt="Image"
|
|
class="w-full h-32 object-cover" />
|
|
</div>
|
|
|
|
<!-- Contenu -->
|
|
<p class="text-sm text-gray-700 line-clamp-2">
|
|
Note avec image visible comme Google Keep...
|
|
</p>
|
|
|
|
<!-- Labels -->
|
|
<div class="flex flex-wrap gap-1">
|
|
<span class="px-2 py-0.5 rounded-full text-[10px] bg-blue-100 text-blue-800">
|
|
Travail
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Note 2 avec Lien -->
|
|
<div class="mb-4 rounded-xl bg-gray-50 p-4 elevation-1">
|
|
<div class="flex items-start gap-3 mb-2">
|
|
<div class="w-10 h-10 rounded-full bg-purple-500 text-white font-semibold flex items-center justify-center flex-shrink-0">
|
|
AC
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="text-sm font-medium text-gray-900">Note avec lien</h4>
|
|
<p class="text-[10px] text-gray-500">30m</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-700 mb-2 line-clamp-2">
|
|
Note de référence avec lien externe important...
|
|
</p>
|
|
|
|
<!-- Lien visible -->
|
|
<div class="flex items-center gap-2 p-2 bg-blue-50 rounded-lg">
|
|
<svg class="w-4 h-4 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
|
</svg>
|
|
<a href="#" class="text-xs text-blue-700 hover:underline truncate">
|
|
documentation.google.com
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Labels -->
|
|
<div class="flex flex-wrap gap-1 mt-2">
|
|
<span class="px-2 py-0.5 rounded-full text-[10px] bg-purple-100 text-purple-800">
|
|
Docs
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAB -->
|
|
<div class="absolute bottom-20 right-4">
|
|
<button class="w-14 h-14 bg-yellow-400 hover:bg-yellow-500 rounded-full shadow-lg flex items-center justify-center transition-transform hover:scale-105">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PROPOSITION VIEW -->
|
|
<div id="proposition-view" class="hidden animate-fade-in">
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-bold mb-4">✨ Proposition pour Keep (Inspirée par Google Keep)</h2>
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
|
<p class="text-blue-800"><strong>Approche :</strong> Adapter le design actuel de Keep en s'inspirant de Google Keep - TOUT le contenu visible, interface simplifiée autour.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-8 mb-12">
|
|
<!-- NoteCard Actuel -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<span class="w-3 h-3 bg-red-500 rounded-full"></span>
|
|
Keep Actuel
|
|
</h3>
|
|
|
|
<div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-200 border border-gray-200 relative">
|
|
<!-- Header buttons (5 buttons!) -->
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex gap-1">
|
|
<button class="p-1.5 hover:bg-gray-100 rounded text-gray-500" title="Déplacer">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="p-1.5 hover:bg-gray-100 rounded text-gray-500" title="Dossier">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="p-1.5 hover:bg-gray-100 rounded text-blue-600" title="Épinglé">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="p-1.5 hover:bg-gray-100 rounded text-amber-500" title="Rappel">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="p-1.5 hover:bg-gray-100 rounded text-purple-600" title="Connections">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Memory Echo badges -->
|
|
<div class="flex flex-wrap gap-1 mb-2">
|
|
<span class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-100 text-purple-700 border border-purple-200 flex items-center gap-1">
|
|
<svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
|
|
</svg>
|
|
Fusion
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<h4 class="text-base font-medium mb-2 text-gray-900">
|
|
Ma note importante avec contenu
|
|
</h4>
|
|
|
|
<!-- Image thumbnail -->
|
|
<div class="bg-gray-100 rounded-lg mb-2 h-24 bg-cover bg-center flex items-center justify-center">
|
|
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Link preview -->
|
|
<div class="border rounded-lg overflow-hidden bg-white/50 mb-2">
|
|
<div class="p-2">
|
|
<h4 class="font-medium text-xs text-gray-900 truncate">🔗 Exemple de lien externe</h4>
|
|
<p class="text-xs text-gray-500 mt-0.5">www.example.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<p class="text-sm text-gray-600 line-clamp-3 mb-3">
|
|
Ceci est un exemple de contenu de note qui montre comment le design actuel est surchargé avec trop de boutons et d'éléments autour qui encombrent l'interface...
|
|
</p>
|
|
|
|
<!-- Labels -->
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
Travail
|
|
</span>
|
|
<span class="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
Projet
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs text-gray-500">il y a 2 jours</span>
|
|
<div class="w-6 h-6 rounded-full bg-blue-500 text-white text-[10px] font-semibold flex items-center justify-center">
|
|
JD
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 bg-red-50 border border-red-200 rounded-lg p-4">
|
|
<h4 class="font-semibold text-red-800 mb-2">❌ Problèmes actuels</h4>
|
|
<ul class="text-sm text-red-700 space-y-1">
|
|
<li>• 5 boutons en haut (encombrent)</li>
|
|
<li>• Image small (haut), lien (bas) = layout brisé</li>
|
|
<li>• Avatar en bas à droite (difficile à voir)</li>
|
|
<li>• Badges Memory Echo en haut (encombrent)</li>
|
|
<li>• Pas d'indication claire de propriétaire</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NoteCard Proposé (Inspiré Google Keep) -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<span class="w-3 h-3 bg-green-500 rounded-full"></span>
|
|
Proposition (Style Google Keep)
|
|
</h3>
|
|
|
|
<div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-200 border border-gray-200 relative">
|
|
<!-- Header INTELLIGENT (Avatar + Pin + Actions) -->
|
|
<div class="flex items-start gap-3 mb-3">
|
|
<!-- Avatar (PROPRIÉTAIRE - comme Google Keep) -->
|
|
<div class="w-10 h-10 rounded-full bg-blue-500 text-white font-semibold flex items-center justify-center flex-shrink-0">
|
|
JD
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<h4 class="text-base font-medium text-gray-900">Ma note importante avec contenu</h4>
|
|
<!-- Métadonnées discrètes (comme Google Keep) -->
|
|
<p class="text-xs text-gray-500">modifié il y a 2 heures</p>
|
|
</div>
|
|
|
|
<!-- Actions groupées (menu "..." au lieu de 5 boutons) -->
|
|
<div class="flex items-center gap-1">
|
|
<button class="p-1.5 hover:bg-gray-100 rounded-full">
|
|
<svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="p-1.5 hover:bg-gray-100 rounded-full">
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Memory Echo badges (DISCRÈTS, plus petits) -->
|
|
<div class="flex flex-wrap gap-1 mb-2">
|
|
<span class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-50 text-purple-700 border border-purple-200 flex items-center gap-1">
|
|
<svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
|
|
</svg>
|
|
🔗 3 connexions
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Image (CONTENU VISIBLE - comme Google Keep) -->
|
|
<div class="mb-3 rounded-lg overflow-hidden elevation-1">
|
|
<img src="https://images.unsplash.com/photo-1506784983877-2e4ea36b7c0?w=800&auto=format&fit=crop"
|
|
alt="Image de la note"
|
|
class="w-full h-40 object-cover" />
|
|
</div>
|
|
|
|
<!-- Contenu texte -->
|
|
<p class="text-sm text-gray-700 mb-3 line-clamp-4">
|
|
Ceci est un exemple de note avec une image. Le design proposé s'inspire de Google Keep : image pleine largeur, partie intégrante du contenu...
|
|
</p>
|
|
|
|
<!-- Lien (CONTENU VISIBLE - comme Google Keep) -->
|
|
<div class="mb-3 flex items-center gap-2 p-3 bg-blue-50 rounded-lg">
|
|
<svg class="w-4 h-4 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
|
</svg>
|
|
<a href="#" class="text-sm text-blue-700 hover:underline flex-1 truncate">
|
|
www.example.com/article-avec-contenu-interessant
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Labels -->
|
|
<div class="flex flex-wrap gap-2 mb-2">
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200">
|
|
Travail
|
|
</span>
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">
|
|
Projet
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Date (comme Google Keep) -->
|
|
<p class="text-xs text-gray-500">créée le 15 janvier 2026</p>
|
|
</div>
|
|
|
|
<div class="mt-4 bg-green-50 border border-green-200 rounded-lg p-4">
|
|
<h4 class="font-semibold text-green-800 mb-2">✅ Améliorations</h4>
|
|
<ul class="text-sm text-green-700 space-y-1">
|
|
<li>• Avatar en haut (visibilité immédiate comme Google Keep)</li>
|
|
<li>• Image pleine largeur (contenu prioritaire)</li>
|
|
<li>• Lien bien distingué (fond bleu + icon)</li>
|
|
<li>• 5 boutons → 2 boutons + menu (...)</li>
|
|
<li>• Badges Memory Echo plus discrets</li>
|
|
<li>• Métadonnées discrètes sous le titre</li>
|
|
<li>• Interface claire inspirée de Google Keep</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COMPARISON VIEW -->
|
|
<div id="comparison-view" class="hidden animate-fade-in">
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-bold mb-4">⚖️ Comparaison Avant / Après</h2>
|
|
<div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
|
|
<p class="text-purple-800"><strong>Approche :</strong> S'inspirer de Google Keep - TOUT le contenu visible, interface intelligente autour du contenu.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-8 mb-12">
|
|
<!-- Before -->
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-4 text-red-600">❌ Avant (Actuel)</h3>
|
|
<div class="bg-white rounded-lg p-4 shadow-md border-2 border-red-200">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-2">Élément</th>
|
|
<th class="text-left py-2">État</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b">
|
|
<td class="py-2">Boutons en haut</td>
|
|
<td class="py-2 text-red-600 font-medium">5 boutons (encombrent)</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2">Avatar</td>
|
|
<td class="py-2 text-red-600 font-medium">En bas à droite (difficile à voir)</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2">Image</td>
|
|
<td class="py-2 text-red-600 font-medium">Thumbnail en haut (petit)</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2">Lien</td>
|
|
<td class="py-2 text-red-600 font-medium">Preview en bas (éloigné du contenu)</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2">Métadonnées</td>
|
|
<td class="py-2 text-red-600 font-medium">Non visibles</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2">Surcharge visuelle</td>
|
|
<td class="py-2 text-red-600 font-bold">ÉLEVÉE</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- After -->
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-4 text-green-600">✅ Après (Proposé - Google Keep Style)</h3>
|
|
<div class="bg-white rounded-lg p-4 shadow-md border-2 border-green-200">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-2">Élément</th>
|
|
<th class="text-left py-2">État</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b">
|
|
<td class="py-2">Boutons en haut</td>
|
|
<td class="py-2 text-green-600 font-medium">2 boutons + menu (...) (comme Google Keep)</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2">Avatar</td>
|
|
<td class="py-2 text-green-600 font-medium">En haut à gauche (visible immédiate)</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2">Image</td>
|
|
<td class="py-2 text-green-600 font-medium">Pleine largeur (contenu prioritaire)</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2">Lien</td>
|
|
<td class="py-2 text-green-600 font-medium">Bien distingué (fond bleu + icon)</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2">Métadonnées</td>
|
|
<td class="py-2 text-green-600 font-medium">Discrètes sous le titre</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2">Surcharge visuelle</td>
|
|
<td class="py-2 text-green-600 font-bold">RÉDUITE (inspiré Google Keep)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Benefits Summary -->
|
|
<div class="bg-gradient-to-r from-green-50 to-blue-50 rounded-2xl p-8 mb-8">
|
|
<h3 class="text-2xl font-bold mb-6 text-center">🎯 Avantages de la Proposition</h3>
|
|
<div class="grid grid-cols-3 gap-6">
|
|
<div class="bg-white rounded-lg p-6 shadow-sm">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
|
|
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-lg font-semibold text-center mb-2">Google Keep Style</h4>
|
|
<p class="text-sm text-gray-600 text-center">Inspiré par ce qui fonctionne déjà</p>
|
|
</div>
|
|
<div class="bg-white rounded-lg p-6 shadow-sm">
|
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto">
|
|
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-lg font-semibold text-center mb-2">Contenu Prioritaire</h4>
|
|
<p class="text-sm text-gray-600 text-center">TOUT est visible et cliquable</p>
|
|
</div>
|
|
<div class="bg-white rounded-lg p-6 shadow-sm">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto">
|
|
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-lg font-semibold text-center mb-2">Interface Simplifiée</h4>
|
|
<p class="text-sm text-gray-600 text-center">5 boutons → 2 boutons + menu</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-white border-t border-gray-200 mt-12 py-8">
|
|
<div class="container mx-auto px-4 text-center">
|
|
<p class="text-gray-600 mb-2">Propositions de Redesign UX/UI - Keep App</p>
|
|
<p class="text-sm text-gray-500">📱 Inspiré par Google Keep • Contenu préservé • Interface simplifiée</p>
|
|
<p class="text-sm text-gray-500">Créé par Sally (UX Designer) • 2026-01-17</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// View switching
|
|
function switchView(view) {
|
|
// Hide all views
|
|
document.getElementById('googlekeep-view').classList.add('hidden');
|
|
document.getElementById('proposition-view').classList.add('hidden');
|
|
document.getElementById('comparison-view').classList.add('hidden');
|
|
|
|
// Reset button styles
|
|
document.getElementById('btn-googlekeep').className = 'px-4 py-2 rounded-lg font-medium transition-colors bg-gray-200 text-gray-700 hover:bg-gray-300';
|
|
document.getElementById('btn-proposition').className = 'px-4 py-2 rounded-lg font-medium transition-colors bg-gray-200 text-gray-700 hover:bg-gray-300';
|
|
document.getElementById('btn-comparison').className = 'px-4 py-2 rounded-lg font-medium transition-colors bg-gray-200 text-gray-700 hover:bg-gray-300';
|
|
|
|
// Show selected view
|
|
document.getElementById(view + '-view').classList.remove('hidden');
|
|
|
|
// Highlight active button
|
|
document.getElementById('btn-' + view).className = 'px-4 py-2 rounded-lg font-medium transition-colors bg-yellow-400 text-white';
|
|
|
|
// Scroll to top
|
|
window.scrollTo(0, 0);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |