Initial commit

1 files changed, 219 insertions, 0 deletions

diff --git a/tools/image-splitter/style.css b/tools/image-splitter/style.css
new file mode 100644
index 0000000..a0f6691
--- /dev/null
+++ b/tools/image-splitter/style.css
@@ -0,0 +1,219 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400');
+
+:root {
+    --black: #1b1918;
+    --dark: #222222;
+    --blue: #8487FF;
+    --grey: #c5c8c6;
+    --reddish: #d75f87;
+    --orange: #cb8700;
+    --white: #ededed;
+    --lblue: #87AFD7;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--grey);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--white);
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-track:hover {
+    background: var(--black);
+}
+
+* {
+    font-weight: 400;
+    font-family: 'Roboto Mono', monospace;
+}
+
+html, body {
+    padding: 0;
+    background-color: var(--dark);
+    color: var(--grey);
+    overflow-x: hidden;
+    text-align: center;
+    user-select: none;
+}
+
+h1 {
+    color: var(--orange);
+    font-size: 2rem;
+}
+
+h2 {
+    font-size: 1.2rem;
+}
+
+table {
+    width: 100%;
+    margin: 10px;
+    text-align: center;
+}
+
+div {
+    margin-top: 10px;
+}
+
+td#preview {
+    color: var(--lblue);
+}
+
+td {
+    vertical-align: top;
+    background-color: var(--black);
+    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2);
+    padding: 50px;
+    display: inline-block;
+    margin: 10px;
+}
+
+td:first-child {
+    text-align: center;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+input[type="number"], input[type="text"] {
+    background-color: var(--white);
+    margin: auto;
+    border: 0;
+    padding: 5px;
+    outline: none;
+}
+
+input[type="submit"] {
+    margin: auto;
+    margin-top: 10px;
+    background-color: var(--black);
+    cursor: pointer;
+    border: 2px solid var(--white);
+    color: var(--white);
+    outline: none;
+    padding: 0.5rem 0.8rem;
+}
+
+input[type="submit"]:hover {
+    background-color: var(--white);
+    color: var(--black);
+}
+
+label[for="file"] {
+    padding: 5px;
+    color: var(--reddish);
+    border: 2px solid var(--reddish);
+    cursor: pointer;
+}
+
+label[for="file"]:hover {
+    color: var(--black);
+    background-color: var(--reddish);
+}
+
+label {
+    font-size: 0.95rem;
+}
+
+input#shrink {
+    opacity: 0;
+    position: absolute;
+}
+
+label[for="shrink"] {
+    cursor: pointer;
+    user-select: none;
+}
+
+i.fa-check {
+    color: rgb(7, 219, 7);
+}
+
+i.fa-times {
+    color: rgb(255, 42, 42);
+}
+
+i.fa-check, i.fa-times {
+    font-size: 1.1rem;
+    vertical-align: middle;
+    width: 1.2rem;
+}
+
+label, input, textarea, strong { 
+    display: block; 
+    margin: 0.5rem;
+}
+
+h4 {
+    display: block;
+    margin: 0;
+}
+
+td a {
+    text-decoration: none;
+    color: var(--blue);
+    font-size: 1.1em;
+    cursor: pointer;
+    outline: none;
+    padding: 5px 20px;
+    border: 0;
+    margin: 10px;
+    vertical-align: middle;
+    background-color: transparent;
+    border: 2px solid var(--blue);
+}
+
+a:hover {
+    color: var(--black);
+    background-color: var(--blue);
+}
+
+textarea {
+    background-color: var(--white);
+    color: var(--black);
+    outline: none;
+    border: 0;
+    margin: auto;
+    width: 90%;
+    height: 200px;
+    margin-top: 15px;
+}
+
+div.imageRow {
+    display: block;
+    padding: 0;
+    margin: 0;
+}
+
+div.imageRow img {
+    border: .8px solid var(--reddish);
+}
+
+div#footer {
+    margin: 100px 0 0 0;
+    padding: 50px 0;
+    background: var(--black);
+    width: 100%;
+}
+
+div#footer h1 {
+    font-size: 2rem;
+}
+
+div#footer a {
+    color: var(--white);
+}
+
+.hideme {
+    opacity: 0;
+}
\ No newline at end of file