{{ template "head.html" .}}

<div id="top_img">
  <!-- <div
    style="
      background-image: url(/public/img/hack.jpg);
      background-position: bottom;
      background-size: cover;
      height: 100vh;
      position: relative;
    "
  ></div> -->
  <video src='/public/games/{{ .Data.TopHash }}.webm' autoplay loop muted
    style="
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom;
    "
  >
  </video>
  <div
    style="
      position: absolute;
      top: 66.66%; left: 0; right: 0; bottom: 0;
      background: linear-gradient(in oklab to top, #FFFFFFFF, #FFFFFF00);
      mix-blend-mode: color;
    "
  ></div>
</div>

<p style='
  width: 100%;
  padding-right: 20px;
  font-size: 18px;
  line-height: 2.0;
  text-align: right;
  color: white;
'>
  An effort to open higher degrees of<br>
  spatial interaction free<br>
  to the world.
</p>

<img src='/public/img/dofdev_logo.svg?v22' width='100%'>
<p>degrees of freedom development</p>

<div class='shuffle' style='
  display: flex;
  flex-flow: column;
  align-items: center;
'>
  <div style='color: white; font-size: 20px;'>Ethan Merchant 
    <a href='https://ethanmerchant.com' style='color: var(--light);'>@spatialfree</a>
  </div>
  <div style='color: white; font-size: 20px;'>Niko Ryan 
    <a href='https://twitter.com/opendegree' style='color: var(--light);'>@opendegree</a>
  </div>
</div>

<div class='t_symbol' style='
  font-size: 32px;
'>&times;</div>

<div id='x'>
  <a href='https://stereokit.net' target='_blank'>
    <div style='
      background-image: url("https://stereokit.net/img/StereoKitLogoLight.svg");
    '></div>
  </a>
  <a href='https://www.projectnorthstar.org/' target='_blank'>
    <div style='
      background-image: url("/public/img/icons/northstar.svg");
    '></div>
  </a>
  <a href='https://stardustxr.org' target='_blank'>
    <div style='
      background-image: url("https://stardustxr.org/img/icon.gif");
    '></div>
  </a>
</div>



<div class='t_symbol' style='
  margin-top: 4rem;
'>&conint;</div>

<!-- <div style='height: 32px;'></div> -->
<!-- <div id='fdeg'>&plus;</div> -->

<h1>projects</h1>
<p class='subtitle'>xr based interfaces</p>

<a href='/braille_xr'>braille_xr</a>

<div style='height: 32px;'></div>
<img src='/public/img/logo.svg' width='64px'>
<div style='height: 24px;'></div>

<input type='password' autofocus
name='pass' placeholder='pass' 
hx-post='/pass'
hx-vals='{"pass": this.value}'
hx-swap='outerHTML'
>
<!-- <button hx-post='/clicked' hx-swap='outerHTML'>
  Click Me
</button> -->

<footer>&copy; 2018-2024 dofdev</footer>


<style>
#x {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  gap: 32px;
  > a > div {
    min-width: 64px;
    min-height: 64px;
    background-size: contain;
  }
}
</style>