111 lines
6.4 KiB
PHP
111 lines
6.4 KiB
PHP
<?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. -->
|