95 lines
5.1 KiB
PHP
95 lines
5.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en-US" class="no-js">
|
|
<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="">
|
|
<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 -->
|
|
|
|
<!-- Files listing who was involved in this site and copyrights -->
|
|
<link href="humans.txt" rel="author">
|
|
<link href="gpl-3.0-standalone.html" rel="copyright">
|
|
|
|
<!-- Favicon -->
|
|
<link href="favicon.ico" rel="icon" sizes="16x16" type="image/icon">
|
|
<link href="favicon.svg" rel="icon" type="image/svg+xml">
|
|
<link href="favicon.png" rel="icon" sizes="192x192">
|
|
|
|
<!-- Font preloads (should be done for each font file) -->
|
|
<!-- Open Sans license: fonts/OpenSans/LICENSE.txt -->
|
|
<link href="fonts/OpenSans/OpenSans-Regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
|
|
<link href="fonts/OpenSans/OpenSans-Bold.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
|
|
<!-- Open Sans license: fonts/Ubuntu/UFL.txt -->
|
|
<link href="fonts/Ubuntu/Ubuntu-Regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
|
|
<link href="fonts/Ubuntu/Ubuntu-Bold.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
|
|
|
|
<!-- CSS -->
|
|
<link href="css/vendor/tailwind-2.2.4.min.css" rel="stylesheet" media="screen">
|
|
<link href="css/app.css" rel="stylesheet" media="screen">
|
|
|
|
<script src="js/vendor/vue-2.6.14.min.js" defer></script>
|
|
<script src="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 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>
|
|
</body>
|
|
</html>
|