You've already forked Atomcms-edit
root
c53a5a8a2c
- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style - All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders - Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel - Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets - Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships) - Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs - Rewrote login, settings, help center, radio, applications, utility pages - All colors use CSS variables controlled by Filament theme editor - Added Hubbly assets: banner, Frank GIF, navigation icons, online badge - Removed all dependencies on x-content.* and x-form.* components
87 lines
3.3 KiB
PHP
Executable File
87 lines
3.3 KiB
PHP
Executable File
<x-app-layout>
|
|
@push('title', $room->name)
|
|
|
|
<div class="col-span-12">
|
|
<div class="grid grid-cols-12 gap-y-4 gap-x-2 lg:gap-x-4">
|
|
<div class="col-span-12 md:col-span-8 sm:flex gap-x-4">
|
|
<div class="inline-block">
|
|
<div class="relative">
|
|
<img
|
|
class="min-h-[110px] min-w-[110px] rounded"
|
|
src="{{ setting('room_thumbnail_path') }}/{{ $room->id }}.png"
|
|
alt="{{ $room->name }}"
|
|
onerror="this.onerror=null;this.src='{{ asset('/assets/images/profile/room_placeholder.png') }}';"
|
|
>
|
|
|
|
<div class="absolute bottom-1 left-1/2 transform -translate-x-1/2">
|
|
<div class="{{ $room->users > 0 ? 'bg-[#00800B]' : 'bg-gray-400' }} px-1 py-[1px] font-semibold rounded flex gap-x-[3px] text-white items-center text-xs">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-[12px]" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
|
|
{{ $room->users }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="color: var(--color-text);">
|
|
<h5 class="text-xl font-bold">{{ $room->name }}</h5>
|
|
<a class="flex items-center" href="/profile/{{ $room->owner->username }}">
|
|
<img class="h-12" src="{{ setting('avatar_imager') }}{{ $room->owner->look }}&direction=2&headonly=1&head_direction=2&gesture=sml" alt="{{ $room->owner->username }}">
|
|
<p>{{ $room->owner?->username ?? 'Unknown' }}</p>
|
|
</a>
|
|
<p class="leading-5">
|
|
<span class="font-semibold">{{ __('Description:') }} </span>
|
|
{{ $room->description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-12 md:col-span-4">
|
|
<div class="grid grid-cols-1 gap-y-2">
|
|
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
|
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
|
<div class="flex items-center h-full px-4 gap-3">
|
|
<h2 class="text-white font-bold text-lg">{{ __('Room details') }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 text-sm" style="color: var(--color-text);">
|
|
<p>
|
|
<span class="font-semibold">{{ __('Max users:') }} </span>
|
|
{{ $room->users_max }}
|
|
</p>
|
|
@if (strlen($room->tags) > 0)
|
|
<p>
|
|
<span class="font-semibold">Tags: </span>
|
|
@foreach (explode(";", $room->tags) as $tag)
|
|
@if (empty($tag) === false)
|
|
<span class="rounded px-2" style="background-color: var(--color-background); color: var(--color-text);">{{ $tag }}</span>
|
|
@endif
|
|
@endforeach
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@if ($room->guild !== null)
|
|
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
|
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
|
<div class="flex items-center h-full px-4 gap-3">
|
|
<h2 class="text-white font-bold text-lg">{{ __('The room guild') }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<p class="text-sm font-semibold mb-1" style="color: var(--color-text);">{{ $room->guild->name }}</p>
|
|
<p class="text-sm" style="color: var(--color-text-muted);">{{ $room->guild->description }}</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-app-layout>
|