wip: failed minor update, going to redo with some build tools
This commit is contained in:
parent
f9ffbcbec0
commit
8a6b843aea
GPG Key ID:
DE1A5390A3B84CD8
51
css/app.css
51
css/app.css
@ -37,3 +37,54 @@
|
|||||||
.font-ubuntu {
|
.font-ubuntu {
|
||||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
gap: 2em 2em;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-areas:
|
||||||
|
"wrapper";
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
gap: 2em 2em;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-areas:
|
||||||
|
"grid-header"
|
||||||
|
"grid-main"
|
||||||
|
"grid-footer";
|
||||||
|
grid-area: wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-header {
|
||||||
|
grid-area: grid-header;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-main {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 30% 1fr;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
gap: 2em 2em;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-areas:
|
||||||
|
"input-container output-wrapper";
|
||||||
|
grid-area: grid-main;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-container {
|
||||||
|
grid-area: input-container;
|
||||||
|
}
|
||||||
|
|
||||||
|
.output-wrapper {
|
||||||
|
grid-area: output-wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-footer {
|
||||||
|
grid-area: grid-footer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
45
index.php
45
index.php
@ -62,49 +62,8 @@ require_once "env.php";
|
|||||||
<!-- -->
|
<!-- -->
|
||||||
</head>
|
</head>
|
||||||
<body class="font-open-sans antialiased">
|
<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>
|
|
||||||
|
<!-- END OF LINE. -->
|
||||||
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
<!-- END OF LINE. -->
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user