Thunder/template/req.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ heading }}</title>
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#faf9f7">
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#030304">

    <!-- Logo & Favicon -->
    <link rel="icon" type="image/jpeg" href="https://cdn.jsdelivr.net/gh/fyaz05/Resources@main/FileToLink/logo.png">
    <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/fyaz05/Resources@main/FileToLink/logo.png">

    <!-- SEO & Social Sharing (Open Graph) -->
    <meta name="description"

        content="A premium cinema experience for '{{ file_name }}'. Stream in high quality with advanced controls.">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ file_name }} — Cinema">
    <meta property="og:description"

        content="Stream '{{ file_name }}' in a beautiful, atmospheric environment with professional playback controls.">
    <meta property="og:image" content="https://cdn.jsdelivr.net/gh/fyaz05/Resources@main/FileToLink/logo.png">

    <!-- Twitter Cards -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ file_name }} — Cinema">
    <meta name="twitter:description" content="Stream '{{ file_name }}' in a beautiful, atmospheric environment.">
    <meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/fyaz05/Resources@main/FileToLink/logo.png">

    <!-- Vidstack Player -->
    <link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css" />
    <link rel="stylesheet" href="https://cdn.vidstack.io/player/video.css" />
    <script type="module" src="https://cdn.vidstack.io/player"></script>

    <!-- Typography: Outfit (geometric display) + DM Sans (refined body) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link

        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap"

        rel="stylesheet" media="print" onload="this.media='all'">
    <noscript>
        <link

            href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap"

            rel="stylesheet">
    </noscript>

    <!-- Styles (CDN-hosted) -->
    <link rel="stylesheet"

        href="https://cdn.jsdelivr.net/gh/fyaz05/Resources@main/FileToLink/Obsidian%20Ember/styles.css">
</head>

<body>
    <!-- Atmospheric Background -->
    <div class="atmosphere" aria-hidden="true">
        <div class="gradient-mesh"></div>
        <div class="noise"></div>
        <div class="vignette"></div>
    </div>

    <!-- Main Viewport -->
    <main class="viewport">
        <!-- Masthead -->
        <header class="masthead">
            <div class="title-group">
                <h1 class="title">{{ file_name }}</h1>
                <div class="file-meta" id="fileMeta">
                    <span class="meta-tag" id="metaDuration">
                        <svg viewBox="0 0 24 24">
                            <path

                                d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
                        </svg>
                        <span>Loading...</span>
                    </span>
                    <span class="meta-tag" id="metaResolution">
                        <svg viewBox="0 0 24 24">
                            <path

                                d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM9 8h2v8H9zm4 0h2v8h-2z" />
                        </svg>
                        <span>Loading...</span>
                    </span>
                </div>
            </div>
            <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
                <!-- Sun icon (shown in dark mode) -->
                <svg class="icon-sun" viewBox="0 0 24 24">
                    <path

                        d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 00-1.41 0 .996.996 0 000 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 00-1.41 0 .996.996 0 000 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 000-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 000-1.41.996.996 0 00-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 000-1.41.996.996 0 00-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z" />
                </svg>
                <!-- Moon icon (shown in light mode) -->
                <svg class="icon-moon" viewBox="0 0 24 24">
                    <path

                        d="M12 3a9 9 0 109 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 01-4.4 2.26 5.403 5.403 0 01-3.14-9.8c-.44-.06-.9-.1-1.36-.1z" />
                </svg>
            </button>
        </header>

        <!-- Cinema Screen -->
        <section class="cinema">
            <div class="screen">
                <div class="player-background-message">
                    <svg class="bg-msg-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path

                            d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM9.5 7.5v9l7-4.5-7-4.5z" />
                    </svg>
                    <span class="bg-msg-title">If video not playing</span>
                    <span class="bg-msg-sub">Use External Player</span>
                </div>
                <media-player id="player" title="{{ file_name }}" playsinline keyTarget="document">
                    <media-provider></media-provider>
                    <media-video-layout></media-video-layout>
                </media-player>
            </div>
        </section>

        <!-- Command Bar -->
        <nav class="command-bar">
            <div class="command-glass">
                <a href="{{ src|safe }}" download="{{ file_name }}" class="cmd-btn primary" id="downloadBtn">
                    <svg viewBox="0 0 24 24">
                        <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
                    </svg>
                    <span>Download</span>
                </a>

                <div class="cmd-divider"></div>

                <button class="cmd-btn" id="copyBtn" aria-label="Copy Link">
                    <svg viewBox="0 0 24 24">
                        <path

                            d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
                    </svg>
                    <span>Copy Link</span>
                </button>

                <div class="cmd-divider"></div>

                <button class="cmd-btn drawer-trigger" id="playersToggle" aria-expanded="false"

                    aria-controls="playersDrawer" aria-label="Open in external player">
                    <svg viewBox="0 0 24 24">
                        <path

                            d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM9.5 7.5v9l7-4.5-7-4.5z" />
                    </svg>
                    <span>Open In</span>
                    <svg class="chevron" viewBox="0 0 24 24">
                        <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
                    </svg>
                </button>
            </div>
        </nav>

        <!-- External Players Drawer -->
        <aside class="drawer" id="playersDrawer">
            <div class="drawer-panel" id="drawerPanel" role="region" aria-labelledby="playersToggle">
                <!-- Android -->
                <div class="player-group" id="androidGroup">
                    <div class="group-label">Android</div>
                    <div class="player-grid">
                        <a href="intent:{{ src|safe }}#Intent;action=android.intent.action.VIEW;type=video/*;package=org.videolan.vlc;end"

                            class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            VLC
                        </a>
                        <a href="intent:{{ src|safe }}#Intent;action=android.intent.action.VIEW;type=video/*;package=com.mxtech.videoplayer.ad;S.title={{ file_name | urlencode }};end"

                            class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            MX Player
                        </a>
                        <a href="intent:{{ src|safe }}#Intent;action=android.intent.action.VIEW;type=video/*;package=com.mxtech.videoplayer.pro;S.title={{ file_name | urlencode }};end"

                            class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            MX Player Pro
                        </a>
                        <a href="intent:{{ src|safe }}#Intent;action=android.intent.action.VIEW;type=video/*;package=com.young.simple.player;end"

                            class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            Splayer
                        </a>
                        <a href="intent:{{ src|safe }}#Intent;action=android.intent.action.VIEW;type=video/*;package=dev.anilbeesetti.nextplayer;S.title={{ file_name | urlencode }};end"

                            class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            Next Player
                        </a>
                        <a href="intent:{{ src|safe }}#Intent;action=android.intent.action.VIEW;type=video/*;package=org.courville.nova;S.title={{ file_name | urlencode }};end"

                            class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            Nova Player
                        </a>
                        <a href="intent:{{ src|safe }}#Intent;action=android.intent.action.VIEW;type=video/*;package=is.xyz.mpv;S.title={{ file_name | urlencode }};end"

                            class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            MPV-Android
                        </a>
                        <a href="intent:{{ src|safe }}#Intent;action=android.intent.action.VIEW;type=video/*;package=com.brouken.player;end"

                            class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            Just Player
                        </a>
                        <a href="intent:{{ src|safe }}#Intent;action=android.intent.action.VIEW;type=video/*;package=com.newin.nplayer.pro;end"

                            class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            nPlayer
                        </a>
                    </div>
                </div>

                <!-- iOS -->
                <div class="player-group" id="iosGroup">
                    <div class="group-label">iOS / iPadOS</div>
                    <div class="player-grid">
                        <a href="vlc-x-callback://x-callback-url/stream?url={{ src|safe }}" class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            VLC
                        </a>
                        <a href="infuse://x-callback-url/play?url={{ src|safe }}" class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            Infuse
                        </a>
                        <a href="nplayer://weblink?url={{ src|safe }}" class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            nPlayer
                        </a>
                        <a href="outplayer://{{ src|safe }}" class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            Outplayer
                        </a>
                        <a href="oplayer://{{ src|safe }}" class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            OPlayer
                        </a>
                    </div>
                </div>

                <!-- Desktop -->
                <div class="player-group" id="desktopGroup">
                    <div class="group-label">Desktop</div>
                    <div class="player-grid">
                        <a href="vlc://{{ src|safe }}" class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            VLC
                        </a>
                        <a href="potplayer://{{ src|safe }}" class="player-link" data-os="windows">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            PotPlayer
                        </a>
                        <a href="iina://weblink?url={{ src|safe }}" class="player-link" data-os="mac">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            IINA
                        </a>
                        <a href="mpv://{{ src|safe }}" class="player-link">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            MPV
                        </a>
                        <a href="kmplayer://{{ src|safe }}" class="player-link" data-os="windows">
                            <svg viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" />
                            </svg>
                            KMPlayer
                        </a>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Footer Group -->
        <footer class="footer-group">
            <!-- Keyboard Hints -->
            <div class="keyboard-hints" id="keyboardHints">
                <div class="hints-row">
                    <div class="hint">
                        <kbd>Space</kbd>
                        <span>Play / Pause</span>
                    </div>
                    <div class="hint">
                        <kbd>←</kbd><kbd>→</kbd>
                        <span>Seek</span>
                    </div>
                    <div class="hint">
                        <kbd>↑</kbd><kbd>↓</kbd>
                        <span>Volume</span>
                    </div>
                    <div class="hint">
                        <kbd>F</kbd>
                        <span>Fullscreen</span>
                    </div>
                    <div class="hint">
                        <kbd>M</kbd>
                        <span>Mute</span>
                    </div>
                    <div class="hint">
                        <kbd>&lt;</kbd><kbd>&gt;</kbd>
                        <span>Speed</span>
                    </div>
                </div>
            </div>

            <!-- Copyright -->
            <div class="copyright-footer">
                <span>&copy; <span id="copyrightYear"></span> Thunder</span>
                <span class="footer-separator">•</span>
                <a href="https://github.com/fyaz05/FileToLink" target="_blank" rel="noopener noreferrer"

                    class="footer-link" aria-label="GitHub">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path fill="currentColor"

                            d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />
                    </svg>
                    GitHub
                </a>
            </div>
        </footer>
    </main>

    <!-- Toast Stack -->
    <div class="toast-stack" id="toastStack" aria-live="polite"></div>

    <!-- Config for external script (template injection happens here) -->
    <script>

        window.__CINEMA_CONFIG__ = { src: {{ src | tojson }} };

    </script>
    <!-- Main Script (CDN-hosted) -->
    <script src="https://cdn.jsdelivr.net/gh/fyaz05/Resources@main/FileToLink/Obsidian%20Ember/script.js"></script>
</body>

</html>