Files
ha-dashboard-studio/dashboard_studio/web/index.html
T
veenm 79d4a0f011 Dashboard Studio 1.14.0: new cards, kiosk announcements, guest mode, templates, sharing and phone app
- 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>
2026-10-26 21:08:42 +01:00

100 lines
6.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>