<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linkgames Documentation</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="icon" href="logo.png" type="image/x-icon">
    
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="Linkgames v4">
    <meta property="og:description" content="Discord Presence Widgets, APIs and more! GraphQL, REST API and WebSocket support. Editable widgets. Easy to use.">
    <meta property="og:image" content="https://linkgames.de/cdn/logo.gif">
    <meta property="og:url" content="https://linkgames.de">
    <meta property="og:type" content="website">
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Linkgames v4">
    <meta name="twitter:description" content="Discord Presence Widgets, APIs and more! GraphQL, REST API and WebSocket support. Editable widgets. Easy to use.">
    <meta name="twitter:image" content="https://linkgames.de/cdn/logo.gif">
    <meta name="twitter:url" content="https://linkgames.de">
        
        <!-- Open Graph Metadaten -->
    <meta property="og:title" content="Linkgames v4">
    <meta property="og:description" content="Discord Presence Widgets, APIs and more! GraphQL, REST API and WebSocket support. Editable widgets. Easy to use.">
    <meta property="og:image" content="https://linkgames.de/cdn/logo.gif">
    <meta property="og:url" content="https://linkgames.de">
    <meta property="og:type" content="website">
    
    <!-- Title und Description für WhatsApp -->
    <meta name="description" content="Discord Presence Widgets, APIs and more! GraphQL, REST API and WebSocket support. Editable widgets. Easy to use.">
    
    <style>
        
        code, pre {
  background-color: #2e2e2e; /* Dunkelgrau */
  color: #ffffff;           /* Weißer Text für Lesbarkeit */
  padding: 10px;            /* Etwas Abstand innen */
  border-radius: 5px;       /* Leichte Abrundung */
  display: block;           /* Blöcke, die sich leicht anordnen lassen */
  overflow-x: auto;         /* Für lange Zeilen Scrollbalken hinzufügen */
  font-family: "Courier New", Courier, monospace; /* Monospace-Schrift */
}

        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center; /* Zentriert das Logo und den Text */
            gap: 10px;
        }

        .footer-logo {
            width: 80px; /* Kleinere Breite */
            height: auto;
            transition: transform 0.2s ease;
        }

        .footer-logo:hover {
            transform: scale(1.1);
        }

        footer a {
            color: #00bfff; /* Hellblau */
            text-decoration: none;
            transition: color 0.2s ease;
        }

        footer a:hover {
            color: #008cba; /* Etwas dunkleres Blau beim Hover */
        }

        /* Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Body Styling */
        body {
            font-family: 'Roboto', sans-serif;
            background: #242436;
            color: #f0f0f5;
            margin: 0;
            padding: 0;
        }

        /* Navigation Bar */
        nav {
            display: flex;
            justify-content: flex-end; /* Align navigation links to the right */
            align-items: center;
            background: #222233; /* Dark background */
            padding: 0.8rem 1.5rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            position: fixed;
            top: 0;
            right: 0; /* Align to the right */
            width: auto; /* Dynamic width based on content */
            border-radius: 0 0 0 10px; /* Rounded bottom-left corner */
            z-index: 10;
        }

        nav a {
            text-decoration: none;
            color: #43b581; /* Green text */
            margin-left: 15px;
            font-size: 1rem;
            font-weight: 500;
            position: relative;
            transition: color 0.3s ease;
        }

        nav a::after {
            content: '';
            display: block;
            height: 2px;
            width: 0;
            background: linear-gradient(90deg, #43b581, #fbd786, #c6ffdd);
            transition: width 0.3s;
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
        }

        nav a:hover {
            color: #c6ffdd; /* Lighter green on hover */
        }

        nav a:hover::after {
            width: 100%;
        }

        /* Sidebar Styling */
        .sidebar {
            background-color: #333 !important;
            color: #fff !important;
            font-size: 0.9rem;
            width: 200px;
        }

        .sidebar a {
            color: #c6ffdd !important;
            text-decoration: none;
            font-size: 0.85rem !important;
        }

        .sidebar a:hover {
            color: #fbd786 !important;
        }

        /* Sidebar Collapse Button */
        .sidebar-toggle {
            background-color: #44445e !important; /* Pleasant gray for toggle button */
            color: #f0f0f5 !important;
            border: none;
            font-size: 0.9rem;
            padding: 0.5rem;
            text-align: center;
            width: 100%;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .sidebar-toggle:hover {
            background-color: #55556f !important; /* Slightly darker gray */
        }

        /* Content Styling */
        #app {
            padding: 6rem 2rem 2rem;
            max-width: 800px;
            margin: 0 auto;
            background: #44445e; /* Pleasant gray for content */
            border-radius: 15px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .markdown-body h1, .markdown-body h2, .markdown-body h3 {
            color: #c6ffdd;
        }

        .markdown-body code {
            background: #55556f;
            padding: 4px 6px;
            border-radius: 4px;
            color: #f0f0f5;
        }

        /* Footer Styling */
        footer {
            background: #222233;
            color: #f0f0f5;
            text-align: right; /* Align footer text to the right */
            padding: 1rem 2rem;
            position: fixed;
            bottom: 0;
            right: 0;
            width: auto;
            box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3);
            border-radius: 8px 0 0 0; /* Rounded top-left corner */
        }

        footer:hover {
            background: #44445e;
        }

        footer span {
            color: #f7797d;
            animation: color-change 2s infinite;
        }

        @keyframes color-change {
            0%, 100% {
                color: #f7797d;
            }
            50% {
                color: #c6ffdd;
            }
        }
        /* Markdown Content Styling */
.markdown-body {
    color: #333 !important; /* Dunkles Grau */
}

.markdown-body h1, 
.markdown-body h2, 
.markdown-body h3 {
    color: #000 !important; /* Schwarz für Überschriften */
}

.markdown-body p, 
.markdown-body li, 
.markdown-body span {
    color: #333 !important; /* Grau für normalen Text */
}
        .header-title {
    font-size: 2rem; /* Beispiel für größere Schrift */
    font-weight: bold;
}
        .subtitle-class {
    display: none;
}
        .code-block {
    background-color: #000; /* Schwarzer Hintergrund */
    color: #0f0; /* Grüne Schriftfarbe, wie Terminal */
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
}



        

    </style>
</head>
<body>
    <!-- Navigation Bar -->
    <nav>
        <a href="#widgets"><i class="fas fa-puzzle-piece"></i> Widgets</a>
        <a href="#api"><i class="fas fa-code"></i> API</a>
        <a href="#gateway"><i class="fas fa-network-wired"></i> Gateway</a>
        <a href="https://discord.gg/gZZaxQ79PJ"><i class="fab fa-discord"></i> Discord</a>
    </nav>

    <!-- Content -->
    <div id="app"></div>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <a href="https://emeraldhost.de" target="_blank" class="footer-link">
                <img src="https://emeraldhost.b-cdn.net/branding/icon.png" alt="Emeraldhost Logo" class="footer-logo">
            </a>
            <p>
                Powered by <a href="https://emeraldhost.de" target="_blank">Emeraldhost</a>
            </p>
            <p>
                Made with <span class="heart">♥️</span> by the Linkgames Team
            </p>
        </div>
    </footer>

    <!-- Docsify -->
    <script>
        window.$docsify = {
            name: 'Linkgames V4',
            repo: '',
            loadNavbar: true,
            loadSidebar: true,
            coverpage: true,
            subMaxLevel: 2,
            themeColor: '#43b581',
            auto2top: true, // Scrollt automatisch nach oben beim Seitenwechsel
            sidebarToggle: false // Sidebar standardmäßig eingeklappt
        };
    </script>
    <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>