renamed the html files, render 2 html files
parent
c4b075fe51
commit
755bdfb7ff
@ -1,2 +1,3 @@
|
|||||||
.ipynb_checkpoints/
|
.ipynb_checkpoints/
|
||||||
*.json
|
*.json
|
||||||
|
/logs
|
||||||
|
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,685 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Scrollers!</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-style: italic;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
|
||||||
|
padding: .5rem;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
background-color: blue;
|
||||||
|
border: 5px dashed orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corporate {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0 0;
|
||||||
|
margin: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corporate li {
|
||||||
|
background-color: orange;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
article p:nth-of-type(1)::first-letter {
|
||||||
|
initial-letter: 8;
|
||||||
|
margin: 0 1rem 1rem 0;
|
||||||
|
font-family: serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav,
|
||||||
|
footer {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid black;
|
||||||
|
z-index: 1;
|
||||||
|
left: 0;
|
||||||
|
padding: .5rem;
|
||||||
|
transform: translate3d(0, -100%, 0);
|
||||||
|
transition: .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.visible {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<section class="info">
|
||||||
|
<h1>This is a small test page to test the behaviour of scrollers on an e-reader</h1>
|
||||||
|
<p> style="color: red"That's why this page is incredibly long! As I know the person testing this page is a fan,
|
||||||
|
please enjoy a copy of a hitchhikers guide to the galaxy (Chapter 1)</p>
|
||||||
|
<p>Also, what color is this section, and my borders?</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<p>Here are some more color tests:</p>
|
||||||
|
<ul>
|
||||||
|
<li style="color: red">My text is red</li>
|
||||||
|
<li style="color: orange">My text is orange</li>
|
||||||
|
<li style="color: green">My text is green</li>
|
||||||
|
<li style="color: blue">My text is blue</li>
|
||||||
|
<li style="color: purple">My text is purple</li>
|
||||||
|
</ul>
|
||||||
|
<p>With some gray scales</p>
|
||||||
|
<ul>
|
||||||
|
<li style="color: grey">My text is grey</li>
|
||||||
|
<li style="color: darkgrey">My text is darkgrey</li>
|
||||||
|
<li style="color: lightgrey">My text is lightgrey</li>
|
||||||
|
<li style="color: white">My text is white</li>
|
||||||
|
<li style="color: gainsboro">My text is gainsboro</li>
|
||||||
|
</ul>
|
||||||
|
<p>And various level of opacity</p>
|
||||||
|
<ul>
|
||||||
|
<li style="opacity: 1">My text is 1.0 opacity</li>
|
||||||
|
<li style="opacity: .8">My text is .8 opacity</li>
|
||||||
|
<li style="opacity: .6">My text is .6 opacity</li>
|
||||||
|
<li style="opacity: .4">My text is .4 opacity</li>
|
||||||
|
<li style="opacity: .2">My text is .2 opacity</li>
|
||||||
|
</ul>
|
||||||
|
<p>My text can contain <a href="xpub.nl">Links</a>, and some <i>italic</i> or even <mark>highlighted</mark>,
|
||||||
|
<b>bold</b> and <code>code</code>'ed words!
|
||||||
|
</p>
|
||||||
|
<p>If i want to display footnotes this can be done with <sup>sup's</sup> or <sub>sub's</sub></p>
|
||||||
|
<p>And what about some fancy corporate borders???</p>
|
||||||
|
<ul class="corporate">
|
||||||
|
<li>Border</li>
|
||||||
|
<li style="border-radius: 10px">Border</li>
|
||||||
|
<li style="border-radius: 20px">Border</li>
|
||||||
|
<li style="border-radius: 50px">Border</li>
|
||||||
|
</ul>
|
||||||
|
<p>And corporate shadows??</p>
|
||||||
|
<ul class="corporate">
|
||||||
|
<li style=" box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);">Border</li>
|
||||||
|
<li style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);">Border</li>
|
||||||
|
<li style="box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);">Border</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Scrolllllers</h2>
|
||||||
|
<p>I hope you'll see a normal scrollbar on the right. I suspect this is the browsers default scrollbar. Below,
|
||||||
|
you'll find some input with the type of range, and i wonder if you'll be able to drag 'm around</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input class='fn-range' type="range" id="volume" name="volume" min="0" max="100" />
|
||||||
|
<label for="volume">Volume</label>
|
||||||
|
</div>
|
||||||
|
<pre class="fn-range-value"></pre>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input type="range" id="cowbell" name="cowbell" min="0" max="100" value="90" step="10" />
|
||||||
|
<label for="cowbell">Cowbell</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h1 id="the-hitchhiker-s-guide-to-the-galaxy">The Hitchhiker's Guide to the Galaxy</h1>
|
||||||
|
<h5>Douglas Adams</h5>
|
||||||
|
<blockquote>for
|
||||||
|
Jonny Brock and Clare Gorst
|
||||||
|
and all other Arlingtonians
|
||||||
|
for tea, sympathy, and a sofa</blockquote>
|
||||||
|
<p>Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a
|
||||||
|
small
|
||||||
|
unregarded yellow sun.</p>
|
||||||
|
<p>Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green
|
||||||
|
planet
|
||||||
|
whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty
|
||||||
|
neat
|
||||||
|
idea.</p>
|
||||||
|
<p>This planet has - or rather had - a problem, which was this: most of the people on it were unhappy for pretty
|
||||||
|
much of
|
||||||
|
the time. Many solutions were suggested for this problem, but most of these were largely concerned with the
|
||||||
|
movements of small green pieces of paper, which is odd because on the whole it wasn't the small green
|
||||||
|
pieces of
|
||||||
|
paper that were unhappy.</p>
|
||||||
|
<p>And so the problem remained; lots of the people were mean, and most of them were miserable, even the ones
|
||||||
|
with
|
||||||
|
digital watches.</p>
|
||||||
|
<p> Many were increasingly of the opinion that they'd all made a big mistake in coming down from the trees
|
||||||
|
in the
|
||||||
|
first place. And some said that even the trees had been a bad move, and that no one should ever have left
|
||||||
|
the
|
||||||
|
oceans.</p>
|
||||||
|
<p> And then, one Thursday, nearly two thousand years after one man had been nailed to a tree for saying how
|
||||||
|
great it
|
||||||
|
would be to be nice to people for a change, one girl sitting on her own in a small cafe in Rickmansworth
|
||||||
|
suddenly
|
||||||
|
realized what it was that had been going wrong all this time, and she finally knew how the world could be
|
||||||
|
made a
|
||||||
|
good and happy place. This time it was right, it would work, and no one would have to get nailed to
|
||||||
|
anything.</p>
|
||||||
|
<p> Sadly, however, before she could get to a phone to tell anyone about it, a terribly stupid catastrophe
|
||||||
|
occ style="color: red"urred, and
|
||||||
|
the idea was lost forever.</p>
|
||||||
|
<p> This is not her story.</p>
|
||||||
|
<p> But it is the story of that terrible stupid catastrophe and some of its consequences.</p>
|
||||||
|
<p> It is also the story of a book, a book called The Hitch Hiker's Guide to the Galaxy - not an Earth book,
|
||||||
|
never
|
||||||
|
pub style="color: red"lished on Earth, and until the terrible catastrophe occurred, never seen or heard of
|
||||||
|
by any Earthman.</p>
|
||||||
|
<p> Nevertheless, a wholly remarkable book.</p>
|
||||||
|
<p> in fact it was probably the most remarkable book ever to come out of the great publishing houses of Ursa
|
||||||
|
Minor - of
|
||||||
|
which no Earthman had ever heard either.</p>
|
||||||
|
<p> Not only is it a wholly remarkable book, it is also a highly successful one - more popular than the
|
||||||
|
Celestial Home
|
||||||
|
Care Omnibus, better selling than Fifty More Things to do in Zero Gravity, and more controversial than Oolon
|
||||||
|
Colluphid's trilogy of philosophical blockbusters Where God Went Wrong, Some More of God's Greatest
|
||||||
|
Mistakes
|
||||||
|
and Who is this God Person Anyway? In many of the more relaxed civilizations on the Outer Eastern Rim of the
|
||||||
|
Galaxy,
|
||||||
|
the Hitch Hiker's Guide has already supplanted the great Encyclopedia Galactica as the standard
|
||||||
|
repository of
|
||||||
|
all knowledge</p>
|
||||||
|
<p>and wisdom, for though it has many omissions and contains much that is apocryphal, or at least wildly
|
||||||
|
inaccurate, it
|
||||||
|
scores over the older, more pedestrian work in two important respects.</p>
|
||||||
|
<p> First, it is slightly cheaper; and secondly it has the words Don't Panic inscribed in large friendly
|
||||||
|
letters on
|
||||||
|
its cover.</p>
|
||||||
|
<p> But the story of this terrible, stupid Thursday, the story of its extraordinary consequences, and the story
|
||||||
|
of how
|
||||||
|
these consequences are inextricably intertwined with this remarkable book begins very simply.</p>
|
||||||
|
<p> It begins with a house.</p>
|
||||||
|
<h2>Chapter 1</h2>
|
||||||
|
|
||||||
|
<p>The house stood on a slight rise just on the edge of the village. It stood on its own and looked over a broad
|
||||||
|
spread
|
||||||
|
of West Country farmland. Not a remarkable house by any means - it was about thirty years old, squattish,
|
||||||
|
squarish,
|
||||||
|
made of brick, and had four windows set in the front of a size and proportion which more or less exactly
|
||||||
|
failed to
|
||||||
|
please the eye.</p>
|
||||||
|
<p> The only person for whom the house was in any way special was Arthur Dent, and that was only because it
|
||||||
|
happened to
|
||||||
|
be the one he lived in. He had lived in it for about three years, ever since he had moved out of London
|
||||||
|
because it
|
||||||
|
mad style="color: red"e him nervous and irritable. He was about thirty as well, dark haired and never quite
|
||||||
|
at ease with
|
||||||
|
himself. The
|
||||||
|
thing that used to worry him most was the fact that people always used to ask him what he was looking so
|
||||||
|
worried
|
||||||
|
about. He worked in local radio which he always used to tell his friends was a lot more interesting than
|
||||||
|
they
|
||||||
|
probably thought. It was, too - most of his friends worked in advertising.</p>
|
||||||
|
<p> style="color: red" It hadn't properly registered with Arthur that the council wanted to knock down his
|
||||||
|
house and build an
|
||||||
|
bypass
|
||||||
|
instead.</p>
|
||||||
|
<p> At eight o'clock on Thursday morning Arthur didn't feel very good. He woke up blearily, got up,
|
||||||
|
wan style="color: red"dered
|
||||||
|
blearily round his room, opened a window, saw a bulldozer, found his slippers, and stomped off to the
|
||||||
|
bathroom to
|
||||||
|
wash.</p>
|
||||||
|
<p> Toothpaste on the brush - so. Scrub.</p>
|
||||||
|
<p> Shaving mirror - pointing at the ceiling. He adjusted it. For a moment it reflected a second bulldozer
|
||||||
|
through the
|
||||||
|
bathroom window. Properly adjusted, it reflected Arthur Dent's bristles. He shaved them off, washed,
|
||||||
|
dried, and
|
||||||
|
stomped off to the kitchen to find something pleasant to put in his mouth.</p>
|
||||||
|
<p> Kettle, plug, fridge, milk, coffee. Yawn.</p>
|
||||||
|
<p> style="color: red" The word bulldozer wandered through his mind for a moment in search of something to
|
||||||
|
connect with.</p>
|
||||||
|
<p> The bulldozer outside the kitchen window was quite a big one.</p>
|
||||||
|
<p> style="color: red" He stared at it.</p>
|
||||||
|
<p> "Yellow," he thought and stomped off back to his bedroom to get dressed.</p>
|
||||||
|
<p> Passing the bathroom he stopped to drink a large glass of water, and another. He began to suspect that he
|
||||||
|
was hung
|
||||||
|
over. Why was he hung over? Had he been drinking the night before? He supposed that he must have been. He
|
||||||
|
caught a
|
||||||
|
glint in the shaving mirror. "Yellow," he thought and stomped on to the bedroom.</p>
|
||||||
|
<p> style="color: red" He stood and thought. The pub, he thought. Oh dear, the pub. He vaguely remembered being
|
||||||
|
angry, angry about
|
||||||
|
something that seemed important. He'd been telling people about it, telling people about it at great
|
||||||
|
length, he
|
||||||
|
rather suspected: his clearest visual recollection was of glazed looks on other people's faces.</p>
|
||||||
|
<p> Something about a new bypass he had just found out about. It had been in the pipeline for months only no one
|
||||||
|
seemed
|
||||||
|
to have known about it. Ridiculous. He took a swig of water. It would sort itself out, he'd decided, no
|
||||||
|
one
|
||||||
|
wanted a bypass, the council didn't have a leg to stand on. It would sort itself out.</p>
|
||||||
|
<p>God what a terrible hangover it had earned him though. He looked at himself in the wardrobe mirror.</p>
|
||||||
|
<p> style="color: red" He stuck out his tongue. "Yellow," he thought. The word yellow wandered through
|
||||||
|
his mind in search
|
||||||
|
of
|
||||||
|
something to connect with.</p>
|
||||||
|
<p> Fifteen seconds later he was out of the house and lying in front of a big yellow bulldozer that was
|
||||||
|
advancing up his
|
||||||
|
garden path.</p>
|
||||||
|
<p> Mr L Prosser was, as they say, only human. In other words he was a carbon-based life form descended from an
|
||||||
|
ape.
|
||||||
|
More specifically he was forty, fat and shabby and worked for the local council. Curiously enough, though he
|
||||||
|
didn't know it, he was also a direct male-line descendant of Genghis Khan, though intervening
|
||||||
|
generations and
|
||||||
|
racial mixing had so juggled his genes that he had no discernible Mongoloid characteristics, and the only
|
||||||
|
vestiges
|
||||||
|
lef style="color: red"t in Mr L Prosser of his mighty ancestry were a pronounced stoutness about the tum and
|
||||||
|
a predilection for
|
||||||
|
little
|
||||||
|
fur hats.</p>
|
||||||
|
<p> He was by no means a great warrior: in fact he was a nervous worried man. Today he was particularly nervous
|
||||||
|
and
|
||||||
|
worried because something had gone seriously wrong with his job - which was to see that Arthur Dent's
|
||||||
|
house got
|
||||||
|
cle style="color: red"ared out of the way before the day was out.</p>
|
||||||
|
<p> "Come off it, Mr Dent,", he said, "you can't win you know. You can't lie in front of
|
||||||
|
the
|
||||||
|
bulldozer indefinitely." He tried to make his eyes blaze fiercely but they just wouldn't do it.</p>
|
||||||
|
<p> Arthur lay in the mud and squelched at him.</p>
|
||||||
|
<p> "I'm game," he said, "we'll see who rusts first." "I'm afraid
|
||||||
|
you're going
|
||||||
|
to have to accept it," said Mr Prosser gripping his fur hat and rolling it round the top of his head,
|
||||||
|
"this bypass has got to be built and it's going to be built!" "First I've heard of
|
||||||
|
it,"
|
||||||
|
said Arthur, "why's it going to be built?" Mr Prosser shook his finger at him for a bit, then
|
||||||
|
stopped
|
||||||
|
and put it away again.</p>
|
||||||
|
<p> "What do you mean, why's it got to be built?" he said. "It's a bypass. You've got
|
||||||
|
to
|
||||||
|
build bypasses." Bypasses are devices which allow some people to drive from point A to point B very
|
||||||
|
fast whilst
|
||||||
|
other people dash from point B to point A very fast. People living at point C, being a point directly in
|
||||||
|
between,
|
||||||
|
are often given to wonder what's so great about point A that so many people of point B are so keen to
|
||||||
|
get there,
|
||||||
|
and what's so great about point B that so many people of point A are so keen to get there.</p>
|
||||||
|
<p> They often wish that people would just once and for all work out where the hell they wanted to be.</p>
|
||||||
|
<p> Mr Prosser wanted to be at point D. Point D wasn't anywhere in particular, it was just any convenient
|
||||||
|
point a
|
||||||
|
very long way from points A, B and C. He would have a nice little cottage at point D, with axes over the
|
||||||
|
door, and
|
||||||
|
spend a pleasant amount of time at point E, which would be the nearest pub to point D. His wife of course
|
||||||
|
wanted
|
||||||
|
climbing roses, but he wanted axes. He didn't know why - he just liked axes. He flushed hotly under the
|
||||||
|
derisive
|
||||||
|
grins of the bulldozer drivers.</p>
|
||||||
|
<p> He shifted his weight from foot to foot, but it was equally uncomfortable on each. Obviously somebody had
|
||||||
|
been
|
||||||
|
appallingly incompetent and he hoped to God it wasn't him.</p>
|
||||||
|
<p> Mr Prosser said: "You were quite entitled to make any suggestions or protests at the appropriate time
|
||||||
|
you
|
||||||
|
know." "Appropriate time?" hooted Arthur. "Appropriate time? The first I knew about it
|
||||||
|
was when
|
||||||
|
a workman arrived at my home yesterday. I asked him if he'd come to clean the windows and he said no
|
||||||
|
he'd
|
||||||
|
come to demolish the house. He didn't tell me straight away of course. Oh no. First he wiped a couple of
|
||||||
|
windows
|
||||||
|
and charged me a fiver. Then he told me." "But Mr Dent, the plans have been available in the local
|
||||||
|
planning office for the last nine month." "Oh yes, well as soon as I heard I went straight round
|
||||||
|
to see
|
||||||
|
them, yesterday afternoon. You hadn't exactly gone out of your way to call attention to them had you? I
|
||||||
|
mean
|
||||||
|
like actually telling anybody or anything." "But the plans were on display ..." "On
|
||||||
|
display? I
|
||||||
|
eventually had to go down to the cellar to find them." "That's the display department."
|
||||||
|
"With a torch."</p>
|
||||||
|
<p>"Ah, well the lights had probably gone." "So had the stairs." "But look, you found
|
||||||
|
the
|
||||||
|
notice didn't you?" "Yes," said Arthur, "yes I did. It was on display in the bottom
|
||||||
|
of a
|
||||||
|
locked filing cabinet stuck in a disused lavatory with a sign on the door saying Beware of the
|
||||||
|
Leopard." A
|
||||||
|
cloud passed overhead. It cast a shadow over Arthur Dent as he lay propped up on his elbow in the cold mud.
|
||||||
|
It cast
|
||||||
|
a shadow over Arthur Dent's house. Mr Prosser frowned at it.</p>
|
||||||
|
<p> "It's not as if it's a particularly nice house," he said.</p>
|
||||||
|
<p> "I'm sorry, but I happen to like it." "You'll like the bypass." "Oh shut
|
||||||
|
up,"
|
||||||
|
said Arthur Dent. "Shut up and go away, and take your bloody bypass with you. You haven't got a leg
|
||||||
|
to
|
||||||
|
stand on and you know it." Mr Prosser's mouth opened and closed a couple of times while his mind
|
||||||
|
was for a
|
||||||
|
moment filled with inexplicable but terribly attractive visions of Arthur Dent's house being consumed
|
||||||
|
with fire
|
||||||
|
and Arthur himself running screaming from the blazing ruin with at least three hefty spears protruding from
|
||||||
|
his
|
||||||
|
back.</p>
|
||||||
|
<p> style="color: red" Mr Prosser was often bothered with visions like these and they made him feel very
|
||||||
|
nervous. He stuttered for
|
||||||
|
a moment
|
||||||
|
and then pulled himself together.</p>
|
||||||
|
<p> "Mr Dent," he said.</p>
|
||||||
|
<p> "Hello? Yes?" said Arthur.</p>
|
||||||
|
<p> "Some factual information for you. Have you any idea how much damage that bulldozer would suffer if I
|
||||||
|
just let
|
||||||
|
it roll straight over you?" "How much?" said Arthur.</p>
|
||||||
|
<p> "None at all," said Mr Prosser, and stormed nervously off wondering why his brain was filled with
|
||||||
|
a
|
||||||
|
thousand hairy horsemen all shouting at him.</p>
|
||||||
|
<p> By a curious coincidence, None at all is exactly how much suspicion the ape-descendant Arthur Dent had that
|
||||||
|
one of
|
||||||
|
his closest friends was not descended from an ape, but was in fact from a small planet in the vicinity of
|
||||||
|
Betelgeuse
|
||||||
|
and not from Guildford as he usually claimed.</p>
|
||||||
|
<p> Arthur Dent had never, ever suspected this.</p>
|
||||||
|
<p> This friend of his had first arrived on the planet some fifteen Earth years previously, and he had worked
|
||||||
|
hard to
|
||||||
|
blend himself into Earth society - with, it must be said, some success. For instance he had spent those
|
||||||
|
fifteen
|
||||||
|
years pretending to be an out of work actor, which was plausible enough.</p>
|
||||||
|
<p> He had made one careless blunder though, because he had skimped a bit on his preparatory research. The
|
||||||
|
information
|
||||||
|
he style="color: red"had gathered had led him to choose the name "Ford Prefect" as being nicely
|
||||||
|
inconspicuous.</p>
|
||||||
|
<p> He was not conspicuously tall, his features were striking but not conspicuously handsome. His hair was wiry
|
||||||
|
and
|
||||||
|
gingerish and brushed backwards from the temples. His skin seemed to be pulled backwards from the nose.
|
||||||
|
There was
|
||||||
|
something very slightly odd about him, but it was difficult to say what it was. Perhaps it was that his eyes
|
||||||
|
didn't blink often enough and when you talked to him for any length of time your eyes began
|
||||||
|
involuntarily to
|
||||||
|
water on his behalf. Perhaps it was that he smiled slightly too broadly and gave people the unnerving
|
||||||
|
impression
|
||||||
|
that he was about to go for their neck.</p>
|
||||||
|
<p> He struck most of the friends he had made on Earth as an eccentric, but a harmless one -- an unruly boozer
|
||||||
|
with some
|
||||||
|
oddish habits. For instance he would often gatecrash university parties, get badly drunk and start making
|
||||||
|
fun of any
|
||||||
|
astrophysicist he could find till he got thrown out.</p>
|
||||||
|
<p> Sometimes he would get seized with oddly distracted moods and stare into the sky as if hypnotized until
|
||||||
|
someone
|
||||||
|
asked him what he was doing. Then he would start guiltily for a moment, relax and grin.</p>
|
||||||
|
<p> "Oh, just looking for flying saucers," he would joke and everyone would laugh and ask him what
|
||||||
|
sort of
|
||||||
|
flying saucers he was looking for.</p>
|
||||||
|
<p> "Green ones!" he would reply with a wicked grin, laugh wildly for a moment and then suddenly lunge
|
||||||
|
for the
|
||||||
|
nearest bar and buy an enormous round of drinks.</p>
|
||||||
|
<p>Evenings like this usually ended badly. Ford would get out of his skull on whisky, huddle into a corner with
|
||||||
|
some
|
||||||
|
gir style="color: red"l and explain to her in slurred phrases that honestly the colour of the flying saucers
|
||||||
|
didn't matter
|
||||||
|
that
|
||||||
|
much really.</p>
|
||||||
|
<p> Thereafter, staggering semi-paralytic down the night streets he would often ask passing policemen if they
|
||||||
|
knew the
|
||||||
|
way to Betelgeuse. The policemen would usually say something like, "Don't you think it's about
|
||||||
|
time you
|
||||||
|
went off home sir?" "I'm trying to baby, I'm trying to," is what Ford invariably
|
||||||
|
replied on
|
||||||
|
these occasions.</p>
|
||||||
|
<p> style="color: red" In fact what he was really looking out for when he stared distractedly into the night sky
|
||||||
|
was any kind of
|
||||||
|
flying
|
||||||
|
saucer at all. The reason he said green was that green was the traditional space livery of the Betelgeuse
|
||||||
|
trading
|
||||||
|
scouts.</p>
|
||||||
|
<p> Ford Prefect was desperate that any flying saucer at all would arrive soon because fifteen years was a long
|
||||||
|
time to
|
||||||
|
get stranded anywhere, particularly somewhere as mindboggingly dull as the Earth.</p>
|
||||||
|
<p> Ford wished that a flying saucer would arrive soon because he knew how to flag flying saucers down and get
|
||||||
|
lifts
|
||||||
|
from them. He knew how to see the Marvels of the Universe for less than thirty Altairan dollars a day.</p>
|
||||||
|
<p> In fact, Ford Prefect was a roving researcher for that wholly remarkable book The Hitch Hiker's Guide to
|
||||||
|
the
|
||||||
|
Galaxy.</p>
|
||||||
|
<p> Human beings are great adaptors, and by lunchtime life in the environs of Arthur's house had settled
|
||||||
|
into a
|
||||||
|
steady routine. It was Arthur's accepted role to lie squelching in the mud making occasional demands to
|
||||||
|
see his
|
||||||
|
lawyer, his mother or a good book; it was Mr Prosser's accepted role to tackle Arthur with the
|
||||||
|
occasional new
|
||||||
|
ploy such as the For the Public Good talk, the March of Progress talk, the They Knocked My House Down Once
|
||||||
|
You Know,
|
||||||
|
Never Looked Back talk and various other cajoleries and threats; and it was the bulldozer drivers'
|
||||||
|
accepted role
|
||||||
|
to sit around drinking coffee and experimenting with union regulations to see how they could turn the
|
||||||
|
situation to
|
||||||
|
their financial advantage.</p>
|
||||||
|
<p> The Earth moved slowly in its diurnal course.</p>
|
||||||
|
<p> The sun was beginning to dry out the mud Arthur lay in.</p>
|
||||||
|
<p> A shadow moved across him again.</p>
|
||||||
|
<p> "Hello Arthur," said the shadow.</p>
|
||||||
|
<p> Arthur looked up and squinting into the sun was startled to see Ford Prefect standing above him.</p>
|
||||||
|
<p> "Ford! Hello, how are you?" "Fine," said Ford, "look, are you busy?" "Am
|
||||||
|
I
|
||||||
|
busy?" exclaimed Arthur. "Well, I've just got all these bulldozers and things to lie in front
|
||||||
|
of
|
||||||
|
because they'll knock my house down if I don't, but other than that ... well, no not especially,
|
||||||
|
why?"
|
||||||
|
They don't have sarcasm on Betelgeuse, and Ford Prefect often failed to notice it unless he was
|
||||||
|
concentrating.
|
||||||
|
He said, "Good, is there anywhere we can talk?" "What?" said Arthur Dent.</p>
|
||||||
|
<p> style="color: red" For a few seconds Ford seemed to ignore him, and stared fixedly into the sky like a
|
||||||
|
rabbit trying to get run
|
||||||
|
over by
|
||||||
|
a car. Then suddenly he squatted down beside Arthur.</p>
|
||||||
|
<p> "We've got to talk," he said urgently.</p>
|
||||||
|
<p> "Fine," said Arthur, "talk." "And drink," said Ford. "It's vitally
|
||||||
|
important
|
||||||
|
that we talk and drink. Now. We'll go to the pub in the village." He looked into the sky again,
|
||||||
|
nervous,
|
||||||
|
expectant.</p>
|
||||||
|
<p> "Look, don't you understand?" shouted Arthur. He pointed at Prosser. "That man wants to
|
||||||
|
knock my
|
||||||
|
house down!" Ford glanced at him, puzzled.</p>
|
||||||
|
<p> "Well he can do it while you're away can't he?" he asked.</p>
|
||||||
|
<p> "But I don't want him to!" "Ah."</p>
|
||||||
|
<p>"Look, what's the matter with you Ford?" said Arthur.</p>
|
||||||
|
<p> "Nothing. Nothing's the matter. Listen to me - I've got to tell you the most important thing
|
||||||
|
you've
|
||||||
|
ever heard. I've got to tell you now, and I've got to tell you in the saloon bar of the Horse and
|
||||||
|
Gro style="color: red"om." "But why?" "Because you are going to need a very stiff
|
||||||
|
drink." Ford stared
|
||||||
|
at
|
||||||
|
Arthur, and Arthur was astonished to find that his will was beginning to weaken. He didn't realize that
|
||||||
|
this was
|
||||||
|
because of an old drinking game that Ford learned to play in the hyperspace ports that served the madranite
|
||||||
|
mining
|
||||||
|
belts in the star system of Orion Beta.</p>
|
||||||
|
<p> The game was not unlike the Earth game called Indian Wrestling, and was played like this: Two contestants
|
||||||
|
would sit
|
||||||
|
either side of a table, with a glass in front of each of them.</p>
|
||||||
|
<p> Between them would be placed a bottle of Janx Spirit (as immortalized in that ancient Orion mining song
|
||||||
|
"Oh
|
||||||
|
don't give me none more of that Old Janx Spirit/ No, don't you give me none more of that Old Janx
|
||||||
|
Spirit/
|
||||||
|
For my head will fly, my tongue will lie, my eyes will fry and I may die/ Won't you pour me one more of
|
||||||
|
that
|
||||||
|
sinful Old Janx Spirit").</p>
|
||||||
|
<p> Each of the two contestants would then concentrate their will on the bottle and attempt to tip it and pour
|
||||||
|
spirit
|
||||||
|
into the glass of his opponent - who would then have to drink it.</p>
|
||||||
|
<p> The bottle would then be refilled. The game would be played again. And again.</p>
|
||||||
|
<p> Once you started to lose you would probably keep losing, because one of the effects of Janx spirit is to
|
||||||
|
depress
|
||||||
|
telepsychic power.</p>
|
||||||
|
<p> style="color: red" As soon as a predetermined quantity had been consumed, the final loser would have to
|
||||||
|
perform a forfeit,
|
||||||
|
which was
|
||||||
|
usually obscenely biological.</p>
|
||||||
|
<p> Ford Prefect usually played to lose.</p>
|
||||||
|
<p> style="color: red" Ford stared at Arthur, who began to think that perhaps he did want to go to the Horse and
|
||||||
|
Groom after all.
|
||||||
|
</p>
|
||||||
|
<p> "But what about my house ...?" he asked plaintively.</p>
|
||||||
|
<p> Ford looked across to Mr Prosser, and suddenly a wicked thought struck him.</p>
|
||||||
|
<p> "He wants to knock your house down?" "Yes, he wants to build ..." "And he can't
|
||||||
|
because
|
||||||
|
you're lying in front of the bulldozers?" "Yes, and ..." "I'm sure we can come
|
||||||
|
to some
|
||||||
|
arrangement," said Ford. "Excuse me!" he shouted.</p>
|
||||||
|
<p> Mr Prosser (who was arguing with a spokesman for the bulldozer drivers about whether or not Arthur Dent
|
||||||
|
constituted
|
||||||
|
a mental health hazard, and how much they should get paid if he did) looked around. He was surprised and
|
||||||
|
slightly
|
||||||
|
alarmed to find that Arthur had company.</p>
|
||||||
|
<p> "Yes? Hello?" he called. "Has Mr Dent come to his senses yet?" "Can we for the
|
||||||
|
moment," called Ford, "assume that he hasn't?" "Well?" sighed Mr Prosser.</p>
|
||||||
|
<p> "And can we also assume," said Ford, "that he's going to be staying here all day?"
|
||||||
|
"So?" "So all your men are going to be standing around all day doing nothing?"
|
||||||
|
"Could be,
|
||||||
|
could be ..." "Well, if you're resigned to doing that anyway, you don't actually need him
|
||||||
|
to lie
|
||||||
|
here all the time do you?" "What?" "You don't," said Ford patiently,
|
||||||
|
"actually
|
||||||
|
need him here." Mr Prosser thought about this.</p>
|
||||||
|
<p> "Well no, not as such...", he said, "not exactly need ..." Prosser was worried. He
|
||||||
|
thought that
|
||||||
|
one of them wasn't making a lot of sense.</p>
|
||||||
|
<p>Ford said, "So if you would just like to take it as read that he's actually here, then he and I
|
||||||
|
could slip
|
||||||
|
off down to the pub for half an hour. How does that sound?" Mr Prosser thought it sounded perfectly
|
||||||
|
potty.</p>
|
||||||
|
<p> "That sounds perfectly reasonable," he said in a reassuring tone of voice, wondering who he was
|
||||||
|
trying to
|
||||||
|
reassure.</p>
|
||||||
|
<p> "And if you want to pop off for a quick one yourself later on," said Ford, "we can always
|
||||||
|
cover up
|
||||||
|
for you in return." "Thank you very much," said Mr Prosser who no longer knew how to play
|
||||||
|
this at
|
||||||
|
all, "thank you very much, yes, that's very kind ..." He frowned, then smiled, then tried to
|
||||||
|
do both
|
||||||
|
at once, failed, grasped hold of his fur hat and rolled it fitfully round the top of his head. He could only
|
||||||
|
assume
|
||||||
|
that he had just won.</p>
|
||||||
|
<p> "So," continued Ford Prefect, "if you would just like to come over here and lie down
|
||||||
|
..."
|
||||||
|
"What?" said Mr Prosser.</p>
|
||||||
|
<p> "Ah, I'm sorry," said Ford, "perhaps I hadn't made myself fully clear. Somebody's
|
||||||
|
got to
|
||||||
|
lie in front of the bulldozers haven't they? Or there won't be anything to stop them driving into Mr
|
||||||
|
Dent's house will there?" "What?" said Mr Prosser again.</p>
|
||||||
|
<p> "It's very simple," said Ford, "my client, Mr Dent, says that he will stop lying here in
|
||||||
|
the mud
|
||||||
|
on the sole condition that you come and take over from him." "What are you talking about?"
|
||||||
|
said
|
||||||
|
Arthur, but Ford nudged him with his shoe to be quiet.</p>
|
||||||
|
<p> "You want me," said Mr Prosser, spelling out this new thought to himself, "to come and lie
|
||||||
|
there
|
||||||
|
..." "Yes." "In front of the bulldozer?" "Yes." "Instead of Mr
|
||||||
|
Dent."
|
||||||
|
"Yes." "In the mud." "In, as you say it, the mud." As soon as Mr Prosser
|
||||||
|
realized that
|
||||||
|
he was substantially the loser after all, it was as if a weight lifted itself off his shoulders: this was
|
||||||
|
more like
|
||||||
|
the world as he knew it. He sighed.</p>
|
||||||
|
<p> "In return for which you will take Mr Dent with you down to the pub?" "That's it,"
|
||||||
|
said
|
||||||
|
Ford. "That's it exactly." Mr Prosser took a few nervous steps forward and stopped.</p>
|
||||||
|
<p> "Promise?" "Promise," said Ford. He turned to Arthur.</p>
|
||||||
|
<p> "Come on," he said to him, "get up and let the man lie down." Arthur stood up, feeling
|
||||||
|
as if he
|
||||||
|
was in a dream.</p>
|
||||||
|
<p> Ford beckoned to Prosser who sadly, awkwardly, sat down in the mud. He felt that his whole life was some
|
||||||
|
kind of
|
||||||
|
dre style="color: red"am and he sometimes wondered whose it was and whether they were enjoying it. The mud
|
||||||
|
folded itself round
|
||||||
|
his
|
||||||
|
bottom and his arms and oozed into his shoes.</p>
|
||||||
|
<p> Ford looked at him severely.</p>
|
||||||
|
<p> "And no sneaky knocking down Mr Dent's house whilst he's away, alright?" he said.</p>
|
||||||
|
<p> "The mere thought," growled Mr Prosser, "hadn't even begun to speculate," he
|
||||||
|
continued,
|
||||||
|
settling himself back, "about the merest possibility of crossing my mind." He saw the bulldozer
|
||||||
|
driver's union representative approaching and let his head sink back and closed his eyes. He was trying
|
||||||
|
to
|
||||||
|
marshal his arguments for proving that he did not now constitute a mental health hazard himself. He was far
|
||||||
|
from
|
||||||
|
certain about this - his mind seemed to be full of noise, horses, smoke, and the stench of blood. This
|
||||||
|
always
|
||||||
|
happened when he felt miserable and put upon, and he had never been able to explain it to himself. In a high
|
||||||
|
dimension of which we know nothing the mighty Khan bellowed with rage, but Mr Prosser only trembled slightly
|
||||||
|
and
|
||||||
|
whi style="color: red"mpered. He began to fell little pricks of water</p>
|
||||||
|
<p>behind the eyelids. Bureaucratic cock-ups, angry men lying in the mud, indecipherable strangers handing out
|
||||||
|
inexplicable humiliations and an unidentified army of horsemen laughing at him in his head - what a day.</p>
|
||||||
|
<p> What a day. Ford Prefect knew that it didn't matter a pair of dingo's kidneys whether Arthur's
|
||||||
|
house got
|
||||||
|
knocked down or not now.</p>
|
||||||
|
<p> Arthur remained very worried.</p>
|
||||||
|
<p> "But can we trust him?" he said.</p>
|
||||||
|
<p> "Myself I'd trust him to the end of the Earth," said Ford.</p>
|
||||||
|
<p> "Oh yes," said Arthur, "and how far's that?" "About twelve minutes away,"
|
||||||
|
said
|
||||||
|
Ford, "come on, I need a drink."</p>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
I'm a navbar and i'm only visible during scroll!
|
||||||
|
</nav>
|
||||||
|
</body>
|
||||||
|
<script type="text/javascript">
|
||||||
|
window.addEventListener("DOMContentLoaded", function () {
|
||||||
|
|
||||||
|
var timeout = false;
|
||||||
|
var footer = document.querySelector("footer");
|
||||||
|
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
console.log("got a scroll", document.documentElement.scrollTop, document.documentElement.scrollHeight);
|
||||||
|
|
||||||
|
var scrollable = (document.documentElement.scrollHeight || document.body.scrollHeight)
|
||||||
|
var percent = (document.documentElement.scrollTop || document.body.scrollTop) / (scrollable - document.documentElement.clientHeight) * 100;
|
||||||
|
footer.textContent = `Scrolled: ${window.scrollY} scrollHeight: ${scrollable} so im at ${Math.round(percent)}%, ${window.innerWidth}x${window.innerHeight}`;
|
||||||
|
footer.style.color = percent > 50 ? 'green' : 'black';
|
||||||
|
if (!timeout) {
|
||||||
|
document.querySelector("nav").classList.add("visible");
|
||||||
|
timeout = window.setTimeout(function () {
|
||||||
|
document.querySelector("nav").classList.remove("visible");
|
||||||
|
timeout = false;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
document.querySelectorAll(".fn-range").forEach((rangeEl) => {
|
||||||
|
rangeEl.addEventListener("change", (e) => {
|
||||||
|
console.log("e.value", e.target.value);
|
||||||
|
})
|
||||||
|
|
||||||
|
rangeEl.addEventListener("input", (e) => {
|
||||||
|
console.log("e.input", e.value);
|
||||||
|
document.querySelector(".fn-range-value").textContent = `From a JS event, i got this new value: ${e.target.value}`
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
Loading…
Reference in New Issue