202 lines
13 KiB
PHP
202 lines
13 KiB
PHP
<!doctype html>
|
|
<html lang="en" class="h-full bg-gray-100">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>AuditionAdmin</title>
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
</head>
|
|
<body class="h-full">
|
|
|
|
<!--
|
|
This example requires updating your template:
|
|
|
|
```
|
|
<html class="h-full bg-gray-100">
|
|
<body class="h-full">
|
|
```
|
|
-->
|
|
<div class="min-h-full">
|
|
<nav class="bg-indigo-600"
|
|
x-data="{
|
|
mobile_menu_open: false
|
|
}"
|
|
x-id="['mobile-dropdown']"
|
|
>
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div class="flex h-16 items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="h-8 w-8" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=300" alt="Your Company">
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<div class="ml-10 flex items-baseline space-x-4">
|
|
<!-- Current: "bg-indigo-700 text-white", Default: "text-white hover:bg-indigo-500 hover:bg-opacity-75" -->
|
|
<a href="#" class="bg-indigo-700 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">Dashboard</a>
|
|
<a href="#" class="text-white hover:bg-indigo-500 hover:bg-opacity-75 rounded-md px-3 py-2 text-sm font-medium">Team</a>
|
|
<a href="#" class="text-white hover:bg-indigo-500 hover:bg-opacity-75 rounded-md px-3 py-2 text-sm font-medium">Projects</a>
|
|
<a href="#" class="text-white hover:bg-indigo-500 hover:bg-opacity-75 rounded-md px-3 py-2 text-sm font-medium">Calendar</a>
|
|
<a href="#" class="text-white hover:bg-indigo-500 hover:bg-opacity-75 rounded-md px-3 py-2 text-sm font-medium">Reports</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<div class="ml-4 flex items-center md:ml-6">
|
|
<button type="button" class="relative rounded-full bg-indigo-600 p-1 text-indigo-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
|
|
<span class="absolute -inset-1.5"></span>
|
|
<span class="sr-only">View notifications</span>
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Profile dropdown -->
|
|
<div
|
|
x-data="{
|
|
open: false,
|
|
toggle() {
|
|
this.open = this.open ? this.close() : true
|
|
},
|
|
close() {
|
|
this.open = false
|
|
}
|
|
|
|
}"
|
|
x-id="['profile-dropdown']"
|
|
class="relative ml-3"
|
|
>
|
|
<div>
|
|
<button type="button"
|
|
@click="toggle()"
|
|
class="relative flex max-w-xs items-center rounded-full bg-indigo-600 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
|
|
id="user-menu-button"
|
|
:aria-expanded="open"
|
|
:aria-controls="$id('profile-dropdown')"
|
|
aria-haspopup="true">
|
|
<span class="absolute -inset-1.5"></span>
|
|
<span class="sr-only">Open user menu</span>
|
|
<img class="h-8 w-8 rounded-full"
|
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt="">
|
|
</button>
|
|
</div>
|
|
|
|
<!--
|
|
Dropdown menu, show/hide based on menu state.
|
|
|
|
Entering: "transition ease-out duration-100"
|
|
From: "transform opacity-0 scale-95"
|
|
To: "transform opacity-100 scale-100"
|
|
Leaving: "transition ease-in duration-75"
|
|
From: "transform opacity-100 scale-100"
|
|
To: "transform opacity-0 scale-95"
|
|
-->
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="transform opacity-0 scale-95"
|
|
x-transition:enter-end="transform opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="transform opacity-100 scale-100"
|
|
x-transition:leave-end="transform opacity-0 scale-95"
|
|
@click.outside="close()"
|
|
:id="$id('profile-dropdown')"
|
|
style="display: none;"
|
|
class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
|
role="menu"
|
|
aria-orientation="vertical"
|
|
aria-labelledby="user-menu-button"
|
|
tabindex="-1">
|
|
<!-- Active: "bg-gray-100", Not Active: "" -->
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1"
|
|
id="user-menu-item-0">Your Profile</a>
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1"
|
|
id="user-menu-item-1">Settings</a>
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1"
|
|
id="user-menu-item-2">Sign out</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="-mr-2 flex md:hidden">
|
|
<!-- Mobile menu button -->
|
|
<button type="button"
|
|
@click="mobile_menu_open = ! mobile_menu_open"
|
|
class="relative inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
|
|
:aria-controls="$id('mobile-dropdown')"
|
|
:aria-expanded="mobile_menu_open">
|
|
<span class="absolute -inset-0.5"></span>
|
|
<span class="sr-only">Open main menu</span>
|
|
<!-- Menu open: "hidden", Menu closed: "block" -->
|
|
<svg class=" h-6 w-6" :class="mobile_menu_open ? 'hidden' : 'block'" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
|
|
</svg>
|
|
<!-- Menu open: "block", Menu closed: "hidden" -->
|
|
<svg class=" h-6 w-6" :class="mobile_menu_open ? 'block' : 'hidden'" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu, show/hide based on menu state. -->
|
|
<div class="md:hidden" id="mobile-menu" x-show="mobile_menu_open">
|
|
<div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
|
|
<!-- Current: "bg-indigo-700 text-white", Default: "text-white hover:bg-indigo-500 hover:bg-opacity-75" -->
|
|
<a href="#" class="bg-indigo-700 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">Dashboard</a>
|
|
<a href="#" class="text-white hover:bg-indigo-500 hover:bg-opacity-75 block rounded-md px-3 py-2 text-base font-medium">Team</a>
|
|
<a href="#" class="text-white hover:bg-indigo-500 hover:bg-opacity-75 block rounded-md px-3 py-2 text-base font-medium">Projects</a>
|
|
<a href="#" class="text-white hover:bg-indigo-500 hover:bg-opacity-75 block rounded-md px-3 py-2 text-base font-medium">Calendar</a>
|
|
<a href="#" class="text-white hover:bg-indigo-500 hover:bg-opacity-75 block rounded-md px-3 py-2 text-base font-medium">Reports</a>
|
|
</div>
|
|
<div class="border-t border-indigo-700 pb-3 pt-4">
|
|
<div class="flex items-center px-5">
|
|
<div class="flex-shrink-0">
|
|
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
</div>
|
|
<div class="ml-3">
|
|
<div class="text-base font-medium text-white">Tom Cook</div>
|
|
<div class="text-sm font-medium text-indigo-300">tom@example.com</div>
|
|
</div>
|
|
<button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-indigo-600 p-1 text-indigo-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
|
|
<span class="absolute -inset-1.5"></span>
|
|
<span class="sr-only">View notifications</span>
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="mt-3 space-y-1 px-2">
|
|
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-indigo-500 hover:bg-opacity-75">Your Profile</a>
|
|
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-indigo-500 hover:bg-opacity-75">Settings</a>
|
|
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-indigo-500 hover:bg-opacity-75">Sign out</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="bg-white shadow-sm">
|
|
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
|
|
<h1 class="text-lg font-semibold leading-6 text-gray-900">Dashboard</h1>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
|
|
{{ $slot }}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|