---
title: GameDB
layout: page
full-width: true
after-content:
  - donate.html
  - support.html

# TODO: Add `cover-img` (supports multiple)

ext-css:
  - href: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
ext-js:
  - href: "https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2026.726.204939/dist/levenshtein-distance.js"
  - href: "https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2026.726.204939/dist/ranking-sorter.js"
js:
  - /GameDB/assets/js/item_loader.js
---

<script>
globalThis.GAMEDB_CONFIG = {
  base_path: "{{ site.baseurl }}"
};
</script>

<div class="container px-auto my-5">
    <div class="col-lg-12 mx-auto" id="db-container" style="min-width: 335px">

        <!-- Search section-->
        <section class="py-5 offset-anchor" id="Search">
            <div class="container mb-5">
                <form id="searchForm" onsubmit="event.preventDefault(); run_search();">
                    <div class="row justify-content-center">
                        <div class="col-12 col-md-8 col-lg-6">
                            <label for="search_term" class="visually-hidden">Search games by name</label>
                            <div class="input-group">
                                <input type="text" class="form-control rounded-0" placeholder="Search games by name..." id="search_term"
                                       onkeydown="if(event.key==='Enter'){event.preventDefault(); run_search()}">
                                <button type="button" class="btn btn-warning rounded-0" onclick="run_search()">
                                    <i class="fa-fw fas fa-search"></i> Search
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="search-container"></div>
        </section>

        <!-- Platforms section-->
        <section class="py-5 offset-anchor" id="Platforms">
            <div class="row gx-5 justify-content-center">
                <div class="col-lg-8 col-xl-6">
                    <div class="text-center">
                        <h2 class="fw-bolder">Platforms</h2>
                    </div>
                </div>
            </div>
            <div class="row gx-5" id="platforms-container"></div>
        </section>

    </div>
</div>