<?php
require_once "env.php";
?><!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="robots" content="index,follow">
        <meta name="googlebot" content="index,follow">

        <meta name="format-detection" content="telephone=no">
        <meta http-equiv="x-dns-prefetch-control" content="off">

        <meta name="google" content="notranslate">
        <meta name="google" content="nositelinkssearchbox">

        <meta name="rating" content="General">

        <meta name="url" content="<?php echo $domain; ?>/">
        <meta name="subject" content="CSS color conversion tool">
        <meta name="description" content="Convert colors in a batch among HSL(a), RGB(a), and Hex">

        <title>Batch Color Converter</title>

        <!-- Privacy -->
        <meta name="twitter:dnt" content="on">

        <!-- analytics -->
        <!-- none -->

        <!-- Helps prevent duplicate content issues -->
        <link href="<?php echo $domain; ?>" rel="canonical">

        <!-- Android web manifest file -->
        <!-- <link href="<?php echo $domain; ?>/.webmanifest" rel="manifest"> -->

        <!-- Files listing who was involved in this site and copyrights -->
        <link href="<?php echo $domain; ?>/humans.txt" rel="author">
        <link href="<?php echo $domain; ?>/gpl-3.0-standalone.html" rel="copyright">

        <!-- Favicon -->
        <link href="<?php echo $domain; ?>/favicon.ico" rel="icon" sizes="16x16" type="image/icon">
        <link href="<?php echo $domain; ?>/favicon.svg" rel="icon" type="image/svg+xml">
        <link href="<?php echo $domain; ?>/favicon.png" rel="icon" sizes="192x192">

        <!-- Font preloads (should be done for each font file) -->
        <!-- Open Sans license: fonts/OpenSans/LICENSE.txt -->
        <link href="<?php echo $domain; ?>/fonts/OpenSans/OpenSans-Regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
        <link href="<?php echo $domain; ?>/fonts/OpenSans/OpenSans-Bold.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
        <!-- Open Sans license: fonts/Ubuntu/UFL.txt -->
        <link href="<?php echo $domain; ?>/fonts/Ubuntu/Ubuntu-Regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
        <link href="<?php echo $domain; ?>/fonts/Ubuntu/Ubuntu-Bold.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">

        <!-- CSS -->
        <link href="<?php echo $domain; ?>/css/vendor/tailwind-2.2.4.min.css" rel="stylesheet" media="screen">
        <link href="<?php echo $domain; ?>/css/app.css" rel="stylesheet" media="screen">

        <!-- JS that must be executed before the document is loaded -->
        <script src="<?php echo $domain; ?>/js/vendor/vue-2.6.14.min.js" defer></script>
        <script src="<?php echo $domain; ?>/js/app.js" defer></script>
        <!-- -->
    </head>
    <body class="font-open-sans antialiased">
        <div id="app" class="flex flex-col items-center justify-center w-full min-h-screen">
            <div v-show="showStatusMessage" class="w-1/5 text-center px-4 py-3 uppercase font-bold bg-green-300 text-green-600 fixed top-0 mt-4 rounded z-10">Copied!</div>
            <div v-show="showErrorMessage" class="w-1/5 text-center px-4 py-3 uppercase font-bold bg-red-300 text-red-600 fixed top-0 mt-4 rounded z-10">Failed to copy</div>
            <div class="w-3/5">
                <h1 class="text-center text-2xl font-bold">Batch Color Converter</h1>

                <p class="mt-6">Click a particular cell in the table with HSL, RGB, or hex to copy that value.</p>

                <button type="button" class="block w-full py-4 uppercase font-bold text-white bg-pink-600 rounded mt-6 mb-8" v-on:click="batchConvert()">Convert</button>

                <div class="flex flex-row mb-8">
                    <div class="flex w-1/3 mr-4">
                        <textarea v-model="inputBox" class="resize-y w-full h-96 border border-gray-200 shadow rounded py-2 px-4" placeholder="#fff"></textarea>
                    </div>
                    <div class="flex flex-col w-2/3 ml-4">
                        <table class="font-ubuntu w-full">
                            <thead>
                                <tr>
                                    <th class="p-4">Preview</th>
                                    <th class="p-4">Hex(a)</th>
                                    <th class="p-4">RGB(a)</th>
                                    <th class="p-4">HSL(a)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="color in convertedColors" class="border-t border-gray-300">
                                    <td v-show="color.error" class="text-center px-2 py-4 bg-red-200 text-red-700 font-bold" colspan="4">Error with {{ color.raw }}</td>
                                    <td v-show="!color.error">
                                        <div class="block mx-2 my-4" style="height: 25px;" :style="{ background: color.hex }"></div>
                                    </td>
                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hex)">{{ color.hex }}</div></td>
                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.rgb)">{{ color.rgb }}</div></td>
                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hsl)">{{ color.hsl }}</div></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 p-8 text-center w-full">
            You can take a look at <a href="https://git.ditoforge.com/brian/batch-color-converter" title="Source code for this page" class="text-blue-400 font-bold hover:text-blue-700 transition">this terrible code over on my git server</a>.
        </div>
    </body>
</html>
<!-- END OF LINE. -->
