{{ template "headersMenu.html" . }}

<style>
.color-picker {
	width: 36px;
	height: 36px;
	border-radius: 0.25rem;
	cursor: pointer;
}
</style>

<section class="flex relative justify-center items-center py-20">
	<div class="container" id="EditView">
        <div class="flex flex-col md:flex-row">
            <div class="w-full">
                <div id="DesignView" class="p-6">
                    <div class="mb-4">
                        <label class="block mb-2 text-sm font-bold text-gray-700" for="frame-color">
                            FRAME
                        </label>
                        <div class="flex items-center mb-4">
                            <div class="mr-2 color-picker" style="background-color: #1974D2;"></div>
                            <input id="frame-color" type="text" value="#1974D2" class="px-3 py-2 leading-tight text-gray-700 rounded border shadow appearance-none focus:outline-none focus:shadow-outline">
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block mb-2 text-sm font-bold text-gray-700" for="qr-color">
                            QR CODE
                        </label>
                        <div class="flex items-center mb-4">
                            <div class="mr-2 color-picker" style="background-color: #1B294B;"></div>
                            <input id="qr-color" type="text" value="#1B294B" class="px-3 py-2 leading-tight text-gray-700 rounded border shadow appearance-none focus:outline-none focus:shadow-outline">
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block mb-2 text-sm font-bold text-gray-700" for="logo">
                            LOGO
                        </label>
                        <div class="flex items-center mb-4">
                            <img src="https://via.placeholder.com/36?text=Logo" alt="Logo" class="mr-2">
                            <input id="logo" type="text" placeholder="Upload Logo" class="px-3 py-2 leading-tight text-gray-700 rounded border shadow appearance-none focus:outline-none focus:shadow-outline">
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block mb-2 text-sm font-bold text-gray-700" for="short-url">
                            SHORT URL
                        </label>
                        <div class="flex items-center">
                            <input id="short-url" type="text" value="https://lead.me/your-url" class="px-3 py-2 w-full leading-tight text-gray-700 rounded border shadow appearance-none focus:outline-none focus:shadow-outline">
                            <button class="ml-2 text-blue-500 hover:text-blue-700">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 13.121a1.5 1.5 0 001.415 0l5.364-3.121m.707 6.414a1.5 1.5 0 00-1.414 0l-5.364 3.121-2.121-2.122a1.5 1.5 0 010-2.121l2.12-2.121m7.07 0a1.5 1.5 0 010 2.122L12 12m0 0l2.121-2.121a1.5 1.5 0 012.121 0l2.121 2.121a1.5 1.5 0 010 2.121L16.242 16.24a1.5 1.5 0 01-2.121 0L12 12z"></path></svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{ template "footer.html" . }}