moving ux sandbox out of archive.org homedir

internetarchive · Dec 29, 2024 · f950880 · f950880
1 parent d8dd2e2
commit f950880
Show file tree

Hide file tree

Showing 146 changed files with 14,454 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 tracey-jaquith-gitlab-and-nomad-a-gitops-dream-come-true.pdf
+ux/Downloads
diff --git a/ux/__________________________index.htm b/ux/__________________________index.htm
@@ -0,0 +1,58 @@
+<link href="https://esm.ext.archive.org/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
+
+<h1>tracey's ux sandbox</h1>
+<hr>
+<div id="x"></div>
+
+<style>
+  #x {
+    display: grid;
+    column-gap: 2rem;
+    row-gap: 0.1rem;
+    grid-template-columns: repeat(auto-fit, minmax(min-content, 200px));
+    margin: 0 225px 0 25px; /* 25 + whatever is in minmax() above */
+  }
+  a {
+    display: block;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+  h1 {
+    text-align: center;
+  }
+  h2 {
+    font-size: 150%;
+    display: block;
+  }
+</style>
+<script>
+/* eslint-disable no-console */
+
+const log = console.log.bind(console)
+
+const highlights = [
+  '__timestream.htm',
+  'boot-text-fills.htm',
+  'codepen-css-grid-masonic.htm',
+  'flip.htm',
+  'grid-pix-nasa.htm',
+  'jw-test.htm',
+  'poohBot.htm',
+  'sticky-911.htm',
+  'sticky-tv-wireframe.htm',
+  'table.htm',
+  'tv-coach.htm',
+  'tv3-wireframe-sticky.htm',
+]
+
+fetch('./').then((e) => e.text()).then((txt) => {
+  log([...txt.matchAll(/href="([^"]+)"/g)])
+  const hrefs = [...txt.matchAll(/href="([^"]+)"/g)].map((e) => e[1].replace(/\/$/, '').replace(/^\.\/+/, ''))
+    .filter((e) => e.match(/\.(htm|m3u|m3u8)$/i) && !e.startsWith('___'))
+  log({ hrefs })
+  document.getElementById('x').innerHTML = hrefs.map((e) => {
+    const high = highlights.includes(e)
+    return `${high ? '<h2>' : ''}<a href=${e}>${e}</a>${high ? '</h2>' : ''}`
+  }).join('')
+})
+</script>
diff --git a/ux/__timestream.htm b/ux/__timestream.htm
@@ -0,0 +1,109 @@
+<head>
+  <title>gleam the cube</title>
+  <link href="https://esm.archive.org/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
+</head>
+<div style="height:100%">
+  <h1 style="text-align:center">infinite scroll, both up & down 😻</h1>
+  <div class="results"></div>
+  <center class="more_search"><a href="#">mo</center>
+</div>
+
+<style>
+  .well-sm{ margin:20px; }
+  #nav-tophat, .navbar { position:fixed; left:0; right:0; }
+  .results { padding-top:100px; margin:auto; max-width:900px; }
+  .more_search { text-align:center; opacity:0.1; margin-top:50px; }
+</style>
+
+
+<script type="module">
+/* eslint-disable no-console */
+import $ from 'https://esm.archive.org/[email protected]'
+
+window.jQuery = $
+window.$ = $
+
+const log = console.log.bind(console)
+const NUM = 30
+let start = 100
+let cangoup = false
+let more_searching = false
+let adding_top = false
+
+// `quotes.json` was grouped multiple requests from:  https://zenquotes.io/api/quotes
+fetch('quotes.json').then((e) => e.json()).then((quotes) => {
+  function add_quotes(scroll = null, up = false) {
+    if (scroll !== null) {
+      start = scroll
+      if (up)
+        start -= NUM
+    }
+
+    let htm = ''
+    for (let n = start; n <= start + NUM - 1; n++) {
+      const quote = quotes.pop() ?? 'hi thats the end of the film'
+      htm += `<div id="i${n}" class="well well-sm"><h4>${n}</h4>${quote}</div>`
+    }
+    if (up)
+      $('.results').prepend(htm)
+    else
+      $('.results').append(htm)
+  }
+  add_quotes()
+
+
+  const scrolled2 = () => {
+    const newtop = $(window).scrollTop()
+    // log('scrolled to', { newtop })
+
+    if (!cangoup) {
+      if (newtop > 200) {
+        cangoup = true
+        $('h1').hide()
+      }
+    } else if (newtop < 2) {
+      if (!adding_top) {
+        adding_top = true
+        setTimeout(() => {
+        // if (!confirm('going up?')) return;
+          const $first = $('.well-sm:first > h4')
+          const  first = parseInt($first.text(), 10)
+          const bump = $first.offset().top
+          log({ first, bump })
+          add_quotes(first, true)
+          $(window).scrollTop($first.offset().top - bump)
+          adding_top = false
+        }, 500)
+      }
+    }
+    if (newtop < 50)
+      return
+
+    const selector = '.more_search:visible'
+    const $e = $(selector)
+    if (!$e.length)
+      return
+
+    // make the edge detect for "hit bottom" 40 pixels from the bottom
+    const check = $e.offset().top + $e.outerHeight() - $(window).height() - 40
+    // log('-v- check', check)
+    if (newtop > check) {
+      log('hit rock bottom > ', check)
+      if (!more_searching)
+        $(`${selector} > a`).click()
+    }
+  }
+
+  // register for scroll updates (for infinite search results)
+  $(window).scroll(scrolled2)
+
+  $('.more_search > a').click(() => {
+    const last = parseInt($('.well-sm:last > h4').text(), 10)
+    log({ last })
+    add_quotes(last + 1)
+
+    more_searching = false
+    return false
+  })
+})
+</script>
diff --git a/ux/astroVR.htm b/ux/astroVR.htm
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Connecting up Google Cardboard to web APIs</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <style>
+      body {
+        margin: 0px;
+        overflow: hidden;
+      }
+      #webglviewer {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webglviewer"></div>
+
+<script type="module">
+  import * as THREE from 'https://esm.archive.org/[email protected]'
+  import { OrbitControls } from 'https://esm.archive.org/[email protected]/examples/jsm/controls/OrbitControls.js'
+  import { StereoEffect  } from 'https://esm.archive.org/[email protected]/examples/jsm/effects/StereoEffect.js'
+
+
+  let scene
+  let camera
+  let renderer
+  let element
+  let container
+  let effect
+  let controls
+
+  // Particles
+  const particles = new THREE.Object3D()
+  const totalParticles = 200
+  const maxParticleSize = 200
+
+  function init() {
+    scene = new THREE.Scene()
+    camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.001, 700)
+    camera.position.set(0, 15, 0)
+    scene.add(camera)
+
+    renderer = new THREE.WebGLRenderer()
+    element = renderer.domElement
+    container = document.getElementById('webglviewer')
+    container.appendChild(element)
+
+    effect = new StereoEffect(renderer)
+
+    // Our initial control fallback with mouse/touch events in case DeviceOrientation is not enabled
+    controls = new OrbitControls(camera, element)
+    controls.target.set(
+      camera.position.x + 0.15,
+      camera.position.y,
+      camera.position.z,
+    )
+    controls.noPan = true
+    controls.noZoom = true
+
+    // Our preferred controls via DeviceOrientation
+    function setOrientationControls(e) {
+      if (!e.alpha)
+        return
+
+      controls = new THREE.DeviceOrientationControls(camera, true)
+      controls.connect()
+      controls.update()
+
+      // eslint-disable-next-line no-use-before-define
+      element.addEventListener('click', fullscreen, false)
+      window.removeEventListener('deviceorientation', setOrientationControls, true)
+    }
+    window.addEventListener('deviceorientation', setOrientationControls, true)
+
+    // Lighting
+    const light = new THREE.PointLight(0x999999, 2, 100)
+    light.position.set(50, 50, 50)
+    scene.add(light)
+
+    const lightScene = new THREE.PointLight(0x999999, 2, 100)
+    lightScene.position.set(0, 5, 0)
+    scene.add(lightScene)
+
+    const floorTexture = THREE.ImageUtils.loadTexture('images/glogo.png')
+    floorTexture.wrapS = THREE.RepeatWrapping
+    floorTexture.wrapT = THREE.RepeatWrapping
+    floorTexture.repeat = new THREE.Vector2(50, 50)
+    floorTexture.anisotropy = renderer.getMaxAnisotropy()
+
+    const floorMaterial = new THREE.MeshPhongMaterial({
+      color: 0xffffff,
+      specular: 0xffffff,
+      shininess: 20,
+      shading: THREE.FlatShading,
+      map: floorTexture,
+    })
+
+    const geometry = new THREE.PlaneBufferGeometry(1000, 1000)
+
+    const floor = new THREE.Mesh(geometry, floorMaterial)
+    floor.rotation.x = -Math.PI / 2
+    scene.add(floor)
+
+    const particleTexture = THREE.ImageUtils.loadTexture('images/astronaut.png')
+    const spriteMaterial = new THREE.SpriteMaterial({
+      map: particleTexture,
+      color: 0xffffff,
+    })
+
+    for (let i = 0; i < totalParticles; i++) {
+      const sprite = new THREE.Sprite(spriteMaterial)
+
+      sprite.scale.set(64, 64, 1.0)
+      sprite.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.75)
+      sprite.position.setLength(maxParticleSize * Math.random())
+
+      sprite.material.blending = THREE.AdditiveBlending
+
+      particles.add(sprite)
+    }
+    particles.position.y = 70
+    scene.add(particles)
+
+    // eslint-disable-next-line no-use-before-define
+    animate()
+  }
+
+
+  function resize() {
+    const width = container.offsetWidth
+    const height = container.offsetHeight
+
+    camera.aspect = width / height
+    camera.updateProjectionMatrix()
+
+    renderer.setSize(width, height)
+    effect.setSize(width, height)
+  }
+
+
+  function animate() {
+    requestAnimationFrame(animate)
+
+    resize()
+
+    camera.updateProjectionMatrix()
+
+    controls.update()
+
+    effect.render(scene, camera)
+  }
+
+
+  function fullscreen() {
+    if (container.requestFullscreen)
+      container.requestFullscreen()
+    else if (container.msRequestFullscreen)
+      container.msRequestFullscreen()
+    else if (container.mozRequestFullScreen)
+      container.mozRequestFullScreen()
+    else if (container.webkitRequestFullscreen)
+      container.webkitRequestFullscreen()
+  }
+
+  init()
+</script>
+
+</body>
+</html>
diff --git a/ux/bleah.htm b/ux/bleah.htm
@@ -0,0 +1,20 @@
+<style>
+ body { border:0;padding:0;margin:0; }
+ #cols {
+   position:relative;
+   white-space:nowrap;
+   min-height: 100%;
+   height: 100%;
+ }
+ .tvcol {
+   display:inline-block;
+   width:500px;
+   background-color:wheat;
+   border:5px solid green;
+   height:100%;
+   max-height:100%;
+   white-space:normal;
+ }
+</style>
+
+<div id="cols"><div class="tvcol">hi</div><div class="tvcol">hi</div><div class="tvcol">hi</div><div class="tvcol">hi</div><div class="tvcol">hi</div><div class="tvcol">hi</div><div class="tvcol">hi</div></div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		tracey-jaquith-gitlab-and-nomad-a-gitops-dream-come-true.pdf
		ux/Downloads