79d4a0f011
- Seven new cards: parcels, air quality, water and gas usage, solar forecast, garage and gate, sports, Formula One - Kiosk: announcements from automations, tab rotation, guest mode, click sound - Editor: templates, widget presets, undo history, alignment guides, Lovelace import, share link and QR code, theme variants, suggestions, touch and hold actions - Phones: installable app with shortcuts, offline states, tab swipe, pull to refresh, bottom sheets, haptics, phone/large visibility, landscape layout, editing on the phone, away tab - Fixed: the weather forecast and to-do list could stay on Loading… Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
100 lines
6.3 KiB
HTML
100 lines
6.3 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="theme-color" content="#f2f2f7" media="(prefers-color-scheme: light)">
|
||
<meta name="theme-color" content="#0f0f11" media="(prefers-color-scheme: dark)">
|
||
<meta name="ds-version" content="__VERSION__">
|
||
<title>Dashboard Studio</title>
|
||
<link rel="icon" type="image/png" href="static/favicon.png">
|
||
<link rel="stylesheet" href="static/style.css">
|
||
<link rel="manifest" href="manifest.webmanifest">
|
||
<link rel="apple-touch-icon" href="static/apple-touch-icon.png">
|
||
<meta name="theme-color" content="#0f1526">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="apple-mobile-web-app-title" content="Dashboards">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<header id="topbar" role="toolbar" aria-label="Dashboard">
|
||
<div class="tb-group">
|
||
<label class="picker">
|
||
<span class="sr-only" data-i18n>Dashboard</span>
|
||
<select id="dash-select"></select>
|
||
<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
|
||
</label>
|
||
<button id="btn-new" class="btn icon" aria-label="New dashboard" title="New dashboard"></button>
|
||
</div>
|
||
<div class="tb-group">
|
||
<span id="conn" class="conn" role="status" data-i18n>Offline</span>
|
||
<span id="save-status" class="save-status edit-only" role="status"></span>
|
||
<span class="edit-only tb-group">
|
||
<button id="btn-undo" class="btn icon" aria-label="Undo" title="Undo (⌘Z)"></button>
|
||
<button id="btn-redo" class="btn icon" aria-label="Redo" title="Redo (⇧⌘Z)"></button>
|
||
<button id="btn-menu" class="btn icon" aria-label="More actions" aria-haspopup="menu" aria-expanded="false" title="More actions"></button>
|
||
</span>
|
||
<button id="btn-guest" class="btn view-only" hidden><span data-i18n>Guest mode</span></button>
|
||
<button id="btn-kiosk" class="btn view-only label-wide" aria-label="Kiosk" title="Kiosk mode"><span data-i18n>Kiosk</span></button>
|
||
<button id="btn-edit" class="btn primary" data-i18n>Edit</button>
|
||
</div>
|
||
<div id="menu" class="menu" role="menu" hidden>
|
||
<button role="menuitem" data-menu="rename" data-icon="edit" data-i18n>Rename…</button>
|
||
<button role="menuitem" data-menu="duplicate" data-icon="copy" data-i18n>Duplicate</button>
|
||
<button role="menuitem" data-menu="starter" data-icon="sparkles" data-i18n>New dashboard from my devices</button>
|
||
<button role="menuitem" data-menu="suggest" data-icon="search" data-i18n>Devices not on a dashboard…</button>
|
||
<button role="menuitem" data-menu="assign" data-icon="person" data-i18n>Who sees which dashboard…</button>
|
||
<button role="menuitem" data-menu="history" data-icon="history" data-i18n>Version history…</button>
|
||
<button role="menuitem" data-menu="undo-history" data-icon="undo" data-i18n>Undo history…</button>
|
||
<button role="menuitem" data-menu="share" data-icon="share" data-i18n>Share…</button>
|
||
<button role="menuitem" data-menu="install" data-icon="phone" data-i18n>Install as an app…</button>
|
||
<hr>
|
||
<button role="menuitem" data-menu="export" data-icon="exit" data-i18n>Export as JSON</button>
|
||
<button role="menuitem" data-menu="import" data-icon="plus" data-i18n>Import JSON…</button>
|
||
<button role="menuitem" data-menu="lovelace" data-icon="import" data-i18n>Import from Home Assistant…</button>
|
||
<hr>
|
||
<button role="menuitem" data-menu="delete" data-icon="trash" class="danger" data-i18n>Delete dashboard…</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="workspace">
|
||
<aside id="palette" class="edit-only" aria-label="Widgets">
|
||
<button class="sheet-close btn icon" aria-label="Close" title="Close">×</button>
|
||
<div class="panel-title" data-i18n>Add widget</div>
|
||
<input id="palette-search" class="input" type="search" aria-label="Search widgets" autocomplete="off" spellcheck="false">
|
||
<div id="palette-list"></div>
|
||
<p class="hint" data-i18n>Click to add. Drag to move, drag the corner to resize. Shift-click to select several. Arrow keys move the selected widget, Shift+arrows resize, ⌘D duplicates, Delete removes.</p>
|
||
</aside>
|
||
|
||
<main id="stage">
|
||
<nav id="tabnav" aria-label="Tabs" hidden></nav>
|
||
<div id="canvas"><div id="grid"></div></div>
|
||
</main>
|
||
|
||
<aside id="inspector" class="edit-only" aria-label="Inspector"></aside>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="edit-bar" class="edit-only"><button class="btn" id="eb-add"><span data-i18n>Add</span></button><button class="btn primary" id="eb-insp"></button></div>
|
||
<div id="sheet-backdrop" hidden></div>
|
||
<div id="saver" hidden aria-hidden="true"><div class="photos"><img class="ph-layer" alt=""><img class="ph-layer" alt=""><div class="ph-msg"></div></div><div class="saver-clock"><div class="time num"></div><div class="date"></div></div></div>
|
||
<div id="doorbell" hidden role="alertdialog" aria-modal="true" aria-labelledby="db-title"><div class="db-cam"></div><div class="db-bar"><div class="db-title" id="db-title"></div><button class="btn db-close">Close</button></div></div>
|
||
<div id="night-dim" aria-hidden="true"></div>
|
||
<div id="offline-note" hidden role="status"></div>
|
||
<div id="ptr" hidden aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7"/></svg></div>
|
||
<div id="announce" hidden role="alertdialog" aria-modal="true" aria-labelledby="an-title"><div class="an-card"><div class="an-ico"></div><div class="an-title" id="an-title"></div><div class="an-msg"></div><button class="btn primary an-ok">OK</button></div></div>
|
||
|
||
<div id="modal" class="modal" hidden><div class="modal-card" role="dialog" aria-modal="true"></div></div>
|
||
<div id="toasts" aria-live="polite"></div>
|
||
<input type="file" id="import-file" accept="application/json,.json" hidden>
|
||
|
||
<script src="static/i18n.js"></script>
|
||
<script src="static/icons.js"></script>
|
||
<script src="static/qr.js"></script>
|
||
<script src="static/widgets.js"></script>
|
||
<script src="static/app.js"></script>
|
||
</body>
|
||
</html>
|