242 lines
8.7 KiB
HTML
242 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KVMote</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--bg-color: #121212;
|
|
--card-bg: #1e1e1e;
|
|
--text-color: #e0e0e0;
|
|
--accent-color: #3273dc;
|
|
--border-color: #333;
|
|
}
|
|
body {
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
height: 100vh;
|
|
margin: 0;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
.app-container {
|
|
padding: 20px;
|
|
max-width: 400px;
|
|
margin: auto;
|
|
}
|
|
.section-title {
|
|
font-size: 0.9rem;
|
|
color: #888;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
/* Monitor Cross Layout */
|
|
.monitor-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(3, 1fr);
|
|
gap: 10px;
|
|
width: 240px;
|
|
margin: 0 auto 30px auto;
|
|
}
|
|
.monitor-btn {
|
|
background-color: #333;
|
|
border: 1px solid #444;
|
|
color: #bbb;
|
|
padding: 10px 5px;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s;
|
|
}
|
|
.monitor-btn:hover { background-color: #444; }
|
|
.monitor-btn.active {
|
|
background-color: #2c3e50;
|
|
border-color: #3498db;
|
|
color: white;
|
|
}
|
|
.host-pc {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
background-color: #1a2a3a;
|
|
border: 1px solid var(--accent-color);
|
|
color: #3498db;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.field-label { font-size: 0.85rem; color: #aaa; margin-bottom: 5px; }
|
|
.control-panel { background: var(--card-bg); padding: 15px; border-radius: 4px; border: 1px solid var(--border-color); }
|
|
|
|
.status-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background: #1a1a1a;
|
|
padding: 5px 15px;
|
|
font-size: 0.75rem;
|
|
color: #666;
|
|
border-top: 1px solid #222;
|
|
}
|
|
.status-dot { height: 8px; width: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
|
|
|
|
/* Custom UI components */
|
|
.custom-select {
|
|
width: 100%;
|
|
background: #252525;
|
|
color: white;
|
|
border: 1px solid #444;
|
|
padding: 5px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.btn-action {
|
|
background: #333;
|
|
border: 1px solid #444;
|
|
color: white;
|
|
padding: 8px;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
margin-bottom: 10px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.btn-action:hover { background: #444; }
|
|
.btn-connect {
|
|
background: var(--accent-color);
|
|
border: none;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
.btn-cad { margin-top: 10px; background: #2a2a2a; color: #ccc; }
|
|
</style>
|
|
</head>
|
|
<body x-data="kvmApp()">
|
|
<div class="app-container">
|
|
<div class="section-title">Posição do PC Cliente:</div>
|
|
|
|
<div class="monitor-grid">
|
|
<!-- Top -->
|
|
<button class="monitor-btn" style="grid-column: 2; grid-row: 1;"
|
|
:class="pos === 'above' ? 'active' : ''" @click="setPos('above')">Acima</button>
|
|
|
|
<!-- Left -->
|
|
<button class="monitor-btn" style="grid-column: 1; grid-row: 2;"
|
|
:class="pos === 'left' ? 'active' : ''" @click="setPos('left')">Esquerda</button>
|
|
|
|
<!-- Center -->
|
|
<div class="host-pc">[HOST PC]</div>
|
|
|
|
<!-- Right -->
|
|
<button class="monitor-btn" style="grid-column: 3; grid-row: 2;"
|
|
:class="pos === 'right' ? 'active' : ''" @click="setPos('right')">Direita</button>
|
|
|
|
<!-- Bottom -->
|
|
<button class="monitor-btn" style="grid-column: 2; grid-row: 3;"
|
|
:class="pos === 'below' ? 'active' : ''" @click="setPos('below')">Abaixo</button>
|
|
</div>
|
|
|
|
<div class="is-flex is-align-items-center mb-4" style="font-size: 0.85rem; color: #888;">
|
|
<span class="status-dot" :style="{ backgroundColor: detected ? '#3498db' : '#555' }"></span>
|
|
<span x-text="detected ? 'KVMote (BLE) detectado' : 'Buscando dispositivo...'"></span>
|
|
</div>
|
|
|
|
<div class="columns is-mobile is-gapless mb-2">
|
|
<div class="column pr-1">
|
|
<button class="btn-action" @click="detect()">Detectar</button>
|
|
</div>
|
|
<div class="column pl-1">
|
|
<button class="btn-action btn-connect" @click="toggleConnect()" x-text="connected ? 'Desconectar' : 'Conectar'"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field mb-4">
|
|
<div class="is-flex is-align-items-center is-justify-content-space-between">
|
|
<label class="field-label">Layout do cliente:</label>
|
|
<select class="custom-select" style="width: 60%;" x-model="layout" @change="setLayout()">
|
|
<option value="0">US / EN</option>
|
|
<option value="1">PT-BR ABNT2</option>
|
|
<option value="2">US International</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn-action btn-cad" @click="sendCAD()">Enviar Ctrl+Alt+Del</button>
|
|
|
|
<div class="field mt-4">
|
|
<div class="is-flex is-align-items-center is-justify-content-space-between">
|
|
<label class="field-label">Ao fechar:</label>
|
|
<select class="custom-select" style="width: 60%;">
|
|
<option value="tray">Minimizar para Tray</option>
|
|
<option value="exit">Fechar aplicação</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-bar">
|
|
<span x-text="statusText"></span>
|
|
</div>
|
|
|
|
<!-- Área rolável fake para forçar captura de scroll -->
|
|
<div id="scroll-sink" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; z-index: -1; pointer-events: none;">
|
|
<div style="height: 5000px; width: 1px;"></div>
|
|
</div>
|
|
|
|
<script>
|
|
function kvmApp() {
|
|
return {
|
|
connected: false,
|
|
detected: true,
|
|
statusText: 'Desconectado',
|
|
pos: 'right',
|
|
layout: 1,
|
|
toggleConnect() {
|
|
if (this.connected) {
|
|
window.go.main.App.Disconnect().then(res => {
|
|
this.connected = false;
|
|
this.statusText = res;
|
|
});
|
|
} else {
|
|
window.go.main.App.Connect().then(res => {
|
|
this.connected = true;
|
|
this.statusText = 'Conectado';
|
|
});
|
|
}
|
|
},
|
|
setPos(p) {
|
|
this.pos = p;
|
|
const map = { 'left': 1, 'right': 2, 'above': 3, 'below': 4 };
|
|
window.go.main.App.SetPosition(map[p]);
|
|
},
|
|
setLayout() {
|
|
window.go.main.App.ChangeLayout(parseInt(this.layout));
|
|
},
|
|
sendCAD() {
|
|
window.go.main.App.SendCtrlAltDel();
|
|
},
|
|
detect() {
|
|
// Chamar detecção no backend
|
|
}
|
|
}
|
|
}
|
|
|
|
// Captura o scroll globalmente na janela do KVMote
|
|
window.addEventListener('wheel', (event) => {
|
|
// Log no console do navegador para você ver se disparar (inspecionar elemento)
|
|
console.log("Wheel event:", event.deltaY);
|
|
|
|
if (window.go && window.go.main && window.go.main.App) {
|
|
window.go.main.App.HandleScroll(Math.round(event.deltaY));
|
|
}
|
|
}, { passive: false });
|
|
</script>
|
|
</body>
|
|
</html>
|