Skip to content

Instantly share code, notes, and snippets.

@shanerbaner82

shanerbaner82/welcome.blade.php

Created October 24, 2025 02:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shanerbaner82/e88d7138486952936767485598ca34cb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shanerbaner82/e88d7138486952936767485598ca34cb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
welcome.blade.php
<!DOCTYPE html>
<html lang="en" class="bg-red-500">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>TeslaFido</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style>
:root {
/* iOS uses native env(), Android gets these via JavaScript injection */
--inset-top: env(safe-area-inset-top, 0px);
--inset-right: env(safe-area-inset-right, 0px);
--inset-bottom: env(safe-area-inset-bottom, 0px);
--inset-left: env(safe-area-inset-left, 0px);
}
/* Safe area utility classes - injected by native platforms */
.safe-area {
padding-top: var(--inset-top);
padding-right: var(--inset-right);
padding-bottom: var(--inset-bottom);
padding-left: var(--inset-left);
}
</style>
</head>
<body class="relative bg-transparent safe-area">
<div class="bg-gray-200 min-h-screen pb-24 relative ">
<div class="prose">
<div class="mb-4 bg-white text-black p-2 ">
<div class="text-xl">Color Key</div>
<div class="flex items-center gap-4"><div class="font-bold">HTML Background:</div> <div class="w-8 h-3 bg-red-500">&nbsp;</div></div>
<div class="flex items-center gap-4"><div class="font-bold">Body Background:</div> <div class="w-8 h-3 bg-gray-200">&nbsp;</div></div>
<div class="flex items-center gap-4"><div class="font-bold">Button Background:</div> <div class="w-8 h-3 bg-emerald-500">&nbsp;</div></div>
<div class="mt-2 pt-2 border-t">
<div class=" font-bold">Safe Area Debug:</div>
<div class="" id="safe-area-debug"></div>
</div>
</div>
<script>
function updateSafeAreaDebug() {
const root = document.documentElement;
const computed = getComputedStyle(root);
const debug = document.getElementById('safe-area-debug');
if (debug) {
debug.innerHTML = `
Top: ${computed.getPropertyValue('--inset-top')}<br>
Right: ${computed.getPropertyValue('--inset-right')}<br>
Bottom: ${computed.getPropertyValue('--inset-bottom')}<br>
Left: ${computed.getPropertyValue('--inset-left')}
`;
}
}
updateSafeAreaDebug();
setInterval(updateSafeAreaDebug, 1000);
</script>
<div class="p-4">
<p class="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="fixed bottom-0 left-0 right-0" style="padding: 1rem 1rem var(--inset-bottom) 1rem;">
<div class="bg-emerald-500 text-white rounded-xl shadow-2xl mx-4">
<div class="grid grid-cols-4 h-16">
<div class="flex items-center justify-center">1</div>
<div class="flex items-center justify-center">2</div>
<div class="flex items-center justify-center">3</div>
<div class="flex items-center justify-center">4</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment