106 lines
3.1 KiB
HTML
106 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<!--
|
|
/* FHEM tablet ui - FTUI */
|
|
/**
|
|
* UI builder framework for FHEM
|
|
*
|
|
* Version: 3.0.0
|
|
*
|
|
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
|
|
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
|
|
* https://github.com/knowthelist/ftui
|
|
*/
|
|
-->
|
|
<script src="ftui.js"></script>
|
|
|
|
<link href="ftui.css" rel="stylesheet">
|
|
<link href="themes/indigo-theme.css" rel="stylesheet">
|
|
<link href="favicon.ico" rel="icon" type="image/x-icon" />
|
|
|
|
<!-- avoid 300ms delay on click-->
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
<!-- when serving the page with other web servers, e.g. lighttpd -->
|
|
<!-- <meta name="fhemweb_url" content="http://fhem.local:8083/fhem/"> -->
|
|
|
|
<!-- verbose level 0-4 -->
|
|
<meta name="debug" content="2">
|
|
|
|
<title>FTUI Demo</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- <ftui-grid cols="30" rows="20" resize> -->
|
|
<ftui-grid base-width="70" base-height="70" margin="5">
|
|
|
|
<ftui-grid-tile row="1" col="1" height="10" width="1" shape="normal">
|
|
<ftui-column>
|
|
<ftui-tab view="View1" direction="vertical" active>
|
|
<ftui-icon name="home1"></ftui-icon>
|
|
<ftui-label>Home</ftui-label>
|
|
</ftui-tab>
|
|
<ftui-tab view="View2" direction="vertical">
|
|
<ftui-icon name="music"></ftui-icon>
|
|
<ftui-label>Music</ftui-label>
|
|
</ftui-tab>
|
|
<ftui-tab view="View3">
|
|
<ftui-icon name="feed"></ftui-icon>
|
|
</ftui-tab>
|
|
<ftui-tab view="View4">
|
|
<ftui-icon name="lightbulb"></ftui-icon>
|
|
</ftui-tab>
|
|
<ftui-tab view="View5">
|
|
<ftui-icon name="bath"></ftui-icon>
|
|
</ftui-tab>
|
|
<ftui-tab view="View6">
|
|
<ftui-icon name="bath"></ftui-icon>
|
|
</ftui-tab>
|
|
</ftui-column>
|
|
</ftui-grid-tile>
|
|
|
|
<ftui-tab-view id="View1">
|
|
<ftui-grid-tile row="2" col="4" height="2" width="4" shape="normal">
|
|
<ftui-clock format="eeee D.MM.YYYY" class="size-1"></ftui-clock>
|
|
<ftui-flipclock format="hhmmss" clocksize="tiny" [hidden]="Schalter | map('on:false, off:true')"></ftui-flipclock>
|
|
</ftui-grid-tile>
|
|
|
|
<ftui-grid-tile row="5" col="4" height="3" width="4" shape="round">
|
|
<ftui-flipclock format="hhmm" clocksize="small" clockbg="#123456" clockfontcolor="#abcdef"></ftui-flipclock>
|
|
</ftui-grid-tile>
|
|
|
|
|
|
</ftui-tab-view>
|
|
|
|
<ftui-tab-view id="View2">
|
|
<ftui-grid-tile row="1" col="2" height="5" width="19">
|
|
<div class="size-10">Tab2</div>
|
|
</ftui-grid-tile>
|
|
</ftui-tab-view>
|
|
|
|
<ftui-tab-view id="View3">
|
|
<ftui-grid-tile row="1" col="2" height="5" width="9">
|
|
<div class="size-10">Tab3</div>
|
|
</ftui-grid-tile>
|
|
</ftui-tab-view>
|
|
|
|
<ftui-tab-view id="View4">
|
|
<ftui-grid-tile row="1" col="2" height="5" width="9">
|
|
<div class="size-10">Tab4</div>
|
|
</ftui-grid-tile>
|
|
</ftui-tab-view>
|
|
|
|
<ftui-tab-view id="View5">
|
|
<ftui-grid-tile row="1" col="2" height="5" width="9">
|
|
<div class="size-10">Tab5</div>
|
|
</ftui-grid-tile>
|
|
</ftui-tab-view>
|
|
</ftui-grid>
|
|
|
|
</body>
|
|
|
|
</html>
|