mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-12-02 03:47:28 -05:00
feat: [UEPR-67] added learn more section
This commit is contained in:
MiroslavDionisiev
parent
9134f6a2a6
commit
fc97fa6309
4 changed files with 101 additions and 37 deletions
|
|
@ -10,9 +10,9 @@ const pageSections = [
|
|||
{
|
||||
id: 'respect',
|
||||
headerTextId: 'guidelines.respectheader',
|
||||
contentTextIds: [
|
||||
'guidelines.respectbody1',
|
||||
'guidelines.respectbody2'
|
||||
contentTexts: [
|
||||
{id: 'guidelines.respectbody1'},
|
||||
{id: 'guidelines.respectbody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_respect.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobblue_respect.svg'
|
||||
|
|
@ -20,9 +20,9 @@ const pageSections = [
|
|||
{
|
||||
id: 'privacy',
|
||||
headerTextId: 'guidelines.privacyheader',
|
||||
contentTextIds: [
|
||||
'guidelines.privacybody1',
|
||||
'guidelines.privacybody2'
|
||||
contentTexts: [
|
||||
{id: 'guidelines.privacybody1'},
|
||||
{id: 'guidelines.privacybody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_safe.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobyellow_safe.svg'
|
||||
|
|
@ -30,9 +30,9 @@ const pageSections = [
|
|||
{
|
||||
id: 'helpful',
|
||||
headerTextId: 'guidelines.helpfulheader',
|
||||
contentTextIds: [
|
||||
'guidelines.privacybody1',
|
||||
'guidelines.privacybody2'
|
||||
contentTexts: [
|
||||
{id: 'guidelines.privacybody1'},
|
||||
{id: 'guidelines.privacybody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_feedback.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobmagenta_feedback.svg'
|
||||
|
|
@ -40,9 +40,9 @@ const pageSections = [
|
|||
{
|
||||
id: 'remix',
|
||||
headerTextId: 'guidelines.remixheader',
|
||||
contentTextIds: [
|
||||
'guidelines.remixbody1',
|
||||
'guidelines.remixbody2'
|
||||
contentTexts: [
|
||||
{id: 'guidelines.remixbody1'},
|
||||
{id: 'guidelines.remixbody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_remix.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobgreen_remix.svg'
|
||||
|
|
@ -50,9 +50,9 @@ const pageSections = [
|
|||
{
|
||||
id: 'honesty',
|
||||
headerTextId: 'guidelines.honestyheader',
|
||||
contentTextIds: [
|
||||
'guidelines.honestybody1',
|
||||
'guidelines.honestybody2'
|
||||
contentTexts: [
|
||||
{id: 'guidelines.honestybody1'},
|
||||
{id: 'guidelines.honestybody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_honest.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobpurple_honest.svg'
|
||||
|
|
@ -60,27 +60,54 @@ const pageSections = [
|
|||
{
|
||||
id: 'friendly',
|
||||
headerTextId: 'guidelines.friendlyheader',
|
||||
contentTextIds: [
|
||||
'guidelines.friendlybody1',
|
||||
'guidelines.friendlybody2'
|
||||
contentTexts: [
|
||||
{id: 'guidelines.friendlybody1'},
|
||||
{id: 'guidelines.friendlybody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_friendly.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobpink_friendly.svg'
|
||||
},
|
||||
{
|
||||
id: 'learn-more',
|
||||
headerTextId: 'guidelines.learnMoreheader',
|
||||
contentTexts: [
|
||||
{
|
||||
id: 'guidelines.learnMorebody1',
|
||||
values: {
|
||||
a: chunks => (
|
||||
<a href="https://resources.scratch.mit.edu/www/guides/en/scratch-community-guide.pdf">
|
||||
{chunks}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
},
|
||||
{id: 'guidelines.learnMorebody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_learn_more.svg'
|
||||
}
|
||||
];
|
||||
|
||||
const Guidelines = () => (
|
||||
<div className="guidelines-page">
|
||||
<header>
|
||||
<div className="title"><FormattedMessage id="guidelines.title" /></div>
|
||||
<div className="header1"><FormattedMessage id="guidelines.header1" /></div>
|
||||
<div className="header2"><FormattedMessage id="guidelines.header2" /></div>
|
||||
<div className="title">
|
||||
<FormattedMessage id="guidelines.title" />
|
||||
</div>
|
||||
<div className="header1">
|
||||
<FormattedMessage id="guidelines.header1" />
|
||||
</div>
|
||||
<div className="header2">
|
||||
<FormattedMessage id="guidelines.header2" />
|
||||
</div>
|
||||
</header>
|
||||
<section className="navigation">
|
||||
<div className="header3"><FormattedMessage id="guidelines.header3" /></div>
|
||||
<div className="header3">
|
||||
<FormattedMessage id="guidelines.header3" />
|
||||
</div>
|
||||
<section className="navigation-buttons">
|
||||
{
|
||||
pageSections.map(({id, headerTextId, buttonImgSrc}) => (
|
||||
{pageSections
|
||||
.filter(guide => guide.buttonImgSrc)
|
||||
.map(({id, headerTextId, buttonImgSrc}) => (
|
||||
<a
|
||||
key={id}
|
||||
href={`#${id}`}
|
||||
|
|
@ -88,33 +115,41 @@ const Guidelines = () => (
|
|||
<img src={buttonImgSrc} />
|
||||
<FormattedMessage id={headerTextId} />
|
||||
</a>
|
||||
))
|
||||
}
|
||||
))}
|
||||
</section>
|
||||
</section>
|
||||
<section className="inner guidelines">
|
||||
{
|
||||
pageSections.map(({id, headerTextId, contentTextIds, sectionImgSrc}, index) => (
|
||||
{pageSections.map(
|
||||
({id, headerTextId, contentTexts, sectionImgSrc}, index) => (
|
||||
<div
|
||||
id={id}
|
||||
key={id}
|
||||
className={`guideline ${index % 2 === 0 ? 'content-first' : 'image-first'}`}
|
||||
className={`guideline ${
|
||||
index % 2 === 0 ? 'content-first' : 'image-first'
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<div className="guideline-title"><FormattedMessage id={headerTextId} /></div>
|
||||
<div className="guideline-title">
|
||||
<FormattedMessage id={headerTextId} />
|
||||
</div>
|
||||
<p className="first-paragraph">
|
||||
<FormattedMessage id={contentTextIds[0]} />
|
||||
<FormattedMessage {...contentTexts[0]} />
|
||||
</p>
|
||||
<p className="second-paragraph">
|
||||
<FormattedMessage id={contentTextIds[1]} />
|
||||
<FormattedMessage {...contentTexts[1]} />
|
||||
</p>
|
||||
</div>
|
||||
<img src={sectionImgSrc} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
)
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
render(<Page><Guidelines /></Page>, document.getElementById('app'));
|
||||
render(
|
||||
<Page>
|
||||
<Guidelines />
|
||||
</Page>,
|
||||
document.getElementById('app')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -128,6 +128,10 @@
|
|||
img {
|
||||
width: $cols4;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.content-first {
|
||||
|
|
@ -143,7 +147,8 @@
|
|||
.guidelines {
|
||||
.guideline {
|
||||
flex-direction: column-reverse;
|
||||
margin: 6rem 10%;
|
||||
gap: 2.25rem;
|
||||
margin: 0 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,5 +20,8 @@
|
|||
"guidelines.honestybody2": "Spreading rumors, impersonating other Scratchers or celebrities, or pretending to be seriously ill is not respectful to the Scratch Community.",
|
||||
"guidelines.friendlyheader": "Help keep the site friendly.",
|
||||
"guidelines.friendlybody1": "It’s important to keep your creations and conversations friendly and appropriate for all ages.",
|
||||
"guidelines.friendlybody2": "If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it. Please use the “Report” button rather than engaging in fights, spreading rumors about other people’s behavior, or otherwise responding to any inappropriate content. The Scratch Team will look at your report and take the appropriate action."
|
||||
"guidelines.friendlybody2": "If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it. Please use the “Report” button rather than engaging in fights, spreading rumors about other people’s behavior, or otherwise responding to any inappropriate content. The Scratch Team will look at your report and take the appropriate action.",
|
||||
"guidelines.learnMoreheader": "Want to learn more?",
|
||||
"guidelines.learnMorebody1": "<a>Download the guide</a> for more details!",
|
||||
"guidelines.learnMorebody2": "Discover the limitless potential of the Scratch online community with our guides! These valuable resources are designed to help you navigate and thrive as a Scratcher, revealing everything from setting up your profile to connecting with like-minded individuals. Learn how to connect with others, share your unique creations, and find inspiration for your next project."
|
||||
}
|
||||
|
|
|
|||
21
static/svgs/guidelines/illustration_learn_more.svg
Normal file
21
static/svgs/guidelines/illustration_learn_more.svg
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<svg width="360" height="360" viewBox="0 0 360 360" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M32.3633 67.768C70.5711 26.4296 215.385 28.6821 285.363 80.7676C322.505 108.397 396.426 229.869 291.416 286.124C245.694 310.617 156.911 311.364 104.287 272.135C98.1483 267.559 93.5905 261.245 90.0314 254.466C29.8569 139.854 -11.691 115.368 32.3633 67.768Z" fill="#0FBD8C"/>
|
||||
<path d="M107.855 320.009C94.7183 324.907 41.9505 298.05 32.2258 278.631C27.1001 268.36 0.0265617 181.281 27.6749 180.655C41.2962 180.355 72.1233 252.972 81.2347 265.47C96.5873 286.54 123.445 314.191 107.855 320.009Z" fill="#0FBD8C"/>
|
||||
<path d="M209.096 249.909C266.03 245.929 311.361 230.941 310.346 216.434C309.332 201.926 262.356 193.393 205.422 197.375C148.488 201.355 103.156 216.343 104.171 230.85C105.185 245.357 152.161 253.891 209.096 249.909Z" fill="black" fill-opacity="0.1"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.018 233.118C103.589 233.066 103.268 232.7 103.268 232.267V145.472C103.268 145.208 103.386 144.959 103.592 144.796L151.904 106.602C152.056 106.482 152.244 106.419 152.434 106.419C152.456 106.419 260.469 114.813 260.469 114.813C260.915 114.848 261.258 115.221 261.258 115.667V199.879C261.258 200.112 261.163 200.336 260.994 200.5L213.129 246.288C212.969 246.44 212.759 246.524 212.54 246.524C212.505 246.524 212.472 246.522 212.436 246.518L104.018 233.118Z" fill="#CC9900"/>
|
||||
<path d="M211.452 242.393L257.284 198.548V118.552C256.809 118.514 256.232 118.47 255.521 118.415C250.457 118.021 250.457 118.021 243.284 117.464C230.626 116.48 217.968 115.496 206.152 114.578H206.144C190.955 113.398 178.297 112.414 169.014 111.694C163.739 111.283 159.623 110.964 156.774 110.743C155.311 110.629 154.184 110.541 153.407 110.481L107.243 146.978V229.512L211.452 242.393ZM104.018 233.118C103.589 233.066 103.268 232.7 103.268 232.267V145.472C103.268 145.208 103.386 144.959 103.592 144.796L151.904 106.602C152.056 106.482 152.244 106.419 152.434 106.419C152.456 106.419 260.469 114.813 260.469 114.813C260.915 114.848 261.258 115.221 261.258 115.667V199.879C261.258 200.112 261.163 200.336 260.994 200.5L213.129 246.288C212.969 246.44 212.759 246.524 212.54 246.524C212.505 246.524 212.472 246.522 212.436 246.518L104.018 233.118Z" fill="black" fill-opacity="0.2"/>
|
||||
<path d="M154.938 150.14C154.938 151.237 154.048 152.127 152.95 152.127C151.853 152.127 150.963 151.237 150.963 150.14V111.387C150.963 110.29 151.853 109.399 152.95 109.399C154.048 109.399 154.938 110.29 154.938 111.387V150.14Z" fill="black" fill-opacity="0.2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M213.562 240.837L258.04 198.897V169.261L241.045 184.437L213.562 157.095V240.837Z" fill="#B38600"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M108.474 146.441L151.175 150.415V111.838L108.474 146.441Z" fill="#B38600"/>
|
||||
<path d="M214.438 158.752C214.403 159.709 214.369 161.115 214.339 162.966C214.278 166.684 214.225 172.183 214.183 179.464C214.101 194.032 214.06 215.724 214.06 244.536C214.06 245.634 213.17 246.524 212.072 246.524C210.975 246.524 210.085 245.634 210.085 244.536C210.085 180.891 210.219 157.351 210.792 156.207C211.283 155.224 212.477 154.826 213.458 155.317C214.44 155.808 214.837 157.002 214.347 157.984C214.488 157.701 214.484 157.797 214.489 157.723C214.472 157.954 214.455 158.301 214.438 158.752Z" fill="black" fill-opacity="0.2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M188.433 133.248C186.333 133.248 184.345 132.266 182.98 130.555L160.648 102.584C158.805 100.277 158.397 97.1278 159.583 94.3708C160.767 91.6108 163.265 89.8981 166.099 89.8981H176.225V58.3379C176.225 54.7158 178.976 51.7679 182.357 51.7679H195.26C198.643 51.7679 201.391 54.7158 201.391 58.3379V89.8981H211.343C214.197 89.8981 216.702 91.6278 217.881 94.4138C219.057 97.1978 218.618 100.359 216.737 102.656L193.823 130.631C192.463 132.294 190.498 133.248 188.433 133.248Z" fill="#59C059"/>
|
||||
<path d="M188.433 128.279C188.991 128.279 189.551 128.007 189.98 127.482L212.894 99.5078C213.6 98.6458 213.766 97.4428 213.304 96.3478C212.89 95.3678 212.164 94.8668 211.343 94.8668H196.423V58.3379C196.423 57.3851 195.818 56.7362 195.26 56.7362H182.357C181.799 56.7362 181.194 57.3857 181.194 58.3379V94.8668H166.099C165.288 94.8668 164.563 95.3648 164.147 96.3338C163.681 97.4158 163.837 98.6158 164.531 99.4838L186.864 127.457C187.297 128 187.863 128.279 188.433 128.279ZM188.433 133.248C186.333 133.248 184.345 132.266 182.98 130.555L160.648 102.584C158.805 100.277 158.397 97.1278 159.583 94.3708C160.767 91.6108 163.265 89.8981 166.099 89.8981H176.225V58.3379C176.225 54.7158 178.976 51.7679 182.357 51.7679H195.26C198.643 51.7679 201.391 54.7158 201.391 58.3379V89.8981H211.343C214.197 89.8981 216.702 91.6278 217.881 94.4138C219.057 97.1978 218.618 100.359 216.737 102.656L193.823 130.631C192.463 132.294 190.498 133.248 188.433 133.248Z" fill="black" fill-opacity="0.15"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M212.614 156.008C212.497 155.663 212.618 155.246 212.914 155.026L259.995 115.566C260.15 115.434 260.35 115.363 260.558 115.362C261.026 115.362 261.106 115.445 286.85 141.467C287.181 141.803 287.174 142.341 286.831 142.666C286.391 143.082 243.035 184.207 242.579 184.649C242.418 184.806 242.138 184.918 241.91 184.918C239.254 184.918 212.713 156.299 212.614 156.008Z" fill="#CC9900"/>
|
||||
<path d="M219.765 157.935C222.717 161.096 226.034 164.587 229.155 167.803C233.005 171.77 236.361 175.117 238.947 177.543C240.014 178.546 240.934 179.375 241.687 180.015C248.784 173.277 273.951 149.403 281.772 141.986C267.711 127.772 264.334 124.368 261.573 121.624C261.118 121.171 260.719 120.776 260.372 120.435L217.955 155.988C218.501 156.58 219.114 157.237 219.765 157.935ZM212.614 156.008C212.497 155.663 212.618 155.246 212.914 155.026L259.995 115.566C260.15 115.434 260.35 115.363 260.558 115.362C261.026 115.362 261.106 115.445 286.85 141.467C287.181 141.803 287.174 142.341 286.831 142.666C286.391 143.082 243.035 184.207 242.579 184.649C242.418 184.806 242.138 184.918 241.91 184.918C239.254 184.918 212.713 156.299 212.614 156.008Z" fill="black" fill-opacity="0.2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M88.4871 182.005C88.3489 181.779 88.3251 181.503 88.4225 181.256L102.337 145.713C102.464 145.385 102.781 145.171 103.129 145.171C103.154 145.171 212.79 155.431 212.79 155.431C213.064 155.454 213.305 155.61 213.444 155.844C213.583 156.078 213.602 156.367 213.491 156.615L197.518 193.349C197.383 193.662 197.076 193.86 196.739 193.86C196.709 193.86 89.1252 182.408 89.1252 182.408C88.8612 182.381 88.6243 182.232 88.4871 182.005Z" fill="#CC9900"/>
|
||||
<path d="M207.708 158.946C202.57 158.466 202.57 158.466 195.289 157.785C182.441 156.582 169.592 155.381 157.598 154.259L157.589 154.258C142.172 152.815 129.324 151.613 119.901 150.732C114.547 150.231 110.369 149.84 107.477 149.57C106.588 149.486 105.821 149.415 105.179 149.355L93.6168 178.89C93.7914 178.909 93.975 178.928 94.1688 178.948C99.2113 179.486 99.2113 179.486 106.356 180.246C118.963 181.588 131.572 182.93 143.341 184.182L143.353 184.183C158.481 185.794 171.089 187.136 180.336 188.12C185.59 188.678 189.689 189.115 192.528 189.416C193.404 189.509 194.159 189.59 194.79 189.656L208.127 158.986C207.993 158.974 207.853 158.96 207.708 158.946ZM88.4871 182.005C88.3489 181.779 88.3251 181.503 88.4225 181.256L102.337 145.713C102.464 145.385 102.781 145.171 103.129 145.171C103.154 145.171 212.79 155.431 212.79 155.431C213.064 155.454 213.305 155.61 213.444 155.844C213.583 156.078 213.602 156.367 213.491 156.615L197.518 193.349C197.383 193.662 197.076 193.86 196.739 193.86C196.709 193.86 89.1252 182.408 89.1252 182.408C88.8612 182.381 88.6243 182.232 88.4871 182.005Z" fill="black" fill-opacity="0.2"/>
|
||||
<path d="M54.6349 251.695C53.1051 251.278 51.8534 250.026 51.4362 248.496L50.4627 245.02C50.0455 243.351 47.6812 243.351 47.264 245.02L46.2905 248.496C45.8733 250.026 44.6216 251.278 43.0918 251.695L39.615 252.669C37.9461 253.086 37.9461 255.45 39.615 255.867L43.0918 256.841C44.6216 257.258 45.8733 258.51 46.2905 260.039L47.264 263.516C47.6812 265.185 50.0455 265.185 50.4627 263.516L51.4362 260.039C51.8534 258.51 53.1051 257.258 54.6349 256.841L58.1117 255.867C59.7806 255.45 59.7806 253.086 58.1117 252.669L54.6349 251.695Z" fill="#FFBF00"/>
|
||||
<path d="M314.416 187.678C313.249 187.367 312.394 186.433 312.083 185.345L311.383 182.701C311.072 181.457 309.283 181.457 308.972 182.701L308.273 185.345C307.962 186.511 307.028 187.367 305.94 187.678L303.296 188.377C302.052 188.688 302.052 190.477 303.296 190.788L305.94 191.488C307.106 191.799 307.962 192.732 308.273 193.821L308.972 196.464C309.283 197.708 311.072 197.708 311.383 196.464L312.083 193.821C312.394 192.654 313.327 191.799 314.416 191.488L317.059 190.788C318.304 190.477 318.304 188.688 317.059 188.377L314.416 187.678Z" fill="#FFBF00"/>
|
||||
<path d="M97.4593 99.4268C95.2643 98.8788 93.4356 97.0498 92.7041 94.6718L91.241 89.5511C90.5094 87.1735 87.0345 87.1735 86.4858 89.5511L85.0226 94.6718C84.4739 96.8668 82.6451 98.6958 80.2675 99.4268L75.1465 100.891C72.7689 101.622 72.7689 105.097 75.1465 105.646L80.2675 107.109C82.4622 107.657 84.2911 109.486 85.0226 111.864L86.4858 116.985C87.2173 119.362 90.6923 119.362 91.241 116.985L92.7041 111.864C93.2527 109.669 95.0813 107.84 97.4593 107.109L102.58 105.646C104.957 104.914 104.957 101.439 102.58 100.891L97.4593 99.4268Z" fill="#FFBF00"/>
|
||||
<path d="M61.8756 271.937C61.2536 271.781 60.787 271.314 60.6315 270.692L60.2427 269.293C60.0872 268.593 59.0763 268.593 58.9208 269.293L58.532 270.692C58.3765 271.314 57.9099 271.781 57.2879 271.937L55.8882 272.325C55.1884 272.481 55.1884 273.492 55.8882 273.647L57.2879 274.036C57.9099 274.192 58.3765 274.658 58.532 275.28L58.9208 276.68C59.0763 277.38 60.0872 277.38 60.2427 276.68L60.6315 275.28C60.787 274.658 61.2536 274.192 61.8756 274.036L63.2753 273.647C63.9751 273.492 63.9751 272.481 63.2753 272.325L61.8756 271.937Z" fill="#FFBF00"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.7 KiB |
Loading…
Reference in a new issue