2026-08-22 23:42:57 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
2026-08-23 14:45:29 +02:00
|
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
2026-08-22 23:42:57 +02:00
|
|
|
|
2026-08-23 14:45:29 +02:00
|
|
|
<title>{{ config('app.name', 'Anagram Finder') }}</title>
|
2026-08-22 23:42:57 +02:00
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
2026-08-23 14:45:29 +02:00
|
|
|
@vite(['resources/css/app.css'])
|
2026-08-22 23:42:57 +02:00
|
|
|
</head>
|
2026-08-23 14:45:29 +02:00
|
|
|
<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">
|
2026-08-23 15:02:34 +02:00
|
|
|
<h1 class="text-primary font-mono text-5xl font-bold uppercase tracking-widest glow-red-text mb-8">
|
2026-08-23 14:45:29 +02:00
|
|
|
> Anagram Finder
|
|
|
|
|
</h1>
|
2026-08-22 23:42:57 +02:00
|
|
|
|
2026-08-23 14:45:29 +02:00
|
|
|
<form method="POST" action="{{ route('find') }}" class="space-y-4 mb-8">
|
|
|
|
|
@csrf
|
2026-08-23 10:04:08 +02:00
|
|
|
|
2026-08-23 15:02:34 +02:00
|
|
|
<label for="anagram" class="block text-primary font-mono text-xs uppercase tracking-wider">
|
2026-08-23 14:45:29 +02:00
|
|
|
> 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
|
2026-08-23 15:02:34 +02:00
|
|
|
class="w-full bg-black border-bordeaux text-primary focus:border-primary font-mono text-3xl tracking-wider uppercase rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-primary/30 placeholder:normal-case transition-all glow-bordeaux px-4 py-3"
|
2026-08-23 14:45:29 +02:00
|
|
|
>
|
|
|
|
|
@error('anagram')
|
2026-08-23 15:02:34 +02:00
|
|
|
<p class="text-primary font-mono text-xs">{{ $message }}</p>
|
2026-08-23 14:45:29 +02:00
|
|
|
@enderror
|
2026-08-23 10:04:08 +02:00
|
|
|
|
2026-08-23 14:51:56 +02:00
|
|
|
<div class="flex gap-3">
|
|
|
|
|
<button
|
|
|
|
|
type="submit"
|
2026-08-23 14:53:59 +02:00
|
|
|
id="submit-btn"
|
2026-08-23 14:51:56 +02:00
|
|
|
@class([
|
2026-08-23 15:02:34 +02:00
|
|
|
'bg-black hover:bg-primary text-primary hover:text-black font-mono text-sm font-bold border-primary rounded-none border-2 uppercase tracking-wider transition-all glow-bordeaux cursor-pointer px-4 py-2 disabled:cursor-not-allowed disabled:bg-black disabled:text-primary/30 disabled:border-primary/30 disabled:shadow-none',
|
2026-08-23 14:51:56 +02:00
|
|
|
'w-2/3' => isset($matches),
|
|
|
|
|
'w-full' => ! isset($matches),
|
|
|
|
|
])
|
|
|
|
|
>
|
|
|
|
|
[FIND WORDS]
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
@isset($matches)
|
|
|
|
|
<a
|
|
|
|
|
href="{{ route('home') }}"
|
2026-08-23 15:02:34 +02:00
|
|
|
class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-bordeaux text-primary/60 hover:text-primary font-mono text-sm font-bold border-bordeaux hover:border-primary rounded-none border-2 glow-bordeaux uppercase tracking-wider transition-all px-4 py-2"
|
2026-08-23 14:51:56 +02:00
|
|
|
>
|
|
|
|
|
[CLEAR]
|
|
|
|
|
</a>
|
|
|
|
|
@endisset
|
|
|
|
|
</div>
|
2026-08-23 14:45:29 +02:00
|
|
|
</form>
|
2026-08-23 10:04:08 +02:00
|
|
|
|
2026-08-23 14:45:29 +02:00
|
|
|
@isset($matches)
|
2026-08-23 15:02:34 +02:00
|
|
|
<hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-8">
|
|
|
|
|
|
|
|
|
|
<section class="border-bordeaux rounded-none border-2 glow-bordeaux">
|
|
|
|
|
<h2 class="text-primary font-mono text-xs uppercase tracking-wider border-bordeaux border-b-2 glow-bordeaux-line px-4 py-2">
|
2026-08-23 14:45:29 +02:00
|
|
|
> {{ count($matches) }} {{ Str::plural('match', count($matches)) }}
|
|
|
|
|
</h2>
|
2026-08-22 23:42:57 +02:00
|
|
|
|
2026-08-23 14:45:29 +02:00
|
|
|
@if (count($matches))
|
2026-08-23 15:02:34 +02:00
|
|
|
<ul class="divide-bordeaux divide-y font-mono text-[1.3125rem] max-h-96 overflow-y-auto scrollbar-red">
|
2026-08-23 14:45:29 +02:00
|
|
|
@foreach ($matches as $match)
|
2026-08-23 15:02:34 +02:00
|
|
|
<li class="flex items-baseline justify-between px-4 py-1.5 text-primary hover:bg-bordeaux">
|
2026-08-23 14:45:29 +02:00
|
|
|
<span>{{ $match }}</span>
|
2026-08-23 15:02:34 +02:00
|
|
|
<span class="font-digital text-primary text-2xl">{{ strlen($match) }}</span>
|
2026-08-23 14:45:29 +02:00
|
|
|
</li>
|
|
|
|
|
@endforeach
|
|
|
|
|
</ul>
|
|
|
|
|
@else
|
2026-08-23 15:02:34 +02:00
|
|
|
<p class="text-primary/60 font-mono text-xs px-4 py-3">
|
2026-08-23 14:45:29 +02:00
|
|
|
No words found.
|
|
|
|
|
</p>
|
|
|
|
|
@endif
|
|
|
|
|
</section>
|
|
|
|
|
@endisset
|
|
|
|
|
</main>
|
2026-08-23 14:53:59 +02:00
|
|
|
|
|
|
|
|
@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
|
2026-08-22 23:42:57 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
