@robotical/martyblocksjr 1.0.0 → 1.0.3

package/editions/free/src/css/start.css

@@ -0,0 +1,391 @@
+html, body, {
+    color: #4c4d4f;
+    direction: ltr;
+    background: #35A8E0;
+    font: 81.25% Roboto, arial, sans-serif;
+    -webkit-user-select: none;
+    height: 100%;
+}
+
+div.frame {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background: #35A8E0;
+    overflow: hidden;
+    -webkit-overflow-scrolling: none;
+}
+
+*.catlogo {
+    position: absolute;
+    top: 127px;
+    left: 284px;
+    margin: 0px;
+    width: 468px;
+    height: 300px;
+    z-index: 10;
+    background: url('../assets/start/catlogo.png');
+}
+
+*.credits {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    height: 45%;
+    background: url('../assets/start/bottom.png');
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    z-index: 20;
+}
+
+*.creditsText {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    height: 45%;
+    background: url('../assets/start/creditsText.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: auto 45%;
+    z-index: 21;
+}
+
+.credits.hide, .creditsText.hide {display: none;}
+.credits.show, .creditsText.show {display: block;}
+
+*.catface {
+    position: absolute;
+    top: 10%;
+    margin: 0px;
+    height: 35%;
+    z-index: 5;
+    background: url('../assets/start/MartyFull.svg');
+    transform: rotate(13deg);
+    width: 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+}
+
+*.jrlogo {
+    position: absolute;
+    top: 27%;
+    width: 100%;
+    margin: 0px;
+    height: 30%;
+    z-index: 10;
+    background: url('../assets/start/MartyBlocksJr_BasedOnScratchJr.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+}
+
+*.purple {
+    position: absolute;
+    top: 7%;
+    left: 15%;
+    margin: 0px;
+    width: 100%;
+    height: 26%;
+    background: url('../assets/start/FunkyPurple.svg');
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+}
+
+.purple.hide {display: none;}
+.purple.show {display: block;}
+
+*.red {
+    position: absolute;
+    top: -18%;
+    left: 65%;
+    margin: 0px;
+    width: 100%;
+    height: 54%;
+    z-index: 2;
+    background: url('../assets/start/FunkyRed.svg');
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+}
+
+.red.hide {display: none;}
+.red.show {display: block;}
+
+*.blue {
+    position: absolute;
+    top: 46%;
+    left: 87%;
+    margin: 0px;
+    width: 100%;
+    height: 23%;
+    background: url('../assets/start/FunkyBlue.svg');
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    z-index: 21;
+}
+
+.blue.hide {display: none;}
+.blue.show {display: block;}
+
+.gettings {
+    position: absolute;
+    top: 65%;
+    left: 59%;
+    margin: 0px;
+    /* width: 17%; */
+    /* height: 22%; */
+    width: 0%;
+    height: 0%;
+    /* background: url('../assets/start/helpOn.svg'); */
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    background-position-x: center;
+    -webkit-tap-highlight-color: transparent;
+    z-index: 1000;
+}
+
+.gettings:active {
+    background: url('../assets/start/helpOff.svg');
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    background-position-x: center;
+}
+
+.gettings.hide {display: none;}
+.gettings.show {display: block;}
+
+.gear.hide {display: none;}
+.gear.show {display: block;}
+
+.gear {
+    position: absolute;
+    top: 10px;
+    right: 25px;
+    background: url('../assets/lobby/gearOff.svg');
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    background-position-x: center;
+    -webkit-tap-highlight-color: transparent;
+    z-index: 1000;
+    width: 60px;
+    height: 60px;
+}
+
+.startcode {
+    position: absolute;
+    top: 65%;
+    left: 42%;
+    /* left: 24%; */
+    margin: 0px;
+    width: 17%;
+    height: 22%;
+    background: url('../assets/start/houseOn.svg');
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    background-position-x: center;
+    -webkit-tap-highlight-color: transparent;
+    z-index: 1000;
+}
+
+.startcode.hide {display: none;}
+.startcode.show {display: block;}
+
+.startcode:active {
+    background: url('../assets/start/houseOff.svg');
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    background-position-x: center;
+}
+
+.rays.hide, .catface.hide, .jrlogo.hide, .frame.hide {display: none;}
+
+.rays {
+    position: absolute;
+    top: -48%;
+    width: 100%;
+    margin: 0px;
+    height: 160%;
+    background: url('../assets/start/rays.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+}
+
+.rays.spinme{
+    -webkit-animation:spin 8s infinite linear;
+    -webkit-transform-origin: 50% 50%;
+}
+
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(36deg); }
+}
+
+/* Analytics Info Page Elements */
+
+.usageQuestion {
+    position: absolute;
+    width: 60%;
+    height: 35%;
+    top: 15%;
+    left: 20%;
+    color: white;
+    font-size: 5em;
+    font-weight: 500;
+    text-align: center;
+    text-shadow: 1px 1px 4px #333333;
+}
+
+.usageQuestion.hide {display: none;}
+.usageQuestion.show {display: block;}
+
+.usageIcon {
+    width: 100%;
+    margin-left: 3%;
+}
+.usageText {
+    color: #999999;
+    font-size: 2em;
+    text-align: center;
+    margin-top: .5em;
+}
+
+.usageSchool {
+    position: absolute;
+    top: 45%;
+    left: 17%;
+    margin: 0px;
+    width: 17%;
+    height: 30%;
+    -webkit-tap-highlight-color: transparent;
+    z-index: 1000;
+}
+
+.usageSchool.hide {display: none;}
+.usageSchool.show {display: block;}
+
+.usageHome {
+    position: absolute;
+    top: 45%;
+    left: 42%;
+    width: 17%;
+    height: 30%;
+    margin: 0px;
+    -webkit-tap-highlight-color: transparent;
+    z-index: 1000;
+}
+
+.usageHome.hide {display: none;}
+.usageHome.show {display: block;}
+
+.usageOther {
+    position: absolute;
+    top: 45%;
+    left: 67%;
+    margin: 0px;
+    width: 17%;
+    height: 22%;
+    -webkit-tap-highlight-color: transparent;
+    z-index: 1000;
+}
+
+.usageOther.hide {display: none;}
+.usageOther.show {display: block;}
+
+.usageNoanswer {
+    position: absolute;
+    width: 50%;
+    height: 15%;
+    top: 90%;
+    left: 25%;
+    text-align: center;
+    z-index: 25;
+}
+.usageNoanswerText {
+    color: #35A8E0;
+    font-size: 1.8em;
+}
+
+.usageNoanswer.hide {display: none;}
+.usageNoanswer.show {display: block;}
+
+/* TODO: make font sizes relative!! */
+/* Usage text boxes */
+.usage-text {
+    position: absolute;
+    width: 20%;
+    height: 15%;
+    top: 75%;
+    background-color: #35A8E0;
+    border: none;
+    color: white;
+    font-size: 35px;
+    text-align: center;
+    text-decoration: none;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.usage-text.school {
+    left: 10%;
+}
+
+.usage-text.home {
+    left: 40%;
+}
+
+.usage-text.other {
+    left: 70%;
+}
+
+.usage-text.dont-ask {
+    top: 90%;
+    right: 2%;
+    height: 10%;
+    width: 20%;
+    font-size: 20px;
+    text-align: right;
+}
+
+.optionsInstruction {
+    position: absolute;
+    width: 96%;
+    top: 0;
+    padding: 2%;
+    color: #ffdd44;
+    font-size: 2.75rem;
+    font-weight: 500;
+    text-align: center;
+    text-shadow: 1px 1px 4px #333333;
+    list-style-type: none;
+}
+
+.optionsInstruction.hide {display: none;}
+.optionsInstruction.show {display: block;}
+
+.optionsList {
+    position: absolute;
+    width: 92%;
+    height: 86%;
+    padding: 4%;
+    top: 6%;
+    column-count: 3;
+    column-fill: auto; /* use first column up first */
+    color: white;
+    font-size: 2.25rem;
+    font-weight: 500;
+    text-align: left;
+    text-shadow: 1px 1px 4px #333333;
+    list-style-type: none;
+    z-index: 1000;
+}
+
+.optionsList.hide {display: none;}
+.optionsList.show {display: block;}
+
+.optionsList > div {
+    display: block;
+    padding: .25em;
+    break-inside: avoid-column; /* don't allow column to break inside item */
+}

package/editions/free/src/css/thumbs.css

@@ -0,0 +1,204 @@
+.projectthumb {
+    display: inline-block;
+    position: relative;
+    margin: 0px;
+    padding: 0px;
+    width: ${css_vw(21.68)};
+    height: ${css_vh(26.04)};
+    vertical-align: top;
+}
+
+.aproject {
+    margin: 0px;
+    padding: 0px;
+    position: relative;
+    width: ${css_vh(28.91)};
+    height: ${css_vh(21.48)};
+    overflow: hidden;
+}
+
+.aproject img {
+    position: absolute;
+    margin: 0px;
+    padding: 0px;
+    top: ${14 * scaleMultiplier}px;
+    left: ${5 * scaleMultiplier}px;
+    width: ${css_vh(25)};
+    height: ${css_vh(18.75)};
+}
+
+.aproject.empty {
+    background:  url('../assets/lobby/newproject.png');
+    background-size: 100%;
+}
+.aproject.p1 {
+    background:  url('../assets/lobby/project1.png');
+    background-size: 100%;
+}
+.aproject.p2 {
+    background:  url('../assets/lobby/project2.png');
+    background-size: 100%;
+}
+.aproject.p3 {
+    background:  url('../assets/lobby/project3.png');
+    background-size: 100%;
+}
+.aproject.p4 {
+    background:  url('../assets/lobby/project4.png');
+    background-size: 100%;
+}
+
+.projecttitle {
+    height: ${30 * scaleMultiplier}px;
+    width: ${css_vh(25)};
+    line-height: ${15 * scaleMultiplier}px;
+}
+
+.projecttitle h4 {
+    font-weight: bold;
+    text-align: center;
+    color: #355E7C;
+    font-size: ${13 * scaleMultiplier}px;
+    width: ${css_vh(25)};
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align:middle;
+}
+
+.samplethumb {
+    display: inline-block;
+    position: absolute;
+    margin: ${8 * scaleMultiplier}px ${2 * scaleMultiplier}px 0;
+    padding: 0px;
+    width: 23.2%;
+    height: 46.7%;
+    vertical-align: top;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.samplethumb > p {
+    font-weight: bold;
+    text-align: center;
+    color: #C18134;
+    width: 100%;
+    margin: ${5 * scaleMultiplier}px auto;
+    overflow: hidden;
+    font-size: ${css_vh(2.5)};
+    font-weight: bold;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.samplethumb .thumb {
+    position: relative;
+    margin: 0 auto;
+    width: 84.8%;
+    height: 78%;
+    -webkit-transform-style: preserve-3d;
+    -webkit-backface-visibility: hidden;
+        -webkit-tap-highlight-color: transparent;
+}
+
+.samplethumb .thumb > div.woodframe {
+    width: 100%;
+    height: 100%;
+    outline: 1px solid transparent;
+    background:  url('../assets/lobby/woodframe.svg') no-repeat;
+	background-size: auto 100%;
+    background-position-x: center;
+    background-position-y: center;
+}
+
+.samplethumb .thumb > div.sampleicon {
+    position: absolute;
+    margin: 0px;
+    padding: 0px;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    outline: 1px solid transparent;
+    background:  url('../assets/lobby/woodframe.svg') no-repeat;
+    background-size: auto 89%;
+    background-position-x: center;
+    background-position-y: center;
+}
+
+.samplethumb#sample-0 { left:    ${css_vw(0)}; top:   ${css_vh(0)}; }
+.samplethumb#sample-1 { left: ${css_vw(23.2)}; top:   ${css_vh(0)}; }
+.samplethumb#sample-2 { left: ${css_vw(46.4)}; top:   ${css_vh(0)}; }
+.samplethumb#sample-3 { left: ${css_vw(68.6)}; top:   ${css_vh(0)}; }
+.samplethumb#sample-4 { left:    ${css_vw(0)}; top:  ${css_vh(28)}; }
+.samplethumb#sample-5 { left: ${css_vw(23.2)}; top:  ${css_vh(28)}; }
+.samplethumb#sample-6 { left: ${css_vw(46.4)}; top:  ${css_vh(28)}; }
+.samplethumb#sample-7 { left: ${css_vw(68.6)}; top:  ${css_vh(28)}; }
+
+.samplethumb .thumb.pos0 { -webkit-transform: rotateZ(-1deg);}
+.samplethumb .thumb.pos1 { -webkit-transform: rotateZ(0.5deg);}
+.samplethumb .thumb.pos2 { -webkit-transform: rotateZ(-0.7deg);}
+.samplethumb .thumb.pos3 { -webkit-transform: rotateZ(0.2deg);}
+.samplethumb .thumb.pos4 { -webkit-transform: rotateZ(-1deg);}
+.samplethumb .thumb.pos5 { -webkit-transform: rotateZ(0.6deg);}
+.samplethumb .thumb.pos6 { -webkit-transform: rotateZ(-0.3deg);}
+.samplethumb .thumb.pos7 { -webkit-transform: rotateZ(1deg);}
+
+.closex {
+    position: relative;
+    float: left;
+    top: ${css_vh(-54.17)};
+    z-index: 5;
+    visibility: hidden;
+    width: ${css_vh(5.86)};
+    height: ${css_vh(5.73)};
+    background:  url('../assets/ui/closeit.svg');
+    background-size: 101%;
+}
+
+.share {
+    position: relative;
+    top: ${css_vh(-22.14)};
+    right: ${css_vw(-12.7)};
+    z-index: 5;
+    width: ${css_vw(5.47)};
+    height: ${css_vh(6.51)};
+    background: url('../assets/ui/share-bow.svg');
+    background-size: 101%;
+    visibility: hidden;
+}
+
+.ribbonHorizontal {
+    background-color: #1dafed;
+    border: 3px solid #fff;
+    height: ${css_vh(1.57)};
+    width: ${css_vw(18.75)};
+    position: relative;
+    top: ${css_vh(-27.34)};
+    z-index: 4;
+    visibility: hidden;
+}
+
+.ribbonVertical {
+    background-color: #1dafed;
+    border: 3px solid #fff;
+    width: ${css_vw(1.17)};
+    height: ${css_vh(19)};
+    position: relative;
+    top: ${css_vh(-32.81)};
+    right: ${css_vw(-14.65)};
+    z-index: 4;
+    visibility: hidden;
+}
+
+*.inner {
+    padding: 0px;
+    margin: 0px 6.05%;
+    width: 87.9%;
+}
+
+*.scrollarea{
+    position: relative;
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+}

package/editions/free/src/editor.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta http-equiv="cache-control" content="no-cache">
+<meta charset="utf-8">
+
+<head>
+<title>Junior</title>
+
+<script>
+    window.scratchJrPage = 'editor';
+</script>
+<script type="text/javascript" src="app.bundle.js"></script>
+</head>
+<body style="background: white;">
+<div class="frame" id="frame"></div>
+<div class="libframe" id="libframe"></div>
+<div class="paintframe" id="paintframe"></div>
+
+</body>
+</html>

package/editions/free/src/gettingstarted.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta http-equiv="cache-control" content="no-cache">
+<meta charset="utf-8">
+
+<head>
+<title>Junior</title>
+
+<script language="javascript">
+    window.scratchJrPage = 'gettingStarted';
+</script>
+<script type="text/javascript" src="app.bundle.js"></script>
+
+</head>
+<body>
+<div class="tutorial" id="tutorialmode">
+  <div class="closehelp" id="closeHelp"></div>
+  <div class="introvideocontainer">
+      <video class="introvideo" id="myVideo" controls></video>
+  </div>
+</div>
+</body>
+</html>

package/editions/free/src/home.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta http-equiv="cache-control" content="no-cache">
+<meta charset="utf-8">
+
+<head>
+<title>Scratch Jr</title>
+
+<script>
+    window.scratchJrPage = 'home';
+</script>
+<script type="text/javascript" src="app.bundle.js"></script>
+
+</head>
+<body>
+<div class="frame" id="frame">
+	<div class="topbar" id="topbar">
+		<ul class="topbar-nav" id="nav">
+			<li class="logo" id="logotab">
+				<!-- <span class="logo-icon"></span> -->
+			</li>
+			<div></div>
+			<li class="home" id="hometab">
+				<span class="home-icon"></span>
+			</li>
+			<!-- <div></div>
+			<li class="help" id="helptab">
+				<span class="help-icon"></span>
+			</li> -->
+			<div></div>
+		</ul>
+        <ul class="reference" id="settings">
+            <div></div>
+            <li class="gear" id="geartab">
+                <span class="gear-icon"></span>
+            </li>
+       </ul>
+		<ul class="reference" id="reference">
+			<div></div>
+			<li class="book" id="booktab">
+				<span class="book-icon"></span>
+			</li>
+	 </ul>
+	</div>
+	<div class="topsection" id="topsection">
+		<div	class="tabtitle" id="tabtitle">
+			<span id="tabheader"></span>
+		</div>
+		<div class="tabicon" id="tabicon"></div>
+		<div class="blueband" id="blueband">
+			<span id="subtitle"></span>
+		</div>
+	</div>
+	<div class="contentwrap" id="wrapc"></div>
+	<div class="footer off" id="footer">
+		<ul class="footer-nav" id="footernav">
+			<li class="tab" id="abouttab" >
+				<div class="about-icon"></div>
+				<span id="abouttab-text"></span>
+			</li>
+			<li class="tab" id="interfacetab">
+				<div class="interface-icon"></div>
+				<span id="interfacetab-text"></span>
+			</li>
+			<li class="tab" id="painttab">
+				<div class="paint-icon"></div>
+                <span id="painttab-text"></span>
+			</li>
+			<li class="tab2" id="blockstab">
+				<div class="blocks-icon"></div>
+				<span id="blockstab-text"></span>
+			</li>
+			<div></div>
+		</ul>
+	</div>
+
+</div>
+</body>
+</html>