tableau.svg: increase ticket top/bottom overlap

The ticket top/bottom now have some overlap, so that 1px of roundoff
error won't cause a sky-colored line to appear between them.

index.html.in: finish the QR focus toggle

Get the QR focus toggle working "completely."

  * Don't show ticket resize transitions when the page loads
    (Commuter bus / MARC).
  * Fade out the origin/destination and zone when the QR is
    focused (Commuter bus / MARC).
  * Resize the bottom portion of the ticket when the QR code
    is focused, so that the QR sits in the "middle" like it
    does on CharmPass.
  * Don't recompute dimensions if we're going to toggle the
    QR code _off_.

BaltimoreLink tickets are essentially correct. I have yet to compare
against real Commuter bus and MARC train tickets, but the current
behavior is reasonable.

index.html.in: intermediate variables for the client_to_svg ratio

This just makes things a little easier to read.

index.html.in: add two CSS comments

We should mention our transform-box and transform-origin tricks in the
CSS, too.

index.html.in: use a better variable name for the ticketbottombg

We were using "tbg", but "tbbg" is better.

index.html.in,TODO: reimplement ticket sizing

Reimplement the sizing of the commuter bus and MARC train tickets to
account for the split top and bottom halves of the ticket. This is not
too difficult because, this time around, we take advantage of the
transform-box and transform-origin properties to scale only the bottom
half of the ticket, and only downwards.

The new magic numbers were found by comparing old/new versions of the
page in two separate browser tabs. This also happens to fix the
alignment of the grey ticket separator, because the top half of the
ticket (that contains it) is no longer being scaled

Makefile.am: preserve the id of the bottom half of the ticket background

This is the one we need to scale. Any translations that need to happen
can be done on the entire ticket.

tableau.svg: split ticket top and bottom

Eventually we have two problems to solve:

  1. The ticket separator becomes misaligned when you scale the
     ticket background independently
  2. Only the bottom of the ticket is resized when the QR gains
     focus.

Both of these will be easier if we split the bottom part of the ticket
from the top (separator, dimples, and the stuff above them). This
commit does that. The top/bottom parts aren't grouped because we
probably won't need to manipulate them as groups, so for now, there
are just two ticket background layers with an epsilon of overlap.

TODO: add another one about the misaligned separator

index.html.in: more work on the QR focus

Tapping the QR code now brings it into focus and centers it in the
ticket, accompanied by a nice CSS transition that mimics the real
thing. The timing was adjusted to make the transition faster, and a
portability issue was hacked around. What does work, works in both
Firefox and WebKit (on the desktop) at least.

Still to-do is the ticket resizing that takes place when the QR code
gets bigger, and the vertical translation of the (growing) QR code.

index.html.in: add stub QR focus toggle

Begin implementing the QR code focus toggle. For the moment, we only
hide or un-hide the remaining ticket elements when the QR code is
tapped.

TODO: un-mention the QR code background

Makefile.am: don't strip the "qr" code id

tableau.svg: delete pointless "stroke-dasharray: none;" properties

This is the default, and no other elements have it set to inherit
from. In other words, it's not doing anything.

tableau.svg: group QR code with a (white, "invisible") background

The QR code is a path, so the "click" handler that we want to write
for it will only work if the thin black squiggle is tapped. To work
around that, we add a square white background behind the squiggle that
is the same color as the ticket. Afterwards, the "QR code" consists of
the black squiggle and the square; you can click on either.

index.html.in: simplify day/night toggle

Whatever problem was preventing us from swapping day/night colors via
CSS classes is gone. Or at least hiding in a browser that I don't have
in front of me.

TODO: add a prerequisite for the tappable QR code

index.html.in: fix typo "horizonetal"

index.html.in: update snark

One and a half years later, mobile Firefox still doesn't do HTML form
validation.

TODO: replace the rounded corners item

Our corners have been updated, but in the process I noticed that the
tickets have gotten a tiny bit wider.

tableau.svg: less rounding on the code background's corners

Just like the ticket background, the background on the security code
has had its corners un-rounded a bit in the latest version of
CharmPass. Turn ours down from 10 to 5.75 to match.

tableau.svg: delete two trailing CSS semicolons

Inkscape v1.4 wants to do this anyway. Hey, we save two bytes.

tableau.svg: less rounding on ticket background corners

The June 2025 CharmPass has slightly less rounding on the corners of
the tickets, and it actually is noticeable. Update the corners of our
ticket to match.

TODO: add one

People are still using this, so I guess I should keep working on it.

COPYING: add to state the "or later" bit

COPYING: rename to LICENSE

index.html.in: remove links to my personal website

The MTA just sent me a cease and desist for charm-bypass.com, which I
intend to honor. But if somebody else wants to... *shrug* then my name
shouldn't be plastered all over the page.

index.html.in: add New Carrollton MARC info

The code for New Carrollton is NCR (thanks you-know-who), and it's on
the Penn Line, so all we have to do is fill in the zone information
based on the CharmPass prices to each of the other Penn destinations.

index.html.in: add Frederick <-> Washington MARC info

Both Frederick and Washington D.C. are on the Brunswick line, and the
code for Frederick is FRC (thanks you-know-who). The cost of that
ticket is $9 in CharmPass, so that's a Four Zone.

cgi-bin/code.cgi: new CGI script to update the daily code on a web host

This isn't really part of CharmBypass, but it will come in handy on
charm-bypass.com, and where else to put it? It's a CGI script that
allows visitors to update the code. You should probably password
protect it and make it available only to trusted users.

The script is written in POSIX shell script. Why? Because I didn't
really want to venture beyond a single-page, off-line, static HTML
file. But writing a CGI script in POSIX shell was just too dumb to say
no to. It uses sed to parse/edit index.html. Everything about it is
bad.

It can be tested with "python -m http.server --cgi", but the 302
redirect won't work because python doesn't support it.

README: mention that fontforge needs woff2 support

index.html.in: add blank value="" attrs after name="code" on inputs

This will make it easy/safe to use sed every night at 3am to reset
the daily security code (if we typed one in the day before).

index.html.in: link "optional" to daily security code info

.gitignore: ignore "make check" byproducts

index.html.in: add Halethorpe MARC station

index.html.in: name origin/destination <input>s after their values

They were named originX and destinationX (X = 1,2,...), but that makes
it plenty annoying to insert a new one into the list, which I'm about
to do.

index.html.in: add Halethorpe (HAE) zone mapping

index.html.in: move the article links to after the forms

README: start adding substance; in particular, links to my articles

index.html.in: update part 1 URL; add the link to part 2

tableau.svg: overlap the city and its copy by one unit

This fixes a display glitch where there's one pixel of space visible
between the end of the city (or its copy) and the beginning of its
copy (or the original).

README: document the new tidy-html5 test suite requirement

Makefile.am: run the new test suite with "make check"

run-tests.sh: new minimal test suite

index.html.in: speed up the tree-scroll animation some more

They move relatively fast compared to the city skyline.

tableau.svg: strip all stroke-foo properties that follow stroke:none

Inkscape crams all of these properties into the file, I guess so that
information isn't lost if you disable and re-enable the stroke on some
element. And most of them are stripped during minimization, but a
bunch of impotent stroke-widths make it through to the final document.

I've stripped all of it by hand, since removing it all was just as
easy as removing the stroke-width.

tableau.svg: shrink/translate everything down to width=2932

Previously, we had width=2932.6 and a matching viewport. It shouldn't
matter when a viewport is defined, but in the interest of pedantry:
SVG2 punts to CSS2.1 for the width, and CSS2.1 doesn't support user
(SVG internal) coordinates. Instead, width=2932.6 would represent
pixels, and 0.6 pixels doesn't make sense. We avoid the non-issue by
shrinking/translating things a tiny bit.

svgclean.xsl: strip all deprecated xml:space attributes

Makefile.am: prefix svgclean.xsl with $(srcdir) for out-of-source builds

Makefile.am: pass the output file to sfd2woff.ff

This is required as of ce8a3cc46218347579ca35e370d1afb20a5a4f48. We
also prefix the path to sfd2woff.ff with $(srcdir) for out-of-source
builds.

sfd2woff.ff: take the output file as another argument

In out-of-source builds, we can't write the output to the same
directory as the input.

Makefile.am: clean up a bit, and include everything in the dist tarball

.gitignore: ignore the dist tarball

Makefile.am: don't include "doc" and "src" subdirectories

Because they no longer exist.

doc: move into the top-level

We're not doing subdirectories any more, and there are only two files
in here.

doc/LICENSE: rename to doc/COPYING

The name COPYING is supported out-of-the-box by autoconf, and my
preferences just isn't that strong.

index.html.in: speed up the animations

They were running a little bit slower than they should have been.

CharmBypass-Bold.sfd: drop unused glyphs

The only thing we use bold for are the service identifiers, and there
are only two of those: F and R.

index.html.in: replace the hint with a link to my introduction

index.html.in: new slogan and better semantic markup for it

favicon.svg: use an arrow instead of a calligraphic stroke

index.html.in: add missing origin/destination => zone mappings

index.html.in: use a footnote (dagger) to explain the Commuter Bus zone

Because, just kidding, <abbr> doesn't work at all in any mobile
browsers.

index.html.in: use <abbr> to explain the Commuter Bus zone

index.html.in: yet another slogan tweak

index.html.in: work around busted form validation in mobile Firefox

Shit's broke yo:

  https://bugzilla.mozilla.org/show_bug.cgi?id=1510450

So now when the user-agent contains both "firefox" and "mobile", we
display our own errors and disable the submit button.

index.html.in: replace a few tabs with spaces

index.html.in: reword the daily security code hint

index.html.in: set the body font to sans-serif for consistency

All of the SVG fields are sans-serif.

index.html.in: display a special error message if origin == destination

index.html.in: also validate the origin/destination when the page loads

Firefox (at least) retains your origin/destination selections when the
page reloads, so if we don't validate those choices at page load, it's
possible to "skip" validation of an invalid pair by submitting the
form right after a reload.

index.html.in: fix typos in the origin/destination => zone map

index.html.in: validate MARC origin/destination before submission

index.html.in: set default zone, origin, and destination options

index.html.in: add a few more (origin,destination) => zone mappings

index.html.in: use strict equality checks everywhere

index.html.in: big Javascript and comment cleanup

index.html.in: whitespace cleanup

index.html.in: use less vertical (white)space for keyframes

Makefile.am: comment the new favicon target

.gitignore: ignore favicon build products

Makefile.am: base64-encode and substitute the favicon into index.html

index.html.in: replace the favicon link with a @PLACEHOLDER@

This is in preparation for (base64) inlining the favicon data just
like we do with the fonts. The whole thing should be self-contained.

Makefile.am: factor our the "scour" command into a macro

index.html.in: add meta-charset element

Without this, the unicode right-arrow doesn't show up on android. (If
we try to outsmart it with an XML entity reference, our minimization
pipeline deletes the entity reference and puts the arrow back. Thanks
for that.)

index.html.in: do-over of the legend/form spacing

The legend margin doesn't work the same way in Chrome as it does in
Firefox, so here's another attempt to "evenly" space things
vertically.

index.html.in: rename "Get Ticket" -> "Generate Ticket"

Sounds a bit more like what actually happens? I don't know.

tableau.svg: simplify arrow spacing a tiny bit

index.html.in: use <p> instead of <h3> for radio group labels

This is more semantically correct, and (more to the point) looks
better.

index.html.in: boldface and improved margins for <legend>

I said I wanted to leave the menu controls alone, but this just looks
so much better.

index.html.in: set size="2" on daily code inputs

There's no need for all that box.

index.html.in: change the slogan again

index.html.in: link to the new favicon

favicon.svg: new favicon

index.html.in: fix zone handling for non-MARC services

index.html.in: set the MARC origin/destination when applicable

Makefile.am: preserve origin/destination ids during minimization

svgclean.xsl: fix text node processing

We have to use node() instead of "*" to match (child) text nodes.

tableau.svg: add the MARC Train origin/destination

This (finally?) had to be hacked into the XML by hand because inkscape
isn't smart enough to handle multiple <tspan>s within a single <text>
element. We want to keep the origin, arrow, and destination all as
separate tspans (with ids) so that we can change the origin and
destination easily from a script.

Since I was already hacking it by hand, I cleaned up the XML a bit.
Hopefully it can survive a round trip through inkscape in the future.

CharmBypass-Regular.sfd: add unicode arrowright

This is what CharmPass uses for the -> between the MARC Train origin
and destination.