Initial commit
This commit is contained in:
416
Frontend/pages/home/index.handlebars
Normal file
416
Frontend/pages/home/index.handlebars
Normal file
@@ -0,0 +1,416 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Undecked</title>
|
||||
|
||||
<link rel="stylesheet" href="/pd/home/style">
|
||||
<script src="/stc/libs/socket.io.min.js"></script>
|
||||
<script src="/pd/home/script" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tabcontainer">
|
||||
<div class="tabmenu">
|
||||
<div class="item" tab="pages">Pages</div>
|
||||
<div class="item" tab="connections">Connections</div>
|
||||
<div class="item" tab="decks">Decks</div>
|
||||
</div>
|
||||
<div class="tabpages">
|
||||
<div class="item" tab="pages">
|
||||
<div class="pageselector">
|
||||
<div class="pageinfo">
|
||||
<input type="text" disabled class="pagename">
|
||||
<div class="controls">
|
||||
<div class="box left">
|
||||
<img src="/stc/icon/left.png">
|
||||
</div>
|
||||
<div class="centered">
|
||||
|
||||
<div class="box add">
|
||||
<img src="/stc/icon/add.png">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="box right">
|
||||
<img src="/stc/icon/right.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview">
|
||||
<div class="deck">
|
||||
<div class="group small fs">
|
||||
<div class="key" x="0" y="0"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="1" y="0"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="2" y="0"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="3" y="0"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="4" y="0"><canvas class="ready"></canvas></div>
|
||||
</div>
|
||||
<div class="group large">
|
||||
<div class="key" x="5" y="0"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="6" y="0"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="7" y="0"><canvas class="ready"></canvas></div>
|
||||
</div>
|
||||
<div class="group small">
|
||||
<div class="key" x="0" y="1"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="1" y="1"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="2" y="1"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="3" y="1"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="4" y="1"><canvas class="ready"></canvas></div>
|
||||
</div>
|
||||
<div class="group large">
|
||||
<div class="key" x="5" y="1"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="6" y="1"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="7" y="1"><canvas class="ready"></canvas></div>
|
||||
</div>
|
||||
<div class="group small ls">
|
||||
<div class="key" x="0" y="2"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="1" y="2"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="2" y="2"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="3" y="2"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="4" y="2"><canvas class="ready"></canvas></div>
|
||||
</div>
|
||||
<div class="group large">
|
||||
<div class="key" x="5" y="2"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="6" y="2"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="7" y="2"><canvas class="ready"></canvas></div>
|
||||
</div>
|
||||
<div class="group large">
|
||||
<div class="key" x="0" y="3"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="1" y="3"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="2" y="3"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="3" y="3"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="4" y="3"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="5" y="3"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="6" y="3"><canvas class="ready"></canvas></div>
|
||||
<div class="key" x="7" y="3"><canvas class="ready"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editcontainer">
|
||||
<div class="edit disabled">
|
||||
<div class="split">
|
||||
<div class="buttontype">
|
||||
<div class="types">
|
||||
<div class="buttonitem selected" type="empty">
|
||||
<div class="text">Empty</div>
|
||||
</div>
|
||||
<div class="buttonitem" type="custom">
|
||||
<div class="text">Custom</div>
|
||||
</div>
|
||||
<div class="buttonitem" type="pageup">
|
||||
<div class="text">Page Up</div>
|
||||
</div>
|
||||
<div class="buttonitem" type="pagedown">
|
||||
<div class="text">Page Down</div>
|
||||
</div>
|
||||
<div class="buttonitem" type="currentpage">
|
||||
<div class="text">Current Page</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editinner">
|
||||
<div class="containertitle blockheader">
|
||||
Appearence
|
||||
</div>
|
||||
<div class="container appearence">
|
||||
|
||||
<div class="vis">
|
||||
<div class="row75">
|
||||
<div class="row text">
|
||||
<div class="label">Text</div>
|
||||
<div class="inputs">
|
||||
<input type="text" class="value ap_text_value">
|
||||
<select class="size ap_text_size">
|
||||
<option value="15">15px</option>
|
||||
<option value="16">16px</option>
|
||||
<option value="17">17px</option>
|
||||
<option value="18">18px</option>
|
||||
<option value="19">19px</option>
|
||||
<option value="20">20px</option>
|
||||
<option value="21">21px</option>
|
||||
<option value="22">22px</option>
|
||||
<option value="23">23px</option>
|
||||
<option value="24">24px</option>
|
||||
<option value="25">25px</option>
|
||||
<option value="26">26px</option>
|
||||
<option value="27">27px</option>
|
||||
<option value="28">28px</option>
|
||||
<option value="29">29px</option>
|
||||
<option value="30">30px</option>
|
||||
<option value="33">33px</option>
|
||||
<option value="36">36px</option>
|
||||
<option value="40">40px</option>
|
||||
<option value="45">45px</option>
|
||||
<option value="50">50px</option>
|
||||
</select>
|
||||
<input type="color" class="color ap_text_color">
|
||||
</div>
|
||||
<div class="advanced">
|
||||
<div class="subrow ap_text_offsetx">
|
||||
<div class="label">Offset X</div>
|
||||
<input type="range" value="0" min="-50" max="50" step="0.1">
|
||||
<input type="number" value="0" min="-50" max="50" step="0.1">
|
||||
</div>
|
||||
<div class="subrow ap_text_offsety">
|
||||
<div class="label">Offset Y</div>
|
||||
<input type="range" value="0" min="-50" max="50" step="0.1">
|
||||
<input type="number" value="0" min="-50" max="50" step="0.1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row background">
|
||||
<div class="label">Background</div>
|
||||
<input type="color" class="color ap_background_color">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row image">
|
||||
<div class="label">Image</div>
|
||||
<div class="imagemenu">
|
||||
<div class="imagetype">
|
||||
<div class="selectoritem selected" panel="none">
|
||||
<div class="text">None</div>
|
||||
</div>
|
||||
<div class="selectoritem" panel="icon">
|
||||
<div class="text">Icon</div>
|
||||
</div>
|
||||
<div class="selectoritem" panel="upload">
|
||||
<div class="text">Upload</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="infopanel" panel="none">
|
||||
</div>
|
||||
<div class="infopanel" panel="icon">
|
||||
Icons
|
||||
</div>
|
||||
<div class="infopanel" panel="upload">
|
||||
Upload
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panels">
|
||||
<div class="panel" panel="none">
|
||||
</div>
|
||||
<div class="panel icons" panel="icon">
|
||||
<div class="list">
|
||||
{{#each icons}}
|
||||
<div class="icon" notloaded iconID="{{this.id}}">
|
||||
<img class="white">
|
||||
<img class="black">
|
||||
<div class="name">{{this.name}}</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" panel="upload">
|
||||
Upload
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="advanced">
|
||||
<div class="subrow ap_image_size">
|
||||
<div class="label">Size</div>
|
||||
<input type="range" value="100" min="0" max="100" step="0.1">
|
||||
<input type="number" value="100" min="0" max="100" step="0.1">
|
||||
</div>
|
||||
<div class="subrow ap_image_offsetx">
|
||||
<div class="label">Offset X</div>
|
||||
<input type="range" value="0" min="-50" max="50" step="0.1">
|
||||
<input type="number" value="0" min="-50" max="50" step="0.1">
|
||||
</div>
|
||||
<div class="subrow ap_image_offsety">
|
||||
<div class="label">Offset Y</div>
|
||||
<input type="range" value="0" min="-50" max="50" step="0.1">
|
||||
<input type="number" value="0" min="-50" max="50" step="0.1">
|
||||
</div>
|
||||
<div class="subrow ap_image_rotation">
|
||||
<div class="label">Rotation</div>
|
||||
<input type="range" value="0" min="0" max="360" step="1">
|
||||
<input type="number" value="0" min="0" max="360" step="1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containertitle checktitle blockheader">
|
||||
<div class="text">
|
||||
Actions
|
||||
</div>
|
||||
|
||||
<div class="checks">
|
||||
<div class="check toggle">
|
||||
<input type="checkbox">
|
||||
<div class="checklabel">Toggle</div>
|
||||
</div>
|
||||
<div class="check confirm">
|
||||
<input type="checkbox">
|
||||
<div class="checklabel">Confirm</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container actions">
|
||||
<div class="actioninner">
|
||||
<div class="row event up">
|
||||
<div class="label">Key Up</div>
|
||||
<div class="actions"></div>
|
||||
<div class="newaction">
|
||||
<input type="text" placeholder="Search for action"
|
||||
class="actionselector">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row event toggle">
|
||||
<div class="tlatch">
|
||||
<div class="label">Key Latch</div>
|
||||
<div class="actions latch"></div>
|
||||
<div class="newaction">
|
||||
<input type="text" placeholder="Search for action"
|
||||
class="actionselector">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tunlatch">
|
||||
<div class="label">Key Unlatch</div>
|
||||
<div class="actions unlatch"></div>
|
||||
<div class="newaction">
|
||||
<input type="text" placeholder="Search for action"
|
||||
class="actionselector">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row event down">
|
||||
<div class="label">Key Down</div>
|
||||
<div class="actions down"></div>
|
||||
<div class="newaction">
|
||||
<input type="text" placeholder="Search for action"
|
||||
class="actionselector">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" tab="connections">
|
||||
<div class="connections">
|
||||
|
||||
<div class="connected">
|
||||
<div class="blockheader">Connections</div>
|
||||
<table class="connectedtable" cellspacing="0">
|
||||
<tr>
|
||||
<th class="status">Status</th>
|
||||
<th class="name">Name</th>
|
||||
<th class="integration">Integration</th>
|
||||
<th class="type">Device Type</th>
|
||||
</tr>
|
||||
{{#each connected}}
|
||||
<tr connectionID="{{this.connectionID}}">
|
||||
<td class="status">
|
||||
<div class="statuscontainer">
|
||||
<div class="value online"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="name">{{this.name}}</td>
|
||||
<td class="integration">{{this.integrationName}}</td>
|
||||
<td class="type">{{this.connectionType}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</table>
|
||||
</div>
|
||||
<div class="connectionbrowser">
|
||||
{{#each connections}}
|
||||
<div class="available" connectionType="{{this.connectionType}}"
|
||||
integrationID="{{this.integrationID}}">
|
||||
<div class="integration">{{this.integrationName}}</div>
|
||||
<div class="connectionName">{{this.connectionName}}</div>
|
||||
|
||||
<div class="button">Add</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" tab="decks">Decks</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connectiondialog">
|
||||
<div class="dialog">
|
||||
<div class="title">New Connection</div>
|
||||
<div class="message"></div>
|
||||
<a class="link" target="_blank" href=""></a>
|
||||
<div class="fields"></div>
|
||||
<div class="buttons">
|
||||
<div class="button secondary cn">Cancel</div>
|
||||
<div class="button co">Connect</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contextmenu">
|
||||
<div class="item copy">
|
||||
<div class="content">
|
||||
<img src="/stc/icon/copy.png">
|
||||
<div class="title">Copy</div>
|
||||
|
||||
</div>
|
||||
<div class="shortcut"><span class="shortcutKey"></span>+C</div>
|
||||
</div>
|
||||
<div class="item paste">
|
||||
<div class="content">
|
||||
<img src="/stc/icon/paste.png">
|
||||
<div class="title">Paste</div>
|
||||
|
||||
</div>
|
||||
<div class="shortcut"><span class="shortcutKey"></span>+V</div>
|
||||
</div>
|
||||
<div class="item cut">
|
||||
<div class="content">
|
||||
<img src="/stc/icon/cut.png">
|
||||
<div class="title">Cut</div>
|
||||
</div>
|
||||
<div class="shortcut"><span class="shortcutKey"></span>+X</div>
|
||||
</div>
|
||||
<div class="seperator"></div>
|
||||
<div class="item ghost">
|
||||
<div class="content">
|
||||
<img src="/stc/icon/ghost.png">
|
||||
<div class="title">Create ghost</div>
|
||||
</div>
|
||||
<div class="shortcut"><span class="shortcutKey"></span>+G</div>
|
||||
</div>
|
||||
<div class="seperator"></div>
|
||||
<div class="item osc disabled">
|
||||
<div class="content">
|
||||
<img src="">
|
||||
<div class="title">Get OSC address</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item http disabled">
|
||||
<div class="content">
|
||||
<img src="">
|
||||
<div class="title">Get HTTP trigger address</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actiondialog">
|
||||
{{#each actions}}
|
||||
<div class="item" actionID="{{this.actionID}}" integrationID="{{this.integrationID}}">
|
||||
<div class="integration">{{this.integrationName}}</div>
|
||||
<div class="action">{{this.actionName}}</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user