examples/polygons.html

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="No description provided"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <title>My Project</title> <meta property="og:site_name" content="Music Blocks"/> <meta property="og:type" content="website"/> <meta property="og:title" content="Music Blocks Project - My Project"/> <meta property="og:description" content="No description provided"/> <style>body{background-color: #dbf0fb;}#main{background-color: white; padding: 5%; position: fixed; width: 80vw; height: max-content; margin: auto; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #424242; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); font-family: "Roboto", "Helvetica","Arial",sans-serif;}h3{font-weight: 400; font-size: 36px; margin-top: 10px;}hr{border-top: 0px solid #ccc; margin: 1em;}.btn{border: solid; border-color: #96D3F3; padding: 5px 10px; line-height: 50px; color: #0a3e58;}.btn:hover{transition: 0.4s; -webkit-transition: 0.3s; -moz-transition: 0.3s; background-color: #96D3F3;}.code{word-break: break-all; height: 15vh; background: #f6f8fa; color: #494949; text-align: justify; margin-right: 10vw; margin-left: 10vw; padding: 16px; overflow: auto; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;}.image{border-radius: 2px 2px 0 0; position: relative; background-color: #96D3F3;}.image-div{margin-bottom: 10px;}.moreinfo-div{margin-top: 20px;}h4{font-weight: 500; font-size: 1.4em; margin-top: 10px; margin-bottom: 10px;}.tbcode{margin-bottom: 10px;}</style></head><body> <div id="main"> <div class="image-div"><img class="image" id="project-image" src=""></div><h3 id="title">Music Blocks Project - My Project</h3> <p>No description provided</p><hr> <div> <div style="color: #9E9E9E"><p>This project was created in Music Blocks (<a href="https://musicblocks.sugarlabs.org" target="_blank">https://musicblocks.sugarlabs.org</a>). Music Blocks is a collection of tools for exploring fundamental musical concepts in a fun way. Music Blocks is a Free/Libre Software application. The source code can be accessed at <a href="https://github.com/sugarlabs/musicblocks" target="_blank">https://github.com/sugarlabs/musicblocks</a>. For more information, please consult the <a href="https://github.com/sugarlabs/musicblocks/tree/master/guide/README.md" target="_blank">Music Blocks Guide</a>.</p><p>To run this project, open Music Blocks in a web browser and drag and drop this file into the browser window. Alternatively, open the file in Music Blocks using the Load project button.</p></div><div class="moreinfo-div"> <div class="tbcode"><h4>Project Code</h4>This code stores data about the blocks in a project. <a href="javascript:toggle();" id="showhide">Show</a></div> <div class="code">[[0,["start",{"id":1623637355181,"collapsed":false,"xcor":-4.497735517361434e-12,"ycor":-7.105427357601002e-15,"heading":0,"color":50,"shade":60,"pensize":5,"grey":200}],113,113,[null,54,null]],[1,["action",{"collapsed":false}],338,113,[null,2,3,null]],[2,["text",{"value":"action"}],471,122,[1]],[3,"hidden",352,154,[1,48]],[4,"forward",394,345,[20,5,null]],[5,["number",{"value":100}],480,345,[4]],[6,"right",394,534,[29,9,10]],[7,["number",{"value":360}],554,534,[9]],[8,["namedarg",{"value":"1"}],554,566,[9]],[9,"divide",468,534,[6,7,8]],[10,"vspace",394,566,[6,null]],[11,"repeat",366,186,[48,13,15,null]],[12,["number",{"value":7}],138,645,[46]],[13,["namedarg",{"value":"1"}],472,186,[11]],[14,["nameddoArg",{"value":"action"}],127,186,[54,47,null]],[15,["newnote",{"collapsed":false}],380,218,[11,16,19,23]],[16,"divide",482,218,[15,17,18]],[17,["number",{"value":1}],568,218,[16]],[18,["number",{"value":16}],568,250,[16]],[19,"vspace",394,250,[15,20]],[20,"pitch",394,282,[19,21,22,4]],[21,["solfege",{"value":"sol"}],468,282,[20]],[22,["number",{"value":4}],468,314,[20]],[23,"hidden",380,407,[15,24]],[24,["newnote",{"collapsed":false}],380,407,[23,25,28,32]],[25,"divide",482,407,[24,26,27]],[26,["number",{"value":1}],568,407,[25]],[27,["number",{"value":32}],568,439,[25]],[28,"vspace",394,439,[24,29]],[29,"pitch",394,471,[28,30,31,6]],[30,["solfege",{"value":"la"}],468,471,[29]],[31,["number",{"value":4}],468,503,[29]],[32,"hidden",380,628,[24,null]],[33,["start",{"id":1623637355180,"collapsed":false,"xcor":0,"ycor":-9.184850993605149e-15,"heading":0,"color":10,"shade":60,"pensize":5,"grey":185.71428571428572}],731,554,[null,52,null]],[34,["start",{"id":1623637355183,"collapsed":false,"xcor":-3.552713678800501e-14,"ycor":7.105427357601002e-15,"heading":0,"color":30,"shade":90,"pensize":5,"grey":157.14285714285714}],726,113,[null,56,null]],[35,["start",{"id":1623637355191,"collapsed":false,"xcor":-5.684341886080802e-14,"ycor":1.2434497875801753e-14,"heading":0,"color":20,"shade":80,"pensize":5,"grey":157.14285714285714}],972,113,[null,58,null]],[36,["start",{"id":1623637355178,"collapsed":false,"xcor":-2.1316282072803006e-14,"ycor":-2.1316282072803006e-14,"heading":0,"color":0,"shade":60,"pensize":5,"grey":171.42857142857142}],113,330,[null,50,null]],[37,["start",{"id":1623637355154,"collapsed":false,"xcor":1.1013412404281553e-12,"ycor":1.2398970739013748e-12,"heading":1.1368683772161603e-12,"color":40,"shade":80,"pensize":5,"grey":157.14285714285714}],107,540,[null,60,null]],[38,["nameddoArg",{"value":"action"}],127,403,[50,39,null]],[39,["number",{"value":3}],144,435,[38]],[40,["nameddoArg",{"value":"action"}],745,627,[52,41,null]],[41,["number",{"value":4}],762,659,[40]],[42,["nameddoArg",{"value":"action"}],740,186,[56,43,null]],[43,["number",{"value":6}],757,218,[42]],[44,["nameddoArg",{"value":"action"}],986,186,[58,45,null]],[45,["number",{"value":5}],1003,218,[44]],[46,["nameddoArg",{"value":"action"}],121,613,[60,12,null]],[47,["number",{"value":8}],144,218,[14]],[48,"repeat",352,154,[3,49,11,null]],[49,["number",{"value":4}],458,154,[48]],[50,"setcolor",127,371,[36,51,38]],[51,["number",{"value":0}],220,371,[50]],[52,"setcolor",745,595,[33,53,40]],[53,["number",{"value":10}],838,595,[52]],[54,"setcolor",127,154,[0,57,14]],[55,["number",{"value":40}],214,581,[60]],[56,"setcolor",740,154,[34,61,42]],[57,["number",{"value":50}],220,154,[54]],[58,"setcolor",986,154,[35,59,44]],[59,["number",{"value":20}],1079,154,[58]],[60,"setcolor",121,581,[37,55,46]],[61,["number",{"value":30}],833,154,[56]],[62,["start",{"id":1623637355183,"collapsed":false,"xcor":22.323779409793076,"ycor":67.36481776669089,"heading":0,"color":60,"shade":60,"pensize":5,"grey":171.42857142857142}],731,330,[null,65,null]],[63,["nameddoArg",{"value":"action"}],745,403,[65,64,null]],[64,["number",{"value":9}],762,435,[63]],[65,"setcolor",745,371,[62,66,63]],[66,["number",{"value":60}],838,371,[65]]]</div></div></div></div><script type="text/javascript">function toggle(){if (document.getElementsByClassName("code")[0].style.display=="none"){document.getElementsByClassName("code")[0].style.display="flex";document.getElementById("showhide").textContent = "Hide";} else {document.getElementsByClassName("code")[0].style.display="none";document.getElementById("showhide").textContent = "Show";}} var name=decodeURIComponent(window.location.pathname.split("/").pop().slice(0, -5)); var prefix="Music Blocks Project - "; var title=prefix+name; document.querySelector('meta[property="og:title"]').content=title; document.title=name; document.getElementById("title").textContent=title; document.getElementsByClassName("code")[0].style.display = "none";</script></body></html>