TODO: remove

Everything's done. PWAs are too much of a hassle (particularly in
Firefox), and being able to use webmail as a workaround is hilarious.

README: mention charm-bypass.com in the past tense

Makefile.am: include the cgi-bin directory in the release tarball

Just in case someone wants to go hard.

index.html.in,TODO: fix the QR placement issue

It turns out, we DON'T need to adjust our vertical offsets by the
svg-to-client unit ratio. I don't fully understand why, but I think it
has something to do with declaring the height of the tableau to be
fixed at 100% = 1080, and modern browsers treating "pixels" as an
abstraction. In any case, it works fine without the fudge factor in
both WebKit and Firefox.

index.html.in: two spaces for indentation

TODO: explore gmail as a web host

TODO: replace the QR item with the one remaining issue

index.html.in: refactor the toggle_qr_focus() function

1. Adjust to the recent conversion of resize_ticket() to CSS
   transforms.
2. Refine the ticket dimensions to match those of CharmPass.
   This is still pretty hacky and may not work in all cases,
   but on a fresh page load in a desktop browser, everything
   is where it should be.
3. Simplify / clean up the code a little bit (using forEach,
   classList, etc.)

index.html.in: use svg_to_client() in center_text()

The center_text() function was the first place that a coordinate
change was needed, though it was in the other direction, client to
SVG. Now that we have the svg_to_client() factor, we divide by it to
get the client_to_svg factor.

index.html.in: refactor resize_ticket() to use CSS transforms

While it would have been nice being able to revert to the initial
ticket size by erasing the CSS "transform", doing so makes the
transitions wonky: with Commuter Bus and MARC Train tickets, it first
transitions down to the BaltimoreLink ticket size, and then back up to
the initial attribute-based size.

index.html.in: two transition fixes

First, the repositioning of the ticket also needs to be transitioned.
This makes the QR animation much smoother.

Second, it would seem that appending the "loaded" class (to enable
transitions) can retroactively affect style changes that were made
before the class was appended. The workaround for this is to do
something that makes the browser re-flow the affected elements, and I
guess calling focus() suffices to do that. So we add in a call to
focus() before appending the "loaded" class to the ticket and its
background; this ensures that the transitions are not enabled until
after the initial ticket sizing, as was always the intent.

Revert "TODO: the date/time are fixed while the QR is focused"

This reverts commit 1fb309628cc841a29e4d90d20e10cd5866900975.

Just kidding, they aren't fixed; I think I looked at a ticket after
the usual ten-minute blinking period had passed.

index.html.in: use classList for the night/day toggle

This is a little bit more robust than simply declaring that the sky
element will never have any other classes.

index.html.in: factor out the svg_to_client() function

This will waste a tiiiiny bit of time because we only call this
function in contexts where we already have the security code
background element handy (and the new function recomputes it),
but it's so much cleaner as a separate function.

index.html.in: delete a pointless newline

index.html.in: make loaded a more general class

We're going to apply it to the ticket, too.

index.html.in: fix QR focus for Commuter Bus and MARC train

These need their initial upwards translations "repeated" when the QR
code is focused and we overwrite the transform attribute with CSS.
The scale() just works, but that's because these ticket start at the
correct scale -- not true of their position.

TODO: the date/time are fixed while the QR is focused

TODO: ticket tapping is fixed already

index.html.in: make ticket taps do nothing

Tapping the ticket (anything but the QR code) in CharmPass does
nothing; i.e. it does not change the background from day to night.
We mimic that with a dummy click handler on the ticket.

TODO: tapping the ticket doesn't change the sky color

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