150 lines
No EOL
3.4 KiB
HTML
150 lines
No EOL
3.4 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>
|
|
<!-- 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;
|
|
'>×</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> |