115 lines
2.3 KiB
HTML
115 lines
2.3 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.Hash }}.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>
|
|
|
|
<div
|
|
style="
|
|
height: 100vh;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-flow: column;
|
|
"
|
|
>
|
|
<h1 style='width: 100%; word-wrap: break-word; hyphens: auto;'>
|
|
{{ .Title }}
|
|
<p>
|
|
{{ .Desc }}
|
|
</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>
|
|
|
|
<div
|
|
style="
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 12px;
|
|
"
|
|
>
|
|
<h2>notes</h2>
|
|
<pre>{{ .Data.Game.Notes }}</pre>
|
|
|
|
<div style='height: 128px; width: 100%;'></div>
|
|
|
|
<div
|
|
style="
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 300px;
|
|
width: 300px;
|
|
"
|
|
>
|
|
<video src='/public/games/{{ .Data.Hash }}_alpha.webm' autoplay loop muted
|
|
style="
|
|
width: fit-content;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
"
|
|
></video>
|
|
<div
|
|
style="
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
"
|
|
>
|
|
<div
|
|
style="
|
|
outline: 2px solid var(--col-04);
|
|
border-radius: 12px;
|
|
height: 140px;
|
|
width: 110px;
|
|
"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|