Skip to content

Commit 9d2e582

Browse files
nakul-pynakul-py
committed
Adding copy to clipboard button in more files
1 parent e2a76e2 commit 9d2e582

15 files changed

+2765
-15
lines changed

‎examples/All-You-Need-is-Love-example.html‎

Lines changed: 181 additions & 1 deletion
Large diffs are not rendered by default.

‎examples/Andantino-Giuliani-Op50-No1-scalar-interval.html‎

Lines changed: 181 additions & 1 deletion
Large diffs are not rendered by default.

‎examples/Arpeggios-extended-to-13th.html‎

Lines changed: 175 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,175 @@
1-
<!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":1591896831249,"collapsed":false,"xcor":0,"ycor":0,"heading":0,"color":-10,"shade":50,"pensize":5,"grey":100}],480,90,[null,56,null]],[1,"settimbre",494,258,[13,2,36,3]],[2,["voicename",{"value":"saxophone"}],645,258,[1]],[3,"hidden",494,1203,[1,null]],[4,["newnote",{"collapsed":false}],550,513,[32,5,8,12]],[5,"divide",652,513,[4,6,7]],[6,["number",{"value":1}],738,513,[5]],[7,["number",{"value":8}],738,545,[5]],[8,"vspace",564,545,[4,9]],[9,"nthmodalpitch",564,577,[8,70,11,null]],[10,["number",{"value":0}],600,226,[13]],[11,["number",{"value":5}],694,609,[9]],[12,"hidden",550,671,[4,34]],[13,["storein2",{"value":"box"}],494,226,[61,10,1]],[14,["namedbox",{"value":"box"}],596,1078,[73]],[15,["newnote",{"collapsed":true}],564,703,[34,16,19,22]],[16,"divide",656,422,[15,17,18]],[17,["number",{"value":1}],742,422,[16]],[18,["number",{"value":8}],742,454,[16]],[19,"vspace",568,454,[15,20]],[20,"steppitch",568,486,[19,21,null]],[21,["number",{"value":2}],704,486,[20]],[22,"hidden",564,735,[15,null]],[23,"newswing2",536,418,[72,24,29,32,33]],[24,"hspace",638,418,[23,25]],[25,"hspace",709,418,[24,26]],[26,"divide",780,418,[25,27,28]],[27,["number",{"value":1}],866,418,[26]],[28,["number",{"value":24}],866,450,[26]],[29,"divide",638,450,[23,30,31]],[30,["number",{"value":1}],724,450,[29]],[31,["number",{"value":8}],724,482,[29]],[32,"vspace",550,481,[23,4]],[33,"hidden",536,891,[23,48]],[34,"repeat",550,671,[12,35,15,38]],[35,["number",{"value":6}],652,671,[34]],[36,"repeat",508,290,[1,62,63,null]],[37,["namedbox",{"value":"box"}],801,322,[64]],[38,"repeat",550,766,[34,39,40,null]],[39,["number",{"value":5}],652,766,[38]],[40,["newnote",{"collapsed":true}],564,798,[38,41,44,47]],[41,"divide",656,517,[40,42,43]],[42,["number",{"value":1}],742,517,[41]],[43,["number",{"value":8}],742,549,[41]],[44,"vspace",568,549,[40,45]],[45,"steppitch",568,581,[44,46,null]],[46,["number",{"value":-2}],704,581,[45]],[47,"hidden",564,830,[40,null]],[48,["newnote",{"collapsed":false}],536,891,[33,49,52,55]],[49,"divide",638,891,[48,50,51]],[50,["number",{"value":1}],724,891,[49]],[51,["number",{"value":2}],724,923,[49]],[52,"vspace",550,923,[48,53]],[53,"nthmodalpitch",550,955,[52,71,54,null]],[54,["number",{"value":5}],680,987,[53]],[55,"hidden",536,1049,[48,null]],[56,"setmasterbpm2",494,131,[0,57,58,61]],[57,["number",{"value":144}],684,131,[56]],[58,"divide",684,163,[56,59,60]],[59,["number",{"value":1}],770,163,[58]],[60,["number",{"value":4}],770,195,[58]],[61,"vspace",494,194,[56,13]],[62,["number",{"value":7}],610,290,[36]],[63,"settransposition",522,322,[36,64,68,69]],[64,"plus",715,322,[63,37,66]],[65,["number",{"value":0}],887,354,[66]],[66,"multiply",801,354,[64,65,67]],[67,["number",{"value":12}],887,386,[66]],[68,"vspace",536,354,[63,72]],[69,"hidden",522,1078,[63,73]],[70,["number",{"value":0}],694,577,[9]],[71,["number",{"value":0}],680,955,[53]],[72,"vspace",536,386,[68,23]],[73,"increment",522,1078,[69,14,74,null]],[74,["number",{"value":-2}],596,1110,[73]]]</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>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="description" content="No description provided" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
8+
<title>My Project</title>
9+
<meta property="og:site_name" content="Music Blocks" />
10+
<meta property="og:type" content="website" />
11+
<meta property="og:title" content="Music Blocks Project - My Project" />
12+
<meta property="og:description" content="No description provided" />
13+
<style>
14+
body {
15+
background-color: #dbf0fb;
16+
}
17+
#main {
18+
background-color: white;
19+
padding: 5%;
20+
position: fixed;
21+
width: 80vw;
22+
height: max-content;
23+
margin: auto;
24+
top: 0;
25+
left: 0;
26+
bottom: 0;
27+
right: 0;
28+
display: flex;
29+
flex-direction: column;
30+
justify-content: center;
31+
text-align: center;
32+
color: #424242;
33+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
34+
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
35+
}
36+
h3 {
37+
font-weight: 400;
38+
font-size: 36px;
39+
margin-top: 10px;
40+
}
41+
hr {
42+
border-top: 0px solid #ccc;
43+
margin: 1em;
44+
}
45+
.btn {
46+
display: inline-block;
47+
margin-left: 10px;
48+
cursor: pointer;
49+
font-size: 14px;
50+
border-radius: 12px;
51+
border: round;
52+
border-color: #1678ad;
53+
padding: 3px 5px;
54+
line-height: 20px;
55+
color: #181818;
56+
}
57+
.btn:hover {
58+
transition: 0.4s;
59+
-webkit-transition: 0.3s;
60+
-moz-transition: 0.3s;
61+
background-color: #3eb7e7;
62+
}
63+
.code {
64+
word-break: break-all;
65+
height: 15vh;
66+
background: #f6f8fa;
67+
color: #494949;
68+
text-align: justify;
69+
margin-right: 10vw;
70+
margin-left: 10vw;
71+
padding: 16px;
72+
overflow: auto;
73+
line-height: 1.45;
74+
background-color: #f6f8fa;
75+
border-radius: 3px;
76+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
77+
}
78+
.image {
79+
border-radius: 2px 2px 0 0;
80+
position: relative;
81+
background-color: #96d3f3;
82+
}
83+
.image-div {
84+
margin-bottom: 10px;
85+
}
86+
.moreinfo-div {
87+
margin-top: 20px;
88+
}
89+
h4 {
90+
font-weight: 500;
91+
font-size: 1.4em;
92+
margin-top: 10px;
93+
margin-bottom: 10px;
94+
}
95+
.tbcode {
96+
margin-bottom: 10px;
97+
}
98+
</style>
99+
</head>
100+
<body>
101+
<div id="main">
102+
<div class="image-div"><img class="image" id="project-image" src="" /></div>
103+
<h3 id="title">Music Blocks Project - My Project</h3>
104+
<p>No description provided</p>
105+
<hr />
106+
<div>
107+
<div style="color: #9e9e9e;">
108+
<p>
109+
This project was created in Music Blocks (<a
110+
href="https://musicblocks.sugarlabs.org"
111+
target="_blank"
112+
>https://musicblocks.sugarlabs.org</a
113+
>). Music Blocks is a collection of tools for exploring fundamental musical concepts in
114+
a fun way. Music Blocks is a Free/Libre Software application. The source code can be
115+
accessed at
116+
<a href="https://github.com/sugarlabs/musicblocks" target="_blank"
117+
>https://github.com/sugarlabs/musicblocks</a
118+
>. For more information, please consult the
119+
<a
120+
href="https://github.com/sugarlabs/musicblocks/tree/master/guide/README.md"
121+
target="_blank"
122+
>Music Blocks Guide</a
123+
>.
124+
</p>
125+
<p>
126+
To run this project, open Music Blocks in a web browser and drag and drop this file into
127+
the browser window. Alternatively, open the file in Music Blocks using the Load project
128+
button.
129+
</p>
130+
</div>
131+
<div class="moreinfo-div">
132+
<div class="tbcode">
133+
<h4>Project Code</h4>
134+
This code stores data about the blocks in a project.
135+
<a href="javascript:toggle();" id="showhide">Show</a>
136+
<button class="btn" onclick="copyCode()">Copy to Clipboard</button>
137+
</div>
138+
<div class="code">
139+
[[0,["start",{"id":1591896831249,"collapsed":false,"xcor":0,"ycor":0,"heading":0,"color":-10,"shade":50,"pensize":5,"grey":100}],480,90,[null,56,null]],[1,"settimbre",494,258,[13,2,36,3]],[2,["voicename",{"value":"saxophone"}],645,258,[1]],[3,"hidden",494,1203,[1,null]],[4,["newnote",{"collapsed":false}],550,513,[32,5,8,12]],[5,"divide",652,513,[4,6,7]],[6,["number",{"value":1}],738,513,[5]],[7,["number",{"value":8}],738,545,[5]],[8,"vspace",564,545,[4,9]],[9,"nthmodalpitch",564,577,[8,70,11,null]],[10,["number",{"value":0}],600,226,[13]],[11,["number",{"value":5}],694,609,[9]],[12,"hidden",550,671,[4,34]],[13,["storein2",{"value":"box"}],494,226,[61,10,1]],[14,["namedbox",{"value":"box"}],596,1078,[73]],[15,["newnote",{"collapsed":true}],564,703,[34,16,19,22]],[16,"divide",656,422,[15,17,18]],[17,["number",{"value":1}],742,422,[16]],[18,["number",{"value":8}],742,454,[16]],[19,"vspace",568,454,[15,20]],[20,"steppitch",568,486,[19,21,null]],[21,["number",{"value":2}],704,486,[20]],[22,"hidden",564,735,[15,null]],[23,"newswing2",536,418,[72,24,29,32,33]],[24,"hspace",638,418,[23,25]],[25,"hspace",709,418,[24,26]],[26,"divide",780,418,[25,27,28]],[27,["number",{"value":1}],866,418,[26]],[28,["number",{"value":24}],866,450,[26]],[29,"divide",638,450,[23,30,31]],[30,["number",{"value":1}],724,450,[29]],[31,["number",{"value":8}],724,482,[29]],[32,"vspace",550,481,[23,4]],[33,"hidden",536,891,[23,48]],[34,"repeat",550,671,[12,35,15,38]],[35,["number",{"value":6}],652,671,[34]],[36,"repeat",508,290,[1,62,63,null]],[37,["namedbox",{"value":"box"}],801,322,[64]],[38,"repeat",550,766,[34,39,40,null]],[39,["number",{"value":5}],652,766,[38]],[40,["newnote",{"collapsed":true}],564,798,[38,41,44,47]],[41,"divide",656,517,[40,42,43]],[42,["number",{"value":1}],742,517,[41]],[43,["number",{"value":8}],742,549,[41]],[44,"vspace",568,549,[40,45]],[45,"steppitch",568,581,[44,46,null]],[46,["number",{"value":-2}],704,581,[45]],[47,"hidden",564,830,[40,null]],[48,["newnote",{"collapsed":false}],536,891,[33,49,52,55]],[49,"divide",638,891,[48,50,51]],[50,["number",{"value":1}],724,891,[49]],[51,["number",{"value":2}],724,923,[49]],[52,"vspace",550,923,[48,53]],[53,"nthmodalpitch",550,955,[52,71,54,null]],[54,["number",{"value":5}],680,987,[53]],[55,"hidden",536,1049,[48,null]],[56,"setmasterbpm2",494,131,[0,57,58,61]],[57,["number",{"value":144}],684,131,[56]],[58,"divide",684,163,[56,59,60]],[59,["number",{"value":1}],770,163,[58]],[60,["number",{"value":4}],770,195,[58]],[61,"vspace",494,194,[56,13]],[62,["number",{"value":7}],610,290,[36]],[63,"settransposition",522,322,[36,64,68,69]],[64,"plus",715,322,[63,37,66]],[65,["number",{"value":0}],887,354,[66]],[66,"multiply",801,354,[64,65,67]],[67,["number",{"value":12}],887,386,[66]],[68,"vspace",536,354,[63,72]],[69,"hidden",522,1078,[63,73]],[70,["number",{"value":0}],694,577,[9]],[71,["number",{"value":0}],680,955,[53]],[72,"vspace",536,386,[68,23]],[73,"increment",522,1078,[69,14,74,null]],[74,["number",{"value":-2}],596,1110,[73]]]
140+
</div>
141+
</div>
142+
</div>
143+
</div>
144+
<script type="text/javascript">
145+
function copyCode() {
146+
const codeBlock = document.getElementsByClassName("code")[0];
147+
const text = codeBlock.innerText || codeBlock.textContent;
148+
navigator.clipboard.writeText(text).then(
149+
() => {
150+
alert("Copied JSON to clipboard!");
151+
},
152+
() => {
153+
alert("Failed to copy.");
154+
}
155+
);
156+
}
157+
function toggle() {
158+
if (document.getElementsByClassName("code")[0].style.display == "none") {
159+
document.getElementsByClassName("code")[0].style.display = "flex";
160+
document.getElementById("showhide").textContent = "Hide";
161+
} else {
162+
document.getElementsByClassName("code")[0].style.display = "none";
163+
document.getElementById("showhide").textContent = "Show";
164+
}
165+
}
166+
var name = decodeURIComponent(window.location.pathname.split("/").pop().slice(0, -5));
167+
var prefix = "Music Blocks Project - ";
168+
var title = prefix + name;
169+
document.querySelector('meta[property="og:title"]').content = title;
170+
document.title = name;
171+
document.getElementById("title").textContent = title;
172+
document.getElementsByClassName("code")[0].style.display = "none";
173+
</script>
174+
</body>
175+
</html>

‎examples/Bach-tonal-inversion-contrapunctus-XI-a.html‎

Lines changed: 176 additions & 1 deletion
Large diffs are not rendered by default.

‎examples/Bach-tonal-inversion-contrapunctus-XI-b.html‎

Lines changed: 175 additions & 1 deletion
Large diffs are not rendered by default.

‎examples/Bartok-fib-color.html‎

Lines changed: 181 additions & 1 deletion
Large diffs are not rendered by default.

‎examples/CrosswordPuzzle.html‎

Lines changed: 283 additions & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)