Open Rodrigit-hub opened 1 week ago
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" />
<link
rel="stylesheet"
as="style"
onload="this.rel='stylesheet'"
href="https://fonts.googleapis.com/css2?display=swap&family=Inter%3Awght%40400%3B500%3B700%3B900&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900"
/>
<title>Galileo Design</title>
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
</head>
<body>
<div class="relative flex size-full min-h-screen flex-col bg-[#111a22] dark group/design-root overflow-x-hidden" style='font-family: Inter, "Noto Sans", sans-serif;'>
<div class="flex items-center bg-[#111a22] p-4 pb-2 justify-between">
<div class="text-white flex size-12 shrink-0 items-center" data-icon="ArrowLeft" data-size="24px" data-weight="regular">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
</svg>
</div>
<h2 class="text-white text-lg font-bold leading-tight tracking-[-0.015em] flex-1 text-center pr-12">Report an incident</h2>
</div>
<div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
<label class="flex flex-col min-w-40 flex-1">
<div class="flex w-full flex-1 items-stretch rounded-xl">
<input
placeholder="Date"
class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-white focus:outline-0 focus:ring-0 border-none bg-[#243647] focus:border-none h-14 placeholder:text-[#93adc8] p-4 rounded-r-none border-r-0 pr-2 text-base font-normal leading-normal"
value=""
/>
<div
class="text-[#93adc8] flex border-none bg-[#243647] items-center justify-center pr-4 rounded-r-xl border-l-0"
data-icon="Calendar"
data-size="24px"
data-weight="regular"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"
></path>
</svg>
</div>
</div>
</label>
</div>
<div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
<label class="flex flex-col min-w-40 flex-1">
<div class="flex w-full flex-1 items-stretch rounded-xl">
<input
placeholder="Time"
class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-white focus:outline-0 focus:ring-0 border-none bg-[#243647] focus:border-none h-14 placeholder:text-[#93adc8] p-4 rounded-r-none border-r-0 pr-2 text-base font-normal leading-normal"
value=""
/>
<div
class="text-[#93adc8] flex border-none bg-[#243647] items-center justify-center pr-4 rounded-r-xl border-l-0"
data-icon="Clock"
data-size="24px"
data-weight="regular"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"
></path>
</svg>
</div>
</div>
</label>
</div>
<div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
<label class="flex flex-col min-w-40 flex-1">
<div class="flex w-full flex-1 items-stretch rounded-xl">
<input
placeholder="Type of incident"
class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-white focus:outline-0 focus:ring-0 border-none bg-[#243647] focus:border-none h-14 placeholder:text-[#93adc8] p-4 rounded-r-none border-r-0 pr-2 text-base font-normal leading-normal"
value=""
/>
<div
class="text-[#93adc8] flex border-none bg-[#243647] items-center justify-center pr-4 rounded-r-xl border-l-0"
data-icon="MagnifyingGlass"
data-size="24px"
data-weight="regular"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
</svg>
</div>
</div>
</label>
</div>
<div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
<label class="flex flex-col min-w-40 flex-1">
<textarea
placeholder="Describe the incident in detail"
class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-white focus:outline-0 focus:ring-0 border-none bg-[#243647] focus:border-none min-h-36 placeholder:text-[#93adc8] p-4 text-base font-normal leading-normal"
></textarea>
</label>
</div>
<div class="flex w-full grow bg-[#111a22] @container py-3">
<div class="w-full gap-1 overflow-hidden bg-[#111a22] @[480px]:gap-2 aspect-[3/2] flex">
<div
class="w-full bg-center bg-no-repeat bg-cover aspect-auto rounded-none flex-1"
style='background-image: url("https://cdn.usegalileo.ai/sdxl10/9c215494-78cc-4015-a10a-3e994083c58f.png");'
></div>
</div>
</div>
<div class="flex items-center gap-4 bg-[#111a22] px-4 min-h-14"><p class="text-white text-base font-normal leading-normal flex-1 truncate">Severity</p></div>
<div class="flex px-4 py-3">
<button
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-12 px-5 flex-1 bg-[#1980e6] text-white text-base font-bold leading-normal tracking-[0.015em]"
>
<span class="truncate">Submit report</span>
</button>
</div>
<div class="h-5 bg-[#111a22]"></div>
</div>
</body>
</html>