mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
Merge pull request #2041 from LiFaytheGoblin/1991/accessibility-extension-landing
1991/accessibility extension landing
This commit is contained in:
Linda
GitHub
commit
c52eb610b4
11 changed files with 182 additions and 40 deletions
|
|
@ -10,7 +10,11 @@
|
|||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -85,15 +89,15 @@
|
|||
margin-bottom: 5rem;
|
||||
align-items: flex-start;
|
||||
|
||||
h2 {
|
||||
h1, h2 {
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
h2 img {
|
||||
padding-right: .5rem;
|
||||
max-height: 100%;
|
||||
img {
|
||||
padding-right: .5rem;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,10 @@ const InstallScratchLink = ({
|
|||
<FormattedMessage id="installScratchLink.windowsDownload" /> :
|
||||
<FormattedMessage id="installScratchLink.macosDownload" />
|
||||
}
|
||||
<img src="/svgs/extensions/download-white.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/download-white.svg"
|
||||
/>
|
||||
</button>
|
||||
</a>
|
||||
</Step>
|
||||
|
|
@ -50,6 +53,7 @@ const InstallScratchLink = ({
|
|||
</span>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt=""
|
||||
className="screenshot"
|
||||
src={`/images/scratchlink/${
|
||||
currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
||||
|
|
|
|||
|
|
@ -8,7 +8,10 @@ const ProjectCard = props => (
|
|||
target="_blank"
|
||||
>
|
||||
<div className="project-card-image">
|
||||
<img src={props.imageSrc} />
|
||||
<img
|
||||
alt={props.imageAlt}
|
||||
src={props.imageSrc}
|
||||
/>
|
||||
</div>
|
||||
<div className="project-card-info">
|
||||
<h4>{props.title}</h4>
|
||||
|
|
@ -20,6 +23,7 @@ const ProjectCard = props => (
|
|||
ProjectCard.propTypes = {
|
||||
cardUrl: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
imageAlt: PropTypes.string,
|
||||
imageSrc: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ const Raven = require('raven-js');
|
|||
};
|
||||
|
||||
window._locale = updateLocale();
|
||||
document.documentElement.lang = window._locale;
|
||||
})();
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -106,6 +106,8 @@
|
|||
"navigation.signOut": "Sign out",
|
||||
|
||||
"extensionHeader.requirements": "Requirements",
|
||||
"extensionInstallation.addExtension": "In the editor, click on the \"Add Extensions\" button on the lower left.",
|
||||
|
||||
|
||||
"oschooser.choose": "Choose your OS:",
|
||||
|
||||
|
|
|
|||
|
|
@ -31,9 +31,15 @@ class EV3 extends ExtensionLanding {
|
|||
render () {
|
||||
return (
|
||||
<div className="extension-landing ev3">
|
||||
<ExtensionHeader imageSrc="/images/ev3/ev3-illustration.png">
|
||||
<ExtensionHeader
|
||||
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
|
||||
imageSrc="/images/ev3/ev3-illustration.png"
|
||||
>
|
||||
<FlexRow className="column extension-copy">
|
||||
<h2><img src="/images/ev3/ev3.svg" />LEGO MINDSTORMS EV3</h2>
|
||||
<h1><img
|
||||
alt=""
|
||||
src="/images/ev3/ev3.svg"
|
||||
/>LEGO MINDSTORMS EV3</h1>
|
||||
<FormattedMessage
|
||||
id="ev3.headerText"
|
||||
values={{
|
||||
|
|
@ -51,11 +57,17 @@ class EV3 extends ExtensionLanding {
|
|||
</FlexRow>
|
||||
<ExtensionRequirements>
|
||||
<span>
|
||||
<img src="/svgs/extensions/windows.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/windows.svg"
|
||||
/>
|
||||
Windows 10+
|
||||
</span>
|
||||
<span>
|
||||
<img src="/svgs/extensions/mac.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/mac.svg"
|
||||
/>
|
||||
macOS 10.13+
|
||||
</span>
|
||||
<span>
|
||||
|
|
@ -63,7 +75,10 @@ class EV3 extends ExtensionLanding {
|
|||
Bluetooth
|
||||
</span>
|
||||
<span>
|
||||
<img src="/svgs/extensions/scratch-link.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/scratch-link.svg"
|
||||
/>
|
||||
Scratch Link
|
||||
</span>
|
||||
</ExtensionRequirements>
|
||||
|
|
@ -82,13 +97,17 @@ class EV3 extends ExtensionLanding {
|
|||
<Steps>
|
||||
<Step number={1}>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/ev3-connect-1.png" />
|
||||
<img
|
||||
alt=""
|
||||
src="/images/ev3/ev3-connect-1.png"
|
||||
/>
|
||||
</div>
|
||||
<p><FormattedMessage id="ev3.turnOnEV3" /></p>
|
||||
</Step>
|
||||
<Step number={2}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt=""
|
||||
className="screenshot"
|
||||
src="/images/ev3/ev3-connect-2.png"
|
||||
/>
|
||||
|
|
@ -113,6 +132,7 @@ class EV3 extends ExtensionLanding {
|
|||
<Step number={3}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'extensionInstallation.addExtension'})}
|
||||
className="screenshot"
|
||||
src="/images/ev3/ev3-connect-3.png"
|
||||
/>
|
||||
|
|
@ -125,19 +145,30 @@ class EV3 extends ExtensionLanding {
|
|||
<Steps>
|
||||
<Step>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/ev3-accept-connection.png" />
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'ev3.imgAltAcceptConnection'})}
|
||||
src="/images/ev3/ev3-accept-connection.png"
|
||||
/>
|
||||
</div>
|
||||
<p><FormattedMessage id="ev3.acceptConnection" /></p>
|
||||
</Step>
|
||||
<Step>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/ev3-pin.png" />
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'ev3.imgAltAcceptPasscode'})}
|
||||
src="/images/ev3/ev3-pin.png"
|
||||
/>
|
||||
</div>
|
||||
<p><FormattedMessage id="ev3.acceptPasscode" /></p>
|
||||
</Step>
|
||||
<Step>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: `ev3.imgAlt${
|
||||
this.state.OS === OS_ENUM.WINDOWS ?
|
||||
'WaitForWindows' :
|
||||
'EnterPasscodeMac'
|
||||
}`})}
|
||||
className="screenshot"
|
||||
src={`/images/ev3/${
|
||||
this.state.OS === OS_ENUM.WINDOWS ?
|
||||
|
|
@ -176,7 +207,10 @@ class EV3 extends ExtensionLanding {
|
|||
/>
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/ev3-motor-port-a.png" />
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'ev3.imgAltPlugInMotor'})}
|
||||
src="/images/ev3/ev3-motor-port-a.png"
|
||||
/>
|
||||
</div>
|
||||
</Step>
|
||||
<Step
|
||||
|
|
@ -194,7 +228,10 @@ class EV3 extends ExtensionLanding {
|
|||
/>
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/motor-turn-block.png" />
|
||||
<img
|
||||
alt=""
|
||||
src="/images/ev3/motor-turn-block.png"
|
||||
/>
|
||||
</div>
|
||||
</Step>
|
||||
</Steps>
|
||||
|
|
@ -204,18 +241,21 @@ class EV3 extends ExtensionLanding {
|
|||
<ProjectCard
|
||||
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://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://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"
|
||||
title={this.props.intl.formatMessage({id: 'ev3.spaceTacosTitle'})}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -34,5 +34,14 @@
|
|||
"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}.",
|
||||
"ev3.firmwareUpdateText": "firmware update instructions from LEGO"
|
||||
"ev3.firmwareUpdateText": "firmware update instructions from LEGO",
|
||||
"ev3.imgAltEv3Illustration": "Illustration of an EV3 hub, featuring some examples of interacting with it.",
|
||||
"ev3.imgAltAcceptConnection": "Use the buttons on your EV3 to accept the connection.",
|
||||
"ev3.imgAltAcceptPasscode": "Use the center button on your EV3 to accept the passcode.",
|
||||
"ev3.imgAltWaitForWindows": "Windows will notify you when the EV3 is ready.",
|
||||
"ev3.imgAltEnterPasscodeMac": "Enter the passcode into the connection request window opening on your Mac.",
|
||||
"ev3.imgAltPlugInMotor": "To find port A: hold the EV3 with the screen and buttons facing you, with the screen above the buttons. Port A is on top, and it is the left-most one",
|
||||
"ev3.imgAltWaveHello": "A Scratch project with a waving fairy.",
|
||||
"ev3.imgAltDistanceInstrument": "A Scratch project with a guitar.",
|
||||
"ev3.imgAltSpaceTacos": "A Scratch project with Scratch Cat and a taco in space."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,5 +28,11 @@
|
|||
"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!"
|
||||
"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!",
|
||||
"microbit.imgAltMicrobitIllustration": "Illustration of the micro:bit circuit board.",
|
||||
"microbit.imgAltDragDropHex": "Drag and drop the HEX file from the folder you downloaded it to to the micro:bit.",
|
||||
"microbit.imgAltDisplayH": "A micro:bit displaying an H.",
|
||||
"microbit.imgAltHeartBeat" : "A Scratch project with a heart.",
|
||||
"microbit.imgAltTiltGuitar": "A Scratch project with a guitar.",
|
||||
"microbit.imgAltOceanAdventure": "A Scratch project with a clown fish and a saxophone under water."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,9 +31,15 @@ class MicroBit extends ExtensionLanding {
|
|||
render () {
|
||||
return (
|
||||
<div className="extension-landing microbit">
|
||||
<ExtensionHeader imageSrc="/images/microbit/microbit-heart.png">
|
||||
<ExtensionHeader
|
||||
imageAlt={this.props.intl.formatMessage({id: 'microbit.imgAltMicrobitIllustration'})}
|
||||
imageSrc="/images/microbit/microbit-heart.png"
|
||||
>
|
||||
<FlexRow className="column extension-copy">
|
||||
<h2><img src="/images/microbit/microbit.svg" />micro:bit</h2>
|
||||
<h1><img
|
||||
alt=""
|
||||
src="/images/microbit/microbit.svg"
|
||||
/>micro:bit</h1>
|
||||
<FormattedMessage
|
||||
id="microbit.headerText"
|
||||
values={{
|
||||
|
|
@ -51,19 +57,31 @@ class MicroBit extends ExtensionLanding {
|
|||
</FlexRow>
|
||||
<ExtensionRequirements>
|
||||
<span>
|
||||
<img src="/svgs/extensions/windows.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/windows.svg"
|
||||
/>
|
||||
Windows 10+
|
||||
</span>
|
||||
<span>
|
||||
<img src="/svgs/extensions/mac.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/mac.svg"
|
||||
/>
|
||||
macOS 10.13+
|
||||
</span>
|
||||
<span>
|
||||
<img src="/svgs/extensions/bluetooth.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/bluetooth.svg"
|
||||
/>
|
||||
Bluetooth 4.0
|
||||
</span>
|
||||
<span>
|
||||
<img src="/svgs/extensions/scratch-link.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/scratch-link.svg"
|
||||
/>
|
||||
Scratch Link
|
||||
</span>
|
||||
</ExtensionRequirements>
|
||||
|
|
@ -82,7 +100,10 @@ class MicroBit extends ExtensionLanding {
|
|||
<Steps>
|
||||
<Step number={1}>
|
||||
<div className="step-image">
|
||||
<img src="/images/microbit/mbit-usb.png" />
|
||||
<img
|
||||
alt=""
|
||||
src="/images/microbit/mbit-usb.png"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage id="microbit.connectUSB" />
|
||||
|
|
@ -90,7 +111,10 @@ class MicroBit extends ExtensionLanding {
|
|||
</Step>
|
||||
<Step number={2}>
|
||||
<div className="step-image">
|
||||
<img src="/images/microbit/mbit-hex-download.png" />
|
||||
<img
|
||||
alt=""
|
||||
src="/images/microbit/mbit-hex-download.png"
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
download
|
||||
|
|
@ -103,6 +127,7 @@ class MicroBit extends ExtensionLanding {
|
|||
<Step number={3}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'microbit.imgAltDragDropHex'})}
|
||||
src={`/images/microbit/${
|
||||
this.state.OS === OS_ENUM.WINDOWS ? 'win' : 'mac'
|
||||
}-copy-hex.png`}
|
||||
|
|
@ -120,13 +145,17 @@ class MicroBit extends ExtensionLanding {
|
|||
<Steps>
|
||||
<Step number={1}>
|
||||
<div className="step-image">
|
||||
<img src="/images/microbit/mbit-connect-1.png" />
|
||||
<img
|
||||
alt=""
|
||||
src="/images/microbit/mbit-connect-1.png"
|
||||
/>
|
||||
</div>
|
||||
<p><FormattedMessage id="microbit.powerMicrobit" /></p>
|
||||
</Step>
|
||||
<Step number={2}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt=""
|
||||
className="screenshot"
|
||||
src="/images/microbit/mbit-connect-2.png"
|
||||
/>
|
||||
|
|
@ -151,6 +180,7 @@ class MicroBit extends ExtensionLanding {
|
|||
<Step number={3}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'extensionInstallation.addExtension'})}
|
||||
className="screenshot"
|
||||
src="/images/microbit/mbit-connect-3.png"
|
||||
/>
|
||||
|
|
@ -181,7 +211,10 @@ class MicroBit extends ExtensionLanding {
|
|||
/>
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img src="/images/microbit/display-hello-block.png" />
|
||||
<img
|
||||
alt=""
|
||||
src="/images/microbit/display-hello-block.png"
|
||||
/>
|
||||
</div>
|
||||
</Step>
|
||||
<Step
|
||||
|
|
@ -199,7 +232,10 @@ class MicroBit extends ExtensionLanding {
|
|||
/>
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img src="/images/microbit/mbit-display-h.png" />
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'microbit.imgAltDisplayH'})}
|
||||
src="/images/microbit/mbit-display-h.png"
|
||||
/>
|
||||
</div>
|
||||
</Step>
|
||||
</Steps>
|
||||
|
|
@ -209,18 +245,21 @@ class MicroBit extends ExtensionLanding {
|
|||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239075756"
|
||||
description={this.props.intl.formatMessage({id: 'microbit.heartBeatDescription'})}
|
||||
imageAlt={this.props.intl.formatMessage({id: 'microbit.imgAltHeartBeat'})}
|
||||
imageSrc="/images/microbit/starter-heart.png"
|
||||
title={this.props.intl.formatMessage({id: 'microbit.heartBeat'})}
|
||||
/>
|
||||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239075950"
|
||||
description={this.props.intl.formatMessage({id: 'microbit.tiltGuitarDescription'})}
|
||||
imageAlt={this.props.intl.formatMessage({id: 'microbit.imgAltTiltGuitar'})}
|
||||
imageSrc="/images/microbit/starter-guitar.png"
|
||||
title={this.props.intl.formatMessage({id: 'microbit.tiltGuitar'})}
|
||||
/>
|
||||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239075973"
|
||||
description={this.props.intl.formatMessage({id: 'microbit.oceanAdventureDescription'})}
|
||||
imageAlt={this.props.intl.formatMessage({id: 'microbit.imgAltOceanAdventure'})}
|
||||
imageSrc="/images/microbit/starter-fish.png"
|
||||
title={this.props.intl.formatMessage({id: 'microbit.oceanAdventure'})}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -25,5 +25,9 @@
|
|||
"wedo2.updateLinkText": "Make sure you have installed the latest version of Scratch Link.",
|
||||
"wedo2.legacyInfoTitle": "Using Scratch 2.0?",
|
||||
"wedo2.legacyInfoText": "Visit our page about {wedoLegacyLink}.",
|
||||
"wedo2.legacyLinkText": "using LEGO WeDo with Scratch 2.0"
|
||||
"wedo2.legacyLinkText": "using LEGO WeDo with Scratch 2.0",
|
||||
"wedo2.imgAltWeDoIllustration": "An illustration of a WeDo2 featuring a tilt sensor and a motor.",
|
||||
"wedo2.imgAltStarter1": "A Scratch project with a dog and a taco.",
|
||||
"wedo2.imgAltStarter2": "A Scratch project with a toad playing instruments in space.",
|
||||
"wedo2.imgAltStarter3": "A Scratch project with dinosaurs."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,9 +28,15 @@ class Wedo2 extends ExtensionLanding {
|
|||
render () {
|
||||
return (
|
||||
<div className="extension-landing wedo2">
|
||||
<ExtensionHeader imageSrc="/images/wedo2/wedo2-illustration.png">
|
||||
<ExtensionHeader
|
||||
imageAlt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
|
||||
imageSrc="/images/wedo2/wedo2-illustration.png"
|
||||
>
|
||||
<FlexRow className="column extension-copy">
|
||||
<h2><img src="/images/wedo2/wedo2.svg" />LEGO WeDo 2.0</h2>
|
||||
<h1><img
|
||||
alt=""
|
||||
src="/images/wedo2/wedo2.svg"
|
||||
/>LEGO WeDo 2.0</h1>
|
||||
<FormattedMessage
|
||||
id="wedo2.headerText"
|
||||
values={{
|
||||
|
|
@ -48,19 +54,31 @@ class Wedo2 extends ExtensionLanding {
|
|||
</FlexRow>
|
||||
<ExtensionRequirements>
|
||||
<span>
|
||||
<img src="/svgs/extensions/windows.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/windows.svg"
|
||||
/>
|
||||
Windows 10+
|
||||
</span>
|
||||
<span>
|
||||
<img src="/svgs/extensions/mac.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/mac.svg"
|
||||
/>
|
||||
macOS 10.13+
|
||||
</span>
|
||||
<span>
|
||||
<img src="/svgs/extensions/bluetooth.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/bluetooth.svg"
|
||||
/>
|
||||
Bluetooth
|
||||
</span>
|
||||
<span>
|
||||
<img src="/svgs/extensions/scratch-link.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/svgs/extensions/scratch-link.svg"
|
||||
/>
|
||||
Scratch Link
|
||||
</span>
|
||||
</ExtensionRequirements>
|
||||
|
|
@ -80,6 +98,7 @@ class Wedo2 extends ExtensionLanding {
|
|||
<Step number={1}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt=""
|
||||
className="screenshot"
|
||||
src="/images/wedo2/wedo2-connect-1.png"
|
||||
/>
|
||||
|
|
@ -104,6 +123,7 @@ class Wedo2 extends ExtensionLanding {
|
|||
<Step number={2}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'extensionInstallation.addExtension'})}
|
||||
className="screenshot"
|
||||
src="/images/wedo2/wedo2-connect-2.png"
|
||||
/>
|
||||
|
|
@ -125,7 +145,10 @@ class Wedo2 extends ExtensionLanding {
|
|||
<FormattedMessage id="wedo2.plugMotorIn" />
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img src="/images/wedo2/wedo2-motor.png" />
|
||||
<img
|
||||
alt=""
|
||||
src="/images/wedo2/wedo2-motor.png"
|
||||
/>
|
||||
</div>
|
||||
</Step>
|
||||
<Step
|
||||
|
|
@ -143,7 +166,10 @@ class Wedo2 extends ExtensionLanding {
|
|||
/>
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img src="/images/wedo2/wedo2-motor-turn-block.png" />
|
||||
<img
|
||||
alt=""
|
||||
src="/images/wedo2/wedo2-motor-turn-block.png"
|
||||
/>
|
||||
</div>
|
||||
</Step>
|
||||
</Steps>
|
||||
|
|
@ -153,18 +179,21 @@ class Wedo2 extends ExtensionLanding {
|
|||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239284992"
|
||||
description={this.props.intl.formatMessage({id: 'wedo2.starter1Description'})}
|
||||
imageAlt={this.props.intl.formatMessage({id: 'wedo2.imgAltStarter1'})}
|
||||
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'})}
|
||||
imageAlt={this.props.intl.formatMessage({id: 'wedo2.imgAltStarter2'})}
|
||||
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'})}
|
||||
imageAlt={this.props.intl.formatMessage({id: 'wedo2.imgAltStarter3'})}
|
||||
imageSrc="/images/wedo2/wedo2-starter3.png"
|
||||
title={this.props.intl.formatMessage({id: 'wedo2.starter3Title'})}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue