POL Mickaël
62ae4c54eb
- Design system glassmorphism avec Material Design 3 - 14 composants : App, Sidebar, Dashboard, EnclosView, DragodindeCard, AccouplementView, ReapproView, InventaireView, WorkflowsView, StatistiquesView, ParametresView, UpdateBanner, Toast, ConfirmModal - UndoManager pour annulation des actions destructives (Ctrl+Z) - Toast notifications (success/error) avec bouton Annuler - Modale de confirmation glassmorphism (remplace confirm() natif) - Export/import global des données depuis Paramètres - Maquettes HTML/PNG de la refonte graphique Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
157 lines
8.4 KiB
HTML
Executable File
157 lines
8.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="fr"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>NOTIFICATIONS MOBILES - The Obsidian Archive</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"tertiary-fixed": "#fed01b",
|
|
"on-tertiary-fixed-variant": "#645000",
|
|
"error-container": "#a70138",
|
|
"inverse-primary": "#7c41b5",
|
|
"on-error-container": "#ffb2b9",
|
|
"tertiary-fixed-dim": "#eec200",
|
|
"on-tertiary": "#645000",
|
|
"on-primary-fixed": "#000000",
|
|
"outline": "#7a7380",
|
|
"primary-fixed-dim": "#b378ef",
|
|
"surface-tint": "#cb97ff",
|
|
"background": "#100c16",
|
|
"primary-container": "#c185fd",
|
|
"surface-variant": "#292332",
|
|
"inverse-surface": "#fef7ff",
|
|
"on-secondary-fixed-variant": "#922164",
|
|
"surface-container-high": "#231d2b",
|
|
"primary-dim": "#be83fa",
|
|
"outline-variant": "#4b4652",
|
|
"on-primary-fixed-variant": "#430077",
|
|
"on-primary": "#46007c",
|
|
"surface-container": "#1c1724",
|
|
"surface-bright": "#302939",
|
|
"on-tertiary-fixed": "#433500",
|
|
"surface": "#100c16",
|
|
"on-error": "#490013",
|
|
"on-surface": "#f1e8f7",
|
|
"tertiary-container": "#fed01b",
|
|
"primary-fixed": "#c185fd",
|
|
"tertiary": "#ffe083",
|
|
"secondary-container": "#85145a",
|
|
"on-primary-container": "#360061",
|
|
"on-surface-variant": "#b0a8b6",
|
|
"surface-container-low": "#16111d",
|
|
"secondary-dim": "#f271b5",
|
|
"on-secondary-fixed": "#690045",
|
|
"secondary": "#f673b7",
|
|
"primary": "#cb97ff",
|
|
"on-tertiary-container": "#594700",
|
|
"inverse-on-surface": "#59535f",
|
|
"secondary-fixed-dim": "#ffabd1",
|
|
"error": "#ff6e84",
|
|
"on-secondary": "#4a002f",
|
|
"error-dim": "#d73357",
|
|
"secondary-fixed": "#ffc0db",
|
|
"on-secondary-container": "#ffbeda",
|
|
"tertiary-dim": "#eec200",
|
|
"surface-dim": "#100c16",
|
|
"surface-container-lowest": "#000000",
|
|
"surface-container-highest": "#292332",
|
|
"on-background": "#f1e8f7"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Manrope"],
|
|
"body": ["Inter"],
|
|
"label": ["Plus Jakarta Sans"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(28, 23, 36, 0.6);
|
|
backdrop-filter: blur(40px);
|
|
border: 1px solid rgba(203, 151, 255, 0.15);
|
|
}
|
|
.neon-glow {
|
|
box-shadow: 0 0 20px rgba(203, 151, 255, 0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-body text-on-surface">
|
|
<!-- Modal Container -->
|
|
<div class="relative w-full max-w-4xl mx-4">
|
|
<!-- Header Shell (Reference TopAppBar Logic) -->
|
|
<header class="glass-panel rounded-t-xl px-8 py-6 flex justify-between items-center border-b-0">
|
|
<h1 class="font-headline text-2xl font-extrabold text-primary tracking-tight uppercase">NOTIFICATIONS MOBILES</h1>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="close">close</span>
|
|
</button>
|
|
</header>
|
|
<!-- Main Modal Content -->
|
|
<main class="glass-panel p-8 flex flex-col md:flex-row gap-8 border-t-0">
|
|
<!-- Section 1: Installer l'app -->
|
|
<section class="flex-1 bg-surface-container-high/40 rounded-xl p-6 border border-outline-variant/10 flex flex-col items-center text-center">
|
|
<h2 class="font-headline text-lg font-bold text-on-surface mb-4">1. Installer l'app ntfy</h2>
|
|
<p class="text-on-surface-variant text-sm mb-6 leading-relaxed">
|
|
Téléchargez l'application ntfy sur votre appareil mobile. Scannez ce code pour ouvrir directement la page sur l'App Store ou le Play Store.
|
|
</p>
|
|
<div class="relative p-4 bg-white rounded-xl neon-glow">
|
|
<img alt="QR Code" class="w-40 h-40 object-contain" data-alt="high-contrast minimalist black and white QR code on a clean white background with subtle purple accent border" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCoHplz4v5lFmIppdNJovVc5-hSkDERe2wzaISOEQMcC-QcKql7PhubFgs0waRtVzcK-kSj7aZMns7SgSpda3qFMFsejuj3X6-dd4fmYnNxGlH-7D6bqp769kx9eh1RPWh9lPPXOFk6HRMEWaT14Lo7bJNd2r9KV9-L9rs2Maw6xYteeyNHhkjVq8xGs3WCUPtlzw4o2TYPm-AsKtcl0wZ9W708asChAR7XIC8XN9VvrCBjmzZY80FfFqkLRYpEy2Fu436fdYNMi9Gw"/>
|
|
</div>
|
|
<div class="mt-6 flex gap-3">
|
|
<span class="material-symbols-outlined text-primary-dim" data-icon="phone_iphone">phone_iphone</span>
|
|
<span class="material-symbols-outlined text-primary-dim" data-icon="shop">shop</span>
|
|
</div>
|
|
</section>
|
|
<!-- Section 2: Scanne pour t'abonner -->
|
|
<section class="flex-1 bg-surface-container-high/40 rounded-xl p-6 border border-outline-variant/10 flex flex-col items-center text-center">
|
|
<h2 class="font-headline text-lg font-bold text-on-surface mb-4">2. Scanne pour t'abonner</h2>
|
|
<p class="text-on-surface-variant text-sm mb-6 leading-relaxed">
|
|
Une fois l'application installée, scannez ce code pour ajouter automatiquement le canal de l'Archive et recevoir vos alertes en temps réel.
|
|
</p>
|
|
<div class="relative p-4 bg-white rounded-xl neon-glow">
|
|
<img alt="QR Code" class="w-40 h-40 object-contain" data-alt="complex technical QR code pattern with dark violet details on a bright white square background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBr49FhRSsP6Y6oldsSFE4b3EgyZbvhiIx0AzPULASiY7WfBL4nluQA79isPxpgM6cQ_6mILGmFEwhQuZ4VlnVPpZSf_ZSw1LaJcByhRZjsAfGUPDqz3hYFdK_utRXzSS4fBbCRYCZ7BCHsS1Z1tDPpajw8y8GpaWTxFSyqtTo6DP3KFn1tiaGBhelUWlDSfdtMmpbdDPdR_fiDqHbbpMjYq5_VTNlCtYxdpLZURNIIcffduDakzPrMvUzqYgA39dPGww_fHO_eH-RP"/>
|
|
</div>
|
|
<div class="mt-6 flex gap-3">
|
|
<span class="material-symbols-outlined text-secondary" data-icon="notifications_active">notifications_active</span>
|
|
<span class="material-symbols-outlined text-secondary" data-icon="key">key</span>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Action Footer -->
|
|
<footer class="glass-panel rounded-b-xl px-8 py-6 flex justify-end items-center gap-4 border-t-0">
|
|
<button class="flex items-center gap-2 px-6 py-2.5 rounded-full font-label font-bold text-sm bg-surface-container-highest text-on-surface hover:bg-surface-bright transition-all active:scale-95">
|
|
Fermer
|
|
</button>
|
|
<button class="flex items-center gap-2 px-8 py-2.5 rounded-full font-label font-bold text-sm bg-gradient-to-r from-primary to-primary-container text-on-primary shadow-lg shadow-primary/20 hover:opacity-90 transition-all active:scale-95">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="notifications">notifications</span>
|
|
Tester
|
|
</button>
|
|
</footer>
|
|
<!-- Bottom Accent Line -->
|
|
<div class="h-1 w-full bg-gradient-to-r from-transparent via-primary/50 to-transparent absolute -bottom-0.5 left-0 blur-sm"></div>
|
|
</div>
|
|
<!-- Background Decoration Elements -->
|
|
<div class="fixed top-20 left-20 w-64 h-64 bg-primary/10 rounded-full blur-[100px] -z-10"></div>
|
|
<div class="fixed bottom-20 right-20 w-96 h-96 bg-secondary/10 rounded-full blur-[120px] -z-10"></div>
|
|
</body></html> |