239 lines
14 KiB
HTML
239 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
|
<link rel="stylesheet" href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" type="text/css">
|
|
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
|
|
<title>Remote i3-wm</title>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container-fluid no-padding">
|
|
<div class="row no-margin">
|
|
<div class="col-12 no-padding">
|
|
<ul class="nav nav-pills nav-fill" id="nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link no-radius" href="#pane-keyboard">KEYBOARD</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link no-radius" href="#pane-i3">I3</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link no-radius" href="#pane-pointer">MOUSE</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link no-radius" href="#pane-media">MEDIA</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link no-radius" href="#pane-desktop">DESKTOP</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link no-radius btn-fullscreen" data-target="html" href="#">💻</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
<div id="pane-keyboard" class="pane">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="legend">Live text</p>
|
|
</div>
|
|
<div class="form-group col-12">
|
|
<input type="text" class="form-control live-text" name="text">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="legend">TEXT</p>
|
|
</div>
|
|
<div class="form-group col-6">
|
|
<input type="text" class="form-control" id="text">
|
|
</div>
|
|
<div class="col-6">
|
|
<button type="button" id="text-send" class="btn btn-primary">Send</button>
|
|
<button type="button" id="text-clear" class="btn btn-secondary">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="legend">Keys</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"key","value":"left"}' class="btn btn-secondary">←</button>
|
|
<button type="button" data-msg='{"type":"key","value":"up"}' class="btn btn-secondary">↑</button>
|
|
<button type="button" data-msg='{"type":"key","value":"down"}' class="btn btn-secondary">↓</button>
|
|
<button type="button" data-msg='{"type":"key","value":"right"}' class="btn btn-secondary">→</button>
|
|
</div>
|
|
<div class="line col-12"></div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"key","value":"escape"}' class="btn btn-secondary">Escape</button>
|
|
<button type="button" data-msg='{"type":"key","value":"tab"}' class="btn btn-secondary">TAB</button>
|
|
<button type="button" data-msg='{"type":"key","value":"backspace"}' class="btn btn-secondary">Backspace</button>
|
|
<button type="button" data-msg='{"type":"key","value":"enter"}' class="btn btn-secondary">Enter</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="legend">Shortcuts</p>
|
|
</div>
|
|
<div class="col-9" id="shortcuts_special_keys">
|
|
<label class="btn btn-secondary" for="shortcuts_special_key_ctrl">
|
|
<input type="checkbox" value="ctrl" id="shortcuts_special_key_ctrl">
|
|
ctrl
|
|
</label>
|
|
<label class="btn btn-secondary" for="shortcuts_special_key_shift">
|
|
<input type="checkbox" value="shift" id="shortcuts_special_key_shift">
|
|
shift
|
|
</label>
|
|
<label class="btn btn-secondary" for="shortcuts_special_key_alt">
|
|
<input type="checkbox" value="alt" id="shortcuts_special_key_alt">
|
|
alt
|
|
</label>
|
|
<label class="btn btn-secondary" for="shortcuts_special_key_win">
|
|
<input type="checkbox" value="win" id="shortcuts_special_key_win">
|
|
win
|
|
</label>
|
|
</div>
|
|
<div class="form-group col-3">
|
|
<input type="text" id="shortcut-key" class="form-control" name="shortcuts_char">
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button" id="shortcut-send" class="btn btn-primary">Send</button>
|
|
<button type="button" id="shortcut-clear" class="btn btn-secondary">Clear</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pane-i3" class="pane">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="legend">Workspaces</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"workspace","value":"1. IRC"}' class="btn btn-secondary btn-sm">1. IRC</button>
|
|
<button type="button" data-msg='{"type":"workspace","value":"2. WWW"}' class="btn btn-secondary btn-sm">2. WWW</button>
|
|
<button type="button" data-msg='{"type":"workspace","value":"3. MAIL"}' class="btn btn-secondary btn-sm">3. MAIL</button>
|
|
<button type="button" data-msg='{"type":"workspace","value":"6. MEDIA"}' class="btn btn-secondary btn-sm">6. MEDIA</button>
|
|
<button type="button" data-msg='{"type":"workspace","value":"7. WORK"}' class="btn btn-secondary btn-sm">7. WORK</button>
|
|
<button type="button" data-msg='{"type":"workspace","value":"8. VM"}' class="btn btn-secondary btn-sm">8. VM</button>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"workspace","value":"4"}' class="btn btn-secondary btn-sm">4</button>
|
|
<button type="button" data-msg='{"type":"workspace","value":"5"}' class="btn btn-secondary btn-sm">5</button>
|
|
<button type="button" data-msg='{"type":"workspace","value":"9"}' class="btn btn-secondary btn-sm">9</button>
|
|
<button type="button" data-msg='{"type":"workspace","value":"10"}' class="btn btn-secondary btn-sm">10</button>
|
|
<button type="button" data-msg='{"type":"workspace","value":"11"}' class="btn btn-secondary btn-sm">11</button>
|
|
<button type="button" data-msg='{"type":"workspace","value":"12"}' class="btn btn-secondary btn-sm">12</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="legend">Software</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"messages","value":[{"type":"keys","value":"win,d"},{"type":"text","value":"urxvt"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">urxvt</button>
|
|
<button type="button" data-msg='{"type":"keys","value":"win,d"}' class="btn btn-secondary">dmenu</button>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<p class="legend">UI</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"keys","value":"win,z"}' class="btn btn-secondary">win+z</button>
|
|
<button type="button" data-msg='{"type":"keys","value":"win,x"}' class="btn btn-secondary">win+x</button>
|
|
<button type="button" data-msg='{"type":"keys","value":"win,c"}' class="btn btn-secondary">win+c</button>
|
|
<button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"zp"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">zp</button>
|
|
<button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"zm"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">zm</button>
|
|
</div>
|
|
<div class="line col-12"></div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"messages","value":[{"type":"keys","value":"win,d"},{"type":"text","value":"no-screensaver"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">no-screensaver[on]</button>
|
|
<button type="button" data-msg='{"type":"messages","value":[{"type":"keys","value":"win,d"},{"type":"text","value":"pkill no-screensaver"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">no-screensaver[off]</button>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<p class="legend">Movie</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"v;mll"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">v;mll</button>
|
|
<button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"rt -l"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">rt -l</button>
|
|
</div>
|
|
<div class="line col-12"></div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"mug"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">mug</button>
|
|
<button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"mup"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">mup</button>
|
|
<button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"mug 1"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">mug 1</button>
|
|
<button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"mup 1"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">mup 1</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row pane" id="pane-pointer">
|
|
<div class="form-group col-12">
|
|
<input type="text" class="form-control live-text" placeholder="Live text" name="text">
|
|
</div/>
|
|
<div id="scrollbar"></div>
|
|
<div id="pointer"></div>
|
|
<div id="pointer-buttons">
|
|
<button type="button" data-msg='{"type":"pointer","click":"left"}' class="btn btn-primary no-radius col-5"> </button><button type="button no-margin" data-msg='{"type":"pointer","click":"middle"}' class="btn btn-secondary no-radius col-2"> </button><button type="button no-margin" data-msg='{"type":"pointer","click":"right"}' class="btn btn-primary no-radius col-5"> </button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row pane" id="pane-media">
|
|
<div class="col-12">
|
|
<p class="legend">Spotify</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"media","value":"playpause"}' class="btn btn-secondary">Play/Pause</button>
|
|
<button type="button" data-msg='{"type":"media","value":"next"}' class="btn btn-secondary">Next</button>
|
|
<button type="button" data-msg='{"type":"media","value":"prev"}' class="btn btn-secondary">Previous</button>
|
|
</div>
|
|
<div class="col-12">
|
|
<p class="legend">Volume</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"volume","value":"0"}' class="btn btn-secondary">0%</button>
|
|
<button type="button" data-msg='{"type":"volume","value":"25"}' class="btn btn-secondary">25%</button>
|
|
<button type="button" data-msg='{"type":"volume","value":"50"}' class="btn btn-secondary">50%</button>
|
|
<button type="button" data-msg='{"type":"volume","value":"75"}' class="btn btn-secondary">75%</button>
|
|
<button type="button" data-msg='{"type":"volume","value":"100"}' class="btn btn-secondary">100%</button>
|
|
</div>
|
|
<div class="line col-12"></div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"volume","value":"down"}' class="btn btn-secondary">-</button>
|
|
<button type="button" data-msg='{"type":"volume","value":"up"}' class="btn btn-secondary">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="row pane" id="pane-desktop">
|
|
<div class="col-12">
|
|
<p class="legend">Desktop</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button" data-msg='{"type":"screenshot","quality":"hq"}' class="btn btn-sm btn-secondary">Screenshot HQ</button>
|
|
<button type="button" data-msg='{"type":"screenshot","quality":"lq"}' class="btn btn-sm btn-secondary">Screenshot LQ</button>
|
|
<button type="button" id="live-hq" class="btn btn-sm btn-secondary">Live HQ</button>
|
|
<button type="button" id="live-lq" class="btn btn-sm btn-secondary">Live LQ</button>
|
|
<div id="screenshot"><img class="btn-fullscreen" data-target="#screenshot img" src="data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIJDjc3srQk8gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADElEQVQI12P48+cPAAXsAvVTWDc6AAAAAElFTkSuQmCC"></div>
|
|
</div>
|
|
<div class="col-12">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="disconneced">
|
|
You are disconnected [<a href="#" onclick="location.reload(); return false;">Refresh</a>]
|
|
</div>
|
|
|
|
<div id="response"></div>
|
|
|
|
<script src="vendor/components/jquery/jquery.min.js"></script>
|
|
<script src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
<script src="assets/js/main.js"></script>
|
|
</body>
|
|
</html>
|