<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TSK Paperback Extensions</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            color: #e0e0e0;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        .container { max-width: 900px; width: 100%; }
        header { text-align: center; padding: 40px 20px; }
        h1 {
            font-size: 2.5em; margin-bottom: 10px;
            background: linear-gradient(45deg, #00d4ff, #7b2ff7);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .subtitle { font-size: 1.2em; color: #a0a0c0; margin-bottom: 30px; }
        .add-button {
            display: inline-block;
            background: linear-gradient(45deg, #00d4ff, #7b2ff7);
            color: white; padding: 18px 40px; font-size: 1.3em;
            border: none; border-radius: 50px; cursor: pointer;
            text-decoration: none; font-weight: 600;
            transition: transform 0.2s, box-shadow 0.2s; margin: 10px;
        }
        .add-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
        }
        .version-badge {
            display: inline-block; background: rgba(0, 212, 255, 0.2);
            color: #00d4ff; padding: 5px 15px; border-radius: 20px;
            font-size: 0.9em; margin-left: 10px;
            border: 1px solid rgba(0, 212, 255, 0.3);
        }
        .url-box {
            background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px; padding: 12px 20px; margin: 15px 0;
            font-family: monospace; color: #00d4ff; word-break: break-all;
        }
        .sources-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px; margin-top: 40px;
        }
        .source-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px; padding: 24px;
            transition: transform 0.2s, border-color 0.2s;
        }
        .source-card:hover {
            transform: translateY(-4px);
            border-color: rgba(0, 212, 255, 0.5);
        }
        .source-name { font-size: 1.3em; font-weight: 600; color: #fff; margin-bottom: 8px; }
        .source-desc { font-size: 0.9em; color: #a0a0c0; line-height: 1.5; margin-bottom: 12px; }
        .source-meta { display: flex; gap: 10px; flex-wrap: wrap; }
        .badge { padding: 4px 12px; border-radius: 12px; font-size: 0.75em; font-weight: 500; }
        .badge-lang { background: rgba(123, 47, 247, 0.2); color: #b388ff; }
        .badge-rating { background: rgba(255, 152, 0, 0.2); color: #ffcc80; }
        .badge-type { background: rgba(0, 212, 255, 0.2); color: #80e5ff; }
        .badge-18 { background: rgba(255, 0, 0, 0.2); color: #ff8080; }
        .features {
            margin-top: 40px; padding: 30px;
            background: rgba(255, 255, 255, 0.03); border-radius: 16px;
        }
        .features h2 { margin-bottom: 20px; color: #00d4ff; }
        .features ul { list-style: none; padding: 0; }
        .features li { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: #c0c0d0; }
        .features li:before { content: "✓ "; color: #00d4ff; font-weight: bold; }
        footer { margin-top: 40px; padding: 20px; text-align: center; color: #666; font-size: 0.9em; }
        .install-steps {
            margin-top: 30px; padding: 30px;
            background: rgba(255, 255, 255, 0.03); border-radius: 16px;
        }
        .install-steps h2 { margin-bottom: 20px; color: #00d4ff; }
        .install-steps ol { padding-left: 20px; }
        .install-steps li { padding: 8px 0; color: #c0c0d0; line-height: 1.6; }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>TSK Paperback Extensions</h1>
            <p class="subtitle">6 manga sources for Paperback 0.8</p>
            <a href="paperback://addRepo?displayName=TSK%20Extensions&url=https%3A%2F%2FTSKpaperback.github.io%2F0.8%2F" class="add-button">
                📲 Add to Paperback
            </a>
            <div style="margin-top: 15px;">
                <span class="version-badge">v0.8</span>
                <span class="version-badge">6 Sources</span>
                <span class="version-badge">Free</span>
            </div>
            <div style="margin-top: 20px;">
                <p style="color: #888; font-size: 0.9em;">Base URL for manual adding:</p>
                <div class="url-box">https://TSKpaperback.github.io/0.8/</div>
            </div>
        </header>

        <div class="sources-grid">
            <div class="source-card">
                <div class="source-name">MangaHub</div>
                <div class="source-desc">GraphQL API with genre and sort filters. CDN-optimized images.</div>
                <div class="source-meta">
                    <span class="badge badge-lang">English</span>
                    <span class="badge badge-rating">Mature</span>
                    <span class="badge badge-type">GraphQL</span>
                </div>
            </div>
            <div class="source-card">
                <div class="source-name">MangaFox</div>
                <div class="source-desc">Genre, status, and type filters. Webtoon and manga chapter support.</div>
                <div class="source-meta">
                    <span class="badge badge-lang">English</span>
                    <span class="badge badge-rating">Mature</span>
                    <span class="badge badge-type">Scraper</span>
                </div>
            </div>
            <div class="source-card">
                <div class="source-name">McReader</div>
                <div class="source-desc">Genre browse with sort options. Most viewed, updated, and new sections.</div>
                <div class="source-meta">
                    <span class="badge badge-lang">English</span>
                    <span class="badge badge-rating">Mature</span>
                    <span class="badge badge-type">Scraper</span>
                </div>
            </div>
            <div class="source-card">
                <div class="source-name">MangaDex</div>
                <div class="source-desc">Official API v5. 15+ languages, content rating, tag filters.</div>
                <div class="source-meta">
                    <span class="badge badge-lang">Multi</span>
                    <span class="badge badge-rating">Everyone+</span>
                    <span class="badge badge-type">API v5</span>
                </div>
            </div>
            <div class="source-card">
                <div class="source-name">Webtoons</div>
                <div class="source-desc">Originals and Canvas. Genre browse + sort by popularity/likes/updates.</div>
                <div class="source-meta">
                    <span class="badge badge-lang">English</span>
                    <span class="badge badge-rating">Everyone</span>
                    <span class="badge badge-type">Scraper</span>
                </div>
            </div>
            <div class="source-card">
                <div class="source-name">MangaRADAEX</div>
                <div class="source-desc">Madara WordPress theme. Genre, status, and order filters. 18+ content.</div>
                <div class="source-meta">
                    <span class="badge badge-lang">English</span>
                    <span class="badge badge-18">18+</span>
                    <span class="badge badge-type">Madara</span>
                </div>
            </div>
        </div>

        <div class="install-steps">
            <h2>How to Install</h2>
            <ol>
                <li>Open the <strong>Paperback</strong> app on your iOS device</li>
                <li>Go to <strong>Settings</strong> → <strong>Browse</strong> → <strong>External Sources</strong></li>
                <li>Tap the <strong>+</strong> button in the top right</li>
                <li>Enter this URL: <code style="color:#00d4ff">https://TSKpaperback.github.io/0.8/</code></li>
                <li>Tap <strong>Add</strong> and wait for the repo to load</li>
                <li>Tap on any source to install it</li>
            </ol>
        </div>

        <div class="features">
            <h2>Features</h2>
            <ul>
                <li>Advanced search with genre, status, type, content rating, and tag filters</li>
                <li>Multi-language support (MangaDex supports 15+ languages)</li>
                <li>Discover sections: Popular, Trending, Latest Updates, New Releases, Completed</li>
                <li>Genre carousel for quick category browsing</li>
                <li>Chapter reading with page-by-page image loading</li>
                <li>Rate limiting to prevent API bans</li>
            </ul>
        </div>

        <footer>
            <p>TSK Paperback Extensions for Paperback 0.8</p>
            <p style="margin-top: 10px; color: #555;">Support the original content creators and platforms.</p>
        </footer>
    </div>
</body>
</html>