Spaces:
Running
Running
| <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><</kbd><kbd>></kbd> | |
| <span>Speed</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Copyright --> | |
| <div class="copyright-footer"> | |
| <span>© <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> | |
| </script> | |
| <!-- Main Script (CDN-hosted) --> | |
| <script src="https://cdn.jsdelivr.net/gh/fyaz05/Resources@main/FileToLink/Obsidian%20Ember/script.js"></script> | |
| </body> | |
| </html> | |