Viacheslav/hackaton-web-form
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update form.html

Browse Source
This commit is contained in:
Viacheslav
2025-04-29 13:35:27 +03:00
parent 3db0211914
commit 3de0f34cf0
1 changed files with 7 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
form.html
View File

@@ -1,32 +1,24 @@
<!--
Welcome to Tailwind Play, the official Tailwind CSS playground!
Everything here works just like it does when you're running Tailwind locally
with a real build pipeline. You can customize your theme, use features
like `@utility`, or even add third-party plugins using `@plugin`.
Feel free to play with this example if you're just learning, or trash it and
start from scratch if you know enough to be dangerous. Have fun!
-->
<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="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="col-start-3 row-start-3 flex max-w-lg flex-col p-2">
<div class="rounded-xl bg-white p-10 text-sm/7 text-gray-800 dark:bg-gray-900 dark:text-gray-200"> <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> <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Сообщить о проблеме</h1>
<div class="space-y-6"> <div class="space-y-6">
<p class="leading-5">Чем подробнее вы опишете ситуацию, тем быстрее мы найдём решение</p> <p class="leading-5">Чем подробнее вы опишете ситуацию, тем быстрее мы найдём решение</p>
<form class="space-y-3"> <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 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="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"> <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> <option>Проблемы с доступом/паролями</option>
<option>Не работает оборудование</option> <option>Не работает оборудование</option>
<option>Другое</option> <option>Другое</option>
</select> </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> <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="text-md mb-2 w-full rounded-lg bg-orange-700 px-5 py-2.5 font-bold text-white hover:bg-orange-800 focus:ring-4 focus:ring-orange-300 focus:outline-none dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-900">Отправить</button> <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> </form>
</div> </div>
</div> </div>