You've already forked Atomcms-edit
Complete Hubbly theme conversion: all pages rewritten with CSS variable theming
- 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
This commit is contained in:
root
@@ -2,74 +2,77 @@
|
||||
@push('title', __('Generator'))
|
||||
|
||||
<div class="col-span-12">
|
||||
<x-content.content-card icon="hotel-icon" classes="border dark:border-gray-900">
|
||||
<x-slot:title>
|
||||
Logo generator
|
||||
</x-slot:title>
|
||||
<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" 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 py-3 gap-3">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
🏷️
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">Logo generator</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Generate your very own logo') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Generate your very own logo') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4 text-sm" style="color: var(--color-text)">
|
||||
<div x-data="logoGenerator()" class="mt-4">
|
||||
<div class="grid grid-cols-6 gap-3">
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'atom'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('atom')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div class="px-2 text-sm text-[var(--color-text)]">
|
||||
<div x-data="logoGenerator()" class="mt-4">
|
||||
<div class="grid grid-cols-6 gap-3">
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'atom'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('atom')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/atom/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'sunrise'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('sunrise')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'sunrise'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('sunrise')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/sunrise/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'marine'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('marine')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'marine'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('marine')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/marine/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'danlie'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('danlie')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'danlie'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('danlie')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/danlie/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'habton'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('habton')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'habton'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('habton')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'habton_capitalized'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('habton_capitalized')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'habton_capitalized'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('habton_capitalized')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habton_capitalized/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
<div x-bind:class="{'ring-2 ring-emerald-700': fontType === 'habbo_modern'}" class="h-24 rounded p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out cursor-pointer" style="background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);" x-on:click="selectFont('habbo_modern')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/c.png') }}" alt="Letter c">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-bind:class="{'bg-[var(--color-background)] ring-2 ring-emerald-700': fontType === 'habbo_modern'}" class="h-24 rounded border border-[var(--color-text-muted)] p-2 flex gap-2 justify-center items-center transition duration-300 ease-in-out hover:bg-[var(--color-background)] cursor-pointer" x-on:click="selectFont('habbo_modern')">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/a.png') }}" alt="Letter a">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/b.png') }}" alt="Letter b">
|
||||
<img src="{{ asset('/assets/images/logo-generator/habbo_modern/c.png') }}" alt="Letter c">
|
||||
<div class="mt-4">
|
||||
<label for="text" class="font-bold" style="color: var(--color-text)"> {{ __('Logo text') }} </label>
|
||||
<input x-model="text" class="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none mt-2" style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);" onfocus="this.style.borderColor='var(--color-primary)'" onblur="this.style.borderColor='color-mix(in srgb, var(--color-text-muted) 20%, transparent)'" id="text" type="text" name="text" placeholder="Type here...">
|
||||
<div id="logoContainer" class="flex mt-4" :class="text !== '' ? 'mb-4' : ''" style="gap: 2px;" x-html="generateLogoHtml"></div>
|
||||
<div class="flex gap-4 justify-between">
|
||||
<button @click="generateCanvas('download')" class="w-full rounded px-6 py-2.5 border-2 transition ease-in-out duration-200 font-semibold" style="background-color: var(--color-primary); color: var(--button-text-color); border-color: #eab308;"> {{ __('Download logo') }} </button>
|
||||
<button @click="generateCanvas('use')" class="w-full rounded px-6 py-2.5 border-2 transition ease-in-out duration-150 font-semibold" style="background-color: #16a34a; color: white; border-color: #22c55e;"> {{ __('Use logo') }} </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label for="text" class="font-bold"> {{ __('Logo text') }} </label>
|
||||
<input x-model="text" class="mt-2 focus:ring-0 border-4 border-[var(--color-text-muted)] rounded bg-[var(--color-surface)] border-[var(--color-text-muted)] text-[var(--color-text)] focus:border-[var(--color-primary)] w-full" id="text" type="text" name="text" placeholder="Type here...">
|
||||
<div id="logoContainer" class="flex mt-4" :class="text !== '' ? 'mb-4' : ''" style="gap: 2px;" x-html="generateLogoHtml"></div>
|
||||
<div class="flex gap-4 justify-between">
|
||||
<button @click="generateCanvas('download')" class="w-full rounded bg-[var(--color-primary)] text-white p-2 border-2 border-yellow-400 transition ease-in-out duration-200 hover:bg-[var(--color-primary)] font-semibold"> {{ __('Download logo') }} </button>
|
||||
<button @click="generateCanvas('use')" class="w-full rounded bg-green-600 hover:bg-green-700 text-white p-2 border-2 border-green-500 transition ease-in-out duration-150 font-semibold"> {{ __('Use logo') }} </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
|
||||
{{-- TODO: Selfhost --}}
|
||||
@@ -175,5 +178,3 @@
|
||||
}
|
||||
</script>
|
||||
</x-app-layout>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user