166 lines
12 KiB
PHP
166 lines
12 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Theme';
|
|
$subTitle = 'Settings - Theme';
|
|
$script = '<script>
|
|
// ================== Image Upload Js Start ===========================
|
|
function readURL(input, previewElementId) {
|
|
if (input.files && input.files[0]) {
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
$("#" + previewElementId).css("background-image", "url(" + e.target.result + ")");
|
|
$("#" + previewElementId).hide();
|
|
$("#" + previewElementId).fadeIn(650);
|
|
}
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
}
|
|
|
|
$("#imageUpload").change(function() {
|
|
readURL(this, "previewImage1");
|
|
});
|
|
|
|
$("#imageUploadTwo").change(function() {
|
|
readURL(this, "previewImage2");
|
|
});
|
|
// ================== Image Upload Js End ===========================
|
|
</script>';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="card h-full rounded-lg border-0">
|
|
<div class="card-body p-6">
|
|
<form action="#">
|
|
<div class="grid md:grid-cols-2 gap-x-5">
|
|
<div class="mb-5">
|
|
<label class="inline-block font-semibold text-secondary-light text-base inline-block mb-2 dark:text-white" for="imageUpload">Logo (140px X 140px)</label>
|
|
<input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="imageUpload" type="file">
|
|
|
|
<div class="avatar-upload mt-4">
|
|
<div class="avatar-preview">
|
|
<div id="previewImage1" class=" w-[120px] h-[120px] rounded-lg border border-neutral-300 bg-center bg-no-repeat bg-cover" style="background-image: url('{{ asset('assets/images/payment/upload-image.png') }}')"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-5">
|
|
<label class="inline-block font-semibold text-secondary-light text-base inline-block mb-2 dark:text-white" for="imageUploadTwo">Logo (140px X 140px)</label>
|
|
<input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="imageUploadTwo" type="file">
|
|
|
|
<div class="avatar-upload mt-4">
|
|
<div class="avatar-preview">
|
|
<div id="previewImage2" class=" w-[120px] h-[120px] rounded-lg border border-neutral-300 bg-center bg-no-repeat bg-cover" style="background-image: url('{{ asset('assets/images/payment/upload-image.png') }}')"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<h6 class="text-xl mb-4">Theme Colors</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-5">
|
|
<div class="2xl:col-span-2 md:col-span-4 sm:col-span-6 col-span-12 relative">
|
|
<input class="form-check-input theme-setting-input" name="theme-setting" type="radio" id="blue" hidden>
|
|
<label for="blue" class="theme-setting-label border border-neutral-200 dark:border-neutral-600 rounded-lg p-2 block">
|
|
<span class="flex items-center gap-2">
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-primary-600 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Blue</span>
|
|
</span>
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-primary-100 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Focus</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="2xl:col-span-2 md:col-span-4 sm:col-span-6 col-span-12 relative">
|
|
<input class="form-check-input theme-setting-input" name="theme-setting" type="radio" id="magenta" hidden>
|
|
<label for="magenta" class="theme-setting-label border border-neutral-200 dark:border-neutral-600 rounded-lg p-2 block">
|
|
<span class="flex items-center gap-2">
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-purple-600 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Magenta</span>
|
|
</span>
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-purple-600 dark:bg-purple-600/25 text-purple-600 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Focus</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="2xl:col-span-2 md:col-span-4 sm:col-span-6 col-span-12 relative">
|
|
<input class="form-check-input theme-setting-input" name="theme-setting" type="radio" id="orange" hidden>
|
|
<label for="orange" class="theme-setting-label border border-neutral-200 dark:border-neutral-600 rounded-lg p-2 block">
|
|
<span class="flex items-center gap-2">
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-warning-600 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Orange</span>
|
|
</span>
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-warning-100 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Focus</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="2xl:col-span-2 md:col-span-4 sm:col-span-6 col-span-12 relative">
|
|
<input class="form-check-input theme-setting-input" name="theme-setting" type="radio" id="green" hidden>
|
|
<label for="green" class="theme-setting-label border border-neutral-200 dark:border-neutral-600 rounded-lg p-2 block">
|
|
<span class="flex items-center gap-2">
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-success-600 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Green</span>
|
|
</span>
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-success-100 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Focus</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="2xl:col-span-2 md:col-span-4 sm:col-span-6 col-span-12 relative">
|
|
<input class="form-check-input theme-setting-input" name="theme-setting" type="radio" id="red" hidden>
|
|
<label for="red" class="theme-setting-label border border-neutral-200 dark:border-neutral-600 rounded-lg p-2 block">
|
|
<span class="flex items-center gap-2">
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-danger-600 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Red</span>
|
|
</span>
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-danger-100 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Focus</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="2xl:col-span-2 md:col-span-4 sm:col-span-6 col-span-12 relative">
|
|
<input class="form-check-input theme-setting-input" name="theme-setting" type="radio" id="blueDark" hidden>
|
|
<label for="blueDark" class="theme-setting-label border border-neutral-200 dark:border-neutral-600 rounded-lg p-2 block">
|
|
<span class="flex items-center gap-2">
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-info-600 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Blue Dark</span>
|
|
</span>
|
|
<span class="w-1/2 text-center">
|
|
<span class="h-[72px] w-full bg-info-100 rounded"></span>
|
|
<span class="text-secondary-light text-base font-semibold mt-2">Focus</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-center gap-3 mt-6 col-span-12">
|
|
<button type="reset" class="border border-danger-600 hover:bg-danger-200 text-danger-600 text-base px-10 py-[11px] rounded-lg">
|
|
Reset
|
|
</button>
|
|
<button type="submit" class="btn btn-primary border border-primary-600 text-base px-6 py-3 rounded-lg">
|
|
Save Change
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|