297 lines
18 KiB
HTML
297 lines
18 KiB
HTML
{# app/templates/admin/vendor-theme.html #}
|
|
{% extends "admin/base.html" %}
|
|
|
|
{% block title %}Vendor Theme - {{ vendor_code }}{% endblock %}
|
|
|
|
{% block alpine_data %}vendorThemeData(){% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container px-6 mx-auto grid">
|
|
<!-- Page Header -->
|
|
<div class="flex items-center justify-between my-6">
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
|
Vendor Theme
|
|
</h2>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
Customize appearance for <span x-text="vendor?.name"></span>
|
|
</p>
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<a :href="`/admin/vendors/${vendorCode}`"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg hover:border-gray-400 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
|
|
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
|
|
Back to Vendor
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div x-show="loading" class="text-center py-12">
|
|
<span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600 animate-spin')"></span>
|
|
<p class="mt-2 text-gray-600 dark:text-gray-400">Loading theme...</p>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-3">
|
|
|
|
<!-- Theme Configuration Form (2 columns) -->
|
|
<div class="md:col-span-2">
|
|
<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Theme Configuration
|
|
</h3>
|
|
|
|
<!-- Theme Preset Selector -->
|
|
<div class="mb-6 p-4 bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 rounded-lg border border-purple-200 dark:border-purple-800">
|
|
<h4 class="text-sm font-semibold text-purple-800 dark:text-purple-200 mb-2">
|
|
Quick Start: Choose a Preset
|
|
</h4>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
|
|
<button @click="applyPreset('modern')"
|
|
class="px-3 py-2 text-sm font-medium text-purple-700 bg-white border border-purple-300 rounded-lg hover:bg-purple-50 dark:bg-gray-800 dark:text-purple-300 dark:border-purple-700">
|
|
Modern
|
|
</button>
|
|
<button @click="applyPreset('classic')"
|
|
class="px-3 py-2 text-sm font-medium text-blue-700 bg-white border border-blue-300 rounded-lg hover:bg-blue-50 dark:bg-gray-800 dark:text-blue-300 dark:border-blue-700">
|
|
Classic
|
|
</button>
|
|
<button @click="applyPreset('minimal')"
|
|
class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700">
|
|
Minimal
|
|
</button>
|
|
<button @click="applyPreset('vibrant')"
|
|
class="px-3 py-2 text-sm font-medium text-orange-700 bg-white border border-orange-300 rounded-lg hover:bg-orange-50 dark:bg-gray-800 dark:text-orange-300 dark:border-orange-700">
|
|
Vibrant
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colors Section -->
|
|
<div class="mb-6">
|
|
<h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Colors</h4>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<!-- Primary Color -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Primary Color</span>
|
|
<div class="flex items-center mt-1 space-x-2">
|
|
<input type="color"
|
|
x-model="themeData.colors.primary"
|
|
class="h-10 w-20 border border-gray-300 rounded dark:border-gray-600 cursor-pointer">
|
|
<input type="text"
|
|
x-model="themeData.colors.primary"
|
|
class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
|
|
</div>
|
|
</label>
|
|
|
|
<!-- Secondary Color -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Secondary Color</span>
|
|
<div class="flex items-center mt-1 space-x-2">
|
|
<input type="color"
|
|
x-model="themeData.colors.secondary"
|
|
class="h-10 w-20 border border-gray-300 rounded dark:border-gray-600 cursor-pointer">
|
|
<input type="text"
|
|
x-model="themeData.colors.secondary"
|
|
class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
|
|
</div>
|
|
</label>
|
|
|
|
<!-- Accent Color -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Accent Color</span>
|
|
<div class="flex items-center mt-1 space-x-2">
|
|
<input type="color"
|
|
x-model="themeData.colors.accent"
|
|
class="h-10 w-20 border border-gray-300 rounded dark:border-gray-600 cursor-pointer">
|
|
<input type="text"
|
|
x-model="themeData.colors.accent"
|
|
class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Typography Section -->
|
|
<div class="mb-6">
|
|
<h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Typography</h4>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<!-- Heading Font -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Heading Font</span>
|
|
<select x-model="themeData.fonts.heading"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
|
|
<option value="Inter, sans-serif">Inter</option>
|
|
<option value="Roboto, sans-serif">Roboto</option>
|
|
<option value="Poppins, sans-serif">Poppins</option>
|
|
<option value="Playfair Display, serif">Playfair Display</option>
|
|
<option value="Merriweather, serif">Merriweather</option>
|
|
<option value="Georgia, serif">Georgia</option>
|
|
</select>
|
|
</label>
|
|
|
|
<!-- Body Font -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Body Font</span>
|
|
<select x-model="themeData.fonts.body"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
|
|
<option value="Inter, sans-serif">Inter</option>
|
|
<option value="Open Sans, sans-serif">Open Sans</option>
|
|
<option value="Lato, sans-serif">Lato</option>
|
|
<option value="Source Sans Pro, sans-serif">Source Sans Pro</option>
|
|
<option value="Arial, sans-serif">Arial</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layout Section -->
|
|
<div class="mb-6">
|
|
<h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Layout</h4>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<!-- Product Layout Style -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Product Layout</span>
|
|
<select x-model="themeData.layout.style"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
|
|
<option value="grid">Grid</option>
|
|
<option value="list">List</option>
|
|
<option value="masonry">Masonry</option>
|
|
</select>
|
|
</label>
|
|
|
|
<!-- Header Style -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Header Style</span>
|
|
<select x-model="themeData.layout.header"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
|
|
<option value="fixed">Fixed</option>
|
|
<option value="static">Static</option>
|
|
<option value="transparent">Transparent</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom CSS Section -->
|
|
<div class="mb-6">
|
|
<h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Advanced</h4>
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Custom CSS</span>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">
|
|
Advanced: Add custom CSS rules (use with caution)
|
|
</p>
|
|
<textarea x-model="themeData.custom_css"
|
|
rows="6"
|
|
placeholder=".my-custom-class { color: red; }"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-textarea"></textarea>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex justify-between items-center">
|
|
<button @click="resetToDefault()"
|
|
:disabled="saving"
|
|
class="px-4 py-2 text-sm font-medium leading-5 text-red-700 transition-colors duration-150 bg-white border border-red-300 rounded-lg hover:bg-red-50 focus:outline-none disabled:opacity-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-600">
|
|
Reset to Default
|
|
</button>
|
|
<button @click="saveTheme()"
|
|
:disabled="saving"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none disabled:opacity-50">
|
|
<span x-show="!saving">Save Theme</span>
|
|
<span x-show="saving" class="flex items-center">
|
|
<span x-html="$icon('spinner', 'w-4 h-4 mr-2 animate-spin')"></span>
|
|
Saving...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Panel (1 column) -->
|
|
<div class="md:col-span-1">
|
|
<div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800 sticky top-6">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Preview
|
|
</h3>
|
|
|
|
<!-- Theme Preview -->
|
|
<div class="space-y-4">
|
|
<!-- Colors Preview -->
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">COLORS</p>
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<div class="text-center">
|
|
<div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700"
|
|
:style="`background-color: ${themeData.colors.primary}`"></div>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Primary</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700"
|
|
:style="`background-color: ${themeData.colors.secondary}`"></div>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Secondary</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700"
|
|
:style="`background-color: ${themeData.colors.accent}`"></div>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Accent</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Typography Preview -->
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">TYPOGRAPHY</p>
|
|
<div class="space-y-2">
|
|
<p class="text-lg" :style="`font-family: ${themeData.fonts.heading}`">
|
|
Heading Font
|
|
</p>
|
|
<p class="text-sm" :style="`font-family: ${themeData.fonts.body}`">
|
|
Body text font example
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Button Preview -->
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">BUTTONS</p>
|
|
<button class="px-4 py-2 text-sm font-medium text-white rounded-lg w-full"
|
|
:style="`background-color: ${themeData.colors.primary}`">
|
|
Primary Button
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Layout Preview -->
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">LAYOUT</p>
|
|
<div class="text-xs space-y-1">
|
|
<p class="text-gray-700 dark:text-gray-300">
|
|
<span class="font-semibold">Product Layout:</span>
|
|
<span class="capitalize" x-text="themeData.layout.style"></span>
|
|
</p>
|
|
<p class="text-gray-700 dark:text-gray-300">
|
|
<span class="font-semibold">Header:</span>
|
|
<span class="capitalize" x-text="themeData.layout.header"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Link -->
|
|
<div class="pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<a :href="`http://${vendor?.subdomain}.localhost:8000`"
|
|
target="_blank"
|
|
class="flex items-center justify-center px-4 py-2 text-sm font-medium text-purple-700 bg-purple-50 border border-purple-300 rounded-lg hover:bg-purple-100 dark:bg-purple-900 dark:bg-opacity-20 dark:text-purple-300 dark:border-purple-700">
|
|
<span x-html="$icon('eye', 'w-4 h-4 mr-2')"></span>
|
|
View Live Shop
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="{{ url_for('static', path='admin/js/vendor-theme.js') }}"></script>
|
|
{% endblock %} |