a0c67cedc5
Nearly completed the UI spec, but did not start the API spec. Started on the UI implementation using an example from my Potion Gem.
71 lines
2.4 KiB
Plaintext
71 lines
2.4 KiB
Plaintext
<div class="w-full h-full mb-12">
|
|
|
|
<!-- Container: Page -->
|
|
<div class="w-full h-full flex flex-col">
|
|
|
|
<!-- Content: Recipe Creation Form -->
|
|
<main class="w-full min-h-screen p-4">
|
|
|
|
<!-- Section: Heading Banner -->
|
|
<section class="w-full bg-gradient-to-tr from-primary-600 to-primary-500
|
|
text-white text-center px-6 py-10 rounded-lg">
|
|
<h1 class="text-3xl font-extrabold mb-2">
|
|
Create Your Recipe
|
|
</h1>
|
|
<p class="text-lg mt-4">
|
|
Share your culinary masterpieces with the world! Fill out the details below
|
|
to get started.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Section: Recipe Details -->
|
|
<section class="w-full my-8">
|
|
<div class="flex flex-col mb-4">
|
|
<h2 class="text-2xl font-semibold text-white flex items-center">
|
|
Recipe Details
|
|
</h2>
|
|
<p class="text-red-500 text-sm my-1">*Required</p>
|
|
</div>
|
|
|
|
|
|
<!-- Title input -->
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<div>
|
|
<label for="title" class="block font-sm font-medium text-background-100">
|
|
Recipe Title <span class="text-red-500 text-sm my-1">*</span>
|
|
</label>
|
|
|
|
<input
|
|
type="text"
|
|
id="title"
|
|
name="title"
|
|
placeholder="e.g., Avocado Toast"
|
|
class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm
|
|
focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
|
|
maxlength="128"
|
|
required />
|
|
|
|
<!-- Hidden Messages: Valid or Invalid -->
|
|
<div class="hidden items-center text-red-600 text-xs mt-1" id="title-error">
|
|
<svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-12a1 1 0 112 0v4a1 1 0 11-2 0V6zm0 8a1 1 0 102 0 1 1 0 00-2 0z" clip-rule="evenodd"></path></svg>
|
|
Title is required and max 128 characters.
|
|
</div>
|
|
<div class="hidden items-center text-green-600 text-xs mt-1" id="title-valid">
|
|
<svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
|
|
Looks good!
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
</div>
|
|
</div>
|