{{ 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>
<!-- space below nav -->
<!-- <div style="height: calc(44px + 12px);"></div> -->


<div
  style="
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
  "
>
  {{ $top_thing := index .Data.Games .Data.TopHash }}
  <h1 style='width: 100%; word-wrap: break-word; hyphens: auto;'>
    {{ $top_thing.Name }}
    <p>
      {{ $top_thing.Desc }}
      <br><br>
      <a href="/game/{{ .Data.TopHash }}">see more</a>
    </p>
  </h1>
  <!-- {{ template "title_desc.html" .}} -->
  <!-- <img src='https://media.dof.dev/kit/logotype.svg?v22' width='66.6%'>
  <div
    style="
      color: var(--col-01);
      background-color: #ffffff80;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 6px 12px;
      border-radius: 24px;
      margin-top: -32px;
    "
  >degrees of freedom development</div> -->
</div>

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