diff --git a/src/_colors.scss b/src/_colors.scss index dff8ef60a..1bddfd60d 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -34,3 +34,6 @@ $link-blue: $ui-blue; $splash-green: #9c0; $splash-pink: #c2479d; $splash-blue: #199ed7; + +/* Down Deep */ +$dd-darkblue: hsla(195, 72.4, 17.1, 1); diff --git a/src/routes.json b/src/routes.json index d78eeabe4..13f077c9f 100644 --- a/src/routes.json +++ b/src/routes.json @@ -97,6 +97,13 @@ "view": "dmca/dmca", "title": "DMCA" }, + { + "name": "camp", + "pattern": "^/camp/?$", + "routeAlias": "/camp/?$", + "view": "camp/camp", + "title": "Down Deep" + }, { "name": "educator-landing", "pattern": "^/educators/?$", diff --git a/src/views/camp/camp.jsx b/src/views/camp/camp.jsx new file mode 100644 index 000000000..e99edc6d3 --- /dev/null +++ b/src/views/camp/camp.jsx @@ -0,0 +1,138 @@ +var React = require('react'); +var injectIntl = require('react-intl').injectIntl; +var FormattedMessage = require('react-intl').FormattedMessage; +var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage; +var render = require('../../lib/render.jsx'); +var TitleBanner = require('../../components/title-banner/title-banner.jsx'); +var FlexRow = require('../../components/flex-row/flex-row.jsx'); + +var Page = require('../../components/page/www/page.jsx'); + +require('./camp.scss'); + +var Camp = injectIntl(React.createClass({ + type: 'Camp', + render: function () { + return ( +
+ + Top +
+
+

+ +

+

+ +

+ Bubbles +
+
+ +
+
+
+
+

+

+ +

+
+
+ +
+

+
+

+
+ +
+

+

+ +

+
+
+

+

+ +

+
+ +
+ +
+

+
+

+ +
+

+

+ +

+
+
+

+

+ +

+
+ +
+ +
+

+
+

+ +
+

+

+ +

+
+
+

+

+ +

+
+ +
+
+
+ Bubbles +
+
+

+ +
+ Dolphin +

+ +

+
+
+ +

+ +

+
+
+ +

+ +

+
+ +
+
+ Top +
+
+ ); + } +})); + +render(, document.getElementById('app')); diff --git a/src/views/camp/camp.scss b/src/views/camp/camp.scss new file mode 100644 index 000000000..65062ed69 --- /dev/null +++ b/src/views/camp/camp.scss @@ -0,0 +1,90 @@ +@import "../../colors"; +@import "../../frameless"; + +#view { + padding: 0; +} +.topImg { + margin-top: -10px; + padding: 0; + width: 100%; +} +.bubbles { + display: block; + margin: 0 auto; + margin-top: .938em; + width: 45%; +} +.inner a { + text-decoration: underline; +} +.inner a:hover { + text-decoration: underline; + color: $ui-light-gray; +} +h3 { + border-bottom: 1px solid $ui-border; +} +.flex-row { + &.sidebar-row { + align-items: flex-start; + + .body-copy { + width: $cols5; + } + + .sidebar { + width: $cols5; + } + } +} +#particpate { + position: relative; + + h2, h3, p { + color: $ui-white; + } +} +#info { + h2, p { + color: $ui-white; + } +} +.info-content { + div { + max-width: $cols4; + text-align: center; + } +} +.infoImg { + transform: scale(.8); + height: 120px; + -webkit-transform: scale(.8); /* Saf3.1+, Chrome */ + -moz-transform: scale(.8); /* FF3.5+ */ + -ms-transform: scale(.8); /* IE9 */ + -o-transform: scale(.8); /* Opera 10.5+ */ +} +.bottomImg { + margin-bottom: -5px; + margin-left: -4px; + padding: 0; + width: 102%; +} +.title-banner { + margin: 0; + padding: 0; +} +.fishDivider { + margin: .875em 0; +} +.gradient1 { + position: relative; + background: $ui-blue; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient($ui-blue, $dd-darkblue); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient($ui-blue, $dd-darkblue); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient($ui-blue, $dd-darkblue); /* For Firefox 3.6 to 15 */ + background: linear-gradient($ui-blue, $dd-darkblue); + .intro { + max-width: $cols9; + } +} diff --git a/src/views/camp/l10n.json b/src/views/camp/l10n.json new file mode 100644 index 000000000..b06fff1c6 --- /dev/null +++ b/src/views/camp/l10n.json @@ -0,0 +1,21 @@ +{ + "camp.title": "Scratch Camp: Down Deep", + "camp.dates": "July 24th - August 13th", + "camp.welcome": "Welcome to Scratch Camp 2017!", + "camp.welcomeIntro": "Come take a dive into the ocean with us and design your very own creation. Your creation can be anything you might find in the ocean - real or made up!
In this year’s camp, dive down deep with us in these three parts:", + "camp.part1Dates":"Part 1 (July 24th - July 30th)", + "camp.detailsTitle": "Details:", + "camp.part1Details": "Create a project introducing us to a character, real or imagined, that lives in the ocean. You could create a monster from the depths, a cute little starfish, a taco eating shark, or anything else you can imagine.", + "camp.particpateTitle": "How to Particpate:", + "camp.part1Particpate": "Part 1 of camp will take place in the Main Camp Cabin studio. Here you can ask questions, view other Scratchers' creations, and submit your own. Go to the studio to learn more!", + "camp.part2Dates": "Part 2 (July 31st - August 6th)", + "camp.part2Details": "Now make your character interactive! Does your character have questions to ask us? What happens when you click on it? Does it have any special powers? And more!", + "camp.part2Particpate":"Part 2 of camp will also take place in the Main Camp Cabin studio. Here you can ask questions, view other Scratchers' creations, and submit your own. Go to the studio to learn more!", + "camp.part3Dates": "Part 3 (August 7th - August 13th)", + "camp.part3Details": "Create a project using your own creation along with other Scratchers’ creations. It could be a game, story, animation, or anything you come up with!", + "camp.part3Particpate":"The Final Projects Camp Cabin studio will hold part 3 of this year's Scratch Camp. Here you can submit your final project, give feedback to others, and celebrate Scratch Camp! Swim on over to the studio when part 3 comes out!", + "camp.helpfulInfo": "Helpful Information", + "camp.infoCounselors": "The Camp Counselors studio offers a variety of examples for your ocean creation. You can also directly communicate with the Counselors there.", + "camp.infoPart3":"Remember, in part 3, you must use some other creations made for this Scratch Camp. Use their part 2 project to learn about the character's personality!", + "camp.infoTime":"Don't worry if you aren't around the whole time, you can always participate in whatever part you are available for! Just have fun and dive deep!" +} diff --git a/static/images/camp/bubbles.svg b/static/images/camp/bubbles.svg new file mode 100644 index 000000000..969f322fc --- /dev/null +++ b/static/images/camp/bubbles.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/camp/dolphin.svg b/static/images/camp/dolphin.svg new file mode 100644 index 000000000..2d84af7c5 --- /dev/null +++ b/static/images/camp/dolphin.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/camp/fish-divider.svg b/static/images/camp/fish-divider.svg new file mode 100644 index 000000000..d7f950c63 --- /dev/null +++ b/static/images/camp/fish-divider.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/camp/fish-divider2.svg b/static/images/camp/fish-divider2.svg new file mode 100644 index 000000000..b970ffcdb --- /dev/null +++ b/static/images/camp/fish-divider2.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/camp/map.svg b/static/images/camp/map.svg new file mode 100644 index 000000000..a87ec245c --- /dev/null +++ b/static/images/camp/map.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/camp/ocean-bottom.svg b/static/images/camp/ocean-bottom.svg new file mode 100644 index 000000000..e2446163c --- /dev/null +++ b/static/images/camp/ocean-bottom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/camp/ocean-top.svg b/static/images/camp/ocean-top.svg new file mode 100644 index 000000000..85efb7018 --- /dev/null +++ b/static/images/camp/ocean-top.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/camp/treasure.svg b/static/images/camp/treasure.svg new file mode 100644 index 000000000..54eae7154 --- /dev/null +++ b/static/images/camp/treasure.svg @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file