Améliore cette page en mettant des vrais noms de business Saas existant pas très connu :<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rapport confidentiel – Opportunités détectées</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime&display=swap"> <style> body { font-family: 'Courier Prime', monospace; background-color: #f0e6d2; background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="%23d4c9a8" stroke-width="1" stroke-dasharray="5,5"/></svg>'); color: #333; } .confidential-stamp { position: absolute; top: 50px; right: 50px; font-family: 'Special Elite', cursive; font-size: 3rem; color: #d00; transform: rotate(-15deg); opacity: 0.7; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); z-index: 10; } .document-title { font-family: 'Special Elite', cursive; position: relative; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } .document-title::before, .document-title::after { content: ""; position: absolute; height: 2px; background: linear-gradient(90deg, transparent, #333, transparent); width: 100%; left: 0; } .document-title::before { top: 0; } .document-title::after { bottom: 0; } .classified-card { background: #f8f4e9; border: 1px solid #d4c9a8; box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 0 20px rgba(0,0,0,0.05), 0 0 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; transition: all 0.3s ease; } .classified-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.15), inset 0 0 20px rgba(0,0,0,0.08), 0 0 15px rgba(0,0,0,0.15); } .classified-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.1) 100%); pointer-events: none; } .classified-card::after { content: ""; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d00"><path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z"/><path d="M12,7c-0.55,0-1,0.45-1,1v5c0,0.55,0.45,1,1,1s1-0.45,1-1V8C13,7.45,12.55,7,12,7z"/><path d="M11,16h2v2h-2V16z"/></svg>') no-repeat center; opacity: 0.3; } .redacted { background-color: #333; color: transparent; position: relative; display: inline-block; letter-spacing: 2px; } .redacted::after { content: "████"; position: absolute; left: 0; top: 0; color: #333; } .stamp-button { font-family: 'Special Elite', cursive; transition: all 0.3s ease; position: relative; overflow: hidden; } .stamp-button:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(208, 0, 0, 0.5); } .stamp-button::before { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px dashed rgba(208, 0, 0, 0.5); border-radius: 4px; opacity: 0; transition: opacity 0.3s ease; } .stamp-button:hover::before { opacity: 1; } .corner-fold { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 40px 40px 0; border-color: transparent #d4c9a8 transparent transparent; } .corner-fold::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 38px 38px 0; border-color: transparent #f0e6d2 transparent transparent; } .handwritten-note { font-family: 'Comic Sans MS', cursive; transform: rotate(-2deg); background: #fff8dc; border: 1px dashed #d4c9a8; box-shadow: 2px 2px 4px rgba(0,0,0,0.1); }
@media
(max-width: 768px) { .confidential-stamp { font-size: 2rem; top: 20px; right: 20px; } } </style> </head> <body class="min-h-screen px-4 sm:px-6 lg:px-8"> <!-- SaaS Header --> <header class="bg-black text-white py-4 shadow-lg"> <div class="max-w-6xl mx-auto px-4 flex justify-between items-center"> <div class="flex items-center space-x-3"> <div class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16" height="16"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/> </svg> </div> <h1 class="text-xl font-bold font-mono tracking-tight">UNDERRADAR</h1> </div> <nav class="hidden md:flex space-x-6"> <a href="#" class="hover:text-red-400 transition-colors">Dashboard</a> <a href="#" class="hover:text-red-400 transition-colors">Rapports</a> <a href="#" class="hover:text-red-400 transition-colors">IA Clone</a> <a href="#" class="hover:text-red-400 transition-colors">Agents</a> </nav> <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md text-sm font-bold transition-colors"> Accès Agent </button> </div> </header> <div class="max-w-6xl mx-auto relative py-12"> <!-- Confidential Stamp --> <div class="confidential-stamp"> CONFIDENTIEL </div> <!-- Document Header --> <div class="text-center mb-12 relative"> <div class="inline-block px-8 py-4 bg-white bg-opacity-70 border border-dashed border-gray-400 rounded-lg mb-6"> <h1 class="document-title text-3xl sm:text-4xl md:text-5xl font-bold inline-block px-8 py-2"> RAPPORT CONFIDENTIEL<br>OPPORTUNITÉS DÉTECTÉES </h1> </div> <div class="handwritten-note inline-block px-6 py-3 max-w-md mx-auto text-sm italic"> "Analyse complète des niches commerciales émergentes - diffusion restreinte" </div> </div> <!-- Classified Cards Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Card 1 --> <div class="classified-card p-6 rounded-lg relative"> <div class="corner-fold"></div> <div class="flex items-center mb-4"> <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3"> <span class="text-red-600 font-bold">1</span> </div> <h3 class="text-xl font-bold font-mono">SnackGo</h3> </div> <div class="space-y-3 mb-6"> <div> <span class="text-sm font-semibold text-gray-600">PAYS D'ORIGINE:</span> <p class="font-mono">Japon</p> </div> <div> <span class="text-sm font-semibold text-gray-600">MARCHÉ CIBLÉ:</span> <p>Vente de snacks en ligne via abonnement</p> </div> <div> <span class="text-sm font-semibold text-gray-600">STATUT IA:</span> <p class="text-green-700 font-bold">Croissance rapide – recommandé</p> </div> <div> <span class="text-sm font-semibold text-gray-600">DONNÉES CENSURÉES:</span> <p>Chiffre d'affaires: <span class="redacted">1,200,000</span> $/mois</p> <p>Taux de croissance: <span class="redacted">15</span> %/mois</p> </div> </div> <button class="stamp-button w-full py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-md transition-colors"> [LANCER UNE COPIE AVEC L'IA] </button> </div> <!-- Card 2 --> <div class="classified-card p-6 rounded-lg relative"> <div class="corner-fold"></div> <div class="flex items-center mb-4"> <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> <span class="text-blue-600 font-bold">2</span> </div> <h3 class="text-xl font-bold font-mono">PetAI</h3> </div> <div class="space-y-3 mb-6"> <div> <span class="text-sm font-semibold text-gray-600">PAYS D'ORIGINE:</span> <p class="font-mono">États-Unis</p> </div> <div> <span class="text-sm font-semibold text-gray-600">MARCHÉ CIBLÉ:</span> <p>Soins pour animaux via IA personnalisée</p> </div> <div> <span class="text-sm font-semibold text-gray-600">STATUT IA:</span> <p class="text-yellow-600 font-bold">Niche émergente – potentiel élevé</p> </div> <div> <span class="text-sm font-semibold text-gray-600">DONNÉES CENSURÉES:</span> <p>Investissement initial: <span class="redacted">45,000</span> $</p> <p>ROI estimé: <span class="redacted">320</span> % en 6 mois</p> </div> </div> <button class="stamp-button w-full py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-md transition-colors"> [LANCER UNE COPIE AVEC L'IA] </button> </div> <!-- Card 3 --> <div class="classified-card p-6 rounded-lg relative"> <div class="corner-fold"></div> <div class="flex items-center mb-4"> <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> <span class="text-green-600 font-bold">3</span> </div> <h3 class="text-xl font-bold font-mono">EcoRental</h3> </div> <div class="space-y-3 mb-6"> <div> <span class="text-sm font-semibold text-gray-600">PAYS D'ORIGINE:</span> <p class="font-mono">Allemagne</p> </div> <div> <span class="text-sm font-semibold text-gray-600">MARCHÉ CIBLÉ:</span> <p>Location d'équipements verts entre particuliers</p> </div> <div> <span class="text-sm font-semibold text-gray-600">STATUT IA:</span> <p class="text-purple-600 font-bold">Modèle éprouvé – faible concurrence</p> </div> <div> <span class="text-sm font-semibold text-gray-600">DONNÉES CENSURÉES:</span> <p>Utilisateurs actifs: <span class="redacted">12,500</span></p> <p>Commission moyenne: <span class="redacted">18</span> % par transaction</p> </div> </div> <button class="stamp-button w-full py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-md transition-colors"> [LANCER UNE COPIE AVEC L'IA] </button> </div> </div> <!-- Footer Note --> <div class="mt-12 text-center text-sm text-gray-600 italic"> <p>Ce document est classifié Niveau 3 - Diffusion restreinte aux agents autorisés</p> <p class="mt-2">Dernière mise à jour: <span class="redacted">2023-11-15</span> | Version du rapport: <span class="redacted">2.4.7</span></p> </div> <!-- Top Secret Watermark --> <div class="fixed inset-0 pointer-events-none flex items-center justify-center opacity-10 z-0"> <div class="text-6xl md:text-8xl font-bold text-gray-400 transform rotate-45 font-mono">TOP SECRET</div> </div> </div> </body> </html> - Initial Deployment
