chrisryn/fiddle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add version history, screenshots, embed generator, collections, npm search, format-on-save, and custom fonts

Browse Source
This commit is contained in:
root
2026-02-27 01:47:16 -06:00
parent 6ca8519250
commit 0d84c56008
14 changed files with 1046 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
public/index.html
View File

@@ -40,6 +40,14 @@
<option value="dracula">Dracula</option>
<option value="github-dark">GitHub Dark</option>
</select>
<select id="editor-font" title="Editor font">
<option value="default">Default Font</option>
<option value="Fira Code">Fira Code</option>
<option value="JetBrains Mono">JetBrains Mono</option>
<option value="Source Code Pro">Source Code Pro</option>
<option value="IBM Plex Mono">IBM Plex Mono</option>
<option value="Cascadia Code">Cascadia Code</option>
</select>
</div>
<div class="toolbar-right">
<div class="tags-input-wrap">
@@ -62,6 +70,10 @@
<input type="checkbox" id="listed-checkbox" checked>
Listed
</label>
<label class="format-save-toggle" title="Auto-format code on save">
<input type="checkbox" id="format-save-checkbox">
Fmt
</label>
<label class="auto-run-toggle" title="Auto-run on change">
<input type="checkbox" id="auto-run-checkbox" checked>
Auto
@@ -69,6 +81,9 @@
<button id="btn-run" title="Run (Ctrl+Enter)">Run</button>
<button id="btn-save" title="Save (Ctrl+S)">Save</button>
<button id="btn-fork" title="Fork">Fork</button>
<button id="btn-history" title="Version history" class="btn-secondary">History</button>
<button id="btn-embed" title="Embed code generator" class="btn-secondary">Embed</button>
<button id="btn-collection" title="Add to collection" class="btn-secondary">Collection</button>
<button id="btn-export" title="Export standalone HTML" class="btn-secondary">Export</button>
<button id="btn-qr" title="QR code" class="btn-secondary">QR</button>
</div>
@@ -142,6 +157,10 @@
<input type="text" id="resource-js-input" placeholder="JS URL (e.g. https://cdn.jsdelivr.net/...)">
<button id="btn-add-js" class="btn-small">+ JS</button>
</div>
<div class="resource-row npm-search-row">
<input type="text" id="npm-search-input" placeholder="Search npm packages..." autocomplete="off">
<div id="npm-search-results" class="npm-search-results hidden"></div>
</div>
</div>
<div id="resource-list" class="resource-list"></div>
</div>
@@ -189,6 +208,60 @@
</div>
</div>
<div id="history-modal" class="modal-overlay hidden">
<div class="modal-content history-modal-content">
<div class="modal-header">
<span>Version History</span>
<button id="history-modal-close" class="btn-small">&times;</button>
</div>
<div id="history-list" class="history-list"></div>
<div id="history-preview" class="history-preview hidden">
<div class="history-preview-header">
<span id="history-preview-label"></span>
<button id="history-restore-btn">Restore This Version</button>
</div>
<div id="history-diff" class="history-diff"></div>
</div>
</div>
</div>
<div id="embed-modal" class="modal-overlay hidden">
<div class="modal-content embed-modal-content">
<div class="modal-header">
<span>Embed Code</span>
<button id="embed-modal-close" class="btn-small">&times;</button>
</div>
<div class="embed-options">
<label>Theme <select id="embed-theme"><option value="light">Light</option><option value="dark">Dark</option></select></label>
<label>Show tabs <select id="embed-tabs"><option value="1">Yes</option><option value="0">No</option></select></label>
<label>Auto-run <select id="embed-autorun"><option value="1">Yes</option><option value="0">No</option></select></label>
<label>Width <input type="text" id="embed-width" value="100%" style="width:70px"></label>
<label>Height <input type="text" id="embed-height" value="400" style="width:70px"></label>
</div>
<div class="embed-code-wrap">
<pre id="embed-code" class="embed-code"></pre>
<button id="embed-copy" class="btn-small">Copy</button>
</div>
<div class="embed-live-preview">
<iframe id="embed-preview-frame" style="border:1px solid var(--border);border-radius:4px;width:100%;height:200px"></iframe>
</div>
</div>
</div>
<div id="collection-modal" class="modal-overlay hidden">
<div class="modal-content" style="min-width:340px">
<div class="modal-header">
<span>Add to Collection</span>
<button id="collection-modal-close" class="btn-small">&times;</button>
</div>
<div class="collection-new-row">
<input type="text" id="new-collection-name" placeholder="New collection name...">
<button id="btn-create-collection" class="btn-small">Create</button>
</div>
<div id="collection-list" class="collection-list"></div>
</div>
</div>
<div id="share-toast" class="toast hidden"></div>
<script>