mirror of
https://github.com/dyzulk/dyzulk-apps.git
synced 2026-01-26 13:22:02 +07:00
pertama commit
This commit is contained in:
dyzulk
302
application/views/Forms.php
Normal file
302
application/views/Forms.php
Normal file
@@ -0,0 +1,302 @@
|
||||
<main class="h-full pb-16 overflow-y-auto">
|
||||
<div class="container px-6 mx-auto grid">
|
||||
<h2
|
||||
class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
Forms
|
||||
</h2>
|
||||
<!-- CTA -->
|
||||
<a
|
||||
class="flex items-center justify-between p-4 mb-8 text-sm font-semibold text-purple-100 bg-purple-600 rounded-lg shadow-md focus:outline-none focus:shadow-outline-purple"
|
||||
href="https://github.com/estevanmaito/windmill-dashboard"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
class="w-5 h-5 mr-2"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Star this project on GitHub</span>
|
||||
</div>
|
||||
<span>View more →</span>
|
||||
</a>
|
||||
|
||||
<!-- General elements -->
|
||||
<h4
|
||||
class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Elements
|
||||
</h4>
|
||||
<div
|
||||
class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
|
||||
>
|
||||
<label class="block text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">Name</span>
|
||||
<input
|
||||
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="mt-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Account Type
|
||||
</span>
|
||||
<div class="mt-2">
|
||||
<label
|
||||
class="inline-flex items-center text-gray-600 dark:text-gray-400"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
class="text-purple-600 form-radio focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
|
||||
name="accountType"
|
||||
value="personal"
|
||||
/>
|
||||
<span class="ml-2">Personal</span>
|
||||
</label>
|
||||
<label
|
||||
class="inline-flex items-center ml-6 text-gray-600 dark:text-gray-400"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
class="text-purple-600 form-radio focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
|
||||
name="accountType"
|
||||
value="busines"
|
||||
/>
|
||||
<span class="ml-2">Business</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="block mt-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Requested Limit
|
||||
</span>
|
||||
<select
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
|
||||
>
|
||||
<option>$1,000</option>
|
||||
<option>$5,000</option>
|
||||
<option>$10,000</option>
|
||||
<option>$25,000</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="block mt-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Multiselect
|
||||
</span>
|
||||
<select
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-multiselect focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
|
||||
multiple
|
||||
>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
<option>Option 4</option>
|
||||
<option>Option 5</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="block mt-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">Message</span>
|
||||
<textarea
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-textarea focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
|
||||
rows="3"
|
||||
placeholder="Enter some long form content."
|
||||
></textarea>
|
||||
</label>
|
||||
|
||||
<div class="flex mt-6 text-sm">
|
||||
<label class="flex items-center dark:text-gray-400">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
|
||||
/>
|
||||
<span class="ml-2">
|
||||
I agree to the
|
||||
<span class="underline">privacy policy</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Validation inputs -->
|
||||
<h4
|
||||
class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Validation
|
||||
</h4>
|
||||
<div
|
||||
class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
|
||||
>
|
||||
<!-- Invalid input -->
|
||||
<label class="block text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Invalid input
|
||||
</span>
|
||||
<input
|
||||
class="block w-full mt-1 text-sm border-red-600 dark:text-gray-300 dark:bg-gray-700 focus:border-red-400 focus:outline-none focus:shadow-outline-red form-input"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
<span class="text-xs text-red-600 dark:text-red-400">
|
||||
Your password is too short.
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<!-- Valid input -->
|
||||
<label class="block mt-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Valid input
|
||||
</span>
|
||||
<input
|
||||
class="block w-full mt-1 text-sm border-green-600 dark:text-gray-300 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green form-input"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
<span class="text-xs text-green-600 dark:text-green-400">
|
||||
Your password is strong.
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<!-- Helper text -->
|
||||
<label class="block mt-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Helper text
|
||||
</span>
|
||||
<input
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">
|
||||
Your password must be at least 6 characters long.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Inputs with icons -->
|
||||
<h4
|
||||
class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Icons
|
||||
</h4>
|
||||
<div
|
||||
class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
|
||||
>
|
||||
<label class="block text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">Icon left</span>
|
||||
<!-- focus-within sets the color for the icon when input is focused -->
|
||||
<div
|
||||
class="relative text-gray-500 focus-within:text-purple-600 dark:focus-within:text-purple-400"
|
||||
>
|
||||
<input
|
||||
class="block w-full pl-10 mt-1 text-sm text-black dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-y-0 flex items-center ml-3 pointer-events-none"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="block mt-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">Icon right</span>
|
||||
<!-- focus-within sets the color for the icon when input is focused -->
|
||||
<div
|
||||
class="relative text-gray-500 focus-within:text-purple-600 dark:focus-within:text-purple-400"
|
||||
>
|
||||
<input
|
||||
class="block w-full pr-10 mt-1 text-sm text-black dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center mr-3 pointer-events-none"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Inputs with buttons -->
|
||||
<h4
|
||||
class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Buttons
|
||||
</h4>
|
||||
<div
|
||||
class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
|
||||
>
|
||||
<label class="block text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Button left
|
||||
</span>
|
||||
<div class="relative">
|
||||
<input
|
||||
class="block w-full pl-20 mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
<button
|
||||
class="absolute inset-y-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-l-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
|
||||
>
|
||||
Click
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="block mt-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Button right
|
||||
</span>
|
||||
<div
|
||||
class="relative text-gray-500 focus-within:text-purple-600"
|
||||
>
|
||||
<input
|
||||
class="block w-full pr-20 mt-1 text-sm text-black dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
<button
|
||||
class="absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-r-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
|
||||
>
|
||||
Click
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user