| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CastFlow | Premium Casting</title> |
| <link rel="manifest" href="manifest.json"> |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Work+Sans:wght@300;400;600&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="styles.css"> |
| |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script src="app.js" defer></script> |
| </head> |
| <body> |
|
|
| |
| <div class="ambient-bg"></div> |
|
|
| |
| <div id="desktop"> |
| |
| <header id="top-bar" class="glass-element"> |
| <div class="logo"> |
| <i data-lucide="cast" class="logo-icon-svg"></i> |
| CastFlow |
| </div> |
| |
| <nav class="nav-tabs"> |
| <button class="nav-btn active focusable" data-target="panel-about">About</button> |
| <button class="nav-btn focusable" data-target="panel-cast">Cast Viewer</button> |
| <button class="nav-btn focusable" data-target="panel-share">File Share</button> |
| </nav> |
|
|
| <div class="connection-module"> |
| |
| <button id="clock-toggle-btn" class="nav-btn focusable" title="Toggle Clock Overlay"> |
| <i data-lucide="clock"></i> |
| </button> |
| <div id="connection-status" class="status-disconnected"> |
| <span class="pulse-dot"></span> <span id="status-text">Disconnected</span> |
| </div> |
| <div class="controls"> |
| <input type="text" id="target-ip" class="glass-input" placeholder="Device IP (e.g. 192.168.1.5)"> |
| <button id="connect-btn" class="glass-btn primary focusable">Connect</button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div id="clock-overlay" style="display: none;"> |
| <button id="close-clock-btn" class="clock-close-btn" title="Close Clock"> |
| <i data-lucide="x"></i> |
| </button> |
| <div class="clock-display"> |
| <span id="clock-time">12:00:00</span> |
| <span id="clock-period">am</span> |
| </div> |
| </div> |
|
|
| |
| <main id="main-content"> |
| |
| |
| <section id="panel-about" class="glass-panel active"> |
| <div class="about-layout"> |
| <div class="hero-content"> |
| <h1>Seamlessly Cast & Share.</h1> |
| <p>Experience the most premium way to share files, cast screens, and control your device locally.</p> |
| <div class="action-buttons"> |
| <button class="glass-btn primary big focusable"> |
| <i data-lucide="download"></i> Download APK |
| </button> |
| <button class="glass-btn secondary big focusable" id="show-qr-btn"> |
| <i data-lucide="qr-code"></i> Show QR Code |
| </button> |
| </div> |
| </div> |
| <div class="hero-mockup glass-card"> |
| <i data-lucide="smartphone" class="mockup-icon"></i> |
| <p>Scan to Connect</p> |
| |
| <div id="qr-code-container" class="qr-placeholder"></div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="panel-cast" class="glass-panel"> |
| <div class="panel-layout"> |
| |
| <div id="screen-container"> |
| <img id="stream-img" src="" style="display:none;" /> |
| <div id="placeholder" class="glass-card"> |
| <i data-lucide="monitor-smartphone" class="placeholder-icon"></i> |
| <h2>Ready to Connect</h2> |
| <p>Enter your phone's IP address to begin casting.</p> |
| </div> |
| </div> |
| |
| |
| <aside id="remote-control" class="glass-sidebar"> |
| <h3>TV Remote</h3> |
| <div class="d-pad"> |
| <button class="d-btn up focusable" data-key="up"><i data-lucide="chevron-up"></i></button> |
| <div class="d-row"> |
| <button class="d-btn left focusable" data-key="left"><i data-lucide="chevron-left"></i></button> |
| <button class="d-btn ok focusable" data-key="ok">OK</button> |
| <button class="d-btn right focusable" data-key="right"><i data-lucide="chevron-right"></i></button> |
| </div> |
| <button class="d-btn down focusable" data-key="down"><i data-lucide="chevron-down"></i></button> |
| </div> |
| <div class="d-actions"> |
| <button class="action-btn focusable" data-key="home"><i data-lucide="home"></i> Home</button> |
| <button class="action-btn focusable" data-key="back"><i data-lucide="arrow-left"></i> Back</button> |
| </div> |
| </aside> |
| </div> |
| </section> |
|
|
| |
| <section id="panel-share" class="glass-panel"> |
| <div class="share-layout"> |
| <div class="share-card upload-zone glass-card" id="drop-zone"> |
| <i data-lucide="upload-cloud" class="upload-icon"></i> |
| <h2>Send to Phone</h2> |
| <p>Drag & drop files here</p> |
| <span class="or-divider">or</span> |
| <button class="glass-btn primary focusable" onclick="document.getElementById('file-input').click()">Browse Files</button> |
| <input type="file" id="file-input" style="display: none;" multiple> |
| </div> |
|
|
| <div class="share-card download-list glass-card"> |
| <h2>Available Files</h2> |
| <p class="subtitle">Shared from your phone</p> |
| <div id="shared-files-container" class="file-list"> |
| <div class="empty-state"> |
| <i data-lucide="folder-open"></i> |
| <p>No files currently shared.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| </main> |
| </div> |
|
|
| |
| <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script> |
| <script> |
| lucide.createIcons(); |
| </script> |
| </body> |
| </html> |
