Skip to content

GitLab

S
scratch-www
Commit 641e9895 authored by Linda's avatar Linda
Browse files
Options

updated from develop with new extension landing pages

parents 253d6ac2 d32be3a8
Hide whitespace changes
Inline Side-by-side
Showing with 833 additions and 415 deletions
src/components/extension-landing/extension-landing.jsx
View file @ 641e9895
......@@ -10,8 +10,16 @@ class ExtensionLanding extends React.Component {
'onSetOS'
]);
// @todo use bowser for browser detection
let detectedOS = OS_ENUM.WINDOWS;
if (window.navigator && window.navigator.platform) {
if (window.navigator.platform === 'MacIntel') {
detectedOS = OS_ENUM.MACOS;
}
}
this.state = {
OS: OS_ENUM.WINDOWS
OS: detectedOS
};
}
......
src/components/extension-landing/extension-landing.scss
View file @ 641e9895
......@@ -50,6 +50,7 @@
}
.screenshot {
border: 1px solid $ui-border;
border-radius: .5rem;
}
......
src/components/extension-landing/project-card.jsx
View file @ 641e9895
......@@ -3,9 +3,9 @@ const React = require('react');
const ProjectCard = props => (
<a
download
className="project-card"
href={props.cardUrl}
target="_blank"
>
<div className="project-card-image">
<img
......
src/routes.json
View file @ 641e9895
......@@ -301,6 +301,13 @@
"view": "wedo2/wedo2",
"title": "LEGO WeDo 2.0"
},
{
"name": "wedo-legacy",
"pattern": "^/wedo-legacy/?$",
"routeAlias": "/wedo-legacy/?$",
"view": "wedo2-legacy/wedo2",
"title": "LEGO WeDo"
},
{
"name": "ev3",
"pattern": "^/ev3/?$",
......
src/views/ev3/ev3.jsx
View file @ 641e9895
......@@ -45,11 +45,11 @@ class EV3 extends ExtensionLanding {
values={{
ev3Link: (
<a
href="https://shop.lego.com/en-US/LEGO-MINDSTORMS-EV3-31313"
href="https://education.lego.com/en-us/middle-school/intro/mindstorms-ev3"
rel="noopener noreferrer"
target="_blank"
>
LEGO MINDSTORMS EV3
LEGO MINDSTORMS Education EV3
</a>
)
}}
......@@ -108,6 +108,7 @@ class EV3 extends ExtensionLanding {
<div className="step-image">
<img
alt=""
className="screenshot"
src="/images/ev3/ev3-connect-2.png"
/>
</div>
......@@ -132,6 +133,7 @@ class EV3 extends ExtensionLanding {
<div className="step-image">
<img
alt={this.props.intl.formatMessage({id: 'ev3.imgAltAddExtension'})}
className="screenshot"
src="/images/ev3/ev3-connect-3.png"
/>
</div>
......@@ -237,21 +239,21 @@ class EV3 extends ExtensionLanding {
<h3><FormattedMessage id="ev3.starterProjects" /></h3>
<Steps>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-wave-hello.sb3"
cardUrl="https://beta.scratch.mit.edu/#239075992"
description={this.props.intl.formatMessage({id: 'ev3.waveHelloDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltWaveHello'})}
imageSrc="/images/ev3/starter-wave-hello.png"
title={this.props.intl.formatMessage({id: 'ev3.waveHelloTitle'})}
/>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-distance-instrument.sb3"
cardUrl="https://beta.scratch.mit.edu/#239076020"
description={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltDistanceInstrument'})}
imageSrc="/images/ev3/starter-distance-instrument.png"
title={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentTitle'})}
/>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-space-tacos.sb3"
cardUrl="https://beta.scratch.mit.edu/#239076044"
description={this.props.intl.formatMessage({id: 'ev3.spaceTacosDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltSpaceTacos'})}
imageSrc="/images/ev3/starter-flying-game.png"
......
src/views/ev3/ev3.scss
View file @ 641e9895
......@@ -2,7 +2,7 @@
.ev3 {
.extension-header {
background-color: $ui-aqua;
background-color: $ui-orange;
background-image: url("/images/ev3/ev3-pattern.svg");
}
}
src/views/ev3/l10n.json
View file @ 641e9895
......@@ -33,7 +33,7 @@
"ev3.otherComputerConnectedTitle": "Make sure no other computer is connected to your EV3",
"ev3.otherComputerConnectedText": "Only one computer can be connected to an EV3 at a time. If you have another computer connected to your EV3, disconnect the EV3 or close Scratch on that computer and try again.",
"ev3.updateFirmwareTitle": "Try updating your EV3 firmware",
"ev3.updateFirmwareText": "We recommend updating to EV3 firmware version 1.10E or above. See {firmwareUpdateLink}. We recommend following the instructions for \"Manual Firmware Update\".",
"ev3.updateFirmwareText": "We recommend updating to EV3 firmware version 1.10E or above. See {firmwareUpdateLink}.",
"ev3.firmwareUpdateText": "firmware update instructions from LEGO",
"ev3.imgAltEv3illustration": "Illustration of an EV3 Computer featuring some examples of interacting with an EV3.",
"ev3.imgAltAddExtension": "In the editor, click on the \"Add Extensions\" button on the lower left.",
......
src/views/microbit/microbit.jsx
View file @ 641e9895
......@@ -126,7 +126,10 @@ class MicroBit extends ExtensionLanding {
</Step>
<Step number={2}>
<div className="step-image">
<img src="/images/microbit/mbit-connect-2.png" />
<img
className="screenshot"
src="/images/microbit/mbit-connect-2.png"
/>
</div>
<p>
<FormattedMessage
......@@ -147,7 +150,10 @@ class MicroBit extends ExtensionLanding {
</Step>
<Step number={3}>
<div className="step-image">
<img src="/images/microbit/mbit-connect-3.png" />
<img
className="screenshot"
src="/images/microbit/mbit-connect-3.png"
/>
</div>
<p><FormattedMessage id="microbit.addExtension" /></p>
</Step>
......@@ -201,19 +207,19 @@ class MicroBit extends ExtensionLanding {
<h3><FormattedMessage id="microbit.starterProjects" /></h3>
<Steps>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/microbit/microbit-heartbeat.sb3"
cardUrl="https://beta.scratch.mit.edu/#239075756"
description={this.props.intl.formatMessage({id: 'microbit.heartBeatDescription'})}
imageSrc="/images/microbit/starter-heart.png"
title={this.props.intl.formatMessage({id: 'microbit.heartBeat'})}
/>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/microbit/microbit-guitar.sb3"
cardUrl="https://beta.scratch.mit.edu/#239075950"
description={this.props.intl.formatMessage({id: 'microbit.tiltGuitarDescription'})}
imageSrc="/images/microbit/starter-guitar.png"
title={this.props.intl.formatMessage({id: 'microbit.tiltGuitar'})}
/>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/microbit/microbit-fish.sb3"
cardUrl="https://beta.scratch.mit.edu/#239075973"
description={this.props.intl.formatMessage({id: 'microbit.oceanAdventureDescription'})}
imageSrc="/images/microbit/starter-fish.png"
title={this.props.intl.formatMessage({id: 'microbit.oceanAdventure'})}
......
src/views/microbit/microbit.scss
View file @ 641e9895
......@@ -3,7 +3,7 @@
.microbit {
.extension-header {
background-color: $ui-purple;
background-color: $ui-mint-green;
background-image: url("/images/microbit/mbit-pattern.svg");
.extension-info {
......
src/views/search/l10n.json 0 → 100644
View file @ 641e9895
{
"search.trending": "Trending",
"search.popular": "Popular"
}
src/views/search/search.jsx
View file @ 641e9895
......@@ -8,14 +8,18 @@ const React = require('react');
const api = require('../../lib/api');
const Button = require('../../components/forms/button.jsx');
const Form = require('../../components/forms/form.jsx');
const Grid = require('../../components/grid/grid.jsx');
const navigationActions = require('../../redux/navigation.js');
const Select = require('../../components/forms/select.jsx');
const TitleBanner = require('../../components/title-banner/title-banner.jsx');
const Tabs = require('../../components/tabs/tabs.jsx');
const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');
const ACCEPTABLE_MODES = ['trending', 'popular', ''];
require('./search.scss');
class Search extends React.Component {
......@@ -23,14 +27,31 @@ class Search extends React.Component {
super(props);
bindAll(this, [
'getSearchState',
'handleChangeSortMode',
'handleGetSearchMore',
'getTab'
]);
this.state = this.getSearchState();
this.state.loaded = [];
this.state.loadNumber = 16;
this.state.mode = '';
this.state.offset = 0;
this.state.loadMore = false;
let mode = '';
const query = window.location.search;
const m = query.lastIndexOf('mode=');
if (m !== -1) {
mode = query.substring(m + 5, query.length).toLowerCase();
}
while (mode.indexOf('/') > -1) {
mode = mode.substring(0, mode.indexOf('/'));
}
while (mode.indexOf('&') > -1) {
mode = mode.substring(0, mode.indexOf('&'));
}
mode = decodeURIComponent(mode.split('+').join(' '));
this.state.mode = mode;
}
componentDidMount () {
const query = window.location.search;
......@@ -65,6 +86,13 @@ class Search extends React.Component {
loadNumber: 16
};
}
handleChangeSortMode (name, value) {
if (ACCEPTABLE_MODES.indexOf(value) !== -1) {
const term = this.props.searchTerm.split(' ').join('+');
window.location =
`${window.location.origin}/search/${this.state.tab}?q=${term}&mode=${value}`;
}
}
handleGetSearchMore () {
let termText = '';
if (this.props.searchTerm !== '') {
......@@ -73,7 +101,8 @@ class Search extends React.Component {
const locale = this.props.intl.locale;
const loadNumber = this.state.loadNumber;
const offset = this.state.offset;
const queryString = `limit=${loadNumber}&offset=${offset}&language=${locale}&mode=popular${termText}`;
const mode = this.state.mode;
const queryString = `limit=${loadNumber}&offset=${offset}&language=${locale}&mode=${mode}${termText}`;
api({
uri: `/search/${this.state.tab}?${queryString}`
......@@ -167,6 +196,25 @@ class Search extends React.Component {
{this.getTab('projects')}
{this.getTab('studios')}
</Tabs>
<div className="sort-controls">
<Form className="sort-mode">
<Select
name="sort"
options={[
{
value: 'trending',
label: this.props.intl.formatMessage({id: 'search.trending'})
},
{
value: 'popular',
label: this.props.intl.formatMessage({id: 'search.popular'})
}
]}
value={this.state.mode}
onChange={this.handleChangeSortMode}
/>
</Form>
</div>
{this.getProjectBox()}
</div>
</div>
......
src/views/search/search.scss
View file @ 641e9895
......@@ -104,15 +104,40 @@ $base-bg: $ui-white;
}
}
}
/* HACK: sort controls are terrible. There's some sort of magic formula for height of formsy components that I can't control. */
.select {
select {
margin-bottom: 0;
color: $header-gray;
}
.sort-controls {
display: flex;
margin: 0 auto;
border-bottom: 1px solid $ui-border;
padding: 8px 0;
width: 58.75rem;
justify-content: space-between;
}
.sort-mode {
margin-top: -4px;
width: 13.75rem;
.select {
select {
margin-bottom: 0;
border: 0;
background-color: transparent;
height: 32px;
color: $header-gray;
.help-block {
display: none;
&:focus,
&:active {
background-color: transparent;
}
}
.help-block {
display: none;
}
}
}
......
src/views/terms/terms.jsx
View file @ 641e9895
......@@ -466,7 +466,7 @@ const Terms = () => (
<p>
This document, together with all appendices, constitutes the entire Terms
of Use and supersedes all previous agreements with the Scratch Team relating
to the use of Scratch. Revision date: 4 March 2015.
to the use of Scratch. Revision date: April 2016.
</p>
</section>
<section id="appendix-a">
......
src/views/wedo2-legacy/l10n.json 0 → 100644
View file @ 641e9895
{
"wedoLegacy.intro": "The LEGO® Education WeDo 2.0 is an introductory invention kit you can use to build your own interactive machines. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations on the screen.",
"wedoLegacy.requirement": "The LEGO WeDo 2.0 extension is available for Mac OSX and Windows 10+.",
"wedoLegacy.getStarted": "Getting Started with LEGO WeDo 2.0",
"wedoLegacy.installTitle": "1. Install Device Manager",
"wedoLegacy.installText": "The Device Manager lets you connect WeDo 2.0 to Scratch using Bluetooth",
"wedoLegacy.downloadMac": "Download for Mac OSX",
"wedoLegacy.downloadWin": "Download for Windows 10+",
"wedoLegacy.setupTitle": "2. Setup & Help",
"wedoLegacy.setupText": "Connect your WeDo 2.0 by following the steps in the <a href=\"/projects/editor/?tip_bar=ext2\">Tips Window</a>",
"wedoLegacy.createTitle": "3. Create",
"wedoLegacy.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive",
"wedoLegacy.wedo2SetupInstructions": "WeDo 2.0 Setup Instructions",
"wedoLegacy.wedo1SetupInstructions": "WeDo 1.0 Setup Instructions",
"wedoLegacy.starterProjects": "WeDo 2.0 Starter Projects",
"wedoLegacy.starterMotor": "Motor",
"wedoLegacy.starterDistance": "Distance Sensor",
"wedoLegacy.starterTilt": "Tilt Sensor",
"wedoLegacy.versionTitle": "Which version do you have?",
"wedoLegacy.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)."
}
src/views/wedo2-legacy/wedo2.jsx 0 → 100644
View file @ 641e9895
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
const FormattedMessage = require('react-intl').FormattedMessage;
const React = require('react');
const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');
require('./wedo2.scss');
const Wedo2 = () => (
<div className="wedo">
<div className="top-banner">
<div className="inner">
<div className="columns2">
<div className="banner-text">
<h2>LEGO WeDo 2.0 &amp; Scratch</h2>
<p className="intro">
<FormattedMessage id="wedoLegacy.intro" />
</p>
</div>
<div className="banner-photo">
<img src="/images/wedo-legacy/wedo-milo.png" />
</div>
</div>
</div>
</div>
<div className="inner">
<section id="getting-started">
<h3>
<FormattedMessage id="wedoLegacy.getStarted" />
</h3>
<p className="callout">
<FormattedMessage id="wedoLegacy.requirement" />
</p>
<div className="columns3">
<div className="column">
<img src="/images/wedo-legacy/download-device-manager.png" />
<h4>
<FormattedMessage id="wedoLegacy.installTitle" />
</h4>
<p>
<FormattedHTMLMessage id="wedoLegacy.installText" />
<br />
<a href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1084869222&mt=12">
<FormattedMessage id="wedoLegacy.downloadMac" />
</a>
<br />
<a href="https://downloads.scratch.mit.edu/device-manager/ScratchDeviceManager-1.1.0.exe">
<FormattedMessage id="wedoLegacy.downloadWin" />
</a>
</p>
</div>
<div className="column">
<img src="/images/wedo-legacy/set-up.png" />
<h4>
<FormattedMessage id="wedoLegacy.setupTitle" />
</h4>
<p>
<FormattedHTMLMessage id="wedoLegacy.setupText" />
</p>
</div>
<div className="column">
<img src="/images/wedo-legacy/create-and-share.png" />
<h4>
<FormattedMessage id="wedoLegacy.createTitle" />
</h4>
<p>
<FormattedMessage id="wedoLegacy.createText" />
</p>
</div>
</div>
</section>
</div>
<div className="banner">
<div
className="inner"
id="starter-projects"
>
<h3>
<FormattedMessage id="wedoLegacy.starterProjects" />
</h3>
<div className="project-list">
<a href="/projects/101037564/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo-legacy/motor.png"
/>
<p>
<FormattedMessage id="wedoLegacy.starterMotor" />
</p>
</div>
</a>
<a href="/projects/101038249/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo-legacy/distance.png"
/>
<p>
<FormattedMessage id="wedoLegacy.starterDistance" />
</p>
</div>
</a>
<a href="/projects/101033190/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo-legacy/tilt.png"
/>
<p>
<FormattedMessage id="wedoLegacy.starterTilt" />
</p>
</div>
</a>
</div>
</div>
</div>
<div className="inner">
<section>
<h3>
<FormattedMessage id="wedoLegacy.versionTitle" />
</h3>
<p>
<FormattedMessage id="wedoLegacy.versionText" />
</p>
<div className="device-card">
<h4>LEGO WeDo 1.0 Hub</h4>
<img
alt="LEGO WeDo 1.0 Hub"
src="/images/wedo-legacy/wedo1.png"
/>
<a href="/projects/editor/?tip_bar=ext1">
<FormattedMessage id="wedoLegacy.wedo1SetupInstructions" />
</a>
</div>
<div className="device-card">
<h4>LEGO WeDo 2.0 Hub</h4>
<img
alt="LEGO WeDo 2.0 Hub"
src="/images/wedo-legacy/wedo2.png"
/>
<a href="/projects/editor/?tip_bar=ext2">
<FormattedMessage id="wedoLegacy.wedo2SetupInstructions" />
</a>
</div>
</section>
</div>
</div>
);
render(<Page><Wedo2 /></Page>, document.getElementById('app'));
src/views/wedo2-legacy/wedo2.scss 0 → 100644
View file @ 641e9895
@import "../../colors";
@import "../../frameless";
#view {
padding: 0;
}
.wedo {
h3,
h4 {
margin: 1.5em 0 .3em;
}
h2 {
margin: .75em 0 .3em;
}
p {
margin: .25em 0 1em;
&.intro {
margin-bottom: 1em;
}
&.callout {
padding: .75em 1em;
text-align: center;
}
}
.top-banner {
margin-bottom: 50px;
background-color: $ui-blue;
padding: 50px 0;
width: 100%;
h2 {
color: $ui-white;
}
p {
color: $ui-white;
}
.columns2 {
display: flex;
justify-content: space-between;
align-items: center;
}
.banner-text {
max-width: $cols7;
}
.banner-photo {
max-width: $cols4;
img {
width: 100%;
}
}
}
section {
margin-bottom: 50px;
text-align: center;
}
// Getting Started Section
.columns3 {
display: flex;
justify-content: space-between;
.column {
margin: 15px;
max-width: $cols4;
img {
margin: 0 auto;
width: 80%;
}
}
}
// Project Highlight Section
#starter-projects {
h3,
p {
text-align: center;
}
}
.banner {
background-color: $ui-gray;
padding: 10px 0 50px;
h3 {
margin-top: 30px;
}
}
.project-list {
display: flex;
margin: 0 auto;
max-width: $cols9;
justify-content: space-between;
}
.project-card {
transition: transform .25s ease;
margin: 10px;
border-radius: 7px;
background-color: $ui-white;
max-width: $cols3;
overflow: hidden;
img {
border-bottom: 2px solid $ui-white;
width: 100%;
}
p {
display: block;
margin: 15px 15px 20px;
color: $ui-blue;
font-weight: 500;
}
&:hover {
transform: scale(1.1, 1.1);
transition: transform .25s ease;
cursor: pointer;
p {
color: $ui-blue-dark;
}
}
}
// Device Cards
.device-card {
display: inline-block;
margin: 0 10px;
max-width: $cols3;
img {
width: 100%;
}
}
}
// Responsive Behavior
//4 columns
@media only screen and (max-width: $mobile - 1) {
.wedo {
.inner {
margin: 0 auto;
width: calc(100% - 40px);
}
.top-banner {
text-align: center;
.banner-photo {
display: none;
}
}
.project-list,
.columns3 {
display: block;
}
.project-card,
.columns3 .column {
display: block;
margin: 20px auto;
width: $cols6;
}
}
}
//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.wedo {
.project-list,
.columns3 {
display: inline-block;
}
.top-banner {
text-align: center;
.banner-photo {
display: none;
}
}
.project-card,
.columns3 .column {
display: inline-block;
width: $cols6;
}
}
}
//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
#view {
text-align: center;
}
.wedo {
.top-banner {
text-align: left;
.banner-photo {
max-width: $cols3;
}
}
.inner {
margin: 0 auto;
width: $tablet;
}
}
}
src/views/wedo2/l10n.json
View file @ 641e9895
{
"wedo2.intro": "The LEGO® Education WeDo 2.0 is an introductory invention kit you can use to build your own interactive machines. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations on the screen.",
"wedo2.requirement": "The LEGO WeDo 2.0 extension is available for Mac OSX and Windows 10+.",
"wedo2.getStarted": "Getting Started with LEGO WeDo 2.0",
"wedo2.installTitle": "1. Install Device Manager",
"wedo2.installText": "The Device Manager lets you connect WeDo 2.0 to Scratch using Bluetooth",
"wedo2.downloadMac": "Download for Mac OSX",
"wedo2.downloadWin": "Download for Windows 10+",
"wedo2.setupTitle": "2. Setup & Help",
"wedo2.setupText": "Connect your WeDo 2.0 by following the steps in the <a href=\"/projects/editor/?tip_bar=ext2\">Tips Window</a>",
"wedo2.createTitle": "3. Create",
"wedo2.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive",
"wedo2.wedo2SetupInstructions": "WeDo 2.0 Setup Instructions",
"wedo2.wedo1SetupInstructions": "WeDo 1.0 Setup Instructions",
"wedo2.starterProjects": "WeDo 2.0 Starter Projects",
"wedo2.starterMotor": "Motor",
"wedo2.starterDistance": "Distance Sensor",
"wedo2.starterTilt": "Tilt Sensor",
"wedo2.versionTitle": "Which version do you have?",
"wedo2.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)."
}
"wedo2.headerText": "{wedo2Link} is an introductory invention kit you can use to build interactive robots and other creations. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations and sounds.",
"wedo2.gettingStarted": "Getting Started",
"wedo2.connectingWedo2": "Connecting WeDo 2.0 to Scratch",
"wedo2.useScratch3": "Use the {scratch3Link} editor.",
"wedo2.addExtension": "Add the WeDo 2.0 extension.",
"wedo2.thingsToTry": "Things to Try",
"wedo2.makeMotorMove": "Make a motor move",
"wedo2.plugMotorIn": "Plug a motor into the WeDo.",
"wedo2.clickMotorBlock": "Find the {motorBlockText} block and click on it.",
"wedo2.motorBlockText": "\"turn motor on for 1 seconds\"",
"wedo2.starterProjects": "Starter Projects",
"wedo2.starter1Title": "Wagging Dog",
"wedo2.starter1Description": "Use a motor to make a spinning tail for your virtual pet.",
"wedo2.starter2Title": "Tilting Toad",
"wedo2.starter2Description": "Use the tilt sensor to make music with a toad.",
"wedo2.starter3Title": "Distance Dino",
"wedo2.starter3Description": "Use the distance sensor to move the dinosaur.",
"wedo2.troubleshootingTitle": "Troubleshooting",
"wedo2.closeScratchCopiesTitle": "Close other copies of Scratch",
"wedo2.closeScratchCopiesText": "Only one copy of Scratch can connect with the WeDo 2.0 at a time. If you have Scratch open in other browser tabs, close it and try again.",
"wedo2.otherComputerConnectedTitle": "Make sure no other computer is connected to your WeDo 2.0",
"wedo2.otherComputerConnectedText": "Only one computer can be connected to an WeDo 2.0 at a time. If you have another computer connected to your WeDo 2.0, disconnect the WeDo 2.0 or close Scratch on that computer and try again.",
"wedo2.legacyInfoTitle": "Using Scratch 2.0?",
"wedo2.legacyInfoText": "Visit our page about {wedoLegacyLink}.",
"wedo2.legacyLinkText": "using LEGO WeDo with Scratch 2.0"
}
src/views/wedo2/wedo2.jsx
View file @ 641e9895
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const FormattedMessage = require('react-intl').FormattedMessage;
const React = require('react');
const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');
require('./wedo2.scss');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
const Wedo2 = () => (
<div className="wedo">
<div className="top-banner">
<div className="inner">
<div className="columns2">
<div className="banner-text">
<h2>LEGO WeDo 2.0 &amp; Scratch</h2>
<p className="intro">
<FormattedMessage id="wedo2.intro" />
</p>
</div>
<div className="banner-photo">
<img src="/images/wedo/wedo-milo.png" />
</div>
</div>
</div>
</div>
const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
const ProjectCard = require('../../components/extension-landing/project-card.jsx');
<div className="inner">
<section id="getting-started">
<h3>
<FormattedMessage id="wedo2.getStarted" />
</h3>
<p className="callout">
<FormattedMessage id="wedo2.requirement" />
</p>
<div className="columns3">
<div className="column">
<img src="/images/wedo/download-device-manager.png" />
<h4>
<FormattedMessage id="wedo2.installTitle" />
</h4>
<p>
<FormattedHTMLMessage id="wedo2.installText" />
<br />
<a href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1084869222&mt=12">
<FormattedMessage id="wedo2.downloadMac" />
</a>
<br />
<a href="https://downloads.scratch.mit.edu/device-manager/ScratchDeviceManager-1.1.0.exe">
<FormattedMessage id="wedo2.downloadWin" />
</a>
</p>
</div>
<div className="column">
<img src="/images/wedo/set-up.png" />
<h4>
<FormattedMessage id="wedo2.setupTitle" />
</h4>
<p>
<FormattedHTMLMessage id="wedo2.setupText" />
</p>
</div>
<div className="column">
<img src="/images/wedo/create-and-share.png" />
<h4>
<FormattedMessage id="wedo2.createTitle" />
</h4>
<p>
<FormattedMessage id="wedo2.createText" />
</p>
</div>
</div>
</section>
</div>
const Steps = require('../../components/steps/steps.jsx');
const Step = require('../../components/steps/step.jsx');
<div className="banner">
<div
className="inner"
id="starter-projects"
>
<h3>
<FormattedMessage id="wedo2.starterProjects" />
</h3>
<div className="project-list">
<a href="/projects/101037564/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo/motor.png"
/>
<p>
<FormattedMessage id="wedo2.starterMotor" />
</p>
</div>
</a>
<a href="/projects/101038249/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo/distance.png"
/>
<p>
<FormattedMessage id="wedo2.starterDistance" />
</p>
</div>
</a>
<a href="/projects/101033190/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo/tilt.png"
/>
<p>
<FormattedMessage id="wedo2.starterTilt" />
</p>
</div>
</a>
</div>
require('../../components/extension-landing/extension-landing.scss');
require('./wedo2.scss');
class Wedo2 extends ExtensionLanding {
render () {
return (
<div className="extension-landing wedo2">
<ExtensionHeader imageSrc="/images/wedo2/wedo2-illustration.png">
<FlexRow className="column extension-copy">
<h2><img src="/images/wedo2/wedo2.svg" />LEGO WeDo 2.0</h2>
<FormattedMessage
id="wedo2.headerText"
values={{
wedo2Link: (
<a
href="https://education.lego.com/en-us/elementary/intro/wedo2"
rel="noopener noreferrer"
target="_blank"
>
LEGO Education WeDo 2.0
</a>
)
}}
/>
</FlexRow>
<ExtensionRequirements>
<span>
<img src="/svgs/extensions/windows.svg" />
Windows 10+
</span>
<span>
<img src="/svgs/extensions/mac.svg" />
macOS 10.13+
</span>
<span>
<img src="/svgs/extensions/bluetooth.svg" />
Bluetooth
</span>
<span>
<img src="/svgs/extensions/scratch-link.svg" />
Scratch Link
</span>
</ExtensionRequirements>
</ExtensionHeader>
<OSChooser
currentOS={this.state.OS}
handleSetOS={this.onSetOS}
/>
<InstallScratchLink
currentOS={this.state.OS}
/>
<ExtensionSection className="getting-started">
<h2><FormattedMessage id="wedo2.gettingStarted" /></h2>
<FlexRow className="column getting-started-section">
<h3><FormattedMessage id="wedo2.connectingWedo2" /></h3>
<Steps>
<Step number={1}>
<div className="step-image">
<img
className="screenshot"
src="/images/wedo2/wedo2-connect-1.png"
/>
</div>
<p>
<FormattedMessage
id="wedo2.useScratch3"
values={{
scratch3Link: (
<a
href="https://beta.scratch.mit.edu/"
rel="noopener noreferrer"
target="_blank"
>
Scratch 3.0
</a>
)
}}
/>
</p>
</Step>
<Step number={2}>
<div className="step-image">
<img
className="screenshot"
src="/images/wedo2/wedo2-connect-2.png"
/>
</div>
<p><FormattedMessage id="wedo2.addExtension" /></p>
</Step>
</Steps>
</FlexRow>
</ExtensionSection>
<ExtensionSection className="blue things-to-try">
<h2><FormattedMessage id="wedo2.thingsToTry" /></h2>
<h3><FormattedMessage id="wedo2.makeMotorMove" /></h3>
<Steps>
<Step
compact
number={1}
>
<span className="step-description">
<FormattedMessage id="wedo2.plugMotorIn" />
</span>
<div className="step-image">
<img src="/images/wedo2/wedo2-motor.png" />
</div>
</Step>
<Step
compact
number={2}
>
<span className="step-description">
<FormattedMessage
id="wedo2.clickMotorBlock"
values={{
motorBlockText: (
<strong><FormattedMessage id="wedo2.motorBlockText" /></strong>
)
}}
/>
</span>
<div className="step-image">
<img src="/images/wedo2/wedo2-motor-turn-block.png" />
</div>
</Step>
</Steps>
<hr />
<h3><FormattedMessage id="wedo2.starterProjects" /></h3>
<Steps>
<ProjectCard
cardUrl="https://beta.scratch.mit.edu/#239284992"
description={this.props.intl.formatMessage({id: 'wedo2.starter1Description'})}
imageSrc="/images/wedo2/wedo2-starter1.png"
title={this.props.intl.formatMessage({id: 'wedo2.starter1Title'})}
/>
<ProjectCard
cardUrl="https://beta.scratch.mit.edu/#239284997"
description={this.props.intl.formatMessage({id: 'wedo2.starter2Description'})}
imageSrc="/images/wedo2/wedo2-starter2.png"
title={this.props.intl.formatMessage({id: 'wedo2.starter2Title'})}
/>
<ProjectCard
cardUrl="https://beta.scratch.mit.edu/#239285001"
description={this.props.intl.formatMessage({id: 'wedo2.starter3Description'})}
imageSrc="/images/wedo2/wedo2-starter3.png"
title={this.props.intl.formatMessage({id: 'wedo2.starter3Title'})}
/>
</Steps>
</ExtensionSection>
<ExtensionSection className="faq">
<h2><FormattedMessage id="wedo2.troubleshootingTitle" /></h2>
<h3 className="faq-title"><FormattedMessage id="wedo2.closeScratchCopiesTitle" /></h3>
<p>
<FormattedMessage id="wedo2.closeScratchCopiesText" />
</p>
<h3 className="faq-title"><FormattedMessage id="wedo2.otherComputerConnectedTitle" /></h3>
<p>
<FormattedMessage id="wedo2.otherComputerConnectedText" />
</p>
<h3 className="faq-title"><FormattedMessage id="wedo2.legacyInfoTitle" /></h3>
<p>
<FormattedMessage
id="wedo2.legacyInfoText"
values={{
wedoLegacyLink: (
<a
href="/wedo-legacy"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="wedo2.legacyLinkText" />
</a>
)
}}
/>
</p>
</ExtensionSection>
</div>
</div>
);
}
}
Wedo2.propTypes = {
intl: intlShape.isRequired
};
<div className="inner">
<section>
<h3>
<FormattedMessage id="wedo2.versionTitle" />
</h3>
<p>
<FormattedMessage id="wedo2.versionText" />
</p>
<div className="device-card">
<h4>LEGO WeDo 1.0 Hub</h4>
<img
alt="LEGO WeDo 1.0 Hub"
src="/images/wedo/wedo1.png"
/>
<a href="/projects/editor/?tip_bar=ext1">
<FormattedMessage id="wedo2.wedo1SetupInstructions" />
</a>
</div>
<div className="device-card">
<h4>LEGO WeDo 2.0 Hub</h4>
<img
alt="LEGO WeDo 2.0 Hub"
src="/images/wedo/wedo2.png"
/>
<a href="/projects/editor/?tip_bar=ext2">
<FormattedMessage id="wedo2.wedo2SetupInstructions" />
</a>
</div>
</section>
</div>
</div>
);
const WrappedWedo2 = injectIntl(Wedo2);
render(<Page><Wedo2 /></Page>, document.getElementById('app'));
render(<Page><WrappedWedo2 /></Page>, document.getElementById('app'));
src/views/wedo2/wedo2.scss
View file @ 641e9895
@import "../../colors";
@import "../../frameless";
#view {
padding: 0;
}
.wedo {
h3,
h4 {
margin: 1.5em 0 .3em;
}
h2 {
margin: .75em 0 .3em;
}
p {
margin: .25em 0 1em;
&.intro {
margin-bottom: 1em;
}
&.callout {
padding: .75em 1em;
text-align: center;
}
}
.top-banner {
margin-bottom: 50px;
background-color: $ui-blue;
padding: 50px 0;
width: 100%;
h2 {
color: $ui-white;
}
p {
color: $ui-white;
}
.columns2 {
display: flex;
justify-content: space-between;
align-items: center;
}
.banner-text {
max-width: $cols7;
}
.banner-photo {
max-width: $cols4;
img {
width: 100%;
}
}
}
section {
margin-bottom: 50px;
text-align: center;
}
// Getting Started Section
.columns3 {
display: flex;
justify-content: space-between;
.column {
margin: 15px;
max-width: $cols4;
img {
margin: 0 auto;
width: 80%;
}
}
}
// Project Highlight Section
#starter-projects {
h3,
p {
text-align: center;
}
}
.banner {
background-color: $ui-gray;
padding: 10px 0 50px;
h3 {
margin-top: 30px;
}
}
.project-list {
display: flex;
margin: 0 auto;
max-width: $cols9;
justify-content: space-between;
}
.project-card {
transition: transform .25s ease;
margin: 10px;
border-radius: 7px;
background-color: $ui-white;
max-width: $cols3;
overflow: hidden;
img {
border-bottom: 2px solid $ui-white;
width: 100%;
}
p {
display: block;
margin: 15px 15px 20px;
color: $ui-blue;
font-weight: 500;
}
&:hover {
transform: scale(1.1, 1.1);
transition: transform .25s ease;
cursor: pointer;
p {
color: $ui-blue-dark;
}
}
}
// Device Cards
.device-card {
display: inline-block;
margin: 0 10px;
max-width: $cols3;
img {
width: 100%;
}
}
}
// Responsive Behavior
//4 columns
@media only screen and (max-width: $mobile - 1) {
.wedo {
.inner {
margin: 0 auto;
width: calc(100% - 40px);
}
.top-banner {
text-align: center;
.banner-photo {
display: none;
}
}
.project-list,
.columns3 {
display: block;
}
.project-card,
.columns3 .column {
display: block;
margin: 20px auto;
width: $cols6;
}
}
}
//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.wedo {
.project-list,
.columns3 {
display: inline-block;
}
.top-banner {
text-align: center;
.banner-photo {
display: none;
}
}
.project-card,
.columns3 .column {
display: inline-block;
width: $cols6;
}
}
}
//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
#view {
text-align: center;
}
.wedo {
.top-banner {
text-align: left;
.banner-photo {
max-width: $cols3;
}
}
.inner {
margin: 0 auto;
width: $tablet;
}
.wedo2 {
.extension-header {
background-color: $ui-coral;
background-image: url("/images/wedo2/wedo2-pattern.svg");
}
}
static/images/ev3/ev3-connect-3.png
View replaced file @ 253d6ac2 View file @ 641e9895
static/images/ev3/ev3-connect-3.png

17.7 KB | W: | H:

static/images/ev3/ev3-connect-3.png

41 KB | W: | H:

static/images/ev3/ev3-connect-3.png
static/images/ev3/ev3-connect-3.png
static/images/ev3/ev3-connect-3.png
static/images/ev3/ev3-connect-3.png
  • 2-up
  • Swipe
  • Onion skin
static/images/wedo2/wedo2-pattern.svg 0 → 100644
View file @ 641e9895
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1300px" height="600px" viewBox="0 0 1300 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
<title>ev3-pattern</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Round-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.1">
<g id="EV3-Pattern" fill="#FFFFFF">
<path d="M819.238017,24.8817824 C803.785488,75.51947 647.448049,103.204942 644.619335,147.368405 C641.787221,191.535268 803.3979,93.588814 814.957548,119.536719 C826.517196,145.488023 648.05323,276.570675 553.600707,314.888974 C496.68644,337.977202 451.787407,305.347653 517.317011,254.845979 C561.158676,221.060318 540.524705,192.028315 500.184933,211.886232 C459.845162,231.747549 438.381615,180.528405 494.112718,136.75258 C549.843821,92.9801553 836.720285,-32.4239487 819.238017,24.8817824 Z M395.087674,155.266347 C351.810391,219.835179 269.073911,179.554891 321.513914,111.844156 C367.915701,51.9405742 516.956962,-10.1426181 524.239541,23.1975999 C529.587578,47.6833632 446.004523,79.2928142 395.087674,155.266347 Z M39.1807315,24.9450285 C109.633386,-43.4015682 169.145174,-110.013998 211.052298,-107.953399 C254.594772,-105.811192 215.703356,-22.4793488 141.769208,41.4468213 C89.3870027,86.7391929 140.541845,109.722011 190.775315,82.679201 C251.480467,49.9986467 298.800226,71.8661574 220.453011,143.521273 C142.105797,215.17979 23.1434199,267.908679 -41.7470041,254.388974 C-106.634028,240.86927 49.3974204,199.575684 55.5886319,144.878004 C61.6710467,91.1324169 -32.9582717,199.633489 -82.2975692,163.539006 C-130.188511,128.508825 -26.2536759,88.418955 39.1807315,24.9450285 Z M828.757048,228.147622 C820.80129,189.230865 917.905733,66.6150305 1036.98711,34.2881103 C1156.68726,1.79457407 1269.22723,-10.8410455 1274.05509,17.262667 C1278.84894,45.2031639 1202.92925,66.309001 1108.61613,111.526565 C1063.01671,133.387275 1111.26124,151.810254 1140.94574,140.000914 C1239.12795,100.948144 1231.45778,160.627305 1148.56151,202.702966 C1083.78668,235.584139 1028.99735,252.830604 996.538538,260.743168 C949.463572,272.219275 939.651471,241.813541 966.527652,224.655485 C1018.99145,191.162252 993.764223,160.246468 946.801453,186.235176 C917.055759,202.696165 841.629056,291.091097 828.757048,228.147622 Z M784.943602,261.589849 C812.781954,250.446974 820.003334,270.869345 820.003334,287.371138 C820.003334,303.876331 792.161582,310.061528 776.692053,300.778632 C761.222524,291.499136 765.557392,269.345998 784.943602,261.589849 Z M1.53299797,331.980724 C12.1508746,307.406552 131.17785,303.479173 219.687355,224.105311 C251.530785,195.545955 290.564996,230.429922 281.300279,257.200706 C272.038961,283.97149 243.734823,291.027171 199.434172,308.249833 C155.13692,325.475896 211.466405,348.434912 284.557379,313.945383 C326.365906,294.220079 371.162942,327.471888 320.681279,361.716594 C278.485164,390.337156 181.261725,398.542148 183.917044,423.092518 C185.385799,436.727834 255.96425,403.928268 268.78866,433.320705 C279.450735,457.748663 254.186104,485.821772 183.587254,491.520722 C111.662444,497.328483 55.7239478,482.533655 54.8875732,447.200845 C53.9390021,407.199384 138.324432,396.359137 100.408787,383.992144 C62.2823481,371.563944 -17.1800322,375.300905 1.53299797,331.980724 Z M428.731349,246.377801 C442.946316,256.262555 443.388303,268.867572 428.279163,286.35546 C408.692359,309.032249 376.002355,307.978147 366.401047,299.684746 C356.79974,291.391346 378.504679,269.914873 386.790226,257.541079 C395.079174,245.170685 410.429706,233.653773 428.731349,246.377801 Z M427.857916,382.61025 C512.134549,362.463306 559.556305,396.238766 540.68008,419.316793 C520.290901,444.237799 471.485387,444.179993 467.650304,492.971302 C460.483322,584.263314 370.681857,600.418273 408.99869,536.682521 C422.421481,514.352566 402.712281,500.2038 391.159433,528.752956 C384.182846,545.982419 351.098453,569.628301 333.616185,578.370545 C254.269402,618.042174 191.004128,560.403211 247.7552,544.384265 C284.684876,533.962259 317.861065,508.895039 339.05262,451.490699 C350.343676,420.901346 390.839843,391.461305 427.857916,382.61025 Z M176.747342,567.609526 C208.69277,608.450868 110.003975,610.732489 73.5570847,623.000873 C37.1101946,635.269257 112.217307,641.498658 178.290895,640.811792 C244.371283,640.124926 234.372188,690.871424 159.268475,715.731223 C43.8793885,753.920309 -58.9810793,714.262281 29.4366283,688.923036 C62.4122241,679.466723 38.9733379,652.19269 2.37005248,656.12687 C-66.7498427,663.556587 -117.979483,629.441094 -106.348437,602.789322 C-93.2214366,572.710019 -60.7388257,592.958973 -27.8890261,595.20659 C4.96077359,597.457607 -23.4725606,565.2599 -66.0086653,543.08976 C-139.07244,505.009484 -77.9491017,440.240033 -15.2108121,498.793684 C74.1758659,582.220737 152.829071,537.030375 176.747342,567.609526 Z M508.16721,666.620623 C461.000446,762.938319 364.157795,753.475206 377.753981,720.597433 C391.346767,687.719659 335.42527,714.504045 309.521459,708.509266 C283.621048,702.521288 268.260316,657.494142 364.439987,648.826705 C482.936578,638.142874 485.707494,521.256592 525.278889,545.664148 C552.48826,562.441368 525.652878,630.917177 508.16721,666.620623 Z M1215.58503,230.734591 C1294.58502,217.157081 1312.08089,244.359706 1279.19029,266.132008 C1258.79431,279.638111 1179.36933,322.706668 1237.37836,326.926476 C1295.3942,331.146283 1252.15771,386.303007 1184.02719,437.651363 C1115.90006,488.999719 967.059396,516.739596 973.563398,473.436417 C980.0708,430.133237 1155.34226,409.353832 1123.78102,363.653421 C1110.07264,343.802305 1043.03008,426.131051 1013.26739,378.761079 C983.501295,331.391107 1166.06214,239.242212 1215.58503,230.734591 Z M701.404066,311.885124 C726.621098,290.537864 778.190727,321.365239 731.80594,363.668722 C721.069067,373.461667 693.472107,382.839772 709.958205,392.503505 C759.770088,421.698723 911.585665,270.040685 936.700701,319.797688 C948.777133,343.722397 888.228377,397.226561 822.137789,430.651787 C773.349275,455.324569 791.137533,500.528532 863.551928,455.991033 C935.969723,411.450134 948.746534,463.951201 908.631155,498.406727 C868.519177,532.858852 612.234981,652.18657 594.773113,588.416815 C581.183727,538.819628 724.370366,547.905305 706.551509,515.860612 C693.472107,492.347342 593.88914,554.780768 558.639013,514.235255 C524.524452,475.002268 652.224563,449.006759 644.047812,425.483288 C637.591409,406.920897 576.48507,433.076221 575.301906,387.634235 C574.387334,352.413636 640.375924,363.536109 701.404066,311.885124 Z M1055.68348,628.931385 C1071.01361,548.289202 1213.05449,473.111345 1267.55143,452.896394 C1353.30021,421.103326 1442.90109,431.702149 1392.32083,457.714659 C1341.74057,483.733971 1208.78422,569.884686 1277.21733,575.797857 C1310.89671,578.708538 1348.96535,603.694149 1277.21733,662.955069 C1231.67232,700.5763 1072.93795,752.563918 1064.26822,719.32231 C1055.59848,686.080701 1246.35647,628.268321 1187.10648,622.484363 C1127.85648,616.703805 1048.5199,666.641025 1055.68348,628.931385 Z M846.516747,599.985411 C892.799537,576.849578 935.600834,548.830874 984.872134,538.255853 C1049.13018,524.464122 985.752707,611.407114 924.068385,639.612836 C896.440827,652.245055 929.521819,669.08008 956.10561,656.172434 C1028.34661,621.10485 1059.76505,648.04565 985.164525,697.659839 C966.61809,709.99623 909.312835,739.201648 839.730553,748.12411 C769.488692,757.134979 771.314437,731.275483 793.049975,721.581148 C824.308623,707.643202 845.721171,677.424486 761.913723,702.947349 C612.100685,748.569553 523.356588,740.973219 557.460949,702.947349 C589.314579,667.437722 696.703709,674.867439 846.516747,599.985411 Z" id="ev3-pattern"></path>
</g>
</g>
</svg>
\ No newline at end of file
static/images/wedo2/wedo2.svg 0 → 100644
View file @ 641e9895
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>wedo2-block-icon</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="0 18.9025641 31.0588235 18.9025641 31.0588235 0.424182751 0 0.424182751"></polygon>
</defs>
<g id="wedo2-block-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="WeDo" transform="translate(4.000000, 10.000000)">
<path d="M19.5128913,1.16923077 L18.7825384,1.16923077 C18.4644208,1.16923077 18.2065384,1.38281026 18.2065384,1.6478359 L18.2065384,2.72820513 L20.0888913,2.72820513 L20.0888913,1.6478359 C20.0888913,1.38281026 19.831009,1.16923077 19.5128913,1.16923077" id="Fill-1" fill="#7C87A5"></path>
<path d="M20.9099405,1.16923077 L20.1795875,1.16923077 C19.8614699,1.16923077 19.6035875,1.38281026 19.6035875,1.6478359 L19.6035875,2.72820513 L21.4859405,2.72820513 L21.4859405,1.6478359 C21.4859405,1.38281026 21.2280581,1.16923077 20.9099405,1.16923077 Z" id="Stroke-3"></path>
<path d="M5.54051765,1.16923077 L4.81204706,1.16923077 C4.49204706,1.16923077 4.23604706,1.38281026 4.23604706,1.6478359 L4.23604706,2.72820513 L6.1184,2.72820513 L6.1184,1.6478359 C6.1184,1.38281026 5.86051765,1.16923077 5.54051765,1.16923077" id="Fill-5" fill="#7C87A5"></path>
<path d="M6.93756678,1.16923077 L6.20909619,1.16923077 C5.88909619,1.16923077 5.63309619,1.38281026 5.63309619,1.6478359 L5.63309619,2.72820513 L7.51544913,2.72820513 L7.51544913,1.6478359 C7.51544913,1.38281026 7.25756678,1.16923077 6.93756678,1.16923077 Z" id="Stroke-7"></path>
<path d="M22.3051073,1.16923077 L21.5747543,1.16923077 C21.2566367,1.16923077 21.0006367,1.38281026 21.0006367,1.6478359 L21.0006367,2.72820513 L22.8829896,2.72820513 L22.8829896,1.6478359 C22.8829896,1.38281026 22.6232249,1.16923077 22.3051073,1.16923077" id="Fill-9" fill="#7C87A5"></path>
<path d="M23.7021564,1.16923077 L22.9718035,1.16923077 C22.6536858,1.16923077 22.3976858,1.38281026 22.3976858,1.6478359 L22.3976858,2.72820513 L24.2800388,2.72820513 L24.2800388,1.6478359 C24.2800388,1.38281026 24.020274,1.16923077 23.7021564,1.16923077 Z" id="Stroke-11"></path>
<path d="M25.1010879,1.16923077 L24.3707349,1.16923077 C24.0526173,1.16923077 23.7947349,1.38281026 23.7947349,1.6478359 L23.7947349,2.72820513 L25.6770879,2.72820513 L25.6770879,1.6478359 C25.6770879,1.38281026 25.4192055,1.16923077 25.1010879,1.16923077" id="Fill-13" fill="#7C87A5"></path>
<path d="M26.498137,1.16923077 L25.7677841,1.16923077 C25.4496664,1.16923077 25.1917841,1.38281026 25.1917841,1.6478359 L25.1917841,2.72820513 L27.074137,2.72820513 L27.074137,1.6478359 C27.074137,1.38281026 26.8162547,1.16923077 26.498137,1.16923077 Z" id="Stroke-15"></path>
<path d="M13.9246948,1.16923077 L13.1943419,1.16923077 C12.8762242,1.16923077 12.6183419,1.38281026 12.6183419,1.6478359 L12.6183419,2.72820513 L14.5006948,2.72820513 L14.5006948,1.6478359 C14.5006948,1.38281026 14.2428125,1.16923077 13.9246948,1.16923077" id="Fill-17" fill="#7C87A5"></path>
<path d="M15.3217439,1.16923077 L14.591391,1.16923077 C14.2732734,1.16923077 14.015391,1.38281026 14.015391,1.6478359 L14.015391,2.72820513 L15.8977439,2.72820513 L15.8977439,1.6478359 C15.8977439,1.38281026 15.6398616,1.16923077 15.3217439,1.16923077 Z" id="Stroke-19"></path>
<path d="M16.7169107,1.16923077 L15.9865578,1.16923077 C15.6684401,1.16923077 15.4124401,1.38281026 15.4124401,1.6478359 L15.4124401,2.72820513 L17.2947931,2.72820513 L17.2947931,1.6478359 C17.2947931,1.38281026 17.0350284,1.16923077 16.7169107,1.16923077" id="Fill-21" fill="#7C87A5"></path>
<path d="M18.1139599,1.16923077 L17.3836069,1.16923077 C17.0654893,1.16923077 16.8094893,1.38281026 16.8094893,1.6478359 L16.8094893,2.72820513 L18.6918422,2.72820513 L18.6918422,1.6478359 C18.6918422,1.38281026 18.4320775,1.16923077 18.1139599,1.16923077 Z" id="Stroke-23"></path>
<path d="M11.1287142,1.16923077 L10.4002436,1.16923077 C10.0802436,1.16923077 9.8242436,1.38281026 9.8242436,1.6478359 L9.8242436,2.72820513 L11.7065965,2.72820513 L11.7065965,1.6478359 C11.7065965,1.38281026 11.4487142,1.16923077 11.1287142,1.16923077" id="Fill-25" fill="#7C87A5"></path>
<path d="M12.5257633,1.16923077 L11.7972927,1.16923077 C11.4772927,1.16923077 11.2212927,1.38281026 11.2212927,1.6478359 L11.2212927,2.72820513 L13.1036457,2.72820513 L13.1036457,1.6478359 C13.1036457,1.38281026 12.8457633,1.16923077 12.5257633,1.16923077 Z" id="Stroke-27"></path>
<path d="M8.33461592,1.16923077 L7.60426298,1.16923077 C7.28614533,1.16923077 7.03014533,1.38281026 7.03014533,1.6478359 L7.03014533,2.72820513 L8.91249827,2.72820513 L8.91249827,1.6478359 C8.91249827,1.38281026 8.65273356,1.16923077 8.33461592,1.16923077" id="Fill-29" fill="#7C87A5"></path>
<path d="M9.73166505,1.16923077 L9.00131211,1.16923077 C8.68319446,1.16923077 8.42719446,1.38281026 8.42719446,1.6478359 L8.42719446,2.72820513 L10.3095474,2.72820513 L10.3095474,1.6478359 C10.3095474,1.38281026 10.0497827,1.16923077 9.73166505,1.16923077 Z" id="Stroke-31"></path>
<path d="M27.8933038,1.16923077 L27.1629509,1.16923077 C26.8448332,1.16923077 26.5888332,1.38281026 26.5888332,1.6478359 L26.5888332,2.72820513 L28.4711862,2.72820513 L28.4711862,1.6478359 C28.4711862,1.38281026 28.2114215,1.16923077 27.8933038,1.16923077" id="Fill-33" fill="#7C87A5"></path>
<path d="M29.2903529,1.16923077 L28.56,1.16923077 C28.2418824,1.16923077 27.9858824,1.38281026 27.9858824,1.6478359 L27.9858824,2.72820513 L29.8682353,2.72820513 L29.8682353,1.6478359 C29.8682353,1.38281026 29.6084706,1.16923077 29.2903529,1.16923077 Z" id="Stroke-35"></path>
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,2.53333333 L29.6470588,2.53333333 C30.1665882,2.53333333 30.5882353,2.97778275 30.5882353,3.52540793 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268" id="Fill-37" fill="#FFFFFF"></path>
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,2.53333333 L29.6470588,2.53333333 C30.1665882,2.53333333 30.5882353,2.97778275 30.5882353,3.52540793 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268 Z" id="Stroke-39" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Fill-41" fill="#FFFFFF"></path>
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Stroke-43" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8.94117647,2.53333333 L7.05882353,2.53333333 C5.50023529,2.53333333 4.23529412,3.86668159 4.23529412,5.50955711 L4.23529412,7.49569044 C4.23529412,8.04331562 4.65694118,8.48776503 5.17647059,8.48776503 L8,8.48776503 C8.51952941,8.48776503 8.94117647,8.04331562 8.94117647,7.49569044 L8.94117647,5.50955711 C8.94117647,3.86668159 10.2061176,2.53333333 11.7647059,2.53333333 L12.7058824,2.53333333 L8.94117647,2.53333333 Z" id="Fill-45" fill="#4C97FF"></path>
<path d="M8.94117647,2.53333333 L7.05882353,2.53333333 C5.50023529,2.53333333 4.23529412,3.86668159 4.23529412,5.50955711 L4.23529412,7.49569044 C4.23529412,8.04331562 4.65694118,8.48776503 5.17647059,8.48776503 L8,8.48776503 C8.51952941,8.48776503 8.94117647,8.04331562 8.94117647,7.49569044 L8.94117647,5.50955711 C8.94117647,3.86668159 10.2061176,2.53333333 11.7647059,2.53333333 L12.7058824,2.53333333 L8.94117647,2.53333333 Z" id="Stroke-47" stroke="#3D79CC" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<polyline id="Stroke-50" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" points="0.470588235 10.4738984 28.4310588 10.4738984 30.5882353 13.448138"></polyline>
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Stroke-52" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M17.3069176,8.96410256 L16.5765647,8.96410256 C16.2584471,8.96410256 16.0005647,9.17768205 16.0005647,9.44270769 L16.0005647,10.5230769 L17.8829176,10.5230769 L17.8829176,9.44270769 C17.8829176,9.17768205 17.6250353,8.96410256 17.3069176,8.96410256" id="Fill-54" fill="#7C87A5"></path>
<path d="M17.3069176,8.96410256 L16.5765647,8.96410256 C16.2584471,8.96410256 16.0005647,9.17768205 16.0005647,9.44270769 L16.0005647,10.5230769 L17.8829176,10.5230769 L17.8829176,9.44270769 C17.8829176,9.17768205 17.6250353,8.96410256 17.3069176,8.96410256 Z" id="Stroke-56"></path>
<path d="M20.1782588,8.96410256 L19.4497882,8.96410256 C19.1297882,8.96410256 18.8737882,9.17768205 18.8737882,9.44270769 L18.8737882,10.5230769 L20.7561412,10.5230769 L20.7561412,9.44270769 C20.7561412,9.17768205 20.4982588,8.96410256 20.1782588,8.96410256" id="Fill-58" fill="#7C87A5"></path>
<path d="M20.1782588,8.96410256 L19.4497882,8.96410256 C19.1297882,8.96410256 18.8737882,9.17768205 18.8737882,9.44270769 L18.8737882,10.5230769 L20.7561412,10.5230769 L20.7561412,9.44270769 C20.7561412,9.17768205 20.4982588,8.96410256 20.1782588,8.96410256 Z" id="Stroke-60"></path>
<path d="M23.0514824,8.96410256 L22.3211294,8.96410256 C22.0030118,8.96410256 21.7451294,9.17768205 21.7451294,9.44270769 L21.7451294,10.5230769 L23.6274824,10.5230769 L23.6274824,9.44270769 C23.6274824,9.17768205 23.3696,8.96410256 23.0514824,8.96410256" id="Fill-62" fill="#7C87A5"></path>
<path d="M23.0514824,8.96410256 L22.3211294,8.96410256 C22.0030118,8.96410256 21.7451294,9.17768205 21.7451294,9.44270769 L21.7451294,10.5230769 L23.6274824,10.5230769 L23.6274824,9.44270769 C23.6274824,9.17768205 23.3696,8.96410256 23.0514824,8.96410256 Z" id="Stroke-64"></path>
<path d="M25.9228235,8.96410256 L25.1943529,8.96410256 C24.8743529,8.96410256 24.6183529,9.17768205 24.6183529,9.44270769 L24.6183529,10.5230769 L26.5007059,10.5230769 L26.5007059,9.44270769 C26.5007059,9.17768205 26.2428235,8.96410256 25.9228235,8.96410256" id="Fill-66" fill="#7C87A5"></path>
<path d="M25.9228235,8.96410256 L25.1943529,8.96410256 C24.8743529,8.96410256 24.6183529,9.17768205 24.6183529,9.44270769 L24.6183529,10.5230769 L26.5007059,10.5230769 L26.5007059,9.44270769 C26.5007059,9.17768205 26.2428235,8.96410256 25.9228235,8.96410256 Z" id="Stroke-68"></path>
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,10.4699301 L28.4310588,10.4699301 L30.5882353,13.448138 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268" id="Fill-70" fill="#E6E7E8"></path>
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,10.4699301 L28.4310588,10.4699301 L30.5882353,13.448138 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268 Z" id="Stroke-72" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,10.4699301 L11.7647059,10.4699301 L11.7647059,18.4065268 Z" id="Fill-74" fill="#E6E7E8"></path>
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,10.4699301 L11.7647059,10.4699301 L11.7647059,18.4065268 Z" id="Stroke-76" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-79"></g>
<polygon id="Fill-78" fill="#E6E7E8" mask="url(#mask-2)" points="15.5294118 14.4382284 26.8235294 14.4382284 26.8235294 10.4699301 15.5294118 10.4699301"></polygon>
<polygon id="Stroke-80" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-2)" points="15.5294118 14.4382284 26.8235294 14.4382284 26.8235294 10.4699301 15.5294118 10.4699301"></polygon>
<path d="M28.432,10.4738984 L30.5891765,7.68021632" id="Stroke-81" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-2)"></path>
</g>
</g>
</svg>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment