File size: 7,450 Bytes
a4fb0f8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | <!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">
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<script src="app.js" defer></script>
</head>
<body>
<!-- Animated Ambient Background -->
<div class="ambient-bg"></div>
<!-- UI Overlay -->
<div id="desktop">
<!-- Glassmorphism Top Bar -->
<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">
<!-- Clock Toggle Button -->
<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>
<!-- Fullscreen Clock Overlay -->
<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 Content Area -->
<main id="main-content">
<!-- Panel: About & Download -->
<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>
<!-- QR Code placeholder -->
<div id="qr-code-container" class="qr-placeholder"></div>
</div>
</div>
</section>
<!-- Panel: Cast Viewer -->
<section id="panel-cast" class="glass-panel">
<div class="panel-layout">
<!-- Stream Container -->
<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>
<!-- Remote Control Sidebar -->
<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>
<!-- Panel: Share Files -->
<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>
<!-- QR Code Script (to generate QR dynamically if needed) -->
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script>
lucide.createIcons();
</script>
</body>
</html> |