91 lines
4.1 KiB
HTML
91 lines
4.1 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="Explore BASIC and machine-code programs for the Commodore 64 in a browser-based WASM VICE emulator.">
|
||
<link rel="canonical" href="https://c64.p20.dev/">
|
||
<title>C64 Program Collection</title>
|
||
<link rel="stylesheet" href="/styles.css">
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<a class="brand" href="/">C64 Program Collection</a>
|
||
</header>
|
||
<main>
|
||
<section id="library" class="panel">
|
||
<p class="eyebrow">Program library</p>
|
||
<h1>Small programs. Pure 8-bit fun.</h1>
|
||
<p class="lede">Explore a growing collection of games, puzzles, creative tools, and audiovisual experiments written in Commodore 64 BASIC and 6502 machine code. Pick something that catches your eye, run it instantly, or open the source to see how it works.</p>
|
||
<div class="library-toolbar" aria-label="Program library controls">
|
||
<label class="search-field">
|
||
<span class="sr-only">Search programs</span>
|
||
<input id="search" type="search" placeholder="Search programs…" autocomplete="off">
|
||
</label>
|
||
<label>
|
||
<span class="sr-only">Filter by category</span>
|
||
<select id="category-filter"><option value="">All categories</option></select>
|
||
</label>
|
||
<label>
|
||
<span class="sr-only">Filter by language</span>
|
||
<select id="language-filter">
|
||
<option value="">All languages</option>
|
||
<option value="basic">BASIC</option>
|
||
<option value="machine-code">Machine Code</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
<span class="sr-only">Sort programs</span>
|
||
<select id="sort-order">
|
||
<option value="newest">Sort: Newest first</option>
|
||
<option value="title">Sort: Title</option>
|
||
<option value="category">Sort: Category</option>
|
||
<option value="oldest">Sort: Oldest first</option>
|
||
</select>
|
||
</label>
|
||
<button id="reset-filters" class="reset-button" type="button">Reset</button>
|
||
<div class="view-switcher" role="group" aria-label="View style">
|
||
<button id="grid-view" class="view-button active" type="button" aria-pressed="true" title="Grid view">▦</button>
|
||
<button id="list-view" class="view-button" type="button" aria-pressed="false" title="List view">☷</button>
|
||
</div>
|
||
<button id="refresh" class="toolbar-button" type="button">Refresh</button>
|
||
</div>
|
||
<p id="status" class="status">Loading programs…</p>
|
||
<div id="programs" class="program-grid" aria-live="polite"></div>
|
||
<div id="program-sentinel" class="program-sentinel" aria-hidden="true"></div>
|
||
</section>
|
||
<section id="player" class="player" hidden>
|
||
<div class="player-heading">
|
||
<div>
|
||
<p class="eyebrow">Now running</p>
|
||
<h1 id="program-title"></h1>
|
||
<div id="program-badges" class="program-badges"></div>
|
||
</div>
|
||
<a class="secondary button" href="/">Back to library</a>
|
||
</div>
|
||
<p id="program-description" class="program-page-description"></p>
|
||
<p id="program-release-date" class="release-date"></p>
|
||
<p class="hint">Click inside the emulator to enable keyboard input and sound.</p>
|
||
<div id="game"></div>
|
||
<p id="emulator-error" class="error" hidden></p>
|
||
<section class="instructions-panel" aria-labelledby="instructions-title">
|
||
<h2 id="instructions-title">Controls</h2>
|
||
<div id="program-controls" class="control-list"></div>
|
||
</section>
|
||
</section>
|
||
</main>
|
||
<dialog id="source-modal" class="source-modal">
|
||
<div class="modal-heading">
|
||
<div>
|
||
<p id="source-kind" class="eyebrow">Program source</p>
|
||
<h2 id="source-title">Program source</h2>
|
||
</div>
|
||
<button id="close-source" class="icon-button" type="button" aria-label="Close source">×</button>
|
||
</div>
|
||
<p id="source-status" class="status">Loading source…</p>
|
||
<pre id="source-code" hidden><code></code></pre>
|
||
</dialog>
|
||
<script src="/app.js"></script>
|
||
</body>
|
||
</html>
|
||
|