Mark Gregory
@@ -0,0 +1,3 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
|
||||
:root{--navy:#071f33;--navy2:#0c304b;--red:#e82932;--paper:#f4f6f7;--ink:#0b2133;--muted:#617181;--line:#dce3e7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif}.site-header{height:78px;padding:0 3vw;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-family:'Libre Baskerville',serif;line-height:1.05}.brand-icon{font-size:40px}.brand small{display:block;font:500 8px Inter;letter-spacing:1.5px;margin-top:4px}.nav{display:flex;gap:28px}.nav a{color:white;text-decoration:none;font-family:'Libre Baskerville';font-size:14px}.nav a:hover{color:#ff6066}.menu{display:none;background:none;border:0;color:white;font-size:28px}.hero{min-height:470px;background:linear-gradient(90deg,rgba(4,25,41,.94) 0%,rgba(4,25,41,.65) 45%,rgba(4,25,41,.1)),url('/images/hero-holiday-park.jpg') center center/cover;display:flex;align-items:center;padding:60px 3vw;color:white;position:relative}.hero-inner{max-width:720px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:2px;font-weight:700;color:#cf3038}.hero h1,.page h1{font:700 clamp(42px,5vw,72px)/1.08 'Libre Baskerville',serif;margin:10px 0 20px}.hero h1 em{font-style:normal;color:#ff3b43}.hero p{font:400 21px/1.45 'Libre Baskerville';max-width:700px}.hero aside{position:absolute;right:3vw;top:55px;background:#fff;color:#172a38;padding:20px;width:210px;font:14px/1.5 'Libre Baskerville';box-shadow:0 8px 30px #0003}.actions{display:flex;gap:16px;margin-top:30px}.btn{display:inline-block;padding:14px 20px;border-radius:9px;text-decoration:none;font-weight:700;border:0;cursor:pointer;font-size:15px}.red{background:var(--red);color:#fff}.outline{border:1px solid currentColor;color:inherit;background:transparent}.stats{margin:-1px 2vw 0;display:grid;grid-template-columns:repeat(4,1fr);background:white;border:1px solid var(--line)}.stats div{padding:22px 30px;border-right:1px solid var(--line)}.stats small{display:block;color:var(--muted);font-size:11px}.stats strong{display:block;font:700 28px 'Libre Baskerville';margin-top:8px}.stats i,.danger strong{color:var(--red)}.disclaimer{text-align:right;margin:8px 3vw;color:var(--muted);font-size:11px}.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;padding:12px 2vw}.feature,.focus{padding:34px;border-radius:8px;background:white;border:1px solid var(--line)}h2{font:700 30px 'Libre Baskerville';margin:8px 0 16px}.feature p,.focus p,.focus li,.prose{line-height:1.65}.feature a{color:var(--red);font-weight:700}.focus{background:linear-gradient(135deg,var(--navy),var(--navy2));color:white}.tag{font-size:11px;font-weight:800;letter-spacing:1px}.redtag{background:var(--red);padding:6px 10px;border-radius:4px;color:#fff}.focus li{margin:7px 0}.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:5px 2vw 30px}.cards a{background:white;border:1px solid var(--line);padding:20px;color:var(--ink);text-decoration:none;border-radius:8px}.cards b,.cards span{display:block}.cards span{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.4}.page{max-width:1180px;margin:auto;padding:80px 30px;min-height:70vh}.page .lead{font:20px/1.6 'Libre Baskerville';max-width:850px}.prose,.panel{background:white;border:1px solid var(--line);padding:30px;border-radius:8px;margin:30px 0}.calc,.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}label{display:block;font-weight:700;font-size:13px;margin:14px 0}input,textarea{width:100%;margin-top:7px;padding:13px;border:1px solid #bfcbd2;border-radius:6px;background:white;font:inherit}textarea{resize:vertical}.result{padding:20px;background:#eef3f5;margin-top:20px;border-left:4px solid var(--red)}.narrow{max-width:900px}.success{background:#e4f4e8;padding:16px;border-radius:6px}.errors{color:#a3161c;margin:15px 0}.check{font-weight:400}.check input{width:auto;margin-right:8px}footer{background:#061a2b;color:#bdc9d1;padding:35px 3vw;font-size:12px;line-height:1.6}footer b{color:white;font:700 20px 'Libre Baskerville'}
|
||||
@media(max-width:1000px){.menu{display:block}.nav{display:none;position:absolute;top:78px;left:0;right:0;background:var(--navy);padding:20px;flex-direction:column}.nav.open{display:flex}.hero aside{display:none}.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.cards{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.site-header{height:68px}.brand{font-size:12px}.brand-icon{font-size:30px}.nav{top:68px}.hero{min-height:520px;padding:45px 22px;background-position:40% center}.hero h1{font-size:42px}.hero p{font-size:17px}.actions{flex-direction:column;align-items:flex-start}.stats{grid-template-columns:1fr;margin:0}.stats div{border-bottom:1px solid var(--line)}.cards{grid-template-columns:1fr 1fr}.calc,.form-grid{grid-template-columns:1fr}.page{padding:55px 20px}.page h1{font-size:42px}}
|
||||
@@ -0,0 +1,67 @@
|
||||
@import 'tailwindcss';
|
||||
@import '../../../../../vendor/livewire/flux/dist/flux.css';
|
||||
|
||||
@source '../../views';
|
||||
@source '../../../**/*.blade.php';
|
||||
@source '../../../../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../../../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
|
||||
@source '../../../../../vendor/livewire/flux/stubs/**/*.blade.php';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
--color-zinc-50: #fafafa;
|
||||
--color-zinc-100: #f5f5f5;
|
||||
--color-zinc-200: #e5e5e5;
|
||||
--color-zinc-300: #d4d4d4;
|
||||
--color-zinc-400: #a3a3a3;
|
||||
--color-zinc-500: #737373;
|
||||
--color-zinc-600: #525252;
|
||||
--color-zinc-700: #404040;
|
||||
--color-zinc-800: #262626;
|
||||
--color-zinc-900: #171717;
|
||||
--color-zinc-950: #0a0a0a;
|
||||
|
||||
--color-accent: var(--color-neutral-800);
|
||||
--color-accent-content: var(--color-neutral-800);
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--color-accent: var(--color-white);
|
||||
--color-accent-content: var(--color-white);
|
||||
--color-accent-foreground: var(--color-neutral-800);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
||||
@apply grid gap-2;
|
||||
}
|
||||
|
||||
[data-flux-label] {
|
||||
@apply !mb-0 !leading-tight;
|
||||
}
|
||||
|
||||
input:focus[data-flux-control],
|
||||
textarea:focus[data-flux-control],
|
||||
select:focus[data-flux-control] {
|
||||
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
||||
}
|
||||
|
||||
/* \[:where(&)\]:size-4 {
|
||||
@apply size-4;
|
||||
} */
|
||||
@@ -0,0 +1,4 @@
|
||||
import { Passkeys } from '@laravel/passkeys';
|
||||
|
||||
window.Passkeys = Passkeys;
|
||||
window.dispatchEvent(new CustomEvent('passkeys:ready'));
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"manifest_version": 1,
|
||||
"key": "backend",
|
||||
"slug": "backend",
|
||||
"name": "Backend",
|
||||
"version": "1.0.0",
|
||||
"description": "Default authenticated application and administration theme.",
|
||||
"type": "backend",
|
||||
"entry_view": "dashboard",
|
||||
"views": true,
|
||||
"variables": {},
|
||||
"settings": []
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" {{ $attributes }}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 714 B |
@@ -0,0 +1,17 @@
|
||||
@props([
|
||||
'sidebar' => false,
|
||||
])
|
||||
|
||||
@if($sidebar)
|
||||
<flux:sidebar.brand :name="config('app.name', 'Laravel')" {{ $attributes }}>
|
||||
<x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
|
||||
<x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
|
||||
</x-slot>
|
||||
</flux:sidebar.brand>
|
||||
@else
|
||||
<flux:brand :name="config('app.name', 'Laravel')" {{ $attributes }}>
|
||||
<x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
|
||||
<x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
|
||||
</x-slot>
|
||||
</flux:brand>
|
||||
@endif
|
||||
@@ -0,0 +1,9 @@
|
||||
@props([
|
||||
'title',
|
||||
'description',
|
||||
])
|
||||
|
||||
<div class="flex w-full flex-col text-center">
|
||||
<flux:heading size="xl">{{ $title }}</flux:heading>
|
||||
<flux:subheading>{{ $description }}</flux:subheading>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
@props([
|
||||
'status',
|
||||
])
|
||||
|
||||
@if ($status)
|
||||
<div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
|
||||
{{ $status }}
|
||||
</div>
|
||||
@endif
|
||||
@@ -0,0 +1,39 @@
|
||||
<flux:dropdown position="bottom" align="start">
|
||||
<flux:sidebar.profile
|
||||
:name="auth()->user()->name"
|
||||
:initials="auth()->user()->initials()"
|
||||
icon:trailing="chevrons-up-down"
|
||||
data-test="sidebar-menu-button"
|
||||
/>
|
||||
|
||||
<flux:menu>
|
||||
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
||||
<flux:avatar
|
||||
:name="auth()->user()->name"
|
||||
:initials="auth()->user()->initials()"
|
||||
/>
|
||||
<div class="grid flex-1 text-start text-sm leading-tight">
|
||||
<flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
|
||||
<flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
<flux:menu.separator />
|
||||
<flux:menu.radio.group>
|
||||
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
|
||||
{{ __('Settings') }}
|
||||
</flux:menu.item>
|
||||
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
||||
@csrf
|
||||
<flux:menu.item
|
||||
as="button"
|
||||
type="submit"
|
||||
icon="arrow-right-start-on-rectangle"
|
||||
class="w-full cursor-pointer"
|
||||
data-test="logout-button"
|
||||
>
|
||||
{{ __('Log out') }}
|
||||
</flux:menu.item>
|
||||
</form>
|
||||
</flux:menu.radio.group>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
@@ -0,0 +1,116 @@
|
||||
@assets
|
||||
@vite('resources/themes/backend/assets/js/passkeys.js')
|
||||
@endassets
|
||||
|
||||
<div
|
||||
x-data="{
|
||||
supported: false,
|
||||
showForm: false,
|
||||
name: '',
|
||||
loading: false,
|
||||
error: null,
|
||||
updateSupport() {
|
||||
this.supported = Boolean(window.Passkeys?.isSupported());
|
||||
},
|
||||
getDefaultPasskeyName() {
|
||||
const ua = navigator.userAgent;
|
||||
|
||||
const browser = [
|
||||
{ pattern: /Edg|Edge/, name: 'Edge' },
|
||||
{ pattern: /OPR|Opera|OPiOS/, name: 'Opera' },
|
||||
{ pattern: /Firefox|FxiOS/, name: 'Firefox' },
|
||||
{ pattern: /Chrome|CriOS/, name: 'Chrome' },
|
||||
{ pattern: /Safari/, name: 'Safari' },
|
||||
].find(({ pattern }) => pattern.test(ua))?.name;
|
||||
|
||||
const os = [
|
||||
{ pattern: /iPhone/, name: 'iPhone' },
|
||||
{ pattern: /iPad|Macintosh(?=.*Mobile)/, name: 'iPad' },
|
||||
{ pattern: /Android/, name: 'Android' },
|
||||
{ pattern: /Mac/, name: 'Mac' },
|
||||
{ pattern: /Windows/, name: 'Windows' },
|
||||
].find(({ pattern }) => pattern.test(ua))?.name;
|
||||
|
||||
return [browser, os].filter(Boolean).join(' on ') || '';
|
||||
},
|
||||
init() {
|
||||
this.name = this.getDefaultPasskeyName();
|
||||
this.updateSupport();
|
||||
|
||||
window.addEventListener('passkeys:ready', () => this.updateSupport(), { once: true });
|
||||
},
|
||||
async register() {
|
||||
if (!this.name.trim()) return;
|
||||
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
await window.Passkeys.register({ name: this.name });
|
||||
this.name = '';
|
||||
this.showForm = false;
|
||||
await $wire.loadPasskeys();
|
||||
} catch (e) {
|
||||
if (e.constructor?.name !== 'UserCancelledError') {
|
||||
this.error = e.message;
|
||||
}
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.showForm = false;
|
||||
this.name = '';
|
||||
this.error = null;
|
||||
},
|
||||
}"
|
||||
>
|
||||
<template x-if="!supported">
|
||||
<flux:text>{{ __('Passkeys are not supported in this browser.') }}</flux:text>
|
||||
</template>
|
||||
|
||||
<template x-if="supported && !showForm">
|
||||
<div>
|
||||
<flux:button
|
||||
variant="primary"
|
||||
icon="plus"
|
||||
x-on:click="showForm = true"
|
||||
>
|
||||
{{ __('Add passkey') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="supported && showForm">
|
||||
<div class="space-y-4 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 p-4">
|
||||
<flux:input
|
||||
label="{{ __('Passkey name') }}"
|
||||
x-model="name"
|
||||
placeholder="{{ __('e.g., MacBook Pro, iPhone') }}"
|
||||
x-on:keydown.enter.prevent="register()"
|
||||
x-ref="passkeyNameInput"
|
||||
x-init="$nextTick(() => $refs.passkeyNameInput?.focus())"
|
||||
/>
|
||||
<flux:text class="!mt-1">{{ __('Give this passkey a name to help you identify it later.') }}</flux:text>
|
||||
|
||||
<p x-show="error" x-text="error" x-cloak class="text-sm text-red-600 dark:text-red-400"></p>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<flux:button
|
||||
variant="primary"
|
||||
x-on:click="register()"
|
||||
x-bind:disabled="loading || !name.trim()"
|
||||
>
|
||||
<span x-show="!loading">{{ __('Register passkey') }}</span>
|
||||
<span x-show="loading" x-cloak>{{ __('Registering...') }}</span>
|
||||
</flux:button>
|
||||
<flux:button
|
||||
variant="ghost"
|
||||
x-on:click="cancel()"
|
||||
>
|
||||
{{ __('Cancel') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -0,0 +1,76 @@
|
||||
@props([
|
||||
'optionsRoute' => 'passkey.login-options',
|
||||
'submitRoute' => 'passkey.login',
|
||||
'label' => __('Sign in with a passkey'),
|
||||
'loadingLabel' => __('Authenticating...'),
|
||||
'separator' => __('Or continue with email'),
|
||||
])
|
||||
|
||||
@assets
|
||||
@vite('resources/themes/backend/assets/js/passkeys.js')
|
||||
@endassets
|
||||
|
||||
<div
|
||||
x-data="{
|
||||
supported: false,
|
||||
loading: false,
|
||||
error: null,
|
||||
updateSupport() {
|
||||
this.supported = Boolean(window.Passkeys?.isSupported());
|
||||
},
|
||||
init() {
|
||||
this.updateSupport();
|
||||
|
||||
window.addEventListener('passkeys:ready', () => this.updateSupport(), { once: true });
|
||||
},
|
||||
async verify() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
try {
|
||||
const response = await window.Passkeys.verify({
|
||||
routes: {
|
||||
options: '{{ route($optionsRoute) }}',
|
||||
submit: '{{ route($submitRoute) }}',
|
||||
},
|
||||
});
|
||||
Livewire.navigate(response.redirect || '/dashboard');
|
||||
} catch (e) {
|
||||
if (e.constructor?.name !== 'UserCancelledError') {
|
||||
this.error = e.message;
|
||||
}
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
}"
|
||||
>
|
||||
<template x-if="supported">
|
||||
<div>
|
||||
<div class="grid gap-2">
|
||||
<flux:button
|
||||
variant="outline"
|
||||
icon="finger-print"
|
||||
class="w-full"
|
||||
x-on:click="verify()"
|
||||
x-bind:disabled="loading"
|
||||
>
|
||||
<span x-show="!loading">{{ $label }}</span>
|
||||
<span x-show="loading" x-cloak>{{ $loadingLabel }}</span>
|
||||
</flux:button>
|
||||
<p x-show="error" x-text="error" x-cloak
|
||||
class="text-sm text-center text-red-600 dark:text-red-400"></p>
|
||||
</div>
|
||||
|
||||
<div class="relative my-6">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-zinc-200 dark:border-zinc-700"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="px-2 text-zinc-500 dark:text-zinc-400 bg-white dark:bg-zinc-900">
|
||||
{{ $separator }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
@props([
|
||||
'id' => uniqid(),
|
||||
])
|
||||
|
||||
<svg {{ $attributes }} fill="none">
|
||||
<defs>
|
||||
<pattern id="pattern-{{ $id }}" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
|
||||
<path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect stroke="none" fill="url(#pattern-{{ $id }})" width="100%" height="100%"></rect>
|
||||
</svg>
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="flex items-start max-md:flex-col">
|
||||
<div class="me-10 w-full pb-4 md:w-[220px]">
|
||||
<flux:navlist aria-label="{{ __('Settings') }}">
|
||||
<flux:navlist.item :href="route('profile.edit')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
|
||||
<flux:navlist.item :href="route('security.edit')" wire:navigate>{{ __('Security') }}</flux:navlist.item>
|
||||
<flux:navlist.item :href="route('appearance.edit')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
|
||||
</flux:navlist>
|
||||
</div>
|
||||
|
||||
<flux:separator class="md:hidden" />
|
||||
|
||||
<div class="flex-1 self-stretch max-md:pt-6">
|
||||
<flux:heading>{{ $heading ?? '' }}</flux:heading>
|
||||
<flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
|
||||
|
||||
<div class="mt-5 w-full max-w-lg">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,18 @@
|
||||
<x-layouts::app :title="__('Dashboard')">
|
||||
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
|
||||
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
|
||||
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts::app>
|
||||
@@ -0,0 +1,47 @@
|
||||
{{-- Credit: Lucide (https://lucide.dev) --}}
|
||||
|
||||
@props([
|
||||
'variant' => 'outline',
|
||||
])
|
||||
|
||||
@php
|
||||
if ($variant === 'solid') {
|
||||
throw new \Exception('The "solid" variant is not supported in Lucide.');
|
||||
}
|
||||
|
||||
$classes = Flux::classes('shrink-0')->add(
|
||||
match ($variant) {
|
||||
'outline' => '[:where(&)]:size-6',
|
||||
'solid' => '[:where(&)]:size-6',
|
||||
'mini' => '[:where(&)]:size-5',
|
||||
'micro' => '[:where(&)]:size-4',
|
||||
},
|
||||
);
|
||||
|
||||
$strokeWidth = match ($variant) {
|
||||
'outline' => 2,
|
||||
'mini' => 2.25,
|
||||
'micro' => 2.5,
|
||||
};
|
||||
@endphp
|
||||
|
||||
<svg
|
||||
{{ $attributes->class($classes) }}
|
||||
data-flux-icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="{{ $strokeWidth }}"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
>
|
||||
<path d="M12 7v14" />
|
||||
<path d="M16 12h2" />
|
||||
<path d="M16 8h2" />
|
||||
<path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
|
||||
<path d="M6 12h2" />
|
||||
<path d="M6 8h2" />
|
||||
</svg>
|
||||
@@ -0,0 +1,43 @@
|
||||
{{-- Credit: Lucide (https://lucide.dev) --}}
|
||||
|
||||
@props([
|
||||
'variant' => 'outline',
|
||||
])
|
||||
|
||||
@php
|
||||
if ($variant === 'solid') {
|
||||
throw new \Exception('The "solid" variant is not supported in Lucide.');
|
||||
}
|
||||
|
||||
$classes = Flux::classes('shrink-0')->add(
|
||||
match ($variant) {
|
||||
'outline' => '[:where(&)]:size-6',
|
||||
'solid' => '[:where(&)]:size-6',
|
||||
'mini' => '[:where(&)]:size-5',
|
||||
'micro' => '[:where(&)]:size-4',
|
||||
},
|
||||
);
|
||||
|
||||
$strokeWidth = match ($variant) {
|
||||
'outline' => 2,
|
||||
'mini' => 2.25,
|
||||
'micro' => 2.5,
|
||||
};
|
||||
@endphp
|
||||
|
||||
<svg
|
||||
{{ $attributes->class($classes) }}
|
||||
data-flux-icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="{{ $strokeWidth }}"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
>
|
||||
<path d="m7 15 5 5 5-5" />
|
||||
<path d="m7 9 5-5 5 5" />
|
||||
</svg>
|
||||
@@ -0,0 +1,45 @@
|
||||
{{-- Credit: Lucide (https://lucide.dev) --}}
|
||||
|
||||
@props([
|
||||
'variant' => 'outline',
|
||||
])
|
||||
|
||||
@php
|
||||
if ($variant === 'solid') {
|
||||
throw new \Exception('The "solid" variant is not supported in Lucide.');
|
||||
}
|
||||
|
||||
$classes = Flux::classes('shrink-0')->add(
|
||||
match ($variant) {
|
||||
'outline' => '[:where(&)]:size-6',
|
||||
'solid' => '[:where(&)]:size-6',
|
||||
'mini' => '[:where(&)]:size-5',
|
||||
'micro' => '[:where(&)]:size-4',
|
||||
},
|
||||
);
|
||||
|
||||
$strokeWidth = match ($variant) {
|
||||
'outline' => 2,
|
||||
'mini' => 2.25,
|
||||
'micro' => 2.5,
|
||||
};
|
||||
@endphp
|
||||
|
||||
<svg
|
||||
{{ $attributes->class($classes) }}
|
||||
data-flux-icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="{{ $strokeWidth }}"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
>
|
||||
<path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5" />
|
||||
<circle cx="13" cy="12" r="2" />
|
||||
<path d="M18 19c-2.8 0-5-2.2-5-5v8" />
|
||||
<circle cx="20" cy="19" r="2" />
|
||||
</svg>
|
||||
@@ -0,0 +1,45 @@
|
||||
{{-- Credit: Lucide (https://lucide.dev) --}}
|
||||
|
||||
@props([
|
||||
'variant' => 'outline',
|
||||
])
|
||||
|
||||
@php
|
||||
if ($variant === 'solid') {
|
||||
throw new \Exception('The "solid" variant is not supported in Lucide.');
|
||||
}
|
||||
|
||||
$classes = Flux::classes('shrink-0')->add(
|
||||
match ($variant) {
|
||||
'outline' => '[:where(&)]:size-6',
|
||||
'solid' => '[:where(&)]:size-6',
|
||||
'mini' => '[:where(&)]:size-5',
|
||||
'micro' => '[:where(&)]:size-4',
|
||||
},
|
||||
);
|
||||
|
||||
$strokeWidth = match ($variant) {
|
||||
'outline' => 2,
|
||||
'mini' => 2.25,
|
||||
'micro' => 2.5,
|
||||
};
|
||||
@endphp
|
||||
|
||||
<svg
|
||||
{{ $attributes->class($classes) }}
|
||||
data-flux-icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="{{ $strokeWidth }}"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
>
|
||||
<rect width="7" height="7" x="3" y="3" rx="1" />
|
||||
<rect width="7" height="7" x="14" y="3" rx="1" />
|
||||
<rect width="7" height="7" x="14" y="14" rx="1" />
|
||||
<rect width="7" height="7" x="3" y="14" rx="1" />
|
||||
</svg>
|
||||
@@ -0,0 +1,51 @@
|
||||
@props([
|
||||
'expandable' => false,
|
||||
'expanded' => true,
|
||||
'heading' => null,
|
||||
])
|
||||
|
||||
<?php if ($expandable && $heading): ?>
|
||||
|
||||
<ui-disclosure
|
||||
{{ $attributes->class('group/disclosure') }}
|
||||
@if ($expanded === true) open @endif
|
||||
data-flux-navlist-group
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="group/disclosure-button mb-[2px] flex h-10 w-full items-center rounded-lg text-zinc-500 hover:bg-zinc-800/5 hover:text-zinc-800 lg:h-8 dark:text-white/80 dark:hover:bg-white/[7%] dark:hover:text-white"
|
||||
>
|
||||
<div class="ps-3 pe-4">
|
||||
<flux:icon.chevron-down class="hidden size-3! group-data-open/disclosure-button:block" />
|
||||
<flux:icon.chevron-right class="block size-3! group-data-open/disclosure-button:hidden" />
|
||||
</div>
|
||||
|
||||
<span class="text-sm font-medium leading-none">{{ $heading }}</span>
|
||||
</button>
|
||||
|
||||
<div class="relative hidden space-y-[2px] ps-7 data-open:block" @if ($expanded === true) data-open @endif>
|
||||
<div class="absolute inset-y-[3px] start-0 ms-4 w-px bg-zinc-200 dark:bg-white/30"></div>
|
||||
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</ui-disclosure>
|
||||
|
||||
<?php elseif ($heading): ?>
|
||||
|
||||
<div {{ $attributes->class('block space-y-[2px]') }}>
|
||||
<div class="px-1 py-2">
|
||||
<div class="text-xs leading-none text-zinc-400">{{ $heading }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php else: ?>
|
||||
|
||||
<div {{ $attributes->class('block space-y-[2px]') }}>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
<?php endif; ?>
|
||||
@@ -0,0 +1,5 @@
|
||||
<x-layouts::app.sidebar :title="$title ?? null">
|
||||
<flux:main>
|
||||
{{ $slot }}
|
||||
</flux:main>
|
||||
</x-layouts::app.sidebar>
|
||||
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white dark:bg-zinc-800">
|
||||
<flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:sidebar.toggle class="lg:hidden mr-2" icon="bars-2" inset="left" />
|
||||
|
||||
<x-app-logo href="{{ route('dashboard') }}" wire:navigate />
|
||||
|
||||
<flux:navbar class="-mb-px max-lg:hidden">
|
||||
<flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Dashboard') }}
|
||||
</flux:navbar.item>
|
||||
</flux:navbar>
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
<flux:navbar class="me-1.5 space-x-0.5 rtl:space-x-reverse py-0!">
|
||||
<flux:tooltip :content="__('Search')" position="bottom">
|
||||
<flux:navbar.item class="!h-10 [&>div>svg]:size-5" icon="magnifying-glass" href="#" :label="__('Search')" />
|
||||
</flux:tooltip>
|
||||
<flux:tooltip :content="__('Repository')" position="bottom">
|
||||
<flux:navbar.item
|
||||
class="h-10 max-lg:hidden [&>div>svg]:size-5"
|
||||
icon="folder-git-2"
|
||||
href="https://github.com/laravel/livewire-starter-kit"
|
||||
target="_blank"
|
||||
:label="__('Repository')"
|
||||
/>
|
||||
</flux:tooltip>
|
||||
<flux:tooltip :content="__('Documentation')" position="bottom">
|
||||
<flux:navbar.item
|
||||
class="h-10 max-lg:hidden [&>div>svg]:size-5"
|
||||
icon="book-open-text"
|
||||
href="https://laravel.com/docs/starter-kits#livewire"
|
||||
target="_blank"
|
||||
:label="__('Documentation')"
|
||||
/>
|
||||
</flux:tooltip>
|
||||
</flux:navbar>
|
||||
|
||||
<x-desktop-user-menu />
|
||||
</flux:header>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<flux:sidebar collapsible="mobile" sticky class="lg:hidden border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:sidebar.header>
|
||||
<x-app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
|
||||
<flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" />
|
||||
</flux:sidebar.header>
|
||||
|
||||
<flux:sidebar.nav>
|
||||
<flux:sidebar.group :heading="__('Platform')">
|
||||
<flux:sidebar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Dashboard') }}
|
||||
</flux:sidebar.item>
|
||||
</flux:sidebar.group>
|
||||
</flux:sidebar.nav>
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
<flux:sidebar.nav>
|
||||
<flux:sidebar.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
|
||||
{{ __('Repository') }}
|
||||
</flux:sidebar.item>
|
||||
<flux:sidebar.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
|
||||
{{ __('Documentation') }}
|
||||
</flux:sidebar.item>
|
||||
</flux:sidebar.nav>
|
||||
</flux:sidebar>
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast.group>
|
||||
<flux:toast />
|
||||
</flux:toast.group>
|
||||
@endpersist
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white dark:bg-zinc-800">
|
||||
<flux:sidebar sticky collapsible="mobile" class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:sidebar.header>
|
||||
<x-app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
|
||||
<flux:sidebar.collapse class="lg:hidden" />
|
||||
</flux:sidebar.header>
|
||||
|
||||
<flux:sidebar.nav>
|
||||
<flux:sidebar.group :heading="__('Platform')" class="grid">
|
||||
<flux:sidebar.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Dashboard') }}
|
||||
</flux:sidebar.item>
|
||||
</flux:sidebar.group>
|
||||
</flux:sidebar.nav>
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
<flux:sidebar.nav>
|
||||
<flux:sidebar.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
|
||||
{{ __('Repository') }}
|
||||
</flux:sidebar.item>
|
||||
|
||||
<flux:sidebar.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
|
||||
{{ __('Documentation') }}
|
||||
</flux:sidebar.item>
|
||||
</flux:sidebar.nav>
|
||||
|
||||
<x-desktop-user-menu class="hidden lg:block" :name="auth()->user()->name" />
|
||||
</flux:sidebar>
|
||||
|
||||
<!-- Mobile User Menu -->
|
||||
<flux:header class="lg:hidden">
|
||||
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
<flux:dropdown position="top" align="end">
|
||||
<flux:profile
|
||||
:initials="auth()->user()->initials()"
|
||||
icon-trailing="chevron-down"
|
||||
/>
|
||||
|
||||
<flux:menu>
|
||||
<flux:menu.radio.group>
|
||||
<div class="p-0 text-sm font-normal">
|
||||
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
||||
<flux:avatar
|
||||
:name="auth()->user()->name"
|
||||
:initials="auth()->user()->initials()"
|
||||
/>
|
||||
|
||||
<div class="grid flex-1 text-start text-sm leading-tight">
|
||||
<flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
|
||||
<flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<flux:menu.radio.group>
|
||||
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
|
||||
{{ __('Settings') }}
|
||||
</flux:menu.item>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
||||
@csrf
|
||||
<flux:menu.item
|
||||
as="button"
|
||||
type="submit"
|
||||
icon="arrow-right-start-on-rectangle"
|
||||
class="w-full cursor-pointer"
|
||||
data-test="logout-button"
|
||||
>
|
||||
{{ __('Log out') }}
|
||||
</flux:menu.item>
|
||||
</form>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
</flux:header>
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast.group>
|
||||
<flux:toast />
|
||||
</flux:toast.group>
|
||||
@endpersist
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
<x-layouts::auth.simple :title="$title ?? null">
|
||||
{{ $slot }}
|
||||
</x-layouts::auth.simple>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-neutral-100 antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
|
||||
<div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
|
||||
<div class="flex w-full max-w-md flex-col gap-6">
|
||||
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-md">
|
||||
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="rounded-xl border bg-white dark:bg-stone-950 dark:border-stone-800 text-stone-800 shadow-xs">
|
||||
<div class="px-10 py-8">{{ $slot }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast.group>
|
||||
<flux:toast />
|
||||
</flux:toast.group>
|
||||
@endpersist
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
|
||||
<div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
|
||||
<div class="flex w-full max-w-sm flex-col gap-2">
|
||||
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
|
||||
<span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
|
||||
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
<div class="flex flex-col gap-6">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast.group>
|
||||
<flux:toast />
|
||||
</flux:toast.group>
|
||||
@endpersist
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
|
||||
<div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
|
||||
<div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e dark:border-neutral-800">
|
||||
<div class="absolute inset-0 bg-neutral-900"></div>
|
||||
<a href="{{ route('home') }}" class="relative z-20 flex items-center text-lg font-medium" wire:navigate>
|
||||
<span class="flex h-10 w-10 items-center justify-center rounded-md">
|
||||
<x-app-logo-icon class="me-2 h-7 fill-current text-white" />
|
||||
</span>
|
||||
{{ config('app.name', 'Laravel') }}
|
||||
</a>
|
||||
|
||||
@php
|
||||
[$message, $author] = str(Illuminate\Foundation\Inspiring::quotes()->random())->explode('-');
|
||||
@endphp
|
||||
|
||||
<div class="relative z-20 mt-auto">
|
||||
<blockquote class="space-y-2">
|
||||
<flux:heading size="lg">“{{ trim($message) }}”</flux:heading>
|
||||
<footer><flux:heading>{{ trim($author) }}</flux:heading></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:p-8">
|
||||
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||
<a href="{{ route('home') }}" class="z-20 flex flex-col items-center gap-2 font-medium lg:hidden" wire:navigate>
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-md">
|
||||
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast.group>
|
||||
<flux:toast />
|
||||
</flux:toast.group>
|
||||
@endpersist
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,36 @@
|
||||
<x-layouts::auth :title="__('Confirm password')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header
|
||||
:title="__('Confirm password')"
|
||||
:description="__('This is a secure area of the application. Please confirm your password before continuing.')"
|
||||
/>
|
||||
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<x-passkey-verify
|
||||
options-route="passkey.confirm-options"
|
||||
submit-route="passkey.confirm"
|
||||
:label="__('Confirm with passkey')"
|
||||
:loading-label="__('Confirming...')"
|
||||
:separator="__('Or confirm with password')"
|
||||
/>
|
||||
|
||||
<form method="POST" action="{{ route('password.confirm.store') }}" class="flex flex-col gap-6">
|
||||
@csrf
|
||||
|
||||
<flux:input
|
||||
name="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
:placeholder="__('Password')"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<flux:button variant="primary" type="submit" class="w-full" data-test="confirm-password-button">
|
||||
{{ __('Confirm') }}
|
||||
</flux:button>
|
||||
</form>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
@@ -0,0 +1,31 @@
|
||||
<x-layouts::auth :title="__('Forgot password')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Forgot password')" :description="__('Enter your email to receive a password reset link')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form method="POST" action="{{ route('password.email') }}" class="flex flex-col gap-6">
|
||||
@csrf
|
||||
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
name="email"
|
||||
:label="__('Email address')"
|
||||
type="email"
|
||||
required
|
||||
autofocus
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
|
||||
<flux:button variant="primary" type="submit" class="w-full" data-test="email-password-reset-link-button">
|
||||
{{ __('Email password reset link') }}
|
||||
</flux:button>
|
||||
</form>
|
||||
|
||||
<div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-400">
|
||||
<span>{{ __('Or, return to') }}</span>
|
||||
<flux:link :href="route('login')" wire:navigate>{{ __('log in') }}</flux:link>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
@@ -0,0 +1,59 @@
|
||||
<x-layouts::auth :title="__('Log in')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Log in to your account')" :description="__('Enter your email and password below to log in')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<x-passkey-verify />
|
||||
|
||||
<form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-6">
|
||||
@csrf
|
||||
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
name="email"
|
||||
:label="__('Email address')"
|
||||
:value="old('email')"
|
||||
type="email"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="email"
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="relative">
|
||||
<flux:input
|
||||
name="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
:placeholder="__('Password')"
|
||||
viewable
|
||||
/>
|
||||
|
||||
@if (Route::has('password.request'))
|
||||
<flux:link class="absolute top-0 text-sm end-0" :href="route('password.request')" wire:navigate>
|
||||
{{ __('Forgot your password?') }}
|
||||
</flux:link>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Remember Me -->
|
||||
<flux:checkbox name="remember" :label="__('Remember me')" :checked="old('remember')" />
|
||||
|
||||
<div class="flex items-center justify-end">
|
||||
<flux:button variant="primary" type="submit" class="w-full" data-test="login-button">
|
||||
{{ __('Log in') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="space-x-1 text-sm text-center rtl:space-x-reverse text-zinc-600 dark:text-zinc-400">
|
||||
<span>{{ __('Don\'t have an account?') }}</span>
|
||||
<flux:link :href="route('register')" wire:navigate>{{ __('Sign up') }}</flux:link>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
@@ -0,0 +1,69 @@
|
||||
<x-layouts::auth :title="__('Register')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Create an account')" :description="__('Enter your details below to create your account')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-6">
|
||||
@csrf
|
||||
<!-- Name -->
|
||||
<flux:input
|
||||
name="name"
|
||||
:label="__('Name')"
|
||||
:value="old('name')"
|
||||
type="text"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="name"
|
||||
:placeholder="__('Full name')"
|
||||
/>
|
||||
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
name="email"
|
||||
:label="__('Email address')"
|
||||
:value="old('email')"
|
||||
type="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
|
||||
<!-- Password -->
|
||||
<flux:input
|
||||
name="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Password')"
|
||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<flux:input
|
||||
name="password_confirmation"
|
||||
:label="__('Confirm password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Confirm password')"
|
||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<div class="flex items-center justify-end">
|
||||
<flux:button type="submit" variant="primary" class="w-full" data-test="register-user-button">
|
||||
{{ __('Create account') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<span>{{ __('Already have an account?') }}</span>
|
||||
<flux:link :href="route('login')" wire:navigate>{{ __('Log in') }}</flux:link>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
@@ -0,0 +1,54 @@
|
||||
<x-layouts::auth :title="__('Reset password')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Reset password')" :description="__('Please enter your new password below')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form method="POST" action="{{ route('password.update') }}" class="flex flex-col gap-6">
|
||||
@csrf
|
||||
<!-- Token -->
|
||||
<input type="hidden" name="token" value="{{ request()->route('token') }}">
|
||||
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
name="email"
|
||||
value="{{ request('email') }}"
|
||||
:label="__('Email')"
|
||||
type="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
/>
|
||||
|
||||
<!-- Password -->
|
||||
<flux:input
|
||||
name="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Password')"
|
||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<flux:input
|
||||
name="password_confirmation"
|
||||
:label="__('Confirm password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Confirm password')"
|
||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<div class="flex items-center justify-end">
|
||||
<flux:button type="submit" variant="primary" class="w-full" data-test="reset-password-button">
|
||||
{{ __('Reset password') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
@@ -0,0 +1,101 @@
|
||||
<x-layouts::auth :title="__('Two-factor authentication')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<div
|
||||
class="relative w-full h-auto"
|
||||
x-cloak
|
||||
x-data="{
|
||||
showRecoveryInput: @js($errors->has('recovery_code')),
|
||||
code: '',
|
||||
recovery_code: '',
|
||||
focusOtp() {
|
||||
this.$nextTick(() => this.$refs.otp?.querySelector('input')?.focus());
|
||||
},
|
||||
init() {
|
||||
if (! this.showRecoveryInput) {
|
||||
this.focusOtp();
|
||||
}
|
||||
},
|
||||
toggleInput() {
|
||||
this.showRecoveryInput = !this.showRecoveryInput;
|
||||
|
||||
this.code = '';
|
||||
this.recovery_code = '';
|
||||
|
||||
$nextTick(() => {
|
||||
this.showRecoveryInput
|
||||
? this.$refs.recovery_code?.focus()
|
||||
: this.focusOtp();
|
||||
});
|
||||
},
|
||||
}"
|
||||
>
|
||||
<div x-show="!showRecoveryInput">
|
||||
<x-auth-header
|
||||
:title="__('Authentication code')"
|
||||
:description="__('Enter the authentication code provided by your authenticator application.')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div x-show="showRecoveryInput">
|
||||
<x-auth-header
|
||||
:title="__('Recovery code')"
|
||||
:description="__('Please confirm access to your account by entering one of your emergency recovery codes.')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ route('two-factor.login.store') }}">
|
||||
@csrf
|
||||
|
||||
<div class="space-y-5 text-center">
|
||||
<div x-show="!showRecoveryInput">
|
||||
<div class="flex items-center justify-center my-5" x-ref="otp">
|
||||
<flux:otp
|
||||
x-model="code"
|
||||
length="6"
|
||||
name="code"
|
||||
label="OTP Code"
|
||||
label:sr-only
|
||||
class="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="showRecoveryInput">
|
||||
<div class="my-5">
|
||||
<flux:input
|
||||
type="text"
|
||||
name="recovery_code"
|
||||
x-ref="recovery_code"
|
||||
x-bind:required="showRecoveryInput"
|
||||
autocomplete="one-time-code"
|
||||
x-model="recovery_code"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@error('recovery_code')
|
||||
<flux:text color="red">
|
||||
{{ $message }}
|
||||
</flux:text>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<flux:button
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="w-full"
|
||||
>
|
||||
{{ __('Continue') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 space-x-0.5 text-sm leading-5 text-center">
|
||||
<span class="opacity-50">{{ __('or you can') }}</span>
|
||||
<div class="inline font-medium underline cursor-pointer opacity-80">
|
||||
<span x-show="!showRecoveryInput" @click="toggleInput()">{{ __('login using a recovery code') }}</span>
|
||||
<span x-show="showRecoveryInput" @click="toggleInput()">{{ __('login using an authentication code') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
@@ -0,0 +1,29 @@
|
||||
<x-layouts::auth :title="__('Email verification')">
|
||||
<div class="mt-4 flex flex-col gap-6">
|
||||
<flux:text class="text-center">
|
||||
{{ __('Please verify your email address by clicking on the link we just emailed to you.') }}
|
||||
</flux:text>
|
||||
|
||||
@if (session('status') == 'verification-link-sent')
|
||||
<flux:text class="text-center font-medium !dark:text-green-400 !text-green-600">
|
||||
{{ __('A new verification link has been sent to the email address you provided during registration.') }}
|
||||
</flux:text>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col items-center justify-between space-y-3">
|
||||
<form method="POST" action="{{ route('verification.send') }}">
|
||||
@csrf
|
||||
<flux:button type="submit" variant="primary" class="w-full">
|
||||
{{ __('Resend verification email') }}
|
||||
</flux:button>
|
||||
</form>
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<flux:button variant="ghost" type="submit" class="text-sm cursor-pointer" data-test="logout-button">
|
||||
{{ __('Log out') }}
|
||||
</flux:button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
@@ -0,0 +1,13 @@
|
||||
<section class="w-full">
|
||||
@include('partials.settings-heading')
|
||||
|
||||
<flux:heading class="sr-only">{{ __('Appearance settings') }}</flux:heading>
|
||||
|
||||
<x-settings.layout :heading="__('Appearance')" :subheading=" __('Update the appearance settings for your account')">
|
||||
<flux:radio.group x-data variant="segmented" x-model="$flux.appearance">
|
||||
<flux:radio value="light" icon="sun">{{ __('Light') }}</flux:radio>
|
||||
<flux:radio value="dark" icon="moon">{{ __('Dark') }}</flux:radio>
|
||||
<flux:radio value="system" icon="computer-desktop">{{ __('System') }}</flux:radio>
|
||||
</flux:radio.group>
|
||||
</x-settings.layout>
|
||||
</section>
|
||||
@@ -0,0 +1,34 @@
|
||||
<section class="mt-10 space-y-6">
|
||||
<div class="relative mb-5">
|
||||
<flux:heading>{{ __('Delete account') }}</flux:heading>
|
||||
<flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading>
|
||||
</div>
|
||||
|
||||
<flux:modal.trigger name="confirm-user-deletion">
|
||||
<flux:button variant="danger" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
|
||||
{{ __('Delete account') }}
|
||||
</flux:button>
|
||||
</flux:modal.trigger>
|
||||
|
||||
<flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg">
|
||||
<form method="POST" wire:submit="deleteUser" class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg">{{ __('Are you sure you want to delete your account?') }}</flux:heading>
|
||||
|
||||
<flux:subheading>
|
||||
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
|
||||
</flux:subheading>
|
||||
</div>
|
||||
|
||||
<flux:input wire:model="password" :label="__('Password')" type="password" viewable />
|
||||
|
||||
<div class="flex justify-end space-x-2 rtl:space-x-reverse">
|
||||
<flux:modal.close>
|
||||
<flux:button variant="filled">{{ __('Cancel') }}</flux:button>
|
||||
</flux:modal.close>
|
||||
|
||||
<flux:button variant="danger" type="submit">{{ __('Delete account') }}</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
</section>
|
||||
@@ -0,0 +1,36 @@
|
||||
<section class="w-full">
|
||||
@include('partials.settings-heading')
|
||||
|
||||
<flux:heading class="sr-only">{{ __('Profile settings') }}</flux:heading>
|
||||
|
||||
<x-settings.layout :heading="__('Profile')" :subheading="__('Update your name and email address')">
|
||||
<form wire:submit="updateProfileInformation" class="my-6 w-full space-y-6">
|
||||
<flux:input wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name" />
|
||||
|
||||
<div>
|
||||
<flux:input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" />
|
||||
|
||||
@if ($this->hasUnverifiedEmail)
|
||||
<div>
|
||||
<flux:text class="mt-4">
|
||||
{{ __('Your email address is unverified.') }}
|
||||
|
||||
<flux:link class="text-sm cursor-pointer" wire:click.prevent="resendVerificationNotification">
|
||||
{{ __('Click here to re-send the verification email.') }}
|
||||
</flux:link>
|
||||
</flux:text>
|
||||
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<flux:button variant="primary" type="submit">{{ __('Save') }}</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@if ($this->showDeleteUser)
|
||||
<livewire:settings.delete-user-form />
|
||||
@endif
|
||||
</x-settings.layout>
|
||||
</section>
|
||||
@@ -0,0 +1,327 @@
|
||||
<section class="w-full">
|
||||
@include('partials.settings-heading')
|
||||
|
||||
<flux:heading class="sr-only">{{ __('Security settings') }}</flux:heading>
|
||||
|
||||
<x-settings.layout :heading="__('Update password')" :subheading="__('Ensure your account is using a long, random password to stay secure')">
|
||||
<form method="POST" wire:submit="updatePassword" class="mt-6 space-y-6">
|
||||
<flux:input
|
||||
wire:model="current_password"
|
||||
:label="__('Current password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
viewable
|
||||
/>
|
||||
<flux:input
|
||||
wire:model="password"
|
||||
:label="__('New password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
||||
viewable
|
||||
/>
|
||||
<flux:input
|
||||
wire:model="password_confirmation"
|
||||
:label="__('Confirm password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<flux:button variant="primary" type="submit" data-test="update-password-button">{{ __('Save') }}</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@if ($canManageTwoFactor)
|
||||
<section class="mt-12">
|
||||
<flux:heading>{{ __('Two-factor authentication') }}</flux:heading>
|
||||
<flux:subheading>{{ __('Manage your two-factor authentication settings') }}</flux:subheading>
|
||||
|
||||
<div class="flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
|
||||
@if ($twoFactorEnabled)
|
||||
<div class="space-y-4">
|
||||
<flux:text>
|
||||
{{ __('You will be prompted for a secure, random pin during login, which you can retrieve from the TOTP-supported application on your phone.') }}
|
||||
</flux:text>
|
||||
|
||||
<div class="flex justify-start">
|
||||
<flux:button
|
||||
variant="danger"
|
||||
wire:click="disable"
|
||||
>
|
||||
{{ __('Disable 2FA') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
|
||||
<livewire:settings.two-factor.recovery-codes :$requiresConfirmation />
|
||||
</div>
|
||||
@else
|
||||
<div class="space-y-4">
|
||||
<flux:text variant="subtle">
|
||||
{{ __('When you enable two-factor authentication, you will be prompted for a secure pin during login. This pin can be retrieved from a TOTP-supported application on your phone.') }}
|
||||
</flux:text>
|
||||
|
||||
<flux:button
|
||||
variant="primary"
|
||||
wire:click="enable"
|
||||
>
|
||||
{{ __('Enable 2FA') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
@if ($canManageTwoFactor)
|
||||
<flux:modal
|
||||
name="two-factor-setup-modal"
|
||||
class="max-w-md md:min-w-md"
|
||||
@close="closeModal"
|
||||
wire:model="showModal"
|
||||
>
|
||||
<div class="space-y-6">
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<div class="p-0.5 w-auto rounded-full border border-stone-100 dark:border-stone-600 bg-white dark:bg-stone-800 shadow-sm">
|
||||
<div class="p-2.5 rounded-full border border-stone-200 dark:border-stone-600 overflow-hidden bg-stone-100 dark:bg-stone-200 relative">
|
||||
<div class="flex items-stretch absolute inset-0 w-full h-full divide-x [&>div]:flex-1 divide-stone-200 dark:divide-stone-300 justify-around opacity-50">
|
||||
@for ($i = 1; $i <= 5; $i++)
|
||||
<div></div>
|
||||
@endfor
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-stretch absolute w-full h-full divide-y [&>div]:flex-1 inset-0 divide-stone-200 dark:divide-stone-300 justify-around opacity-50">
|
||||
@for ($i = 1; $i <= 5; $i++)
|
||||
<div></div>
|
||||
@endfor
|
||||
</div>
|
||||
|
||||
<flux:icon.qr-code class="relative z-20 dark:text-accent-foreground"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-center">
|
||||
<flux:heading size="lg">{{ $this->modalConfig['title'] }}</flux:heading>
|
||||
<flux:text>{{ $this->modalConfig['description'] }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($showVerificationStep)
|
||||
<div class="space-y-6">
|
||||
<div
|
||||
class="flex flex-col items-center space-y-3 justify-center"
|
||||
x-data
|
||||
x-init="$nextTick(() => $el.querySelector('input')?.focus())"
|
||||
>
|
||||
<flux:otp
|
||||
name="code"
|
||||
wire:model="code"
|
||||
length="6"
|
||||
label="OTP Code"
|
||||
label:sr-only
|
||||
class="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<flux:button
|
||||
variant="outline"
|
||||
class="flex-1"
|
||||
wire:click="resetVerification"
|
||||
>
|
||||
{{ __('Back') }}
|
||||
</flux:button>
|
||||
|
||||
<flux:button
|
||||
variant="primary"
|
||||
class="flex-1"
|
||||
wire:click="confirmTwoFactor"
|
||||
x-bind:disabled="$wire.code.length < 6"
|
||||
>
|
||||
{{ __('Confirm') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
@error('setupData')
|
||||
<flux:callout variant="danger" icon="x-circle" heading="{{ $message }}"/>
|
||||
@enderror
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="relative w-64 overflow-hidden border rounded-lg border-stone-200 dark:border-stone-700 aspect-square">
|
||||
@empty($qrCodeSvg)
|
||||
<div class="absolute inset-0 flex items-center justify-center bg-white dark:bg-stone-700 animate-pulse">
|
||||
<flux:icon.loading/>
|
||||
</div>
|
||||
@else
|
||||
<div x-data class="flex items-center justify-center h-full p-4">
|
||||
<div
|
||||
class="bg-white p-3 rounded"
|
||||
:style="($flux.appearance === 'dark' || ($flux.appearance === 'system' && $flux.dark)) ? 'filter: invert(1) brightness(1.5)' : ''"
|
||||
>
|
||||
{!! $qrCodeSvg !!}
|
||||
</div>
|
||||
</div>
|
||||
@endempty
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<flux:button
|
||||
:disabled="$errors->has('setupData')"
|
||||
variant="primary"
|
||||
class="w-full"
|
||||
wire:click="showVerificationIfNecessary"
|
||||
>
|
||||
{{ $this->modalConfig['buttonText'] }}
|
||||
</flux:button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="relative flex items-center justify-center w-full">
|
||||
<div class="absolute inset-0 w-full h-px top-1/2 bg-stone-200 dark:bg-stone-600"></div>
|
||||
<span class="relative px-2 text-sm bg-white dark:bg-stone-800 text-stone-600 dark:text-stone-400">
|
||||
{{ __('or, enter the code manually') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center space-x-2"
|
||||
x-data="{
|
||||
copied: false,
|
||||
async copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText('{{ $manualSetupKey }}');
|
||||
this.copied = true;
|
||||
setTimeout(() => this.copied = false, 1500);
|
||||
} catch (e) {
|
||||
console.warn('Could not copy to clipboard');
|
||||
}
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div class="flex items-stretch w-full border rounded-xl dark:border-stone-700">
|
||||
@empty($manualSetupKey)
|
||||
<div class="flex items-center justify-center w-full p-3 bg-stone-100 dark:bg-stone-700">
|
||||
<flux:icon.loading variant="mini"/>
|
||||
</div>
|
||||
@else
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
value="{{ $manualSetupKey }}"
|
||||
class="w-full p-3 bg-transparent outline-none text-stone-900 dark:text-stone-100"
|
||||
/>
|
||||
|
||||
<button
|
||||
@click="copy()"
|
||||
class="px-3 transition-colors border-l cursor-pointer border-stone-200 dark:border-stone-600"
|
||||
>
|
||||
<flux:icon.document-duplicate x-show="!copied" variant="outline"></flux:icon>
|
||||
<flux:icon.check
|
||||
x-show="copied"
|
||||
variant="solid"
|
||||
class="text-green-500"
|
||||
></flux:icon>
|
||||
</button>
|
||||
@endempty
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</flux:modal>
|
||||
@endif
|
||||
|
||||
@if ($canManagePasskeys)
|
||||
<section class="mt-12">
|
||||
<flux:heading>{{ __('Passkeys') }}</flux:heading>
|
||||
<flux:subheading>{{ __('Manage your passkeys for passwordless sign-in') }}</flux:subheading>
|
||||
|
||||
<div class="mt-6 flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
|
||||
<div class="border rounded-lg border-zinc-200 dark:border-zinc-700 overflow-hidden">
|
||||
@forelse ($passkeys as $passkey)
|
||||
<div class="flex items-center justify-between p-4 {{ ! $loop->last ? 'border-b border-zinc-200 dark:border-zinc-700' : '' }}">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 dark:bg-zinc-800">
|
||||
<flux:icon.key class="size-5 text-zinc-500 dark:text-zinc-400" />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<p class="font-medium tracking-tight">{{ $passkey['name'] }}</p>
|
||||
@if ($passkey['authenticator'])
|
||||
<flux:badge size="sm">{{ $passkey['authenticator'] }}</flux:badge>
|
||||
@endif
|
||||
</div>
|
||||
<p class="text-zinc-500 dark:text-zinc-400 text-xs">
|
||||
{{ __('Added :time', ['time' => $passkey['created_at_diff']]) }}
|
||||
@if ($passkey['last_used_at_diff'])
|
||||
<span class="opacity-50 mx-1">/</span>
|
||||
{{ __('Last used :time', ['time' => $passkey['last_used_at_diff']]) }}
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<flux:button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
icon="trash"
|
||||
icon:variant="outline"
|
||||
wire:click="confirmDelete({{ $passkey['id'] }})"
|
||||
class="text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/50"
|
||||
/>
|
||||
</div>
|
||||
@empty
|
||||
<div class="p-8 text-center">
|
||||
<div class="mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl bg-zinc-100 dark:bg-zinc-800">
|
||||
<flux:icon.key class="size-7 text-zinc-400 dark:text-zinc-500" />
|
||||
</div>
|
||||
<p class="font-medium">{{ __('No passkeys yet') }}</p>
|
||||
<flux:text class="mt-1">{{ __('Add a passkey to sign in without a password') }}</flux:text>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
<x-passkey-registration />
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
</x-settings.layout>
|
||||
|
||||
<flux:modal
|
||||
name="delete-passkey-modal"
|
||||
class="max-w-md md:min-w-md"
|
||||
@close="closeDeleteModal"
|
||||
wire:model="showDeleteModal"
|
||||
>
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<flux:heading size="lg">{{ __('Remove passkey') }}</flux:heading>
|
||||
<flux:text>
|
||||
{{ __('Are you sure you want to remove the passkey ":name"? You will no longer be able to use it to sign in.', ['name' => $deletingPasskeyName]) }}
|
||||
</flux:text>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 justify-end">
|
||||
<flux:button
|
||||
variant="outline"
|
||||
wire:click="closeDeleteModal"
|
||||
>
|
||||
{{ __('Cancel') }}
|
||||
</flux:button>
|
||||
<flux:button
|
||||
variant="danger"
|
||||
wire:click="deletePasskey"
|
||||
>
|
||||
{{ __('Remove passkey') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</flux:modal>
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
<div
|
||||
class="py-6 space-y-6 border shadow-sm rounded-xl border-zinc-200 dark:border-white/10"
|
||||
wire:cloak
|
||||
x-data="{ showRecoveryCodes: false }"
|
||||
>
|
||||
<div class="px-6 space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<flux:icon.lock-closed variant="outline" class="size-4"/>
|
||||
<flux:heading size="lg" level="3">{{ __('2FA recovery codes') }}</flux:heading>
|
||||
</div>
|
||||
<flux:text variant="subtle">
|
||||
{{ __('Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.') }}
|
||||
</flux:text>
|
||||
</div>
|
||||
|
||||
<div class="px-6">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<flux:button
|
||||
x-show="!showRecoveryCodes"
|
||||
icon="eye"
|
||||
icon:variant="outline"
|
||||
variant="primary"
|
||||
@click="showRecoveryCodes = true;"
|
||||
aria-expanded="false"
|
||||
aria-controls="recovery-codes-section"
|
||||
>
|
||||
{{ __('View recovery codes') }}
|
||||
</flux:button>
|
||||
|
||||
<flux:button
|
||||
x-show="showRecoveryCodes"
|
||||
icon="eye-slash"
|
||||
icon:variant="outline"
|
||||
variant="primary"
|
||||
@click="showRecoveryCodes = false"
|
||||
aria-expanded="true"
|
||||
aria-controls="recovery-codes-section"
|
||||
>
|
||||
{{ __('Hide recovery codes') }}
|
||||
</flux:button>
|
||||
|
||||
@if (filled($recoveryCodes))
|
||||
<flux:button
|
||||
x-show="showRecoveryCodes"
|
||||
icon="arrow-path"
|
||||
variant="filled"
|
||||
wire:click="regenerateRecoveryCodes"
|
||||
>
|
||||
{{ __('Regenerate codes') }}
|
||||
</flux:button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div
|
||||
x-show="showRecoveryCodes"
|
||||
x-transition
|
||||
id="recovery-codes-section"
|
||||
class="relative overflow-hidden"
|
||||
x-bind:aria-hidden="!showRecoveryCodes"
|
||||
>
|
||||
<div class="mt-3 space-y-3">
|
||||
@error('recoveryCodes')
|
||||
<flux:callout variant="danger" icon="x-circle" heading="{{$message}}"/>
|
||||
@enderror
|
||||
|
||||
@if (filled($recoveryCodes))
|
||||
<div
|
||||
class="grid gap-1 p-4 font-mono text-sm rounded-lg bg-zinc-100 dark:bg-white/5"
|
||||
role="list"
|
||||
aria-label="{{ __('Recovery codes') }}"
|
||||
>
|
||||
@foreach($recoveryCodes as $code)
|
||||
<div
|
||||
role="listitem"
|
||||
class="select-text"
|
||||
wire:loading.class="opacity-50 animate-pulse"
|
||||
>
|
||||
{{ $code }}
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<flux:text variant="subtle" class="text-xs">
|
||||
{{ __('Each recovery code can be used once to access your account and will be removed after use. If you need more, click Regenerate codes above.') }}
|
||||
</flux:text>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,15 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>
|
||||
{{ filled($title ?? null) ? $title.' - '.config('app.name', 'Laravel') : config('app.name', 'Laravel') }}
|
||||
</title>
|
||||
|
||||
<link rel="icon" href="/favicon.ico" sizes="any">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
|
||||
@fonts
|
||||
|
||||
@vite('resources/themes/backend/assets/css/app.css')
|
||||
@fluxAppearance
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="relative mb-6 w-full">
|
||||
<flux:heading size="xl" level="1">{{ __('Settings') }}</flux:heading>
|
||||
<flux:subheading size="lg" class="mb-6">{{ __('Manage your profile and account settings') }}</flux:subheading>
|
||||
<flux:separator variant="subtle" />
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"manifest_version": 1,
|
||||
"key": "frontend",
|
||||
"slug": "frontend",
|
||||
"name": "Frontend",
|
||||
"version": "1.0.0",
|
||||
"description": "Default public-facing application theme.",
|
||||
"type": "frontend",
|
||||
"entry_view": "welcome",
|
||||
"views": true,
|
||||
"variables": {},
|
||||
"settings": []
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Independent information for UK holiday park owners about valuations, depreciation, fees, resale and owner experiences."><title>@yield('title','Holiday Park Owners UK')</title>@vite(['resources/css/app.css'])</head><body>
|
||||
<header class="site-header"><a class="brand" href="{{ route('home') }}"><span class="brand-icon">⌂</span><span>HOLIDAY PARK<br><b>OWNERS UK</b><small>REAL INFORMATION. STRONGER OWNERS.</small></span></a><button class="menu" aria-label="Toggle navigation" onclick="document.querySelector('.nav').classList.toggle('open')">☰</button><nav class="nav"><a href="{{route('home')}}">Home</a><a href="{{route('valuations')}}">Valuations</a><a href="{{route('park-holidays')}}">Park Holidays UK</a><a href="{{route('owner-stories')}}">Owner Stories</a><a href="{{route('rights')}}">Know Your Rights</a><a href="{{route('evidence')}}">Evidence</a><a href="{{route('evidence.create')}}">Submit Evidence</a></nav></header>
|
||||
<main>@yield('content')</main><footer><b>Holiday Park Owners UK</b><p>Independent consumer information. Not affiliated with Park Holidays UK or any holiday park operator. Owner reports are identified as such and should not be treated as findings of fact unless independently evidenced.</p><p>Information only — not legal or financial advice.</p></footer></body></html>
|
||||
@@ -0,0 +1,3 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Independent information for UK holiday park owners about valuations, depreciation, fees, resale and owner experiences."><title>@yield('title','Holiday Park Owners UK')</title>@vite(['resources/css/app.css'])</head><body>
|
||||
<header class="site-header"><a class="brand" href="{{ route('home') }}"><span class="brand-icon">⌂</span><span>HOLIDAY PARK<br><b>OWNERS UK</b><small>REAL INFORMATION. STRONGER OWNERS.</small></span></a><button class="menu" aria-label="Toggle navigation" onclick="document.querySelector('.nav').classList.toggle('open')">☰</button><nav class="nav"><a href="{{route('home')}}">Home</a><a href="{{route('valuations')}}">Valuations</a><a href="{{route('park-holidays')}}">Park Holidays UK</a><a href="{{route('owner-stories')}}">Owner Stories</a><a href="{{route('rights')}}">Know Your Rights</a><a href="{{route('evidence')}}">Evidence</a><a href="{{route('evidence.create')}}">Submit Evidence</a></nav></header>
|
||||
<main>@yield('content')</main><footer><b>Holiday Park Owners UK</b><p>Independent consumer information. Not affiliated with Park Holidays UK or any holiday park operator. Owner reports are identified as such and should not be treated as findings of fact unless independently evidenced.</p><p>Information only — not legal or financial advice.</p></footer></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
@extends('layouts.public') @section('title','Evidence') @section('content')<section class="page"><span class="eyebrow">Independent information</span><h1>Evidence</h1><p class="lead">Documents matter.</p><div class="prose"><p>This library is designed for contracts, invoices, pitch-fee notices, finance statements, written valuations, resale offers and correspondence. Sources should be dated and clearly attributed.</p></div><a class="btn red" href="{{route('evidence.create')}}">Submit supporting evidence →</a></section>@endsection
|
||||
@@ -0,0 +1,6 @@
|
||||
@extends('layouts.public') @section('title','Holiday Park Owners UK — Valuations, ownership & evidence') @section('content')
|
||||
<section class="hero"><div class="hero-inner"><span class="eyebrow">Independent UK owner information</span><h1>The real cost of<br><em>holiday park ownership.</em></h1><p>Independent information, owner experiences and evidence about valuations, depreciation, pitch fees and selling your holiday home.</p><div class="actions"><a class="btn red" href="{{route('evidence.create')}}">Share Your Experience →</a><a class="btn outline" href="{{route('rights')}}">Understand Your Rights →</a></div></div><aside>Holiday homes are for leisure use only and cannot be used as a main residence.</aside></section>
|
||||
<section class="stats"><div><small>ILLUSTRATIVE PURCHASE PRICE</small><strong>£70,000</strong></div><div><small>ILLUSTRATIVE PARK VALUATION</small><strong>£20,000 <i>↓71%</i></strong></div><div><small>ILLUSTRATIVE FINANCE BALANCE</small><strong>£50,000</strong></div><div class="danger"><small>POTENTIAL SHORTFALL</small><strong>£30,000</strong></div></section><p class="disclaimer">Illustrative example only. Actual values vary. This is not financial advice.</p>
|
||||
<section class="grid"><article class="feature"><span class="tag">VALUATIONS</span><h2>Why valuations matter</h2><p>A holiday home can depreciate substantially after purchase. If a resale or part-exchange offer is lower than the remaining finance balance, an owner may face a significant shortfall.</p><p>The key comparison is not one number: it is the original purchase price, outstanding finance, independent/open-market value, park offer and the contractual costs of selling.</p><a href="{{route('valuations')}}">Understand valuations →</a></article><article class="focus"><span class="tag redtag">FOCUS: PARK HOLIDAYS UK</span><h2>Examining Park Holidays UK</h2><p>Ownership terms, running costs, finance, resale arrangements and documented owner experiences.</p><ul><li>Purchase prices, pitch fees and running costs</li><li>Finance and ongoing commitments</li><li>Valuations, part-exchange and resale</li><li>Owner experiences — clearly attributed</li></ul><a class="btn outline" href="{{route('park-holidays')}}">Explore the Park Holidays UK section →</a></article></section>
|
||||
<section class="cards"><a href="{{route('valuations')}}"><b>Valuations</b><span>Resale values and depreciation.</span></a><a href="{{route('park-holidays')}}"><b>Park Holidays UK</b><span>Focused evidence and information.</span></a><a href="{{route('owner-stories')}}"><b>Owner Stories</b><span>Experiences from owners.</span></a><a href="{{route('rights')}}"><b>Know Your Rights</b><span>Contracts and questions to ask.</span></a><a href="{{route('evidence')}}"><b>Evidence</b><span>Documents, sources and analysis.</span></a><a href="{{route('evidence.create')}}"><b>Submit Evidence</b><span>Tell us what happened.</span></a></section>
|
||||
@endsection
|
||||
@@ -0,0 +1 @@
|
||||
@extends('layouts.public') @section('title','Owner Stories') @section('content')<section class="page"><span class="eyebrow">Independent information</span><h1>Owner Stories</h1><p class="lead">Owners’ experiences, in their own context.</p><div class="prose"><p>Stories should include dates, park/operator, relevant documents and the operator’s response where available. Publication does not mean an allegation has been independently established.</p></div><a class="btn red" href="{{route('evidence.create')}}">Submit supporting evidence →</a></section>@endsection
|
||||
@@ -0,0 +1 @@
|
||||
@extends('layouts.public') @section('title','Park Holidays UK') @section('content')<section class="page"><span class="eyebrow">Independent information</span><h1>Park Holidays UK</h1><p class="lead">Evidence before conclusions.</p><div class="prose"><p>This section brings together published terms, costs, finance information, resale arrangements and attributed owner experiences concerning Park Holidays UK. It should distinguish company statements, independent evidence and individual allegations.</p></div><a class="btn red" href="{{route('evidence.create')}}">Submit supporting evidence →</a></section>@endsection
|
||||
@@ -0,0 +1 @@
|
||||
@extends('layouts.public') @section('title','Know Your Rights') @section('content')<section class="page"><span class="eyebrow">Independent information</span><h1>Know Your Rights</h1><p class="lead">Know what you are buying.</p><div class="prose"><p>A holiday caravan is not the same legal category as a residential park home. Read the licence agreement, finance agreement and park rules, and obtain appropriate professional advice before committing substantial sums.</p></div><a class="btn red" href="{{route('evidence.create')}}">Submit supporting evidence →</a></section>@endsection
|
||||
@@ -0,0 +1 @@
|
||||
@extends('layouts.public') @section('title','Submit Evidence') @section('content')<section class="page narrow"><span class="eyebrow">Evidence locker</span><h1>Tell us what happened.</h1><p class="lead">Provide the numbers and circumstances. Do not upload or enter information you do not have the right to share.</p>@if(session('status'))<div class="success">{{session('status')}}</div>@endif<form method="post" action="{{route('evidence.store')}}">@csrf<div class="form-grid"><label>Name (optional)<input name="name" value="{{old('name')}}"></label><label>Email (optional)<input type="email" name="email" value="{{old('email')}}"></label><label>Park name<input name="park_name" value="{{old('park_name')}}"></label><label>Operator<input name="operator" value="{{old('operator')}}"></label><label>Purchase price £<input type="number" step="0.01" name="purchase_price" value="{{old('purchase_price')}}"></label><label>Valuation / offer £<input type="number" step="0.01" name="valuation" value="{{old('valuation')}}"></label><label>Finance balance £<input type="number" step="0.01" name="finance_balance" value="{{old('finance_balance')}}"></label></div><label>Your experience<textarea name="story" rows="9" required>{{old('story')}}</textarea></label><label class="check"><input type="checkbox" name="consent_to_contact" value="1"> You may contact me about this submission.</label>@if($errors->any())<div class="errors">{{implode(' ', $errors->all())}}</div>@endif<button class="btn red" type="submit">Submit evidence →</button></form></section>@endsection
|
||||
@@ -0,0 +1 @@
|
||||
@extends('layouts.public') @section('title','Holiday Home Valuations') @section('content') <section class="page"><span class="eyebrow">Valuations & depreciation</span><h1>Understand the numbers before you sell.</h1><p class="lead">A purchase price is not a guaranteed future value. Compare every valuation with the finance settlement figure, contractual sale costs and evidence of comparable sales.</p><div class="panel"><h2>Valuation shortfall calculator</h2><div class="calc"><label>Purchase price £<input id="purchase" type="number" value="70000"></label><label>Current valuation £<input id="value" type="number" value="20000"></label><label>Finance remaining £<input id="finance" type="number" value="50000"></label></div><div id="result" class="result"></div></div><div class="prose"><h2>Questions worth asking</h2><p>Ask how the valuation was calculated, whether you can sell privately, what commission or transfer fees apply, whether there are age restrictions on the unit, and whether an independent valuation is permitted. Keep every offer and explanation in writing.</p></div></section><script>function c(){let p=+purchase.value||0,v=+value.value||0,f=+finance.value||0;let loss=p?v/p*100:0;result.innerHTML=`Current value: <b>${loss.toFixed(1)}%</b> of purchase price · Finance shortfall at this valuation: <b>£${Math.max(0,f-v).toLocaleString()}</b>`} document.querySelectorAll('.calc input').forEach(x=>x.oninput=c);c()</script> @endsection
|
||||
Reference in New Issue
Block a user