Controtto

<section class="mx-auto max-w-screen-2xl"> <div class="hidden lg:block rounded-md m-4 p-4 flex items-center justify-center bg-white flex-wrap gap-x-1 divide-gray-200 dark:bg-neutral-800 dark:divide-gray-900 animate__animated animate__fadeIn"> <div class="flex flex-wrap items-center"> <svg class="flex w-7 h-7 mx-2 text-gray-700 dark:text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <h1 class="flex text-2xl font-semibold text-gray-700 capitalize lg:text-3xl dark:text-white"> Settings </h1> </div> <div class="mt-8 lg:-mx-6 lg:flex lg:items-center"> <img class="object-cover w-full lg:mx-6 lg:w-1/2 rounded-xl h-68 lg:h-72" src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="" /> <div class="mt-6 lg:w-1/2 lg:mt-0 lg:mx-6"> <p class="text-sm text-blue-500 uppercase">Settings</p> <a href="#" class="block mt-4 text-2xl font-semibold text-gray-800 hover:underline dark:text-white"> Environment variables </a> <p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm"> All settings are set up with environment variables. This page only displays which setting where set. To check which configuratoins are available please read the documentation. or check <a href="https://github.com/contre95/controtto/blob/main/.env.example" target="_blank" class="text-blue-400">.env.example</a> file. </p> <a href="https://github.com/contre95/controtto" target="_blank" class="inline-block mt-2 text-blue-500 underline hover:text-blue-400">Read more</a> </div> </div> </div> <div class="rounded-md m-4 p-4 flex flex-wrap gap-x-1 bg-white divide-gray-200 dark:divide-gray-900 dark:bg-neutral-800 animate__animated animate__fadeIn"> <!-- <form> --> <form hx-ext="debug"> <p class="text-sm text-blue-500 uppercase">Market Traders API</p> <br /> {{ range .MarketTraders }} <div class="flex flex-wrap items-center"> <img src="{{ .MarketLogo }}" alt="logo" class="w-8 h-8 "> <div> {{ if .IsSet }} <img src="/assets/img/checkok.svg" class="w-6 h-6 mx-4" /> {{ else }} <img src="/assets/img/checkno.svg" class="w-6 h-6 mx-4" /> {{ end }} </div> <div> <label for="email" class="block text-md text-gray-500 dark:text-gray-300 mb-1"> {{ .MarketName }} <small> Get it <a class="text-blue-500" href="{{ .ProviderURL }}" target="_blank">here</a>. Var: <code class="p-0.5 text-center {{ if .IsSet }}text-green-700 bg-green-100{{else}}bg-red-100 text-red-700{{end}} dark:bg-gray-700 dark:text-gray-400 px-1 rounded" > {{ .Env }}</code> <br> {{ if .IsSet }} {{ .Details }} {{ end }} <div class="relative"> <input type="password" name="{{ .MarketKey }}" value="{{ .Token }}" id="market-{{ .MarketKey }}" class="w-full p-1 pl-2 my-3 bg-white border rounded-md dark:bg-neutral-900 dark:border-neutral-700" autocomplete="off" /> <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 dark:text-gray-500" onclick="togglePasswordVisibility('market-{{ .MarketKey }}')"> Reveal <img src="/assets/img/pass.svg" class="w-6 h-6 mx-1" /> </button> </div> </small> </label> </div> <div class="relative flex items-center mt-2"> <div class="flex items-center gap-x-3"></div> </div> </div> <script> function togglePasswordVisibility(inputId) { const inputField = document.getElementById(inputId); const type = inputField.type === "password" ? "text" : "password"; inputField.type = type; } </script> {{end}} <p class="text-sm text-blue-500 uppercase">Price Providers API</p> <br /> <p class="text-xs text-gray-400 uppercase">Private</p> {{ range .PriceProviders }} {{ if .NeedsToken }} <div class="flex flex-wrap items-center"> <img src="{{ .ProviderLogo }}" alt="logo" class="w-8 h-8 "> <div> {{ if .IsSet }} <img src="/assets/img/checkok.svg" class="w-6 h-6 mx-4" /> {{ else }} <img src="/assets/img/checkno.svg" class="w-6 h-6 mx-4" /> {{ end }} </div> <div> <label for="email" class="block text-md text-gray-500 dark:text-gray-300 mb-1"> {{ .ProviderName }} <small> Get it <a class="text-blue-500" href="{{ .ProviderURL }}" target="_blank">here</a> and set <code class="p-0.5 text-center {{ if .IsSet }}text-green-700 bg-green-100{{else}}bg-red-100 text-red-700{{end}} dark:bg-gray-700 dark:text-gray-400 px-1 rounded" > {{ .Env }} </code> <div class="relative"> <input type="password" name="{{ .ProviderKey }}" value="{{ .Token }}" id="{{ .ProviderKey }}" class="w-full p-1 pl-2 my-3 bg-white border rounded-md dark:bg-neutral-900 dark:border-neutral-700" autocomplete="off" /> <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 dark:text-gray-500" onclick="togglePasswordVisibility('{{ .ProviderKey }}')"> Reveal <img src="/assets/img/pass.svg" class="w-6 h-6 mx-1" /> </button> </div> </small> </label> </div> <div class="relative flex items-center mt-2"> <div class="flex items-center gap-x-3"></div> </div> </div> <script> function togglePasswordVisibility(inputId) { const inputField = document.getElementById(inputId); const type = inputField.type === "password" ? "text" : "password"; inputField.type = type; } </script> {{ end }} {{end}} <p class="text-xs text-gray-400 uppercase">Public</p> {{ range .PriceProviders }} {{ if not .NeedsToken }} <div class="flex flex-wrap items-center"> <div> <label class="inline-flex items-center cursor-pointer my-2"> <img src="{{ .ProviderLogo }}" alt="logo" class="w-8 h-8 ml-2 "> <div> {{ if .IsSet }} <img src="/assets/img/checkok.svg" class="w-6 h-6 mx-3" /> {{ else }} <img src="/assets/img/checkno.svg" class="w-6 h-6 mx-3" /> {{ end }} </div> <span class="ms-3 mr-3 block text-md text-gray-500 dark:text-gray-300">{{ .ProviderName }}</span> <input class="sr-only peer" type="checkbox" id="{{ .ProviderKey }}" name="{{ .ProviderKey }}" value="{{ .IsSet }}" {{ if .IsSet }}checked{{ end }} /> <div class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"> </div> </div> <small class="ml-2 text-gray-500 dark:text-gray-300 font-normal italic"> Or set <code class="p-0.5 text-center {{ if .IsSet }}text-green-700 bg-green-100{{else}}bg-red-100 text-red-700{{end}} dark:bg-gray-700 dark:text-gray-400 px-1 rounded" > {{ .Env }} </code> </small> <div class="relative flex items-center mt-2"> <div class="flex items-center gap-x-3"></div> </div> </div> {{end}} {{ end }} <br /> <p class="text-sm text-blue-500 uppercase">Pairs settings</p> <br /> <label class="inline-flex items-center cursor-pointer my-2"> <input class="sr-only peer" type="checkbox" id="uncommon" name="uncommon_pairs" value="true" {{ if .Uncommon }}checked{{ end }} /> <div class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"> </div> <span class="ms-2 block text-md text-gray-500 dark:text-gray-300">Uncommon pairs</span> <small class="ml-2 text-blue-400 font-normal italic"> <a href="https://github.com/contre95/controtto/blob/ec75328c2ba8cfff0bc90f85430099dccd7bd5b8/DOCS.md#uncommon-pairs" target="_blank"> + info </a> </small> </label> <br /> <button type="submit" hx-post="/settings/edit" hx-target="#mitoast" class="my-4 relative inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-white bg-slate-600 border border-slate-700 rounded-xl shadow-sm transition-all hover:bg-slate-700 active:scale-95 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:bg-slate-500 dark:hover:bg-slate-400 dark:border-slate-600 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"> Save Changes </button> </form> </div> <div class="px-6 pb-10 mx-auto animate__animated animate__fadeInLeft"> <small class="text-gray-400 font-normal italic"> For further information on how to deploy or set up the product plese refer to <a href="https://github.com/contre95/controtto" target="_blank" class="text-blue-300">github.com/contre95/controtto</a> </small> <button class="lg:hidden sidebtn flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-neutral-800 dark:hover:text-gray-200 hover:text-gray-700" onclick="toggleDarkMode()"> <div> <i class="fa fa-light mr-3 fa-moon text-2xl dark:text-gray-200"></i> Dark/Light </div> </button> </div> </section>