Something went wrong. Try again.
experiments in a post-browser web
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; worker-src blob:;"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"> <title>Scripts Manager</title> <link rel="stylesheet" type="text/css" href="manager.css">
<!-- Import map for resolving bare module specifiers --> <script type="importmap"> { "imports": { "lit": "peek://node_modules/lit/index.js", "lit/": "peek://node_modules/lit/", "lit-html": "peek://node_modules/lit-html/lit-html.js", "lit-html/": "peek://node_modules/lit-html/", "lit-element": "peek://node_modules/lit-element/lit-element.js", "lit-element/": "peek://node_modules/lit-element/", "@lit/reactive-element": "peek://node_modules/@lit/reactive-element/reactive-element.js", "@lit/reactive-element/": "peek://node_modules/@lit/reactive-element/" } } </script>
<!-- Import peek-components --> <script type="module"> import 'peek://app/components/peek-input.js'; import 'peek://app/components/peek-button.js'; </script> </head> <body> <div class="container"> <!-- Left Panel: Scripts List --> <div class="scripts-list"> <div class="scripts-header"> <h1>Scripts</h1> <peek-button id="newScriptBtn" variant="primary" style="width: 100%;">+ New Script</peek-button> </div> <div class="scripts-items" id="scriptsList"> <div class="empty-state">No scripts yet. Click "+ New Script" to create one.</div> </div> </div>
<!-- Center Panel: Editor --> <div class="editor-panel"> <div class="editor-header"> <div class="editor-form" id="editorForm"> <div class="form-group"> <label>Name</label> <peek-input id="scriptName" placeholder="My Script"></peek-input> </div> <div class="form-row"> <div class="form-group flex-1"> <label>Match Pattern</label> <peek-input id="matchPattern" placeholder="https://example.com/*"></peek-input> </div> <div class="form-group w-150"> <label>Run At</label> <select id="runAt"> <option value="document-start">Document Start</option> <option value="document-end" selected>Document End</option> <option value="document-idle">Document Idle</option> </select> </div> </div> <div class="form-group"> <label>Description</label> <peek-input id="scriptDescription" placeholder="What does this script do?"></peek-input> </div> </div> </div> <div class="editor-content"> <textarea class="code-editor" id="codeEditor" placeholder="// Your script here const h1 = document.querySelector('h1'); return { title: h1?.textContent || 'No h1 found' };"></textarea> </div> <div class="editor-actions"> <peek-button id="saveBtn" variant="primary">Save</peek-button> <peek-button id="revertBtn" variant="ghost">Revert</peek-button> <peek-button id="deleteBtn" variant="danger">Delete</peek-button> </div> </div>
<!-- Right Panel: Preview --> <div class="preview-panel"> <div class="preview-header"> <h2>Test & Preview</h2> <div class="test-url-group"> <peek-input id="testUrl" placeholder="https://example.com"></peek-input> <peek-button id="testBtn" variant="primary" style="width: 100%;">Test Script</peek-button> </div> </div> <div class="preview-content" id="previewContent"> <div class="empty-state"> Enter a test URL and click "Test Script" to see results. </div> </div> </div> </div>
<script type="module" src="./manager.js"></script> </body></html>