Merge pull request #1662 from chrisgarrity/feature/hoc-2017

Feature/hoc 2017

src/components/ttt-tile/ttt-tile.jsx

@@ -47,7 +47,7 @@ var TTTTile = React.createClass({
                 {this.props.onGuideClick && (
                     <div className="ttt-tile-guides" onClick={this.props.onGuideClick}>
                         <FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
-                        <img className="ttt-tile-see-more" src="/svgs/ttt/see-more.svg" />
+                        <img className="ttt-tile-open-modal" src="/svgs/modal/open-blue.svg" />
                     </div>
                 )}
             </div>

src/components/ttt-tile/ttt-tile.scss

@@ -105,14 +105,15 @@
     font-size: .75rem;
     font-weight: 500;
 
-
     &:hover {
         background-color: lighten($link-blue, 40%);
     }
 }
 
-.ttt-tile-see-more {
+.ttt-tile-open-modal {
     display: inline-block;
     padding: 0 .25rem;
-    vertical-align: middle;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: text-bottom;
 }

src/views/splash/hoc/middle-banner.jsx

@@ -0,0 +1,115 @@
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var MediaQuery = require('react-responsive');
+var React = require('react');
+
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
+var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+var TTTModal = require('../../../components/modal/ttt/modal.jsx');
+var TTTTile = require('../../../components/ttt-tile/ttt-tile.jsx');
+
+var frameless = require('../../../lib/frameless');
+var tiles = require('../../tips/ttt');
+
+require('../../../components/forms/button.scss');
+require('./middle-banner.scss');
+
+var MiddleBanner = injectIntl(React.createClass({
+    getInitialState: function () {
+        return {
+            currentTile: tiles[1],
+            TTTModalOpen: false
+        };
+    },
+    showTTTModal: function (tile) {
+        return this.setState({
+            currentTile: tile,
+            TTTModalOpen: true
+        });
+    },
+    hideTTTModal: function () {
+        return this.setState({TTTModalOpen: false});
+    },
+    renderTTTTiles: function () {
+        var formatMessage = this.props.intl.formatMessage;
+        
+        var tileObjects = {
+            flyTile: {
+                title: formatMessage({id: tiles[1].title}),
+                description: formatMessage({id: tiles[1].description}),
+                tutorialLoc: tiles[1].tutorialLoc,
+                activityLoc: formatMessage({id: tiles[1].activityLoc}),
+                guideLoc: formatMessage({id: tiles[1].guideLoc}),
+                thumbUrl: tiles[1].thumbUrl,
+                bannerUrl: tiles[1].bannerUrl
+            },
+            musicTile: {
+                title: formatMessage({id: tiles[2].title}),
+                description: formatMessage({id: tiles[2].description}),
+                tutorialLoc: tiles[2].tutorialLoc,
+                activityLoc: formatMessage({id: tiles[2].activityLoc}),
+                guideLoc: formatMessage({id: tiles[2].guideLoc}),
+                thumbUrl: tiles[2].thumbUrl,
+                bannerUrl: tiles[2].bannerUrl
+            },
+            pongTile: {
+                title: formatMessage({id: tiles[7].title}),
+                description: formatMessage({id: tiles[7].description}),
+                tutorialLoc: tiles[7].tutorialLoc,
+                activityLoc: formatMessage({id: tiles[7].activityLoc}),
+                guideLoc: formatMessage({id: tiles[7].guideLoc}),
+                thumbUrl: tiles[7].thumbUrl,
+                bannerUrl: tiles[7].bannerUrl
+            }
+        };
+        
+        return [
+            <TTTTile
+                key={1}
+                className="mod-banner"
+                onGuideClick={this.showTTTModal.bind(this, tileObjects.flyTile)}
+                {...tileObjects.flyTile}
+            />,
+            <TTTTile
+                key={2}
+                className="mod-banner"
+                onGuideClick={this.showTTTModal.bind(this, tileObjects.musicTile)}
+                {...tileObjects.musicTile}
+            />,
+            <TTTTile
+                key={7}
+                className="mod-banner mod-last-tile"
+                onGuideClick={this.showTTTModal.bind(this, tileObjects.pongTile)}
+                {...tileObjects.pongTile}
+            />
+        ];
+    },
+    render: function () {
+        return (
+            <TitleBanner className="mod-splash-middle">
+                <div className="middle-banner inner">
+                    <FlexRow className="middle-banner-header">
+                        <h1 className="middle-banner-header-h1">
+                            <FormattedMessage id="middle-banner.header" />
+                        </h1>
+                        <a href="/tips" className="button mod-ttt-try-button">
+                            <FormattedMessage id="middle-banner.ttt" />
+                        </a>
+                    </FlexRow>
+                    <MediaQuery minWidth={frameless.tablet}>
+                        <FlexRow className="middle-banner-tiles">
+                            {this.renderTTTTiles()}
+                        </FlexRow>
+                        <TTTModal
+                            isOpen={this.state.TTTModalOpen}
+                            onRequestClose={this.hideTTTModal}
+                            {...this.state.currentTile}
+                        />
+                    </MediaQuery>
+                </div>
+            </TitleBanner>
+        );
+    }
+}));
+
+module.exports = MiddleBanner;

src/views/splash/hoc/middle-banner.scss

@@ -0,0 +1,49 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+.title-banner.mod-splash-middle {
+    background: url("/images/blocks-pattern.png");
+    background-color: $ui-purple;
+    background-repeat: repeat;
+    background-size: 180px 180px;
+}
+
+.middle-banner-header {
+    margin-bottom: 1rem;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.middle-banner-header-h1 {
+    color: $type-white;
+}
+
+.mod-ttt-try-button {
+    &:link,
+    &:visited,
+    &:active
+    &:hover {
+        color: $type-white;
+    }
+}
+
+.ttt-tile.mod-banner {
+    background-color: $background-color;
+}
+
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    .mod-last-tile {
+        display: none;
+    }
+    
+    .middle-banner-header {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+@media only screen and (max-width: $tablet - 1) {
+    .title-banner.mod-splash-middle {
+        display: none;
+    }
+}

src/views/splash/hoc/top-banner.jsx

@@ -0,0 +1,108 @@
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
+
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
+var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+var TTTModal = require('../../../components/modal/ttt/modal.jsx');
+
+require('../../../components/forms/button.scss');
+require('./top-banner.scss');
+
+var nameTile = {
+    title: 'ttt.AnimateYourNameTitle',
+    description: 'ttt.AnimateYourNameDescription',
+    thumbUrl: '/images/ttt/animate-your-name.jpg',
+    bannerUrl: '/images/ttt/animate-your-name-banner.jpg',
+    tutorialLoc: '/projects/editor/?tip_bar=name',
+    activityLoc: 'cards.nameCardsLink',
+    guideLoc: 'guides.NameGuideLink'
+};
+
+var TopBanner = injectIntl(React.createClass({
+    type: 'TopBanner',
+    getInitialState: function () {
+        // use translated tile
+        var formatMessage = this.props.intl.formatMessage;
+        var translatedTile = {};
+        translatedTile = {
+            title: formatMessage({id: nameTile.title}),
+            description: formatMessage({id: nameTile.description}),
+            tutorialLoc: nameTile.tutorialLoc,
+            activityLoc: formatMessage({id: nameTile.activityLoc}),
+            guideLoc: formatMessage({id: nameTile.guideLoc}),
+            thumbUrl: nameTile.thumbUrl,
+            bannerUrl: nameTile.bannerUrl
+        };
+        return {currentTile: translatedTile, TTTModalOpen: false};
+    },
+    showTTTModal: function () {
+        this.setState({TTTModalOpen: true});
+    },
+    hideTTTModal: function () {
+        this.setState({TTTModalOpen: false});
+    },
+    render: function () {
+        return (
+            <TitleBanner className="mod-splash-top">
+                <FlexRow className="banner-top inner">
+                    <FlexRow className="top-animation">
+                        <img
+                            src="/images/hoc/s.png"
+                            alt=""
+                            className="top-animation-letter mod-letter-s"
+                        />
+                        <img
+                            src="/images/hoc/c1.png"
+                            alt=""
+                            className="top-animation-letter mod-letter-c1"
+                        />
+                        <img
+                            src="/images/hoc/r.png"
+                            alt=""
+                            className="top-animation-letter mod-letter-r"
+                        />
+                        <img
+                            src="/images/hoc/a.png"
+                            alt=""
+                            className="top-animation-letter mod-letter-a"
+                        />
+                        <img
+                            src="/images/hoc/t.png"
+                            alt=""
+                            className="top-animation-letter mod-letter-t"
+                        />
+                        <img
+                            src="/images/hoc/c2.png"
+                            alt=""
+                            className="top-animation-letter mod-letter-c2"
+                        />
+                        <img
+                            src="/images/hoc/h.png"
+                            alt=""
+                            className="top-animation-letter mod-letter-h"
+                        />
+                    </FlexRow>
+                    
+                    <div className="top-links">
+                        <a href="/projects/editor/?tip_bar=name" className="button mod-top-button">
+                            <FormattedMessage id="ttt.AnimateYourNameTitle" />
+                        </a>
+                        <div className="mod-guides-link" onClick={this.showTTTModal}>
+                            &nbsp;&nbsp;
+                            <FormattedMessage id="tile.guides" />
+                            <img className="top-open-modal" src="/svgs/modal/open-white.svg" />
+                            <TTTModal
+                                isOpen={this.state.TTTModalOpen}
+                                onRequestClose={this.hideTTTModal}
+                                {...this.state.currentTile}/>
+                        </div>
+                    </div>
+                </FlexRow>
+            </TitleBanner>
+        );
+    }
+}));
+
+module.exports = TopBanner;
+

src/views/splash/hoc/top-banner.scss

@@ -0,0 +1,227 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+.title-banner.mod-splash-top {
+    background-color: $ui-aqua;
+    background-image: url("/images/hoc/splash-left.png"), url("/images/hoc/splash-right.png");
+    background-repeat: no-repeat, no-repeat;
+    background-position: left bottom, right bottom;
+    background-size: 40% auto, 40% auto;
+}
+
+.banner-top {
+    background-image: url("/images/hoc/doodads.png");
+    background-repeat: no-repeat;
+    background-position: top;
+    background-size: 70%;
+    flex-direction: column;
+}
+
+.top-banner-header {
+    justify-content: space-between;
+}
+
+.top-banner-header-h1 {
+    margin-bottom: 1.25rem;
+    color: $type-white;
+}
+
+.banner-image.mod-top {
+    width: 100%;
+}
+
+.top-animation {
+    padding-top: 2rem;
+    padding-bottom: 1rem;
+    width: 70%;
+}
+
+.top-animation-letter {
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+    width: 100%;
+}
+
+@keyframes jump {
+    from,
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+
+    12.5%,
+    62.5% {
+        transform: translate3d(0, 10px, 0);
+    }
+
+    37.5%,
+    87.5% {
+        transform: translate3d(0, -10px, 0);
+    }
+}
+
+.mod-letter-s {
+    // width: 16.6%;
+    animation-name: jump;
+    width: 13.3%;
+}
+
+@keyframes pulse {
+    from {
+        transform: scale3d(1, 1, 1);
+    }
+
+    50% {
+        transform: scale3d(1.25, 1.25, 1.25);
+    }
+
+    to {
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.mod-letter-c1 {
+    // width: 12.5%;
+    animation-name: pulse;
+    width: 10%;
+}
+
+@keyframes spin-left {
+    90% {
+        transform: rotate3d(0, 0, 1, -360deg);
+    }
+
+    to {
+        transform: rotate3d(0, 0, 1, -360deg);
+    }
+}
+
+.mod-letter-r {
+    // width: 14%;
+    animation-name: spin-left;
+    width: 11.2%;
+}
+
+@keyframes swing {
+    25% {
+        transform: rotate3d(0, 0, 1, 40deg);
+    }
+
+    75% {
+        transform: rotate3d(0, 0, 1, -40deg);
+    }
+
+    from,
+    to {
+        transform: rotate3d(0, 0, 1, 0deg);
+    }
+}
+
+.mod-letter-a {
+    // width: 14.4%;
+    animation-name: swing;
+    width: 11.5%;
+}
+
+@keyframes shake {
+    from,
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+
+    12.5%,
+    62.5% {
+        transform: translate3d(-10px, 0, 0);
+    }
+
+    37.5%,
+    87.5% {
+        transform: translate3d(10px, 0, 0);
+    }
+}
+
+.mod-letter-t {
+    // width: 15.5%;
+    animation-name: shake;
+    width: 12.4%;
+}
+
+@keyframes spin-right {
+    90% {
+        transform: rotate3d(0, 0, 1, 360deg);
+    }
+
+    to {
+        transform: rotate3d(0, 0, 1, 360deg);
+    }
+}
+
+.mod-letter-c2 {
+    // width: 12.5%;
+    animation-name: spin-right;
+    width: 10%;
+}
+
+@keyframes inverse-jump {
+    from,
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+
+    12.5%,
+    62.5% {
+        transform: translate3d(0, -10px, 0);
+    }
+
+    37.5%,
+    87.5% {
+        transform: translate3d(0, 10px, 0);
+    }
+}
+
+.mod-letter-h {
+    // width: 14.4%;
+    animation-name: inverse-jump;
+    width: 11.5%;
+}
+
+.mod-top-button {
+    &:active &:hover,
+    &:link,
+    &:visited {
+        color: $type-white;
+        font-size: 1rem;
+    }
+}
+
+.mod-top-button {
+    border: 1px solid $active-gray;
+    box-shadow: none;
+    background-color: $ui-blue;
+}
+
+.top-links {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.mod-guides-link {
+    cursor: pointer;
+    padding: 1.25rem 0;
+    color: $ui-white;
+    font-size: 1rem;
+    font-weight: 500;
+}
+
+.top-open-modal {
+    display: inline-block;
+    padding: 0 .25rem;
+    vertical-align: top;
+}
+@media only screen and (max-width: $tablet - 1) {
+    .flex-row.top-animation {
+        flex-direction: row;
+    }
+}

src/views/splash/l10n-static.json

@@ -0,0 +1,10 @@
+{
+    "cards.nameCardsLink": "https://resources.scratch.mit.edu/www/cards/en/nameCards.pdf",
+    "cards.flyCardsLink": "https://resources.scratch.mit.edu/www/cards/en/flyCards.pdf",
+    "cards.musicCardsLink": "https://resources.scratch.mit.edu/www/cards/en/musicCards.pdf",
+    "cards.pongCardsLink": "https://resources.scratch.mit.edu/www/cards/en/pongCards.pdf",
+    "guides.NameGuideLink": "https://resources.scratch.mit.edu/www/guides/en/NameGuide.pdf",
+    "guides.FlyGuideLink": "https://resources.scratch.mit.edu/www/guides/en/FlyGuide.pdf",
+    "guides.MusicGuideLink": "https://resources.scratch.mit.edu/www/guides/en/MusicGuide.pdf",
+    "guides.PongGuideLink": "https://resources.scratch.mit.edu/www/guides/en/PongGuide.pdf"
+}

src/views/splash/l10n.json

@@ -29,6 +29,27 @@
     "teacherbanner.classesButton": "My Classes",
     "teacherbanner.faqButton": "Teacher Account FAQ",
     
+    "middle-banner.header": "Get Creative with Coding",
+    "middle-banner.ttt": "See more activities",
+    "ttt.tutorial": "Tutorial",
+    "ttt.open": "Open",
+    "ttt.tutorialSubtitle": "Find out how to make this project using a step-by-step tutorial in Scratch.",
+    "ttt.activityTitle": "Activity Cards",
+    "ttt.activitySubtitle": "Explore new coding ideas using this set of illustrated cards you can print out.",
+    "ttt.educatorTitle": "Educator Guide",
+    "ttt.educatorSubtitle": "Use this educator guide to plan and lead a one-hour Scratch workshop.",
+    "tile.tryIt": "Try It",
+    "tile.guides": "See Cards and Guides",
+    "ttt.download": "Download",
+    "ttt.AnimateYourNameTitle": "Animate a Name",
+    "ttt.AnimateYourNameDescription": "Animate the letters of your username, initials, or favorite word.",
+    "ttt.MakeItFlyTitle": "Make It Fly",
+    "ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",
+    "ttt.MakeMusicTitle": "Make Music",
+    "ttt.MakeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
+    "ttt.PongTitle": "Pong Game",
+    "ttt.PongDescription": "Make a bouncing ball game with sounds, points, and other effects.",
+
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",
     "welcome.tryOut": "Try out starter projects",

src/views/splash/presentation.jsx

@@ -11,6 +11,8 @@ var Box = require('../../components/box/box.jsx');
 var Button = require('../../components/forms/button.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
 var LegacyCarousel = require('../../components/carousel/legacy-carousel.jsx');
+var TopBanner = require('./hoc/top-banner.jsx');
+var MiddleBanner = require('./hoc/middle-banner.jsx');
 var Intro = require('../../components/intro/intro.jsx');
 var IframeModal = require('../../components/modal/iframe/modal.jsx');
 var News = require('../../components/news/news.jsx');
@@ -253,6 +255,7 @@ var SplashPresentation = injectIntl(React.createClass({
                 {this.props.isEducator ? [
                     <TeacherBanner key="teacherbanner" messages={messages} />
                 ] : []}
+                <TopBanner />
                 <div key="inner" className="inner mod-splash">
                     {this.props.sessionStatus === sessionActions.Status.FETCHED ? (
                         Object.keys(this.props.user).length !== 0 ? [
@@ -273,6 +276,12 @@ var SplashPresentation = injectIntl(React.createClass({
                         ]) : []
                     }
 
+                    {featured.shift()}
+                    {featured.shift()}
+                </div>
+                <MiddleBanner />
+                <div key="inner2" className="inner mod-splash">
+                    
                     {featured}
 
                     {this.props.isAdmin ? [

static/svgs/modal/open-blue.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>open-blue</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="open-blue" fill="#4C97FF">
+            <path d="M16.904265,9.16353035 L15.4298099,7.69520276 L10.2383662,11.6050888 C9.64794591,12.057779 8.79050666,11.9379804 8.33625534,11.3315664 C7.9692373,10.844951 7.97668404,10.1706865 8.33625534,9.70951497 L12.2606889,4.53591307 L10.8213398,3.10151073 C10.4107052,2.6922873 10.7011281,2.00848131 11.2670806,2.00848131 L17.3585163,2 C17.709577,2.00848131 18,2.29896634 18,2.64033925 L18,8.71932149 C18,9.28332892 17.3063891,9.56427246 16.904265,9.16353035 Z M15.3807332,18 L3.03722491,18 C2.46488952,18 2,17.5367082 2,16.9652796 L2,4.66419295 C2,4.09382454 2.46488952,3.62947257 3.03722491,3.62947257 L7.82335296,3.62947257 C8.39781598,3.62947257 8.86164168,4.09382454 8.86164168,4.66419295 C8.86164168,5.23562152 8.39781598,5.69891333 7.82335296,5.69891333 L4.07657745,5.69891333 L4.07657745,15.9305592 L14.3424445,15.9305592 L14.3424445,13.2101776 C14.3424445,12.638749 14.807334,12.1754572 15.3807332,12.1754572 C15.9541324,12.1754572 16.4200857,12.638749 16.4200857,13.2101776 L16.4200857,16.9652796 C16.4200857,17.5367082 15.9541324,18 15.3807332,18 Z" id="open-white"></path>
+        </g>
+    </g>
+</svg>

static/svgs/modal/open-white.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>open-modal-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="open-modal-icon" fill="#FFFFFF">
+            <path d="M16.904265,9.16353035 L15.4298099,7.69520276 L10.2383662,11.6050888 C9.64794591,12.057779 8.79050666,11.9379804 8.33625534,11.3315664 C7.9692373,10.844951 7.97668404,10.1706865 8.33625534,9.70951497 L12.2606889,4.53591307 L10.8213398,3.10151073 C10.4107052,2.6922873 10.7011281,2.00848131 11.2670806,2.00848131 L17.3585163,2 C17.709577,2.00848131 18,2.29896634 18,2.64033925 L18,8.71932149 C18,9.28332892 17.3063891,9.56427246 16.904265,9.16353035 Z M15.3807332,18 L3.03722491,18 C2.46488952,18 2,17.5367082 2,16.9652796 L2,4.66419295 C2,4.09382454 2.46488952,3.62947257 3.03722491,3.62947257 L7.82335296,3.62947257 C8.39781598,3.62947257 8.86164168,4.09382454 8.86164168,4.66419295 C8.86164168,5.23562152 8.39781598,5.69891333 7.82335296,5.69891333 L4.07657745,5.69891333 L4.07657745,15.9305592 L14.3424445,15.9305592 L14.3424445,13.2101776 C14.3424445,12.638749 14.807334,12.1754572 15.3807332,12.1754572 C15.9541324,12.1754572 16.4200857,12.638749 16.4200857,13.2101776 L16.4200857,16.9652796 C16.4200857,17.5367082 15.9541324,18 15.3807332,18 Z"></path>
+        </g>
+    </g>
+</svg>

static/svgs/ttt/see-more.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
-	.st0{opacity:0.2;fill:#4C97FF;stroke:#4C97FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-	.st1{fill:none;stroke:#4C97FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-	.st2{fill:#4C97FF;}
-</style>
-<path class="st0" d="M13,11H6c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h7c0.6,0,1,0.4,1,1v7C14,10.6,13.6,11,13,11z"/>
-<path class="st1" d="M9,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V8c0-0.6,0.4-1,1-1"/>
-<path class="st1" d="M13,11H6c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h7c0.6,0,1,0.4,1,1v7C14,10.6,13.6,11,13,11z"/>
-<g>
-	<path class="st2" d="M12,4.2v2.4c0,0.2-0.3,0.3-0.4,0.2L10.8,6l-3,2.7c-0.1,0.1-0.3,0.1-0.4,0c-0.1-0.1-0.1-0.3,0-0.4L10,5.2
-		L9.2,4.4C9,4.3,9.1,4,9.4,4h2.4C11.9,4,12,4.1,12,4.2z"/>
-</g>
-</svg>