index.html.in: use the right font for the security code

index.html.in: javascript cleanup

Encapsulate everything into functions and kick them off with event
listeners. This _mostly_ fixes the centering of the security code.

There is however a slight centering glitch visible upon page load when
the code is (for example) "WW". Resizing the page correctly re-centers
it; leaving only the mystery of why it was not centered to begin with;
we supposedly center it once when the page loads.

index.html.in: center the security code in its container

This is mostly working and just needs some code cleanup. And to be
called when the window resizes. I found an easy solution completely
by accident, so that's nice.

Makefile.am: preserve the "codebg" id

We'll need it to center the security code within its red box.

index.html.in: support random and user-specified security codes

The security code will now be set at page-load to a random two digit
string with characters taken from the set [0-9A-Z]. I've never
actually seen two consecutive digits (zero through nine) in the
official app; but it's good enough for now.

What's better is that you can pass ?code=YO via URL paramaters to set
the code to "YO". Since the code only changes once every day, a
one-way ticket revealing the code now essentially gets you a day pass.

Note: The resulting codes are not usually centered properly (yet).

Makefile.am: don't strip the "codetext" id

We'll need it to change the security code.

index.html.in: do javascript tricks in order of importance

For example, centering the ticket is probably most important. Being
able to tap the screen to switch it to night mode the least.

tableau.svg: rename the "hash" to "securitycode" and group it

That's what Moovel calls it and how I'll reference it.

tableau.svg: unhide the tram

Whoops.

configure.ac: update day.svg -> tableau.svg

.gitignore: update day.svg -> tableau.svg

Makefile.am: update day.svg -> tableau.svg

day.svg: rename to tableau.svg because it's important to be fancy

index.html.in: don't blink the expiration date/time after 10 minutes

I'm pretty sure this is when CharmPass stops blinking.

index.html.in: set ticket expiration to 90 minutes

This is what CharmPass does for one-way tickets, and the expiration
date/time only blinks for about ten minutes after you use a ticket in
the official app. This is a tiny detail (and we could always ditch the
blinking to make the display accurate with an expiration of 1h) but
it's easy enough to get completely right, so why not?

.gitignore: ignore the two woff2 output files

GNU Make automatically removes these "intermediate files," but
ignoring them is The Right Thing to do.

Makefile.am: add rule to build woff2 fonts from sfd sources

doc/README: document the new fontforge requirement

configure.ac: check for the fontforge program

We'll need this to convert our sfd source files to woff2 webfonts.

sfd2woff: new script to convert sfd source files to woff2 webfonts

CharmBypass-{Bold,Regular}.woff2: remove

These can now be created from the sfd source files.

src/CharmBypass-{Bold,Regular}.sfd: move up out of src

These are the last remaining files in the src/ directory. Move them to
the top level with everything else so that we can simplify the build
rules a bit.

Makefile.am,configure.ac,.gitignore: update for day.svg rename

Since we're moving the source day.svg to where the built day.svg
previously lived, a rename is also in order. We now name the optimized
output file day.min.svg.

src/day.svg: move out of src

Makefile.am: update for new index.html.in location

src/index.html.in: move out of src

Makefile.am: use double-suffix rule to build base64 from woff2

src/CharmBypass-{Bold,Regular}.woff2: move up out of src

Relocate the woff2 fonts to the top level. This will allow us to use a
simpler "double suffix" rule to build their base64-encodings.

src/CharmBypass-{Bold,Regular}.sfd: new font source files

Include the FontForge source files for the "CharmBypass-Bold" and
"CharmBypass-Regular" fonts. This will eventually allow us to build
the woff2 fonts on-the-fly.

These fonts were created from the letterforms used in the CharmPass
app. Copyright law in the United States generally does not protect
typefaces themselves; it protects only fonts, which are a particular
programmatic digital representation of a typeface. Since I have copied
only the letterforms, distributing the fonts (which are my own
creation) should not run afoul of the law. But as always when it comes
to legal matters: IANAL, YOLO, IDGAF.

doc/LICENSE: add AGPL-3 license

src/day.svg: move the bus down a tiny bit so that it overlaps the road

src/index.html.in: auto-center the ticket in the viewport

src/index.html.in: add a "const" to a javascript variable

Makefile.am: retain the "ticket" id so it can be centered

doc/README: document that we want "scour" and not "xmllint"

Makefile.am: use scour to optimize the SVG as part of the build

And since scour can also strip the XML prologue, there's no longer any
need for xmllint (or the corresponding build step).

configure.ac: check for scour instead of xmllint

I'm about to switch to a more involved SVG pre-processing step using
scour,

  https://github.com/scour-project/scour

instead of xmllint.

src/day.svg: add a few more trees

src/day.svg: undo/redo cloudscopy grouping to fix the animation

src/index.html.in: add the city skyline animation

src/day.svg: make all of the proportions accurate

src/day.svg: finish the last few city buildings

src/day.svg: add the city skyline

It's not quite done, but it's there -- all three layers.

.gitignore: update with the new font filenames

Makefile.am,src: replace the existing ticket font with two new ones

Using separate regular and bold fonts on the ticket lets us more
accurately mimic the official app. For example, the "service letter"
looks a lot better in bold. This commit replaces tickettext.woff2 by
CharmBypass-Regular.woff2 and CharmBypass-Bold.woff2.

src/day.svg: drop all font-family inline styles

These only get in the way when we use an external (to the SVG, at
least) stylesheet to style all of its text.

src/day.svg: add the QR code

src/index.html.in: reduce the LCM of the bus/tram/train loops

Using prime numbers for these ensures that they won't all "reset" to
x=0 at the same time for a much longer time.

src/index.html.in: animate the train

src/day.svg: finish the train

src/day.svg: finish the back of the train

src/day.svg: continue to work on the train

src/day.svg: start the train

src/index.html.in: animate the trees

src/day.svg: duplicate the trees so that they can be animated

src/index.html.in: prefer translateX(x) to translate(x,0)

src/index.html.in: add the cloud animation

src/day.svg: change cloud group spacing

Even though the clouds scroll right-to-left, the translation
coordinates are based on the groups' left-hand edges. As a result,
everything will be easier if I "left align" the clouds initially.

Revert "src/day.svg: re-center the ticket"

This reverts commit 752909532a84da904746162a20e20f4d254b54dc.

With the clouds scrolling in from the right, it will actually be
easier if our "window" containing the ticket is on the left side
of the scene.

src/day.svg: duplicate the clouds layer

src/day.svg: space out the clouds a bit more

src/day.svg: re-center the ticket

src/day.svg: double the width of the document

This is in preparation for an "infinite scroll" animation that I'm
going to try to implement by having two copies of the thing that
scrolls: one on-screen, and one off-screen. And for now at least I
actually want to be able to see the off-screen bits.

src/day.svg: rename clouds from left to right

src/index.html.in: slow down the bus and the tram a bit

src/day.svg: scale the clouds down to the correct size

src/index.html.in: add the tram animation

src/day.svg: shrink tram and bus to the right size; set x=0 for the tram

src/index.html.in: enable the bus scroll animation

doc/README: document the ungroup/regroup trick for SVG transforms

src/day.svg: move the bus to x=0

Starting the bus with 0% of its journey across the screen completed
will sure make the animation code simpler.

src/day.svg: eliminate default bus transform

We don't want the bus group to have a "transform" attribute by default
because we want to use the CSS "transform" property to animate it, and
the CSS property overwrites the SVG one. Ungrouping and regrouping the
elements in the "bus" group fixes this somehow.

src/day.svg: fix a few layer names

src/day.svg: add the crab cloud

src/day.svg: add the third cloud

src/day.svg: first attempt at what I'm calling a tram

.gitignore: ignore more build products

Makefile.am: add CLEANFILES variable so that "make clean" works

Use the variable CLEANFILES to indicate which files are produced
by the build process. Otherwise, automake doesn't consider our
custom rules.

Makefile.am: add dist/install rule for index.html

Makefile.am: teach "make" how to build our output file index.html

src/index.html.in: add the main page template

src/tickettext.woff2: add source font for the ticket text

This web font imitates the font used for the date, time, and service
name on CharmPass tickets. It's not a perfect match, but it's good
enough. I've stripped the character set down to 0-9, :/-, space, and
a-zA-Z.

.gitignore: ignore autotools byproducts

Makefile.am,configure.ac: initial autotools build system

doc/README: document initial build requirements

src/day.svg: initial commit of the work-in-progress svg