48 lines
2.9 KiB
HTML
48 lines
2.9 KiB
HTML
<!-- danger Alert -->
|
|
<div class="relative w-full overflow-hidden rounded-radius border border-danger bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
|
role="alert">
|
|
<div class="flex w-full items-center gap-2 bg-danger/10 p-4">
|
|
<div class="bg-danger/15 text-danger rounded-full p-1" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
|
aria-hidden="true">
|
|
<path fill-rule="evenodd"
|
|
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-2">
|
|
<h3 class="text-sm font-semibold text-danger">Password is not strong</h3>
|
|
<p class="text-xs font-medium sm:text-sm">The password you entered does not meet the requirements. Make sure
|
|
your password:</p>
|
|
<ul class="mt-2 list-inside list-disc pl-2 text-xs font-medium text-danger sm:text-sm">
|
|
<li>has <strong>minimum 8</strong> characters</li>
|
|
<li>includes <strong>both upper and lower </strong> cases</li>
|
|
<li>contains <strong>at least one number</strong></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- info Alert -->
|
|
<div class="relative w-full overflow-hidden rounded-radius border border-info bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
|
role="alert">
|
|
<div class="flex w-full items-center gap-2 bg-info/10 p-4">
|
|
<div class="bg-info/15 text-info rounded-full p-1" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
|
aria-hidden="true">
|
|
<path fill-rule="evenodd"
|
|
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-2">
|
|
<h3 class="text-sm font-semibold text-info">Password Requirements</h3>
|
|
<p class="text-xs font-medium sm:text-sm">In order to keep your account secure, make sure your password:</p>
|
|
<ul class="mt-2 list-inside list-disc pl-2 text-xs font-medium sm:text-sm">
|
|
<li>has <strong>minimum 8</strong> characters</li>
|
|
<li>includes <strong>both upper and lower </strong> cases</li>
|
|
<li>contains <strong>at least one number</strong></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> |