mirror of
https://github.com/twinpath/app-beta.git
synced 2026-01-26 13:51:52 +07:00
first commit
This commit is contained in:
171
resources/views/pages/auth/signin.blade.php
Normal file
171
resources/views/pages/auth/signin.blade.php
Normal file
@@ -0,0 +1,171 @@
|
||||
@extends('layouts.fullscreen-layout')
|
||||
|
||||
@section('content')
|
||||
<div class="relative z-1 bg-white p-6 sm:p-0 dark:bg-gray-900">
|
||||
<div class="relative flex h-screen w-full flex-col justify-center sm:p-0 lg:flex-row dark:bg-gray-900">
|
||||
<!-- Form -->
|
||||
<div class="flex w-full flex-1 flex-col lg:w-1/2">
|
||||
<div class="mx-auto w-full max-w-md pt-10">
|
||||
<a href="/dashboard"
|
||||
class="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
|
||||
<svg class="stroke-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12.7083 5L7.5 10.2083L12.7083 15.4167" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
Back to dashboard
|
||||
</a>
|
||||
</div>
|
||||
<div class="mx-auto flex w-full max-w-md flex-1 flex-col justify-center">
|
||||
<div>
|
||||
<div class="mb-5 sm:mb-8">
|
||||
<h1 class="text-title-sm sm:text-title-md mb-2 font-semibold text-gray-800 dark:text-white/90">
|
||||
Sign In
|
||||
</h1>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Enter your email and password to sign in!
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5">
|
||||
<button onclick="window.location.href = '/auth/google/redirect'"
|
||||
class="inline-flex items-center justify-center gap-3 rounded-lg bg-gray-100 px-7 py-3 text-sm font-normal text-gray-700 transition-colors hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z"
|
||||
fill="#4285F4" />
|
||||
<path
|
||||
d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z"
|
||||
fill="#34A853" />
|
||||
<path
|
||||
d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z"
|
||||
fill="#FBBC05" />
|
||||
<path
|
||||
d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z"
|
||||
fill="#EB4335" />
|
||||
</svg>
|
||||
Sign in with Google
|
||||
</button>
|
||||
<button onclick="window.location.href = '/auth/github/redirect'"
|
||||
class="inline-flex items-center justify-center gap-3 rounded-lg bg-gray-100 px-7 py-3 text-sm font-normal text-gray-700 transition-colors hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
|
||||
<svg width="21" class="fill-current" height="20" viewBox="0 0 21 20"
|
||||
fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15.6705 1.875H18.4272L12.4047 8.75833L19.4897 18.125H13.9422L9.59717 12.4442L4.62554 18.125H1.86721L8.30887 10.7625L1.51221 1.875H7.20054L11.128 7.0675L15.6705 1.875ZM14.703 16.475H16.2305L6.37054 3.43833H4.73137L14.703 16.475Z" />
|
||||
</svg>
|
||||
|
||||
Sign in with GitHub
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative py-3 sm:py-5">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-200 dark:border-gray-800"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm">
|
||||
<span class="bg-white p-2 text-gray-400 sm:px-5 sm:py-2 dark:bg-gray-900">Or</span>
|
||||
</div>
|
||||
</div>
|
||||
<form>
|
||||
<div class="space-y-5">
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Email<span class="text-error-500">*</span>
|
||||
</label>
|
||||
<input type="email" id="email" name="email" placeholder="info@gmail.com"
|
||||
class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30" />
|
||||
</div>
|
||||
<!-- Password -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Password<span class="text-error-500">*</span>
|
||||
</label>
|
||||
<div x-data="{ showPassword: false }" class="relative">
|
||||
<input :type="showPassword ? 'text' : 'password'"
|
||||
placeholder="Enter your password"
|
||||
class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30" />
|
||||
<span @click="showPassword = !showPassword"
|
||||
class="absolute top-1/2 right-4 z-30 -translate-y-1/2 cursor-pointer text-gray-500 dark:text-gray-400">
|
||||
<svg x-show="!showPassword" class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z" fill="#98A2B3" />
|
||||
</svg>
|
||||
<svg x-show="showPassword" class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M4.63803 3.57709C4.34513 3.2842 3.87026 3.2842 3.57737 3.57709C3.28447 3.86999 3.28447 4.34486 3.57737 4.63775L4.85323 5.91362C3.74609 6.84199 2.89363 8.06395 2.4155 9.45936C2.3615 9.61694 2.3615 9.78801 2.41549 9.94558C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C11.255 15.3619 12.4422 15.0737 13.4994 14.5598L15.3625 16.4229C15.6554 16.7158 16.1302 16.7158 16.4231 16.4229C16.716 16.13 16.716 15.6551 16.4231 15.3622L4.63803 3.57709ZM12.3608 13.4212L10.4475 11.5079C10.3061 11.5423 10.1584 11.5606 10.0064 11.5606H9.99151C8.96527 11.5606 8.13333 10.7286 8.13333 9.70237C8.13333 9.5461 8.15262 9.39434 8.18895 9.24933L5.91885 6.97923C5.03505 7.69015 4.34057 8.62704 3.92328 9.70247C4.86803 12.1373 7.23361 13.8619 10.0002 13.8619C10.8326 13.8619 11.6287 13.7058 12.3608 13.4212ZM16.0771 9.70249C15.7843 10.4569 15.3552 11.1432 14.8199 11.7311L15.8813 12.7925C16.6329 11.9813 17.2187 11.0143 17.5849 9.94561C17.6389 9.78803 17.6389 9.61696 17.5849 9.45938C16.5055 6.30925 13.5184 4.04303 10.0002 4.04303C9.13525 4.04303 8.30244 4.17999 7.52218 4.43338L8.75139 5.66259C9.1556 5.58413 9.57311 5.54303 10.0002 5.54303C12.7667 5.54303 15.1323 7.26768 16.0771 9.70249Z"
|
||||
fill="#98A2B3" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Checkbox -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div x-data="{ checkboxToggle: false }">
|
||||
<label for="checkboxLabelOne"
|
||||
class="flex cursor-pointer items-center text-sm font-normal text-gray-700 select-none dark:text-gray-400">
|
||||
<div class="relative">
|
||||
<input type="checkbox" id="checkboxLabelOne" class="sr-only" @change="checkboxToggle = !checkboxToggle" />
|
||||
<div :class="checkboxToggle ? 'border-brand-500 bg-brand-500' :
|
||||
'bg-transparent border-gray-300 dark:border-gray-700'"
|
||||
class="mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px]">
|
||||
<span :class="checkboxToggle ? '' : 'opacity-0'">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
Keep me logged in
|
||||
</label>
|
||||
</div>
|
||||
<a href="/reset-password" class="text-brand-500 hover:text-brand-600 dark:text-brand-400 text-sm">
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
<!-- Button -->
|
||||
<div>
|
||||
<button
|
||||
class="bg-brand-500 shadow-theme-xs hover:bg-brand-600 flex w-full items-center justify-center rounded-lg px-4 py-3 text-sm font-medium text-white transition">
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-5">
|
||||
<p class="text-center text-sm font-normal text-gray-700 sm:text-start dark:text-gray-400">
|
||||
Don't have an account?
|
||||
<a href="/signup" class="text-brand-500 hover:text-brand-600 dark:text-brand-400">Sign Up</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-brand-950 relative hidden h-full w-full items-center lg:grid lg:w-1/2 dark:bg-white/5">
|
||||
<div class="z-1 flex items-center justify-center">
|
||||
<!-- ===== Common Grid Shape Start ===== -->
|
||||
<x-common.common-grid-shape/>
|
||||
<div class="flex max-w-xs flex-col items-center">
|
||||
<a href="/" class="mb-4 block">
|
||||
<img src="./images/logo/auth-logo.svg" alt="Logo" />
|
||||
</a>
|
||||
<p class="text-center text-gray-400 dark:text-white/60">
|
||||
Free and Open-Source Tailwind CSS Admin Dashboard Template
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggler -->
|
||||
<div class="fixed right-6 bottom-6 z-50">
|
||||
<button
|
||||
class="bg-brand-500 hover:bg-brand-600 inline-flex size-14 items-center justify-center rounded-full text-white transition-colors"
|
||||
@click.prevent="$store.theme.toggle()">
|
||||
<svg class="hidden fill-current dark:block" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 1.5415C10.4142 1.5415 10.75 1.87729 10.75 2.2915V3.5415C10.75 3.95572 10.4142 4.2915 9.99998 4.2915C9.58577 4.2915 9.24998 3.95572 9.24998 3.5415V2.2915C9.24998 1.87729 9.58577 1.5415 9.99998 1.5415ZM10.0009 6.79327C8.22978 6.79327 6.79402 8.22904 6.79402 10.0001C6.79402 11.7712 8.22978 13.207 10.0009 13.207C11.772 13.207 13.2078 11.7712 13.2078 10.0001C13.2078 8.22904 11.772 6.79327 10.0009 6.79327ZM5.29402 10.0001C5.29402 7.40061 7.40135 5.29327 10.0009 5.29327C12.6004 5.29327 14.7078 7.40061 14.7078 10.0001C14.7078 12.5997 12.6004 14.707 10.0009 14.707C7.40135 14.707 5.29402 12.5997 5.29402 10.0001ZM15.9813 5.08035C16.2742 4.78746 16.2742 4.31258 15.9813 4.01969C15.6884 3.7268 15.2135 3.7268 14.9207 4.01969L14.0368 4.90357C13.7439 5.19647 13.7439 5.67134 14.0368 5.96423C14.3297 6.25713 14.8045 6.25713 15.0974 5.96423L15.9813 5.08035ZM18.4577 10.0001C18.4577 10.4143 18.1219 10.7501 17.7077 10.7501H16.4577C16.0435 10.7501 15.7077 10.4143 15.7077 10.0001C15.7077 9.58592 16.0435 9.25013 16.4577 9.25013H17.7077C18.1219 9.25013 18.4577 9.58592 18.4577 10.0001ZM14.9207 15.9806C15.2135 16.2735 15.6884 16.2735 15.9813 15.9806C16.2742 15.6877 16.2742 15.2128 15.9813 14.9199L15.0974 14.036C14.8045 13.7431 14.3297 13.7431 14.0368 14.036C13.7439 14.3289 13.7439 14.8038 14.0368 15.0967L14.9207 15.9806ZM9.99998 15.7088C10.4142 15.7088 10.75 16.0445 10.75 16.4588V17.7088C10.75 18.123 10.4142 18.4588 9.99998 18.4588C9.58577 18.4588 9.24998 18.123 9.24998 17.7088V16.4588C9.24998 16.0445 9.58577 15.7088 9.99998 15.7088ZM5.96356 15.0972C6.25646 14.8043 6.25646 14.3295 5.96356 14.0366C5.67067 13.7437 5.1958 13.7437 4.9029 14.0366L4.01902 14.9204C3.72613 15.2133 3.72613 15.6882 4.01902 15.9811C4.31191 16.274 4.78679 16.274 5.07968 15.9811L5.96356 15.0972ZM4.29224 10.0001C4.29224 10.4143 3.95645 10.7501 3.54224 10.7501H2.29224C1.87802 10.7501 1.54224 10.4143 1.54224 10.0001C1.54224 9.58592 1.87802 9.25013 2.29224 9.25013H3.54224C3.95645 9.25013 4.29224 9.58592 4.29224 10.0001ZM4.9029 5.9637C5.1958 6.25659 5.67067 6.25659 5.96356 5.9637C6.25646 5.6708 6.25646 5.19593 5.96356 4.90303L5.07968 4.01915C4.78679 3.72626 4.31191 3.72626 4.01902 4.01915C3.72613 4.31204 3.72613 4.78692 4.01902 5.07981L4.9029 5.9637Z" fill="" />
|
||||
</svg>
|
||||
<svg class="fill-current dark:hidden" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.4547 11.97L18.1799 12.1611C18.265 11.8383 18.1265 11.4982 17.8401 11.3266C17.5538 11.1551 17.1885 11.1934 16.944 11.4207L17.4547 11.97ZM8.0306 2.5459L8.57989 3.05657C8.80718 2.81209 8.84554 2.44682 8.67398 2.16046C8.50243 1.8741 8.16227 1.73559 7.83948 1.82066L8.0306 2.5459ZM12.9154 13.0035C9.64678 13.0035 6.99707 10.3538 6.99707 7.08524H5.49707C5.49707 11.1823 8.81835 14.5035 12.9154 14.5035V13.0035ZM16.944 11.4207C15.8869 12.4035 14.4721 13.0035 12.9154 13.0035V14.5035C14.8657 14.5035 16.6418 13.7499 17.9654 12.5193L16.944 11.4207ZM16.7295 11.7789C15.9437 14.7607 13.2277 16.9586 10.0003 16.9586V18.4586C13.9257 18.4586 17.2249 15.7853 18.1799 12.1611L16.7295 11.7789ZM10.0003 16.9586C6.15734 16.9586 3.04199 13.8433 3.04199 10.0003H1.54199C1.54199 14.6717 5.32892 18.4586 10.0003 18.4586V16.9586ZM3.04199 10.0003C3.04199 6.77289 5.23988 4.05695 8.22173 3.27114L7.83948 1.82066C4.21532 2.77574 1.54199 6.07486 1.54199 10.0003H3.04199ZM6.99707 7.08524C6.99707 5.52854 7.5971 4.11366 8.57989 3.05657L7.48132 2.03522C6.25073 3.35885 5.49707 5.13487 5.49707 7.08524H6.99707Z" fill="" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
181
resources/views/pages/auth/signup.blade.php
Normal file
181
resources/views/pages/auth/signup.blade.php
Normal file
@@ -0,0 +1,181 @@
|
||||
@extends('layouts.fullscreen-layout')
|
||||
|
||||
@section('content')
|
||||
<div class="relative z-1 bg-white p-6 sm:p-0 dark:bg-gray-900">
|
||||
<div class="flex h-screen w-full flex-col justify-center sm:p-0 lg:flex-row dark:bg-gray-900">
|
||||
<!-- Form -->
|
||||
<div class="flex w-full flex-1 flex-col lg:w-1/2">
|
||||
<div class="mx-auto w-full max-w-md pt-5 sm:py-10">
|
||||
<a href="/"
|
||||
class="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
|
||||
<svg class="stroke-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12.7083 5L7.5 10.2083L12.7083 15.4167" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
Back to dashboard
|
||||
</a>
|
||||
</div>
|
||||
<div class="mx-auto flex w-full max-w-md flex-1 flex-col justify-center">
|
||||
<div class="mb-5 sm:mb-8">
|
||||
<h1 class="text-title-sm sm:text-title-md mb-2 font-semibold text-gray-800 dark:text-white/90">
|
||||
Sign Up
|
||||
</h1>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Enter your email and password to sign up!
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5">
|
||||
<button
|
||||
class="inline-flex items-center justify-center gap-3 rounded-lg bg-gray-100 px-7 py-3 text-sm font-normal text-gray-700 transition-colors hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z" fill="#4285F4" />
|
||||
<path d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z" fill="#34A853" />
|
||||
<path d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z" fill="#FBBC05" />
|
||||
<path d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z" fill="#EB4335" />
|
||||
</svg>
|
||||
Sign up with Google
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center justify-center gap-3 rounded-lg bg-gray-100 px-7 py-3 text-sm font-normal text-gray-700 transition-colors hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
|
||||
<svg width="21" class="fill-current" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.6705 1.875H18.4272L12.4047 8.75833L19.4897 18.125H13.9422L9.59717 12.4442L4.62554 18.125H1.86721L8.30887 10.7625L1.51221 1.875H7.20054L11.128 7.0675L15.6705 1.875ZM14.703 16.475H16.2305L6.37054 3.43833H4.73137L14.703 16.475Z" />
|
||||
</svg>
|
||||
|
||||
Sign up with X
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative py-3 sm:py-5">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-200 dark:border-gray-800"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm">
|
||||
<span class="bg-white p-2 text-gray-400 sm:px-5 sm:py-2 dark:bg-gray-900">Or</span>
|
||||
</div>
|
||||
</div>
|
||||
<form>
|
||||
<div class="space-y-5">
|
||||
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
||||
<!-- First Name -->
|
||||
<div class="sm:col-span-1">
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
First Name<span class="text-error-500">*</span>
|
||||
</label>
|
||||
<input type="text" id="fname" name="fname"
|
||||
placeholder="Enter your first name"
|
||||
class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30" />
|
||||
</div>
|
||||
<!-- Last Name -->
|
||||
<div class="sm:col-span-1">
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Last Name<span class="text-error-500">*</span>
|
||||
</label>
|
||||
<input type="text" id="lname" name="lname"
|
||||
placeholder="Enter your last name"
|
||||
class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Email<span class="text-error-500">*</span>
|
||||
</label>
|
||||
<input type="email" id="email" name="email" placeholder="Enter your email"
|
||||
class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30" />
|
||||
</div>
|
||||
<!-- Password -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Password<span class="text-error-500">*</span>
|
||||
</label>
|
||||
<div x-data="{ showPassword: false }" class="relative">
|
||||
<input :type="showPassword ? 'text' : 'password'" placeholder="Enter your password"
|
||||
class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30" />
|
||||
<span @click="showPassword = !showPassword"
|
||||
class="absolute top-1/2 right-4 z-30 -translate-y-1/2 cursor-pointer text-gray-500 dark:text-gray-400">
|
||||
<svg x-show="!showPassword" class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z" fill="#98A2B3" />
|
||||
</svg>
|
||||
<svg x-show="showPassword" class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.63803 3.57709C4.34513 3.2842 3.87026 3.2842 3.57737 3.57709C3.28447 3.86999 3.28447 4.34486 3.57737 4.63775L4.85323 5.91362C3.74609 6.84199 2.89363 8.06395 2.4155 9.45936C2.3615 9.61694 2.3615 9.78801 2.41549 9.94558C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C11.255 15.3619 12.4422 15.0737 13.4994 14.5598L15.3625 16.4229C15.6554 16.7158 16.1302 16.7158 16.4231 16.4229C16.716 16.13 16.716 15.6551 16.4231 15.3622L4.63803 3.57709ZM12.3608 13.4212L10.4475 11.5079C10.3061 11.5423 10.1584 11.5606 10.0064 11.5606H9.99151C8.96527 11.5606 8.13333 10.7286 8.13333 9.70237C8.13333 9.5461 8.15262 9.39434 8.18895 9.24933L5.91885 6.97923C5.03505 7.69015 4.34057 8.62704 3.92328 9.70247C4.86803 12.1373 7.23361 13.8619 10.0002 13.8619C10.8326 13.8619 11.6287 13.7058 12.3608 13.4212ZM16.0771 9.70249C15.7843 10.4569 15.3552 11.1432 14.8199 11.7311L15.8813 12.7925C16.6329 11.9813 17.2187 11.0143 17.5849 9.94561C17.6389 9.78803 17.6389 9.61696 17.5849 9.45938C16.5055 6.30925 13.5184 4.04303 10.0002 4.04303C9.13525 4.04303 8.30244 4.17999 7.52218 4.43338L8.75139 5.66259C9.1556 5.58413 9.57311 5.54303 10.0002 5.54303C12.7667 5.54303 15.1323 7.26768 16.0771 9.70249Z" fill="#98A2B3" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Checkbox -->
|
||||
<div>
|
||||
<div x-data="{ checkboxToggle: false }">
|
||||
<label for="checkboxLabelOne"
|
||||
class="flex cursor-pointer items-start text-sm font-normal text-gray-700 select-none dark:text-gray-400">
|
||||
<div class="relative">
|
||||
<input type="checkbox" id="checkboxLabelOne" class="sr-only" @change="checkboxToggle = !checkboxToggle" />
|
||||
<div :class="checkboxToggle ? 'border-brand-500 bg-brand-500' :
|
||||
'bg-transparent border-gray-300 dark:border-gray-700'"
|
||||
class="mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px]">
|
||||
<span :class="checkboxToggle ? '' : 'opacity-0'">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="inline-block font-normal text-gray-500 dark:text-gray-400">
|
||||
By creating an account means you agree to the
|
||||
<span class="text-gray-800 dark:text-white/90">
|
||||
Terms and Conditions,
|
||||
</span>
|
||||
and our
|
||||
<span class="text-gray-800 dark:text-white">
|
||||
Privacy Policy
|
||||
</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Button -->
|
||||
<div>
|
||||
<button
|
||||
class="bg-brand-500 shadow-theme-xs hover:bg-brand-600 flex w-full items-center justify-center rounded-lg px-4 py-3 text-sm font-medium text-white transition">
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-5">
|
||||
<p class="text-center text-sm font-normal text-gray-700 sm:text-start dark:text-gray-400">
|
||||
Already have an account?
|
||||
<a href="/signin" class="text-brand-500 hover:text-brand-600 dark:text-brand-400">Sign In</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-brand-950 relative hidden h-full w-full items-center lg:grid lg:w-1/2 dark:bg-white/5">
|
||||
<div class="z-1 flex items-center justify-center">
|
||||
<!-- ===== Common Grid Shape Start ===== -->
|
||||
<x-common.common-grid-shape />
|
||||
<div class="flex max-w-xs flex-col items-center">
|
||||
<a href="/" class="mb-4 block">
|
||||
<img src="./images/logo/auth-logo.svg" alt="Logo" />
|
||||
</a>
|
||||
<p class="text-center text-gray-400 dark:text-white/60">
|
||||
Free and Open-Source Tailwind CSS Admin Dashboard Template
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggler -->
|
||||
<div class="fixed right-6 bottom-6 z-50">
|
||||
<button
|
||||
class="bg-brand-500 hover:bg-brand-600 inline-flex size-14 items-center justify-center rounded-full text-white transition-colors"
|
||||
@click.prevent="$store.theme.toggle()">
|
||||
<svg class="hidden fill-current dark:block" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 1.5415C10.4142 1.5415 10.75 1.87729 10.75 2.2915V3.5415C10.75 3.95572 10.4142 4.2915 9.99998 4.2915C9.58577 4.2915 9.24998 3.95572 9.24998 3.5415V2.2915C9.24998 1.87729 9.58577 1.5415 9.99998 1.5415ZM10.0009 6.79327C8.22978 6.79327 6.79402 8.22904 6.79402 10.0001C6.79402 11.7712 8.22978 13.207 10.0009 13.207C11.772 13.207 13.2078 11.7712 13.2078 10.0001C13.2078 8.22904 11.772 6.79327 10.0009 6.79327ZM5.29402 10.0001C5.29402 7.40061 7.40135 5.29327 10.0009 5.29327C12.6004 5.29327 14.7078 7.40061 14.7078 10.0001C14.7078 12.5997 12.6004 14.707 10.0009 14.707C7.40135 14.707 5.29402 12.5997 5.29402 10.0001ZM15.9813 5.08035C16.2742 4.78746 16.2742 4.31258 15.9813 4.01969C15.6884 3.7268 15.2135 3.7268 14.9207 4.01969L14.0368 4.90357C13.7439 5.19647 13.7439 5.67134 14.0368 5.96423C14.3297 6.25713 14.8045 6.25713 15.0974 5.96423L15.9813 5.08035ZM18.4577 10.0001C18.4577 10.4143 18.1219 10.7501 17.7077 10.7501H16.4577C16.0435 10.7501 15.7077 10.4143 15.7077 10.0001C15.7077 9.58592 16.0435 9.25013 16.4577 9.25013H17.7077C18.1219 9.25013 18.4577 9.58592 18.4577 10.0001ZM14.9207 15.9806C15.2135 16.2735 15.6884 16.2735 15.9813 15.9806C16.2742 15.6877 16.2742 15.2128 15.9813 14.9199L15.0974 14.036C14.8045 13.7431 14.3297 13.7431 14.0368 14.036C13.7439 14.3289 13.7439 14.8038 14.0368 15.0967L14.9207 15.9806ZM9.99998 15.7088C10.4142 15.7088 10.75 16.0445 10.75 16.4588V17.7088C10.75 18.123 10.4142 18.4588 9.99998 18.4588C9.58577 18.4588 9.24998 18.123 9.24998 17.7088V16.4588C9.24998 16.0445 9.58577 15.7088 9.99998 15.7088ZM5.96356 15.0972C6.25646 14.8043 6.25646 14.3295 5.96356 14.0366C5.67067 13.7437 5.1958 13.7437 4.9029 14.0366L4.01902 14.9204C3.72613 15.2133 3.72613 15.6882 4.01902 15.9811C4.31191 16.274 4.78679 16.274 5.07968 15.9811L5.96356 15.0972ZM4.29224 10.0001C4.29224 10.4143 3.95645 10.7501 3.54224 10.7501H2.29224C1.87802 10.7501 1.54224 10.4143 1.54224 10.0001C1.54224 9.58592 1.87802 9.25013 2.29224 9.25013H3.54224C3.95645 9.25013 4.29224 9.58592 4.29224 10.0001ZM4.9029 5.9637C5.1958 6.25659 5.67067 6.25659 5.96356 5.9637C6.25646 5.6708 6.25646 5.19593 5.96356 4.90303L5.07968 4.01915C4.78679 3.72626 4.31191 3.72626 4.01902 4.01915C3.72613 4.31204 3.72613 4.78692 4.01902 5.07981L4.9029 5.9637Z" fill="" />
|
||||
</svg>
|
||||
<svg class="fill-current dark:hidden" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.4547 11.97L18.1799 12.1611C18.265 11.8383 18.1265 11.4982 17.8401 11.3266C17.5538 11.1551 17.1885 11.1934 16.944 11.4207L17.4547 11.97ZM8.0306 2.5459L8.57989 3.05657C8.80718 2.81209 8.84554 2.44682 8.67398 2.16046C8.50243 1.8741 8.16227 1.73559 7.83948 1.82066L8.0306 2.5459ZM12.9154 13.0035C9.64678 13.0035 6.99707 10.3538 6.99707 7.08524H5.49707C5.49707 11.1823 8.81835 14.5035 12.9154 14.5035V13.0035ZM16.944 11.4207C15.8869 12.4035 14.4721 13.0035 12.9154 13.0035V14.5035C14.8657 14.5035 16.6418 13.7499 17.9654 12.5193L16.944 11.4207ZM16.7295 11.7789C15.9437 14.7607 13.2277 16.9586 10.0003 16.9586V18.4586C13.9257 18.4586 17.2249 15.7853 18.1799 12.1611L16.7295 11.7789ZM10.0003 16.9586C6.15734 16.9586 3.04199 13.8433 3.04199 10.0003H1.54199C1.54199 14.6717 5.32892 18.4586 10.0003 18.4586V16.9586ZM3.04199 10.0003C3.04199 6.77289 5.23988 4.05695 8.22173 3.27114L7.83948 1.82066C4.21532 2.77574 1.54199 6.07486 1.54199 10.0003H3.04199ZM6.99707 7.08524C6.99707 5.52854 7.5971 4.11366 8.57989 3.05657L7.48132 2.03522C6.25073 3.35885 5.49707 5.13487 5.49707 7.08524H6.99707Z" fill="" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
17
resources/views/pages/blank.blade.php
Normal file
17
resources/views/pages/blank.blade.php
Normal file
@@ -0,0 +1,17 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<x-common.page-breadcrumb pageTitle="Blank Page" />
|
||||
<div class="min-h-screen rounded-2xl border border-gray-200 bg-white px-5 py-7 dark:border-gray-800 dark:bg-white/[0.03] xl:px-10 xl:py-12">
|
||||
<div class="mx-auto w-full max-w-[630px] text-center">
|
||||
<h3 class="mb-4 font-semibold text-gray-800 text-theme-xl dark:text-white/90 sm:text-2xl">
|
||||
Card Title Here
|
||||
</h3>
|
||||
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 sm:text-base">
|
||||
Start putting content on grids or panels, you can also use different combinations of
|
||||
grids.Please check out the dashboard and other pages
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
6
resources/views/pages/calender.blade.php
Normal file
6
resources/views/pages/calender.blade.php
Normal file
@@ -0,0 +1,6 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<x-common.page-breadcrumb pageTitle="Calender" />
|
||||
<x-calender-area />
|
||||
@endsection
|
||||
22
resources/views/pages/chart/bar-chart.blade.php
Normal file
22
resources/views/pages/chart/bar-chart.blade.php
Normal file
@@ -0,0 +1,22 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<x-common.page-breadcrumb pageTitle="Bar chart" />
|
||||
<div class="space-y-6">
|
||||
<x-common.component-card title="Bar chart 1">
|
||||
<!-- ====== Bar Chart One Start -->
|
||||
<div class="custom-scrollbar max-w-full overflow-x-auto">
|
||||
<div id="chartOne" class="min-w-[1000px]"></div>
|
||||
</div>
|
||||
<!-- ====== Bar Chart One End -->
|
||||
</x-common.component-card>
|
||||
|
||||
<x-common.component-card title="Bar chart 2">
|
||||
<!-- ====== Bar Chart Two Start -->
|
||||
<div class="custom-scrollbar max-w-full overflow-x-auto">
|
||||
<div id="chartSix" class="min-w-[1000px]"></div>
|
||||
</div>
|
||||
<!-- ====== Bar Chart Two End -->
|
||||
</x-common.component-card>
|
||||
</div>
|
||||
@endsection
|
||||
30
resources/views/pages/chart/line-chart.blade.php
Normal file
30
resources/views/pages/chart/line-chart.blade.php
Normal file
@@ -0,0 +1,30 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<x-common.page-breadcrumb pageTitle="Line chart" />
|
||||
<div class="space-y-6">
|
||||
<x-common.component-card title="Line chart 1">
|
||||
<!-- ====== Line Chart One Start -->
|
||||
<div class="custom-scrollbar max-w-full overflow-x-auto">
|
||||
<div id="chartThree" class="min-w-[1000px]"></div>
|
||||
</div>
|
||||
<!-- ====== Line Chart One End -->
|
||||
</x-common.component-card>
|
||||
|
||||
<x-common.component-card title="Line chart 2">
|
||||
<!-- ====== Line Chart Two Start -->
|
||||
<div class="custom-scrollbar max-w-full overflow-x-auto">
|
||||
<div id="chartEight" class="min-w-[1000px]"></div>
|
||||
</div>
|
||||
<!-- ====== Line Chart Two End -->
|
||||
</x-common.component-card>
|
||||
|
||||
<x-common.component-card title="Line chart 3">
|
||||
<!-- ====== Line Chart Three Start -->
|
||||
<div class="custom-scrollbar max-w-full overflow-x-auto">
|
||||
<div id="chartThirteen" class="min-w-[1000px]"></div>
|
||||
</div>
|
||||
<!-- ====== Line Chart Three End -->
|
||||
</x-common.component-card>
|
||||
</div>
|
||||
@endsection
|
||||
25
resources/views/pages/dashboard.blade.php
Normal file
25
resources/views/pages/dashboard.blade.php
Normal file
@@ -0,0 +1,25 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div class="grid grid-cols-12 gap-4 md:gap-6">
|
||||
<div class="col-span-12 space-y-6 xl:col-span-7">
|
||||
<x-ecommerce.ecommerce-metrics />
|
||||
<x-ecommerce.monthly-sale />
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-5">
|
||||
<x-ecommerce.monthly-target />
|
||||
</div>
|
||||
|
||||
<div class="col-span-12">
|
||||
<x-ecommerce.statistics-chart />
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 xl:col-span-5">
|
||||
<x-ecommerce.customer-demographic />
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 xl:col-span-7">
|
||||
<x-ecommerce.recent-orders />
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
33
resources/views/pages/errors/error-404.blade.php
Normal file
33
resources/views/pages/errors/error-404.blade.php
Normal file
@@ -0,0 +1,33 @@
|
||||
@extends('layouts.fullscreen-layout')
|
||||
|
||||
@section('content')
|
||||
@php
|
||||
$currentYear = date('Y');
|
||||
@endphp
|
||||
<div class="relative flex flex-col items-center justify-center min-h-screen p-6 overflow-hidden z-1">
|
||||
{{-- common grid shape --}}
|
||||
<x-common.common-grid-shape />
|
||||
<!-- Centered Content -->
|
||||
<div class="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
|
||||
<h1 class="mb-8 font-bold text-gray-800 text-title-md dark:text-white/90 xl:text-title-2xl">
|
||||
ERROR
|
||||
</h1>
|
||||
|
||||
<img src="/images/error/404.svg" alt="404" class="dark:hidden" />
|
||||
<img src="/images/error/404-dark.svg" alt="404" class="hidden dark:block" />
|
||||
|
||||
<p class="mt-10 mb-6 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
|
||||
We can't seem to find the page you are looking for!
|
||||
</p>
|
||||
|
||||
<a href="/"
|
||||
class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
|
||||
Back to Home Page
|
||||
</a>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<p class="absolute text-sm text-center text-gray-500 -translate-x-1/2 bottom-6 left-1/2 dark:text-gray-400">
|
||||
© {{ $currentYear }} - {{ config('app.name') }}
|
||||
</p>
|
||||
</div>
|
||||
@endsection
|
||||
21
resources/views/pages/form/form-elements.blade.php
Normal file
21
resources/views/pages/form/form-elements.blade.php
Normal file
@@ -0,0 +1,21 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<x-common.page-breadcrumb pageTitle="From Elements" />
|
||||
<div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
|
||||
<div class="space-y-6">
|
||||
<x-form.form-elements.default-inputs />
|
||||
<x-form.form-elements.select-inputs />
|
||||
<x-form.form-elements.text-area-inputs />
|
||||
<x-form.form-elements.input-states />
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<x-form.form-elements.input-group />
|
||||
<x-form.form-elements.file-input-example />
|
||||
<x-form.form-elements.checkbox-component />
|
||||
<x-form.form-elements.radio-buttons />
|
||||
<x-form.form-elements.toggle-switch />
|
||||
<x-form.form-elements.dropzone />
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
11
resources/views/pages/profile.blade.php
Normal file
11
resources/views/pages/profile.blade.php
Normal file
@@ -0,0 +1,11 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<x-common.page-breadcrumb pageTitle="User Profile" />
|
||||
<div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
|
||||
<h3 class="mb-5 text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-7">Profile</h3>
|
||||
<x-profile.profile-card />
|
||||
<x-profile.personal-info-card />
|
||||
<x-profile.address-card />
|
||||
</div>
|
||||
@endsection
|
||||
22
resources/views/pages/tables/basic-tables.blade.php
Normal file
22
resources/views/pages/tables/basic-tables.blade.php
Normal file
@@ -0,0 +1,22 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<x-common.page-breadcrumb pageTitle="From Elements" />
|
||||
<div class="space-y-6">
|
||||
<x-common.component-card title="Basic Table 1">
|
||||
<x-tables.basic-tables.basic-tables-one />
|
||||
</x-common.component-card>
|
||||
<x-common.component-card title="Basic Table 2">
|
||||
<x-tables.basic-tables.basic-tables-two />
|
||||
</x-common.component-card>
|
||||
<x-common.component-card title="Basic Table 3">
|
||||
<x-tables.basic-tables.basic-tables-three />
|
||||
</x-common.component-card>
|
||||
<x-common.component-card title="Basic Table 4">
|
||||
<x-tables.basic-tables.basic-tables-four />
|
||||
</x-common.component-card>
|
||||
<x-common.component-card title="Basic Table 5">
|
||||
<x-tables.basic-tables.basic-tables-five />
|
||||
</x-common.component-card>
|
||||
</div>
|
||||
@endsection
|
||||
174
resources/views/pages/ui-elements/alerts.blade.php
Normal file
174
resources/views/pages/ui-elements/alerts.blade.php
Normal file
@@ -0,0 +1,174 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<x-common.page-breadcrumb pageTitle="Alerts" />
|
||||
|
||||
<div class="space-y-5 sm:space-y-6">
|
||||
{{-- Success Alert --}}
|
||||
<x-common.component-card title="Success Alert">
|
||||
<div class="space-y-4">
|
||||
<x-ui.alert
|
||||
variant="success"
|
||||
title="Success Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="true"
|
||||
linkHref="/"
|
||||
linkText="Learn more"
|
||||
/>
|
||||
|
||||
<x-ui.alert
|
||||
variant="success"
|
||||
title="Success Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="false"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Warning Alert --}}
|
||||
<x-common.component-card title="Warning Alert">
|
||||
<div class="space-y-4">
|
||||
<x-ui.alert
|
||||
variant="warning"
|
||||
title="Warning Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="true"
|
||||
linkHref="/"
|
||||
linkText="Learn more"
|
||||
/>
|
||||
|
||||
<x-ui.alert
|
||||
variant="warning"
|
||||
title="Warning Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="false"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Error Alert --}}
|
||||
<x-common.component-card title="Error Alert">
|
||||
<div class="space-y-4">
|
||||
<x-ui.alert
|
||||
variant="error"
|
||||
title="Error Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="true"
|
||||
linkHref="/"
|
||||
linkText="Learn more"
|
||||
/>
|
||||
|
||||
<x-ui.alert
|
||||
variant="error"
|
||||
title="Error Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="false"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Info Alert --}}
|
||||
<x-common.component-card title="Info Alert">
|
||||
<div class="space-y-4">
|
||||
<x-ui.alert
|
||||
variant="info"
|
||||
title="Info Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="true"
|
||||
linkHref="/"
|
||||
linkText="Learn more"
|
||||
/>
|
||||
|
||||
<x-ui.alert
|
||||
variant="info"
|
||||
title="Info Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="false"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Additional Examples --}}
|
||||
<x-common.component-card title="Alert Variations">
|
||||
<div class="space-y-4">
|
||||
{{-- With Slot Content --}}
|
||||
<x-ui.alert variant="success" title="Custom Content Alert">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
This alert uses <strong class="text-gray-900 dark:text-white">custom slot content</strong>
|
||||
instead of the message prop.
|
||||
</p>
|
||||
<ul class="mt-2 text-sm text-gray-500 dark:text-gray-400 list-disc list-inside">
|
||||
<li>You can add any HTML content</li>
|
||||
<li>Including lists and formatting</li>
|
||||
<li>Perfect for complex messages</li>
|
||||
</ul>
|
||||
</x-alert>
|
||||
|
||||
{{-- Minimal Alert --}}
|
||||
<x-ui.alert
|
||||
variant="info"
|
||||
title="Quick Info"
|
||||
message="Sometimes you just need a simple message."
|
||||
/>
|
||||
|
||||
{{-- Alert with Long Message --}}
|
||||
<x-ui.alert
|
||||
variant="warning"
|
||||
title="Important Notice"
|
||||
message="This is a longer message that provides more detailed information about the warning. You should read this carefully before proceeding with your action."
|
||||
:showLink="true"
|
||||
linkHref="/docs"
|
||||
linkText="View documentation"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Interactive Demo --}}
|
||||
<x-common.component-card title="Real-World Examples">
|
||||
<div class="space-y-4">
|
||||
{{-- Payment Success --}}
|
||||
<x-ui.alert variant="success" title="Payment Successful">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
Your payment of <strong class="text-gray-900 dark:text-white">$99.00</strong> has been processed successfully.
|
||||
</p>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p><strong>Order ID:</strong> #TAILADMIN-0014</p>
|
||||
<p><strong>Transaction ID:</strong> TXN-1234567890</p>
|
||||
</div>
|
||||
<a href="/orders" class="inline-block mt-3 text-sm font-medium text-green-600 dark:text-green-400 underline hover:text-green-700">
|
||||
View Order Details
|
||||
</a>
|
||||
</x-alert>
|
||||
|
||||
{{-- Account Warning --}}
|
||||
<x-ui.alert
|
||||
variant="warning"
|
||||
title="Your trial is ending soon"
|
||||
message="Your 14-day trial will expire in 3 days. Upgrade now to continue using all features."
|
||||
:showLink="true"
|
||||
linkHref="/billing"
|
||||
linkText="Upgrade now"
|
||||
/>
|
||||
|
||||
{{-- Validation Error --}}
|
||||
<x-ui.alert variant="error" title="Form Validation Failed">
|
||||
<ul class="text-sm text-gray-500 dark:text-gray-400 list-disc list-inside space-y-1">
|
||||
<li>Email field is required</li>
|
||||
<li>Password must be at least 8 characters</li>
|
||||
<li>Please accept the terms and conditions</li>
|
||||
</ul>
|
||||
</x-alert>
|
||||
|
||||
{{-- System Info --}}
|
||||
<x-ui.alert
|
||||
variant="info"
|
||||
title="Scheduled Maintenance"
|
||||
message="Our system will undergo maintenance on November 15, 2025 from 2:00 AM to 4:00 AM EST. Some features may be unavailable during this time."
|
||||
:showLink="true"
|
||||
linkHref="/status"
|
||||
linkText="Check status page"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
</div>
|
||||
@endsection
|
||||
63
resources/views/pages/ui-elements/avatars.blade.php
Normal file
63
resources/views/pages/ui-elements/avatars.blade.php
Normal file
@@ -0,0 +1,63 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<x-common.page-breadcrumb pageTitle="Avatars" />
|
||||
|
||||
@php
|
||||
$avatarSrc = asset('images/user/user-01.jpg');
|
||||
$sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'];
|
||||
@endphp
|
||||
|
||||
<div class="space-y-5 sm:space-y-6">
|
||||
{{-- Default Avatar --}}
|
||||
<x-common.component-card title="Default Avatar">
|
||||
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
|
||||
@foreach($sizes as $size)
|
||||
<x-ui.avatar
|
||||
:src="$avatarSrc"
|
||||
:size="$size"
|
||||
/>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Avatar with Online Indicator --}}
|
||||
<x-common.component-card title="Avatar with online indicator">
|
||||
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
|
||||
@foreach($sizes as $size)
|
||||
<x-ui.avatar
|
||||
:src="$avatarSrc"
|
||||
:size="$size"
|
||||
status="online"
|
||||
/>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Avatar with Offline Indicator --}}
|
||||
<x-common.component-card title="Avatar with Offline indicator">
|
||||
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
|
||||
@foreach($sizes as $size)
|
||||
<x-ui.avatar
|
||||
:src="$avatarSrc"
|
||||
:size="$size"
|
||||
status="offline"
|
||||
/>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Avatar with Busy Indicator --}}
|
||||
<x-common.component-card title="Avatar with busy indicator">
|
||||
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
|
||||
@foreach($sizes as $size)
|
||||
<x-ui.avatar
|
||||
:src="$avatarSrc"
|
||||
:size="$size"
|
||||
status="busy"
|
||||
/>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
</div>
|
||||
@endsection
|
||||
76
resources/views/pages/ui-elements/badges.blade.php
Normal file
76
resources/views/pages/ui-elements/badges.blade.php
Normal file
@@ -0,0 +1,76 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<x-common.page-breadcrumb pageTitle="Badges" />
|
||||
|
||||
@php
|
||||
use Illuminate\Support\HtmlString;
|
||||
$colors = ['primary', 'success', 'error', 'warning', 'info', 'light', 'dark'];
|
||||
|
||||
$plusIcon = new HtmlString('<svg class="fill-current" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z" fill=""></path>
|
||||
</svg>');
|
||||
@endphp
|
||||
|
||||
<div class="space-y-5 sm:space-y-6">
|
||||
<x-common.component-card title="With Light Background">
|
||||
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
@foreach ($colors as $color)
|
||||
<x-ui.badge :color="$color">
|
||||
{{ $color }}
|
||||
</x-ui.badge>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
<x-common.component-card title="With Solid Background">
|
||||
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
@foreach ($colors as $color)
|
||||
<x-ui.badge :color="$color" variant="solid">
|
||||
{{ $color }}
|
||||
</x-ui.badge>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
<x-common.component-card title="Light Background with Left Icon">
|
||||
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
@foreach ($colors as $color)
|
||||
<x-ui.badge :color="$color" :startIcon="$plusIcon">
|
||||
{{ $color }}
|
||||
</x-ui.badge>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
<x-common.component-card title="Solid Background with Left Icon">
|
||||
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
@foreach ($colors as $color)
|
||||
<x-ui.badge :color="$color" variant="solid" :startIcon="$plusIcon">
|
||||
{{ $color }}
|
||||
</x-ui.badge>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
<x-common.component-card title="Light Background with Right Icon">
|
||||
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
@foreach ($colors as $color)
|
||||
<x-ui.badge :color="$color" :endIcon="$plusIcon">
|
||||
{{ $color }}
|
||||
</x-ui.badge>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
<x-common.component-card title="Solid Background with Right Icon">
|
||||
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
@foreach ($colors as $color)
|
||||
<x-ui.badge :color="$color" variant="solid" :endIcon="$plusIcon">
|
||||
{{ $color }}
|
||||
</x-ui.badge>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
</div>
|
||||
@endsection
|
||||
77
resources/views/pages/ui-elements/buttons.blade.php
Normal file
77
resources/views/pages/ui-elements/buttons.blade.php
Normal file
@@ -0,0 +1,77 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@php
|
||||
use Illuminate\Support\HtmlString;
|
||||
|
||||
// Page title
|
||||
$currentPageTitle = 'Buttons';
|
||||
|
||||
// Define BoxIcon once as an HtmlString (so it won’t get escaped)
|
||||
$BoxIcon = new HtmlString('
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M9.77692 3.24224C9.91768 3.17186 10.0834 3.17186 10.2241 3.24224L15.3713 5.81573L10.3359 8.33331C10.1248 8.43888 9.87626 8.43888 9.66512 8.33331L4.6298 5.81573L9.77692 3.24224ZM3.70264 7.0292V13.4124C3.70264 13.6018 3.80964 13.775 3.97903 13.8597L9.25016 16.4952L9.25016 9.7837C9.16327 9.75296 9.07782 9.71671 8.99432 9.67496L3.70264 7.0292ZM10.7502 16.4955V9.78396C10.8373 9.75316 10.923 9.71683 11.0067 9.67496L16.2984 7.0292V13.4124C16.2984 13.6018 16.1914 13.775 16.022 13.8597L10.7502 16.4955ZM9.41463 17.4831L9.10612 18.1002C9.66916 18.3817 10.3319 18.3817 10.8949 18.1002L16.6928 15.2013C17.3704 14.8625 17.7984 14.17 17.7984 13.4124V6.58831C17.7984 5.83076 17.3704 5.13823 16.6928 4.79945L10.8949 1.90059C10.3319 1.61908 9.66916 1.61907 9.10612 1.90059L9.44152 2.57141L9.10612 1.90059L3.30823 4.79945C2.63065 5.13823 2.20264 5.83076 2.20264 6.58831V13.4124C2.20264 14.17 2.63065 14.8625 3.30823 15.2013L9.10612 18.1002L9.41463 17.4831Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
');
|
||||
@endphp
|
||||
|
||||
@section('content')
|
||||
{{-- Page Breadcrumb --}}
|
||||
<x-common.page-breadcrumb :pageTitle="$currentPageTitle" />
|
||||
|
||||
<div class="space-y-5 sm:space-y-6">
|
||||
|
||||
{{-- Primary Buttons --}}
|
||||
<x-common.component-card title="Primary Button">
|
||||
<div class="flex items-center gap-5">
|
||||
<x-ui.button size="sm" variant="primary">Button Text</x-ui.button>
|
||||
<x-ui.button size="md" variant="primary">Button Text</x-ui.button>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Primary Button with Left Icon --}}
|
||||
<x-common.component-card title="Primary Button with Left Icon">
|
||||
<div class="flex items-center gap-5">
|
||||
<x-ui.button size="sm" variant="primary" :startIcon="$BoxIcon">Button Text</x-ui.button>
|
||||
<x-ui.button size="md" variant="primary" :startIcon="$BoxIcon">Button Text</x-ui.button>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Primary Button with Right Icon --}}
|
||||
<x-common.component-card title="Primary Button with Right Icon">
|
||||
<div class="flex items-center gap-5">
|
||||
<x-ui.button size="sm" variant="primary" :endIcon="$BoxIcon">Button Text</x-ui.button>
|
||||
<x-ui.button size="md" variant="primary" :endIcon="$BoxIcon">Button Text</x-ui.button>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Outline Buttons --}}
|
||||
<x-common.component-card title="Outline Button">
|
||||
<div class="flex items-center gap-5">
|
||||
<x-ui.button size="sm" variant="outline">Button Text</x-ui.button>
|
||||
<x-ui.button size="md" variant="outline">Button Text</x-ui.button>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Outline Button with Left Icon --}}
|
||||
<x-common.component-card title="Outline Button with Left Icon">
|
||||
<div class="flex items-center gap-5">
|
||||
<x-ui.button size="sm" variant="outline" :startIcon="$BoxIcon">Button Text</x-ui.button>
|
||||
<x-ui.button size="md" variant="outline" :startIcon="$BoxIcon">Button Text</x-ui.button>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Outline Button with Right Icon --}}
|
||||
<x-common.component-card title="Outline Button with Right Icon">
|
||||
<div class="flex items-center gap-5">
|
||||
<x-ui.button size="sm" variant="outline" :endIcon="$BoxIcon">Button Text</x-ui.button>
|
||||
<x-ui.button size="md" variant="outline" :endIcon="$BoxIcon">Button Text</x-ui.button>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
62
resources/views/pages/ui-elements/images.blade.php
Normal file
62
resources/views/pages/ui-elements/images.blade.php
Normal file
@@ -0,0 +1,62 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@php
|
||||
$images = [
|
||||
[
|
||||
'src' => asset('images/grid-image/image-04.png'),
|
||||
'alt' => 'Grid image 1',
|
||||
],
|
||||
[
|
||||
'src' => asset('images/grid-image/image-05.png'),
|
||||
'alt' => 'Grid image 2',
|
||||
],
|
||||
[
|
||||
'src' => asset('images/grid-image/image-06.png'),
|
||||
'alt' => 'Grid image 3',
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
@section('content')
|
||||
{{-- Page Breadcrumb --}}
|
||||
<x-common.page-breadcrumb pageTitle="Images" />
|
||||
|
||||
<div class="space-y-5 sm:space-y-6">
|
||||
|
||||
<x-common.component-card title="Responsive Image">
|
||||
<div class="relative">
|
||||
<div id="pane" class="overflow-hidden">
|
||||
<img src="{{ asset('images/grid-image/image-01.png') }}" alt="Cover"
|
||||
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
|
||||
</div>
|
||||
<div id="ghostpane" class="absolute top-0 left-0 duration-300 ease-in-out"></div>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
<x-common.component-card title="Image in 2 Grid">
|
||||
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
||||
<div>
|
||||
<img src="{{ asset('images/grid-image/image-02.png') }}" alt="grid"
|
||||
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="{{ asset('images/grid-image/image-03.png') }}" alt="grid"
|
||||
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
|
||||
</div>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
<x-common.component-card title="Image in 3 Grid">
|
||||
<div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
|
||||
@foreach ($images as $image)
|
||||
<div>
|
||||
<img src="{{ $image['src'] }}" alt="{{ $image['alt'] }}"
|
||||
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
30
resources/views/pages/ui-elements/videos.blade.php
Normal file
30
resources/views/pages/ui-elements/videos.blade.php
Normal file
@@ -0,0 +1,30 @@
|
||||
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
{{-- Page Breadcrumb --}}
|
||||
<x-common.page-breadcrumb pageTitle="Videos" />
|
||||
|
||||
<div class="grid grid-cols-1 gap-5 sm:gap-6 xl:grid-cols-2">
|
||||
|
||||
<div class="space-y-5 sm:space-y-6">
|
||||
<x-common.component-card title="Video Ratio 16:9">
|
||||
<x-ui.youtube-embed videoId="dQw4w9WgXcQ" />
|
||||
</x-common.component-card>
|
||||
|
||||
<x-common.component-card title="Video Ratio 4:3">
|
||||
<x-ui.youtube-embed videoId="dQw4w9WgXcQ" aspectRatio="4:3" />
|
||||
</x-common.component-card>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5 sm:space-y-6">
|
||||
<x-common.component-card title="Video Ratio 21:9">
|
||||
<x-ui.youtube-embed videoId="dQw4w9WgXcQ" aspectRatio="21:9" />
|
||||
</x-common.component-card>
|
||||
<x-common.component-card title="Video Ratio 1:1">
|
||||
<x-ui.youtube-embed videoId="dQw4w9WgXcQ" aspectRatio="1:1" />
|
||||
</x-common.component-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user