{{ template "head.html" .}}

<main>

<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>