107 lines
4.0 KiB
PHP
107 lines
4.0 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
{{-- viewport-fit=cover expone las safe areas del notch/Dynamic Island --}}
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<meta name="color-scheme" content="dark">
|
|
{{-- Apple PWA / standalone --}}
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="Chat">
|
|
<title>Chat en vivo | {{ config('app.name') }}</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* ── Reset iOS/Safari ───────────────────────────────── */
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html {
|
|
/* Altura real del viewport incluyendo safe areas */
|
|
height: -webkit-fill-available;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: #111b21;
|
|
/* Evita el scroll del body — solo scrollea el área de mensajes */
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
/* Altura: dvh con fallback para Safari < 15.4 */
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
height: -webkit-fill-available;
|
|
/* Elimina el tap highlight azul en iOS */
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* Evita el zoom Safari en inputs < 16px */
|
|
input, textarea, select {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
/* Scroll suave tipo nativo en iOS */
|
|
.ios-scroll {
|
|
-webkit-overflow-scrolling: touch;
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
|
|
/* Deshabilitar appearance por defecto en iOS */
|
|
input[type="tel"],
|
|
input[type="text"],
|
|
textarea {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
button {
|
|
-webkit-appearance: none;
|
|
touch-action: manipulation;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Safe area — rellena el notch arriba y el home indicator abajo */
|
|
.safe-top { padding-top: env(safe-area-inset-top, 0px); }
|
|
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
|
|
.safe-left { padding-left: env(safe-area-inset-left, 0px); }
|
|
.safe-right { padding-right: env(safe-area-inset-right, 0px); }
|
|
</style>
|
|
@livewireStyles
|
|
</head>
|
|
<body>
|
|
|
|
<livewire:chat.public-chat />
|
|
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
@livewireScripts
|
|
|
|
<script>
|
|
/**
|
|
* visualViewport API: cuando el teclado iOS aparece, el viewport se reduce.
|
|
* Ajustamos la altura del chat dinámicamente para que el input quede visible.
|
|
*/
|
|
function initViewportFix() {
|
|
const root = document.getElementById('chat-root');
|
|
if (!root || !window.visualViewport) return;
|
|
|
|
const update = () => {
|
|
const h = window.visualViewport.height;
|
|
root.style.height = h + 'px';
|
|
// Scroll al último mensaje al aparecer teclado
|
|
const msgs = document.getElementById('pub-messages');
|
|
if (msgs) setTimeout(() => { msgs.scrollTop = msgs.scrollHeight; }, 50);
|
|
};
|
|
|
|
window.visualViewport.addEventListener('resize', update);
|
|
window.visualViewport.addEventListener('scroll', update);
|
|
update();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initViewportFix);
|
|
document.addEventListener('livewire:load', initViewportFix);
|
|
</script>
|
|
</body>
|
|
</html>
|