diff options
| -rw-r--r-- | tests/nyble_pages.rs (renamed from tests/homepage.rs) | 6 | ||||
| -rw-r--r-- | tests/touching_grass.html | 107 |
2 files changed, 113 insertions, 0 deletions
diff --git a/tests/homepage.rs b/tests/nyble_pages.rs index da36b1c..14ca1cc 100644 --- a/tests/homepage.rs +++ b/tests/nyble_pages.rs @@ -5,3 +5,9 @@ fn pares_homepage() { let str = std::fs::read_to_string("tests/nyble.html").unwrap(); let html = Html::parse(&str); } + +#[test] +fn parses_grass() { + let str = std::fs::read_to_string("tests/touching_grass.html").unwrap(); + let html = Html::parse(&str); +} diff --git a/tests/touching_grass.html b/tests/touching_grass.html new file mode 100644 index 0000000..de90798 --- /dev/null +++ b/tests/touching_grass.html @@ -0,0 +1,107 @@ +<html> + +<head> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta charset="utf-8" /> + <link rel="icon" type="image/png" href="/3directions.png" /> + <link rel="icon" type="image/svg+xml" href="/3directions.svg" /> + <title>Touching Grass | nyble.dev</title> + <link rel="stylesheet" href="/styles/common.css" /> + <link rel="stylesheet" href="/styles/narrow.css" /> + <link rel="stylesheet" href="/styles/touching-grass.css" /> +</head> + +<body> + <ul id="nav-access"> + <li><a href="#content">Skip to main content</a></li> + </ul> + + <nav class="sized"> + <a id="home" href="/" alt="home">← home</a> + </nav> + + <main id="content" class="writing sized"> + <h1>Touching Grass</h1> + <section style="width: 100%; text-align: right; padding: 8px 0"> + <video id="grass" controls width="100%" poster="grass_poster.jpg" preload="metadata" loop> + <source src="grass_720p.mp4" type="video/mp4" /> + <track default src="grass.vtt" /> + </video> + <ul> + <li class="small">download</li> + <li><a href="grass.mp4" download>[1080p | 7.1MB]</a></li> + <li><a href="grass_720p.mp4" download>[720p | 1.9MB]</a></li> + <li id="long"></li> + <li><input type="checkbox" checked id="loop"><label> loop video?</label></input></li> + </ul> + </section> + + <script> + document.addEventListener("DOMContentLoaded", setup); + + const video = document.getElementById("grass"); + function setup() { + let marks = document.getElementsByClassName("mark"); + for (let i = 0; i < marks.length; ++i) { + marks[i].addEventListener('click', markClick) + } + console.log(marks); + + let loop = document.getElementById('loop'); + loop.addEventListener('change', loopChanged) + + // Fire once with a fake event so we aren't desynced + loopChanged({ 'target': loop }); + } + + function markClick(event) { + let target = event.target; + let time = parseFloat(target.getAttribute('data-time')); + console.log(`seeking to ${time}`) + video.currentTime = time; + } + + function loopChanged(event) { + let target = event.target; + let checked = target.checked; + console.log(`video looping: ${checked}`); + video.loop = checked; + } + </script> + <p> + I took this short video to send to a friend one day and accidentally + made a 106 frame masterpiece. Well, that's hyperbolic. But there's a + lot I enjoy about it. + </p> + <p id="the-colours"> + The contrast between my orange painted nails and the surprisingly + green grass is pretty pleasing. I think the gentle brown of the brick + in the bottom-left corner helps keep from an overwhelming greenery. + Thanks bricks :) + </p> + <p id="the-composition"> + The accidental camera movement is nice, too. I like the angle the camera is at and the way it wobbles. + It's clearly hand-held. At <span class="mark" data-time="1.3">1.3-ish-seconds</span> + you can see I gently sway forward, but seem to be less wobbly. <i>I'm braced; + I'm stable! I have-three-points-of-contact-with-the-ground!</i> Then, at roughly + <span class="mark" data-time="1.9">2 seconds</span> when the grass finally + yields, I get rocked back and wobbles resume. + </p> + <p id="the-sound"> + The sound! And the sound. The ripping of the grass. That planty matter finally giving way. The fibrous + tearing. + I just like it; I enjoy it! I greatly appreciate it. + </p> + + </main> + + <footer class="sized"> + <ul id="dates"> + <li id="dates-title"> times</li> + <li><abbr title="creation time">c</abbr> Jul. 29, 2023 21:17</li> + <li><abbr title="modification time">m</abbr> Oct. 28, 2023 05:16</li> + </ul> + </footer> +</body> + +</html> \ No newline at end of file |