Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
    <title>SCH Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js" z-sch-res></script>
    <script src="data:text/javascript;base64,Ly9odHRwczovL2h0bWxjb2xvcmNvZGVzLmNvbS9jb2xvci1uYW1lcy8NCi8qDQpjb25zdCBjb2xvcnMgPSBbXTsgDQpkb2N1bWVudC5ib2R5LnF1ZXJ5U2VsZWN0b3JBbGwoJ3Rib2R5IC5jb2xvci10YWJsZV9fcm93JykuZm9yRWFjaChyb3cgPT4geyANCiAgICBjb25zdCB0ZHMgPSByb3cucXVlcnlTZWxlY3RvckFsbCgndGQnKTsgDQogICAgY29sb3JzLnB1c2goeyBuYW1lOiB0ZHNbMV0udGV4dENvbnRlbnQsIGhleDogdGRzWzJdLnRleHRDb250ZW50IH0pOyANCn0pOw0KKi8NCnZhciBjb2xvcnMgPSBbDQogICAgew0KICAgICAgIm5hbWUiOiAiSW5kaWFuUmVkIiwNCiAgICAgICJoZXgiOiAiI0NENUM1QyINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkxpZ2h0Q29yYWwiLA0KICAgICAgImhleCI6ICIjRjA4MDgwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiU2FsbW9uIiwNCiAgICAgICJoZXgiOiAiI0ZBODA3MiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkRhcmtTYWxtb24iLA0KICAgICAgImhleCI6ICIjRTk5NjdBIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTGlnaHRTYWxtb24iLA0KICAgICAgImhleCI6ICIjRkZBMDdBIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiQ3JpbXNvbiIsDQogICAgICAiaGV4IjogIiNEQzE0M0MiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJSZWQiLA0KICAgICAgImhleCI6ICIjRkYwMDAwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiRmlyZUJyaWNrIiwNCiAgICAgICJoZXgiOiAiI0IyMjIyMiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkRhcmtSZWQiLA0KICAgICAgImhleCI6ICIjOEIwMDAwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiUGluayIsDQogICAgICAiaGV4IjogIiNGRkMwQ0IiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJMaWdodFBpbmsiLA0KICAgICAgImhleCI6ICIjRkZCNkMxIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiSG90UGluayIsDQogICAgICAiaGV4IjogIiNGRjY5QjQiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJEZWVwUGluayIsDQogICAgICAiaGV4IjogIiNGRjE0OTMiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJNZWRpdW1WaW9sZXRSZWQiLA0KICAgICAgImhleCI6ICIjQzcxNTg1Ig0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiUGFsZVZpb2xldFJlZCIsDQogICAgICAiaGV4IjogIiNEQjcwOTMiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJMaWdodFNhbG1vbiIsDQogICAgICAiaGV4IjogIiNGRkEwN0EiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJDb3JhbCIsDQogICAgICAiaGV4IjogIiNGRjdGNTAiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJUb21hdG8iLA0KICAgICAgImhleCI6ICIjRkY2MzQ3Ig0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiT3JhbmdlUmVkIiwNCiAgICAgICJoZXgiOiAiI0ZGNDUwMCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkRhcmtPcmFuZ2UiLA0KICAgICAgImhleCI6ICIjRkY4QzAwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiT3JhbmdlIiwNCiAgICAgICJoZXgiOiAiI0ZGQTUwMCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkdvbGQiLA0KICAgICAgImhleCI6ICIjRkZENzAwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiWWVsbG93IiwNCiAgICAgICJoZXgiOiAiI0ZGRkYwMCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkxpZ2h0WWVsbG93IiwNCiAgICAgICJoZXgiOiAiI0ZGRkZFMCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkxlbW9uQ2hpZmZvbiIsDQogICAgICAiaGV4IjogIiNGRkZBQ0QiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJMaWdodEdvbGRlbnJvZFllbGxvdyIsDQogICAgICAiaGV4IjogIiNGQUZBRDIiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJQYXBheWFXaGlwIiwNCiAgICAgICJoZXgiOiAiI0ZGRUZENSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIk1vY2Nhc2luIiwNCiAgICAgICJoZXgiOiAiI0ZGRTRCNSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlBlYWNoUHVmZiIsDQogICAgICAiaGV4IjogIiNGRkRBQjkiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJQYWxlR29sZGVucm9kIiwNCiAgICAgICJoZXgiOiAiI0VFRThBQSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIktoYWtpIiwNCiAgICAgICJoZXgiOiAiI0YwRTY4QyINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkRhcmtLaGFraSIsDQogICAgICAiaGV4IjogIiNCREI3NkIiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJMYXZlbmRlciIsDQogICAgICAiaGV4IjogIiNFNkU2RkEiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJUaGlzdGxlIiwNCiAgICAgICJoZXgiOiAiI0Q4QkZEOCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlBsdW0iLA0KICAgICAgImhleCI6ICIjRERBMEREIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiVmlvbGV0IiwNCiAgICAgICJoZXgiOiAiI0VFODJFRSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIk9yY2hpZCIsDQogICAgICAiaGV4IjogIiNEQTcwRDYiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJGdWNoc2lhIiwNCiAgICAgICJoZXgiOiAiI0ZGMDBGRiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIk1hZ2VudGEiLA0KICAgICAgImhleCI6ICIjRkYwMEZGIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTWVkaXVtT3JjaGlkIiwNCiAgICAgICJoZXgiOiAiI0JBNTVEMyINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIk1lZGl1bVB1cnBsZSIsDQogICAgICAiaGV4IjogIiM5MzcwREIiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJSZWJlY2NhUHVycGxlIiwNCiAgICAgICJoZXgiOiAiIzY2MzM5OSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkJsdWVWaW9sZXQiLA0KICAgICAgImhleCI6ICIjOEEyQkUyIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiRGFya1Zpb2xldCIsDQogICAgICAiaGV4IjogIiM5NDAwRDMiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJEYXJrT3JjaGlkIiwNCiAgICAgICJoZXgiOiAiIzk5MzJDQyINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkRhcmtNYWdlbnRhIiwNCiAgICAgICJoZXgiOiAiIzhCMDA4QiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlB1cnBsZSIsDQogICAgICAiaGV4IjogIiM4MDAwODAiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJJbmRpZ28iLA0KICAgICAgImhleCI6ICIjNEIwMDgyIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiU2xhdGVCbHVlIiwNCiAgICAgICJoZXgiOiAiIzZBNUFDRCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkRhcmtTbGF0ZUJsdWUiLA0KICAgICAgImhleCI6ICIjNDgzRDhCIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTWVkaXVtU2xhdGVCbHVlIiwNCiAgICAgICJoZXgiOiAiIzdCNjhFRSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkdyZWVuWWVsbG93IiwNCiAgICAgICJoZXgiOiAiI0FERkYyRiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkNoYXJ0cmV1c2UiLA0KICAgICAgImhleCI6ICIjN0ZGRjAwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTGF3bkdyZWVuIiwNCiAgICAgICJoZXgiOiAiIzdDRkMwMCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkxpbWUiLA0KICAgICAgImhleCI6ICIjMDBGRjAwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTGltZUdyZWVuIiwNCiAgICAgICJoZXgiOiAiIzMyQ0QzMiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlBhbGVHcmVlbiIsDQogICAgICAiaGV4IjogIiM5OEZCOTgiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJMaWdodEdyZWVuIiwNCiAgICAgICJoZXgiOiAiIzkwRUU5MCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIk1lZGl1bVNwcmluZ0dyZWVuIiwNCiAgICAgICJoZXgiOiAiIzAwRkE5QSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlNwcmluZ0dyZWVuIiwNCiAgICAgICJoZXgiOiAiIzAwRkY3RiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIk1lZGl1bVNlYUdyZWVuIiwNCiAgICAgICJoZXgiOiAiIzNDQjM3MSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlNlYUdyZWVuIiwNCiAgICAgICJoZXgiOiAiIzJFOEI1NyINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkZvcmVzdEdyZWVuIiwNCiAgICAgICJoZXgiOiAiIzIyOEIyMiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkdyZWVuIiwNCiAgICAgICJoZXgiOiAiIzAwODAwMCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkRhcmtHcmVlbiIsDQogICAgICAiaGV4IjogIiMwMDY0MDAiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJZZWxsb3dHcmVlbiIsDQogICAgICAiaGV4IjogIiM5QUNEMzIiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJPbGl2ZURyYWIiLA0KICAgICAgImhleCI6ICIjNkI4RTIzIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiT2xpdmUiLA0KICAgICAgImhleCI6ICIjODA4MDAwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiRGFya09saXZlR3JlZW4iLA0KICAgICAgImhleCI6ICIjNTU2QjJGIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTWVkaXVtQXF1YW1hcmluZSIsDQogICAgICAiaGV4IjogIiM2NkNEQUEiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJEYXJrU2VhR3JlZW4iLA0KICAgICAgImhleCI6ICIjOEZCQzhCIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTGlnaHRTZWFHcmVlbiIsDQogICAgICAiaGV4IjogIiMyMEIyQUEiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJEYXJrQ3lhbiIsDQogICAgICAiaGV4IjogIiMwMDhCOEIiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJUZWFsIiwNCiAgICAgICJoZXgiOiAiIzAwODA4MCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkFxdWEiLA0KICAgICAgImhleCI6ICIjMDBGRkZGIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiQ3lhbiIsDQogICAgICAiaGV4IjogIiMwMEZGRkYiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJMaWdodEN5YW4iLA0KICAgICAgImhleCI6ICIjRTBGRkZGIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiUGFsZVR1cnF1b2lzZSIsDQogICAgICAiaGV4IjogIiNBRkVFRUUiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJBcXVhbWFyaW5lIiwNCiAgICAgICJoZXgiOiAiIzdGRkZENCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlR1cnF1b2lzZSIsDQogICAgICAiaGV4IjogIiM0MEUwRDAiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJNZWRpdW1UdXJxdW9pc2UiLA0KICAgICAgImhleCI6ICIjNDhEMUNDIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiRGFya1R1cnF1b2lzZSIsDQogICAgICAiaGV4IjogIiMwMENFRDEiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJDYWRldEJsdWUiLA0KICAgICAgImhleCI6ICIjNUY5RUEwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiU3RlZWxCbHVlIiwNCiAgICAgICJoZXgiOiAiIzQ2ODJCNCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkxpZ2h0U3RlZWxCbHVlIiwNCiAgICAgICJoZXgiOiAiI0IwQzRERSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlBvd2RlckJsdWUiLA0KICAgICAgImhleCI6ICIjQjBFMEU2Ig0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTGlnaHRCbHVlIiwNCiAgICAgICJoZXgiOiAiI0FERDhFNiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlNreUJsdWUiLA0KICAgICAgImhleCI6ICIjODdDRUVCIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTGlnaHRTa3lCbHVlIiwNCiAgICAgICJoZXgiOiAiIzg3Q0VGQSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkRlZXBTa3lCbHVlIiwNCiAgICAgICJoZXgiOiAiIzAwQkZGRiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkRvZGdlckJsdWUiLA0KICAgICAgImhleCI6ICIjMUU5MEZGIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiQ29ybmZsb3dlckJsdWUiLA0KICAgICAgImhleCI6ICIjNjQ5NUVEIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTWVkaXVtU2xhdGVCbHVlIiwNCiAgICAgICJoZXgiOiAiIzdCNjhFRSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlJveWFsQmx1ZSIsDQogICAgICAiaGV4IjogIiM0MTY5RTEiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJCbHVlIiwNCiAgICAgICJoZXgiOiAiIzAwMDBGRiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIk1lZGl1bUJsdWUiLA0KICAgICAgImhleCI6ICIjMDAwMENEIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiRGFya0JsdWUiLA0KICAgICAgImhleCI6ICIjMDAwMDhCIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTmF2eSIsDQogICAgICAiaGV4IjogIiMwMDAwODAiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJNaWRuaWdodEJsdWUiLA0KICAgICAgImhleCI6ICIjMTkxOTcwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiQ29ybnNpbGsiLA0KICAgICAgImhleCI6ICIjRkZGOERDIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiQmxhbmNoZWRBbG1vbmQiLA0KICAgICAgImhleCI6ICIjRkZFQkNEIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiQmlzcXVlIiwNCiAgICAgICJoZXgiOiAiI0ZGRTRDNCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIk5hdmFqb1doaXRlIiwNCiAgICAgICJoZXgiOiAiI0ZGREVBRCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIldoZWF0IiwNCiAgICAgICJoZXgiOiAiI0Y1REVCMyINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkJ1cmx5V29vZCIsDQogICAgICAiaGV4IjogIiNERUI4ODciDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJUYW4iLA0KICAgICAgImhleCI6ICIjRDJCNDhDIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiUm9zeUJyb3duIiwNCiAgICAgICJoZXgiOiAiI0JDOEY4RiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlNhbmR5QnJvd24iLA0KICAgICAgImhleCI6ICIjRjRBNDYwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiR29sZGVucm9kIiwNCiAgICAgICJoZXgiOiAiI0RBQTUyMCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkRhcmtHb2xkZW5yb2QiLA0KICAgICAgImhleCI6ICIjQjg4NjBCIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiUGVydSIsDQogICAgICAiaGV4IjogIiNDRDg1M0YiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJDaG9jb2xhdGUiLA0KICAgICAgImhleCI6ICIjRDI2OTFFIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiU2FkZGxlQnJvd24iLA0KICAgICAgImhleCI6ICIjOEI0NTEzIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiU2llbm5hIiwNCiAgICAgICJoZXgiOiAiI0EwNTIyRCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkJyb3duIiwNCiAgICAgICJoZXgiOiAiI0E1MkEyQSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIk1hcm9vbiIsDQogICAgICAiaGV4IjogIiM4MDAwMDAiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJXaGl0ZSIsDQogICAgICAiaGV4IjogIiNGRkZGRkYiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJTbm93IiwNCiAgICAgICJoZXgiOiAiI0ZGRkFGQSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkhvbmV5RGV3IiwNCiAgICAgICJoZXgiOiAiI0YwRkZGMCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIk1pbnRDcmVhbSIsDQogICAgICAiaGV4IjogIiNGNUZGRkEiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJBenVyZSIsDQogICAgICAiaGV4IjogIiNGMEZGRkYiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJBbGljZUJsdWUiLA0KICAgICAgImhleCI6ICIjRjBGOEZGIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiR2hvc3RXaGl0ZSIsDQogICAgICAiaGV4IjogIiNGOEY4RkYiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJXaGl0ZVNtb2tlIiwNCiAgICAgICJoZXgiOiAiI0Y1RjVGNSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIlNlYVNoZWxsIiwNCiAgICAgICJoZXgiOiAiI0ZGRjVFRSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkJlaWdlIiwNCiAgICAgICJoZXgiOiAiI0Y1RjVEQyINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIk9sZExhY2UiLA0KICAgICAgImhleCI6ICIjRkRGNUU2Ig0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiRmxvcmFsV2hpdGUiLA0KICAgICAgImhleCI6ICIjRkZGQUYwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiSXZvcnkiLA0KICAgICAgImhleCI6ICIjRkZGRkYwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiQW50aXF1ZVdoaXRlIiwNCiAgICAgICJoZXgiOiAiI0ZBRUJENyINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkxpbmVuIiwNCiAgICAgICJoZXgiOiAiI0ZBRjBFNiINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkxhdmVuZGVyQmx1c2giLA0KICAgICAgImhleCI6ICIjRkZGMEY1Ig0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiTWlzdHlSb3NlIiwNCiAgICAgICJoZXgiOiAiI0ZGRTRFMSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkdhaW5zYm9ybyIsDQogICAgICAiaGV4IjogIiNEQ0RDREMiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJMaWdodEdyYXkiLA0KICAgICAgImhleCI6ICIjRDNEM0QzIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiU2lsdmVyIiwNCiAgICAgICJoZXgiOiAiI0MwQzBDMCINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkRhcmtHcmF5IiwNCiAgICAgICJoZXgiOiAiI0E5QTlBOSINCiAgICB9LA0KICAgIHsNCiAgICAgICJuYW1lIjogIkdyYXkiLA0KICAgICAgImhleCI6ICIjODA4MDgwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiRGltR3JheSIsDQogICAgICAiaGV4IjogIiM2OTY5NjkiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJMaWdodFNsYXRlR3JheSIsDQogICAgICAiaGV4IjogIiM3Nzg4OTkiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJTbGF0ZUdyYXkiLA0KICAgICAgImhleCI6ICIjNzA4MDkwIg0KICAgIH0sDQogICAgew0KICAgICAgIm5hbWUiOiAiRGFya1NsYXRlR3JheSIsDQogICAgICAiaGV4IjogIiMyRjRGNEYiDQogICAgfSwNCiAgICB7DQogICAgICAibmFtZSI6ICJCbGFjayIsDQogICAgICAiaGV4IjogIiMwMDAwMDAiDQogICAgfQ0KICBdOw=="></script>
    <link href="data:text/css;base64,Ym9keSB7DQogICAgZm9udC1mYW1pbHk6ICdTZWdvZSBVSScsIFRhaG9tYSwgR2VuZXZhLCBWZXJkYW5hLCBzYW5zLXNlcmlmOw0KfQ0KaDIgew0KICAgIG1hcmdpbi1ib3R0b206IDZweDsNCiAgICBiYWNrZ3JvdW5kOiB1cmwoZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFDQUFBQUFnQ0FNQUFBQkVwSXJHQUFBQWJGQk1WRVZIY0V6L3pBQm1BSm1aTS8vLy96UC9tVE9JQUFBQUFBQjNkM2ZkQUFEL1pnQ1ovOHdBWnY5bXpQOEFBSm4vWm1ZelptWlZWVlhNQUFBem1mOW1NOHhtTTJiLy8vK1paak9aQUFBek04ei9BQUQvek13QTNRQm16SmtBTS85RVJFVC96RE5tQUFBQS93QUFxZ0RZdlErUEFBQUFBWFJTVGxNQVFPYllaZ0FBQVVaSlJFRlVPTXQ5MGUxMmdqQVFCRkJBWkFDcFlNVlk2N2Q5LzNmc3pBWWhzWmI5SVpLNVo1TXNTUklYa013V2NqZExrTE5taU9WNWp1VS9CSURQV2U4SVZxc1ZpZVVTZUpNYjhmbGlzWWpKTTYrK1JaU0xCUGtINFBOS3hPY1pncHpGYlMydjBCakpKbUQ1S05Dd2dDd0V6aWsvUFU0a2xqZk5HaUhZYnAwRDA4ZUpQeWJXcjJBTGg3WWwwcWpBbkFBeCtNR1JZcGkyQUljV0FWU2Z4eFpPZVcyQWorQXJDQlFGWitSY1hnc0FkUUQ2WGcyK0N1ejMrMlV0d052RW9MY0dJK0FiYWtRZHJNRUlUQi93UElCS1N4YytCWUE3M3c0ZThQWXRicjdCQmJzZEQ4Y0ozTlhBZ1BLamdCb0k3SHFOc0VBcVVKYUozYjRkVGdBRCtrcElDWmlYaVJlV3AxekVBT3kvNVM5Z0EvUytRVHJrSmlxZElEV3dJVUdISUIrQjdVdHc3anFDS1RmQkRmeEVuaURNSnlBeWdEQ1hLTFRDdWw2Qjg1OWNyY3VwRVBYL0Jid1VISFByRGZqbEFBQUFBRWxGVGtTdVFtQ0MpIG5vLXJlcGVhdDsNCiAgICBwYWRkaW5nLWxlZnQ6IDM4cHg7DQp9DQppbnB1dFt0eXBlPXRleHRdIHsNCiAgICBmb250LXNpemU6IDEycHQ7DQogICAgbWFyZ2luLXJpZ2h0OiA2cHg7DQp9DQoubGlzdCB7DQogICAgZGlzcGxheTogZmxleDsNCiAgICBmbGV4LXdyYXA6IHdyYXA7DQogICAgbWFyZ2luLXRvcDogMTJweDsNCn0NCi5jb2xvci10YWcgew0KICAgIHdpZHRoOiAyMjBweDsNCiAgICBib3JkZXI6IDFweCBzb2xpZCAjMjIyOw0KICAgIG1hcmdpbi1yaWdodDogM3B4Ow0KICAgIG1hcmdpbi1ib3R0b206IDNweDsNCiAgICBwYWRkaW5nOiA2cHg7DQogICAgZm9udC1zaXplOiA5LjVwdDsNCiAgICBmb250LXdlaWdodDogYm9sZDsNCiAgICBmb250LWZhbWlseTogJ0NvdXJpZXIgTmV3JywgQ291cmllciwgbW9ub3NwYWNlOw0KfQ==" rel="stylesheet" />
</head>
​
<body>
    <div id="app">
        <h2>HTML Color Names</h2>
        <div>
            <input type="text" v-model.lazy="keywd" v-debounce="300" placeholder="Keyword"> 
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJ1BMVEVHcEyZmcx3d3eZmf////8AAADMzP9mZpkiIiLAwMARERGZmZmgoKSL9kMJAAAAAXRSTlMAQObYZgAAAPhJREFUKM99kTFOw0AQRdPsAUbB1NFWtGiJcgBmFNFlrR0gok3MASzhnjI1FDkAR+AEXIz5HmM5LvjVztfb0f+7i8W/Crq7NJ5vvi6B95POAZ0DOgfqORAnhqoBqwnw8TACQU17Pn8OgBY2yf787YCyS14cCHbElcLiQGHNZKoK7xwQclUsDmS6Tqbbn8LIWYSWh9eu61pDsNWMzRuIbWtGhLFsMaf7zdoNfsJ4xynZjriyWJJcaxYY2XL0syXLvVExI6gVEMKOTGOXPBjkbVEAOQJRc8QVhI+om6lpmsMV2tR93TAaDtgDDUZV/z25PsLQOk4+3TTwv2s7U9ACrqciAAAAAElFTkSuQmCC" alt="Search" width="24" height="24" x-sch-res >
        </div>
        <div class="list">
            <div v-for="color in filteredColors" class="color-tag" :style="autoColor(color)">{{color.hex}} {{color.name}}</div>
        </div>
    </div>
    <script>
        var debounceDirective = {
            beforeMount(el, binding) {
                let hnd;
                el.addEventListener('input', () => {
                    clearTimeout(hnd);
                    hnd = setTimeout(() => el.dispatchEvent(new Event('change'))
                        , binding.value || 500);
                });
            }
        };
    </script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    colors: colors,
                    keywd: ''
                }
            },
            methods: {
                autoColor(color) {
                    const r = parseInt(color.hex.substring(1, 3), 16);
                    const g = parseInt(color.hex.substring(3, 5), 16);
                    const b = parseInt(color.hex.substring(5, 7), 16);
                    const complementary = (r * 0.299 + g * 0.587 + b * 0.114) > 186 ? '#000000' : '#ffffff';
                    return {
                        'background-color': color.hex,
                        'color': complementary
                    }
                }
            },
            computed: {
                filteredColors() {
                    const keywd = this.keywd.trim().toLowerCase();
                    return this.colors.filter(color => {
                        return color.name.toLowerCase().includes(keywd) ||
                            color.hex.toLowerCase().includes(keywd);
                    })
                }
            }
        });
        app.directive('debounce', debounceDirective);
        app.mount('#app');
    </script>    
</body>
​
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers