From 1b76b929b49f756b321bd341cd5335aa5adc8d05 Mon Sep 17 00:00:00 2001 From: MiroslavDionisiev Date: Fri, 22 Nov 2024 11:12:01 +0200 Subject: [PATCH] feat: [UEPR-88] added modal for written guides --- src/components/cards-modal/cards-modal.jsx | 143 +++++++++++++++++ src/components/cards-modal/cards-modal.scss | 150 ++++++++++++++++++ .../community-guidelines-modal.jsx | 22 ++- .../community-guidelines.jsx | 9 +- src/components/forms/button.scss | 4 + .../modal-navigation.jsx} | 54 ++++--- .../modal-navigation.scss} | 3 +- .../become-a-scratcher/become-a-scratcher.jsx | 5 +- src/views/ideas/ideas.jsx | 31 ++++ src/views/ideas/ideas.scss | 30 ++++ src/views/ideas/l10n-static.json | 12 +- src/views/ideas/l10n.json | 41 ++--- static/images/ideas/advanced-topics.svg | 1 + static/images/ideas/left-arrow.svg | 3 + static/images/ideas/right-arrow.svg | 3 + static/images/ideas/sprites-sounds.svg | 1 + 16 files changed, 455 insertions(+), 57 deletions(-) create mode 100644 src/components/cards-modal/cards-modal.jsx create mode 100644 src/components/cards-modal/cards-modal.scss rename src/components/{onboarding-navigation/onboarding-navigation.jsx => modal-navigation/modal-navigation.jsx} (55%) rename src/components/{onboarding-navigation/onboarding-navigation.scss => modal-navigation/modal-navigation.scss} (96%) create mode 100644 static/images/ideas/advanced-topics.svg create mode 100644 static/images/ideas/left-arrow.svg create mode 100644 static/images/ideas/right-arrow.svg create mode 100644 static/images/ideas/sprites-sounds.svg diff --git a/src/components/cards-modal/cards-modal.jsx b/src/components/cards-modal/cards-modal.jsx new file mode 100644 index 000000000..91f0c82a9 --- /dev/null +++ b/src/components/cards-modal/cards-modal.jsx @@ -0,0 +1,143 @@ +import React, {useCallback, useState} from 'react'; +import ReactModal from 'react-modal'; +import PropTypes from 'prop-types'; +import Button from '../forms/button.jsx'; +import {FormattedMessage, useIntl} from 'react-intl'; +import ModalNavigation from '../modal-navigation/modal-navigation.jsx'; + +import './cards-modal.scss'; + +const GUIDES_SECTIONS = [ + { + titleId: 'ideas.modalSectionTitleSpritesAndSounds', + imgSrc: '/images/ideas/sprites-sounds.svg', + cards: [ + { + cardId: 'ideas.modalCardNameCreateSprite', + hrefId: 'guides.ScratchLearningResource_CreateOriginalSpriteLink' + }, + { + cardId: 'ideas.modalCardNameRemix', + hrefId: 'guides.ScratchLearningResource_RemixRe-imagineSpritesLink' + }, + { + cardId: 'ideas.modalCardNameBringDrawingsIntoScratch', + hrefId: 'guides.ScratchLearningResource_BringYourDrawingsIntoScratchLink' + }, + { + cardId: 'ideas.modalCardNameSound', + hrefId: 'guides.ScratchLearningResource_SoundsAddRecordText-to-SpeechLink' + }, + { + cardId: 'ideas.modalCardNameCreateAsset', + hrefId: 'guides.ScratchLearningResource_CreateanAssetPackLink' + } + ] + }, + { + titleId: 'ideas.modalSectionTitleAdvancedTopics', + imgSrc: '/images/ideas/advanced-topics.svg', + cards: [ + { + cardId: 'ideas.modalCardNameConditionalStatements', + hrefId: 'guides.ScratchLearningResource_ConditionalStatementsLink' + }, + { + cardId: 'ideas.modalCardNameVariablesLists', + hrefId: 'guides.ScratchLearningResource_VariablesandListsLink' + }, + { + cardId: 'ideas.modalCardNameCustomBlocks', + hrefId: 'guides.ScratchLearningResource_MyBlocksLink' + }, + { + cardId: 'ideas.modalCardNameFaceSensing', + hrefId: 'cards.paperplanes-turtlegraphics-cardsLink' + }, + { + cardId: 'ideas.modalCardNameComputationalConcepts', + hrefId: 'cards.facesensing-cardsLink' + } + ] + } +]; + +export const CardsModal = ({isOpen, onClose = () => {}}) => { + const [currentPage, setCurrentPage] = useState(0); + const intl = useIntl(); + const onNextPage = useCallback(() => { + if (currentPage < GUIDES_SECTIONS.length - 1) { + setCurrentPage(currentPage + 1); + } + }, [currentPage]); + const onBackPage = useCallback(() => { + if (currentPage > 0) { + setCurrentPage(currentPage - 1); + } + }, [currentPage]); + + if (!isOpen) return null; + return ( + +
+
+ +
+
+
+ +
+
+ +
+ {GUIDES_SECTIONS[currentPage].cards.map(card => ( +
+ + + + +
+ ))} +
+
+ + + ); +}; + +CardsModal.propTypes = { + isOpen: PropTypes.bool, + onClose: PropTypes.func +}; diff --git a/src/components/cards-modal/cards-modal.scss b/src/components/cards-modal/cards-modal.scss new file mode 100644 index 000000000..1927285ef --- /dev/null +++ b/src/components/cards-modal/cards-modal.scss @@ -0,0 +1,150 @@ +@import "../../colors"; +@import "../../frameless"; + +.cards-modal-overlay { + display: flex; + justify-content: center; + align-items: center; + + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 510; + + background-color: $box-shadow-light-gray; + border-color: unset; +} + +.cards-modal-container { + display: flex; + flex-direction: column; + + background: white; + border-radius: 8px; + width: 640px; + + box-shadow: 0 0 0 4px $ui-blue-25percent; + + &:focus { + outline: none; + border: none; + } + + .cards-modal-header { + display: flex; + justify-content: space-between; + align-items: center; + + padding: 10px; + background-color: $ui-blue; + border-radius: 8px 8px 0 0; + + .cards-title { + font-size: 1rem; + font-weight: 700; + line-height: 1.25rem; + color: $ui-white; + margin-left: auto; + margin-right: auto; + } + + .close-button { + position: unset; + margin: 0; + } + } + + .cards-modal-section-title { + text-align: center; + vertical-align: middle; + + color: $header-gray; + font-size: 1.5rem; + font-weight: 700; + line-height: 2rem; + + padding: 0.5rem 0; + margin: 0.75rem 0 + } + + .cards-modal-section-content { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin: 0 1.25rem; + gap: 1.25rem; + + .section-img { + width: 200px; + } + + .cards-modal-cards-list { + flex: 1; + + .card { + display: flex; + justify-content: space-between; + align-items: center; + + font-size: 0.875rem; + font-weight: 500; + + + .button { + display: flex; + justify-content: center; + align-items: center; + width: 2rem; + height: 2rem; + } + } + + .card + .card { + border-top: 1px solid $box-shadow-light-gray; + } + } + } + + .cards-modal-navigation { + justify-content: center; + align-items: center; + margin: 1.75rem 0; + + .navigation-button { + padding: 0; + margin: 0 1rem; + } + + .dotRow{ + width: 32px; + height: 16px; + gap: 0.5rem; + } + + .dot{ + width: 8px; + height: 8px; + background-color: transparent; + border: 2px solid $ui-blue; + } + + .active{ + background-color: $ui-blue; + box-shadow: 0 0 0 4px $ui-blue-25percent; + } + } +} + +.cards-modal-container:focus { + outline: none; + border: none; +} + +@media only screen and (max-width: $mobileIntermediate) { + .cards-modal-container { + width: 100%; + } +} \ No newline at end of file diff --git a/src/components/community-guidelines/community-guidelines-modal.jsx b/src/components/community-guidelines/community-guidelines-modal.jsx index 13e78cde8..2ea0420c3 100644 --- a/src/components/community-guidelines/community-guidelines-modal.jsx +++ b/src/components/community-guidelines/community-guidelines-modal.jsx @@ -36,13 +36,25 @@ export const CommunityGuidelinesModal = props => { : - null} + onNextPage={ + currentPage < communityGuidelines.length - 1 ? + onNextPage : + onComplete + } + nextButtonText={ + currentPage === communityGuidelines.length - 1 ? ( + + ) : ( + + ) + } + prevButtonText={ + + } onBackPage={currentPage > 0 ? onBackPage : null} /> - ); + + ); }; CommunityGuidelinesModal.propTypes = { diff --git a/src/components/community-guidelines/community-guidelines.jsx b/src/components/community-guidelines/community-guidelines.jsx index fa7252c4e..5e6644d46 100644 --- a/src/components/community-guidelines/community-guidelines.jsx +++ b/src/components/community-guidelines/community-guidelines.jsx @@ -1,7 +1,7 @@ import React, {useEffect} from 'react'; import {FormattedMessage} from 'react-intl'; import thumbnailUrl from '../../lib/user-thumbnail.js'; -import OnboardingNavigation from '../onboarding-navigation/onboarding-navigation.jsx'; +import ModalNavigation from '../modal-navigation/modal-navigation.jsx'; import './community-guidelines.scss'; import PropTypes from 'prop-types'; @@ -65,6 +65,7 @@ export const CommunityGuidelines = ({ userId, currentPage, nextButtonText, + prevButtonText, onNextPage, onBackPage }) => { @@ -108,10 +109,11 @@ export const CommunityGuidelines = ({ )} - @@ -123,7 +125,8 @@ CommunityGuidelines.propTypes = { currentPage: PropTypes.number, userId: PropTypes.string, constructHeader: PropTypes.func, - nextButtonText: PropTypes.string, + nextButtonText: PropTypes.node, + prevButtonText: PropTypes.node, onNextPage: PropTypes.func, onBackPage: PropTypes.func }; diff --git a/src/components/forms/button.scss b/src/components/forms/button.scss index db7be8f33..aaf71b7e7 100644 --- a/src/components/forms/button.scss +++ b/src/components/forms/button.scss @@ -39,6 +39,10 @@ $pass-bg: $ui-aqua; box-shadow: none; } + &.transparent { + background-color: transparent; + } + &.large { border-radius: .25rem; font-size: 1rem; diff --git a/src/components/onboarding-navigation/onboarding-navigation.jsx b/src/components/modal-navigation/modal-navigation.jsx similarity index 55% rename from src/components/onboarding-navigation/onboarding-navigation.jsx rename to src/components/modal-navigation/modal-navigation.jsx index 71d5421c1..d5aeef826 100644 --- a/src/components/onboarding-navigation/onboarding-navigation.jsx +++ b/src/components/modal-navigation/modal-navigation.jsx @@ -1,21 +1,24 @@ import React, {useEffect, useMemo} from 'react'; import Button from '../forms/button.jsx'; -import {FormattedMessage} from 'react-intl'; import PropTypes from 'prop-types'; -import './onboarding-navigation.scss'; +import './modal-navigation.scss'; import classNames from 'classnames'; -const OnboardingNavigation = ({ +const ModalNavigation = ({ currentPage, totalDots, onNextPage, onBackPage, - nextButtonText + nextButtonText, + prevButtonText, + nextButtonImageSrc, + prevButtonImageSrc, + className }) => { useEffect(() => { - new Image().src = '/images/onboarding/right-arrow.svg'; - new Image().src = '/images/onboarding/left-arrow.svg'; + new Image().src = nextButtonImageSrc; + new Image().src = prevButtonImageSrc; }, []); const dots = useMemo(() => { @@ -32,49 +35,62 @@ const OnboardingNavigation = ({ }, [currentPage, totalDots]); return ( -
+
{ } {(currentPage >= 0 && totalDots) &&
{dots}
} -
); }; -OnboardingNavigation.propTypes = { +ModalNavigation.propTypes = { currentPage: PropTypes.number, totalDots: PropTypes.number, onNextPage: PropTypes.func, onBackPage: PropTypes.func, - nextButtonText: PropTypes.node + nextButtonText: PropTypes.node, + prevButtonText: PropTypes.node, + nextButtonImageSrc: PropTypes.string, + prevButtonImageSrc: PropTypes.string, + className: PropTypes.string }; -export default OnboardingNavigation; +ModalNavigation.defaultProps = { + nextButtonImageSrc: '/images/onboarding/right-arrow.svg', + prevButtonImageSrc: '/images/onboarding/left-arrow.svg' +}; + +export default ModalNavigation; diff --git a/src/components/onboarding-navigation/onboarding-navigation.scss b/src/components/modal-navigation/modal-navigation.scss similarity index 96% rename from src/components/onboarding-navigation/onboarding-navigation.scss rename to src/components/modal-navigation/modal-navigation.scss index dbfa2e11d..69ca11ebc 100644 --- a/src/components/onboarding-navigation/onboarding-navigation.scss +++ b/src/components/modal-navigation/modal-navigation.scss @@ -1,7 +1,7 @@ @import "../../colors"; @import "../../frameless"; -.button{ +.navigation-button{ display: flex; justify-content: center; align-items: center; @@ -35,6 +35,7 @@ .dotRow{ display: flex; justify-content: space-between; + align-items: center; width: 244px; min-width: 0px; padding: 0px 5px; diff --git a/src/views/become-a-scratcher/become-a-scratcher.jsx b/src/views/become-a-scratcher/become-a-scratcher.jsx index e674847d1..6b46e2d2c 100644 --- a/src/views/become-a-scratcher/become-a-scratcher.jsx +++ b/src/views/become-a-scratcher/become-a-scratcher.jsx @@ -14,7 +14,7 @@ import Button from '../../components/forms/button.jsx'; import Modal from '../../components/modal/base/modal.jsx'; import NotAvailable from '../../components/not-available/not-available.jsx'; import WarningBanner from '../../components/title-banner/warning-banner.jsx'; -import OnboardingNavigation from '../../components/onboarding-navigation/onboarding-navigation.jsx'; +import ModalNavigation from '../../components/modal-navigation/modal-navigation.jsx'; import { CommunityGuidelines, communityGuidelines @@ -285,10 +285,11 @@ const BecomeAScratcher = ({user, invitedScratcher, scratcher, sessionStatus}) =>
- } + prevButtonText={} /> ); diff --git a/src/views/ideas/ideas.jsx b/src/views/ideas/ideas.jsx index f1057061d..4abffd557 100644 --- a/src/views/ideas/ideas.jsx +++ b/src/views/ideas/ideas.jsx @@ -1,5 +1,6 @@ const FormattedMessage = require('react-intl').FormattedMessage; const React = require('react'); +const {useState, useCallback} = require('react'); const Button = require('../../components/forms/button.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); @@ -9,6 +10,7 @@ const Page = require('../../components/page/www/page.jsx'); const render = require('../../lib/render.jsx'); const {useIntl} = require('react-intl'); +const {CardsModal} = require('../../components/cards-modal/cards-modal.jsx'); require('./ideas.scss'); @@ -87,6 +89,10 @@ const physicalIdeasData = [ const Ideas = () => { const intl = useIntl(); + const [isOpen, setIsOpen] = useState(false); + + const onOpen = useCallback(() => setIsOpen(true), [setIsOpen]); + const onClose = useCallback(() => setIsOpen(false), [setIsOpen]); return (
@@ -154,6 +160,31 @@ const Ideas = () => {
+
+
+
+ + {chunks}, + a: chunks => {chunks} + }} + /> + +
+
+
diff --git a/src/views/ideas/ideas.scss b/src/views/ideas/ideas.scss index 6486ec1b3..90d08b02b 100644 --- a/src/views/ideas/ideas.scss +++ b/src/views/ideas/ideas.scss @@ -40,6 +40,36 @@ $base-bg: $ui-white; } } +.youtube-videos { + .inner { + .download-cards { + display: flex; + align-items: center; + gap: 1rem; + + margin-bottom: 3.5rem; + + .button { + display: flex; + justify-content: center; + align-items: center; + width: 2rem; + height: 2rem; + } + + span { + font-size: 1rem; + line-height: 1.5rem; + text-align: start; + + a { + text-decoration: underline; + } + } + } + } +} + .physical-ideas { .inner { display: flex; diff --git a/src/views/ideas/l10n-static.json b/src/views/ideas/l10n-static.json index 2073ceeff..b0fe6bf57 100644 --- a/src/views/ideas/l10n-static.json +++ b/src/views/ideas/l10n-static.json @@ -11,6 +11,8 @@ "cards.pong-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/pong-cards.pdf", "cards.fly-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/fly-cards.pdf", "cards.imagine-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/imagine-cards.pdf", + "cards.paperplanes-turtlegraphics-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/paperplanes-turtlegraphics-cards.pdf", + "cards.facesensing-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/facesensing-cards.pdf", "guides.NameGuideLink": "https://resources.scratch.mit.edu/www/guides/en/NameGuide.pdf", "guides.AnimateGuideLink": "https://resources.scratch.mit.edu/www/guides/en/AnimateGuide.pdf", "guides.MusicGuideLink": "https://resources.scratch.mit.edu/www/guides/en/MusicGuide.pdf", @@ -19,5 +21,13 @@ "guides.VideoGuideLink": "https://resources.scratch.mit.edu/www/guides/en/VideoGuide.pdf", "guides.PongGuideLink": "https://resources.scratch.mit.edu/www/guides/en/PongGuide.pdf", "guides.FlyGuideLink": "https://resources.scratch.mit.edu/www/guides/en/FlyGuide.pdf", - "guides.ImagineGuideLink": "https://resources.scratch.mit.edu/www/guides/en/ImagineGuide.pdf" + "guides.ImagineGuideLink": "https://resources.scratch.mit.edu/www/guides/en/ImagineGuide.pdf", + "guides.ScratchLearningResource_CreateOriginalSpriteLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_CreateOriginalSprite.pdf", + "guides.ScratchLearningResource_RemixRe-imagineSpritesLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_RemixRe-imagineSprites.pdf", + "guides.ScratchLearningResource_BringYourDrawingsIntoScratchLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_BringYourDrawingsIntoScratch.pdf", + "guides.ScratchLearningResource_SoundsAddRecordText-to-SpeechLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_SoundsAddRecordText-to-Speech.pdf", + "guides.ScratchLearningResource_CreateanAssetPackLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_CreateanAssetPack.pdf", + "guides.ScratchLearningResource_ConditionalStatementsLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_ConditionalStatements.pdf", + "guides.ScratchLearningResource_VariablesandListsLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_VariablesandLists.pdf", + "guides.ScratchLearningResource_MyBlocksLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_MyBlocks.pdf" } diff --git a/src/views/ideas/l10n.json b/src/views/ideas/l10n.json index af9a45889..8275c0371 100644 --- a/src/views/ideas/l10n.json +++ b/src/views/ideas/l10n.json @@ -2,16 +2,11 @@ "ideas.headerMessage": "What will you create?", "ideas.headerImageDescription": "Outlandish creations from pixelated unicorns to drumbeat waveforms to levitating tacos to buckets of rainbows.", "ideas.headerButtonMessage": "Choose a tutorial", - "ideas.gettingStartedTitle": "Getting Started", - "ideas.gettingStartedText": "New to Scratch? Try the Getting Started tutorial.", - "ideas.startHereText": "New to Scratch? Stay here!", + "ideas.startHereText": "New to Scratch? Start here!", "ideas.gettingStartedButtonText": "Try Getting Started Tutorial", "ideas.seeTutorialsLibraryButtonText": "See Tutorials Library", "ideas.gettingStartedImageDescription": "An illustrated boy plants his flag on top of a freshly painted mountaintop.", "ideas.seeTutorialsLibraryImageDescription": "An illustration of three tutorial thumbnails.", - "ideas.tryIt": "Try it!", - "ideas.activityGuidesTitle": "Activity Guides", - "ideas.activityGuidesText": "What do you want to make with Scratch? For each activity, you can try the Tutorial, download a set of Coding Cards, or view the Educator Guide.", "ideas.animateANameTitle": "Animate a Name", "ideas.animateANameDescription": "Animate the letters of your name, initials, or favorite word.", "ideas.animateANameImageDescription": "The name ANYA in all caps and blocked letters is poised to wiggle", @@ -30,12 +25,7 @@ "ideas.videoSensingTitle": "Video Sensing", "ideas.videoSensingDescription": "Interact with a project using the Video Sensing extension.", "ideas.videoSensingImageDescription": "A virtual hand dodges a spurt of flame in an attempt to pet a dragon.", - "ideas.seeAllTutorials": "See All Tutorials", - "ideas.cardsTitle": "Get the Entire Collection of Coding Cards", - "ideas.cardsText": "With the Scratch Coding Cards, you can learn to create interactive games, stories, music, animations, and more!", "ideas.cardsIllustrationDescription": "An assortment of fun, animated characters and objects leap out of a stack of cards.", - "ideas.starterProjectsTitle": "Starter Projects", - "ideas.starterProjectsText": "You can play with Starter Projects and remix them to make your own creations.", "ideas.starterProjectsImageDescription": "An illustration of the Scratch Code Editor.", "ideas.starterProjectsButton": "Explore Starter Projects", "ideas.tryTheTutorial": "Try the tutorial", @@ -47,31 +37,30 @@ "ideas.makeyMakeyHeader": "Have a MakeyMakey?", "ideas.makeyMakeyBody": "Turn anything into a key that connects with your Scratch project!", "ideas.desktopEditorHeader": "Scratch App Download", - "ideas.desktopEditorBody": "To create projects without an Internet connection, you can download the Scratch app.", "ideas.desktopEditorBodyHTML": "To create projects without an Internet connection, you can download the Scratch app.", "ideas.questionsHeader": "Questions", - "ideas.questionsBody": "Have more questions? See the Frequently Asked Questions or visit the Help with Scripts Forum.", "ideas.questionsBodyHTML": "Have more questions? See the Frequently Asked Questions or visit the Help with Scripts Forum.", - "ideas.cardsPurchase": "Purchase Printed Set", "ideas.MakeItFlyTitle": "Make It Fly", "ideas.MakeItFlyDescription": "Choose any character and make it fly!", "ideas.MakeItFlyImageDescription": "The scratch cat flies over the skyline. Alongside a flying taco.", - "ideas.RaceTitle": "Race to the Finish", - "ideas.RaceDescription": "Make a game where two characters race each other.", - "ideas.HideAndSeekTitle": "Hide and Seek", - "ideas.HideAndSeekDescription": "Make a hide-and-seek game with characters that appear and disappear.", - "ideas.FashionTitle": "Fashion Game", - "ideas.FashionDescription": "Make a game where you dress a character with different clothes and styles.", "ideas.PongTitle": "Pong Game", "ideas.PongDescription": "Make a bouncing ball game with sounds, points, and other effects.", "ideas.PongImageDescription": "A ball bounces off a digital paddle.", "ideas.ImagineTitle": "Imagine a World", "ideas.ImagineDescription": "Imagine a world where anything is possible.", "ideas.ImagineImageDescription": "A girl stands proudly in front of a thought bubble as big as the Earth and as intricate as butterfly wings.", - "ideas.DanceTitle": "Let's Dance", - "ideas.DanceDescription": "Design an animated dance scene with music and dance moves.", - "ideas.CatchTitle": "Catch Game", - "ideas.CatchDescription": "Make a game where you catch things falling from the sky.", - "ideas.VirtualPetTitle": "Virtual Pet", - "ideas.VirtualPetDescription": "Create an interactive pet that can eat, drink, and play." + "ideas.modalTitle": "Written Guides", + "ideas.modalSectionTitleSpritesAndSounds": "Sprites and Sounds", + "ideas.modalSectionTitleAdvancedTopics": "Advanced Topics", + "ideas.modalCardNameCreateSprite": "Create a Sprite with the Paint Editor", + "ideas.modalCardNameRemix": "Remix and Re-Imagine Sprites", + "ideas.modalCardNameBringDrawingsIntoScratch": "Bring Your Drawings Into Scratch", + "ideas.modalCardNameSound": "Sound: Add, Record, and Use Text to Speech Blocks", + "ideas.modalCardNameCreateAsset": "Create Your Own Asset Pack", + "ideas.modalCardNameConditionalStatements": "Conditional Statements", + "ideas.modalCardNameVariablesLists": "Variables and Lists", + "ideas.modalCardNameCustomBlocks": "Make Your Custom My Blocks", + "ideas.modalCardNameFaceSensing": "Scratch Lab Face Sensing Coding Cards", + "ideas.modalCardNameComputationalConcepts": "Turtle Graphics Coding Cards", + "ideas.downloadGuides": "Computer doesn’t allow Youtube? Download written guides for these topics." } diff --git a/static/images/ideas/advanced-topics.svg b/static/images/ideas/advanced-topics.svg new file mode 100644 index 000000000..7da4e86a9 --- /dev/null +++ b/static/images/ideas/advanced-topics.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ideas/left-arrow.svg b/static/images/ideas/left-arrow.svg new file mode 100644 index 000000000..296a055af --- /dev/null +++ b/static/images/ideas/left-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/ideas/right-arrow.svg b/static/images/ideas/right-arrow.svg new file mode 100644 index 000000000..1ceccd5dc --- /dev/null +++ b/static/images/ideas/right-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/ideas/sprites-sounds.svg b/static/images/ideas/sprites-sounds.svg new file mode 100644 index 000000000..6be0a4098 --- /dev/null +++ b/static/images/ideas/sprites-sounds.svg @@ -0,0 +1 @@ + \ No newline at end of file