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

Add Python REPL, instant deploy, Gist import, presentation mode, and CSS visual tools

Browse Source 
- Python mode via Pyodide WASM runtime with stdout/stderr console integration
- Publish fiddles to clean /p/:slug URLs as standalone HTML pages
- Import code from GitHub Gist URLs with auto-detection of language/mode
- Presentation mode with slide management, fullscreen viewer, and keyboard nav
- Enable Monaco color decorators for inline CSS color pickers
- Extract reusable generateStandaloneHtml from export module
This commit is contained in:
root
2026-02-27 15:50:55 -06:00
parent 26e232fd41
commit ae8dbafb20
11 changed files with 666 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
public/css/style.css
View File

@@ -766,3 +766,50 @@ body.resizing iframe { pointer-events: none; }
.npm-result-version { font-size: 10px; color: var(--text-dim); font-weight: 400; }
.npm-result-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.npm-no-results { padding: 12px; text-align: center; color: var(--text-dim); font-size: 12px; }
/* Slide list (presentation manager) */
.slide-list { max-height: 300px; overflow-y: auto; }
.slide-item {
display: flex; align-items: center; gap: 8px; padding: 8px 16px;
border-bottom: 1px solid var(--border); font-size: 12px;
}
.slide-item:hover { background: rgba(255,255,255,0.03); }
.slide-number {
width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.slide-preview-text { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slide-delete-btn { flex-shrink: 0; }
/* Presentation overlay (fullscreen) */
.presentation-overlay {
position: fixed; inset: 0; z-index: 10000;
background: #111; display: flex; flex-direction: column;
}
.presentation-overlay.hidden { display: none; }
.pres-header {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 16px; background: #1a1a1a; border-bottom: 1px solid #333;
}
.pres-counter { color: #aaa; font-size: 13px; font-weight: 500; }
.pres-exit-btn {
background: transparent; color: #aaa; border: 1px solid #444;
padding: 4px 12px; font-size: 12px; border-radius: 4px;
}
.pres-exit-btn:hover { background: #333; color: #fff; }
.pres-content { flex: 1; display: flex; overflow: hidden; }
.pres-iframe { width: 100%; height: 100%; border: none; background: #fff; }
.pres-footer {
display: flex; align-items: center; gap: 12px;
padding: 8px 16px; background: #1a1a1a; border-top: 1px solid #333;
}
.pres-nav-btn {
background: transparent; color: #aaa; border: 1px solid #444;
padding: 6px 16px; font-size: 12px; border-radius: 4px; flex-shrink: 0;
}
.pres-nav-btn:hover { background: #333; color: #fff; }
.pres-notes {
flex: 1; color: #888; font-size: 12px; font-style: italic;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}