Equicord/src/main/about.html

<!doctype html>
<meta charset="utf-8" />

<head>
    <title>About Equicord</title>
    <style>
        body {
            padding: 2em;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
                "Open Sans", "Helvetica Neue", sans-serif;
            margin: 0;
        }

        :root {
            --bg: #0d0d0d;
            --fg: #ffffff;
            --fg-secondary: #a1a1a1;
        }

        html,
        body {
            background: var(--bg);
            color: var(--fg);
        }

        .header {
            display: flex;
            align-items: center;
            gap: 1.25em;
            margin-bottom: 2em;
        }

        .header img {
            width: 48px;
            height: 48px;
            border-radius: 8px;
        }

        .header-text {
            display: flex;
            flex-direction: column;
            gap: 0.25em;
        }

        .header-top {
            display: flex;
            align-items: baseline;
            gap: 0.5em;
        }

        .header-text h1 {
            margin: 0;
            font-size: 1.75em;
            font-weight: 700;
            color: var(--fg);
        }

        .header-text .version {
            color: var(--fg-secondary);
            font-size: 0.875em;
        }

        .header-text .tagline {
            color: var(--fg-secondary);
            margin: 0;
        }

        h2 {
            color: var(--fg);
            margin-top: 1.5em;
            margin-bottom: 0.5em;
        }

        p {
            color: var(--fg-secondary);
        }

        ul {
            display: flex;
            flex-direction: column;
            gap: 0.5em;
            padding-left: 1.5em;
        }

        li {
            color: var(--fg-secondary);
        }

        a {
            color: var(--fg-secondary);
            text-decoration: underline;
            transition: color 0.2s linear;
        }

        a:hover {
            color: var(--fg);
        }

        section {
            margin-bottom: 1.5em;
        }
    </style>
</head>

<body>
    <header class="header">
        <img src="https://equicord.org/assets/favicon.png" alt="Equicord" />
        <div class="header-text">
            <div class="header-top">
                <h1>Equicord</h1>
                <span class="version">
                    <a href="https://github.com/Equicord/Equicord/releases/tag/v{{VERSION}}">
                        v{{VERSION}}
                    </a>
                    (<a href="https://github.com/Equicord/Equicord/commit/{{GIT_HASH}}">{{GIT_HASH}}</a>)
                </span>
            </div>
            <p class="tagline">An enhanced version of Vencord. A fork that offers a wider selection of plugins from the
                community.</p>
        </div>
    </header>

    <section>
        <h2>Links</h2>
        <ul>
            <li>
                <a href="https://equicord.org" target="_blank">Equicord Website</a>
            </li>
            <li>
                <a href="https://docs.equicord.org" target="_blank">Equicord Docs</a>
            </li>
            <li>
                <a href="https://github.com/Equicord/Equicord" target="_blank">Source Code</a>
            </li>
            <li>
                <a href="https://equicord.org/discord" target="_blank">Support Server</a>
            </li>
        </ul>
    </section>
    <section>
        <h2>License</h2>
        <p>
            Equicord is licensed under the
            <a href="https://www.gnu.org/licenses/gpl-3.0.txt" target="_blank">GNU General Public License v3.0</a>.
            <br />
            This is free software, and you are welcome to redistribute it under certain conditions; see the license for
            details.
        </p>
    </section>
    <section>
        <h2>Acknowledgements</h2>
        <p>These awesome libraries/projects empower Equicord</p>
        <ul>
            <li>
                <a href="https://github.com/Vendicated/Vencord" target="_blank">Vencord</a>
                - Vencord is a modification for Discord that adds plugins and custom styles, blocks Discord's
                tracking and what we are a fork of!
            </li>
            <li>
                <a href="https://github.com/verticalsync/Suncord" target="_blank">Suncord</a>
                - Suncord was a newer fork of Vencord which eventually merged into Equicord and brought many new users!
            </li>
        </ul>
    </section>
</body>
<script>
    const data = new URLSearchParams(location.search);

    // replace all {{FOO}} placeholders in the document with the values from the URL

    /** @param {Node} [node] */
    function walk(node) {
        if (node.nodeType === Node.TEXT_NODE) {
            node.textContent = node.textContent.replace(/{{(\w+)}}/g, (match, key) => data.get(key) || match);
            return;
        }

        if (node.nodeType === Node.ELEMENT_NODE && node.nodeName !== "SCRIPT") {
            for (const child of node.childNodes) {
                walk(child);
            }
        }
    }

    walk(document.body);
</script>