Files
hackaton-web-form/form.html
2025-04-29 13:35:27 +03:00

27 lines
2.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10">
<div class="col-start-3 row-start-3 flex max-w-lg flex-col p-2">
<div class="rounded-xl p-10 text-sm/7 text-gray-800 bg-gray-50 shadow-sm dark:bg-gray-900 dark:text-gray-200 shadow-orange-500/50 min-h-[550px] flex flex-col justify-center">
<h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Сообщить о проблеме</h1>
<div class="space-y-6">
<p class="leading-5">Чем подробнее вы опишете ситуацию, тем быстрее мы найдём решение</p>
<form class="space-y-3">
<input type="text" id="name" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500" placeholder="Ваше имя *" required />
<input type="text" id="name" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm disabled:text-gray-500 text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500" value="Рабочее место 192.168.0.24" placeholder="Адрес рабочего места *" required disabled="true" />
<select id="countries" class="mt-10 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500">
<option>Выберите тип проблемы *</option>
<option>Ошибка в работе ПО</option>
<option>Проблемы с доступом/паролями</option>
<option>Не работает оборудование</option>
<option>Другое</option>
</select>
<textarea id="message" rows="4" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500" placeholder="Добавьте описание *"></textarea>
<button type="button" class="cursor-pointer duration-300 text-md mb-2 w-full shadow-md hover:scale-103 rounded-lg bg-orange-500 px-5 py-2.5 font-bold text-white focus:outline-none dark:bg-orange-600dark:focus:ring-orange-900">Отправить</button>
</form>
</div>
</div>
</div>
</div>