burrito.space
experiments in a post-browser web
burrito.tngl.sh
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
6 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
7 <title>Sheet</title>
8 <link rel="stylesheet" type="text/css" href="sheet.css">
9
10 <!-- Import map for resolving bare module specifiers -->
11 <script type="importmap">
12 {
13 "imports": {
14 "lit": "peek://node_modules/lit/index.js",
15 "lit/": "peek://node_modules/lit/",
16 "lit-html": "peek://node_modules/lit-html/lit-html.js",
17 "lit-html/": "peek://node_modules/lit-html/",
18 "lit-element": "peek://node_modules/lit-element/lit-element.js",
19 "lit-element/": "peek://node_modules/lit-element/",
20 "@lit/reactive-element": "peek://node_modules/@lit/reactive-element/reactive-element.js",
21 "@lit/reactive-element/": "peek://node_modules/@lit/reactive-element/"
22 }
23 }
24 </script>
25
26 <!-- Import peek-components -->
27 <script type="module">
28 import 'peek://app/components/peek-card.js';
29 import 'peek://app/components/peek-grid.js';
30 import 'peek://app/components/peek-grid-toolbar.js';
31 </script>
32 </head>
33 <body>
34 <div class="sheet-header">
35 <h1 class="sheet-title">Sheet</h1>
36 <div class="sheet-actions">
37 <button class="btn btn-add" style="display:none;">+ Add Card</button>
38 <button class="btn btn-edit">Edit</button>
39 </div>
40 </div>
41
42 <peek-grid class="cards" view-mode="freeform" freeform-snap="20" gap="12"></peek-grid>
43
44 <div class="add-dialog" style="display:none;">
45 <div class="add-dialog-backdrop"></div>
46 <div class="add-dialog-content">
47 <h2>Add Card</h2>
48 <input type="text" class="add-dialog-input" placeholder="Enter URL (peek:// or https://)" />
49 <div class="add-dialog-buttons">
50 <button class="btn btn-cancel">Cancel</button>
51 <button class="btn btn-confirm">Add</button>
52 </div>
53 </div>
54 </div>
55
56 <script type="module" src="sheet.js"></script>
57 </body>
58</html>