diff --git a/.env.example b/.env.example index 40bb13b..808d764 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,4 @@ -APP_NAME=Laravel +APP_NAME="Anagram Finder" APP_ENV=local APP_KEY= APP_DEBUG=true diff --git a/resources/css/app.css b/resources/css/app.css index ad6eeed..07106f9 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -8,6 +8,50 @@ @custom-variant dark (&:where(.dark, .dark *)); +@font-face { + font-family: '7Segment'; + /* Relative so Vite resolves and fingerprints it; an absolute /fonts path + 404s against the dev server, which serves assets itself. */ + src: url('../fonts/7segment.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +.font-digital { + font-family: '7Segment', monospace; +} + +.glow-red { + box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); + transition: box-shadow 300ms ease; +} + +.glow-red:hover { + box-shadow: 0 0 25px rgba(239, 68, 68, 0.6); +} + +.scrollbar-red { + scrollbar-width: thin; + scrollbar-color: var(--color-red-500) transparent; +} + +.scrollbar-red::-webkit-scrollbar { + width: 10px; +} + +.scrollbar-red::-webkit-scrollbar-track { + background: transparent; +} + +.scrollbar-red::-webkit-scrollbar-thumb { + background: var(--color-red-500); + border: 2px solid #000; +} + +.scrollbar-red::-webkit-scrollbar-thumb:hover { + background: var(--color-red-400); +} + @theme { --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; diff --git a/resources/fonts/7segment.woff b/resources/fonts/7segment.woff new file mode 100644 index 0000000..09ab315 Binary files /dev/null and b/resources/fonts/7segment.woff differ diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php index 8aced73..c6117d6 100644 --- a/resources/views/index.blade.php +++ b/resources/views/index.blade.php @@ -3,99 +3,76 @@ + - Anagram Finder + {{ config('app.name', 'Anagram Finder') }} - @fonts - - - + @vite(['resources/css/app.css']) - -
- @if (Route::has('login')) - - @endif -
-
-
-
-

Anagram Finder

-

Enter your letters to find every word that fits.

+
+ @csrf - - @csrf + + + @error('anagram') +

{{ $message }}

+ @enderror -
- - - @error('anagram') -

{{ $message }}

- @enderror -
+ +
- - - @isset($matches) -
-
    - @foreach($matches as $match) -
  • {{ $match }} ({{ strlen($match) }})
    • - @endforeach + @isset($matches) +
    +

    + > {{ count($matches) }} {{ Str::plural('match', count($matches)) }} +

    + + @if (count($matches)) +
      + @foreach ($matches as $match) +
    • + {{ $match }} + {{ strlen($match) }} +
      • + @endforeach
    -
- @endisset -
-
-
- - @if (Route::has('login')) - - @endif + @else +

+ No words found. +

+ @endif + + @endisset +