Adding arcade
This commit is contained in:
parent
d08b7a4c8f
commit
898528d390
18 changed files with 653 additions and 198 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<div class="games-arcade-page">
|
||||
<div class="desk"></div>
|
||||
<div class="desk hidden-lg-down"></div>
|
||||
|
||||
<div class="xfiles-poster hidden-lg-down">
|
||||
<div class="xfiles-content">
|
||||
|
|
@ -20,22 +20,44 @@
|
|||
<div class="believe-text">I WANT TO<br />BELIEVE</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arcade-neon">{{ partial "elements/neon-sign.html" . }}</div>
|
||||
<div class="arcade-lamp">{{ partial "elements/lavalamp.html" . }}</div>
|
||||
<div class="arcade-neon hidden-lg-down">
|
||||
{{ partial "elements/neon-sign.html" . }}
|
||||
</div>
|
||||
<div class="arcade-lamp hidden-lg-down">
|
||||
{{ partial "elements/lavalamp.html" . }}
|
||||
</div>
|
||||
<div class="arcade-container">
|
||||
<!-- Arcade Cabinet Top/Marquee -->
|
||||
<div class="arcade-marquee">
|
||||
<div class="marquee-light marquee-light-left"></div>
|
||||
<div class="marquee-light marquee-light-left hidden-lg-down"></div>
|
||||
<div class="marquee-content">
|
||||
<pre class="arcade-title">
|
||||
██████ █████ ███ ███ ███████ ███████
|
||||
██ ██ ██ ████ ████ ██ ██
|
||||
██ ███ ███████ ██ ████ ██ █████ ███████
|
||||
██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||
██████ ██ ██ ██ ██ ███████ ███████
|
||||
</pre>
|
||||
<div class="arcade-title-wrapper">
|
||||
<pre class="arcade-title">
|
||||
██████╗ █████╗ ███╗ ███╗███████╗███████╗
|
||||
██╔════╝ ██╔══██╗████╗ ████║██╔════╝██╔════╝
|
||||
██║ ███╗███████║██╔████╔██║█████╗ ███████╗
|
||||
██║ ██║██╔══██║██║╚██╔╝██║██╔══╝ ╚════██║
|
||||
╚██████╔╝██║ ██║██║ ╚═╝ ██║███████╗███████║
|
||||
╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝╚══════╝
|
||||
|
||||
</pre>
|
||||
<div class="arcade-subtitle">INSERT COIN</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="marquee-light marquee-light-right hidden-lg-down"></div>
|
||||
|
||||
<!-- Sound Toggle in Header -->
|
||||
<div class="marquee-sound-toggle">
|
||||
<button
|
||||
class="sound-toggle"
|
||||
id="sound-toggle"
|
||||
aria-label="Toggle Sound"
|
||||
>
|
||||
<span class="sound-icon sound-on">🔊</span>
|
||||
<span class="sound-icon sound-off" style="display: none">🔇</span>
|
||||
</button>
|
||||
<div class="sound-label">SOUND</div>
|
||||
</div>
|
||||
<div class="marquee-light marquee-light-right"></div>
|
||||
</div>
|
||||
|
||||
<!-- Main Cabinet Body -->
|
||||
|
|
@ -46,8 +68,13 @@
|
|||
<div class="screen-content">
|
||||
<!-- Games Grid/List -->
|
||||
<div class="games-grid" id="games-grid">
|
||||
{{ range $index, $element := .Paginator.Pages }}
|
||||
<div class="game-card" data-game-index="{{ $index }}">
|
||||
{{ range $index, $element := (.Paginator.Pages.ByParam
|
||||
"released").Reverse }}
|
||||
<div
|
||||
class="game-card{{ if not .Params.released }} unreleased{{ end }}"
|
||||
data-game-index="{{ $index }}"
|
||||
data-released="{{ .Params.released }}"
|
||||
>
|
||||
{{ .Render "summary" }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -68,7 +95,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Control Panel -->
|
||||
<div class="control-panel">
|
||||
<div class="control-panel hidden-lg-down">
|
||||
<!-- Joystick (separate from surface to avoid perspective transform) -->
|
||||
<div class="joystick-container">
|
||||
<div class="joystick" id="arcade-joystick">
|
||||
|
|
@ -77,11 +104,10 @@
|
|||
<div class="joystick-ball"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-label">MOVE</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons (separate from surface to avoid perspective transform) -->
|
||||
<div class="buttons-overlay">
|
||||
<div class="buttons-overlay hidden-lg-down">
|
||||
<div class="buttons-container">
|
||||
<div class="arcade-button-wrap">
|
||||
<button
|
||||
|
|
@ -106,26 +132,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mute Toggle (separate from surface to avoid perspective transform) -->
|
||||
<div class="sound-toggle-overlay">
|
||||
<button
|
||||
class="sound-toggle"
|
||||
id="sound-toggle"
|
||||
aria-label="Toggle Sound"
|
||||
>
|
||||
<span class="sound-icon sound-on">🔊</span>
|
||||
<span class="sound-icon sound-off" style="display: none">🔇</span>
|
||||
</button>
|
||||
<div class="control-label">SOUND</div>
|
||||
</div>
|
||||
|
||||
<div class="control-panel-surface">
|
||||
<!-- Visual surface only, no interactive elements -->
|
||||
</div>
|
||||
<div class="control-panel-surface hidden-lg-down"></div>
|
||||
</div>
|
||||
|
||||
<!-- Cabinet Base/Kick Plate -->
|
||||
<div class="cabinet-base">
|
||||
<div class="cabinet-base hidden-lg-down">
|
||||
<div class="coin-slot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
<div class="game-summary">
|
||||
{{ if .Params.thumbnail }}
|
||||
<div class="game-thumbnail">
|
||||
<img src="{{ .Params.thumbnail }}" alt="{{ .Title }}" loading="lazy">
|
||||
{{ if .Params.released }}
|
||||
<a href="{{ .RelPermalink }}" class="game-link">
|
||||
{{ end }}
|
||||
{{ if .Params.logo }}
|
||||
<div
|
||||
class="game-logo"
|
||||
style="-webkit-mask-image: url('{{ .RelPermalink }}{{ .Params.logo }}'); mask-image: url('{{ .RelPermalink }}{{ .Params.logo }}');"
|
||||
>
|
||||
<img
|
||||
src="{{ .RelPermalink }}{{ .Params.logo }}"
|
||||
alt="{{ .Title }}"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="game-thumbnail game-thumbnail-placeholder">
|
||||
{{ else }}
|
||||
<div class="game-logo game-logo-placeholder">
|
||||
<div class="placeholder-icon">🎮</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if not .Params.released }}
|
||||
<div class="coming-soon-label">COMING SOON</div>
|
||||
{{ end }}
|
||||
{{ if .Params.released }}
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
<div class="game-info">
|
||||
<h3 class="game-title">
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</h3>
|
||||
|
||||
{{ if .Params.description }}
|
||||
<p class="game-description">{{ .Params.description }}</p>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Params.genre }}
|
||||
<div class="game-meta">
|
||||
<span class="game-genre">{{ .Params.genre }}</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue