diff options
| author | gennyble <gen@nyble.dev> | 2024-12-18 00:27:34 -0600 |
|---|---|---|
| committer | gennyble <gen@nyble.dev> | 2024-12-18 00:27:34 -0600 |
| commit | 5ea6a13ead2a5cab0f578c8af5f0e0be88c3a08c (patch) | |
| tree | f8ab97a0abeb03142da4c7a8ed859d6a408cd16a /converge/example.html | |
| parent | f6b441fe53dd75af5933c4456d92070ccb7bd8af (diff) | |
| download | cutie-main.tar.gz cutie-main.zip | |
Diffstat (limited to 'converge/example.html')
| -rwxr-xr-x | converge/example.html | 185 |
1 files changed, 185 insertions, 0 deletions
diff --git a/converge/example.html b/converge/example.html new file mode 100755 index 0000000..970cc06 --- /dev/null +++ b/converge/example.html @@ -0,0 +1,185 @@ +/Users/gen/src/inf/served/touching-grass.html +/Users/gen/src/inf/fixtures/post.html +/Users/gen/src/inf/fixtures/base.html +Looking for html +Looking for head +Looking for title + closed title + closed head +Looking for body +Looking for ul +Looking for li +Looking for a + closed a + closed li + closed ul +Looking for main + closed main +Looking for footer +Looking for ul +Looking for li + closed li +Looking for li +Looking for abbr + closed abbr + closed li +Looking for li +Looking for abbr + closed abbr + closed li + closed ul + closed footer + closed body + closed html +Looking for nav +Looking for a + closed a + closed nav +BEFORE +Looking for main + closed main +Looking for section +Looking for video + closed video +Looking for ul +Looking for li + closed li +Looking for li +Looking for a + closed a + closed li +Looking for li +Looking for a + closed a + closed li +Looking for li + closed li +Looking for li +Looking for input +Looking for label + closed label + closed input + closed li + closed ul + closed section +Looking for script + parse special +Looking for p + closed p +Looking for p + closed p +Looking for p +Looking for span + closed span +Looking for i + closed i +Looking for span + closed span + closed p +Looking for p + closed p +<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></title> + + <link rel="stylesheet" href="/styles/common.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"><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> + 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> + 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> + 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> {created}</li> + <li><abbr title="modification time">m</abbr> {modified}</li> + </ul> + </footer> +</body> + +</html> |