164 lines
4.3 KiB
HTML
164 lines
4.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="de">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Screen Share</title>
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body {
|
||
|
|
font-family: 'Segoe UI', sans-serif;
|
||
|
|
background: #1a1a2e;
|
||
|
|
color: #eee;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
.toolbar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
padding: 12px 16px;
|
||
|
|
background: #16213e;
|
||
|
|
border-bottom: 1px solid #0f3460;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.toolbar label { font-size: 13px; color: #aaa; }
|
||
|
|
.toolbar input, .toolbar select {
|
||
|
|
background: #0f3460;
|
||
|
|
border: 1px solid #533483;
|
||
|
|
color: #eee;
|
||
|
|
padding: 6px 10px;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.toolbar input:focus, .toolbar select:focus { outline: none; border-color: #e94560; }
|
||
|
|
.toolbar button {
|
||
|
|
padding: 6px 16px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 13px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.btn-primary { background: #e94560; color: #fff; }
|
||
|
|
.btn-primary:hover { background: #c73650; }
|
||
|
|
.btn-success { background: #27ae60; color: #fff; }
|
||
|
|
.btn-success:hover { background: #219a52; }
|
||
|
|
.btn-danger { background: #c0392b; color: #fff; }
|
||
|
|
.btn-danger:hover { background: #a93226; }
|
||
|
|
.btn-secondary { background: #533483; color: #fff; }
|
||
|
|
.btn-secondary:hover { background: #432a6b; }
|
||
|
|
|
||
|
|
.status-bar {
|
||
|
|
padding: 6px 16px;
|
||
|
|
background: #0f3460;
|
||
|
|
font-size: 12px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.status-dot {
|
||
|
|
display: inline-block;
|
||
|
|
width: 8px; height: 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-right: 6px;
|
||
|
|
}
|
||
|
|
.status-dot.online { background: #27ae60; }
|
||
|
|
.status-dot.offline { background: #c0392b; }
|
||
|
|
|
||
|
|
.video-container {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
gap: 4px;
|
||
|
|
padding: 4px;
|
||
|
|
min-height: 0;
|
||
|
|
}
|
||
|
|
.video-panel {
|
||
|
|
flex: 1;
|
||
|
|
position: relative;
|
||
|
|
background: #111;
|
||
|
|
border-radius: 6px;
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.video-panel video {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
background: #000;
|
||
|
|
}
|
||
|
|
.video-label {
|
||
|
|
position: absolute;
|
||
|
|
top: 8px;
|
||
|
|
left: 8px;
|
||
|
|
background: rgba(0,0,0,0.7);
|
||
|
|
padding: 3px 10px;
|
||
|
|
border-radius: 3px;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.video-placeholder {
|
||
|
|
color: #555;
|
||
|
|
font-size: 14px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#log {
|
||
|
|
max-height: 120px;
|
||
|
|
overflow-y: auto;
|
||
|
|
padding: 8px 16px;
|
||
|
|
background: #111;
|
||
|
|
font-family: 'Consolas', monospace;
|
||
|
|
font-size: 11px;
|
||
|
|
color: #0f0;
|
||
|
|
border-top: 1px solid #333;
|
||
|
|
}
|
||
|
|
#log div { padding: 1px 0; }
|
||
|
|
#log .error { color: #e94560; }
|
||
|
|
#log .info { color: #3498db; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="toolbar">
|
||
|
|
<label>Signal-Server:</label>
|
||
|
|
<input type="text" id="serverUrl" value="ws://localhost:9090" style="width:200px">
|
||
|
|
|
||
|
|
<label>Meine ID:</label>
|
||
|
|
<input type="text" id="myId" style="width:100px">
|
||
|
|
|
||
|
|
<button class="btn-primary" id="btnRegister">Verbinden</button>
|
||
|
|
|
||
|
|
<span style="width:20px"></span>
|
||
|
|
|
||
|
|
<label>Remote-ID:</label>
|
||
|
|
<input type="text" id="remoteId" style="width:100px">
|
||
|
|
|
||
|
|
<button class="btn-success" id="btnShare">Bildschirm teilen</button>
|
||
|
|
<button class="btn-secondary" id="btnControl">Fernsteuern</button>
|
||
|
|
<button class="btn-danger" id="btnStop">Stopp</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="status-bar">
|
||
|
|
<span><span class="status-dot offline" id="statusDot"></span><span id="statusText">Nicht verbunden</span></span>
|
||
|
|
<span id="peerInfo"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="video-container">
|
||
|
|
<div class="video-panel">
|
||
|
|
<div class="video-label">Mein Bildschirm</div>
|
||
|
|
<video id="localVideo" autoplay muted></video>
|
||
|
|
<div class="video-placeholder" id="localPlaceholder">Klicke "Bildschirm teilen"</div>
|
||
|
|
</div>
|
||
|
|
<div class="video-panel" id="remotePanel">
|
||
|
|
<div class="video-label">Remote-Bildschirm</div>
|
||
|
|
<video id="remoteVideo" autoplay></video>
|
||
|
|
<div class="video-placeholder" id="remotePlaceholder">Warte auf Verbindung...</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="log"></div>
|
||
|
|
|
||
|
|
<script src="renderer.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|