165 lines
8.9 KiB
HTML
165 lines
8.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<title>Dragon Wind Upload</title>
|
||
|
|
<style>
|
||
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
||
|
|
body{font-family:'Segoe UI',system-ui,sans-serif;background:#06080e;color:#e4e8f1;width:380px;min-height:300px;overflow-x:hidden}
|
||
|
|
:root{--dragon:#e05c1a;--dragon-bright:#ff7d3b;--accent:#2b5cff;--border:#1a2035;--bg-card:#10141f;--bg-sec:#0c1019;--text-dim:#4a5470;--success:#22c55e;--error:#ef4444}
|
||
|
|
|
||
|
|
.header{display:flex;align-items:center;gap:.65rem;padding:.9rem 1rem;border-bottom:1px solid var(--border);background:#08090f}
|
||
|
|
.header-logo{width:28px;height:28px;border-radius:6px}
|
||
|
|
.header-title{font-size:.95rem;font-weight:700;background:linear-gradient(135deg,var(--dragon),var(--dragon-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
||
|
|
.header-sub{font-size:.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}
|
||
|
|
.header-right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
|
||
|
|
.settings-btn{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-dim);cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
|
||
|
|
.settings-btn:hover{border-color:#2a3555;color:#e4e8f1}
|
||
|
|
|
||
|
|
.body{padding:.85rem 1rem}
|
||
|
|
|
||
|
|
/* CONNECTION */
|
||
|
|
.conn-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem;padding:.5rem .7rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px}
|
||
|
|
.conn-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
|
||
|
|
.conn-dot.green{background:var(--success);box-shadow:0 0 5px var(--success)}
|
||
|
|
.conn-dot.red{background:var(--error)}
|
||
|
|
.conn-dot.grey{background:var(--text-dim)}
|
||
|
|
.conn-label{font-size:.75rem;color:#7a85a0;flex:1}
|
||
|
|
.conn-server{font-size:.68rem;color:var(--text-dim);font-family:monospace;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
|
|
|
||
|
|
/* MODE SELECTOR */
|
||
|
|
.mode-row{display:flex;gap:.4rem;margin-bottom:.85rem}
|
||
|
|
.mode-btn{flex:1;padding:.45rem;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:#7a85a0;cursor:pointer;font-size:.75rem;font-weight:600;transition:all .2s;text-align:center}
|
||
|
|
.mode-btn:hover{border-color:#2a3555}
|
||
|
|
.mode-btn.active-http{border-color:var(--accent);background:rgba(43,92,255,.12);color:var(--accent)}
|
||
|
|
.mode-btn.active-udp{border-color:var(--dragon-bright);background:rgba(224,92,26,.12);color:var(--dragon-bright)}
|
||
|
|
|
||
|
|
/* DROP ZONE */
|
||
|
|
.drop-zone{border:2px dashed var(--border);border-radius:10px;padding:1.25rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg-card);margin-bottom:.85rem;position:relative}
|
||
|
|
.drop-zone:hover,.drop-zone.over{border-color:var(--dragon-bright);background:rgba(224,92,26,.08)}
|
||
|
|
.dz-icon{font-size:1.4rem;display:block;margin-bottom:.35rem}
|
||
|
|
.dz-label{font-size:.8rem;font-weight:600;color:#7a85a0;margin-bottom:.2rem}
|
||
|
|
.dz-sub{font-size:.68rem;color:var(--text-dim)}
|
||
|
|
#file-input{display:none}
|
||
|
|
|
||
|
|
/* FILE LIST */
|
||
|
|
.file-list{max-height:140px;overflow-y:auto;margin-bottom:.85rem;display:flex;flex-direction:column;gap:.3rem}
|
||
|
|
.file-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;background:var(--bg-card);border:1px solid var(--border);border-radius:7px}
|
||
|
|
.fi-icon{font-size:.85rem;flex-shrink:0}
|
||
|
|
.fi-info{flex:1;min-width:0}
|
||
|
|
.fi-name{font-size:.75rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
|
|
.fi-size{font-size:.65rem;color:var(--text-dim);font-family:monospace}
|
||
|
|
.fi-status{font-size:.68rem;font-weight:600;flex-shrink:0}
|
||
|
|
.fi-status.pending{color:var(--text-dim)}
|
||
|
|
.fi-status.uploading{color:var(--accent)}
|
||
|
|
.fi-status.done{color:var(--success)}
|
||
|
|
.fi-status.error{color:var(--error)}
|
||
|
|
.fi-rm{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.7rem;padding:.1rem .2rem;border-radius:3px}
|
||
|
|
.fi-rm:hover{color:var(--error);background:rgba(239,68,68,.1)}
|
||
|
|
.fi-prog{height:2px;background:var(--border);border-radius:1px;margin-top:.2rem}
|
||
|
|
.fi-prog-bar{height:100%;background:var(--accent);border-radius:1px;transition:width .3s}
|
||
|
|
.fi-prog-bar.udp{background:var(--dragon-bright)}
|
||
|
|
|
||
|
|
/* UPLOAD BTN */
|
||
|
|
.upload-btn{width:100%;padding:.65rem;font-size:.88rem;font-weight:700;color:#fff;border:none;border-radius:9px;cursor:pointer;transition:all .2s;background:linear-gradient(135deg,var(--dragon),var(--dragon-bright))}
|
||
|
|
.upload-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px rgba(224,92,26,.35)}
|
||
|
|
.upload-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
|
||
|
|
.upload-btn.http{background:linear-gradient(135deg,#1a3fc7,var(--accent))}
|
||
|
|
|
||
|
|
/* FOLDER SELECT */
|
||
|
|
.folder-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem}
|
||
|
|
.folder-label{font-size:.72rem;color:var(--text-dim);flex-shrink:0}
|
||
|
|
.folder-select{flex:1;padding:.35rem .6rem;background:var(--bg-sec);border:1px solid var(--border);border-radius:6px;color:#e4e8f1;font-size:.75rem;outline:none;cursor:pointer}
|
||
|
|
|
||
|
|
/* STATUS BAR */
|
||
|
|
.status-bar{padding:.45rem .7rem;border-radius:7px;font-size:.75rem;font-weight:600;margin-top:.5rem;display:none}
|
||
|
|
.status-bar.success{background:rgba(34,197,94,.1);color:var(--success);border:1px solid rgba(34,197,94,.2);display:block}
|
||
|
|
.status-bar.error{background:rgba(239,68,68,.1);color:var(--error);border:1px solid rgba(239,68,68,.2);display:block}
|
||
|
|
.status-bar.loading{background:rgba(43,92,255,.1);color:var(--accent);border:1px solid rgba(43,92,255,.2);display:block}
|
||
|
|
|
||
|
|
/* SETTINGS PANEL */
|
||
|
|
.settings-panel{display:none;padding:.85rem 1rem;border-top:1px solid var(--border)}
|
||
|
|
.settings-panel.open{display:block}
|
||
|
|
.settings-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:.7rem}
|
||
|
|
.setting-row{margin-bottom:.6rem}
|
||
|
|
.setting-label{font-size:.7rem;color:#7a85a0;margin-bottom:.25rem;display:block}
|
||
|
|
.setting-input{width:100%;padding:.38rem .6rem;background:var(--bg-sec);border:1px solid var(--border);border-radius:6px;color:#e4e8f1;font-size:.76rem;outline:none;font-family:monospace}
|
||
|
|
.setting-input:focus{border-color:var(--dragon)}
|
||
|
|
.save-btn{padding:.4rem 1rem;font-size:.75rem;font-weight:700;background:linear-gradient(135deg,var(--dragon),var(--dragon-bright));color:#fff;border:none;border-radius:7px;cursor:pointer;margin-top:.4rem}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="header">
|
||
|
|
<img class="header-logo" src="images/icon-48.png" onerror="this.style.display='none'"/>
|
||
|
|
<div><div class="header-title">Dragon Wind</div><div class="header-sub">Broadcast Uploader</div></div>
|
||
|
|
<div class="header-right">
|
||
|
|
<button class="settings-btn" id="settings-toggle" title="Settings">⚙️</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="body" id="main-body">
|
||
|
|
|
||
|
|
<!-- Connection Status -->
|
||
|
|
<div class="conn-row">
|
||
|
|
<div class="conn-dot grey" id="conn-dot"></div>
|
||
|
|
<span class="conn-label" id="conn-label">Connecting…</span>
|
||
|
|
<span class="conn-server" id="conn-server"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Upload Mode -->
|
||
|
|
<div class="mode-row">
|
||
|
|
<button class="mode-btn active-http" id="btn-http" onclick="setMode('http')">🔗 HTTP<br/><small>Reliable</small></button>
|
||
|
|
<button class="mode-btn" id="btn-udp" onclick="setMode('udp')">⚡ UDP<br/><small>Fast WAN</small></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Folder Selector -->
|
||
|
|
<div class="folder-row">
|
||
|
|
<span class="folder-label">Folder:</span>
|
||
|
|
<select class="folder-select" id="folder-select">
|
||
|
|
<option value="">Root</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Drop Zone -->
|
||
|
|
<div class="drop-zone" id="drop-zone" onclick="document.getElementById('file-input').click()" ondragover="ev.preventDefault();this.classList.add('over')" ondragleave="this.classList.remove('over')" ondrop="onDrop(event)">
|
||
|
|
<span class="dz-icon">📂</span>
|
||
|
|
<div class="dz-label">Drop files or click to browse</div>
|
||
|
|
<div class="dz-sub">Video, audio, image up to 50 GB</div>
|
||
|
|
</div>
|
||
|
|
<input id="file-input" type="file" multiple onchange="onFileInputChange(event)"/>
|
||
|
|
|
||
|
|
<!-- File List -->
|
||
|
|
<div class="file-list" id="file-list"></div>
|
||
|
|
|
||
|
|
<!-- Upload Button -->
|
||
|
|
<button class="upload-btn http" id="upload-btn" onclick="startUpload()" disabled>Upload Files</button>
|
||
|
|
|
||
|
|
<!-- Status -->
|
||
|
|
<div class="status-bar" id="status-bar"></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Settings Panel -->
|
||
|
|
<div class="settings-panel" id="settings-panel">
|
||
|
|
<div class="settings-title">Dragon Wind Settings</div>
|
||
|
|
<div class="setting-row">
|
||
|
|
<label class="setting-label">Server URL</label>
|
||
|
|
<input class="setting-input" id="cfg-server" type="url" placeholder="http://localhost:3000"/>
|
||
|
|
</div>
|
||
|
|
<div class="setting-row">
|
||
|
|
<label class="setting-label">Username</label>
|
||
|
|
<input class="setting-input" id="cfg-user" type="text" placeholder="Admin"/>
|
||
|
|
</div>
|
||
|
|
<div class="setting-row">
|
||
|
|
<label class="setting-label">Password</label>
|
||
|
|
<input class="setting-input" id="cfg-pass" type="password" placeholder="password"/>
|
||
|
|
</div>
|
||
|
|
<button class="save-btn" onclick="saveSettings()">Save & Connect</button>
|
||
|
|
<div class="status-bar" id="settings-status" style="margin-top:.5rem"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="popup.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|