Added a hackton of CSS just for a little checkbox

README.md

@@ -67,4 +67,6 @@ CatNote is a minimalist web application that lets you generate Markdown-based re
 
 This project is licensed under the terms of the GNU General Public License v3.0 or later. See [COPYING](./COPYING) for details.
 
+The Ubuntu Font is licensed under the Ubuntu Font Licence 1.0. See [UFL.txt](./fonts/ubuntu/UFL.txt) for details.
+
 > Disclaimer: While a license was only added after the project’s initial commits, the current license applies retroactively to all previous commits of this repository.

app.py

@@ -12,10 +12,10 @@ import argparse
 app = Flask(__name__)
 app.secret_key = 'TpfxYMxUJxJMtCCTraBSg1rbd6NLz38JTmIfpBLsotcI47EqXU'
 
-FONT_PATH = "/usr/share/fonts/truetype/DejaVuSansMono.ttf"
+FONT_PATH = "./fonts/ubuntu/Ubuntu-Regular.ttf"
-FONT_PATH_BOLD = "/usr/share/fonts/truetype/DejaVuSansMono-Bold.ttf"
+FONT_PATH_BOLD = "./fonts/ubuntu/Ubuntu-Bold.ttf"
-FONT_PATH_OBLIQUE = "/usr/share/fonts/truetype/DejaVuSansMono-Oblique.ttf"
+FONT_PATH_OBLIQUE = "./fonts/ubuntu/Ubuntu-Italic.ttf"
-FONT_PATH_BOLDITALIC = "/usr/share/fonts/truetype/DejaVuSansMono-BoldOblique.ttf"
+FONT_PATH_BOLDITALIC = "./fonts/ubuntu/Ubuntu-BoldItalic.ttf"
 FONT_SIZE = 24
 HEADER_SIZE_1 = 56
 HEADER_SIZE_2 = 34
@@ -326,6 +326,89 @@ HTML_FORM = '''
       50% { left: calc(100% - 40%); }
       100% { left: 0%; }
     }
+    /* this next bit is a mess but it works */
+    .options-bannermode {
+      display: flex;
+      align-items: left;
+      justify-content: space-between;
+      margin-left: 1em;
+      margin-right: 1em;
+    }
+    .options-bannermode label {
+      font-size: 1em;
+      color: #eee;
+      margin-bottom: 1em;
+      display: block;
+    }
+    .options-bannermode-inner {
+      display: block;
+      align-items: center;
+      position: relative;
+      padding-left: 35px;
+      margin-bottom: 12px;
+      cursor: pointer;
+      font-size: 1em;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    /* Hide the browser's default checkbox */
+    .options-bannermode-inner input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      height: 0;
+      width: 0;
+    }
+
+    /* Create a custom checkbox */
+    .checkmark {
+      position: absolute;
+      top: -25%;
+      left: 0;
+      height: 25px;
+      width: 25px;
+      background-color: #181c1f;
+      border-radius: 0.35em;
+      border: 1.5px solid #444;
+    }
+
+    /* On mouse-over, add a grey background color */
+    .options-bannermode-inner:hover input ~ .checkmark {
+      filter: brightness(1.12);
+    }
+
+    /* When the checkbox is checked, add a blue background */
+    .options-bannermode-inner input:checked ~ .checkmark {
+      background: linear-gradient(135deg, #8ee3c1, #35a7ff);
+    }
+
+    /* Create the checkmark/indicator (hidden when not checked) */
+    .checkmark:after {
+      content: "";
+      position: absolute;
+      display: none;
+    }
+
+    /* Show the checkmark when checked */
+    .options-bannermode-inner input:checked ~ .checkmark:after {
+      display: block;
+    }
+
+    /* Style the checkmark/indicator */
+    .options-bannermode-inner .checkmark:after {
+      left: 9px;
+      top: 5px;
+      width: 5px;
+      height: 10px;
+      border: solid white;
+      border-width: 0 3px 3px 0;
+      -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
     @media (max-width: 1000px) {
       body {
         font-size: 1.28em !important;
@@ -377,7 +460,22 @@ HTML_FORM = '''
         font-size: 1.16em !important;
         padding: 0.6em 1.2em;
       }
-    }
+      /* i'm so sorry, i'm not bothered to find out why or how this works */
+      .options-bannermode-inner .checkmark {
+        top: -10%;
+      }
+      .options-bannermode-inner .checkmark::after {
+        left: 13px;
+        top: 7px;
+        transform: rotate(45deg) scale(1.66);
+      }
+      .checkmark {
+        width: 1.2em;
+        height: 1.2em;
+      }
+      .options-bannermode-inner {
+        padding-left: 55px;
+      }
   </style>
 </head>
 <body>
@@ -392,10 +490,11 @@ HTML_FORM = '''
         <input type="file" name="userimg" accept="image/png, image/jpeg"><br>
         <div class="options">
         <div class="options-bannermode">
-            <label for="bannermode">
+          <label class="options-bannermode-inner">
             <input type="checkbox" name="bannermode" value="1" {% if current_bannermode %}checked{% endif %}>
+            <span class="checkmark"></span>
             Modo Banner (vertical)
-            </label>
+          </label>
           </div>
           <div class="options-dithering">
             <label for="dithering">Dithering:</label>
@@ -898,3 +997,4 @@ if __name__ == "__main__":
     parser.add_argument('-p', '--port', type=int, default=5000, help='Port to run the server on (default: 5000)')
     args = parser.parse_args()
     app.run(host='0.0.0.0', port=args.port)
+  

fonts/ubuntu/UFL.txt

@@ -0,0 +1,96 @@
+-------------------------------
+UBUNTU FONT LICENCE Version 1.0
+-------------------------------
+
+PREAMBLE
+This licence allows the licensed fonts to be used, studied, modified and
+redistributed freely. The fonts, including any derivative works, can be
+bundled, embedded, and redistributed provided the terms of this licence
+are met. The fonts and derivatives, however, cannot be released under
+any other licence. The requirement for fonts to remain under this
+licence does not require any document created using the fonts or their
+derivatives to be published under this licence, as long as the primary
+purpose of the document is not to be a vehicle for the distribution of
+the fonts.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this licence and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Original Version" refers to the collection of Font Software components
+as received under this licence.
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to
+a new environment.
+
+"Copyright Holder(s)" refers to all individuals and companies who have a
+copyright ownership of the Font Software.
+
+"Substantially Changed" refers to Modified Versions which can be easily
+identified as dissimilar to the Font Software by users of the Font
+Software comparing the Original Version with the Modified Version.
+
+To "Propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification and with or without charging
+a redistribution fee), making available to the public, and in some
+countries other activities as well.
+
+PERMISSION & CONDITIONS
+This licence does not grant any rights under trademark law and all such
+rights are reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of the Font Software, to propagate the Font Software, subject to
+the below conditions:
+
+1) Each copy of the Font Software must contain the above copyright
+notice and this licence. These can be included either as stand-alone
+text files, human-readable headers or in the appropriate machine-
+readable metadata fields within text or binary files as long as those
+fields can be easily viewed by the user.
+
+2) The font name complies with the following:
+(a) The Original Version must retain its name, unmodified.
+(b) Modified Versions which are Substantially Changed must be renamed to
+avoid use of the name of the Original Version or similar names entirely.
+(c) Modified Versions which are not Substantially Changed must be
+renamed to both (i) retain the name of the Original Version and (ii) add
+additional naming elements to distinguish the Modified Version from the
+Original Version. The name of such Modified Versions must be the name of
+the Original Version, with "derivative X" where X represents the name of
+the new work, appended to that name.
+
+3) The name(s) of the Copyright Holder(s) and any contributor to the
+Font Software shall not be used to promote, endorse or advertise any
+Modified Version, except (i) as required by this licence, (ii) to
+acknowledge the contribution(s) of the Copyright Holder(s) or (iii) with
+their explicit written permission.
+
+4) The Font Software, modified or unmodified, in part or in whole, must
+be distributed entirely under this licence, and must not be distributed
+under any other licence. The requirement for fonts to remain under this
+licence does not affect any document created using the Font Software,
+except any version of the Font Software extracted from a document
+created using the Font Software may only be distributed under this
+licence.
+
+TERMINATION
+This licence becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF
+COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
+DEALINGS IN THE FONT SOFTWARE.