Commit 5cb46b15 authored by Connor Hudson's avatar Connor Hudson Committed by GitHub

Merge pull request #601 from technoboy10/educator-landing

Fix GH-311: Educator landing page
parents 92883d3c ebf45c6f
...@@ -67,6 +67,12 @@ ...@@ -67,6 +67,12 @@
"view": "faq/faq", "view": "faq/faq",
"title": "FAQ" "title": "FAQ"
}, },
{
"name": "educator-landing",
"pattern": "^/educators/?$",
"view": "teachers/landing/landing",
"title": "Educators"
},
{ {
"name": "teacher-faq", "name": "teacher-faq",
"pattern": "^/educators/faq/?$", "pattern": "^/educators/faq/?$",
......
var React = require('react');
var render = require('../../../lib/render.jsx');
var Page = require('../../../components/page/www/page.jsx');
var FlexRow = require('../../../components/flex-row/flex-row.jsx');
var SubNavigation = require('../../../components/subnavigation/subnavigation.jsx');
var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
var Button = require('../../../components/forms/button.jsx');
require('./landing.scss');
var Landing = React.createClass({
type: 'Landing',
render: function () {
return (
<div className="educators">
<TitleBanner className="masthead">
<div className="inner">
<h1>Scratch for Educators</h1>
<FlexRow className="masthead-info">
<p className="intro">
Your students can use Scratch to code their own{' '}
interactive stories, animations, and games.{' '}
In the process, they learn to think creatively,{' '}
reason systematically, and work{' '}
collaboratively — essential skills for everyone in today’s society.
</p>
<iframe src="https://www.youtube.com/embed/uPSuG063jhA"
frameborder="0" allowfullscreen></iframe>
</FlexRow>
</div>
<div className="band">
<SubNavigation className="inner">
<a href="#in-practice">
<li>
In Practice
</li>
</a>
<a href="#resources">
<li>
Resources
</li>
</a>
<a href="#teacher-accounts">
<li>
Teacher Accounts
</li>
</a>
</SubNavigation>
</div>
</TitleBanner>
<div className="inner">
<section id="in-practice">
<span className="nav-spacer"></span>
<h2>Who Uses Scratch?</h2>
<p className="intro">Educators are using Scratch in a wide variety of: </p>
<FlexRow className="general-usage">
<p><b>Settings:</b> schools, museums, libraries, community centers</p>
<p><b>Grade Levels:</b> elementary, middle, and high school (and some colleges too!)</p>
<p><b>Subject Areas:</b> language arts, science, social studies,{' '}
math, computer science, foreign languages, and the arts</p>
</FlexRow>
<FlexRow className="stories">
<div className="story">
<img src="/images/teachers/stories/ingrid.jpg" alt="ingrid's story" />
<div className="story-info">
<a href="//bit.ly/28SBsa9">Ingrid Gustafson</a>
<p>Instructional Technology Specialist</p>
</div>
</div>
<div className="story">
<img src="/images/teachers/stories/dylan.jpg" alt="dylan's story" />
<div className="story-info">
<a href="//bit.ly/28Q5l6P">Dylan Ryder</a>
<p>Educational Technologist</p>
</div>
</div>
<div className="story">
<img src="/images/teachers/stories/plug-in-studio.jpg"
alt="plug in studio's story" />
<div className="story-info">
<a href="//bit.ly/28SC1AY">Plug-In Studios</a>
<p>After-School Program</p>
</div>
</div>
<div className="story">
<img src="/images/teachers/stories/ghana-code-club.jpg"
alt="ghana code club's story" />
<div className="story-info">
<a href="//bit.ly/28UzapJ">Ghana Code Club</a>
<p>After-School Program</p>
</div>
</div>
</FlexRow>
</section>
<section id="resources">
<span className="nav-spacer"></span>
<h2>Educator Resources</h2>
<FlexRow className="educator-community">
<div>
<h3>A Community for Educators</h3>
<p>
<a href="http://scratched.gse.harvard.edu/">ScratchEd</a> is an{' '}
online community where Scratch educators{' '}
<a href="http://scratched.gse.harvard.edu/stories">share stories</a>,
exchange resources, ask questions, and{' '}
find people. ScratchEd is developed and supported by{' '}
the Harvard Graduate School of Education.
</p>
</div>
<div>
<h3>In-Person Gatherings</h3>
<p>
<a href="http://www.meetup.com/pro/scratched/">Scratch Educator Meetups</a>{' '}
are gatherings of Scratch Educators who want to learn with and{' '}
from each other, sharing their ideas and strategies{' '}
for supporting computational creativity in all its forms.
</p>
</div>
</FlexRow>
<h3 id="guides-header">Guides & Tutorials</h3>
<FlexRow className="guides-and-tutorials">
<div>
<img src="/svgs/teachers/resources.svg" alt="resources icon" />
<p>
On the <a href="https://scratch.mit.edu/help/">Help Page</a>,{' '}
you can find workshop guides, Scratch Cards, videos, and other resources.
</p>
</div>
<div>
<img src="/svgs/teachers/tips-window.svg" alt="tips window icon" />
<p>
The{' '}
<a href="https://scratch.mit.edu/projects/editor/?tip_bar=home">Tips Window</a>{' '}
features step-by-step tutorials for getting started in Scratch.
</p>
</div>
<div>
<img src="/svgs/teachers/creative-computing.svg" alt="creative computing icon" />
<p>
The <a href="http://scratched.gse.harvard.edu/guide/">Creative Computing{' '}
Curriculum Guide</a>{' '}
provides plans, activities, and{' '}
strategies for introducing creative computing.
</p>
</div>
</FlexRow>
</section>
</div>
<div id="teacher-accounts">
<div className="inner account-flex">
<div id="left">
<h2>Teacher Accounts in Scratch</h2>
<p>
As an educator, you can request a Scratch Teacher Account,{' '}
which makes it easier to create accounts for{' '}
groups of students and to manage your students’{' '}
projects and comments. To learn more, see the{' '}
<a href="faq">Teacher Account FAQ page</a>.
</p>
<a href="register"><Button>Request Account</Button></a>
</div>
<img src="/images/teachers/teacher-account.png" alt="teacher account" id="teacher-icon"/>
</div>
</div>
</div>
);
}
});
render(<Page><Landing /></Page>, document.getElementById('app'));
@import "../../../colors";
@import "../../../frameless";
$teacher-spot: $ui-purple;
$story-width: $cols3;
#view {
padding: 0;
}
.educators {
.intro {
margin: 0;
}
b {
font-weight: bold;
}
a {
white-space: normal;
}
.title-banner {
&.masthead {
background-color: $teacher-spot;
padding-bottom: 0;
h1 {
margin: 0;
color: $ui-white;
}
.masthead-info {
display: flex;
align-items: center;
justify-content: space-between;
p {
margin: 0;
max-width: $cols6;
text-align: left;
color: $ui-white;
a {
border-bottom: 1px solid $ui-white;
color: $ui-white;
}
}
iframe {
margin-bottom: $gutter;
border: 2px solid $ui-border;
border-radius: 10px;
width: $cols4;
}
}
.band {
$band-color: hsla(360, 100, 100, .15);
margin-top: 2rem;
background-color: $band-color;
padding: 1rem 0;
}
.sub-nav {
text-align: left;
li {
margin: 0 .5rem 0 0;
}
}
}
&.faq-banner {
margin-bottom: 0;
background-color: $ui-gray;
}
}
.general-usage {
justify-content: space-between;
p {
max-width: $cols4;
}
}
.educator-community {
margin-bottom: 2rem;
text-align: left;
justify-content: space-between;
align-items: flex-start;
div {
max-width: $cols6;
}
}
.guides-and-tutorials {
div {
max-width: $cols4;
text-align: center;
}
}
section {
margin-bottom: 3rem;
}
#in-practice,
#resources {
.nav-spacer {
display: block;
visibility: hidden;
margin-top: -50px; // height of nav bar
height: 50px;
}
}
#in-practice {
border-bottom: 1px solid $ui-border;
padding-bottom: 2rem;
.stories {
margin: auto;
align-items: center;
justify-content: space-between;
flex-direction: row;
}
.story {
margin: 10px auto;
border: 1px solid $ui-border;
border-radius: 10px;
background-color: $ui-white;
box-sizing: border-box;
img {
border-top-left-radius: 9px;
border-top-right-radius: 9px;
width: 100%;
}
.story-info {
padding-top: 10px;
padding-left: 10px;
p {
margin: 10px 0;
font-size: .75rem;
}
}
}
}
#resources {
h2 {
padding-bottom: 2rem;
text-align: center;
}
h3 {
font-weight: 300;
}
#guides-header {
text-align: center;
}
}
#teacher-accounts {
margin-bottom: -3px;
background-color: $teacher-spot;
padding: 50px 0;
width: 100%;
overflow-x: hidden;
.inner {
display: flex;
height: 100%;
align-items: center;
}
p {
margin: 0;
text-align: left;
color: $ui-white;
a {
border-bottom: 1px solid $ui-white;
color: $ui-white;
}
}
h2 {
margin: 0 0 2rem 0;
text-align: left;
color: $ui-white;
}
#left {
width: $cols4;
max-width: $cols4;
text-align: left;
p {
margin-bottom: 3.5rem;
}
button {
background-color: $ui-white;
padding: 16px 16px;
width: $cols5 / 2;
color: $ui-blue;
font-size: 16px;
font-weight: 500;
}
}
img {
width: $cols7;
}
}
}
//4 columns
@media only screen and (max-width: $mobile - 1) {
$story-width: $cols4;
.stories {
width: $cols4;
}
.story {
width: $story-width;
img {
width: $story-width;
}
}
.title-banner {
&.masthead {
padding-bottom: 2rem;
}
.band {
display: none;
}
}
.flex-row {
&.sidebar-row {
.body-copy {
width: 100%;
}
}
}
#teacher-icon {
display: none;
}
.in-practice {
text-align: center;
}
.flex-row {
align-items: center;
}
.story {
margin-left: 50px;
}
.general-usage {
align-items: center;
}
.guides-and-tutorials {
align-items: center;
}
.account-flex {
justify-content: center;
}
}
//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
$story-width: $cols3;
.stories {
width: $cols6;
}
.story {
width: $story-width;
}
#teacher-icon {
display: none;
}
.flex-row {
&.sidebar-row {
.body-copy {
width: 100%;
}
.sidebar {
margin: 0 auto;
}
}
}
.in-practice {
text-align: center;
}
.flex-row {
align-items: center;
}
.story {
margin-left: 50px;
}
.general-usage {
align-items: center;
}
.guides-and-tutorials {
align-items: center;
}
.account-flex {
justify-content: center;
}
}
//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
$story-width: $cols4;
.stories {
width: $cols8;
}
.story {
width: $story-width;
}
.masthead {
h1 {
text-align: center;
}
.subnav {
justify-content: center;
}
}
.masthead-info {
p {
width: $cols4;
}
iframe {
width: $cols4;
box-sizing: border-box;
}
}
#view {
text-align: left;
}
.flex-row {
&.sidebar-row {
.body-copy {
width: 100%;
}
.sidebar {
margin: 0 auto;
}
}
}
#in-practice {
h2 {
text-align: center;
}
.intro {
margin-bottom: 1rem;
text-align: center;
}
.general-usage {
margin-bottom: 2rem;
p {
margin: .25em 0;
max-width: $cols8;
text-align: center;
}
}
}
.educators {
#resources {
margin: 0 auto;
width: $cols6;
h2 {
margin: 0 auto;
text-align: left;
}
.educator-community {
justify-content: center;
}
#guides-header {
margin: auto;
width: $cols6;
text-align: left;
}
.guides-and-tutorials {
div {
display: flex;
max-width: $cols8;
text-align: left;
justify-content: space-between;
}
p {
width: $cols4;
}
img {
margin: 0;
width: $cols2;
}
}
}
}
section {
p {
width: 100%;
}
}
.guides-and-tutorials {
margin-bottom: 2rem;
justify-content: space-around;
align-items: flex-start;
}
#teacher-accounts {
.inner {
justify-content: space-between;
}
}
#left {
width: $cols4;
}
}
// 12 columns
@media only screen and (min-width: $desktop) {
$story-width: $cols3;
.stories {
width: $cols12;
}
.story {
width: $story-width;
}
.masthead {
h1 {
text-align: left;
}
.sub-nav {
justify-content: flex-start;
}
}
.general-usage {
align-items: flex-start;
}
.guides-and-tutorials {
align-items: flex-start;
justify-content: space-between;
}
.account-flex {
justify-content: space-between;
}
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140" height="116" viewBox="0 0 140 116"><title>creative-computing</title><g opacity="0.1"><rect x="52.5" y="36.5" width="44" height="52" rx="2.12" ry="2.12" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g><rect x="51.5" y="35.5" width="44" height="52" rx="2.12" ry="2.12" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><g opacity="0.1"><rect x="48.5" y="32.5" width="44" height="52" rx="2.12" ry="2.12" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g><rect x="47.5" y="31.5" width="44" height="52" rx="2.12" ry="2.12" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><g opacity="0.1"><rect x="44.5" y="28.5" width="44" height="52" rx="2.12" ry="2.12" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g><rect x="43.5" y="27.5" width="44" height="52" rx="2.12" ry="2.12" fill="#fff"/><polygon points="79.5 59.5 43.5 59.5 43.5 51.5 79.5 51.5 75.5 55.5 79.5 59.5" fill="#f7941e" stroke="#ce781b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="43.5" y="27.5" width="44" height="52" rx="2.12" ry="2.12" fill="none" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="63.5" y1="67.5" x2="79.5" y2="67.5" fill="none" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="63.5" y1="71.5" x2="67.5" y2="71.5" fill="none" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="71.5" y1="71.5" x2="79.5" y2="71.5" fill="none" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="116" viewBox="0 0 140 116"><title>offline-editor</title><g style="isolation:isolate"><g id="Layer_1" data-name="Layer 1"><path d="M89.64,40.64V68a4,4,0,0,1-4,4H55.31a4,4,0,0,1-4-4V30a4,4,0,0,1,4-4H75Z" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" opacity="0.1"/><path d="M89.64,38.64V66a4,4,0,0,1-4,4H55.31a4,4,0,0,1-4-4V28a4,4,0,0,1,4-4H75Z" fill="#fff"/><path d="M74.94,35.9V25.36L89.58,40H79A4.1,4.1,0,0,1,74.94,35.9Z" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" opacity="0.1"/><path d="M74.94,34.61V24.06L89.58,38.7H79A4.1,4.1,0,0,1,74.94,34.61Z" fill="#fff" stroke="#88898c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="70.37" y1="70" x2="70.37" y2="52" fill="none" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="67.33" y1="65.76" x2="73.62" y2="65.76" fill="none" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M89.64,38.64V66a4,4,0,0,1-4,4H55.31a4,4,0,0,1-4-4V28a4,4,0,0,1,4-4H75Z" fill="none" stroke="#88898c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="67.33" y1="62.23" x2="73.62" y2="62.23" fill="none" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="67.33" y1="58.71" x2="73.62" y2="58.71" fill="none" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="67.33" y1="55.18" x2="73.62" y2="55.18" fill="none" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M66,37.49a4.19,4.19,0,0,1-1.52,3.22,4.6,4.6,0,0,1-3,1.12,4.74,4.74,0,0,1-.57,0L60.79,42a2.36,2.36,0,0,1-1.64.8H59a2.4,2.4,0,0,1-2.38-2.21s0,0,0-.08v0c0-.88,0-1.61,0-2.06s0-1.42,0-1.61a2.39,2.39,0,0,1,.62-1.57,5.81,5.81,0,0,1-.13-2.34V32.71a5.82,5.82,0,0,1,.57-2.09,3.33,3.33,0,0,1,3-1.8H61l0.42,0a2.37,2.37,0,0,1,1.63-.62,2.4,2.4,0,0,1,2.35,2.39s-0.11,3.48-.17,3.78a2.43,2.43,0,0,1-.16.53A3.82,3.82,0,0,1,66,37.49Z" fill="#f9a83a"/><path d="M60.83,35c-0.62-.1-0.94-0.51-0.78-1.78l0-.15c0.14-1.11.25-1.35,0.79-1.32a1,1,0,0,1,.51.26,3,3,0,0,1,.74.94,2.65,2.65,0,0,1,.22.85l0,0.31h0a0.54,0.54,0,0,0,1.06,0s0.14-3.39.14-3.44A0.54,0.54,0,0,0,63,30.11a0.54,0.54,0,0,0-.54.53s0,0.47,0,.94a2.47,2.47,0,0,0-1.57-.91c-1.62-.09-1.8,1.4-1.91,2.26l0,0.15c-0.22,1.7.35,2.77,1.68,3s2.41,0.56,2.42,1.45a1.3,1.3,0,0,1-.49,1,1.72,1.72,0,0,1-1.38.39,2.57,2.57,0,0,1-.42-0.11A3.09,3.09,0,0,1,59.88,38a2.15,2.15,0,0,1-.3-1c0-.13,0-0.21,0-0.22a0.54,0.54,0,1,0-1.08,0s0,1.06-.05,1.69a19,19,0,0,0,0,1.92,0.54,0.54,0,0,0,.57.5,0.53,0.53,0,0,0,.5-0.57s0-.42,0-1a4.14,4.14,0,0,0,1.53.6,2.75,2.75,0,0,0,2.25-.64,2.36,2.36,0,0,0,.87-1.8c0-2-2.26-2.33-3.33-2.5" fill="#fff"/><rect x="36.74" y="85.13" width="66.52" height="6.87" rx="3.43" ry="3.43" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.4" opacity="0.1" style="mix-blend-mode:multiply"/><rect x="36.74" y="85.13" width="66.52" height="6.87" rx="3.43" ry="3.43" fill="#b6ecff"/><polygon points="62.61 92 59.02 92 61.13 85.13 64.72 85.13 62.61 92" fill="#2398c1" opacity="0.3"/><polygon points="69.75 92 66.16 92 68.27 85.13 71.86 85.13 69.75 92" fill="#2398c1" opacity="0.3"/><polygon points="76.89 92 73.3 92 75.41 85.13 79 85.13 76.89 92" fill="#2398c1" opacity="0.3"/><polygon points="84.03 92 80.44 92 82.55 85.13 86.14 85.13 84.03 92" fill="#2398c1" opacity="0.3"/><polygon points="91.17 92 87.58 92 89.69 85.13 93.28 85.13 91.17 92" fill="#2398c1" opacity="0.3"/><polygon points="98.32 92 94.72 92 96.83 85.13 100.42 85.13 98.32 92" fill="#2398c1" opacity="0.3"/><rect x="36.74" y="85.13" width="24.28" height="6.87" rx="3.43" ry="3.43" fill="#2398c1" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="36.74" y="85.13" width="66.52" height="6.87" rx="3.43" ry="3.43" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M99,67.55l-9.6,9.6a2.35,2.35,0,0,1-3.32,0l-9.6-9.6a0.94,0.94,0,0,1,.67-1.61h2V55.56a1.63,1.63,0,0,1,1.63-1.63H94.72a1.63,1.63,0,0,1,1.63,1.63V65.95h2A0.94,0.94,0,0,1,99,67.55Z" fill="#f7941e"/><path d="M96.33,55.54v1.32a1.61,1.61,0,0,0-1.61-1.61H80.82a1.61,1.61,0,0,0-1.61,1.61V55.54a1.61,1.61,0,0,1,1.61-1.61h13.9A1.61,1.61,0,0,1,96.33,55.54Z" fill="#fff" opacity="0.2"/><path d="M99,67.55l-9.6,9.6a2.35,2.35,0,0,1-3.32,0l-9.6-9.6a0.94,0.94,0,0,1,.67-1.61h2V55.56a1.63,1.63,0,0,1,1.63-1.63H94.72a1.63,1.63,0,0,1,1.63,1.63V65.95h2A0.94,0.94,0,0,1,99,67.55Z" fill="none" stroke="#ce781b" stroke-miterlimit="10" stroke-width="1.4"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="116" viewBox="0 0 140 116"><title>resources</title><g style="isolation:isolate"><g id="Layer_1" data-name="Layer 1"><g opacity="0.4" style="mix-blend-mode:multiply"><path d="M97,44.18L91.25,62.24V81.16a2.45,2.45,0,0,1-2.44,2.45H84.43l-0.95,3a2.44,2.44,0,0,1-3.07,1.58L66.18,83.61h-15a2.45,2.45,0,0,1-2.44-2.45V78l-4.17-1.33A2.44,2.44,0,0,1,43,73.66l5.75-18v-19a2.44,2.44,0,0,1,2.44-2.44H73.85l17.4,5.55,4.17,1.33A2.45,2.45,0,0,1,97,44.18Z" fill="#bcbec0" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M91.25,36.66v3.11l-17.4-5.55h15A2.44,2.44,0,0,1,91.25,36.66Z" fill="#bcbec0" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g><rect x="48.74" y="32.47" width="42.52" height="49.4" rx="2.12" ry="2.12" transform="translate(20.68 -18.57) rotate(17.69)" fill="#caa9ff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="48.74" y="32.47" width="42.52" height="49.4" rx="2.12" ry="2.12" fill="#caa9ff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M54.57,45.78H85.43a0,0,0,0,1,0,0V71.35a3,3,0,0,1-3,3H57.57a3,3,0,0,1-3-3V45.78A0,0,0,0,1,54.57,45.78Z" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M57.34,40H82.66a2.77,2.77,0,0,1,2.77,2.77v3a0,0,0,0,1,0,0H54.57a0,0,0,0,1,0,0v-3A2.77,2.77,0,0,1,57.34,40Z" fill="#824dcb" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><polygon points="74.76 61.95 70 66.7 65.24 61.95 67.36 61.95 67.36 57.45 72.64 57.45 72.64 61.95 74.76 61.95" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="67.93" y1="54.53" x2="72.07" y2="54.53" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="68.88" y1="51.81" x2="71.12" y2="51.81" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="116" viewBox="0 0 140 116"><title>tips-window2</title><g style="isolation:isolate"><g id="Layer_1" data-name="Layer 1"><path d="M19.87,38.13H120.13a0,0,0,0,1,0,0V90.24a4,4,0,0,1-4,4H23.88a4,4,0,0,1-4-4V38.13A0,0,0,0,1,19.87,38.13Z" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" opacity="0.1" style="mix-blend-mode:multiply"/><path d="M19.87,35.82H120.13a0,0,0,0,1,0,0V87.93a4,4,0,0,1-4,4H23.88a4,4,0,0,1-4-4V35.82A0,0,0,0,1,19.87,35.82Z" fill="#e6e7e8"/><path d="M23.88,21.75h92.23a4,4,0,0,1,4,4v10.3a0,0,0,0,1,0,0H19.87a0,0,0,0,1,0,0V25.76A4,4,0,0,1,23.88,21.75Z" fill="#b6ecff" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="53.51" y="26.24" width="62.08" height="5.33" rx="2.62" ry="2.62" fill="#fff" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><circle cx="24.87" cy="28.91" r="1.06" fill="#2398c1"/><circle cx="28.44" cy="28.91" r="1.06" fill="#2398c1"/><circle cx="32" cy="28.91" r="1.06" fill="#2398c1"/><line x1="41.54" y1="28.91" x2="38.21" y2="28.91" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><polyline points="39.74 30.44 38.21 28.91 39.74 27.38" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="45.29" y1="28.91" x2="48.62" y2="28.91" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><polyline points="47.09 27.38 48.62 28.91 47.09 30.44" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="19.87" y="35.99" width="100.25" height="2.53" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" opacity="0.05"/><path d="M25.94,47.45H60.36a0,0,0,0,1,0,0V65.22a3.42,3.42,0,0,1-3.42,3.42H29.35a3.42,3.42,0,0,1-3.42-3.42V47.45A0,0,0,0,1,25.94,47.45Z" fill="#fff" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M25.94,73.23H60.36a0,0,0,0,1,0,0V88.52a3.42,3.42,0,0,1-3.42,3.42H29.35a3.42,3.42,0,0,1-3.42-3.42V73.23a0,0,0,0,1,0,0Z" transform="translate(86.29 165.16) rotate(180)" fill="#fff" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M66.52,87.84h46.86a0,0,0,0,1,0,0v2.27a1.83,1.83,0,0,1-1.83,1.83H68.35a1.83,1.83,0,0,1-1.83-1.83V87.84a0,0,0,0,1,0,0Z" transform="translate(179.91 179.78) rotate(180)" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M29.35,42.4H56.94a3.42,3.42,0,0,1,3.42,3.42v1.62a0,0,0,0,1,0,0H25.94a0,0,0,0,1,0,0V45.82A3.42,3.42,0,0,1,29.35,42.4Z" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M84.48,47.44V84.35h-18V44.41a2,2,0,0,1,2-2h2a2,2,0,0,1,2,2v3h12Z" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M74.52,42.4h2a2,2,0,0,1,2,2v3a0,0,0,0,1,0,0h-6a0,0,0,0,1,0,0v-3A2,2,0,0,1,74.52,42.4Z" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M80.51,42.4h2a2,2,0,0,1,2,2v3a0,0,0,0,1,0,0h-6a0,0,0,0,1,0,0v-3A2,2,0,0,1,80.51,42.4Z" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="84.48" y="47.44" width="28.9" height="36.91" fill="#d1d3d4" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M91.67,55.9h36.91a0,0,0,0,1,0,0V72a3.94,3.94,0,0,1-3.94,3.94h-29A3.94,3.94,0,0,1,91.67,72V55.9A0,0,0,0,1,91.67,55.9Z" transform="translate(176.02 -44.23) rotate(90)" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="69.55" y1="51.28" x2="73.5" y2="51.28" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="77.5" y1="51.28" x2="81.45" y2="51.28" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="69.55" y1="54.01" x2="73.5" y2="54.01" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="77.5" y1="54.01" x2="81.45" y2="54.01" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="69.55" y1="56.73" x2="73.5" y2="56.73" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="77.5" y1="56.73" x2="81.45" y2="56.73" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="69.55" y1="59.46" x2="73.5" y2="59.46" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="77.5" y1="59.46" x2="81.45" y2="59.46" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="69.55" y1="62.18" x2="73.5" y2="62.18" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="77.5" y1="62.18" x2="81.45" y2="62.18" fill="none" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="100.13" y1="52.39" x2="120.13" y2="52.39" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><circle cx="110.26" cy="66.08" r="7.14" fill="#824dcb" stroke="#caa9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M108.14,64.13a2.19,2.19,0,0,1,.46-0.73,2.06,2.06,0,0,1,.71-0.48,2.41,2.41,0,0,1,.93-0.17,2.94,2.94,0,0,1,1.11.18,2.16,2.16,0,0,1,.71.45,1.65,1.65,0,0,1,.39.58,1.69,1.69,0,0,1,.12.58,2,2,0,0,1-.12.74,1.83,1.83,0,0,1-.29.5,2,2,0,0,1-.38.35l-0.4.29a1.84,1.84,0,0,0-.33.33,1,1,0,0,0-.18.47v0.36H109.6V67.16A1.83,1.83,0,0,1,110,66a2.35,2.35,0,0,1,.36-0.33l0.35-.28a1.27,1.27,0,0,0,.26-0.31,0.77,0.77,0,0,0,.09-0.42,0.86,0.86,0,0,0-.21-0.64,0.8,0.8,0,0,0-.58-0.21,0.9,0.9,0,0,0-.43.1,0.86,0.86,0,0,0-.3.26,1.16,1.16,0,0,0-.17.38,1.92,1.92,0,0,0-.06.47H108A2.7,2.7,0,0,1,108.14,64.13Zm2.8,4v1.44h-1.47V68.14h1.47Z" fill="#fff"/><path d="M19.87,35.82H120.13a0,0,0,0,1,0,0V87.93a4,4,0,0,1-4,4H23.88a4,4,0,0,1-4-4V35.82A0,0,0,0,1,19.87,35.82Z" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33"/></g></g></svg>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment