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