112 lines
5.2 KiB
PHP
112 lines
5.2 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
|
<title>{{ config('app.name', 'Anagram Finder') }}</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">
|
|
|
|
@vite(['resources/css/app.css'])
|
|
</head>
|
|
<body class="bg-black antialiased min-h-screen flex flex-col items-center p-6 lg:p-8">
|
|
<main class="w-full max-w-2xl">
|
|
<h1 class="text-red-500 font-mono text-5xl font-bold uppercase tracking-widest glow-red-text mb-8">
|
|
> Anagram Finder
|
|
</h1>
|
|
|
|
<form method="POST" action="{{ route('find') }}" class="space-y-4 mb-8">
|
|
@csrf
|
|
|
|
<label for="anagram" class="block text-red-400 font-mono text-xs uppercase tracking-wider">
|
|
> Letters
|
|
</label>
|
|
<input
|
|
id="anagram"
|
|
name="anagram"
|
|
type="text"
|
|
value="{{ old('anagram', $anagram ?? '') }}"
|
|
placeholder="eamstoxil"
|
|
autocomplete="off"
|
|
autocapitalize="off"
|
|
autocorrect="off"
|
|
spellcheck="false"
|
|
autofocus
|
|
required
|
|
class="w-full bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-3xl tracking-wider uppercase rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-red-400/40 placeholder:normal-case transition-all glow-red px-4 py-3"
|
|
>
|
|
@error('anagram')
|
|
<p class="text-red-400 font-mono text-xs">{{ $message }}</p>
|
|
@enderror
|
|
|
|
<div class="flex gap-3">
|
|
<button
|
|
type="submit"
|
|
id="submit-btn"
|
|
@class([
|
|
'bg-black hover:bg-red-500 text-red-400 hover:text-black font-mono text-sm font-bold border-red-500 rounded-none border-2 uppercase tracking-wider transition-all glow-red cursor-pointer px-4 py-2 disabled:cursor-not-allowed disabled:bg-black disabled:text-red-400/30 disabled:border-red-500/30 disabled:shadow-none',
|
|
'w-2/3' => isset($matches),
|
|
'w-full' => ! isset($matches),
|
|
])
|
|
>
|
|
[FIND WORDS]
|
|
</button>
|
|
|
|
@isset($matches)
|
|
<a
|
|
href="{{ route('home') }}"
|
|
class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-red-950 text-red-400/60 hover:text-red-400 font-mono text-sm font-bold border-red-500/40 hover:border-red-500 rounded-none border-2 uppercase tracking-wider transition-all px-4 py-2"
|
|
>
|
|
[CLEAR]
|
|
</a>
|
|
@endisset
|
|
</div>
|
|
</form>
|
|
|
|
@isset($matches)
|
|
<section class="border-red-500 rounded-none border-2 glow-red">
|
|
<h2 class="text-red-400 font-mono text-xs uppercase tracking-wider border-red-500 border-b-2 px-4 py-2">
|
|
> {{ count($matches) }} {{ Str::plural('match', count($matches)) }}
|
|
</h2>
|
|
|
|
@if (count($matches))
|
|
<ul class="divide-red-500/30 divide-y font-mono text-[1.3125rem] max-h-96 overflow-y-auto scrollbar-red">
|
|
@foreach ($matches as $match)
|
|
<li class="flex items-baseline justify-between px-4 py-1.5 text-red-400 hover:bg-red-950">
|
|
<span>{{ $match }}</span>
|
|
<span class="font-digital text-red-500/70 text-2xl">{{ strlen($match) }}</span>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
@else
|
|
<p class="text-red-400/60 font-mono text-xs px-4 py-3">
|
|
No words found.
|
|
</p>
|
|
@endif
|
|
</section>
|
|
@endisset
|
|
</main>
|
|
|
|
@isset($anagram)
|
|
<script>
|
|
(() => {
|
|
const input = document.getElementById('anagram');
|
|
const button = document.getElementById('submit-btn');
|
|
const original = @json($anagram);
|
|
|
|
const sync = () => {
|
|
const value = input.value.trim().toLowerCase();
|
|
button.disabled = value === original.trim().toLowerCase() || value === '';
|
|
};
|
|
|
|
input.addEventListener('input', sync);
|
|
sync();
|
|
})();
|
|
</script>
|
|
@endisset
|
|
</body>
|
|
</html>
|