File
Login or Register via GitHub
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/> <style> *, *:before, *:after { box-sizing: border-box; outline: none; } .main { width: 1024px; max-width: 100%; margin: 0 auto; min-height: 500px; display: flex; flex-direction: row; justify-content: space-between; } .left { width: 40%; border: 2px solid #ddd; padding: 50px; } .right { width: 58%; border: 2px solid #ddd; } .item { text-align: center; margin-bottom: 20px; } iframe { border: 0; margin: 0; width: 100%; height: 100%; } </style></head><body> <div class="main"> <div class="left"> <div class="item"> <div class="color-picker"></div> <div class="color-container"></div> </div> <div class="item"> <div class="color-picker"></div> <div class="color-container"></div> </div> </div> <div class="right"> <iframe id="inlineFrameExample" title="Inline Frame Example" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"> </iframe> </div> </div> <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script> <script> let item = document.querySelectorAll( '.item' ); if ( item.length ) { item.forEach( function( el ) { let element = el.querySelector( '.color-picker' ), container = el.querySelector( '.color-container' ); const pickr = Pickr.create( { el: element, container: container, theme: 'nano', swatches: [ 'rgba(244, 67, 54, 1)', 'rgba(233, 30, 99, 0.95)', 'rgba(156, 39, 176, 0.9)', 'rgba(103, 58, 183, 0.85)', 'rgba(63, 81, 181, 0.8)', 'rgba(33, 150, 243, 0.75)', 'rgba(3, 169, 244, 0.7)', 'rgba(0, 188, 212, 0.7)', 'rgba(0, 150, 136, 0.75)', 'rgba(76, 175, 80, 0.8)', 'rgba(139, 195, 74, 0.85)', 'rgba(205, 220, 57, 0.9)', 'rgba(255, 235, 59, 0.95)', 'rgba(255, 193, 7, 1)' ], components: { preview: true, opacity: true, hue: true, interaction: { input: true, hex: true, rgba: true, hsla: false, hsva: false, cmyk: false, clear: false, save: false } } } ); pickr.on( 'change', function( color, source, instance ) { console.log( instance ); } ).on( 'changestop', function( instance ) { console.log( 'changestop' ); } ); } ); } </script></body></html>
Output
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers