brian/batch-color-converter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: brian:v1.0.0
Branches Tags
brian:master
brian:v1.1.1 brian:v1.1.0 brian:v1.0.0
..
compare: brian:8a6b843aea3ed925f782df1fa251f3a7dc377243
Branches Tags
brian:master
brian:v1.1.1 brian:v1.1.0 brian:v1.0.0

4 Commits
v1.0.0 ... 8a6b843aea

Author SHA1 Message Date
Brian Rogers
8a6b843aea wip: failed minor update, going to redo with some build tools 2022-03-24 11:02:21 -06:00
Brian Rogers
f9ffbcbec0 adding Sublime project and workspace files to ignore list 2022-03-24 11:01:53 -06:00
Brian Rogers
30533a4d58 Setting link color 2022-02-10 16:18:36 -07:00
Brian Rogers
b646b3b91f Adding the domain as pseudo-environment variable 2022-02-10 16:13:50 -07:00
5 changed files with 87 additions and 58 deletions
Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -1,5 +1,6 @@
### Project Specific
# Files
env.php
*.zip
*.tar*
@@ -8,7 +9,8 @@
### Editor Specific
# Files
batch-color-converter.sublime-project
batch-color-converter.sublime-workspace
# Directories
.idea

51
css/app.css
View File

@@ -37,3 +37,54 @@
.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";
}
.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;
}

3
env.php.example Normal file
View File

@@ -0,0 +1,3 @@
<?php
$domain = '';

85
index.php
View File

@@ -1,5 +1,7 @@
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<?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">
@@ -15,7 +17,7 @@
<meta name="rating" content="General">
<meta name="url" content="">
<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">
@@ -25,72 +27,43 @@
<meta name="twitter:dnt" content="on">
<!-- analytics -->
<!-- None -->
<!-- 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="humans.txt" rel="author">
<link href="gpl-3.0-standalone.html" rel="copyright">
<link href="<?php echo $domain; ?>/humans.txt" rel="author">
<link href="<?php echo $domain; ?>/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">
<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="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">
<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="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">
<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="css/vendor/tailwind-2.2.4.min.css" rel="stylesheet" media="screen">
<link href="css/app.css" rel="stylesheet" media="screen">
<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">
<script src="js/vendor/vue-2.6.14.min.js" defer></script>
<script src="js/app.js" defer></script>
<!-- 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>
<!-- END OF LINE. -->
</body>
</html>

2
js/app.js
View File

@@ -1,5 +1,5 @@
const clipboard = navigator.clipboard;
// TODO: review convertion methods
let app = new Vue({
el: '#app',