Atomcms-edit/resources/themes/atom/views/index.blade.php

<x-app-layout>
 @push('title', __('Welcome to the best hotel on the web!'))

 <script>
  window.CONFIG = window.CONFIG || {};
  window.CONFIG.avatarImager = "{{ setting('avatar_imager') }}";
 </script>

 <div class="flex flex-col md:flex-row col-span-12 gap-4 md:gap-4">

  {{-- Left sidebar --}}
  <div class="flex flex-col gap-4 w-full md:w-1/3 md:flex-shrink-0">

   {{-- Login card --}}
   <div class="flex-shrink-0">
    <div class="border rounded-lg" style="background-color: var(--color-surface, #ffffff); border-color: var(--card-border-color, #d1d5db);">

   <div class="relative overflow-hidden h-[180px] bg-center"
   style="background-image: url({{ asset('assets/images/kasja_mepage_header.png') }}); background-size: auto; background-repeat: no-repeat; background-position: calc(30% - 10px) calc(50% - 35px); border-top-left-radius: 6px; border-top-right-radius: 6px; max-height: 150px;">
   <div class="absolute inset-0 bg-black/30 z-10"></div>
   <div class="relative flex items-center justify-center w-full h-full px-3 z-20">
   </div>
   </div>

   <form id="loginForm" action="{{ route('login') }}" method="POST" autocomplete="off"
   class="flex flex-col gap-6 p-3 bg-gray-100 rounded-lg dark:bg-gray-800 relative">
   @csrf
   <fieldset class="flex flex-col w-full gap-1">
   <div class="flex flex-col gap-1">
   <label for="username" class="block font-semibold text-gray-700 dark:text-gray-200">{{ __('Username') }}</label>
   </div>
   <div class="relative flex items-center">
   <input class="focus:ring-0 border-4 border-gray-200 rounded dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 focus:border-[#eeb425] w-full relative z-10"
   type="text" name="username" id="username" placeholder="" value="{{ old('username') }}" required autofocus />
   <div class="absolute right-3"></div>
   </div>
   </fieldset>

   <fieldset class="flex flex-col w-full gap-1">
   <div class="flex flex-col gap-1">
   <label for="password" class="block font-semibold text-gray-700 dark:text-gray-200">{{ __('Password') }}</label>
   </div>
   <div class="relative flex items-center">
   <input class="focus:ring-0 border-4 border-gray-200 rounded dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 focus:border-[#eeb425] w-full relative z-10"
   type="password" name="password" id="password" placeholder="" required />
   <div class="absolute right-3"></div>
   </div>
   </fieldset>

   @if (setting('cloudflare_turnstile_enabled'))
   <x-turnstile />
   @endif

   <button type="submit"
   style="background-color: #27a44d; color: white; padding: 0.5rem; border-radius: 0.375rem; border: 2px solid #34d399; font-weight: 600; font-size: 16px; transition: background-color 0.3s; width: 100%; cursor: pointer;"
   onmouseover="this.style.backgroundColor='#006b2e'" onmouseout="this.style.backgroundColor='#27a44d'">
   {{ __('Login') }}
   </button>
   </form>
   </div>
   </div>

   {{-- Register button --}}
   <div class="flex flex-col gap-2 relative">
   <a href="{{ route('register') }}">
   <button class="relative transition duration-300 ease-in-out hover:scale-105 overflow-visible"
   style="background: none; border: none; width: 100%; cursor: pointer; padding: 0;">
   <div class="inline-block border rounded-lg border-gray-400 dark:border-gray-700 overflow-hidden w-full">
   <img src="{{ asset('assets/images/EnterHubbly.png') }}" alt="Register" class="block w-full" style="display: block;" />
   </div>
   <span class="absolute inset-0 flex items-center text-white text-4xl font-extrabold pointer-events-none"
   style="text-shadow: 1px 1px 2px rgba(0,0,0,0.8); margin-left: 15px;">{{ __('REGISTER NOW') }}</span>
   </button>
   </a>
   </div>

   {{-- Recent Users --}}
   @if($onlineUsers->isNotEmpty())
   <div class="border rounded-lg bg-white dark:bg-gray-800 border-gray-400 dark:border-gray-700 overflow-visible" style="margin-top: -7px;">
   <div class="relative w-full h-12" style="background: linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%); border-radius: 6px 6px 0 0;">
   <div class="flex items-center justify-center h-full relative">
   <h2 class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ __('Recent Users') }}</h2>
   </div>
   </div>
   <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; padding: 1rem;">
   @foreach($onlineUsers as $user)
   <div class="shadow-lg rounded-md p-0 bg-white dark:bg-gray-800"
   style="width: 50px; height: 50px; position: relative; overflow: visible; justify-self: center;">
   <img src="{{ setting('avatar_imager') }}{{ $user->look }}&head_direction=3&gesture=nrm&action=&headonly=1"
   alt="{{ $user->username }}" loading="lazy" decoding="async"
   style="position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: auto; height: auto; max-width: none; max-height: none;" />
   </div>
   @endforeach
   </div>
   </div>
   @endif

  </div>

  {{-- Right main content --}}
  <div class="w-full md:w-2/3 flex flex-col gap-4">

   {{-- Latest Photos --}}
   @if($photos->isNotEmpty())
   <div class="border rounded-lg bg-white dark:bg-gray-800 border-gray-400 dark:border-gray-700 overflow-hidden">
   <div class="relative w-full h-12" style="background: linear-gradient(140deg, #3A2068 0%, #3F2673 15%, #493085 30%, #523A97 45%, #5B44A9 60%, #654EBB 75%, #7068D0 90%, #786ED8 100%); border-radius: 6px 6px 0 0;">
   <div class="flex items-center justify-center h-full relative">
   <h2 class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ __('Latest Photos') }}</h2>
   </div>
   </div>
   <div style="padding: 1rem;">
   <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
   @forelse ($photos as $photo)
   <a href="{{ $photo->url }}" data-fancybox="gallery" class="group cursor-pointer block">
   <div class="relative rounded-lg overflow-hidden shadow-md border border-gray-600 hover:border-[#eeb425] transition-all duration-300">
   <div class="aspect-[4/3] relative overflow-hidden">
   <img class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-110"
   src="{{ $photo->url }}" alt="Photo by {{ $photo->user?->username ?? 'Unknown' }}">
   <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
   </div>
   <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/90 to-transparent">
   <div class="flex items-center gap-2">
   <div class="flex h-7 w-7 items-center justify-center overflow-hidden rounded-full bg-gray-700 border border-gray-500">
   <img src="{{ setting('avatar_imager') }}{{ $photo->user?->look ?? '' }}&direction=2&headonly=1&head_direction=2&gesture=sml"
   alt="{{ $photo->user?->username ?? 'Unknown' }}" class="h-full w-full object-cover">
   </div>
   <div class="flex-1 min-w-0">
   <p class="text-white text-sm font-semibold truncate">{{ $photo->user?->username ?? __('Unknown') }}</p>
   </div>
   </div>
   </div>
   </div>
   </a>
   @empty
   <div class="col-span-full text-center py-8">
   <p class="text-gray-500 dark:text-gray-400">{{ __('No photos available') }}</p>
   </div>
   @endforelse
   </div>
   </div>
   </div>
   @endif

   {{-- Latest News --}}
   <div class="border rounded-lg bg-white dark:bg-gray-800 border-gray-400 dark:border-gray-700 overflow-hidden">
   <div class="relative w-full h-12" style="background: linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%); border-radius: 6px 6px 0 0;">
   <div class="flex items-center justify-center h-full relative">
   <h2 class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ __('Latest News') }}</h2>
   </div>
   </div>
   <div style="padding: 1rem;">
   <div class="swiper articles-slider" style="padding-bottom: 2.5rem;">
   <div class="swiper-wrapper">
   @forelse($articles as $article)
   <x-article-card :article="$article" :forSlider="true" />
   @empty
   <div class="swiper-slide">
   <x-filler-article-card />
   </div>
   @endforelse
   </div>
   <div class="swiper-pagination" style="bottom: 0;"></div>
   <div class="swiper-button-prev" style="color: #eeb425;"></div>
   <div class="swiper-button-next" style="color: #eeb425;"></div>
   </div>
   </div>
   </div>

  </div>

 </div>

 @push('javascript')
 <script src="{{ config('habbo.cdn.fancybox_js') }}"></script>
 <script>
 document.addEventListener('DOMContentLoaded', function () {
  new Swiper('.articles-slider', {
  slidesPerView: 1,
  spaceBetween: 16,
  loop: true,
  autoplay: { delay: 5000, disableOnInteraction: false },
  pagination: { el: '.swiper-pagination', clickable: true },
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
  breakpoints: {
  640: { slidesPerView: 2 },
  768: { slidesPerView: 3 },
  1024: { slidesPerView: 3 },
  },
  });
 });
 </script>
 @endpush

 <link rel="stylesheet" href="{{ config('habbo.cdn.fancybox_css') }}" />
</x-app-layout>