126 lines
No EOL
2.7 KiB
HTML
126 lines
No EOL
2.7 KiB
HTML
{{ 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;
|
|
'>×</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;
|
|
'>∮</div>
|
|
|
|
<!-- <div style='height: 32px;'></div> -->
|
|
<!-- <div id='fdeg'>+</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>© 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> |