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'; worker-src blob:;">
6 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
7 <title>Scripts Manager</title>
8 <link rel="stylesheet" type="text/css" href="manager.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-input.js';
29 import 'peek://app/components/peek-button.js';
30 </script>
31 </head>
32 <body>
33 <div class="container">
34 <!-- Left Panel: Scripts List -->
35 <div class="scripts-list">
36 <div class="scripts-header">
37 <h1>Scripts</h1>
38 <peek-button id="newScriptBtn" variant="primary" style="width: 100%;">+ New Script</peek-button>
39 </div>
40 <div class="scripts-items" id="scriptsList">
41 <div class="empty-state">No scripts yet. Click "+ New Script" to create one.</div>
42 </div>
43 </div>
44
45 <!-- Center Panel: Editor -->
46 <div class="editor-panel">
47 <div class="editor-header">
48 <div class="editor-form" id="editorForm">
49 <div class="form-group">
50 <label>Name</label>
51 <peek-input id="scriptName" placeholder="My Script"></peek-input>
52 </div>
53 <div class="form-row">
54 <div class="form-group flex-1">
55 <label>Match Pattern</label>
56 <peek-input id="matchPattern" placeholder="https://example.com/*"></peek-input>
57 </div>
58 <div class="form-group w-150">
59 <label>Run At</label>
60 <select id="runAt">
61 <option value="document-start">Document Start</option>
62 <option value="document-end" selected>Document End</option>
63 <option value="document-idle">Document Idle</option>
64 </select>
65 </div>
66 </div>
67 <div class="form-group">
68 <label>Description</label>
69 <peek-input id="scriptDescription" placeholder="What does this script do?"></peek-input>
70 </div>
71 </div>
72 </div>
73 <div class="editor-content">
74 <textarea class="code-editor" id="codeEditor" placeholder="// Your script here const h1 = document.querySelector('h1'); return { title: h1?.textContent || 'No h1 found' };"></textarea>
75 </div>
76 <div class="editor-actions">
77 <peek-button id="saveBtn" variant="primary">Save</peek-button>
78 <peek-button id="revertBtn" variant="ghost">Revert</peek-button>
79 <peek-button id="deleteBtn" variant="danger">Delete</peek-button>
80 </div>
81 </div>
82
83 <!-- Right Panel: Preview -->
84 <div class="preview-panel">
85 <div class="preview-header">
86 <h2>Test & Preview</h2>
87 <div class="test-url-group">
88 <peek-input id="testUrl" placeholder="https://example.com"></peek-input>
89 <peek-button id="testBtn" variant="primary" style="width: 100%;">Test Script</peek-button>
90 </div>
91 </div>
92 <div class="preview-content" id="previewContent">
93 <div class="empty-state">
94 Enter a test URL and click "Test Script" to see results.
95 </div>
96 </div>
97 </div>
98 </div>
99
100 <script type="module" src="./manager.js"></script>
101 </body>
102</html>