templates for self-hosting game jams (or any other kind of jam tbh)
veryroundbird.house
1<!doctype html>
2<html>
3 <head>
4 <title>!!YOUR GAME JAM TITLE!! | Submissions</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <link rel="stylesheet" type="text/css" href="./css/style.css" />
7 <link rel="stylesheet" type="text/css" href="./css/custom.css" />
8 <link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png">
9 <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
10 <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
11 <link rel="manifest" href="./site.webmanifest">
12 </head>
13 <body class="wide submissions">
14 <div id="banner">
15 <!-- uncomment the below line if banner is desired -->
16 <!-- <img src="!!YOURBANNER!!" alt="!!BANNERALT!!" /> -->
17 </div>
18 <div id="page">
19 <header>
20 <h1>!!YOUR GAME JAM TITLE!!</h1>
21 <p class="hosted">Hosted by <a href="!!YOURLINK!!" target="_blank">!!YOURNAME!!</a> • <a href="!!LINK TO HASHTAG FILTER!!" target="_blank">#!!HASHTAG!!</a></p>
22 <div class="entries">
23 <span class="count" id="entriesCount">!!#!!</span>
24 <span class="caption">Entries</span>
25 </div>
26 <nav>
27 <ul>
28 <li><a href="index.html">Overview</a></li>
29 <!-- uncomment the below if you have a discord or a forum or something -->
30 <!-- <li><a href="!!COMMUNITY LINK!!">Community</a></li> -->
31 <li><a href="submissions.html" class="current">Submissions</a></li>
32 </ul>
33 </nav>
34 </header>
35 <main>
36 <aside id="filters">
37 <div class="afs-filter-container">
38 <!-- Filter Controls -->
39 <div class="afs-filter-controls">
40 <!-- Basic Filters -->
41
42 <!-- Search Input -->
43 <input type="text" class="afs-filter-search" placeholder="Search by title, author, or tags" />
44
45 <p class="label">Sort entries by:</p>
46 <ul id="sorts">
47 <li><button class="custom-sort" data-sort-key="date" data-sort-direction="desc"> <span class="afs-sort-direction"><img src="./images/sort-desc.svg" alt="Sort descending" /></span> Date</button></li>
48 <li><button class="custom-sort" data-sort-key="title" data-sort-direction="asc"> <span class="afs-sort-direction"><img src="./images/sort-asc.svg" alt="Sort descending" /></span> Title</button></li>
49 <li><button class="custom-sort" data-sort-key="shuffle" data-sort-direction="desc"> <span class="afs-sort-direction"><img src="./images/sort-desc.svg" alt="Sort descending" /></span> Random</button></li>
50 </ul>
51
52 <details open><summary>Platform</summary>
53 <ul>
54 <li><button class="afs-btn-filter" data-filter="platforms:browser"><img src="./images/web.svg" alt="" class="icon" /> Play in browser</button></li>
55 <li><button class="afs-btn-filter" data-filter="platforms:windows"><img src="./images/windows.svg" alt="" class="icon" /> Windows</button></li>
56 <li><button class="afs-btn-filter" data-filter="platforms:macos"><img src="./images/macos.svg" alt="" class="icon" /> Mac OS</button></li>
57 <li><button class="afs-btn-filter" data-filter="platforms:linux"><img src="./images/linux.svg" alt="" class="icon" /> Linux</button></li>
58 <li><button class="afs-btn-filter" data-filter="platforms:android"><img src="./images/android.svg" alt="" class="icon" /> Android</button></li>
59 </ul>
60 </details>
61
62 <details><summary>Tags</summary>
63 <div id="tags"></div>
64 </details>
65
66 <details><summary>Submission Date</summary>
67 <div id="date-filter"></div>
68 </details>
69
70 <!-- Results Counter -->
71 <div class="afs-filter-counter"></div>
72 </div>
73
74 <!-- Pagination Container -->
75 <div class="afs-pagination-container"></div>
76 </div>
77 </aside>
78 <div id="list">
79
80 </div>
81 </main>
82 <footer>
83 <a href="https://veryroundbird.house">♥︎</a>
84 </footer>
85 </div>
86 <script type="module" src="./js/script.mjs"></script>
87 </body>
88</html>