commit c225a623f242ecce2f3dea6dd4db73739e747eb4 · veryroundbird.house/homemadejam

+4 -1

README.md

···

       14
       14
        
       

     

       15
       15
        
       if you don't have a local server solution already set up, you could probably use something like [simple web server](https://simplewebserver.org). it doesn't have a linux build, but i supsect if you're a linux person you can figure out how to set up a temporary simple web server with python (http.server) or node (http-server).

     

       16
       16
        
       

     

       17
       17
       +
       replace things in the template files that are surrounded by double exclamation points (!!). there are some variables to set at the top of the `js/script.mjs` file, and some style variables to set at the top of `css/style.css`. if you want to add more css, there's a `css/custom.css` file you can tack new stuff onto.

     

       18
       18
       +
       

     

       17
       19
        
       also, you will have to fiddle with JSON for game data. unless you want to just code all them manually for some reason, in which case i salute you. i recommend using [json console](https://jsonconsole.com/json-editor) if you're not down with the brackets since the table and graph views are really useful for like. checking your work

     

       18
       20
        
       

     

       19
       21
        
       ## plain php

     
···

       46
       48
        
       

     

       47
       49
        
       * default favicon by [supanut piyakanont](https://thenounproject.com/creator/supanutpiyakanont/)

     

       48
       50
        
       * filtering uses [advanced filtering system](https://misits.github.io/advanced-filter-system/) by misits

     

       49
       49
       -
       * fonts provided by [google fonts](https://fonts.google.com/) but if you want to move those assets local i recommend fontsquirrel's [webfont generator](https://www.fontsquirrel.com/tools/webfont-generator) to generate and optimize the font formats
     

       51
       51
       +
       * fonts provided by [google fonts](https://fonts.google.com/) but if you want to move those assets local i recommend fontsquirrel's [webfont generator](https://www.fontsquirrel.com/tools/webfont-generator) to generate and optimize the font formats

     

       52
       52
       +
       * icons from [font awesome](https://fontawesome.com)

+104 -1

plain-html/css/style.css

···

       16
       16
        
       	--contentBgImage: url();

     

       17
       17
        
       }

     

       18
       18
        
       

     

       19
       19
       +
       * {

     

       20
       20
       +
       	box-sizing: border-box;

     

       21
       21
       +
       }

     

       22
       22
       +
       

     

       19
       23
        
       body {

     

       20
       24
        
       	background-color: var(--background);

     

       21
       25
        
       	background-image: url(--pageBgImage);

     
···

       31
       35
        
       

     

       32
       36
        
       a:hover {

     

       33
       37
        
       	color: color-mix(in srgb-linear, var(--accent), #000000 50%);

     

       38
       38
       +
       }

     

       39
       39
       +
       

     

       40
       40
       +
       .icon {

     

       41
       41
       +
       	width: 16px;

     

       42
       42
       +
       	height: 16px;

     

       43
       43
       +
       	display: inline-block;

     

       44
       44
       +
       	margin-right: 5px;

     

       34
       45
        
       }

     

       35
       46
        
       

     

       36
       47
        
       #page {

     
···

       212
       223
        
       .submissions main {

     

       213
       224
        
       	display: grid;

     

       214
       225
        
       	grid-template-areas: "filters list";

     

       215
       215
       -
       	grid-template-columns: 200px 1fr;

     

       226
       226
       +
       	grid-template-columns: 250px 1fr;

     

       216
       227
        
       	gap: 20px;

     

       217
       228
        
       }

     

       218
       229
        
       

     

       219
       230
        
       .submissions #filters {

     

       220
       231
        
       	grid-area: filters;

     

       232
       232
       +
       	text-align: left;

     

       233
       233
       +
       }

     

       234
       234
       +
       

     

       235
       235
       +
       .submissions #filters #tags {

     

       236
       236
       +
       	display: flex;

     

       237
       237
       +
       	flex-wrap: wrap;

     

       238
       238
       +
       	gap: 5px;

     

       239
       239
       +
       	justify-content: flex-start;

     

       240
       240
       +
       }

     

       241
       241
       +
       

     

       242
       242
       +
       .submissions #filters #tags button {

     

       243
       243
       +
       	white-space: pre;

     

       244
       244
       +
       }

     

       245
       245
       +
       

     

       246
       246
       +
       .submissions #filters details {

     

       247
       247
       +
       	margin-bottom: 10px;

     

       248
       248
       +
       }

     

       249
       249
       +
       

     

       250
       250
       +
       .submissions #filters details summary,

     

       251
       251
       +
       p.label {

     

       252
       252
       +
       	font-size: .8em;

     

       253
       253
       +
       	color: color-mix(in srgb-linear, var(--foreground), var(--background) 10%);

     

       254
       254
       +
       	padding: 5px 0;

     

       255
       255
       +
       	margin-bottom: 0;

     

       256
       256
       +
       }

     

       257
       257
       +
       

     

       258
       258
       +
       .submissions #filters details ul {

     

       259
       259
       +
       	list-style: none;

     

       260
       260
       +
       	margin: 0;

     

       261
       261
       +
       	padding: 0;

     

       262
       262
       +
       }

     

       263
       263
       +
       

     

       264
       264
       +
       .submissions #filters ul#sorts {

     

       265
       265
       +
       	list-style: none;

     

       266
       266
       +
       	margin: 0 0 10px;

     

       267
       267
       +
       	padding: 0;

     

       268
       268
       +
       }

     

       269
       269
       +
       

     

       270
       270
       +
       .submissions #filters ul#sorts li button {

     

       271
       271
       +
       	border: none;

     

       272
       272
       +
       	background-color: transparent;

     

       273
       273
       +
       	color: var(--foreground);

     

       274
       274
       +
       	border-radius: 0;

     

       275
       275
       +
       	font-family: inherit;

     

       276
       276
       +
       	font-size: inherit;

     

       277
       277
       +
       	font-size: .9em;

     

       278
       278
       +
       }

     

       279
       279
       +
       

     

       280
       280
       +
       .submissions #filters ul#sorts li button.sort-active {

     

       281
       281
       +
       	color: color-mix(in srgb-linear, var(--accent), #000000 10%);

     

       282
       282
       +
       	font-weight: bold;

     

       283
       283
       +
       }

     

       284
       284
       +
       

     

       285
       285
       +
       .submissions #filters ul#sorts li button img {

     

       286
       286
       +
       	width: 16px;

     

       287
       287
       +
       	height: 16px;

     

       288
       288
       +
       	margin-right: 5px;

     

       289
       289
       +
       	display: inline-block;

     

       290
       290
       +
       	vertical-align: middle;

     

       291
       291
       +
       }

     

       292
       292
       +
       

     

       293
       293
       +
       .submissions #filters .afs-btn-filter {

     

       294
       294
       +
       	padding: 3px 0;

     

       295
       295
       +
       	border: none;

     

       296
       296
       +
       	border-radius: 0;

     

       297
       297
       +
       }

     

       298
       298
       +
       

     

       299
       299
       +
       .submissions #filters .afs-btn-filter.active {

     

       300
       300
       +
       	color: color-mix(in srgb-linear, var(--accent), #000000 10%);

     

       301
       301
       +
       	background-color: transparent;

     

       302
       302
       +
       	font-weight: bold;

     

       303
       303
       +
       }

     

       304
       304
       +
       

     

       305
       305
       +
       .submissions #filters .afs-btn-filter.active img {

     

       306
       306
       +
       	fill: color-mix(in srgb-linear, var(--accent), #000000 10%);

     

       307
       307
       +
       }

     

       308
       308
       +
       

     

       309
       309
       +
       .submissions #filters .afs-filter-search {

     

       310
       310
       +
       	width: 100%;

     

       311
       311
       +
         padding: 0.5rem;

     

       312
       312
       +
         border: 1px solid var(--accent);

     

       313
       313
       +
         border-radius: 0.25rem;

     

       314
       314
       +
         font-size: 0.875rem;

     

       315
       315
       +
         color: var(--foreground);

     

       316
       316
       +
         transition: border-color 0.2s ease;

     

       317
       317
       +
       	margin-bottom: 10px;

     

       318
       318
       +
       }

     

       319
       319
       +
       

     

       320
       320
       +
       .submissions #filters .afs-filter-counter {

     

       321
       321
       +
       	text-align: center;

     

       322
       322
       +
       	font-style: italic;

     

       323
       323
       +
       	font-size: .9em;

     

       221
       324
        
       }

     

       222
       325
        
       

     

       223
       326
        
       .submissions #list {

+1 -1

plain-html/data/games.json

···

       7
       7
        
       				"link": "https://games.birdwrongs.sh"

     

       8
       8
        
       			}

     

       9
       9
        
       		],

     

       10
       10
       -
       		"platforms": ["win", "mac"],

     

       10
       10
       +
       		"platforms": ["windows", "macos"],

     

       11
       11
        
       		"submitTime": "2026-02-15T11:05:45",

     

       12
       12
        
       		"thumbnail": "https://images.unsplash.com/photo-1658069778823-40c13a2dd2e4?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",

     

       13
       13
        
       		"tags": ["yuri", "horror"],

plain-html/images/android.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M452.5 317.9C465.8 317.9 476.5 328.6 476.5 341.9C476.5 355.2 465.8 365.9 452.5 365.9C439.2 365.9 428.5 355.2 428.5 341.9C428.5 328.6 439.2 317.9 452.5 317.9zM187.4 317.9C200.7 317.9 211.4 328.6 211.4 341.9C211.4 355.2 200.7 365.9 187.4 365.9C174.1 365.9 163.4 355.2 163.4 341.9C163.4 328.6 174.1 317.9 187.4 317.9zM461.1 221.4L509 138.4C509.8 137.3 510.3 136 510.5 134.6C510.7 133.2 510.7 131.9 510.4 130.5C510.1 129.1 509.5 127.9 508.7 126.8C507.9 125.7 506.9 124.8 505.7 124.1C504.5 123.4 503.2 123 501.8 122.8C500.4 122.6 499.1 122.8 497.8 123.2C496.5 123.6 495.3 124.3 494.2 125.1C493.1 125.9 492.3 127.1 491.7 128.3L443.2 212.4C404.4 195 362.4 186 319.9 186C277.4 186 235.4 195 196.6 212.4L148.2 128.4C147.6 127.2 146.7 126.1 145.7 125.2C144.7 124.3 143.4 123.7 142.1 123.3C140.8 122.9 139.4 122.8 138.1 122.9C136.8 123 135.4 123.5 134.2 124.2C133 124.9 132 125.8 131.2 126.9C130.4 128 129.8 129.3 129.5 130.6C129.2 131.9 129.2 133.3 129.4 134.7C129.6 136.1 130.2 137.3 130.9 138.5L178.8 221.5C96.5 266.2 40.2 349.5 32 448L608 448C599.8 349.5 543.5 266.2 461.1 221.4z"/></svg>

plain-html/images/linux.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M316.9 187.3C317.9 187.8 318.7 189 319.9 189C321 189 322.7 188.6 322.8 187.5C323 186.1 320.9 185.2 319.6 184.6C317.9 183.9 315.7 183.6 314.1 184.5C313.7 184.7 313.3 185.2 313.5 185.6C313.8 186.9 315.8 186.7 316.9 187.3zM295 189C296.2 189 297 187.8 298 187.3C299.1 186.7 301.1 186.9 301.5 185.7C301.7 185.3 301.3 184.8 300.9 184.6C299.3 183.7 297.1 184 295.4 184.7C294.1 185.3 292 186.2 292.2 187.6C292.3 188.6 294 189.1 295 189zM516 467.8C512.4 463.8 510.7 456.2 508.8 448.1C507 440 504.9 431.3 498.3 425.7C497 424.6 495.7 423.6 494.3 422.8C493 422 491.6 421.3 490.2 420.8C499.4 393.5 495.8 366.3 486.5 341.7C475.1 311.6 455.2 285.3 440 267.3C422.9 245.8 406.3 225.4 406.6 195.3C407.1 149.4 411.7 64.1 330.8 64C228.4 63.8 254 167.4 252.9 199.2C251.2 222.6 246.5 241 230.4 263.9C211.5 286.4 184.9 322.7 172.3 360.6C166.3 378.5 163.5 396.7 166.1 413.9C159.6 419.7 154.7 428.6 149.5 434.1C145.3 438.4 139.2 440 132.5 442.4C125.8 444.8 118.5 448.4 114 456.9C111.9 460.8 111.2 465 111.2 469.3C111.2 473.2 111.8 477.2 112.4 481.1C113.6 489.2 114.9 496.8 113.2 501.9C108 516.3 107.3 526.3 111 533.6C114.8 540.9 122.4 544.1 131.1 545.9C148.4 549.5 171.9 548.6 190.4 558.4C210.2 568.8 230.3 572.5 246.3 568.8C257.9 566.2 267.4 559.2 272.2 548.6C284.7 548.5 298.5 543.2 320.5 542C335.4 540.8 354.1 547.3 375.6 546.1C376.2 548.4 377 550.7 378.1 552.8L378.1 552.9C386.4 569.6 401.9 577.2 418.4 575.9C435 574.6 452.5 564.9 466.7 548C480.3 531.6 502.7 524.8 517.6 515.8C525 511.3 531 505.7 531.5 497.5C531.9 489.3 527.1 480.2 516 467.8zM319.8 151.3C329.6 129.1 354 129.5 363.8 150.9C370.3 165.1 367.4 181.8 359.5 191.3C357.9 190.5 353.6 188.7 346.9 186.4C348 185.2 350 183.7 350.8 181.8C355.6 170 350.6 154.8 341.7 154.5C334.4 154 327.8 165.3 329.9 177.5C325.8 175.5 320.5 174 316.9 173.1C315.9 166.2 316.6 158.5 319.8 151.3zM279.1 139.8C289.2 139.8 299.9 154 298.2 173.3C294.7 174.3 291.1 175.8 288 177.9C289.2 169 284.7 157.8 278.4 158.3C270 159 268.6 179.5 276.6 186.4C277.6 187.2 278.5 186.2 270.7 191.9C255.1 177.3 260.2 139.8 279.1 139.8zM265.5 200.5C271.7 195.9 279.1 190.5 279.6 190C284.3 185.6 293.1 175.8 307.5 175.8C314.6 175.8 323.1 178.1 333.4 184.7C339.7 188.8 344.7 189.1 356 194C364.4 197.5 369.7 203.7 366.5 212.2C363.9 219.3 355.5 226.6 343.8 230.3C332.7 233.9 324 246.3 305.6 245.2C301.7 245 298.6 244.2 296 243.1C288 239.6 283.8 232.7 276 228.1C267.4 223.3 262.8 217.7 261.3 212.8C259.9 207.9 261.3 203.8 265.5 200.5zM268.8 534.5C266.1 569.6 224.9 568.9 193.5 552.5C163.6 536.7 124.9 546 117 530.6C114.6 525.9 114.6 517.9 119.6 504.2L119.6 504C122 496.4 120.2 488 119 480.1C117.8 472.3 117.2 465.1 119.9 460.1C123.4 453.4 128.4 451 134.7 448.8C145 445.1 146.5 445.4 154.3 438.9C159.8 433.2 163.8 426 168.6 420.9C173.7 415.4 178.6 412.8 186.3 414C194.4 415.2 201.4 420.8 208.2 430L227.8 465.6C237.3 485.5 270.9 514 268.8 534.5zM267.4 508.6C263.3 502 257.8 495 253 489C260.1 489 267.2 486.8 269.7 480.1C272 473.9 269.7 465.2 262.3 455.2C248.8 437 224 422.7 224 422.7C210.5 414.3 202.9 404 199.4 392.8C195.9 381.6 196.4 369.5 199.1 357.6C204.3 334.7 217.7 312.4 226.3 298.4C228.6 296.7 227.1 301.6 217.6 319.2C209.1 335.3 193.2 372.5 215 401.6C215.6 380.9 220.5 359.8 228.8 340.1C240.8 312.7 266.1 265.2 268.1 227.4C269.2 228.2 272.7 230.6 274.3 231.5C278.9 234.2 282.4 238.2 286.9 241.8C299.3 251.8 315.4 251 329.3 243C335.5 239.5 340.5 235.5 345.2 234C355.1 230.9 363 225.4 367.5 219C375.2 249.4 393.2 293.3 404.7 314.7C410.8 326.1 423 350.2 428.3 379.3C431.6 379.2 435.3 379.7 439.2 380.7C453 345 427.5 306.5 415.9 295.8C411.2 291.2 411 289.2 413.3 289.3C425.9 300.5 442.5 323 448.5 348.3C451.3 359.9 451.8 372 448.9 384C465.3 390.8 484.8 401.9 479.6 418.8C477.4 418.7 476.4 418.8 475.4 418.8C478.6 408.7 471.5 401.2 452.6 392.7C433 384.1 416.6 384.1 414.3 405.2C402.2 409.4 396 419.9 392.9 432.5C390.1 443.7 389.3 457.2 388.5 472.4C388 480.1 384.9 490.4 381.7 501.4C349.6 524.3 305 534.3 267.4 508.6zM524.8 497.1C523.9 513.9 483.6 517 461.6 543.6C448.4 559.3 432.2 568 418 569.1C403.8 570.2 391.5 564.3 384.3 549.8C379.6 538.7 381.9 526.7 385.4 513.5C389.1 499.3 394.6 484.7 395.3 472.9C396.1 457.7 397 444.4 399.5 434.2C402.1 423.9 406.1 417 413.2 413.1C413.5 412.9 413.9 412.8 414.2 412.6C415 425.8 421.5 439.2 433 442.1C445.6 445.4 463.7 434.6 471.4 425.8C480.4 425.5 487.1 424.9 494 430.9C503.9 439.4 501.1 461.2 511.1 472.5C521.7 484.1 525.1 492 524.8 497.1zM269.4 212.7C271.4 214.6 274.1 217.2 277.4 219.8C284 225 293.2 230.4 304.7 230.4C316.3 230.4 327.2 224.5 336.5 219.6C341.4 217 347.4 212.6 351.3 209.2C355.2 205.8 357.2 202.9 354.4 202.6C351.6 202.3 351.8 205.2 348.4 207.7C344 210.9 338.7 215.1 334.5 217.5C327.1 221.7 315 227.7 304.6 227.7C294.2 227.7 285.9 222.9 279.7 218C276.6 215.5 274 213 272 211.1C270.5 209.7 270.1 206.5 267.7 206.2C266.3 206.1 265.9 209.9 269.4 212.7z"/></svg>

plain-html/images/macos.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 176C311.2 176 304 168.8 304 160L304 144C304 99.8 339.8 64 384 64L400 64C408.8 64 416 71.2 416 80L416 96C416 140.2 380.2 176 336 176L320 176zM96 352C96 275.7 131.7 192 208 192C235.3 192 267.7 202.3 290.7 211.3C309.5 218.6 330.6 218.6 349.4 211.3C372.3 202.4 404.8 192 432.1 192C508.4 192 544.1 275.7 544.1 352C544.1 480 464.1 576 384.1 576C367.6 576 346 569.4 332.6 564.7C324.5 561.9 315.7 561.9 307.6 564.7C294.2 569.4 272.6 576 256.1 576C176.1 576 96.1 480 96.1 352z"/></svg>

plain-html/images/random.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M467.8 98.4C479.8 93.4 493.5 96.2 502.7 105.3L566.7 169.3C572.7 175.3 576.1 183.4 576.1 191.9C576.1 200.4 572.7 208.5 566.7 214.5L502.7 278.5C493.5 287.7 479.8 290.4 467.8 285.4C455.8 280.4 448 268.9 448 256L448 224L416 224C405.9 224 396.4 228.7 390.4 236.8L358 280L318 226.7L339.2 198.4C357.3 174.2 385.8 160 416 160L448 160L448 128C448 115.1 455.8 103.4 467.8 98.4zM218 360L258 413.3L236.8 441.6C218.7 465.8 190.2 480 160 480L96 480C78.3 480 64 465.7 64 448C64 430.3 78.3 416 96 416L160 416C170.1 416 179.6 411.3 185.6 403.2L218 360zM502.6 534.6C493.4 543.8 479.7 546.5 467.7 541.5C455.7 536.5 448 524.9 448 512L448 480L416 480C385.8 480 357.3 465.8 339.2 441.6L185.6 236.8C179.6 228.7 170.1 224 160 224L96 224C78.3 224 64 209.7 64 192C64 174.3 78.3 160 96 160L160 160C190.2 160 218.7 174.2 236.8 198.4L390.4 403.2C396.4 411.3 405.9 416 416 416L448 416L448 384C448 371.1 455.8 359.4 467.8 354.4C479.8 349.4 493.5 352.2 502.7 361.3L566.7 425.3C572.7 431.3 576.1 439.4 576.1 447.9C576.1 456.4 572.7 464.5 566.7 470.5L502.7 534.5z"/></svg>

plain-html/images/sort-asc.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M278.6 438.6L182.6 534.6C170.1 547.1 149.8 547.1 137.3 534.6L41.3 438.6C28.8 426.1 28.8 405.8 41.3 393.3C53.8 380.8 74.1 380.8 86.6 393.3L128 434.7L128 128C128 110.3 142.3 96 160 96C177.7 96 192 110.3 192 128L192 434.7L233.4 393.3C245.9 380.8 266.2 380.8 278.7 393.3C291.2 405.8 291.2 426.1 278.7 438.6zM352 96L384 96C401.7 96 416 110.3 416 128C416 145.7 401.7 160 384 160L352 160C334.3 160 320 145.7 320 128C320 110.3 334.3 96 352 96zM352 224L448 224C465.7 224 480 238.3 480 256C480 273.7 465.7 288 448 288L352 288C334.3 288 320 273.7 320 256C320 238.3 334.3 224 352 224zM352 352L512 352C529.7 352 544 366.3 544 384C544 401.7 529.7 416 512 416L352 416C334.3 416 320 401.7 320 384C320 366.3 334.3 352 352 352zM352 480L576 480C593.7 480 608 494.3 608 512C608 529.7 593.7 544 576 544L352 544C334.3 544 320 529.7 320 512C320 494.3 334.3 480 352 480z"/></svg>

plain-html/images/sort-desc.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M278.6 438.6L182.6 534.6C170.1 547.1 149.8 547.1 137.3 534.6L41.3 438.6C28.8 426.1 28.8 405.8 41.3 393.3C53.8 380.8 74.1 380.8 86.6 393.3L128 434.7L128 128C128 110.3 142.3 96 160 96C177.7 96 192 110.3 192 128L192 434.7L233.4 393.3C245.9 380.8 266.2 380.8 278.7 393.3C291.2 405.8 291.2 426.1 278.7 438.6zM352 544C334.3 544 320 529.7 320 512C320 494.3 334.3 480 352 480L384 480C401.7 480 416 494.3 416 512C416 529.7 401.7 544 384 544L352 544zM352 416C334.3 416 320 401.7 320 384C320 366.3 334.3 352 352 352L448 352C465.7 352 480 366.3 480 384C480 401.7 465.7 416 448 416L352 416zM352 288C334.3 288 320 273.7 320 256C320 238.3 334.3 224 352 224L512 224C529.7 224 544 238.3 544 256C544 273.7 529.7 288 512 288L352 288zM352 160C334.3 160 320 145.7 320 128C320 110.3 334.3 96 352 96L576 96C593.7 96 608 110.3 608 128C608 145.7 593.7 160 576 160L352 160z"/></svg>

plain-html/images/web.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M415.9 344L225 344C227.9 408.5 242.2 467.9 262.5 511.4C273.9 535.9 286.2 553.2 297.6 563.8C308.8 574.3 316.5 576 320.5 576C324.5 576 332.2 574.3 343.4 563.8C354.8 553.2 367.1 535.8 378.5 511.4C398.8 467.9 413.1 408.5 416 344zM224.9 296L415.8 296C413 231.5 398.7 172.1 378.4 128.6C367 104.2 354.7 86.8 343.3 76.2C332.1 65.7 324.4 64 320.4 64C316.4 64 308.7 65.7 297.5 76.2C286.1 86.8 273.8 104.2 262.4 128.6C242.1 172.1 227.8 231.5 224.9 296zM176.9 296C180.4 210.4 202.5 130.9 234.8 78.7C142.7 111.3 74.9 195.2 65.5 296L176.9 296zM65.5 344C74.9 444.8 142.7 528.7 234.8 561.3C202.5 509.1 180.4 429.6 176.9 344L65.5 344zM463.9 344C460.4 429.6 438.3 509.1 406 561.3C498.1 528.6 565.9 444.8 575.3 344L463.9 344zM575.3 296C565.9 195.2 498.1 111.3 406 78.7C438.3 130.9 460.4 210.4 463.9 296L575.3 296z"/></svg>

plain-html/images/windows.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M96 157.7L279.6 132.4L279.6 309.8L96 309.8L96 157.7zM96 482.3L279.6 507.6L279.6 332.4L96 332.4L96 482.3zM299.8 510.3L544 544L544 332.4L299.8 332.4L299.8 510.3zM299.8 129.7L299.8 309.8L544 309.8L544 96L299.8 129.7z"/></svg>

+66 -51

plain-html/js/script.mjs

···

       3
       3
        
       

     

       4
       4
        
       // Basic variable replacements

     

       5
       5
        
       const numJoined = 0;

     

       6
       6
       -
       const numEntries = 0;

     

       7
       6
        
       

     

       8
       7
        
       // SEE HERE FOR DATE FORMAT INFO:

     

       9
       8
        
       // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format

     
···

       45
       44
        
       

     

       46
       45
        
       const list = document.getElementById('list');

     

       47
       46
        
       

     

       47
       47
       +
       const allTags = games.map(g => g.tags).reduce((g1, g2) => {

     

       48
       48
       +
       	return g1.concat(g2);

     

       49
       49
       +
       }).filter((t, i, arr) => { return arr.indexOf(t) === i }).sort();

     

       50
       50
       +
       

     

       48
       51
        
       const dayMult = 24*60*60;

     

       49
       52
        
       const hourMult = 60*60;

     

       50
       53
        
       const minuteMult = 60;

     

       51
       54
        
       

     

       52
       55
        
       if (joinedElt) joinedElt.textContent = numJoined;

     

       53
       53
       -
       if (entriesElt) entriesElt.textContent = numEntries;

     

       56
       56
       +
       if (entriesElt) entriesElt.textContent = games.length;

     

       54
       57
        
       

     

       55
       58
        
       if (startDateElt) startDateElt.textContent = startString;

     

       56
       59
        
       if (endDateElt) endDateElt.textContent = endString;

     
···

       93
       96
        
       

     

       94
       97
        
       if (list) {

     

       95
       98
        
       	list.innerHTML = games.map((item, i) => {

     

       96
       96
       -
       		return `<div class="item" id="item-${i}">

     

       99
       99
       +
       		return `<div class="item" id="item-${i}" data-authors="${item.authors.map(a => a.name)}" data-categories="${item.tags.map(t => 'tags:'+t).join(" ")} ${item.platforms.map(p => 'platforms:'+p).join(" ")}" data-title="${item.title}" data-date="${item.submitTime}">

     

       97
       100
        
       		<div class="thumb">

     

       98
       101
        
       			<img src="${item.thumbnail}" alt="${item.title} thumbnail image" />

     

       99
       102
        
       		</div>

     
···

       102
       105
        
       		<div class="blurb">${item.blurb}</div>

     

       103
       106
        
       </div>`;

     

       104
       107
        
       	}).join("");

     

       108
       108
       +
       	

     

       109
       109
       +
       	const tagsElt = document.getElementById('tags');

     

       110
       110
       +
       	tagsElt.innerHTML = `<button class="afs-btn-filter" data-filter="*">all</button>`+allTags.map((t) => {

     

       111
       111
       +
       		return `<button class="afs-btn-filter" data-filter="tags:${t}">#${t}</button>`

     

       112
       112
       +
       	}).join("");

     

       105
       113
        
       }

     

       106
       114
        
       

     

       107
       115
        
       const afs = new AFS({

     

       108
       116
        
           // Required Selectors

     

       109
       109
       -
           containerSelector: 'main',

     

       117
       117
       +
           containerSelector: '#list',

     

       110
       118
        
           itemSelector: '.item',

     

       111
       119
        
           filterButtonSelector: '.afs-btn-filter',

     

       112
       120
        
           searchInputSelector: '.afs-filter-search',

     
···

       120
       128
        
           // Filter & Search Configuration

     

       121
       129
        
           filterMode: 'OR',      // or 'AND'

     

       122
       130
        
           groupMode: 'AND',     // or 'OR'

     

       123
       123
       -
           searchKeys: ['title', 'categories', 'tags'],

     

       131
       131
       +
           searchKeys: ['title', 'authors', 'tags'],

     

       124
       132
        
           debounceTime: 200,    // search input delay

     

       125
       133
        
           

     

       126
       126
       -
           // Debug Options

     

       127
       127
       -
           debug: false,

     

       128
       128
       -
           logLevel: 'info',     // 'debug', 'info', 'warn', 'error'

     

       129
       129
       -
           

     

       130
       134
        
           // Date Handling

     

       131
       135
        
           dateFormat: 'YYYY-MM-DD',

     

       136
       136
       +
       		dateFilter: {

     

       137
       137
       +
               enabled: true,

     

       138
       138
       +
               format: 'YYYY-MM-DDThh:mm:ss'

     

       139
       139
       +
           },

     

       132
       140
        
           

     

       133
       141
        
           // Counter Configuration

     

       134
       142
        
           counter: {

     
···

       138
       146
        
               noResultsTemplate: 'No items found',

     

       139
       147
        
               formatter: (num) => num.toLocaleString()

     

       140
       148
        
           },

     

       141
       141
       -
           

     

       142
       142
       -
           // Slider Configuration

     

       143
       143
       -
           slider: {

     

       144
       144
       -
               containerClass: 'afs-range-slider',

     

       145
       145
       -
               trackClass: 'afs-range-track',

     

       146
       146
       -
               thumbClass: 'afs-range-thumb',

     

       147
       147
       -
               valueClass: 'afs-range-value',

     

       148
       148
       -
               selectedClass: 'afs-range-selected',

     

       149
       149
       -
               ui: {

     

       150
       150
       -
                   showHistogram: false,

     

       151
       151
       -
                   bins: 10,

     

       152
       152
       -
                   track: {

     

       153
       153
       -
                       radius: '0',

     

       154
       154
       -
                       background: '#e5e7eb'

     

       155
       155
       -
                   },

     

       156
       156
       -
                   selected: {

     

       157
       157
       -
                       background: '#000'

     

       158
       158
       -
                   },

     

       159
       159
       -
                   thumb: {

     

       160
       160
       -
                       radius: '50%',

     

       161
       161
       -
                       size: '16px',

     

       162
       162
       -
                       background: '#000'

     

       163
       163
       -
                   },

     

       164
       164
       -
                   histogram: {

     

       165
       165
       -
                       background: '#e5e7eb',

     

       166
       166
       -
                       bar: {

     

       167
       167
       -
                           background: '#000'

     

       168
       168
       -
                       }

     

       169
       169
       -
                   }

     

       170
       170
       -
               }

     

       149
       149
       +
       		

     

       150
       150
       +
       		sort: {

     

       151
       151
       +
               enabled: true,

     

       152
       152
       +
               buttonSelector: '.afs-btn-sort'

     

       171
       153
        
           },

     

       172
       172
       -
           

     

       173
       173
       -
           // Pagination Configuration

     

       174
       174
       -
           pagination: {

     

       175
       175
       -
               enabled: false,

     

       176
       176
       -
               itemsPerPage: 10,

     

       177
       177
       -
               container: '.afs-pagination-container',

     

       178
       178
       -
               pageButtonClass: 'afs-page-button',

     

       179
       179
       -
               activePageClass: 'afs-page-active',

     

       180
       180
       -
               containerClass: 'afs-pagination',

     

       181
       181
       -
               scrollToTop: false,

     

       182
       182
       -
               scrollOffset: 50,

     

       183
       183
       -
               scrollBehavior: 'smooth'  // or 'auto'

     

       154
       154
       +
       		

     

       155
       155
       +
       		filter: {

     

       156
       156
       +
               enabled: true,

     

       157
       157
       +
               buttonSelector: '.afs-btn-filter',

     

       158
       158
       +
               mode: 'AND',

     

       159
       159
       +
               activeClass: 'afs-active',

     

       160
       160
       +
               hiddenClass: 'afs-hidden'

     

       184
       161
        
           },

     

       185
       162
        
       

     

       186
       163
        
           // Animation Configuration

     
···

       207
       184
        
                   textHover: '#fff'

     

       208
       185
        
               }

     

       209
       186
        
           }

     

       187
       187
       +
       });

     

       188
       188
       +
       

     

       189
       189
       +
       afs.dateFilter.addDateRange({

     

       190
       190
       +
           key: 'date',

     

       191
       191
       +
           container: document.querySelector('#date-filter'),

     

       192
       192
       +
           format: 'YYYY-MM-DD',

     

       193
       193
       +
       		minDate: new Date(startDate.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)[0]),

     

       194
       194
       +
           maxDate: new Date(endDate.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)[0])

     

       195
       195
       +
       });

     

       196
       196
       +
       

     

       197
       197
       +
       afs.filter.setGroupMode('AND');

     

       198
       198
       +
       

     

       199
       199
       +
       document.querySelectorAll('button.custom-sort:not([data-sort-key="shuffle"])').forEach((elt) => {

     

       200
       200
       +
       	elt.addEventListener('click', (e) => {

     

       201
       201
       +
       		e.preventDefault();

     

       202
       202
       +
       		e.stopPropagation();

     

       203
       203
       +
       		const btn = e.target.closest('button');

     

       204
       204
       +
       		document.querySelectorAll('button.custom-sort:not([data-sort-key="'+btn.getAttribute('data-sort-key')+'"])').forEach((s) => {

     

       205
       205
       +
       			s.classList.remove('sort-active');

     

       206
       206
       +
       		});

     

       207
       207
       +
       		if (btn.classList.contains('sort-active')) {

     

       208
       208
       +
       			if (btn.getAttribute('data-sort-direction') === 'asc') {

     

       209
       209
       +
       				btn.setAttribute('data-sort-direction', 'desc');

     

       210
       210
       +
       				btn.querySelector('img').src = './images/sort-desc.svg';

     

       211
       211
       +
       			} else {

     

       212
       212
       +
       				btn.setAttribute('data-sort-direction', 'asc');

     

       213
       213
       +
       				btn.querySelector('img').src = './images/sort-asc.svg';

     

       214
       214
       +
       			}

     

       215
       215
       +
       			afs.sort.sort(btn.getAttribute('data-sort-key'), btn.getAttribute('data-sort-direction'));

     

       216
       216
       +
       		} else {

     

       217
       217
       +
       			btn.classList.add('sort-active');

     

       218
       218
       +
       			afs.sort.sort(btn.getAttribute('data-sort-key'), btn.getAttribute('data-sort-direction'));

     

       219
       219
       +
       		}

     

       220
       220
       +
       	});

     

       221
       221
       +
       });

     

       222
       222
       +
       

     

       223
       223
       +
       document.querySelector('[data-sort-key="shuffle"]').addEventListener('click', (e) => {

     

       224
       224
       +
       	afs.sort.shuffle();

     

       210
       225
        
       });

+26 -6

plain-html/submissions.html

···

       37
       37
        
       					    <!-- Filter Controls -->

     

       38
       38
        
       					    <div class="afs-filter-controls">

     

       39
       39
        
       					        <!-- Basic Filters -->

     

       40
       40
       -
       					        <div class="basic-filters">

     

       41
       41
       -
       					            <button class="afs-btn-filter" data-filter="*">All</button>

     

       42
       42
       -
       					            <button class="afs-btn-filter" data-filter="category:tech">Technology</button>

     

       43
       43
       -
       					            <button class="afs-btn-filter" data-filter="category:design">Design</button>

     

       44
       44
       -
       					        </div>

     

       45
       40
        
               

     

       46
       41
        
       					        <!-- Search Input -->

     

       47
       47
       -
       					        <input type="text" class="afs-filter-search" placeholder="Search...">

     

       42
       42
       +
       					        <input type="text" class="afs-filter-search" placeholder="Search by title, author, or tags" />

     

       43
       43
       +
       									

     

       44
       44
       +
       									<p class="label">Sort entries by:</p>

     

       45
       45
       +
       									<ul id="sorts">

     

       46
       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
       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
       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
       49
       +
       									</ul>

     

       50
       50
       +
       									

     

       51
       51
       +
       									<details open><summary>Platform</summary>

     

       52
       52
       +
       										<ul>

     

       53
       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
       54
       +
       											<li><button class="afs-btn-filter" data-filter="platforms:windows"><img src="./images/windows.svg" alt="" class="icon" /> Windows</button></li>

     

       55
       55
       +
       											<li><button class="afs-btn-filter" data-filter="platforms:macos"><img src="./images/macos.svg" alt="" class="icon" /> Mac OS</button></li>

     

       56
       56
       +
       											<li><button class="afs-btn-filter" data-filter="platforms:linux"><img src="./images/linux.svg" alt="" class="icon" /> Linux</button></li>

     

       57
       57
       +
       											<li><button class="afs-btn-filter" data-filter="platforms:android"><img src="./images/android.svg" alt="" class="icon" /> Android</button></li>

     

       58
       58
       +
       										</ul>

     

       59
       59
       +
       									</details>

     

       60
       60
       +
       									

     

       61
       61
       +
       									<details><summary>Tags</summary>

     

       62
       62
       +
       										<div id="tags"></div>

     

       63
       63
       +
       									</details>

     

       64
       64
       +
       									

     

       65
       65
       +
       									<details><summary>Submission Date</summary>

     

       66
       66
       +
       										<div id="date-filter"></div>

     

       67
       67
       +
       									</details>

     

       48
       68
        
               

     

       49
       69
        
       					        <!-- Results Counter -->

     

       50
       70
        
       					        <div class="afs-filter-counter"></div>