diff --git a/.tx/config b/.tx/config index c1bc2406a..2fedccb09 100644 --- a/.tx/config +++ b/.tx/config @@ -145,3 +145,14 @@ file_filter = localizations/preview/.json source_file = src/views/preview/l10n.json source_lang = en type = KEYVALUEJSON + +[scratch-website.ev3-l10njson] +source_file = src/views/ev3/l10n.json +source_lang = en +type = KEYVALUEJSON + +[scratch-website.microbit-l10njson] +source_file = src/views/microbit/l10n.json +source_lang = en +type = KEYVALUEJSON + diff --git a/src/components/os-chooser/os-chooser.jsx b/src/components/os-chooser/os-chooser.jsx new file mode 100644 index 000000000..9ec87de6c --- /dev/null +++ b/src/components/os-chooser/os-chooser.jsx @@ -0,0 +1,51 @@ +const classNames = require('classnames'); +const injectIntl = require('react-intl').injectIntl; +const FormattedMessage = require('react-intl').FormattedMessage; +const PropTypes = require('prop-types'); +const React = require('react'); + + +const FlexRow = require('../../components/flex-row/flex-row.jsx'); +const Button = require('../../components/forms/button.jsx'); + +require('./os-chooser.scss'); + +const OS_ENUM = { + WINDOWS: 'Windows', + MACOS: 'macOS' +}; + +const OSChooser = props => ( +
+ + + + + +
+); + +OSChooser.propTypes = { + currentOS: PropTypes.string, + handleSetOS: PropTypes.func +}; + +const wrappedOSChooser = injectIntl(OSChooser); + +module.exports = wrappedOSChooser; diff --git a/src/components/os-chooser/os-chooser.scss b/src/components/os-chooser/os-chooser.scss new file mode 100644 index 000000000..7c0c8e11c --- /dev/null +++ b/src/components/os-chooser/os-chooser.scss @@ -0,0 +1,40 @@ +@import "../../colors"; + +.os-chooser { + display: flex; + position: sticky; + top: 50px; + z-index: 9; + box-shadow: 0 0 3px $box-shadow-gray; + background-color: $ui-white; + padding: 0; + height: 5rem; + + .inner { + justify-content: flex-start; + } + + span { + margin-right: 1rem; + font-weight: 600; + } + + .button { + display: flex; + margin-right: 1rem; + border-radius: 1.6rem; + background-color: $active-gray; + padding: .5rem 1.1rem; + align-items: center; + box-sizing: border-box; + + img { + margin-right: .3rem; + height: 1.5rem; + } + + &.active { + background-color: $ui-blue; + } + } +} diff --git a/src/l10n.json b/src/l10n.json index dee03efb3..6c93df094 100644 --- a/src/l10n.json +++ b/src/l10n.json @@ -103,6 +103,8 @@ "navigation.signOut": "Sign out", + "oschooser.choose": "Choose your OS:", + "parents.FaqAgeRangeA": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents.", "parents.FaqAgeRangeQ": "What is the age range for Scratch?", "parents.FaqResourcesQ": "What resources are available for learning Scratch?", diff --git a/src/routes.json b/src/routes.json index ae7d8859a..80b33bb89 100644 --- a/src/routes.json +++ b/src/routes.json @@ -301,6 +301,20 @@ "view": "wedo2/wedo2", "title": "LEGO WeDo 2.0" }, + { + "name": "ev3", + "pattern": "^/ev3/?$", + "routeAlias": "/ev3/?$", + "view": "ev3/ev3", + "title": "LEGO MINDSTORMS EV3" + }, + { + "name": "microbit", + "pattern": "^/microbit/?$", + "routeAlias": "/microbit/?$", + "view": "microbit/microbit", + "title": "micro:bit" + }, { "name": "donate-redirect", "pattern": "^/info/donate/?", diff --git a/src/views/ev3/ev3.jsx b/src/views/ev3/ev3.jsx new file mode 100644 index 000000000..38df33185 --- /dev/null +++ b/src/views/ev3/ev3.jsx @@ -0,0 +1,389 @@ +/* + * TODO: Refactor this file and views/microbit/microbit.jsx + * into something that can be used in both places (scratch-www#1982) + */ + +const bindAll = require('lodash.bindall'); +const injectIntl = require('react-intl').injectIntl; +const FormattedMessage = require('react-intl').FormattedMessage; +const React = require('react'); + + +const Page = require('../../components/page/www/page.jsx'); +const render = require('../../lib/render.jsx'); + +const FlexRow = require('../../components/flex-row/flex-row.jsx'); +const OSChooser = require('../../components/os-chooser/os-chooser.jsx'); + +require('./ev3.scss'); + +class EV3 extends React.Component { + constructor (props) { + super(props); + bindAll(this, [ + 'onSetOS' + ]); + + this.OS_ENUM = { + WINDOWS: 'Windows', + MACOS: 'macOS' + }; + + this.state = { + OS: this.OS_ENUM.WINDOWS + }; + } + + onSetOS (os) { + this.setState({ + OS: os + }); + } + + render () { + return ( +
+
+ + + +

LEGO MINDSTORMS EV3

+ + LEGO MINDSTORMS EV3 + + ) + }} + /> + + + + + + + + + + Windows 10+ + + + + macOS 10.13+ + + + + Bluetooth + + + + Scratch Link + + + + +
+ +
+ +
+ +
+ +

+ + +
+ +
2
+ + + + +
+ +
+ + +
+ + +
+
+ +

+ +

+ +
+ +
1
+ +
+
+ +
+

+
+
+
+ +
2
+ +
+
+ +
+

+ + Scratch 3.0 + + ) + }} + /> +

+
+
+
+ +
3
+ +
+
+ +
+

+
+
+ +
+

+ +

+ +
+
+
+ +
+

+
+
+
+
+
+ +
+

+
+
+
+
+ +
+ +
+

+ {this.state.OS === this.OS_ENUM.WINDOWS ? + : + + } +

+
+
+ + +
+ + +
+
+ +

+

Make a motor move

+ +
+ +
1
+ + + Plug a motor into port A on the EV3 hub + +
+ +
+ + +
+
+ +
2
+ + + Find the “motor A turn this way” block + and click on it. + +
+ +
+ + +
+ + +
+

+

+

+ + + + ) + }} + /> +

+

+

+ +

+

+

+ +

+

+

+ + + + ) + }} + /> +

+
+
+ ); + } +} + +const WrappedEV3 = injectIntl(EV3); + +render(, document.getElementById('app')); diff --git a/src/views/ev3/ev3.scss b/src/views/ev3/ev3.scss new file mode 100644 index 000000000..dc78f1c38 --- /dev/null +++ b/src/views/ev3/ev3.scss @@ -0,0 +1,313 @@ +// TODO: Refactor this file and views/microbit/microbit.scss into something that can be used in both places (scratch-www#1982) + +@import "../../colors"; +@import "../../frameless"; + +#view { + padding: 0; +} + +.ev3 { + &>div { + padding: 4rem 0; + } + + h2 { + margin-bottom: 1rem; + } + + h3 { + margin-bottom: 2rem; + } + + span { + line-height: 1.7rem; + } + + .download { + display: inline-block; + + &::after { + display: inline-block; + margin-left: .5rem; + background-image: url("/svgs/extensions/download.svg"); + background-repeat: no-repeat; + width: 20px; + height: 20px; + vertical-align: text-top; + content: ""; + } + } + + .extension-header { + background-color: $ui-aqua; + background-image: url("/images/ev3/ev3-pattern.svg"); + background-size: cover; + color: $ui-white; + + .inner { + justify-content: space-between; + flex-wrap: nowrap; + } + + .extension-info { + max-width: $cols7; + align-items: flex-start; + + .extension-copy { + margin-bottom: 5rem; + align-items: flex-start; + + h2 { + display: flex; + margin-bottom: 2rem; + color: $ui-white; + } + + h2 img { + padding-right: .5rem; + max-height: 100%; + } + + span { + font-size: 1.2rem; + } + + a { + border-bottom: 1px solid $ui-white; + color: $ui-white; + } + } + + .extension-requirements-container { + font-weight: 500; + align-items: flex-start; + + .requirements-header { + margin-bottom: 1.5rem; + } + + .extension-requirements { + justify-content: space-between; + } + + .extension-requirements span { + display: flex; + margin-right: 1rem; + font-size: 15px; // TODO: change to rem later + align-items: center; + } + + .extension-requirements span img { + padding-right: .5rem; + } + } + } + + .extension-image { + width: 100%; + max-width: $cols5; + + img { + max-width: 100%; + max-height: 100%; + } + + } + } + + .os-chooser { + padding: 0; + } + + .install-scratch-link, + .getting-started, + .faq { + .inner { + align-items: flex-start; + } + } + + .install-scratch-link { + padding: 2rem 0; + + .step-image.badge { + height: initial; + } + + .download-button { + display: flex; + align-items: center; + + img { + margin-left: .5rem; + } + } + } + + .screenshot { + border-radius: .5rem; + } + + .getting-started { + .connecting-ev3 { + width: 100%; + align-items: flex-start; + } + + .tip-box { + margin-top: 4rem; + border: 1px solid $ui-blue-25percent; + border-radius: 1rem; + background-color: $ui-blue-10percent; + padding: 2rem 3rem; + width: 100%; + box-sizing: border-box; + + .tip-content { + align-items: flex-start; + + p { + margin-top: 0; + } + } + } + } + + .things-to-try { + .project-card { + margin: 0 1.5rem; + border: 1px solid $ui-border; + border-radius: .5rem; + background-color: $ui-white; + overflow: hidden; + flex-basis: 0; + flex-grow: 1; + } + + .project-card-image { + img { + max-width: 100%; + } + } + + .project-card-info { + padding: 1rem; + + p { + margin: .2rem 0; + } + } + + .section-separator { + margin: 4rem 0; + border-top: 1px solid $ui-border; + width: 100%; + } + } + + .faq { + p { + margin-bottom: 1.25rem; + margin-left: 0; + max-width: $cols8; + text-align: left; + } + + .faq-title { + margin-bottom: 1rem; + font-size: 1.4rem; + } + + ul { + max-width: $cols8; + } + + section { + ul { + max-width: $cols8; + } + + .nav-spacer { + display: block; + visibility: hidden; + margin-top: -50px; // height of nav bar + height: 50px; + } + + } + + ul, + ol { + &.indented { + padding-left: $cols1 + (20px / $em); + } + } + } + + .blue { + background-color: $ui-blue-10percent; + } + + .inner { + max-width: $cols12; + } +} + +.steps { + display: flex; + width: 100%; + justify-content: space-between; + align-items: flex-start; +} + +.step { + flex-basis: 0; + flex-grow: 1; + + .step-number-row { + padding-bottom: 1.5rem; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: flex-start; + + .step-content { + text-align: left; + align-items: flex-start; + + .step-description { + margin-bottom: 1rem; + } + } + + .step-number { + display: inline-flex; + border-radius: 2rem; + background-color: $ui-blue; + width: 2rem; + height: 2rem; + color: $ui-white; + justify-content: center; + align-items: center; + flex-shrink: 0; + } + } + + .step-content { + display: flex; + padding: 0 2rem; + text-align: center; + flex-flow: column; + align-items: center; + box-sizing: border-box; + + .step-image { + height: 10rem; + + img { + width: auto; + height: 100%; + } + } + } +} diff --git a/src/views/ev3/l10n.json b/src/views/ev3/l10n.json new file mode 100644 index 000000000..b1bab0f04 --- /dev/null +++ b/src/views/ev3/l10n.json @@ -0,0 +1,32 @@ +{ + "ev3.headerText": "{ev3Link} is an invention kit with motors and sensors you can use to build interactive robotic creations. Connecting it to Scratch expands the possibilities: build a robotic puppet and tell stories, make your own musical instruments and game controllers, or whatever else you can imagine.", + "ev3.requirements": "Requirements", + "ev3.installScratchLink": "Install Scratch Link", + "ev3.installScratchLinkStep": "Download and install Scratch Link.", + "ev3.windowsDownload": "Download for Windows", + "ev3.macosDownload": "Download for macOS", + "ev3.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.", + "ev3.gettingStarted": "Getting Started", + "ev3.connectingEV3": "Connecting EV3 to Scratch", + "ev3.turnOnEV3": "Turn on your EV3 by holding down the center button.", + "ev3.useScratch3": "Use the {scratch3Link} editor.", + "ev3.addExtension": "Add the EV3 extension.", + "ev3.firstTimeConnecting": "First time connecting your EV3?", + "ev3.pairingDescription": "After clicking the connect button in Scratch, you will need to pair it with your computer:", + "ev3.acceptConnection": "Accept the connection.", + "ev3.acceptPasscode": "Accept the passcode.", + "ev3.windowsFinalizePairing": "Wait for your device to be ready.", + "ev3.macosFinalizePairing": "Enter the passcode on your computer.", + "ev3.thingsToTry": "Things to Try", + "ev3.troubleshootingTitle": "Troubleshooting", + "ev3.makeSurePairedTitle": "Make sure your computer is paired with your EV3", + "ev3.makeSurePairedText": "Your computer needs to be paired with your EV3 before it can connect to Scratch. We try to do this automatically the first time you add the EV3 extension, but if it isn't working you can try these {pairingInstructionLink}.", + "ev3.pairingInstructionText": "bluetooth pairing instructions from LEGO", + "ev3.closeScratchCopiesTitle": "Close other copies of Scratch", + "ev3.closeScratchCopiesText": "Only one copy of Scratch can connect with the EV3 at a time. If you have Scratch open in other browser tabs, close it and try again.", + "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.firmwareUpdateText": "firmware update instructions from LEGO" +} diff --git a/src/views/microbit/l10n.json b/src/views/microbit/l10n.json new file mode 100644 index 000000000..177e06ec7 --- /dev/null +++ b/src/views/microbit/l10n.json @@ -0,0 +1,38 @@ +{ + "microbit.headerText": "{microbitLink} is a tiny circuit board designed to help kids learn to code and create with technology. It has many features including an LED display, buttons, and a motion sensor. You can connect it to Scratch and build creative projects that combine the magic of the digital and physical worlds.", + "microbit.requirements": "Requirements", + "microbit.installScratchLink": "Install Scratch Link", + "microbit.installScratchLinkStep": "Download and install Scratch Link.", + "microbit.windowsDownload": "Download for Windows", + "microbit.macosDownload": "Download for macOS", + "microbit.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.", + "microbit.gettingStarted": "Getting Started", + "microbit.installMicrobitHex": "Install Scratch micro:bit HEX", + "microbit.connectUSB": "Connect a micro:bit to your computer with a USB cable", + "microbit.downloadHex": "Download the Scratch micro:bit HEX file", + "microbit.dragDropHex": "Drag and drop the HEX file onto your micro:bit", + "microbit.connectingMicrobit": "Connecting micro:bit to Scratch", + "microbit.powerMicrobit": "Power your micro:bit with USB or a battery pack.", + "microbit.useScratch3": "Use the {scratch3Link} editor.", + "microbit.addExtension": "Add the micro:bit extension.", + "microbit.thingsToTry": "Things to Try", + "microbit.displayHelloTitle": "Display “Hello!”", + "microbit.displayHelloBlock": "Find the {displayHelloText} block and click on it.", + "microbit.displayHelloText": "“display hello”", + "microbit.helloScroll": "You should see {helloText} scroll across the micro:bit display", + "microbit.helloText": "“hello”", + "microbit.starterProjects": "Starter Projects", + "microbit.heartBeat": "Heart Beat", + "microbit.heartBeatDescription": "Press the buttons to animate the heart.", + "microbit.tiltGuitar": "Tilt Guitar", + "microbit.tiltGuitarDescription": "Make music by tilting your micro:bit.", + "microbit.oceanAdventure": "Ocean Adventure", + "microbit.oceanAdventureDescription": "Build your own controller and swim toward the saxophones.", + "microbit.troubleshootingTitle": "Troubleshooting", + "microbit.closeScratchCopiesTitle": "Close other copies of Scratch", + "microbit.closeScratchCopiesText": "Only one copy of Scratch can connect with the micro:bit at a time. If you have Scratch open in other browser tabs, close it and try again.", + "microbit.otherComputerConnectedTitle": "Make sure no other computer is connected to your micro:bit", + "microbit.otherComputerConnectedText": "Only one computer can be connected to an micro:bit at a time. If you have another computer connected to your micro:bit, disconnect the micro:bit or close Scratch on that computer and try again.", + "microbit.resetButtonTitle": "Make sure you aren’t hitting the “reset” button", + "microbit.resetButtonText": "Sometimes while using the micro:bit you can accidentally press the “reset” button on the back in-between the USB and power ports. Make sure you keep your fingers (and toes) away from it while using Scratch!" +} diff --git a/src/views/microbit/microbit.jsx b/src/views/microbit/microbit.jsx new file mode 100644 index 000000000..3bae1c102 --- /dev/null +++ b/src/views/microbit/microbit.jsx @@ -0,0 +1,381 @@ +/* + * TODO: Refactor this file and views/ev3/ev3.jsx + * into something that can be used in both places (scratch-www#1982) + */ + +const bindAll = require('lodash.bindall'); +const injectIntl = require('react-intl').injectIntl; +const FormattedMessage = require('react-intl').FormattedMessage; +const React = require('react'); + + +const Page = require('../../components/page/www/page.jsx'); +const render = require('../../lib/render.jsx'); + +const FlexRow = require('../../components/flex-row/flex-row.jsx'); +const OSChooser = require('../../components/os-chooser/os-chooser.jsx'); + +require('./microbit.scss'); + +class MicroBit extends React.Component { + constructor (props) { + super(props); + bindAll(this, [ + 'onSetOS' + ]); + + this.OS_ENUM = { + WINDOWS: 'Windows', + MACOS: 'macOS' + }; + + this.state = { + OS: this.OS_ENUM.WINDOWS + }; + } + + onSetOS (os) { + this.setState({ + OS: os + }); + } + + render () { + return ( +
+
+ + + +

micro:bit

+ + micro:bit + + ) + }} + /> + + + + + + + + + Windows 10+ + + + + macOS 10.13+ + + + + Bluetooth 4.0 + + + + Scratch Link + + + + +
+ +
+ +
+ +
+ +

+ + +
+ +
2
+ + + + +
+ +
+ + +
+ + +
+
+ +

+ +

+ +
+ +
1
+ +
+
+ +
+

+ +

+
+
+
+ +
2
+ +
+
+ +
+ + + +
+
+
+ +
3
+ +
+
+ +
+

+ +

+
+
+ + +
+ +

+ +
+ +
1
+ +
+
+ +
+

+
+
+
+ +
2
+ +
+
+ +
+

+ + Scratch 3.0 + + ) + }} + /> +

+
+
+
+ +
3
+ +
+
+ +
+

+
+
+ + + +
+
+ +

+

+ +
+ +
1
+ + + + + + ) + }} + /> + +
+ +
+ + +
+
+ +
2
+ + + + ) + }} + /> +
+ +
+ + +
+ + +
+

+

+

+ +

+

+

+ +

+

+

+ +

+
+
+ ); + } +} + +const WrappedMicroBit = injectIntl(MicroBit); + +render(, document.getElementById('app')); diff --git a/src/views/microbit/microbit.scss b/src/views/microbit/microbit.scss new file mode 100644 index 000000000..6db4038e0 --- /dev/null +++ b/src/views/microbit/microbit.scss @@ -0,0 +1,321 @@ +// TODO: Refactor this file and views/ev3/ev3.scss into something that can be used in both places (scratch-www#1982) + +@import "../../colors"; +@import "../../frameless"; + +#view { + padding: 0; +} + +.microbit { + &>div { + padding: 4rem 0; + } + + h2 { + margin-bottom: 1rem; + } + + h3 { + margin-bottom: 2rem; + } + + span { + line-height: 1.7rem; + } + + .download { + display: inline-block; + + &::after { + display: inline-block; + margin-left: .5rem; + background-image: url("/svgs/extensions/download.svg"); + background-repeat: no-repeat; + width: 20px; + height: 20px; + vertical-align: text-top; + content: ""; + } + } + + .extension-header { + background-color: $ui-purple; + background-image: url("/images/microbit/mbit-pattern.svg"); + background-size: cover; + color: $ui-white; + + .inner { + justify-content: space-between; + flex-wrap: nowrap; + } + + .extension-info { + padding-right: $cols1; + max-width: $cols7 + ($gutter / $em); + align-items: flex-start; + + .extension-copy { + margin-bottom: 5rem; + align-items: flex-start; + + h2 { + display: flex; + margin-bottom: 2rem; + color: $ui-white; + } + + h2 img { + padding-right: .5rem; + max-height: 100%; + } + + a { + border-bottom: 1px solid $ui-white; + color: $ui-white; + } + + span { + font-size: 1.2rem; + } + } + + .extension-requirements-container { + font-weight: 500; + align-items: flex-start; + + .requirements-header { + margin-bottom: 1.5rem; + } + + .extension-requirements { + justify-content: space-between; + } + + .extension-requirements span { + display: flex; + margin-right: 1rem; + font-size: 15px; // TODO: change to rem later + align-items: center; + } + + .extension-requirements span img { + padding-right: .5rem; + } + } + } + + .extension-image { + width: 100%; + max-width: $cols4; + + img { + max-width: 100%; + max-height: 100%; + } + + } + } + + .os-chooser { + padding: 0; + } + + .install-scratch-link, + .getting-started, + .faq { + .inner { + align-items: flex-start; + } + } + + .install-scratch-link { + padding: 2rem 0; + + .step-image.badge { + height: initial; + } + + .download-button { + display: flex; + align-items: center; + + img { + margin-left: .5rem; + } + } + } + + .screenshot { + border-radius: .5rem; + } + + .getting-started { + .install-hex, + .connecting { + width: 100%; + align-items: flex-start; + + a { + margin: 1rem 0; + } + } + + .tip-box { + margin-top: 4rem; + border: 1px solid $ui-blue-25percent; + border-radius: 1rem; + background-color: $ui-blue-10percent; + padding: 0 2rem; + width: 100%; + box-sizing: border-box; + + .tip-content { + align-items: flex-start; + } + } + } + + .things-to-try { + .display-hello { + .step-image { + align-self: center; + } + } + + .project-card { + margin: 0 1.5rem; + border: 1px solid $ui-border; + border-radius: .5rem; + background-color: $ui-white; + overflow: hidden; + flex-basis: 0; + flex-grow: 1; + } + + .project-card-image { + img { + max-width: 100%; + } + } + + .project-card-info { + padding: 1rem; + + p { + margin: .2rem 0; + } + } + } + + .faq { + p { + margin-bottom: 1.25rem; + margin-left: 0; + max-width: $cols8; + text-align: left; + } + + .faq-title { + margin-bottom: 1rem; + font-size: 1.4rem; + } + + ul { + max-width: $cols8; + } + + section { + ul { + max-width: $cols8; + } + + .nav-spacer { + display: block; + visibility: hidden; + margin-top: -50px; // height of nav bar + height: 50px; + } + + } + + ul, + ol { + &.indented { + padding-left: $cols1 + (20px / $em); + } + } + } + + .blue { + background-color: $ui-blue-10percent; + } + + .inner { + max-width: $cols12; + } + + .section-separator { + margin: 4rem 0; + border-top: 1px solid $ui-border; + width: 100%; + } +} + +.steps { + display: flex; + width: 100%; + justify-content: space-between; + align-items: flex-start; +} + +.step { + flex-basis: 0; + flex-grow: 1; + + .step-number-row { + padding-bottom: 1.5rem; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: flex-start; + + .step-content { + text-align: left; + align-items: flex-start; + + .step-description { + margin-bottom: 1rem; + } + } + + .step-number { + display: inline-flex; + border-radius: 2rem; + background-color: $ui-blue; + width: 2rem; + height: 2rem; + color: $ui-white; + justify-content: center; + align-items: center; + flex-shrink: 0; + } + } + + .step-content { + display: flex; + padding: 0 2rem; + text-align: center; + flex-flow: column; + align-items: center; + box-sizing: border-box; + + .step-image { + height: 10rem; + + img { + width: auto; + height: 100%; + } + } + } +} diff --git a/static/images/ev3/ev3-accept-connection.png b/static/images/ev3/ev3-accept-connection.png new file mode 100644 index 000000000..19e57daed Binary files /dev/null and b/static/images/ev3/ev3-accept-connection.png differ diff --git a/static/images/ev3/ev3-connect-1.png b/static/images/ev3/ev3-connect-1.png new file mode 100644 index 000000000..a7ff3d21a Binary files /dev/null and b/static/images/ev3/ev3-connect-1.png differ diff --git a/static/images/ev3/ev3-connect-2.png b/static/images/ev3/ev3-connect-2.png new file mode 100644 index 000000000..e6b912c9b Binary files /dev/null and b/static/images/ev3/ev3-connect-2.png differ diff --git a/static/images/ev3/ev3-connect-3.png b/static/images/ev3/ev3-connect-3.png new file mode 100644 index 000000000..0e0404726 Binary files /dev/null and b/static/images/ev3/ev3-connect-3.png differ diff --git a/static/images/ev3/ev3-enter-pin.png b/static/images/ev3/ev3-enter-pin.png new file mode 100644 index 000000000..6335d81f9 Binary files /dev/null and b/static/images/ev3/ev3-enter-pin.png differ diff --git a/static/images/ev3/ev3-illustration.png b/static/images/ev3/ev3-illustration.png new file mode 100644 index 000000000..e20d07232 Binary files /dev/null and b/static/images/ev3/ev3-illustration.png differ diff --git a/static/images/ev3/ev3-motor-port-a.png b/static/images/ev3/ev3-motor-port-a.png new file mode 100644 index 000000000..8522d4d37 Binary files /dev/null and b/static/images/ev3/ev3-motor-port-a.png differ diff --git a/static/images/ev3/ev3-pattern.svg b/static/images/ev3/ev3-pattern.svg new file mode 100644 index 000000000..c088cfacd --- /dev/null +++ b/static/images/ev3/ev3-pattern.svg @@ -0,0 +1,12 @@ + + + + ev3-pattern + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/static/images/ev3/ev3-pin.png b/static/images/ev3/ev3-pin.png new file mode 100644 index 000000000..a9a5bbf28 Binary files /dev/null and b/static/images/ev3/ev3-pin.png differ diff --git a/static/images/ev3/ev3.svg b/static/images/ev3/ev3.svg new file mode 100644 index 000000000..2aae7fc36 --- /dev/null +++ b/static/images/ev3/ev3.svg @@ -0,0 +1,27 @@ + + + + ev3 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/ev3/mac-bluetooth-on.png b/static/images/ev3/mac-bluetooth-on.png new file mode 100644 index 000000000..cfa8ab9f3 Binary files /dev/null and b/static/images/ev3/mac-bluetooth-on.png differ diff --git a/static/images/ev3/mac-enter-passcode.png b/static/images/ev3/mac-enter-passcode.png new file mode 100644 index 000000000..2f457947c Binary files /dev/null and b/static/images/ev3/mac-enter-passcode.png differ diff --git a/static/images/ev3/mac-rename-ev3-1.png b/static/images/ev3/mac-rename-ev3-1.png new file mode 100644 index 000000000..e39675e6e Binary files /dev/null and b/static/images/ev3/mac-rename-ev3-1.png differ diff --git a/static/images/ev3/mac-rename-ev3-2.png b/static/images/ev3/mac-rename-ev3-2.png new file mode 100644 index 000000000..316bedbd0 Binary files /dev/null and b/static/images/ev3/mac-rename-ev3-2.png differ diff --git a/static/images/ev3/mac-rename-ev3-3.png b/static/images/ev3/mac-rename-ev3-3.png new file mode 100644 index 000000000..e39675e6e Binary files /dev/null and b/static/images/ev3/mac-rename-ev3-3.png differ diff --git a/static/images/ev3/mac-toolbar.png b/static/images/ev3/mac-toolbar.png new file mode 100644 index 000000000..b976abd4d Binary files /dev/null and b/static/images/ev3/mac-toolbar.png differ diff --git a/static/images/ev3/motor-turn-block.png b/static/images/ev3/motor-turn-block.png new file mode 100644 index 000000000..f291d5bb1 Binary files /dev/null and b/static/images/ev3/motor-turn-block.png differ diff --git a/static/images/ev3/starter-distance-instrument.png b/static/images/ev3/starter-distance-instrument.png new file mode 100644 index 000000000..cd820a715 Binary files /dev/null and b/static/images/ev3/starter-distance-instrument.png differ diff --git a/static/images/ev3/starter-flying-game.png b/static/images/ev3/starter-flying-game.png new file mode 100644 index 000000000..b30a225f4 Binary files /dev/null and b/static/images/ev3/starter-flying-game.png differ diff --git a/static/images/ev3/starter-wave-hello.png b/static/images/ev3/starter-wave-hello.png new file mode 100644 index 000000000..669c0c9e8 Binary files /dev/null and b/static/images/ev3/starter-wave-hello.png differ diff --git a/static/images/ev3/win-device-ready.png b/static/images/ev3/win-device-ready.png new file mode 100644 index 000000000..4ac38fe4b Binary files /dev/null and b/static/images/ev3/win-device-ready.png differ diff --git a/static/images/microbit/display-hello-block.png b/static/images/microbit/display-hello-block.png new file mode 100644 index 000000000..2aa0c0afe Binary files /dev/null and b/static/images/microbit/display-hello-block.png differ diff --git a/static/images/microbit/mac-bluetooth-on.png b/static/images/microbit/mac-bluetooth-on.png new file mode 100644 index 000000000..cfa8ab9f3 Binary files /dev/null and b/static/images/microbit/mac-bluetooth-on.png differ diff --git a/static/images/microbit/mac-copy-hex.png b/static/images/microbit/mac-copy-hex.png new file mode 100644 index 000000000..323367c20 Binary files /dev/null and b/static/images/microbit/mac-copy-hex.png differ diff --git a/static/images/microbit/mac-toolbar.png b/static/images/microbit/mac-toolbar.png new file mode 100644 index 000000000..b976abd4d Binary files /dev/null and b/static/images/microbit/mac-toolbar.png differ diff --git a/static/images/microbit/mbit-connect-1.png b/static/images/microbit/mbit-connect-1.png new file mode 100644 index 000000000..20952b513 Binary files /dev/null and b/static/images/microbit/mbit-connect-1.png differ diff --git a/static/images/microbit/mbit-connect-2.png b/static/images/microbit/mbit-connect-2.png new file mode 100644 index 000000000..e6b912c9b Binary files /dev/null and b/static/images/microbit/mbit-connect-2.png differ diff --git a/static/images/microbit/mbit-connect-3.png b/static/images/microbit/mbit-connect-3.png new file mode 100644 index 000000000..0e0404726 Binary files /dev/null and b/static/images/microbit/mbit-connect-3.png differ diff --git a/static/images/microbit/mbit-display-h.png b/static/images/microbit/mbit-display-h.png new file mode 100644 index 000000000..628f0a5cb Binary files /dev/null and b/static/images/microbit/mbit-display-h.png differ diff --git a/static/images/microbit/mbit-hex-download.png b/static/images/microbit/mbit-hex-download.png new file mode 100644 index 000000000..73ff73e78 Binary files /dev/null and b/static/images/microbit/mbit-hex-download.png differ diff --git a/static/images/microbit/mbit-pattern.svg b/static/images/microbit/mbit-pattern.svg new file mode 100644 index 000000000..fefc58ebf --- /dev/null +++ b/static/images/microbit/mbit-pattern.svg @@ -0,0 +1,217 @@ + + + + mbit-pattern + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/microbit/mbit-usb.png b/static/images/microbit/mbit-usb.png new file mode 100644 index 000000000..d9c76e5c5 Binary files /dev/null and b/static/images/microbit/mbit-usb.png differ diff --git a/static/images/microbit/microbit-heart.png b/static/images/microbit/microbit-heart.png new file mode 100644 index 000000000..49ddd7cc6 Binary files /dev/null and b/static/images/microbit/microbit-heart.png differ diff --git a/static/images/microbit/microbit.svg b/static/images/microbit/microbit.svg new file mode 100644 index 000000000..789454f03 --- /dev/null +++ b/static/images/microbit/microbit.svg @@ -0,0 +1,263 @@ + + + + microbit + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/microbit/starter-fish.png b/static/images/microbit/starter-fish.png new file mode 100644 index 000000000..caabaac1a Binary files /dev/null and b/static/images/microbit/starter-fish.png differ diff --git a/static/images/microbit/starter-guitar.png b/static/images/microbit/starter-guitar.png new file mode 100644 index 000000000..684f64098 Binary files /dev/null and b/static/images/microbit/starter-guitar.png differ diff --git a/static/images/microbit/starter-heart.png b/static/images/microbit/starter-heart.png new file mode 100644 index 000000000..362efa004 Binary files /dev/null and b/static/images/microbit/starter-heart.png differ diff --git a/static/images/microbit/win-copy-hex.png b/static/images/microbit/win-copy-hex.png new file mode 100644 index 000000000..70604f67a Binary files /dev/null and b/static/images/microbit/win-copy-hex.png differ diff --git a/static/images/scratchlink/mac-toolbar.png b/static/images/scratchlink/mac-toolbar.png new file mode 100644 index 000000000..43fe68ad9 Binary files /dev/null and b/static/images/scratchlink/mac-toolbar.png differ diff --git a/static/images/scratchlink/windows-toolbar.png b/static/images/scratchlink/windows-toolbar.png new file mode 100644 index 000000000..b89dd2bda Binary files /dev/null and b/static/images/scratchlink/windows-toolbar.png differ diff --git a/static/svgs/app-store-badges/apple-app-store-badge.svg b/static/svgs/app-store-badges/apple-app-store-badge.svg new file mode 100644 index 000000000..749d6b917 --- /dev/null +++ b/static/svgs/app-store-badges/apple-app-store-badge.svg @@ -0,0 +1,58 @@ + + + + Apple App Store + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/svgs/app-store-badges/microsoft-app-store-badge.svg b/static/svgs/app-store-badges/microsoft-app-store-badge.svg new file mode 100644 index 000000000..a2b6f57b1 --- /dev/null +++ b/static/svgs/app-store-badges/microsoft-app-store-badge.svg @@ -0,0 +1,28 @@ + + + + English_get + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/svgs/extensions/bluetooth.svg b/static/svgs/extensions/bluetooth.svg new file mode 100644 index 000000000..57ed2a4ed --- /dev/null +++ b/static/svgs/extensions/bluetooth.svg @@ -0,0 +1,10 @@ + + + + bluetooth + Created with Sketch. + + + + + \ No newline at end of file diff --git a/static/svgs/extensions/download-white.svg b/static/svgs/extensions/download-white.svg new file mode 100644 index 000000000..3e2ef82b2 --- /dev/null +++ b/static/svgs/extensions/download-white.svg @@ -0,0 +1,10 @@ + + + + download-white + Created with Sketch. + + + + + \ No newline at end of file diff --git a/static/svgs/extensions/download.svg b/static/svgs/extensions/download.svg new file mode 100644 index 000000000..1eb934df0 --- /dev/null +++ b/static/svgs/extensions/download.svg @@ -0,0 +1,10 @@ + + + + download + Created with Sketch. + + + + + \ No newline at end of file diff --git a/static/svgs/extensions/mac.svg b/static/svgs/extensions/mac.svg new file mode 100644 index 000000000..da502ff01 --- /dev/null +++ b/static/svgs/extensions/mac.svg @@ -0,0 +1,10 @@ + + + + mac + Created with Sketch. + + + + + \ No newline at end of file diff --git a/static/svgs/extensions/offsite-link.svg b/static/svgs/extensions/offsite-link.svg new file mode 100644 index 000000000..4b88c8079 --- /dev/null +++ b/static/svgs/extensions/offsite-link.svg @@ -0,0 +1,10 @@ + + + + offsite-link + Created with Sketch. + + + + + \ No newline at end of file diff --git a/static/svgs/extensions/scratch-link.svg b/static/svgs/extensions/scratch-link.svg new file mode 100644 index 000000000..2c11932f7 --- /dev/null +++ b/static/svgs/extensions/scratch-link.svg @@ -0,0 +1,13 @@ + + + + scratch-link + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/static/svgs/extensions/windows.svg b/static/svgs/extensions/windows.svg new file mode 100644 index 000000000..aa7179584 --- /dev/null +++ b/static/svgs/extensions/windows.svg @@ -0,0 +1,10 @@ + + + + windows + Created with Sketch. + + + + + \ No newline at end of file