<!DOCTYPE html>
<html lang="fr">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>ISE Engine</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <style>
        .urbanist {
            font-family: "Urbanist", serif;
        }

        .crypted-word {
            font-family: "Source Code Pro", monospace;
            font-optical-sizing: auto;
            font-weight: <weight>;
            font-style: normal;
        }

        .error-notification {
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        @media (max-width: 640px) {
            .container {
                padding: 0 1rem;
            }
        }
    </style>
</head>
<body class="urbanist bg-white min-h-screen">
   <header class="w-full py-6">
       <div class="container flex justify-between items-center">
           <div class="text-xl font-medium">I_SE</div>
           <button id="menu-toggle" class="md:hidden">
               <i class="fas fa-bars text-xl"></i>
           </button>
           <nav class="md:flex space-x-8">
               <a href="https://idsma.imators.com/ise-login.php" class="hover:opacity-60 transition-opacity duration-200">Try the engine</a>
           </nav>
       </div>
   </header>

   <div id="mobile-nav" class="hidden md:hidden">
       <div class="container py-4">
           <div class="flex flex-col space-y-4">
               <a href="https://idsma.imators.com/ise-login.php" class="hover:opacity-60 transition-opacity duration-200">Try the Engine</a>
           </div>
       </div>
   </div>

   <?php if(session('error')): ?>
       <div id="error-notification" class="error-notification fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 max-w-sm">
           <div class="flex items-center justify-between">
               <span class="text-sm"><?php echo e(session('error')); ?></span>
               <button onclick="closeError()" class="ml-4 text-white hover:text-gray-200">
                   <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="M6 18L18 6M6 6l12 12"></path>
                   </svg>
               </button>
           </div>
       </div>
   <?php endif; ?>

   <main class="crypted-word flex-1 flex items-center justify-center py-20">
       <div class="container">
           <div class="text-center max-w-4xl mx-auto">
               <div class="encrypted-text text-2xl sm:text-3xl lg:text-4xl opacity-0 leading-relaxed">##11&&&&</div>
           </div>
       </div>
   </main>

   <script>
       document.getElementById('menu-toggle').addEventListener('click', () => {
           document.getElementById('mobile-nav').classList.toggle('hidden');
       });

       const phrase = 'Write a document with reliable information, so as not to present just anything';
       const element = document.querySelector('.encrypted-text');

       function decrypt(element, text) {
           const chars = '##1à&_&&@#$%';
           let steps = 0;
           const maxSteps = 20;
           
           const interval = setInterval(() => {
               let result = '';
               for (let i = 0; i < text.length; i++) {
                   if (i < (text.length * steps / maxSteps)) {
                       result += text[i];
                   } else {
                       result += chars[Math.floor(Math.random() * chars.length)];
                   }
               }
               element.textContent = result;
               steps++;
               
               if (steps > maxSteps) {
                   clearInterval(interval);
                   element.textContent = text;
               }
           }, 100);
       }

       function closeError() {
           const errorDiv = document.getElementById('error-notification');
           if (errorDiv) {
               errorDiv.style.animation = 'slideOut 0.3s ease-in forwards';
               setTimeout(() => errorDiv.remove(), 300);
           }
       }

       setTimeout(() => {
           element.style.opacity = '1';
           element.style.transition = 'opacity 0.5s';
           setTimeout(() => {
               decrypt(element, phrase);
           }, 500);
       }, 500);

       setTimeout(() => {
           const errorDiv = document.getElementById('error-notification');
           if (errorDiv) {
               closeError();
           }
       }, 5000);
   </script>
</body>
</html><?php /**PATH /home/gqdcvggs/ise.imators.systems/resources/views/welcome.blade.php ENDPATH**/ ?>