<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Log In</title>
  <link rel="manifest" href="<?php echo e(asset('manifest.json')); ?>">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link href="<?php echo e(asset('css2?family=Inter:wght@400;500;600;700;800&display=swap')); ?>" rel="stylesheet">
  <script src="<?php echo e(asset('lucide@1.34.0/dist/umd/lucide.min.js')); ?>"></script>
  
  <style>
    :root {
      --cb-black: #000000;
      --cb-white: #ffffff; --cb-cyan: #00E5C4;
      --cb-pink: #FF3385; --cb-text: #111827; --cb-text-muted: #6B7280; --cb-border: #e5e7eb;
    }
    * { box-sizing: border-box;
      margin: 0; padding: 0; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
    body { background-color: var(--cb-white); color: var(--cb-text);
      display: flex; flex-direction: column; min-height: 100vh; -webkit-tap-highlight-color: transparent; }

    .bg-art { position: fixed;
      inset: 0; z-index: -1; overflow: hidden; background: var(--cb-white); pointer-events: none; }
    .orb-pink { position: absolute; bottom: -10vh;
      right: -20vw; width: 80vw; height: 80vw; background: var(--cb-pink); filter: blur(80px); -webkit-filter: blur(80px); opacity: 0.25; border-radius: 50%;
      animation: floatPink 15s ease-in-out infinite alternate; }
    .orb-cyan { position: absolute; top: 10vh; left: -20vw; width: 70vw;
      height: 70vw; background: var(--cb-cyan); filter: blur(80px); -webkit-filter: blur(80px); opacity: 0.2; border-radius: 50%; animation: floatCyan 20s ease-in-out infinite alternate-reverse;
    }
    @keyframes floatPink { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-10vw, -10vh, 0) scale(1.2);
    } }
    @keyframes floatCyan { 0% { transform: translate3d(0,0,0) scale(1);
    } 100% { transform: translate3d(10vw, 10vh, 0) scale(1.1); } }

    .nav-header { display: flex;
      align-items: center; justify-content: space-between; padding: 16px 24px; padding-top: max(20px, env(safe-area-inset-top)); }
    .btn-back { width: 40px; height: 40px;
      border-radius: 50%; background: var(--cb-white); border: 1px solid var(--cb-border); display: flex; align-items: center; justify-content: center; color: var(--cb-black); text-decoration: none;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: transform 0.2s; }
    .btn-back:active { transform: scale(0.9);
    }

    .auth-main { padding: 24px; flex: 1; display: flex;
      flex-direction: column; justify-content: center; max-width: 500px; margin: 0 auto; width: 100%;
    }
    
    .page-title { font-size: clamp(40px, 10vw, 52px); font-weight: 800; letter-spacing: -2px; line-height: 1.1;
      margin-bottom: 8px; color: var(--cb-black); }
    .page-subtitle { font-size: 16px; color: var(--cb-text-muted); font-weight: 500; margin-bottom: 40px;
    }
    
    .input-group { margin-bottom: 20px;
    }
    .input-group label { display: block; font-size: 13px; font-weight: 700; color: var(--cb-text-muted); margin-bottom: 8px; text-transform: uppercase;
      letter-spacing: 0.5px; }
    .input-wrapper { position: relative; display: flex; align-items: center;
    }
    .input-wrapper svg { position: absolute; left: 16px; color: var(--cb-text-muted); width: 20px; height: 20px;
    }
    .input-wrapper input { width: 100%; padding: 18px 16px 18px 48px; border: 1px solid var(--cb-border); border-radius: 16px;
      font-size: 16px; background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--cb-text); outline: none; transition: 0.2s;
    }
    .input-wrapper input:focus { border-color: var(--cb-black); background: var(--cb-white); box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
    }
    
    .btn-submit { width: 100%; padding: 18px; background: var(--cb-black); color: var(--cb-white); border: none;
      border-radius: 30px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 12px; transition: transform 0.2s; display: flex; align-items: center; justify-content: center;
      gap: 8px; }
    .btn-submit:active { transform: scale(0.98);
    }
    
    .auth-footer { margin-top: 32px; text-align: center; font-size: 14px; color: var(--cb-text-muted); font-weight: 500;
    }
    .auth-footer a { color: var(--cb-black); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--cb-black); padding-bottom: 2px;
    }

    .alert { padding: 16px; border-radius: 12px; margin-bottom: 24px; font-size: 14px; font-weight: 600; background: #fef2f2; color: #991b1b;
      border: 1px solid #fecaca; display: none; align-items: center; gap: 8px; }
    .alert.visible { display: flex;
    }

    .ios-modal-overlay { position: fixed; inset: 0;
      background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1000; display: none; opacity: 0; transition: opacity 0.3s;
    }
    .ios-modal-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--cb-white);
      border-radius: 24px 24px 0 0; z-index: 1001; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); padding: 32px 24px;
      padding-bottom: max(32px, env(safe-area-inset-bottom)); text-align: center; }
    .ios-modal-sheet.open { transform: translateY(0);
    }
    .ios-modal-overlay.open { display: block; opacity: 1; }
    .ios-modal-icon { width: 64px; height: 64px;
      background: #f3f4f6; border-radius: 16px; margin: 0 auto 20px auto; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px;
      color: var(--cb-black); }
    .ios-modal-icon img { width: 40px; height: 40px;
    }
    .ios-modal-sheet h3 { font-size: 22px; font-weight: 800; color: var(--cb-black); margin-bottom: 12px; letter-spacing: -0.5px;
    }
    .ios-modal-sheet p { font-size: 16px; color: var(--cb-text-muted); line-height: 1.5; margin-bottom: 24px;
    }
    .ios-steps { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px; text-align: left; margin-bottom: 24px;
    }
    .ios-step { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 15px; font-weight: 600; color: var(--cb-text);
    }
    .ios-step:last-child { margin-bottom: 0; }
    .ios-step svg { color: var(--cb-pink); width: 24px;
      height: 24px; }
    .btn-got-it { background: var(--cb-black); color: var(--cb-white); border: none; width: 100%; padding: 16px; border-radius: 16px;
      font-size: 16px; font-weight: 700; cursor: pointer; }
  </style>
</head>
<body>

  <div class="bg-art"><div class="orb-pink"></div><div class="orb-cyan"></div></div>

  <nav class="nav-header">
    <a href="<?php echo e(route('home')); ?>" class="btn-back"><i data-lucide="arrow-left"></i></a>
  </nav>

  <main class="auth-main">
    
    <h1 class="page-title">Welcome<br>back.</h1>
    <p class="page-subtitle">Enter your details to securely access your account.</p>

    <?php if($errors->any()): ?>
      <div class="alert visible" style="display: flex;">
        <span><?php echo e($errors->first('username')); ?></span>
      </div>
    <?php endif; ?>

    <form method="POST" action="<?php echo e(route('login')); ?>">
      <?php echo csrf_field(); ?>
      <div class="input-group">
        <label>Username</label>
        <div class="input-wrapper">
          <i data-lucide="user"></i>
          <input type="text" name="username" value="<?php echo e(old('username')); ?>" placeholder="Enter username" oninput="this.value = this.value.replace(/\s/g, '')" required autofocus>
        </div>
      </div>
      <div class="input-group">
        <label>Passcode</label>
        <div class="input-wrapper">
          <i data-lucide="lock"></i>
          <input type="password" name="password" placeholder="••••••••" oninput="this.value = this.value.replace(/\s/g, '')" required>
        </div>
      </div>
      <button type="submit" class="btn-submit">Secure Login <i data-lucide="arrow-right" style="width: 18px;"></i></button>
    </form>
    
    <div class="auth-footer">
      New here? <a href="<?php echo e(route('register')); ?>">Open an account</a>
    </div>
  </main>

  <div class="ios-modal-overlay" id="iosModalOverlay" onclick="closeIOSModal()"></div>
  <div class="ios-modal-sheet" id="iosModalSheet">
    <div class="ios-modal-icon">
      <img src="<?php echo e(asset('512/6202/6202860.png')); ?>" alt="App Logo">
    </div>
    <h3>Install App</h3>
    <p>Install this application on your home screen for quick and easy access when you're on the go.</p>
    
    <div class="ios-steps">
      <div class="ios-step">
        <span>1.</span>
        <span>Tap the <strong>Share</strong> button at the bottom of Safari.</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: auto; color: var(--cb-black);"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
      </div>
      <div class="ios-step">
        <span>2.</span>
        <span>Scroll down and select <strong>Add to Home Screen</strong>.</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: auto; color: var(--cb-black);"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
      </div>
    </div>
    
    <button class="btn-got-it" onclick="closeIOSModal()">Got it!</button>
  </div>

  <script>
    lucide.createIcons();

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js'); });
    }

    let deferredPrompt;
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;

    if (!isStandalone) {
      document.querySelectorAll('.pwa-install-btn').forEach(btn => {
        btn.style.display = 'inline-flex';
      });

      window.addEventListener('beforeinstallprompt', (e) => {
        e.preventDefault();
        deferredPrompt = e;
      });
    }

    function triggerInstall() {
      if (isIOS) {
        document.getElementById('iosModalOverlay').classList.add('open');
        setTimeout(() => document.getElementById('iosModalSheet').classList.add('open'), 10);
      } else if (deferredPrompt) {
        deferredPrompt.prompt();
        deferredPrompt.userChoice.then((choiceResult) => {
          deferredPrompt = null;
        });
      } else {
        alert("To install the app on this device, click the 'Install' icon in your browser's URL address bar, or add this page to your home screen.");
      }
    }

    function closeIOSModal() {
      document.getElementById('iosModalSheet').classList.remove('open');
      setTimeout(() => document.getElementById('iosModalOverlay').classList.remove('open'), 300);
    }
  </script>
</body>
</html>
<?php /**PATH C:\Users\chromeworld\Documents\clearb-laravel\resources\views/auth/login.blade.php ENDPATH**/ ?>