From 3e1d39c163ed32d1eb7beb3b7c451684c0094fb9 Mon Sep 17 00:00:00 2001 From: Chenzc Date: Mon, 14 May 2018 18:23:31 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 15 + public/css/better.css | 1238 +++++++++++++++++ .../00-getting-started/getting-started.json | 20 +- server/views/challenges/showHTML.jade | 125 +- 4 files changed, 1338 insertions(+), 60 deletions(-) create mode 100644 public/css/better.css diff --git a/README.md b/README.md index 5d43db948..e37bd0156 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,18 @@ +# Fork 说明 + +Better freecodecamp 打造更好的FCC + +- ~~样式优化~~ +- 解决有些demo 不可用的问题 +- 解决有些题目失效无法解答的问题 +- 解决有些工具无法使用的问题 +- 增加学做教功能，项目必须由已经完成项目的学员审批后方可算完成 +- 增加完善项目功能，学员可自行修复bug，并提交总库 +- 增加排名功能 +- 增加组队功能 + + + ![](https://s3.amazonaws.com/freecodecamp/wide-social-banner.png) diff --git a/public/css/better.css b/public/css/better.css new file mode 100644 index 000000000..6169a3bc7 --- /dev/null +++ b/public/css/better.css @@ -0,0 +1,1238 @@ +body.full-screen-body-background { + background: #5cbcfc; +} +html { + height: 100%; +} + +body { + margin: 0px; + border: 0px; + padding: 0px; + overflow: hidden; +} + +p { + word-wrap: break-word; +} + +.fwber { + font-weight: bolder; + font-size: 1.125em; +} + +.githubLink { + z-index: 2; + position: fixed; + top: 0; + right: 0; +} + +@media (max-width: 700px) { + .githubLink { + display: none !important; + } +} + +div.modalTerminal a { + color: rgb(253, 152, 209); + font-weight: bold; +} + + +div.modalTerminal li, +div.modalTerminal p { + line-height: 24px; + margin: 1.5em 0; +} + +.textAlignCenter { + text-align: center; +} + +/* Box Model */ +html, +body, +.box { + display: flex; + display: -moz-box; + display: -webkit-box; + display: -ms-flexbox; +} + +body, +.flex1 { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -ms-flex: 1.0 1.0 auto; + flex: 1 1 auto; +} + +.flex2 { + -webkit-box-flex: 2; + -moz-box-flex: 2; + -ms-flex: 2.0 2.0 auto; + flex: 2 2 auto; +} + +.flex3 { + -webkit-box-flex: 3; + -moz-box-flex: 3; + -ms-flex: 3.0 3.0 auto; + flex: 3 3 auto; +} + +.flex10 { + -webkit-box-flex: 10; + -moz-box-flex: 10; + -ms-flex: 10.0 10.0 auto; + flex: 10 10 auto; +} + +html, +body, +.vertical { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-flex-direction: column; + flex-direction: column; +} + +.horizontal { + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -ms-flex-direction: row; + flex-direction: row; +} + +.centerAlign { + -webkit-box-align: center; + -moz-box-align: center; + -ms-flex-align: center; + justify-content : center; +} + +.startAlign { + -webkit-box-align: start; + -moz-box-align: start; + -ms-flex-align: start; + justify-content: flex-start; +} + +.center { + -webkit-box-pack: center; + -moz-box-pack: center; + -ms-flex-pack: center; + align-content: center; +} + +.justify { + -webkit-box-pack: justify; + -moz-box-pack: justify; + -ms-flex-pack: justify; + align-content: stretch; +} + +/* Transition */ +.transitionBackground { + -webkit-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +.transitionTransform { + -webkit-transition: -webkit-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: -moz-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: -ms-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: -o-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +.transitionOpacity { + -webkit-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +.transitionOpacityLinear { + -webkit-transition: opacity 700ms linear; + -moz-transition: opacity 700ms linear; + -ms-transition: opacity 700ms linear; + -o-transition: opacity 700ms linear; + transition: opacity 700ms linear; +} + + +.transitionOpacitySlow { + -webkit-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +.visBackgroundColor, +.transitionAll { + -webkit-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +.transitionAllSlow { + -webkit-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +/* mode stuff */ +#mainVisSpace { + position: relative; +} + +#mainVisSpace .modeText { + position: absolute; + bottom: 0; + opacity: 0.0; + font-size: 60pt; + color: black; +} + +body.gitMode #mainVisSpace .modeText.gitMode, +body.hgMode #mainVisSpace .modeText.hgMode { + opacity: 0.5; +} + +/* Some interface things */ + +div.canvasTerminalHolder { + /* height: 0; + position: fixed; + top: 0; + left: 0;*/ + z-index: 3; + margin-top:10px; +} + +#canvasHolder { + position: absolute; + top: 0; + left: 0; + width: 100%; +} + +div.gitDemonstrationView > div.visHolder, +.visBackgroundColor { + background: #5cbcfc; + background-color: #5cbcfc; +} + +body.hgMode div.gitDemonstrationView > div.visHolder, +body.hgMode .visBackgroundColor { + background: #5CFCD6; + background-color: #5CFCD6; +} + +#interfaceWrapper { + min-width: 600px; + min-height: 600px; +} + +div.canvasTerminalHolder > div.terminal-window-holder > div.wrapper { + height: 100%; + box-shadow: 0 0 12px rgb(0,0,0); + cursor: pointer; + border-radius: 5px; +} + +div.canvasTerminalHolder > div.terminal-window-holder div.terminal-text { + padding: 5px 10px; +} + +div.canvasTerminalHolder > div.terminal-window-holder div.toolbar, +div.canvasTerminalHolder > div.terminal-window-holder div.terminal-text, +div.canvasTerminalHolder > div.terminal-window-holder div.inside { + border: 0px; +} + +div.canvasTerminalHolder > div.terminal-window-holder div.terminal-text, +div.canvasTerminalHolder > div.terminal-window-holder div.inside { + background: #272822; + border-radius: 0 0 5px 5px; +} + +div.canvasTerminalHolder.startTree > div.terminal-window-holder div.terminal-text, +div.canvasTerminalHolder.startTree > div.terminal-window-holder div.inside { + background: #4CA2FF; +} + +div.canvasTerminalHolder > div.terminal-window-holder div.inside { + min-height: 200px; + border-radius: 0 0 5px 5px; +} + +#controls { +} + +div.canvasTerminalHolder > div.terminal-window-holder { + overflow: visible !important; +} + +/* Toolbar */ +div.toolbar { + /* borrowed from try.github.com along with a bunch of other things */ + background-image: -webkit-linear-gradient(top, #EFEDEE, #C1C1C1); + background-image: -moz-linear-gradient(top, #EFEDEE, #C1C1C1); + background-image: -o-linear-gradient(top, #EFEDEE, #C1C1C1); + background-image: -ms-linear-gradient(top, #EFEDEE, #C1C1C1); + background-image: linear-gradient(top, #EFEDEE, #C1C1C1); + + border-radius: 5px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border: 1px solid #6287A4; + border-bottom: 0; + height: 30px; + position: relative; + text-align: center; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875em; + color: #333; +} + +div.toolbar.level-toolbar { + background-image: -webkit-linear-gradient(top, #B2FF2E, #8AD247); + background-image: -moz-linear-gradient(top, #B2FF2E, #8AD247); + background-image: -o-linear-gradient(top, #B2FF2E, #8AD247); + background-image: -ms-linear-gradient(top, #B2FF2E, #8AD247); + background-image: linear-gradient(top, #B2FF2E, #8AD247); + border-radius: 0; + height: inherit; + font-size: 0.75em; + position: relative; +} + +div.toolbar.level-toolbar button { + font-size: 0.75em; + border: 1px solid #888; + border-radius: 4px; + padding: 4px 8px; + background-image: -webkit-linear-gradient(top, #EFEDEE, #C1C1C1); +} + +div.toolbar div.clearfix { + zoom: 1; + margin: 10px 0; +} + +div.toolbar div.clearfix:after { + clear: both; + content: "."; + display: block; + font-size: 0; + height: 0; + line-height: 0; + visibility: hidden; +} + +div.toolbar div.showGoalWrapper { + float: left; + margin-left: 6px; +} + +div.toolbar div.showObjectiveWrapper { + float: right; + margin-right: 6px; +} + +div.toolbar div.buttonsWrapper { + position: absolute; + width: 100%; + top: 10px; +} + +div.toolbar div.levelNameWrapper { + text-align: center; + position: relative; + top: 5px; + margin: 0 100px; + padding-bottom: 10px; +} + +span.levelToolbarSpan { + font-weight: 800; + font-style: italic; +} + +div.toolbar.level-toolbar.hidden { + opacity: 0; + height: 0px; +} + +div.toolbar > div.controls { + position: absolute; + top: 9px; + left: 9px; + width: 57px; + height: 13px; +} + +div.toolbar > div.controls div i { + text-shadow: 0.1em 0.1em rgba(255, 255, 255, 0.5); +} + +div.toolbar > div.controls div.box.flex1 { + text-align: center; +} + +div.toolbar > div.controls div.box.flex1 div { + border-radius: 100%; + display: inline-block; + width: 12px; + height: 12px; + margin: 1px 0 0 1px; + position: relative; + text-indent: -9999px; + cursor: default; + + -webkit-box-shadow: 0 2px 0 rgba(255, 255, 255, .8), inset 0 0 3px 1px rgba(0, 0, 0, .6), 0 -1px 1px 1px rgba(0, 0, 0, .4); + box-shadow: 0 2px 0 rgba(255, 255, 255, .8), inset 0 0 3px 1px rgba(0, 0, 0, .6), 0 -1px 1px 1px rgba(0, 0, 0, .4); + + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #fff 95%, #fff 100%); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #fff 95%, #fff 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #fff 95%, #fff 100%); + background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #fff 95%, #fff 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #fff 95%, #fff 100%); +} + +div.toolbar > div.controls div.box.flex1 div:hover { + +} + +div.controls div.box.flex1 div.close { + background-color: #fb625f; +} + +div.controls div.box.flex1 div.minimize { + background-color: #f9c57a; +} + +div.controls div.box.flex1 div.plus { + background-color: #8ac872; +} + +/* Command Line */ +div.reactCommandView p.commandLine i { + margin: 0 5px; +} + +p.commandLine, +div.commandLineResult { + opacity: 1; + font-size: 1em; + margin: 0px; +} + +div.commandLineWarnings p, +div.commandLineResult p { + margin: 0px; +} + +div.commandLineResult p:first-child, +div.commandLineWarnings p:first-child { + padding-top: 8px; +} + +div.commandLineResult p:last-child, +div.commandLineWarnings p:last-child { + padding-bottom: 8px; +} + +div.commandLineWarnings p i.icon-exclamation-sign { + color: yellow; + margin-right: 5px; +} + +p.commandLine span.icons { + float: right; +} + +p.commandLine span.icons i:last-child { + margin-right: 5px; +} + +p.commandLine span.icons i:first-child { + margin-left: 5px; +} + +div.reactCommandView p.commandLine span.icons i:first-child { + margin-left: 4px; + position: relative; + left: 1px; +} + +p.commandLine span.icons i { + opacity: 0; +} + +p.commandLine.inqueue span.icons i.icon-check-empty, +p.commandLine.error span.icons i.icon-exclamation-sign, +p.commandLine.warning span.icons i.icon-exclamation-sign, +p.commandLine.processing span.icons i.icon-retweet, +p.commandLine.finished span.icons i.icon-check { + opacity: 1; +} + +p.commandLine.warning span.icons { + background: #E0FF00; + background-color: #E0FF00; + color: #333; +} + +p.commandLine.inqueue span.icons { + background: #EBEB24; + background-color: #EBEB24; + color: #333; +} + +p.commandLine.processing span.icons { + background: #88E748; + background-color: #88E748; + color: #333; +} + +p.commandLine.finished span.icons { + background: #0066cc; + background-color: #0066cc; + color: white; +} + +p.commandLine.error span.icons { + background: red; + background-color: red; +} + +p.commandResult { + color: blue; +} + +p.commandError, p.errorResult { + color: red; +} + +#commandLineBar #prompt span.promptSign, +p.commandLine span.prompt { + color: greenyellow; + font-weight: bold; +} + +#commandLineBar p.command { + margin: 0; + margin-left: 12px; +} + +#commandLineBar #commandTextField { + position: absolute; + top: -1000px; + left: -1000px; +} + +#commandLineHistory { + height: 100%; + margin: 10px; + border-radius: 5px; + box-shadow: 1px 0px 15px rgba(100, 100, 100, 1); +} + +#commandLineHistory #terminal.scrolling { + overflow-y: scroll; + overflow-x: hidden; +} + +#prompt { + text-align: left; + position: relative; + min-height: 22px; +} + +#prompt span { + padding: 0px; + margin: 0px; + border: 0px; +} + +#prompt span.promptSign { + position: absolute; + bottom: 0px; +} + +#prompt span.commandCursor { + background: #424242; +} + +#prompt p.command.showCursor span.commandCursor { + background: #AEAEAE; +} + +#prompt span.cursor.shown { + opacity: 0.7; +} + +#commandLineBar, +.terminal-window .inside, +li.rebaseEntry, +#terminal { + background: white; +} + +#terminal, +.terminal-window .inside, +#commandLineBar { + border: 1px solid #303030; +} + +#terminal { + border-bottom: 0; + padding: 0 5px; +} + +.helperBar { + position: absolute; + bottom: 0px; + right: 0px; + background: #424242; + padding: 4px 10px; + border-radius: 5px 0 0 0; + border: 2px solid #EFEDEE; + border-bottom: 0; + border-right: 0; + box-shadow: -1px -1px 5px rgba(0,0,0,0.3); + font-weight: bold; + max-width: 500px; + clear: both; +} + +.helperBar i { + cursor: pointer; +} + +.helperBar a { + cursor: pointer; + color: white; + text-decoration: none; + font-style: italic; +} + +.helperBar a.exit { + float: right +} + +.helperBar a:after { + content: ' \b7'; + font-style: normal; +} + +.helperBar a:last-child { + padding-right: 10px; +} + +.helperBar a:nth-last-child(2):after, +.helperBar a:last-child:after { + content: ''; +} + +.helperBar.BaseHelperBar a:nth-last-child(2):after { + content: ' \b7'; +} + +div.helperBar { + -webkit-transform: translate3d(150%,0,0); + -moz-transform: translate3d(150%,0,0); + -o-transform: translate3d(150%,0,0); + -ms-transform: translate3d(150%,0,0); + transform: translate3d(150%,0,0); +} + +div.helperBar.show { + -webkit-transform: translate3d(0,0,0); + -moz-transform: translate3d(0,0,0); + -o-transform: translate3d(0,0,0); + -ms-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + height: 85px; +} + +div.helperBar.show.BaseHelperBar { + height: auto; +} + +#commandLineBar, +.terminal-window .inside { + border-top: 0; + border-radius: 0 0 5px 5px; + padding: 3px; +} + +/* interactive rebase CSS */ +.iRebaseDialog.wrapper { + padding: 20px; +} + +#dialogHolder.shown .iRebaseDialog.wrapper { + margin-top: 30%; +} + +p.helperText, +div.terminal-text p.helperText, +.iRebaseDialog p.helperText { + font-size: 0.625em; +} + +.iRebaseDialog p.solutionText { + color: lime; + font-weight: bold; + margin: 0; +} + +.iRebaseDialog p.helperText { + color: #999; + margin: 0; + padding: 0; +} + +.iRebaseDialog div.entryHolders { + width: 300px; + margin-left: auto; + margin-right: auto; +} + +.iRebaseDialog div.entryHolders ul.rebaseEntries { + list-style-type: none; + -webkit-padding-start: 0; + -moz-padding-start: 0; + /* optimism, lol */ + -o-padding-start: 0; + -ms-padding-start: 0; +} + +li.rebaseEntry { + margin: 10px; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); + cursor: move; + padding: 10px 5px; + border: 1px solid rgba(0, 0, 0, 0.3); +} + +li.rebaseEntry.ui-state-highlight { + padding: 21px; + border: 1px dashed rgba(0, 0, 0, 0.5); +} + +/* wtf jquery UI sortable is barfing here on calculating the position... */ +li.rebaseEntry.ui-sortable-helper { + height: auto !important; + width: auto !important; + position: relative !important; + top: 0px !important; + left: -20px; + display: none; +} + +li.rebaseEntry a#toggleButton { + cursor: pointer; + float: right; + position: relative; + font-size: 0.875em; + top: -5px; + right: -5px; +} + +li.rebaseEntry.notPicked { + opacity: 0.2; +} +/* Modal Views */ + +div.modalView.box.inFront.show { + overflow-y: auto; +} + +.modalView { + width: 100%; + height: 100%; + position: fixed; + top: 0px; + left: 0px; + + background: rgba(0, 0, 0, 0.6); + z-index: -1; + opacity: 0; +} + +.modalView.inFront { + z-index: 100; +} + +.terminal-window-holder { + z-index: 3; +} + +.terminal-window .inside { + padding: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); +} + +.terminal-window .inside h2 { + text-align: center; +} + +.modalView.show { + opacity: 1; +} + +.modalView .terminal-window-holder { + border-radius: 5px; + max-width: 900px; +} + +.modalView .terminal-window { + margin-top: 5%; + margin-bottom: 5%; + -webkit-transform: translate3d(0, -100%, 0); + -moz-transform: translate3d(0, -100%, 0); + -o-transform: translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); +} + +.modalView.show .terminal-window { + -webkit-transform: translate3d(0,0,0); + -moz-transform: translate3d(0,0,0); + -o-transform: translate3d(0,0,0); + -ms-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); +} + +/* Level dropdown view */ +.levelDropdownView { +} + +div.levelDropdownTabWrapper { + margin-left: -10px; + margin-right: -10px; + border-bottom: 2px solid #ccc; + margin-bottom: 10px; +} + +div.levelDropdownTab { + border: 1px solid #ccc; + border-bottom: 0; + cursor: pointer; + box-shadow: 0px -4px 12px rgba(0,0,0,0.7); + border-radius: 4px 4px 0 0; + text-align: center; + padding: 4px 10px; + color: black; + background: #ccc; + margin: 0 10px; +} + +div.levelDropdownTab.deselected { + opacity: 0.3; +} + +div.displayName { + border-bottom: 1px dashed grey; + text-align: center; +} + +div.displayName h3 { + margin: 4px; +} + +div.iconHolder { +} + +div.seriesView p.levelInfo, +div.seriesView p.about { + margin: 0px; + padding: 4px; + font-size: 0.75em; + color: #CCC; +} + +div.seriesView p.levelInfo { + font-style: italic; +} + +div.levelIcon { + height: 40px; + width: 40px; + border-radius: 5px; + margin: 10px 20px; + box-shadow: 2px 2px 10px rgba(0,0,0,0.7); + background-image: -webkit-linear-gradient(top, white, #AAB1AA); + background-image: -moz-linear-gradient(top, white, #AAB1AA); + background-image: -o-linear-gradient(top, white, #AAB1AA); + background-image: -ms-linear-gradient(top, white, #AAB1AA); + background-image: linear-gradient(top, white, #AAB1AA); + cursor: pointer; +} + +div.levelIcon:hover { + background-image: -webkit-linear-gradient(top, #DADADA, #888686); + background-image: -moz-linear-gradient(top, #DADADA, #888686); + background-image: -o-linear-gradient(top, #DADADA, #888686); + background-image: -ms-linear-gradient(top, #DADADA, #888686); + background-image: linear-gradient(top, #DADADA, #888686); +} + +div.levelIcon:active { + background-image: -webkit-linear-gradient(top, #888686, #7A7A7A); + background-image: -moz-linear-gradient(top, #888686, #7A7A7A); + background-image: -o-linear-gradient(top, #888686, #7A7A7A); + background-image: -ms-linear-gradient(top, #888686, #7A7A7A); + background-image: linear-gradient(top, #888686, #7A7A7A); +} + +div.levelIcon.selected { + box-shadow: 0 0 15px #25F6FF; +} + +div.levelIcon.solved { + background: -webkit-linear-gradient(top, #F3F86B, #35A30F); + background: -moz-linear-gradient(top, #F3F86B, #35A30F); + background: -o-linear-gradient(top, #F3F86B, #35A30F); + background: -ms-linear-gradient(top, #F3F86B, #35A30F); + background: linear-gradient(top, #F3F86B, #35A30F); + border-top: 1px solid #f4ffa1; +} + +div.levelIcon.solved:hover { + border-top-color: #30f03d; + background: #30f03d; +} + +div.levelIcon.solved:active { + border-top-color: #5edb15; + background: #5edb15; +} + +div.levelIcon div.index { + font-weight: 400; + text-shadow: 1px 1px 2px #CCC, 0 2px 0 #C9C9C9; + font-size: 1.125em; + color: #333; + -webkit-text-stroke: 1px #111; +} + +div.levelIcon div.index i { + display: none; +} + +div.levelIcon.solved div.index i { + display: block; + color: white; + -webkit-text-stroke: 0; + text-shadow: none; + font-size: 2em; +} + +div.levelIcon.solved div.index div.indexNum { + display: none; +} + +/* MultiView Builder */ +.multiViewBuilder div.view { + margin: 10px 0; +} + +.multiViewBuilder .uiButton { + margin: 0 10px; +} + +.multiViewBuilder .buttons { + margin: 20px 0; +} + +.multiViewBuilder div.controlsForView { + margin: 10px 0; + border-top: 1px dashed grey; + padding-top: 10px; +} + +/* DemonstrationBuilder */ + +.demonstrationBuilder { + max-height: 600px; + overflow-y: scroll; + box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7); + padding: 10px; + margin-bottom: 10px; +} + +.demonstrationBuilder div.buttons { + margin: 8px 0; +} + +.demonstrationBuilder .markdownGrabber{ + min-height: 100px; +} + +.markdownGrabberInput { + margin-top: 32px; +} + +.demonstrationBuilder .markdownGrabber textarea { + height: auto; +} + +.textGrabber textarea { + width: 70%; +} + +/* Git demonstration view, and markdownGrabber */ + +.markdownPresenter textarea { + min-height: 400px; + width: 90%; + margin: 10px; +} + +.markdownGrabber { + padding: 10px; +} + +.markdownGrabber textarea { + width: 90%; + height: 400px; +} + +.demonstrationBuilder .markdownGrabber textarea { + height: 100px; +} + +.markdownGrabberPreview div.insidePreview { + padding: 8px; +} + +.markdownGrabber > div.inputSide, +.gitDemonstrationView > div.demonstrationText { + width: 50%; +} + +div.gitDemonstrationView { + width:100%; +} + +.gitDemonstrationView > div.demonstrationText { + margin-right: 10px; + max-height: 400px; + max-width: 450px; + overflow-y: scroll; + overflow-x: hidden; +} + +.gitDemonstrationView > div.demonstrationText.noLongText { + overflow-y: hidden; +} + +.markdownGrabber div.markdownGrabberPreview, +.gitDemonstrationView > div.visHolder { + box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); + border-radius: 3px; + border: 1px solid #333; +} + +.gitDemonstrationView > div.demonstrationText div.command { + text-align: center; + padding: 10px; +} + +.markdownGrabber, +.gitDemonstrationView { + min-height: 400px; +} + +.gitDemonstrationView div.afterText { + opacity: 0; +} + +.gitDemonstrationView.demonstrated div.afterText { + opacity: 1; +} + +.gitDemonstrationView.demonstrating p.uiButton { + opacity: 0.7; +} + +.gitDemonstrationView.demonstrated p.uiButton { + opacity: 0.4; +} + +/* LeftRightView */ + +.leftRightView div i { + font-size: 2.75em; + cursor: pointer; +} + +.leftRightView div { + margin: 0 60px; +} + +.leftRightView div.exit { + -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); + -moz-transform: matrix(-1, 0, 0, 1, 0, 0); + -ms-transform: matrix(-1, 0, 0, 1, 0, 0); +} + +.leftRightView div.exit, +.leftRightView div.left { + color: rgb(253, 50, 50); + text-shadow: -1px 1px 3px rgba(0,0,0,0.7); +} + +.leftRightView div.right { + color: rgb(82, 255, 82); + text-shadow: 1px 1px 3px rgba(0,0,0,0.7); +} + +.leftRightView div.right:hover { + color: #74FC74; +} + +.leftRightView div.exit:hover, +.leftRightView div.left:hover { + color: #FF6969; +} + +/* button stuff from liquidGraph */ +.uiButton { + border-top: 1px solid #96d1f8; + background: #65a9d7; + background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); + background: -webkit-linear-gradient(top, #3e779d, #65a9d7); + background: -moz-linear-gradient(top, #3e779d, #65a9d7); + background: -ms-linear-gradient(top, #3e779d, #65a9d7); + background: -o-linear-gradient(top, #3e779d, #65a9d7); + padding: 5px 10px; + + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + -ms-border-radius: 8px; + border-radius: 8px; + + -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; + -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; + -ms-box-shadow: rgba(0,0,0,1) 0 1px 0; + box-shadow: rgba(0,0,0,1) 0 1px 0; + text-shadow: rgba(0,0,0,.4) 0 1px 0; + color: white; + + vertical-align: middle; + cursor: pointer; +} + +.uiButton:hover { + border-top-color: #28597a; + background: #28597a; + color: #ccc; +} +.uiButton:active { + border-top-color: #1b435e; + background: #1b435e; +} + +.uiButtonYellow { + border-top: 1px solid #f4ffa1; + background: #288708; + background: -webkit-gradient(linear, left top, left bottom, from(#e0e63c), to(#288708)); + background: -webkit-linear-gradient(top, #e0e63c, #288708); + background: -moz-linear-gradient(top, #e0e63c, #288708); + background: -ms-linear-gradient(top, #e0e63c, #288708); + background: -o-linear-gradient(top, #e0e63c, #288708); +} + +.uiButtonYellow:hover { + border-top-color: #30f03d; + background: #30f03d; + color: #333; +} +.uiButtonYellow:active { + border-top-color: #5edb15; + background: #5edb15; +} + +.uiButtonPink { + border-top: 1px solid #96d1f8; + background: #80007c; + background: -webkit-gradient(linear, left top, left bottom, from(#fa1ee0), to(#80007c)); + background: -webkit-linear-gradient(top, #fa1ee0, #80007c); + background: -moz-linear-gradient(top, #fa1ee0, #80007c); + background: -ms-linear-gradient(top, #fa1ee0, #80007c); + background: -o-linear-gradient(top, #fa1ee0, #80007c); +} +.uiButtonPink:hover { + border-top-color: #fa1ee0; + background: #fa1ee0; + color: #ccc; +} +.uiButtonPink:active { + border-top-color: #80007c; + background: #80007c; +} + +.uiButtonRed { + border-top: 1px solid #ffebee; + background: #cc1212; + background: -webkit-gradient(linear, left top, left bottom, from(#e08992), to(#cc1212)); + background: -webkit-linear-gradient(top, #e08992, #cc1212); + background: -moz-linear-gradient(top, #e08992, #cc1212); + background: -ms-linear-gradient(top, #e08992, #cc1212); + background: -o-linear-gradient(top, #e08992, #cc1212); +} + +.uiButtonRed:hover { + border-top-color: #cc102f; + background: #cc102f; + color: #ccc; +} + +.uiButtonRed:active { + border-top-color: #ff0000; + background: #ff0000; +} + +.uiButtonWhite { + border-top: 1px solid #96d1f8; + background: #449ad4; + background: -webkit-gradient(linear, left top, left bottom, from(#d1edff), to(#449ad4)); + background: -webkit-linear-gradient(top, #d1edff, #449ad4); + background: -moz-linear-gradient(top, #d1edff, #449ad4); + background: -ms-linear-gradient(top, #d1edff, #449ad4); + background: -o-linear-gradient(top, #d1edff, #449ad4); +} + +.uiButtonWhite:hover { + border-top-color: #bae3ff; + background: #bae3ff; + color: #5c5c5c; +} + +.uiButtonWhite:active { + border-top-color: #9bcbeb; + background: #9bcbeb; +} + +footer { + margin-top: 0; +} + +.marvel-device{display:inline-block;position:relative;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.marvel-device .screen{width:100%;position:relative;height:100%;z-index:3;background:white;overflow:hidden;display:block;border-radius:1px;-webkit-box-shadow:0 0 0 3px #111;box-shadow:0 0 0 3px #111}.marvel-device .top-bar,.marvel-device .bottom-bar{height:3px;background:black;width:100%;display:block}.marvel-device .middle-bar{width:3px;height:4px;top:0px;left:90px;background:black;position:absolute}.marvel-device.iphone8{width:375px;height:667px;padding:105px 24px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone8:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone8:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone8 .home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:22px;z-index:3;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%)}.marvel-device.iphone8 .home:before{background:#f8f8f8;position:absolute;content:'';border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone8 .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone8 .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone8 .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone8 .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone8 .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:24px;left:50%;margin-left:-6px;border-radius:100%;z-index:3}.marvel-device.iphone8 .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:49px;left:134px;z-index:3;border-radius:100%}.marvel-device.iphone8 .speaker{background:#292728;width:70px;height:6px;position:absolute;top:54px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}.marvel-device.iphone8.gold{background:#f9e7d3}.marvel-device.iphone8.gold .top-bar,.marvel-device.iphone8.gold .bottom-bar{background:white}.marvel-device.iphone8.gold .sleep,.marvel-device.iphone8.gold .volume{background:#f9e7d3}.marvel-device.iphone8.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone8.black:before{background:#080808}.marvel-device.iphone8.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone8.black .top-bar,.marvel-device.iphone8.black .bottom-bar{background:#212121}.marvel-device.iphone8.black .volume,.marvel-device.iphone8.black .sleep{background:#464646}.marvel-device.iphone8.black .camera{background:#080808}.marvel-device.iphone8.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8.black .home:before{background:#080808}.marvel-device.iphone8.landscape{padding:24px 105px;height:375px;width:667px}.marvel-device.iphone8.landscape .sleep{top:100%;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone8.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px - 14px);top:0}.marvel-device.iphone8.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone8.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:22px}.marvel-device.iphone8.landscape .sensor{top:134px;left:calc(100% - 49px - 16px)}.marvel-device.iphone8.landscape .speaker{height:70px;width:6px;left:calc(100% - 54px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone8.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone8plus{width:414px;height:736px;padding:112px 26px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone8plus:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone8plus:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone8plus .home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:24px;z-index:3;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%)}.marvel-device.iphone8plus .home:before{background:#f8f8f8;position:absolute;content:'';border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone8plus .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone8plus .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone8plus .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone8plus .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone8plus .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8plus .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8plus .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:29px;left:50%;margin-left:-6px;border-radius:100%;z-index:3}.marvel-device.iphone8plus .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:54px;left:154px;z-index:3;border-radius:100%}.marvel-device.iphone8plus .speaker{background:#292728;width:70px;height:6px;position:absolute;top:59px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}.marvel-device.iphone8plus.gold{background:#f9e7d3}.marvel-device.iphone8plus.gold .top-bar,.marvel-device.iphone8plus.gold .bottom-bar{background:white}.marvel-device.iphone8plus.gold .sleep,.marvel-device.iphone8plus.gold .volume{background:#f9e7d3}.marvel-device.iphone8plus.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8plus.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone8plus.black:before{background:#080808}.marvel-device.iphone8plus.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone8plus.black .top-bar,.marvel-device.iphone8plus.black .bottom-bar{background:#212121}.marvel-device.iphone8plus.black .volume,.marvel-device.iphone8plus.black .sleep{background:#464646}.marvel-device.iphone8plus.black .camera{background:#080808}.marvel-device.iphone8plus.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8plus.black .home:before{background:#080808}.marvel-device.iphone8plus.landscape{padding:26px 112px;height:414px;width:736px}.marvel-device.iphone8plus.landscape .sleep{top:100%;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone8plus.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px - 14px);top:0}.marvel-device.iphone8plus.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone8plus.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:24px}.marvel-device.iphone8plus.landscape .sensor{top:154px;left:calc(100% - 54px - 16px)}.marvel-device.iphone8plus.landscape .speaker{height:70px;width:6px;left:calc(100% - 59px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone8plus.landscape .camera{left:calc(100% - 29px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s,.marvel-device.iphone5c{padding:105px 22px;background:#2c2b2c;width:320px;height:568px;border-radius:50px}.marvel-device.iphone5s:before,.marvel-device.iphone5c:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;content:'';left:4px;border-radius:46px;background:#1e1e1e;z-index:1}.marvel-device.iphone5s .sleep,.marvel-device.iphone5c .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0px 0px;background:#282727}.marvel-device.iphone5s .volume,.marvel-device.iphone5c .volume{position:absolute;left:-4px;top:180px;z-index:0;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:#282727}.marvel-device.iphone5s .volume:before,.marvel-device.iphone5c .volume:before{position:absolute;left:0px;top:-75px;height:35px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .volume:after,.marvel-device.iphone5c .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .camera,.marvel-device.iphone5c .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:32px;left:50%;margin-left:-5px;border-radius:5px;z-index:3}.marvel-device.iphone5s .sensor,.marvel-device.iphone5c .sensor{background:#3c3d3d;width:10px;height:10px;position:absolute;top:60px;left:160px;z-index:3;margin-left:-32px;border-radius:5px}.marvel-device.iphone5s .speaker,.marvel-device.iphone5c .speaker{background:#292728;width:64px;height:10px;position:absolute;top:60px;left:50%;margin-left:-32px;border-radius:5px;z-index:3}.marvel-device.iphone5s.landscape,.marvel-device.iphone5c.landscape{padding:22px 105px;height:320px;width:568px}.marvel-device.iphone5s.landscape .sleep,.marvel-device.iphone5c.landscape .sleep{right:-4px;top:calc(100% - 120px);height:60px;width:4px;border-radius:0px 2px 2px 0px}.marvel-device.iphone5s.landscape .volume,.marvel-device.iphone5c.landscape .volume{width:27px;height:4px;top:-4px;left:calc(100% - 180px);border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:before,.marvel-device.iphone5c.landscape .volume:before{width:35px;height:4px;top:0px;right:-75px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:after,.marvel-device.iphone5c.landscape .volume:after{bottom:0px;left:-64px;z-index:999;height:4px;width:27px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .sensor,.marvel-device.iphone5c.landscape .sensor{top:160px;left:calc(100% - 60px);margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .speaker,.marvel-device.iphone5c.landscape .speaker{height:64px;width:10px;left:calc(100% - 60px);top:50%;margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .camera,.marvel-device.iphone5c.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s .home{border-radius:36px;width:68px;-webkit-box-shadow:inset 0 0 0 4px #2c2b2c;box-shadow:inset 0 0 0 4px #2c2b2c;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:19px;z-index:3}.marvel-device.iphone5s .top-bar{top:70px;position:absolute;left:0}.marvel-device.iphone5s .bottom-bar{bottom:70px;position:absolute;left:0}.marvel-device.iphone5s.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5s.landscape .top-bar{left:70px;top:0px;width:3px;height:100%}.marvel-device.iphone5s.landscape .bottom-bar{right:70px;left:auto;bottom:0px;width:3px;height:100%}.marvel-device.iphone5s.silver{background:#bcbcbc}.marvel-device.iphone5s.silver:before{background:#fcfcfc}.marvel-device.iphone5s.silver .volume,.marvel-device.iphone5s.silver .sleep{background:#d6d6d6}.marvel-device.iphone5s.silver .top-bar,.marvel-device.iphone5s.silver .bottom-bar{background:#eaebec}.marvel-device.iphone5s.silver .home{-webkit-box-shadow:inset 0 0 0 4px #bcbcbc;box-shadow:inset 0 0 0 4px #bcbcbc}.marvel-device.iphone5s.gold{background:#f9e7d3}.marvel-device.iphone5s.gold:before{background:#fcfcfc}.marvel-device.iphone5s.gold .volume,.marvel-device.iphone5s.gold .sleep{background:#f9e7d3}.marvel-device.iphone5s.gold .top-bar,.marvel-device.iphone5s.gold .bottom-bar{background:white}.marvel-device.iphone5s.gold .home{-webkit-box-shadow:inset 0 0 0 4px #f9e7d3;box-shadow:inset 0 0 0 4px #f9e7d3}.marvel-device.iphone5c{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.iphone5c .top-bar,.marvel-device.iphone5c .bottom-bar{display:none}.marvel-device.iphone5c .home{background:#242324;border-radius:36px;width:68px;height:68px;z-index:3;position:absolute;left:50%;margin-left:-34px;bottom:19px}.marvel-device.iphone5c .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone5c.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5c .volume,.marvel-device.iphone5c .sleep{background:#dddddd}.marvel-device.iphone5c.red{background:#f96b6c}.marvel-device.iphone5c.red .volume,.marvel-device.iphone5c.red .sleep{background:#ed5758}.marvel-device.iphone5c.yellow{background:#f2dc60}.marvel-device.iphone5c.yellow .volume,.marvel-device.iphone5c.yellow .sleep{background:#e5ce4c}.marvel-device.iphone5c.green{background:#97e563}.marvel-device.iphone5c.green .volume,.marvel-device.iphone5c.green .sleep{background:#85d94d}.marvel-device.iphone5c.blue{background:#33a2db}.marvel-device.iphone5c.blue .volume,.marvel-device.iphone5c.blue .sleep{background:#2694cd}.marvel-device.iphone4s{padding:129px 27px;width:320px;height:480px;background:#686868;border-radius:54px}.marvel-device.iphone4s:before{content:'';width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;z-index:1;border-radius:50px;background:#1e1e1e}.marvel-device.iphone4s .top-bar{top:60px;position:absolute;left:0}.marvel-device.iphone4s .bottom-bar{bottom:90px;position:absolute;left:0}.marvel-device.iphone4s .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:72px;left:134px;z-index:3;margin-left:-5px;border-radius:100%}.marvel-device.iphone4s .speaker{background:#292728;width:64px;height:10px;position:absolute;top:72px;left:50%;z-index:3;margin-left:-32px;border-radius:5px}.marvel-device.iphone4s .sensor{background:#292728;width:40px;height:10px;position:absolute;top:36px;left:50%;z-index:3;margin-left:-20px;border-radius:5px}.marvel-device.iphone4s .home{background:#242324;border-radius:100%;width:72px;height:72px;z-index:3;position:absolute;left:50%;margin-left:-36px;bottom:30px}.marvel-device.iphone4s .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone4s .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0px 0px;background:#4D4D4D}.marvel-device.iphone4s .volume{position:absolute;left:-4px;top:160px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:#4D4D4D}.marvel-device.iphone4s .volume:before{position:absolute;left:0px;top:-70px;height:35px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s.landscape{padding:27px 129px;height:320px;width:480px}.marvel-device.iphone4s.landscape .bottom-bar{left:90px;bottom:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .top-bar{left:calc(100% - 60px);top:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .camera{top:134px;left:calc(100% - 72px);margin-left:0}.marvel-device.iphone4s.landscape .speaker{top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 72px);width:10px;height:64px}.marvel-device.iphone4s.landscape .sensor{height:40px;width:10px;left:calc(100% - 36px);top:50%;margin-left:0;margin-top:-20px}.marvel-device.iphone4s.landscape .home{left:30px;bottom:50%;margin-left:0;margin-bottom:-36px}.marvel-device.iphone4s.landscape .sleep{height:60px;width:4px;right:-4px;top:calc(100% - 120px);border-radius:0px 2px 2px 0px}.marvel-device.iphone4s.landscape .volume{top:-4px;left:calc(100% - 187px);height:4px;width:27px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:before{right:-70px;left:auto;top:0px;width:35px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:after{width:27px;height:4px;bottom:0px;left:-64px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.silver{background:#bcbcbc}.marvel-device.iphone4s.silver:before{background:#fcfcfc}.marvel-device.iphone4s.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.iphone4s.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.iphone4s.silver .volume,.marvel-device.iphone4s.silver .sleep{background:#d6d6d6}.marvel-device.nexus5{padding:50px 15px 50px 15px;width:320px;height:568px;background:#1e1e1e;border-radius:20px}.marvel-device.nexus5:before{border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.1%;width:calc(100% - 26px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .top-bar{width:calc(100% - 8px);height:calc(100% - 6px);position:absolute;top:3px;left:4px;border-radius:20px;background:#181818}.marvel-device.nexus5 .top-bar:before{border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.0%;width:calc(100% - 26px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .bottom-bar{display:none}.marvel-device.nexus5 .sleep{width:3px;position:absolute;left:-3px;top:110px;height:100px;background:inherit;border-radius:2px 0px 0px 2px}.marvel-device.nexus5 .volume{width:3px;position:absolute;right:-3px;top:70px;height:45px;background:inherit;border-radius:0px 2px 2px 0px}.marvel-device.nexus5 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:18px;left:50%;z-index:3;margin-left:-5px;border-radius:100%}.marvel-device.nexus5 .camera:before{background:#3c3d3d;width:6px;height:6px;content:'';display:block;position:absolute;top:2px;left:-100px;z-index:3;border-radius:100%}.marvel-device.nexus5.landscape{padding:15px 50px 15px 50px;height:320px;width:568px}.marvel-device.nexus5.landscape:before{width:103.1%;height:calc(100% - 26px);border-radius:50px / 600px}.marvel-device.nexus5.landscape .top-bar{left:3px;top:4px;height:calc(100% - 8px);width:calc(100% - 6px)}.marvel-device.nexus5.landscape .top-bar:before{width:103%;height:calc(100% - 26px);border-radius:50px / 600px}.marvel-device.nexus5.landscape .sleep{height:3px;width:100px;left:calc(100% - 210px);top:-3px;border-radius:2px 2px 0px 0px}.marvel-device.nexus5.landscape .volume{height:3px;width:45px;right:70px;top:100%;border-radius:0px 0px 2px 2px}.marvel-device.nexus5.landscape .camera{top:50%;left:calc(100% - 18px);margin-left:0;margin-top:-5px}.marvel-device.nexus5.landscape .camera:before{top:-100px;left:2px}.marvel-device.s5{padding:60px 18px;border-radius:42px;width:320px;height:568px;background:#bcbcbc}.marvel-device.s5:before,.marvel-device.s5:after{width:calc(100% - 52px);content:'';display:block;height:26px;background:inherit;position:absolute;border-radius:500px / 40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5:before{top:-7px}.marvel-device.s5:after{bottom:-7px}.marvel-device.s5 .bottom-bar{display:none}.marvel-device.s5 .top-bar{border-radius:37px;width:calc(100% - 10px);height:calc(100% - 10px);top:5px;left:5px;background:radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 3px 3px;background-color:white;background-size:4px 4px;background-position:center;z-index:2;position:absolute}.marvel-device.s5 .top-bar:before,.marvel-device.s5 .top-bar:after{width:calc(100% - 48px);content:'';display:block;height:26px;background:inherit;position:absolute;border-radius:500px / 40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5 .top-bar:before{top:-7px}.marvel-device.s5 .top-bar:after{bottom:-7px}.marvel-device.s5 .sleep{width:3px;position:absolute;left:-3px;top:100px;height:100px;background:#cecece;border-radius:2px 0px 0px 2px}.marvel-device.s5 .speaker{width:68px;height:8px;position:absolute;top:20px;display:block;z-index:3;left:50%;margin-left:-34px;background-color:#bcbcbc;background-position:top left;border-radius:4px}.marvel-device.s5 .sensor{display:block;position:absolute;top:20px;right:110px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .camera{display:block;position:absolute;top:24px;right:42px;background:black;border-radius:100%;width:10px;height:10px;z-index:3}.marvel-device.s5 .camera:before{width:4px;height:4px;background:#3c3d3d;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-2px;margin-left:-2px}.marvel-device.s5 .home{position:absolute;z-index:3;bottom:17px;left:50%;width:70px;height:20px;background:white;border-radius:18px;display:block;margin-left:-35px;border:2px solid black}.marvel-device.s5.landscape{padding:18px 60px;height:320px;width:568px}.marvel-device.s5.landscape:before,.marvel-device.s5.landscape:after{height:calc(100% - 52px);width:26px;border-radius:40px / 500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape:before{top:50%;left:-7px}.marvel-device.s5.landscape:after{top:50%;left:auto;right:-7px}.marvel-device.s5.landscape .top-bar:before,.marvel-device.s5.landscape .top-bar:after{width:26px;height:calc(100% - 48px);border-radius:40px / 500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape .top-bar:before{right:-7px;top:50%;left:auto}.marvel-device.s5.landscape .top-bar:after{left:-7px;top:50%;right:auto}.marvel-device.s5.landscape .sleep{height:3px;width:100px;left:calc(100% - 200px);top:-3px;border-radius:2px 2px 0px 0px}.marvel-device.s5.landscape .speaker{height:68px;width:8px;left:calc(100% - 20px);top:50%;margin-left:0;margin-top:-34px}.marvel-device.s5.landscape .sensor{right:20px;top:calc(100% - 110px)}.marvel-device.s5.landscape .sensor:after{left:-12px;right:0px}.marvel-device.s5.landscape .camera{top:calc(100% - 42px);right:24px}.marvel-device.s5.landscape .home{width:20px;height:70px;bottom:50%;margin-bottom:-35px;margin-left:0;left:17px}.marvel-device.s5.black{background:#1e1e1e}.marvel-device.s5.black .speaker{background:black}.marvel-device.s5.black .sleep{background:#1e1e1e}.marvel-device.s5.black .top-bar{background:radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 3px 3px;background-color:#2c2b2c;background-size:4px 4px}.marvel-device.s5.black .home{background:#2c2b2c}.marvel-device.lumia920{padding:80px 35px 125px 35px;background:#ffdd00;width:320px;height:533px;border-radius:40px / 3px}.marvel-device.lumia920 .bottom-bar{display:none}.marvel-device.lumia920 .top-bar{width:calc(100% - 24px);height:calc(100% - 32px);position:absolute;top:16px;left:12px;border-radius:24px;background:black;z-index:1}.marvel-device.lumia920 .top-bar:before{background:#1e1e1e;display:block;content:'';width:calc(100% - 4px);height:calc(100% - 4px);top:2px;left:2px;position:absolute;border-radius:22px}.marvel-device.lumia920 .volume{width:3px;position:absolute;top:130px;height:100px;background:#1e1e1e;right:-3px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:before{width:3px;position:absolute;top:190px;content:'';display:block;height:50px;background:inherit;right:0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:after{width:3px;position:absolute;top:460px;content:'';display:block;height:50px;background:inherit;right:0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:34px;right:130px;z-index:5;border-radius:5px}.marvel-device.lumia920 .speaker{background:#292728;width:64px;height:10px;position:absolute;top:38px;left:50%;margin-left:-32px;border-radius:5px;z-index:3}.marvel-device.lumia920.landscape{padding:35px 80px 35px 125px;height:320px;width:568px;border-radius:2px / 100px}.marvel-device.lumia920.landscape .top-bar{height:calc(100% - 24px);width:calc(100% - 32px);left:16px;top:12px}.marvel-device.lumia920.landscape .volume{height:3px;right:130px;width:100px;top:100%;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:before{height:3px;right:190px;top:0px;width:50px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:after{height:3px;right:430px;top:0px;width:50px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .camera{right:30px;top:calc(100% - 140px)}.marvel-device.lumia920.landscape .speaker{width:10px;height:64px;top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 48px)}.marvel-device.lumia920.black{background:black}.marvel-device.lumia920.white{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.lumia920.blue{background:#00acdd}.marvel-device.lumia920.red{background:#CC3E32}.marvel-device.htc-one{padding:72px 25px 100px 25px;width:320px;height:568px;background:#bebebe;border-radius:34px}.marvel-device.htc-one:before{content:'';display:block;width:calc(100% - 4px);height:calc(100% - 4px);position:absolute;top:2px;left:2px;background:#adadad;border-radius:32px}.marvel-device.htc-one:after{content:'';display:block;width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;background:#eeeeee;border-radius:30px}.marvel-device.htc-one .top-bar{width:calc(100% - 4px);height:635px;position:absolute;background:#424242;top:50px;z-index:1;left:2px}.marvel-device.htc-one .top-bar:before{content:'';position:absolute;width:calc(100% - 4px);height:100%;position:absolute;background:black;top:0px;z-index:1;left:2px}.marvel-device.htc-one .bottom-bar{display:none}.marvel-device.htc-one .speaker{height:16px;width:216px;display:block;position:absolute;top:22px;z-index:2;left:50%;margin-left:-108px;background:radial-gradient(#343434 25%, transparent 50%) 0 0,radial-gradient(#343434 25%, transparent 50%) 4px 4px;background-size:4px 4px;background-position:top left}.marvel-device.htc-one .speaker:after{content:'';height:16px;width:216px;display:block;position:absolute;top:676px;z-index:2;left:50%;margin-left:-108px;background:inherit}.marvel-device.htc-one .camera{display:block;position:absolute;top:18px;right:38px;background:#3c3d3d;border-radius:100%;width:24px;height:24px;z-index:3}.marvel-device.htc-one .camera:before{width:8px;height:8px;background:black;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-4px;margin-left:-4px}.marvel-device.htc-one .sensor{display:block;position:absolute;top:29px;left:60px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one.landscape{padding:25px 72px 25px 100px;height:320px;width:568px}.marvel-device.htc-one.landscape .top-bar{height:calc(100% - 4px);width:635px;left:calc(100% - 685px);top:2px}.marvel-device.htc-one.landscape .speaker{width:16px;height:216px;left:calc(100% - 38px);top:50%;margin-left:0px;margin-top:-108px}.marvel-device.htc-one.landscape .speaker:after{width:16px;height:216px;left:calc(100% - 692px);top:50%;margin-left:0;margin-top:-108px}.marvel-device.htc-one.landscape .camera{right:18px;top:calc(100% - 38px)}.marvel-device.htc-one.landscape .sensor{left:calc(100% - 29px);top:60px}.marvel-device.htc-one.landscape .sensor :after{right:0;top:-12px}.marvel-device.ipad{width:576px;height:768px;padding:90px 25px;background:#242324;border-radius:44px}.marvel-device.ipad:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;border-radius:40px;background:#1e1e1e}.marvel-device.ipad .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:44px;left:50%;margin-left:-5px;border-radius:100%}.marvel-device.ipad .top-bar,.marvel-device.ipad .bottom-bar{display:none}.marvel-device.ipad .home{background:#242324;border-radius:36px;width:50px;height:50px;position:absolute;left:50%;margin-left:-25px;bottom:22px}.marvel-device.ipad .home:after{width:15px;height:15px;margin-top:-8px;margin-left:-8px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%}.marvel-device.ipad.landscape{height:576px;width:768px;padding:25px 90px}.marvel-device.ipad.landscape .camera{left:calc(100% - 44px);top:50%;margin-left:0;margin-top:-5px}.marvel-device.ipad.landscape .home{top:50%;left:22px;margin-left:0;margin-top:-25px}.marvel-device.ipad.silver{background:#bcbcbc}.marvel-device.ipad.silver:before{background:#fcfcfc}.marvel-device.ipad.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.ipad.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.macbook{width:960px;height:600px;padding:44px 44px 76px;margin:0 auto;background:#bebebe;border-radius:34px}.marvel-device.macbook:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;border-radius:30px;background:#1e1e1e}.marvel-device.macbook .top-bar{width:calc(100% + 2 * 70px);height:40px;position:absolute;content:'';display:block;top:680px;left:-70px;border-bottom-left-radius:90px 18px;border-bottom-right-radius:90px 18px;background:#bebebe;-webkit-box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6);box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6)}.marvel-device.macbook .top-bar:before{width:100%;height:24px;content:'';display:block;top:0;left:0;background:#f0f0f0;border-bottom:2px solid #aaa;border-radius:5px;position:relative}.marvel-device.macbook .top-bar:after{width:16%;height:14px;content:'';display:block;top:0;background:#ddd;position:absolute;margin-left:auto;margin-right:auto;left:0;right:0;border-radius:0 0 20px 20px;-webkit-box-shadow:inset 0px -3px 10px #999;box-shadow:inset 0px -3px 10px #999}.marvel-device.macbook .bottom-bar{background:transparent;width:calc(100% + 2 * 70px);height:26px;position:absolute;content:'';display:block;top:680px;left:-70px}.marvel-device.macbook .bottom-bar:before,.marvel-device.macbook .bottom-bar:after{height:calc(100% - 2px);width:80px;content:'';display:block;top:0;position:absolute}.marvel-device.macbook .bottom-bar:before{left:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#747474), color-stop(5%, #c3c3c3), color-stop(14%, #ebebeb), color-stop(41%, #979797), color-stop(80%, #f0f0f0), color-stop(100%, #f0f0f0), to(#f0f0f0));background:linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%)}.marvel-device.macbook .bottom-bar:after{right:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#f0f0f0), color-stop(0%, #f0f0f0), color-stop(20%, #f0f0f0), color-stop(59%, #979797), color-stop(86%, #ebebeb), color-stop(95%, #c3c3c3), to(#747474));background:linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%)}.marvel-device.macbook .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:20px;left:50%;margin-left:-5px;border-radius:100%}.marvel-device.macbook .home{display:none}.marvel-device.iphone-x{width:375px;height:812px;padding:26px;background:#fdfdfd;-webkit-box-shadow:inset 0 0 11px 0 black;box-shadow:inset 0 0 11px 0 black;border-radius:66px}.marvel-device.iphone-x .overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:66px;overflow:hidden}.marvel-device.iphone-x .shadow{border-radius:100%;width:90px;height:90px;position:absolute;background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 60%)}.marvel-device.iphone-x .shadow--tl{top:-20px;left:-20px}.marvel-device.iphone-x .shadow--tr{top:-20px;right:-20px}.marvel-device.iphone-x .shadow--bl{bottom:-20px;left:-20px}.marvel-device.iphone-x .shadow--br{bottom:-20px;right:-20px}.marvel-device.iphone-x:before{width:calc(100% - 10px);height:calc(100% - 10px);position:absolute;top:5px;content:'';left:5px;border-radius:61px;background:black;z-index:1}.marvel-device.iphone-x .inner-shadow{width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;top:10px;overflow:hidden;left:10px;border-radius:56px;-webkit-box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);z-index:1}.marvel-device.iphone-x .inner-shadow:before{-webkit-box-shadow:inset 0 0 20px 0 #FFFFFF;box-shadow:inset 0 0 20px 0 #FFFFFF;width:100%;height:116%;position:absolute;top:-8%;content:'';left:0;border-radius:200px / 112px;z-index:2}.marvel-device.iphone-x .screen{border-radius:40px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.iphone-x .top-bar,.marvel-device.iphone-x .bottom-bar{width:100%;position:absolute;height:8px;background:rgba(0,0,0,0.1);left:0}.marvel-device.iphone-x .top-bar{top:80px}.marvel-device.iphone-x .bottom-bar{bottom:80px}.marvel-device.iphone-x .volume,.marvel-device.iphone-x .volume:before,.marvel-device.iphone-x .volume:after,.marvel-device.iphone-x .sleep{width:3px;background:#b5b5b5;position:absolute}.marvel-device.iphone-x .volume{left:-3px;top:116px;height:32px}.marvel-device.iphone-x .volume:before{height:62px;top:62px;content:'';left:0}.marvel-device.iphone-x .volume:after{height:62px;top:140px;content:'';left:0}.marvel-device.iphone-x .sleep{height:96px;top:200px;right:-3px}.marvel-device.iphone-x .camera{width:6px;height:6px;top:9px;border-radius:100%;position:absolute;left:154px;background:#0d4d71}.marvel-device.iphone-x .speaker{height:6px;width:60px;left:50%;position:absolute;top:9px;margin-left:-30px;background:#171818;border-radius:6px}.marvel-device.iphone-x .notch{position:absolute;width:210px;height:30px;top:26px;left:108px;z-index:4;background:black;border-bottom-left-radius:24px;border-bottom-right-radius:24px}.marvel-device.iphone-x .notch:before,.marvel-device.iphone-x .notch:after{content:'';height:8px;position:absolute;top:0;width:8px}.marvel-device.iphone-x .notch:after{background:radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);left:-8px}.marvel-device.iphone-x .notch:before{background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);right:-8px}.marvel-device.iphone-x.landscape{height:375px;width:812px}.marvel-device.iphone-x.landscape .top-bar,.marvel-device.iphone-x.landscape .bottom-bar{width:8px;height:100%;top:0}.marvel-device.iphone-x.landscape .top-bar{left:80px}.marvel-device.iphone-x.landscape .bottom-bar{right:80px;bottom:auto;left:auto}.marvel-device.iphone-x.landscape .volume,.marvel-device.iphone-x.landscape .volume:before,.marvel-device.iphone-x.landscape .volume:after,.marvel-device.iphone-x.landscape .sleep{height:3px}.marvel-device.iphone-x.landscape .inner-shadow:before{height:100%;width:116%;left:-8%;top:0;border-radius:112px / 200px}.marvel-device.iphone-x.landscape .volume{bottom:-3px;top:auto;left:116px;width:32px}.marvel-device.iphone-x.landscape .volume:before{width:62px;left:62px;top:0}.marvel-device.iphone-x.landscape .volume:after{width:62px;left:140px;top:0}.marvel-device.iphone-x.landscape .sleep{width:96px;left:200px;top:-3px;right:auto}.marvel-device.iphone-x.landscape .camera{left:9px;bottom:154px;top:auto}.marvel-device.iphone-x.landscape .speaker{width:6px;height:60px;left:9px;top:50%;margin-top:-30px;margin-left:0}.marvel-device.iphone-x.landscape .notch{height:210px;width:30px;left:26px;bottom:108px;top:auto;border-top-right-radius:24px;border-bottom-right-radius:24px;border-bottom-left-radius:0}.marvel-device.iphone-x.landscape .notch:before,.marvel-device.iphone-x.landscape .notch:after{left:0}.marvel-device.iphone-x.landscape .notch:after{background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);bottom:-8px;top:auto}.marvel-device.iphone-x.landscape .notch:before{background:radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%);top:-8px}.marvel-device.note8{width:400px;height:822px;background:black;border-radius:34px;padding:45px 10px}.marvel-device.note8 .overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:34px;overflow:hidden}.marvel-device.note8 .speaker{height:8px;width:56px;left:50%;position:absolute;top:25px;margin-left:-28px;background:#171818;z-index:1;border-radius:8px}.marvel-device.note8 .camera{height:18px;width:18px;left:86px;position:absolute;top:18px;background:#212b36;z-index:1;border-radius:100%}.marvel-device.note8 .camera:before{content:'';height:8px;width:8px;left:-22px;position:absolute;top:5px;background:#212b36;z-index:1;border-radius:100%}.marvel-device.note8 .sensors{height:10px;width:10px;left:120px;position:absolute;top:22px;background:#1d233b;z-index:1;border-radius:100%}.marvel-device.note8 .sensors:before{content:'';height:10px;width:10px;left:18px;position:absolute;top:0;background:#1d233b;z-index:1;border-radius:100%}.marvel-device.note8 .more-sensors{height:16px;width:16px;left:285px;position:absolute;top:18px;background:#33244a;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,0.1);box-shadow:0 0 0 2px rgba(255,255,255,0.1);z-index:1;border-radius:100%}.marvel-device.note8 .more-sensors:before{content:'';height:11px;width:11px;left:40px;position:absolute;top:4px;background:#214a61;z-index:1;border-radius:100%}.marvel-device.note8 .sleep{width:2px;height:56px;background:black;position:absolute;top:288px;right:-2px}.marvel-device.note8 .volume{width:2px;height:120px;background:black;position:absolute;top:168px;left:-2px}.marvel-device.note8 .volume:before{content:'';top:168px;width:2px;position:absolute;left:0;background:black;height:56px}.marvel-device.note8 .inner{width:100%;height:calc(100% - 8px);position:absolute;top:2px;content:'';left:0px;border-radius:34px;border-top:2px solid #9fa0a2;border-bottom:2px solid #9fa0a2;background:black;z-index:1;-webkit-box-shadow:inset 0 0 6px 0 rgba(255,255,255,0.5);box-shadow:inset 0 0 6px 0 rgba(255,255,255,0.5)}.marvel-device.note8 .shadow{-webkit-box-shadow:inset 0 0 60px 0 white,inset 0 0 30px 0 rgba(255,255,255,0.5),0 0 20px 0 white,0 0 20px 0 rgba(255,255,255,0.5);box-shadow:inset 0 0 60px 0 white,inset 0 0 30px 0 rgba(255,255,255,0.5),0 0 20px 0 white,0 0 20px 0 rgba(255,255,255,0.5);height:101%;position:absolute;top:-0.5%;content:'';width:calc(100% - 20px);left:10px;border-radius:38px;z-index:5;pointer-events:none}.marvel-device.note8 .screen{border-radius:14px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.note8.landscape{height:400px;width:822px;padding:10px 45px}.marvel-device.note8.landscape .speaker{height:56px;width:8px;top:50%;margin-top:-28px;margin-left:0;right:25px;left:auto}.marvel-device.note8.landscape .camera{top:86px;right:18px;left:auto}.marvel-device.note8.landscape .camera:before{top:-22px;left:5px}.marvel-device.note8.landscape .sensors{top:120px;right:22px;left:auto}.marvel-device.note8.landscape .sensors:before{top:18px;left:0}.marvel-device.note8.landscape .more-sensors{top:285px;right:18px;left:auto}.marvel-device.note8.landscape .more-sensors:before{top:40px;left:4px}.marvel-device.note8.landscape .sleep{bottom:-2px;top:auto;right:288px;width:56px;height:2px}.marvel-device.note8.landscape .volume{width:120px;height:2px;top:-2px;right:168px;left:auto}.marvel-device.note8.landscape .volume:before{right:168px;left:auto;top:0;width:56px;height:2px}.marvel-device.note8.landscape .inner{height:100%;width:calc(100% - 8px);left:2px;top:0;border-top:0;border-bottom:0;border-left:2px solid #9fa0a2;border-right:2px solid #9fa0a2}.marvel-device.note8.landscape .shadow{width:101%;height:calc(100% - 20px);left:-0.5%;top:10px} \ No newline at end of file diff --git a/seed/challenges/00-getting-started/getting-started.json b/seed/challenges/00-getting-started/getting-started.json index 1eaa98860..dd55cd155 100644 --- a/seed/challenges/00-getting-started/getting-started.json +++ b/seed/challenges/00-getting-started/getting-started.json @@ -14,12 +14,6 @@ "欢迎关注微信公众号：FreeCodeCamp，这里不仅有很多高质量的自学编程心得、经验、资料分享，还有备受欢迎的线下活动预告，千万不要错过哦。", "" ], - [ - "/images/fcc-weibo.png", - "A picture of Free Code Camp's 4 benefits: Get connected, Learn JavaScript, Build your Portfolio, Help nonprofits", - "欢迎关注微博账号：FreeCodeCamp，这里不仅有很多高质量的自学编程心得、经验、资料分享，还有备受欢迎的线下活动预告，千万不要错过哦。", - "http://weibo.com/FreeCodeCamp" - ], [ "/images/Elb3dfj.jpg", "A screenshot of some of our campers coding together in Toronto.", @@ -174,19 +168,13 @@ }, { "id": "560add71cb82ac38a17513c2", - "title": "Join a Campsite in Your City", + "title": "Join a Free Code Camp Group in Your City", "description": [ [ - "//i.imgur.com/XugIMb4.jpg", - "A picture of some of our campers meeting in a local cafe.", - "我们的营地是微信公众号:freecodecamp，它可以帮助你遇到和你同一个城市的小伙伴。你还可以基于微信群去策划或者参加“Coffee and Code”活动，在那里你会遇到更多志同道合的FCC小伙伴，一起交流学习心得，解疑答惑。", - "" - ], - [ - "//i.imgur.com/fTFMjwf.gif", + "//i.imgur.com/XugIMb4.gif", "A gif showing how you can click the link below, find your city on the list of Campsites, then click on the Facebook link for your city and join your city's Facebook group.", - "在这个列表找到你的城市，然后点击它，这样就这些跳转到你所在城市的Facebook群组，点击\"Join group\"按钮申请加入，很快就有人批准你通过。如果你的城市不在这个列表，滑到页面的最下面，按照Wiki的提示来创建自己城市的营地。", - "https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/LocalGroups-List" + "微信添加好友（注意不是公众账号）“fcczhongguo”，直接发送城市名，机器人小助手会邀请你入群", + "" ] ], "challengeSeed": [], diff --git a/server/views/challenges/showHTML.jade b/server/views/challenges/showHTML.jade index 2b121c70f..df2ace3db 100644 --- a/server/views/challenges/showHTML.jade +++ b/server/views/challenges/showHTML.jade @@ -4,55 +4,92 @@ block content link(rel='stylesheet', href='/bower_components/CodeMirror/addon/lint/lint.css') link(rel='stylesheet', href='/bower_components/CodeMirror/theme/monokai.css') link(rel='stylesheet', href='/css/ubuntu.css') + link(rel='stylesheet', href=rev('/css', 'better.css')) .row .col-md-3.col-lg-3 - .scroll-locker(id = "scroll-locker") - .innerMarginFix(style = "width: 99%;") - .row - .col-xs-12 - h4.text-center.challenge-instructions-title= name - if (isCompleted) - |   - i.ion-checkmark-circled.text-primary(title="Completed") - hr - .challenge-instructions - for sentence in description - if (/\ Date: Tue, 15 May 2018 12:48:53 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=AA=84=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/better.css | 335 +++++++++++++++++++++++++- server/views/challenges/showHTML.jade | 13 +- 2 files changed, 343 insertions(+), 5 deletions(-) diff --git a/public/css/better.css b/public/css/better.css index 6169a3bc7..5bb930fac 100644 --- a/public/css/better.css +++ b/public/css/better.css @@ -601,6 +601,7 @@ li.rebaseEntry, #terminal { border-bottom: 0; padding: 0 5px; + height: 75vh; } .helperBar { @@ -1234,5 +1235,337 @@ div.gitDemonstrationView { footer { margin-top: 0; } +:root { + --times: 100; +} +@media (max-width: 1200px) { + :root { + --times: 50; + } +} +@media (max-width: 1024px) { + :root { + --times: 100; + } + .tabs-mobile { + display: block !important; + } +} +@media (max-width: 411px) { + :root { + --times: 80; + } + footer { + display: none; + } +} +@media (min-width: 992px){ + iframe.iphone { + width: 100%; + height: 100%; + position: absolute; + top: 0; + right: 0; + overflow-y: scroll; + border-radius: calc(var(--times)/100*40px); + } +} + +@media (max-width: 1250px) and (min-width: 1200px) { + iframe.iphone { + right: 0; + } +} + +.marvel-device { + display:inline-block; + position:relative; + -webkit-box-sizing:content-box !important; + box-sizing:content-box !important +} +.marvel-device .screen { + width:100%; + position:relative; + height:100%; + z-index:3; + background:white; + overflow:hidden; + display:block; + border-radius:1px; + -webkit-box-shadow:0 0 0 3px #111; + box-shadow:0 0 0 3px #111 +} +.marvel-device .top-bar,.marvel-device .bottom-bar { + height:3px; + background:black; + width:100%; + display:block +} +.marvel-device .middle-bar { + width:3px; + height:4px; + top:0px; + left:90px; + background:black; + position:absolute +} +.marvel-device.iphone-x { + width:calc(var(--times)/100*375px); + height:calc(var(--times)/100*812px); + padding:calc(var(--times)/100*26px); + background:#fdfdfd; + -webkit-box-shadow:inset 0 0 11px 0 black; + box-shadow:inset 0 0 11px 0 black; + border-radius:calc(var(--times)/100*66px) +} +.marvel-device.iphone-x .overflow { + width:100%; + height:100%; + position:absolute; + top:0; + left:0; + border-radius:calc(var(--times)/100*66px); + overflow:hidden +} +.marvel-device.iphone-x .shadow { + border-radius:100%; + width:calc(var(--times)/100*90px); + height:calc(var(--times)/100*90px); + position:absolute; + background:radial-gradient(ellipse at center,rgba(0,0,0,0.6) 0%,rgba(255,255,255,0) 60%) +} +.marvel-device.iphone-x .shadow--tl { + top:calc(var(--times)/100*-20px) + left:calc(var(--times)/100*-20px) +} +.marvel-device.iphone-x .shadow--tr { + top:calc(var(--times)/100*-20px); + right:calc(var(--times)/100*-20px) +} +.marvel-device.iphone-x .shadow--bl { + bottom:calc(var(--times)/100*-20px); + left:calc(var(--times)/100*-20px) +} +.marvel-device.iphone-x .shadow--br { + bottom:calc(var(--times)/100*-20px); + right:calc(var(--times)/100*-20px) +} +.marvel-device.iphone-x:before { + width:calc(100% - 10px); + height:calc(100% - 10px); + position:absolute; + top:calc(var(--times)/100*5px); + content:''; + left:calc(var(--times)/100*5px); + border-radius:calc(var(--times)/100*61px); + background:black; + z-index:1 +} +.marvel-device.iphone-x .inner-shadow { + width:calc(100% - 20px); + height:calc(100% - 20px); + position:absolute; + top:calc(var(--times)/100*10px); + overflow:hidden; + left:calc(var(--times)/100*10px); + border-radius:calc(var(--times)/100*56px); + -webkit-box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66); + box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66); + z-index:1 +} +.marvel-device.iphone-x .inner-shadow:before { + -webkit-box-shadow:inset 0 0 20px 0 #FFFFFF; + box-shadow:inset 0 0 20px 0 #FFFFFF; + width:100%; + height:116%; + position:absolute; + top:-8%; + content:''; + left:0; + border-radius:200px / 112px; + z-index:2 +} +.marvel-device.iphone-x .screen { + border-radius:calc(var(--times)/100*40px); + -webkit-box-shadow:none; + box-shadow:none +} +.marvel-device.iphone-x .top-bar,.marvel-device.iphone-x .bottom-bar { + width:100%; + position:absolute; + height:calc(var(--times)/100*8px); + background:rgba(0,0,0,0.1); + left:0 +} +.marvel-device.iphone-x .top-bar { + top:calc(var(--times)/100*80px) +} +.marvel-device.iphone-x .bottom-bar { + bottom:calc(var(--times)/100*80px) +} +.marvel-device.iphone-x .volume,.marvel-device.iphone-x .volume:before,.marvel-device.iphone-x .volume:after,.marvel-device.iphone-x .sleep { + width:calc(var(--times)/100*3px); + background:#b5b5b5; + position:absolute +} +.marvel-device.iphone-x .volume { + left:calc(var(--times)/100*-3px); + top:calc(var(--times)/100*116px); + height:calc(var(--times)/100*32px) +} +.marvel-device.iphone-x .volume:before { + height:calc(var(--times)/100*62px); + top:calc(var(--times)/100*62px); + content:''; + left:0 +} +.marvel-device.iphone-x .volume:after { + height:calc(var(--times)/100*62px); + top:calc(var(--times)/100*140px); + content:''; + left:0 +} +.marvel-device.iphone-x .sleep { + height:calc(var(--times)/100*96px); + top:calc(var(--times)/100*200px); + right:calc(var(--times)/100*-3px) +} +.marvel-device.iphone-x .camera { + width:calc(var(--times)/100*6px); + height:calc(var(--times)/100*6px); + top:calc(var(--times)/100*9px); + border-radius:100%; + position:absolute; + left:calc(var(--times)/100*154px); + background:#0d4d71 +} +.marvel-device.iphone-x .speaker { + height:calc(var(--times)/100*6px); + width:calc(var(--times)/100*60px); + left:50%; + position:absolute; + top:calc(var(--times)/100*9px); + margin-left:calc(var(--times)/100*-30px); + background:#171818; + border-radius:calc(var(--times)/100*6px) +} +.marvel-device.iphone-x .notch { + position:absolute; + width:calc(var(--times)/100*210px); + height:calc(var(--times)/100*30px); + top:calc(var(--times)/100*26px); + left:calc(var(--times)/100*108px); + z-index:4; + background:black; + border-bottom-left-radius:calc(var(--times)/100*24px); + border-bottom-right-radius:calc(var(--times)/100*24px) +} +.marvel-device.iphone-x .notch:before,.marvel-device.iphone-x .notch:after { + content:''; + height:calc(var(--times)/100*8px); + position:absolute; + top:0; + width:calc(var(--times)/100*8px) +} +.marvel-device.iphone-x .notch:after { + background:radial-gradient(circle at bottom left,transparent 0,transparent 70%,black 70%,black 100%); + left:calc(var(--times)/100*-8px) +} +.marvel-device.iphone-x .notch:before { + background:radial-gradient(circle at bottom right,transparent 0,transparent 70%,black 70%,black 100%); + right:calc(var(--times)/100*-8px) +} +.marvel-device.iphone-x.landscape { + height:calc(var(--times)/100*375px); + width:calc(var(--times)/100*812px) +} +.marvel-device.iphone-x.landscape .top-bar,.marvel-device.iphone-x.landscape .bottom-bar { + width:calc(var(--times)/100*8px); + height:100%; + top:0 +} +.marvel-device.iphone-x.landscape .top-bar { + left:calc(var(--times)/100*80px) +} +.marvel-device.iphone-x.landscape .bottom-bar { + right:calc(var(--times)/100*80px); + bottom:auto; + left:auto +} +.marvel-device.iphone-x.landscape .volume,.marvel-device.iphone-x.landscape .volume:before,.marvel-device.iphone-x.landscape .volume:after,.marvel-device.iphone-x.landscape .sleep { + height:calc(var(--times)/100*3px) +} +.marvel-device.iphone-x.landscape .inner-shadow:before { + height:100%; + width:116%; + left:-8%; + top:0; + border-radius:calc(var(--times)/100*112px / 200px) +} +.marvel-device.iphone-x.landscape .volume { + bottom:calc(var(--times)/100*-3px); + top:auto; + left:calc(var(--times)/100*116px); + width:calc(var(--times)/100*32px) +} +.marvel-device.iphone-x.landscape .volume:before { + width:calc(var(--times)/100*62px); + left:calc(var(--times)/100*62px); + top:0 +} +.marvel-device.iphone-x.landscape .volume:after { + width:calc(var(--times)/100*62px); + left:calc(var(--times)/100*140px); + top:0 +} +.marvel-device.iphone-x.landscape .sleep { + width:calc(var(--times)/100*96px); + left:calc(var(--times)/100*200px); + top:calc(var(--times)/100*-3px); + right:auto +} +.marvel-device.iphone-x.landscape .camera { + left:calc(var(--times)/100*9px); + bottom:calc(var(--times)/100*154px); + top:auto +} +.marvel-device.iphone-x.landscape .speaker { + width:calc(var(--times)/100*6px); + height:calc(var(--times)/100*60px); + left:calc(var(--times)/100*9px); + top:50%; + margin-top:calc(var(--times)/100*-30px); + margin-left:0 +} +.marvel-device.iphone-x.landscape .notch { + height:calc(var(--times)/100*210px); + width:calc(var(--times)/100*30px); + left:calc(var(--times)/100*26px); + bottom:calc(var(--times)/100*108px); + top:auto; + border-top-right-radius:calc(var(--times)/100*24px); + border-bottom-right-radius:calc(var(--times)/100*24px); + border-bottom-left-radius:0 +} +.marvel-device.iphone-x.landscape .notch:before,.marvel-device.iphone-x.landscape .notch:after { + left:0 +} +.marvel-device.iphone-x.landscape .notch:after { + background:radial-gradient(circle at bottom right,transparent 0,transparent 70%,black 70%,black 100%); + bottom:calc(var(--times)/100*-8px); + top:auto +} +.marvel-device.iphone-x.landscape .notch:before { + background:radial-gradient(circle at top right,transparent 0,transparent 70%,black 70%,black 100%); + top:calc(var(--times)/100*-8px) +} + +#browser { + text-align: center; +} + +.navbar-toggle { + padding-left: 8px; + margin-right: 15px; -.marvel-device{display:inline-block;position:relative;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.marvel-device .screen{width:100%;position:relative;height:100%;z-index:3;background:white;overflow:hidden;display:block;border-radius:1px;-webkit-box-shadow:0 0 0 3px #111;box-shadow:0 0 0 3px #111}.marvel-device .top-bar,.marvel-device .bottom-bar{height:3px;background:black;width:100%;display:block}.marvel-device .middle-bar{width:3px;height:4px;top:0px;left:90px;background:black;position:absolute}.marvel-device.iphone8{width:375px;height:667px;padding:105px 24px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone8:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone8:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone8 .home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:22px;z-index:3;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%)}.marvel-device.iphone8 .home:before{background:#f8f8f8;position:absolute;content:'';border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone8 .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone8 .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone8 .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone8 .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone8 .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:24px;left:50%;margin-left:-6px;border-radius:100%;z-index:3}.marvel-device.iphone8 .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:49px;left:134px;z-index:3;border-radius:100%}.marvel-device.iphone8 .speaker{background:#292728;width:70px;height:6px;position:absolute;top:54px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}.marvel-device.iphone8.gold{background:#f9e7d3}.marvel-device.iphone8.gold .top-bar,.marvel-device.iphone8.gold .bottom-bar{background:white}.marvel-device.iphone8.gold .sleep,.marvel-device.iphone8.gold .volume{background:#f9e7d3}.marvel-device.iphone8.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone8.black:before{background:#080808}.marvel-device.iphone8.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone8.black .top-bar,.marvel-device.iphone8.black .bottom-bar{background:#212121}.marvel-device.iphone8.black .volume,.marvel-device.iphone8.black .sleep{background:#464646}.marvel-device.iphone8.black .camera{background:#080808}.marvel-device.iphone8.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8.black .home:before{background:#080808}.marvel-device.iphone8.landscape{padding:24px 105px;height:375px;width:667px}.marvel-device.iphone8.landscape .sleep{top:100%;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone8.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px - 14px);top:0}.marvel-device.iphone8.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone8.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:22px}.marvel-device.iphone8.landscape .sensor{top:134px;left:calc(100% - 49px - 16px)}.marvel-device.iphone8.landscape .speaker{height:70px;width:6px;left:calc(100% - 54px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone8.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone8plus{width:414px;height:736px;padding:112px 26px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone8plus:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone8plus:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone8plus .home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:24px;z-index:3;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%)}.marvel-device.iphone8plus .home:before{background:#f8f8f8;position:absolute;content:'';border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone8plus .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone8plus .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone8plus .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone8plus .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone8plus .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8plus .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8plus .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:29px;left:50%;margin-left:-6px;border-radius:100%;z-index:3}.marvel-device.iphone8plus .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:54px;left:154px;z-index:3;border-radius:100%}.marvel-device.iphone8plus .speaker{background:#292728;width:70px;height:6px;position:absolute;top:59px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}.marvel-device.iphone8plus.gold{background:#f9e7d3}.marvel-device.iphone8plus.gold .top-bar,.marvel-device.iphone8plus.gold .bottom-bar{background:white}.marvel-device.iphone8plus.gold .sleep,.marvel-device.iphone8plus.gold .volume{background:#f9e7d3}.marvel-device.iphone8plus.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8plus.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone8plus.black:before{background:#080808}.marvel-device.iphone8plus.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone8plus.black .top-bar,.marvel-device.iphone8plus.black .bottom-bar{background:#212121}.marvel-device.iphone8plus.black .volume,.marvel-device.iphone8plus.black .sleep{background:#464646}.marvel-device.iphone8plus.black .camera{background:#080808}.marvel-device.iphone8plus.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8plus.black .home:before{background:#080808}.marvel-device.iphone8plus.landscape{padding:26px 112px;height:414px;width:736px}.marvel-device.iphone8plus.landscape .sleep{top:100%;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone8plus.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px - 14px);top:0}.marvel-device.iphone8plus.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone8plus.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:24px}.marvel-device.iphone8plus.landscape .sensor{top:154px;left:calc(100% - 54px - 16px)}.marvel-device.iphone8plus.landscape .speaker{height:70px;width:6px;left:calc(100% - 59px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone8plus.landscape .camera{left:calc(100% - 29px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s,.marvel-device.iphone5c{padding:105px 22px;background:#2c2b2c;width:320px;height:568px;border-radius:50px}.marvel-device.iphone5s:before,.marvel-device.iphone5c:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;content:'';left:4px;border-radius:46px;background:#1e1e1e;z-index:1}.marvel-device.iphone5s .sleep,.marvel-device.iphone5c .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0px 0px;background:#282727}.marvel-device.iphone5s .volume,.marvel-device.iphone5c .volume{position:absolute;left:-4px;top:180px;z-index:0;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:#282727}.marvel-device.iphone5s .volume:before,.marvel-device.iphone5c .volume:before{position:absolute;left:0px;top:-75px;height:35px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .volume:after,.marvel-device.iphone5c .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .camera,.marvel-device.iphone5c .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:32px;left:50%;margin-left:-5px;border-radius:5px;z-index:3}.marvel-device.iphone5s .sensor,.marvel-device.iphone5c .sensor{background:#3c3d3d;width:10px;height:10px;position:absolute;top:60px;left:160px;z-index:3;margin-left:-32px;border-radius:5px}.marvel-device.iphone5s .speaker,.marvel-device.iphone5c .speaker{background:#292728;width:64px;height:10px;position:absolute;top:60px;left:50%;margin-left:-32px;border-radius:5px;z-index:3}.marvel-device.iphone5s.landscape,.marvel-device.iphone5c.landscape{padding:22px 105px;height:320px;width:568px}.marvel-device.iphone5s.landscape .sleep,.marvel-device.iphone5c.landscape .sleep{right:-4px;top:calc(100% - 120px);height:60px;width:4px;border-radius:0px 2px 2px 0px}.marvel-device.iphone5s.landscape .volume,.marvel-device.iphone5c.landscape .volume{width:27px;height:4px;top:-4px;left:calc(100% - 180px);border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:before,.marvel-device.iphone5c.landscape .volume:before{width:35px;height:4px;top:0px;right:-75px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:after,.marvel-device.iphone5c.landscape .volume:after{bottom:0px;left:-64px;z-index:999;height:4px;width:27px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .sensor,.marvel-device.iphone5c.landscape .sensor{top:160px;left:calc(100% - 60px);margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .speaker,.marvel-device.iphone5c.landscape .speaker{height:64px;width:10px;left:calc(100% - 60px);top:50%;margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .camera,.marvel-device.iphone5c.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s .home{border-radius:36px;width:68px;-webkit-box-shadow:inset 0 0 0 4px #2c2b2c;box-shadow:inset 0 0 0 4px #2c2b2c;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:19px;z-index:3}.marvel-device.iphone5s .top-bar{top:70px;position:absolute;left:0}.marvel-device.iphone5s .bottom-bar{bottom:70px;position:absolute;left:0}.marvel-device.iphone5s.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5s.landscape .top-bar{left:70px;top:0px;width:3px;height:100%}.marvel-device.iphone5s.landscape .bottom-bar{right:70px;left:auto;bottom:0px;width:3px;height:100%}.marvel-device.iphone5s.silver{background:#bcbcbc}.marvel-device.iphone5s.silver:before{background:#fcfcfc}.marvel-device.iphone5s.silver .volume,.marvel-device.iphone5s.silver .sleep{background:#d6d6d6}.marvel-device.iphone5s.silver .top-bar,.marvel-device.iphone5s.silver .bottom-bar{background:#eaebec}.marvel-device.iphone5s.silver .home{-webkit-box-shadow:inset 0 0 0 4px #bcbcbc;box-shadow:inset 0 0 0 4px #bcbcbc}.marvel-device.iphone5s.gold{background:#f9e7d3}.marvel-device.iphone5s.gold:before{background:#fcfcfc}.marvel-device.iphone5s.gold .volume,.marvel-device.iphone5s.gold .sleep{background:#f9e7d3}.marvel-device.iphone5s.gold .top-bar,.marvel-device.iphone5s.gold .bottom-bar{background:white}.marvel-device.iphone5s.gold .home{-webkit-box-shadow:inset 0 0 0 4px #f9e7d3;box-shadow:inset 0 0 0 4px #f9e7d3}.marvel-device.iphone5c{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.iphone5c .top-bar,.marvel-device.iphone5c .bottom-bar{display:none}.marvel-device.iphone5c .home{background:#242324;border-radius:36px;width:68px;height:68px;z-index:3;position:absolute;left:50%;margin-left:-34px;bottom:19px}.marvel-device.iphone5c .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone5c.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5c .volume,.marvel-device.iphone5c .sleep{background:#dddddd}.marvel-device.iphone5c.red{background:#f96b6c}.marvel-device.iphone5c.red .volume,.marvel-device.iphone5c.red .sleep{background:#ed5758}.marvel-device.iphone5c.yellow{background:#f2dc60}.marvel-device.iphone5c.yellow .volume,.marvel-device.iphone5c.yellow .sleep{background:#e5ce4c}.marvel-device.iphone5c.green{background:#97e563}.marvel-device.iphone5c.green .volume,.marvel-device.iphone5c.green .sleep{background:#85d94d}.marvel-device.iphone5c.blue{background:#33a2db}.marvel-device.iphone5c.blue .volume,.marvel-device.iphone5c.blue .sleep{background:#2694cd}.marvel-device.iphone4s{padding:129px 27px;width:320px;height:480px;background:#686868;border-radius:54px}.marvel-device.iphone4s:before{content:'';width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;z-index:1;border-radius:50px;background:#1e1e1e}.marvel-device.iphone4s .top-bar{top:60px;position:absolute;left:0}.marvel-device.iphone4s .bottom-bar{bottom:90px;position:absolute;left:0}.marvel-device.iphone4s .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:72px;left:134px;z-index:3;margin-left:-5px;border-radius:100%}.marvel-device.iphone4s .speaker{background:#292728;width:64px;height:10px;position:absolute;top:72px;left:50%;z-index:3;margin-left:-32px;border-radius:5px}.marvel-device.iphone4s .sensor{background:#292728;width:40px;height:10px;position:absolute;top:36px;left:50%;z-index:3;margin-left:-20px;border-radius:5px}.marvel-device.iphone4s .home{background:#242324;border-radius:100%;width:72px;height:72px;z-index:3;position:absolute;left:50%;margin-left:-36px;bottom:30px}.marvel-device.iphone4s .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone4s .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0px 0px;background:#4D4D4D}.marvel-device.iphone4s .volume{position:absolute;left:-4px;top:160px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:#4D4D4D}.marvel-device.iphone4s .volume:before{position:absolute;left:0px;top:-70px;height:35px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s.landscape{padding:27px 129px;height:320px;width:480px}.marvel-device.iphone4s.landscape .bottom-bar{left:90px;bottom:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .top-bar{left:calc(100% - 60px);top:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .camera{top:134px;left:calc(100% - 72px);margin-left:0}.marvel-device.iphone4s.landscape .speaker{top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 72px);width:10px;height:64px}.marvel-device.iphone4s.landscape .sensor{height:40px;width:10px;left:calc(100% - 36px);top:50%;margin-left:0;margin-top:-20px}.marvel-device.iphone4s.landscape .home{left:30px;bottom:50%;margin-left:0;margin-bottom:-36px}.marvel-device.iphone4s.landscape .sleep{height:60px;width:4px;right:-4px;top:calc(100% - 120px);border-radius:0px 2px 2px 0px}.marvel-device.iphone4s.landscape .volume{top:-4px;left:calc(100% - 187px);height:4px;width:27px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:before{right:-70px;left:auto;top:0px;width:35px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:after{width:27px;height:4px;bottom:0px;left:-64px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.silver{background:#bcbcbc}.marvel-device.iphone4s.silver:before{background:#fcfcfc}.marvel-device.iphone4s.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.iphone4s.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.iphone4s.silver .volume,.marvel-device.iphone4s.silver .sleep{background:#d6d6d6}.marvel-device.nexus5{padding:50px 15px 50px 15px;width:320px;height:568px;background:#1e1e1e;border-radius:20px}.marvel-device.nexus5:before{border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.1%;width:calc(100% - 26px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .top-bar{width:calc(100% - 8px);height:calc(100% - 6px);position:absolute;top:3px;left:4px;border-radius:20px;background:#181818}.marvel-device.nexus5 .top-bar:before{border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.0%;width:calc(100% - 26px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .bottom-bar{display:none}.marvel-device.nexus5 .sleep{width:3px;position:absolute;left:-3px;top:110px;height:100px;background:inherit;border-radius:2px 0px 0px 2px}.marvel-device.nexus5 .volume{width:3px;position:absolute;right:-3px;top:70px;height:45px;background:inherit;border-radius:0px 2px 2px 0px}.marvel-device.nexus5 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:18px;left:50%;z-index:3;margin-left:-5px;border-radius:100%}.marvel-device.nexus5 .camera:before{background:#3c3d3d;width:6px;height:6px;content:'';display:block;position:absolute;top:2px;left:-100px;z-index:3;border-radius:100%}.marvel-device.nexus5.landscape{padding:15px 50px 15px 50px;height:320px;width:568px}.marvel-device.nexus5.landscape:before{width:103.1%;height:calc(100% - 26px);border-radius:50px / 600px}.marvel-device.nexus5.landscape .top-bar{left:3px;top:4px;height:calc(100% - 8px);width:calc(100% - 6px)}.marvel-device.nexus5.landscape .top-bar:before{width:103%;height:calc(100% - 26px);border-radius:50px / 600px}.marvel-device.nexus5.landscape .sleep{height:3px;width:100px;left:calc(100% - 210px);top:-3px;border-radius:2px 2px 0px 0px}.marvel-device.nexus5.landscape .volume{height:3px;width:45px;right:70px;top:100%;border-radius:0px 0px 2px 2px}.marvel-device.nexus5.landscape .camera{top:50%;left:calc(100% - 18px);margin-left:0;margin-top:-5px}.marvel-device.nexus5.landscape .camera:before{top:-100px;left:2px}.marvel-device.s5{padding:60px 18px;border-radius:42px;width:320px;height:568px;background:#bcbcbc}.marvel-device.s5:before,.marvel-device.s5:after{width:calc(100% - 52px);content:'';display:block;height:26px;background:inherit;position:absolute;border-radius:500px / 40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5:before{top:-7px}.marvel-device.s5:after{bottom:-7px}.marvel-device.s5 .bottom-bar{display:none}.marvel-device.s5 .top-bar{border-radius:37px;width:calc(100% - 10px);height:calc(100% - 10px);top:5px;left:5px;background:radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 3px 3px;background-color:white;background-size:4px 4px;background-position:center;z-index:2;position:absolute}.marvel-device.s5 .top-bar:before,.marvel-device.s5 .top-bar:after{width:calc(100% - 48px);content:'';display:block;height:26px;background:inherit;position:absolute;border-radius:500px / 40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5 .top-bar:before{top:-7px}.marvel-device.s5 .top-bar:after{bottom:-7px}.marvel-device.s5 .sleep{width:3px;position:absolute;left:-3px;top:100px;height:100px;background:#cecece;border-radius:2px 0px 0px 2px}.marvel-device.s5 .speaker{width:68px;height:8px;position:absolute;top:20px;display:block;z-index:3;left:50%;margin-left:-34px;background-color:#bcbcbc;background-position:top left;border-radius:4px}.marvel-device.s5 .sensor{display:block;position:absolute;top:20px;right:110px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .camera{display:block;position:absolute;top:24px;right:42px;background:black;border-radius:100%;width:10px;height:10px;z-index:3}.marvel-device.s5 .camera:before{width:4px;height:4px;background:#3c3d3d;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-2px;margin-left:-2px}.marvel-device.s5 .home{position:absolute;z-index:3;bottom:17px;left:50%;width:70px;height:20px;background:white;border-radius:18px;display:block;margin-left:-35px;border:2px solid black}.marvel-device.s5.landscape{padding:18px 60px;height:320px;width:568px}.marvel-device.s5.landscape:before,.marvel-device.s5.landscape:after{height:calc(100% - 52px);width:26px;border-radius:40px / 500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape:before{top:50%;left:-7px}.marvel-device.s5.landscape:after{top:50%;left:auto;right:-7px}.marvel-device.s5.landscape .top-bar:before,.marvel-device.s5.landscape .top-bar:after{width:26px;height:calc(100% - 48px);border-radius:40px / 500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape .top-bar:before{right:-7px;top:50%;left:auto}.marvel-device.s5.landscape .top-bar:after{left:-7px;top:50%;right:auto}.marvel-device.s5.landscape .sleep{height:3px;width:100px;left:calc(100% - 200px);top:-3px;border-radius:2px 2px 0px 0px}.marvel-device.s5.landscape .speaker{height:68px;width:8px;left:calc(100% - 20px);top:50%;margin-left:0;margin-top:-34px}.marvel-device.s5.landscape .sensor{right:20px;top:calc(100% - 110px)}.marvel-device.s5.landscape .sensor:after{left:-12px;right:0px}.marvel-device.s5.landscape .camera{top:calc(100% - 42px);right:24px}.marvel-device.s5.landscape .home{width:20px;height:70px;bottom:50%;margin-bottom:-35px;margin-left:0;left:17px}.marvel-device.s5.black{background:#1e1e1e}.marvel-device.s5.black .speaker{background:black}.marvel-device.s5.black .sleep{background:#1e1e1e}.marvel-device.s5.black .top-bar{background:radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 3px 3px;background-color:#2c2b2c;background-size:4px 4px}.marvel-device.s5.black .home{background:#2c2b2c}.marvel-device.lumia920{padding:80px 35px 125px 35px;background:#ffdd00;width:320px;height:533px;border-radius:40px / 3px}.marvel-device.lumia920 .bottom-bar{display:none}.marvel-device.lumia920 .top-bar{width:calc(100% - 24px);height:calc(100% - 32px);position:absolute;top:16px;left:12px;border-radius:24px;background:black;z-index:1}.marvel-device.lumia920 .top-bar:before{background:#1e1e1e;display:block;content:'';width:calc(100% - 4px);height:calc(100% - 4px);top:2px;left:2px;position:absolute;border-radius:22px}.marvel-device.lumia920 .volume{width:3px;position:absolute;top:130px;height:100px;background:#1e1e1e;right:-3px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:before{width:3px;position:absolute;top:190px;content:'';display:block;height:50px;background:inherit;right:0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:after{width:3px;position:absolute;top:460px;content:'';display:block;height:50px;background:inherit;right:0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:34px;right:130px;z-index:5;border-radius:5px}.marvel-device.lumia920 .speaker{background:#292728;width:64px;height:10px;position:absolute;top:38px;left:50%;margin-left:-32px;border-radius:5px;z-index:3}.marvel-device.lumia920.landscape{padding:35px 80px 35px 125px;height:320px;width:568px;border-radius:2px / 100px}.marvel-device.lumia920.landscape .top-bar{height:calc(100% - 24px);width:calc(100% - 32px);left:16px;top:12px}.marvel-device.lumia920.landscape .volume{height:3px;right:130px;width:100px;top:100%;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:before{height:3px;right:190px;top:0px;width:50px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:after{height:3px;right:430px;top:0px;width:50px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .camera{right:30px;top:calc(100% - 140px)}.marvel-device.lumia920.landscape .speaker{width:10px;height:64px;top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 48px)}.marvel-device.lumia920.black{background:black}.marvel-device.lumia920.white{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.lumia920.blue{background:#00acdd}.marvel-device.lumia920.red{background:#CC3E32}.marvel-device.htc-one{padding:72px 25px 100px 25px;width:320px;height:568px;background:#bebebe;border-radius:34px}.marvel-device.htc-one:before{content:'';display:block;width:calc(100% - 4px);height:calc(100% - 4px);position:absolute;top:2px;left:2px;background:#adadad;border-radius:32px}.marvel-device.htc-one:after{content:'';display:block;width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;background:#eeeeee;border-radius:30px}.marvel-device.htc-one .top-bar{width:calc(100% - 4px);height:635px;position:absolute;background:#424242;top:50px;z-index:1;left:2px}.marvel-device.htc-one .top-bar:before{content:'';position:absolute;width:calc(100% - 4px);height:100%;position:absolute;background:black;top:0px;z-index:1;left:2px}.marvel-device.htc-one .bottom-bar{display:none}.marvel-device.htc-one .speaker{height:16px;width:216px;display:block;position:absolute;top:22px;z-index:2;left:50%;margin-left:-108px;background:radial-gradient(#343434 25%, transparent 50%) 0 0,radial-gradient(#343434 25%, transparent 50%) 4px 4px;background-size:4px 4px;background-position:top left}.marvel-device.htc-one .speaker:after{content:'';height:16px;width:216px;display:block;position:absolute;top:676px;z-index:2;left:50%;margin-left:-108px;background:inherit}.marvel-device.htc-one .camera{display:block;position:absolute;top:18px;right:38px;background:#3c3d3d;border-radius:100%;width:24px;height:24px;z-index:3}.marvel-device.htc-one .camera:before{width:8px;height:8px;background:black;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-4px;margin-left:-4px}.marvel-device.htc-one .sensor{display:block;position:absolute;top:29px;left:60px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one.landscape{padding:25px 72px 25px 100px;height:320px;width:568px}.marvel-device.htc-one.landscape .top-bar{height:calc(100% - 4px);width:635px;left:calc(100% - 685px);top:2px}.marvel-device.htc-one.landscape .speaker{width:16px;height:216px;left:calc(100% - 38px);top:50%;margin-left:0px;margin-top:-108px}.marvel-device.htc-one.landscape .speaker:after{width:16px;height:216px;left:calc(100% - 692px);top:50%;margin-left:0;margin-top:-108px}.marvel-device.htc-one.landscape .camera{right:18px;top:calc(100% - 38px)}.marvel-device.htc-one.landscape .sensor{left:calc(100% - 29px);top:60px}.marvel-device.htc-one.landscape .sensor :after{right:0;top:-12px}.marvel-device.ipad{width:576px;height:768px;padding:90px 25px;background:#242324;border-radius:44px}.marvel-device.ipad:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;border-radius:40px;background:#1e1e1e}.marvel-device.ipad .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:44px;left:50%;margin-left:-5px;border-radius:100%}.marvel-device.ipad .top-bar,.marvel-device.ipad .bottom-bar{display:none}.marvel-device.ipad .home{background:#242324;border-radius:36px;width:50px;height:50px;position:absolute;left:50%;margin-left:-25px;bottom:22px}.marvel-device.ipad .home:after{width:15px;height:15px;margin-top:-8px;margin-left:-8px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%}.marvel-device.ipad.landscape{height:576px;width:768px;padding:25px 90px}.marvel-device.ipad.landscape .camera{left:calc(100% - 44px);top:50%;margin-left:0;margin-top:-5px}.marvel-device.ipad.landscape .home{top:50%;left:22px;margin-left:0;margin-top:-25px}.marvel-device.ipad.silver{background:#bcbcbc}.marvel-device.ipad.silver:before{background:#fcfcfc}.marvel-device.ipad.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.ipad.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.macbook{width:960px;height:600px;padding:44px 44px 76px;margin:0 auto;background:#bebebe;border-radius:34px}.marvel-device.macbook:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;border-radius:30px;background:#1e1e1e}.marvel-device.macbook .top-bar{width:calc(100% + 2 * 70px);height:40px;position:absolute;content:'';display:block;top:680px;left:-70px;border-bottom-left-radius:90px 18px;border-bottom-right-radius:90px 18px;background:#bebebe;-webkit-box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6);box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6)}.marvel-device.macbook .top-bar:before{width:100%;height:24px;content:'';display:block;top:0;left:0;background:#f0f0f0;border-bottom:2px solid #aaa;border-radius:5px;position:relative}.marvel-device.macbook .top-bar:after{width:16%;height:14px;content:'';display:block;top:0;background:#ddd;position:absolute;margin-left:auto;margin-right:auto;left:0;right:0;border-radius:0 0 20px 20px;-webkit-box-shadow:inset 0px -3px 10px #999;box-shadow:inset 0px -3px 10px #999}.marvel-device.macbook .bottom-bar{background:transparent;width:calc(100% + 2 * 70px);height:26px;position:absolute;content:'';display:block;top:680px;left:-70px}.marvel-device.macbook .bottom-bar:before,.marvel-device.macbook .bottom-bar:after{height:calc(100% - 2px);width:80px;content:'';display:block;top:0;position:absolute}.marvel-device.macbook .bottom-bar:before{left:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#747474), color-stop(5%, #c3c3c3), color-stop(14%, #ebebeb), color-stop(41%, #979797), color-stop(80%, #f0f0f0), color-stop(100%, #f0f0f0), to(#f0f0f0));background:linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%)}.marvel-device.macbook .bottom-bar:after{right:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#f0f0f0), color-stop(0%, #f0f0f0), color-stop(20%, #f0f0f0), color-stop(59%, #979797), color-stop(86%, #ebebeb), color-stop(95%, #c3c3c3), to(#747474));background:linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%)}.marvel-device.macbook .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:20px;left:50%;margin-left:-5px;border-radius:100%}.marvel-device.macbook .home{display:none}.marvel-device.iphone-x{width:375px;height:812px;padding:26px;background:#fdfdfd;-webkit-box-shadow:inset 0 0 11px 0 black;box-shadow:inset 0 0 11px 0 black;border-radius:66px}.marvel-device.iphone-x .overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:66px;overflow:hidden}.marvel-device.iphone-x .shadow{border-radius:100%;width:90px;height:90px;position:absolute;background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 60%)}.marvel-device.iphone-x .shadow--tl{top:-20px;left:-20px}.marvel-device.iphone-x .shadow--tr{top:-20px;right:-20px}.marvel-device.iphone-x .shadow--bl{bottom:-20px;left:-20px}.marvel-device.iphone-x .shadow--br{bottom:-20px;right:-20px}.marvel-device.iphone-x:before{width:calc(100% - 10px);height:calc(100% - 10px);position:absolute;top:5px;content:'';left:5px;border-radius:61px;background:black;z-index:1}.marvel-device.iphone-x .inner-shadow{width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;top:10px;overflow:hidden;left:10px;border-radius:56px;-webkit-box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);z-index:1}.marvel-device.iphone-x .inner-shadow:before{-webkit-box-shadow:inset 0 0 20px 0 #FFFFFF;box-shadow:inset 0 0 20px 0 #FFFFFF;width:100%;height:116%;position:absolute;top:-8%;content:'';left:0;border-radius:200px / 112px;z-index:2}.marvel-device.iphone-x .screen{border-radius:40px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.iphone-x .top-bar,.marvel-device.iphone-x .bottom-bar{width:100%;position:absolute;height:8px;background:rgba(0,0,0,0.1);left:0}.marvel-device.iphone-x .top-bar{top:80px}.marvel-device.iphone-x .bottom-bar{bottom:80px}.marvel-device.iphone-x .volume,.marvel-device.iphone-x .volume:before,.marvel-device.iphone-x .volume:after,.marvel-device.iphone-x .sleep{width:3px;background:#b5b5b5;position:absolute}.marvel-device.iphone-x .volume{left:-3px;top:116px;height:32px}.marvel-device.iphone-x .volume:before{height:62px;top:62px;content:'';left:0}.marvel-device.iphone-x .volume:after{height:62px;top:140px;content:'';left:0}.marvel-device.iphone-x .sleep{height:96px;top:200px;right:-3px}.marvel-device.iphone-x .camera{width:6px;height:6px;top:9px;border-radius:100%;position:absolute;left:154px;background:#0d4d71}.marvel-device.iphone-x .speaker{height:6px;width:60px;left:50%;position:absolute;top:9px;margin-left:-30px;background:#171818;border-radius:6px}.marvel-device.iphone-x .notch{position:absolute;width:210px;height:30px;top:26px;left:108px;z-index:4;background:black;border-bottom-left-radius:24px;border-bottom-right-radius:24px}.marvel-device.iphone-x .notch:before,.marvel-device.iphone-x .notch:after{content:'';height:8px;position:absolute;top:0;width:8px}.marvel-device.iphone-x .notch:after{background:radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);left:-8px}.marvel-device.iphone-x .notch:before{background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);right:-8px}.marvel-device.iphone-x.landscape{height:375px;width:812px}.marvel-device.iphone-x.landscape .top-bar,.marvel-device.iphone-x.landscape .bottom-bar{width:8px;height:100%;top:0}.marvel-device.iphone-x.landscape .top-bar{left:80px}.marvel-device.iphone-x.landscape .bottom-bar{right:80px;bottom:auto;left:auto}.marvel-device.iphone-x.landscape .volume,.marvel-device.iphone-x.landscape .volume:before,.marvel-device.iphone-x.landscape .volume:after,.marvel-device.iphone-x.landscape .sleep{height:3px}.marvel-device.iphone-x.landscape .inner-shadow:before{height:100%;width:116%;left:-8%;top:0;border-radius:112px / 200px}.marvel-device.iphone-x.landscape .volume{bottom:-3px;top:auto;left:116px;width:32px}.marvel-device.iphone-x.landscape .volume:before{width:62px;left:62px;top:0}.marvel-device.iphone-x.landscape .volume:after{width:62px;left:140px;top:0}.marvel-device.iphone-x.landscape .sleep{width:96px;left:200px;top:-3px;right:auto}.marvel-device.iphone-x.landscape .camera{left:9px;bottom:154px;top:auto}.marvel-device.iphone-x.landscape .speaker{width:6px;height:60px;left:9px;top:50%;margin-top:-30px;margin-left:0}.marvel-device.iphone-x.landscape .notch{height:210px;width:30px;left:26px;bottom:108px;top:auto;border-top-right-radius:24px;border-bottom-right-radius:24px;border-bottom-left-radius:0}.marvel-device.iphone-x.landscape .notch:before,.marvel-device.iphone-x.landscape .notch:after{left:0}.marvel-device.iphone-x.landscape .notch:after{background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);bottom:-8px;top:auto}.marvel-device.iphone-x.landscape .notch:before{background:radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%);top:-8px}.marvel-device.note8{width:400px;height:822px;background:black;border-radius:34px;padding:45px 10px}.marvel-device.note8 .overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:34px;overflow:hidden}.marvel-device.note8 .speaker{height:8px;width:56px;left:50%;position:absolute;top:25px;margin-left:-28px;background:#171818;z-index:1;border-radius:8px}.marvel-device.note8 .camera{height:18px;width:18px;left:86px;position:absolute;top:18px;background:#212b36;z-index:1;border-radius:100%}.marvel-device.note8 .camera:before{content:'';height:8px;width:8px;left:-22px;position:absolute;top:5px;background:#212b36;z-index:1;border-radius:100%}.marvel-device.note8 .sensors{height:10px;width:10px;left:120px;position:absolute;top:22px;background:#1d233b;z-index:1;border-radius:100%}.marvel-device.note8 .sensors:before{content:'';height:10px;width:10px;left:18px;position:absolute;top:0;background:#1d233b;z-index:1;border-radius:100%}.marvel-device.note8 .more-sensors{height:16px;width:16px;left:285px;position:absolute;top:18px;background:#33244a;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,0.1);box-shadow:0 0 0 2px rgba(255,255,255,0.1);z-index:1;border-radius:100%}.marvel-device.note8 .more-sensors:before{content:'';height:11px;width:11px;left:40px;position:absolute;top:4px;background:#214a61;z-index:1;border-radius:100%}.marvel-device.note8 .sleep{width:2px;height:56px;background:black;position:absolute;top:288px;right:-2px}.marvel-device.note8 .volume{width:2px;height:120px;background:black;position:absolute;top:168px;left:-2px}.marvel-device.note8 .volume:before{content:'';top:168px;width:2px;position:absolute;left:0;background:black;height:56px}.marvel-device.note8 .inner{width:100%;height:calc(100% - 8px);position:absolute;top:2px;content:'';left:0px;border-radius:34px;border-top:2px solid #9fa0a2;border-bottom:2px solid #9fa0a2;background:black;z-index:1;-webkit-box-shadow:inset 0 0 6px 0 rgba(255,255,255,0.5);box-shadow:inset 0 0 6px 0 rgba(255,255,255,0.5)}.marvel-device.note8 .shadow{-webkit-box-shadow:inset 0 0 60px 0 white,inset 0 0 30px 0 rgba(255,255,255,0.5),0 0 20px 0 white,0 0 20px 0 rgba(255,255,255,0.5);box-shadow:inset 0 0 60px 0 white,inset 0 0 30px 0 rgba(255,255,255,0.5),0 0 20px 0 white,0 0 20px 0 rgba(255,255,255,0.5);height:101%;position:absolute;top:-0.5%;content:'';width:calc(100% - 20px);left:10px;border-radius:38px;z-index:5;pointer-events:none}.marvel-device.note8 .screen{border-radius:14px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.note8.landscape{height:400px;width:822px;padding:10px 45px}.marvel-device.note8.landscape .speaker{height:56px;width:8px;top:50%;margin-top:-28px;margin-left:0;right:25px;left:auto}.marvel-device.note8.landscape .camera{top:86px;right:18px;left:auto}.marvel-device.note8.landscape .camera:before{top:-22px;left:5px}.marvel-device.note8.landscape .sensors{top:120px;right:22px;left:auto}.marvel-device.note8.landscape .sensors:before{top:18px;left:0}.marvel-device.note8.landscape .more-sensors{top:285px;right:18px;left:auto}.marvel-device.note8.landscape .more-sensors:before{top:40px;left:4px}.marvel-device.note8.landscape .sleep{bottom:-2px;top:auto;right:288px;width:56px;height:2px}.marvel-device.note8.landscape .volume{width:120px;height:2px;top:-2px;right:168px;left:auto}.marvel-device.note8.landscape .volume:before{right:168px;left:auto;top:0;width:56px;height:2px}.marvel-device.note8.landscape .inner{height:100%;width:calc(100% - 8px);left:2px;top:0;border-top:0;border-bottom:0;border-left:2px solid #9fa0a2;border-right:2px solid #9fa0a2}.marvel-device.note8.landscape .shadow{width:101%;height:calc(100% - 20px);left:-0.5%;top:10px} \ No newline at end of file +} \ No newline at end of file diff --git a/server/views/challenges/showHTML.jade b/server/views/challenges/showHTML.jade index df2ace3db..d8f99ac44 100644 --- a/server/views/challenges/showHTML.jade +++ b/server/views/challenges/showHTML.jade @@ -6,7 +6,7 @@ block content link(rel='stylesheet', href='/css/ubuntu.css') link(rel='stylesheet', href=rev('/css', 'better.css')) .row - .col-md-3.col-lg-3 + .col-md-3.col-lg-3#document div#controls.box.vertical.flex1.visBackgroundColor div#commandLineHistory.box.vertical.flex3 div.toolbar.box.vertical.center @@ -52,7 +52,7 @@ block content .button-spacer #testSuite br - .col-md-5.col-lg-6 + .col-md-5.col-lg-6#editor div.canvasTerminalHolder.box.flex1 div.terminal-window-holder.box.flex10.vertical.transitionTransform.slideOut.ui-draggable div.wrapper.box.vertical @@ -68,12 +68,12 @@ block content i.icon-cog 编辑器 div.terminal-text - div(style = "overflow-y: auto; overflow-x: hidden;") + div(style = "overflow-y: auto; overflow-x: hidden;height:75vh;") #mainEditorPanel form.code .codeMirrorView textarea#codeEditor(autofocus=true, style='display: none;') - .col-md-4.col-lg-3 + .col-md-4.col-lg-3#browser div.marvel-device.iphone-x div.notch div.camera @@ -107,6 +107,11 @@ block content else a#next-challenge.btn.btn-lg.btn-primary.btn-block(href="/challenges/next-challenge?id="+id) 前进 (ctrl + enter) include ../partials/challenge-modals + + .btn-group.input-group.btn-group-justified.hide.tabs-mobile(style="position: fixed;bottom: 0;z-index: 9999;background: white;left: 0;border-radius:7px;") + label.btn.btn-primary.btn-primary-ghost.btn-lg(onclick="$('#document').hide();$('#browser').hide();$('#editor').hide();$('#document').show();") 文档 + label.btn.btn-primary.btn-primary-ghost.btn-lg(onclick="$('#document').hide();$('#browser').hide();$('#editor').hide();$('#editor').show();") 编辑器 + label.btn.btn-primary.btn-primary-ghost.btn-lg(onclick="$('#document').hide();$('#browser').hide();$('#editor').hide();$('#browser').show();") 浏览器 script(type="text/javascript"). $('#next-courseware-button').attr('disabled', 'disabled'); var common = window.common || { init: [] }; From 1abcd7f5bb78d17077a71da5990bb35cf3396069 Mon Sep 17 00:00:00 2001 From: Chenzc Date: Tue, 15 May 2018 18:02:12 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/better.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/public/css/better.css b/public/css/better.css index 5bb930fac..c1ddfdde4 100644 --- a/public/css/better.css +++ b/public/css/better.css @@ -1266,6 +1266,7 @@ footer { position: absolute; top: 0; right: 0; + margin-top: 45px; overflow-y: scroll; border-radius: calc(var(--times)/100*40px); } @@ -1568,4 +1569,9 @@ footer { padding-left: 8px; margin-right: 15px; +} + +.scroll-locker { + width: 100%; + max-height: 70vh; } \ No newline at end of file From 0260e0c3661ee265277c16f4838baff41299934f Mon Sep 17 00:00:00 2001 From: Chenzc Date: Fri, 25 May 2018 15:38:24 +0800 Subject: [PATCH 4/5] change c9.io to codeanywhere MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit c9.io 变化较大，完成课程难度较高 使用多家后选择codeanywhere --- public/css/better.css | 4 +- .../intermediate-ziplines.json | 7 +- .../api-projects.json | 66 +++++++++---------- .../git.json | 16 ++--- .../mongodb.json | 18 ++--- .../nodejs-and-expressjs.json | 56 ++++++++-------- 6 files changed, 80 insertions(+), 87 deletions(-) diff --git a/public/css/better.css b/public/css/better.css index c1ddfdde4..8633b71f5 100644 --- a/public/css/better.css +++ b/public/css/better.css @@ -1266,7 +1266,7 @@ footer { position: absolute; top: 0; right: 0; - margin-top: 45px; + padding-top: 45px; overflow-y: scroll; border-radius: calc(var(--times)/100*40px); } @@ -1573,5 +1573,5 @@ footer { .scroll-locker { width: 100%; - max-height: 70vh; + max-height: 75vh; } \ No newline at end of file diff --git a/seed/challenges/01-front-end-development-certification/intermediate-ziplines.json b/seed/challenges/01-front-end-development-certification/intermediate-ziplines.json index 83fa58192..c1d4ad1a5 100644 --- a/seed/challenges/01-front-end-development-certification/intermediate-ziplines.json +++ b/seed/challenges/01-front-end-development-certification/intermediate-ziplines.json @@ -33,7 +33,7 @@ "description": [ "当你看不到右边的视频时，说明你还身处防火墙中，赶紧翻墙去体验自由无阻碍的互联网。", "如果你还不明白翻墙对个人成长的重要性，请去看电影《肖申克的救赎》。", - "目标: 设计一个功能类似于: https://codepen.io/S1ngS1ng/full/WORqxP的应用。", + "目标: 设计一个功能类似于: https://codepen.io/chenzc/full/YYyRya的应用。", "规则#1: 代码是开源的，你可以借鉴，但请不要抄袭。", "规则#2: 用你喜爱的任何库来定制属于你自己的风格，实现下面的功能。", "实现路径: 页面结构->样式->功能->接口->展示。", @@ -94,9 +94,10 @@ "功能: 我可以点击链接跳到 FreeCodeCamp 在Twitch.tv上的频道。", "功能: 如果有人在直播，我可以看到他正在直播什么。", "功能: 如果直播者关闭了他的账户，我会看到一个404提示页面。", - "提示: 这有一个如何调用 Twitch.tv的JSONP API的示例：https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Front-End-Project-Use-the-Twitchtv-JSON-API.", - "提示: 这个文档有更多关于如何调用这个API的细节：https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel.", + "提示: 这有一个如何调用 Twitch.tv的JSONP API的示例：http://forum.freecodecamp.org/t/use-the-twitchtv-json-api/19541.", + "提示: 这个文档有更多关于如何调用这个API的细节：https://dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user.", "提示: 这有一个Twitch.tv 用户名数组，里面包含有通常正在直播写代码的人： [\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]", + "更新: 由于Twitch API 变更,Twitch.tv 现在需要API key才能调用，不过别担心，这里有一个解决方案，使用https://wind-bow.glitch.me/twitch-api来代替twitch 的官方API（https://api.twitch.tv/kraken），这样的话你就不需要为了key 而注册账号了。", "当你遇到困难的时候，记得查看错误提示、阅读文档、搜索、提问。", "当你完成了这个项目，请点击 \"我已经完成了这个挑战\" 按钮，输入你的项目在CodePen上的链接。", "你可以分享这个项目给JackJin或聊天室来获得反馈。" diff --git a/seed/challenges/03-back-end-development-certification/api-projects.json b/seed/challenges/03-back-end-development-certification/api-projects.json index 68d469a81..e13db9dc0 100644 --- a/seed/challenges/03-back-end-development-certification/api-projects.json +++ b/seed/challenges/03-back-end-development-certification/api-projects.json @@ -9,87 +9,81 @@ "title": "Get Set for our Back End Development Projects", "description": [ [ - "//i.imgur.com/4IZjWZ3.gif", - "A gif showing how to create a c9.io account.", - "为了方便你完成接下来的挑战项目，这里推荐一个基于浏览器的在线开发环境 c9.io 。使用在线开发环境，你就不必在自己电脑上安装 Node.js 和 MongoDB 了，这样可以为你节省大把的时间来做练习。
打开 c9.io 主页后，点击右上角的 Github 图标，通过关联你的 Github 帐号来创建一个 c9.io 帐号。注意，最后一步需要填写你的邮箱地址。（整个过程可以参考上边的演示录像）。", - "http://c9.io" + "//i.imgur.com/YGWavs1.gif", + "A gif showing how to create a Codeanywhere account.", + "为了方便你完成接下来的挑战项目，这里推荐一个基于浏览器的在线开发环境 Codeanywhere 。使用在线开发环境，你就不必在自己电脑上安装 Node.js 和 MongoDB 了，这样可以为你节省大把的时间来做练习。
打开 Codeanywhere 主页后，点击右上角的 Sign up , 在打开的页面中点击GitHub 图标，通过关联你的 Github 帐号来创建一个 Codeanywhere 帐号。注意，你需要登录你的邮箱激活账号。", + "https://codeanywhere.com" ], [ - "//i.imgur.com/F7i5Hhi.gif", + "//i.imgur.com/xkKcCZe.gif", "A gif showing how to fill out the new workspace form", - "你没有必要自己造轮子去完成接下来的挑战，这里推荐使用集成了 MongoDB，Express 和 Node.js 的轻量级 JavaScript 全栈框架 Clementine.js 。如果有兴趣，请参考 Clementine.js 的完整教程一步一步构建自己的应用开发环境，这里我们只需要克隆它的源码到 c9.io 的开发环境就好了。
登录 c9.io 后，你需要创建一个新的 Workspace，模板选择 blank 即可，克隆地址填： https://github.com/johnstonbl01/clementinejs-fcc.git ， 最后点击屏幕下方的 \"Create workspace\" 按钮，完成创建开发环境。（整个过程可以参考上边的演示录像）。", + "你没有必要自己造轮子去完成接下来的挑战，这里推荐使用集成了 MongoDB，Express 和 Node.js 的轻量级 JavaScript 全栈框架 Clementine.js 。如果有兴趣，请参考 Clementine.js 的完整教程一步一步构建自己的应用开发环境，这里我们只需要克隆它的源码到 Codeanywhere 的开发环境就好了。
登录 Codeanywhere 后，你需要创建一个新的Connection，点击File，选择New Connection，Name 里输入项目名称，如fcc，在下面的选项里滚动找到MEAN(选中最后面为Ubuntu 14.04 的那个)，点击CREATE，稍等系统初始化, 完成创建开发环境。", "" ], [ - "//i.imgur.com/42m1vyr.gif", - "A gif showing you how to show hidden files.", - "创建完毕后自动进入新建的 Workspace ，点击左侧导航栏右上角的齿轮图标，选择显示隐藏文件（\"show hidden files\"）。（整个过程可以参考上边的演示录像）。", + "//i.imgur.com/GRIXwQY.gif", + "A gif showing how to clone git repository", + "在 SSH Terminal 标签里输入 git clone https://github.com/johnstonbl01/clementinejs-fcc.git。（整个过程可以参考上边的演示录像）", "" ], [ - "//i.imgur.com/qrE8xaK.gif", - "A gif showing you how to create a new file.", - "然后，在左侧导航栏的空白处点击鼠标右键，新建一个文件 .env。（整个过程可以参考上边的演示录像）。", + "//i.imgur.com/sBmkmlP.gif", + "A gif showing you how to refresh and create a new file.", + "在左侧导航栏的空白处点击鼠标右键，选择刷新（\"Refresh\"）。然后，在左侧导航栏 clementinejs-fcc 文件夹处点击鼠标右键，选择创建文件（\"Create File\"），弹出的对话框中输入.env, 新建一个文件 .env。（整个过程可以参考上边的演示录像）。", "" ], [ - "//i.imgur.com/jkQX9SQ.gif", + "//i.imgur.com/iZv1NDu.gif", "A gif showing you how to prep your environmental variables in your .env file.", "打开刚刚新建的 .env 文件，把下边的代码粘帖进去，并保存：
GITHUB_KEY=
GITHUB_SECRET=
MONGO_URI=mongodb://localhost:27017/clementinejs
PORT=8080
APP_URL=http://localhost:8080/ 。（整个过程可以参考上边的演示录像）。", "" ], [ - "//i.imgur.com/f3DE7zB.gif", - "A gif showing you how to open c9.io's preview window.", - "点击标题栏上菜单 windows ， 在下拉菜单中选择 share， 之后在弹出的窗口中点击 Application 右边的链接， 在弹出选项中选择 open 。此时会打开一个新的页面，注意这个页面就是你在 c9.io 中新建的 App 的主页，复制这个 App 的主页地址，下一步骤会用到。（整个过程可以参考上边的演示录像）。", + "//i.imgur.com/tOA7cUP.gif", + "A gif showing you how to open Codeanywhere preview window.", + "右击你的项目， 在下拉菜单中选择 info，之后在打开的标签中，点击最后一行的链接。此时会打开一个新的页面，将地址中的 port-xx 改为 port-8080，注意这个页面就是你在 Codeanywhere 中新建的 App 的主页，复制这个 App 的主页地址，下一步骤会用到。（整个过程可以参考上边的演示录像）。", "" ], [ - "//i.imgur.com/Ip0qUdQ.gif", - "A gif showing you how to create a GitHub app using c9.io's preview URL.", - "登录 Github ，进入你的 Profile 页面，在左侧列表中选择 OAuth applications ，之后在右边选择 Developer application 来创建一个鉴权 App 。 Application name 可以自己取， Homepage URL 填入上一步创建的 App 的主页地址。 Authorization callback URL 也填入相同的地址，并在后边加上相对路径：auth/github/callback。最后点击最下边的注册应用（Register Application）。（整个过程可以参考上边的演示录像）。", + "//i.imgur.com/F03QUPZ.gif", + "A gif showing you how to create a GitHub app using Codeanywhere's preview URL.", + "登录 Github ，进入你的 Settings 页面，在左侧列表中选择 Developer settings ，之后在右边选择 Register a new application 来创建一个鉴权 App 。 Application name 可以自己取， Homepage URL 填入上一步创建的 App 的主页地址。 Authorization callback URL 也填入相同的地址，并在后边加上相对路径：auth/github/callback。最后点击最下边的注册应用（Register Application）。（整个过程可以参考上边的演示录像）。", "https://github.com/settings/applications/new" ], [ - "//i.imgur.com/qCUVRFb.gif", - "A gif showing you how to transfer GitHub's key and secret over to your .env file, as well as your c9.io URL.", - "在 Github 上的鉴权 App 已经创建完成，此时会显示 Client ID 和 Client Secret 。把 Client ID 和 Client Secret 分别赋给 .env 文件中的 GITHUB_KEY 和 GITHUB_SECRET。并把上文提到的 APP 地址赋给 APP_URL 。（整个过程可以参考上边的演示录像）。", + "//i.imgur.com/M3WyryU.gif", + "A gif showing you how to transfer GitHub's key and secret over to your .env file, as well as your Codeanywhere URL.", + "在 Github 上的鉴权 App 已经创建完成，此时会显示 Client ID 和 Client Secret 。把 Client ID 和 Client Secret 分别赋给 .env 文件中的 GITHUB_KEY 和 GITHUB_SECRET。并把上文提到的 APP 地址赋给 APP_URL，保存。（整个过程可以参考上边的演示录像）。", "" ], [ - "//i.imgur.com/2a20Vah.gif", - "A gif showing you how to start mongoDB in c9.io's terminal.", - "在 c9.io 的命令行终端中输入以下命令以启动 mongoDB：mongod --smallfiles。", + "//i.imgur.com/nJyuz70.gif", + "A gif showing you how to go to a directory in Codeanywhere's terminal.", + "右击你的项目， 在下拉菜单中选择 SSH Terminal，在 SSH Terminal 标签里输入 cd clementinejs-fcc 进入项目目录，输入以下命令安装依赖包： npm install 。（整个过程可以参考上边的演示录像）", "" ], [ - "//i.imgur.com/dC55pWk.gif", - "A gif showing you how to open a new tab in c9.io's terminal.", - "新建一个命令行窗口，输入以下命令安装依赖包： npm install 。", - "" - ], - [ - "//i.imgur.com/54OC2Ro.gif", + "//i.imgur.com/8RtA0T2.gif", "A gif showing you how to navigate to your preview tab and sign in to your new Clementine.js app.", "依赖包安装完毕，在命令行窗口中启动应用：node server.js　。回到前面打开的 App 主页并刷新，你应该可以看到　Clementine.js 的 logo，点击 \"sign in\" 并确认 Github 的鉴权请求。", "" ], [ - "//i.imgur.com/2IJfyvN.gif", + "//i.imgur.com/vTCInyu.gif", "A gif showing you how to click the button to trigger an AJAX action with Clementine.js and how to look at your user profile from the GitHub authentication data.", "点击按钮 \"click me\" ，你应该可以看到点击数在增加。点击上边的 Profile 链接，可以看到从 Github 同步过来的个人信息。", "" ], [ - "//i.imgur.com/bjO5pnq.gif", + "//i.imgur.com/laIiJWA.gif", "A gif showing you how to create a new GitHub repository and push your code up to it.", - "在 Github 上创建一个新的仓库，然后拷贝仓库的 .git 地址。
在 c9.io 的命令行窗口中，用刚刚新建的 Github 仓库地址设置 Remote URL : git remote set-url origin 。
然后，就可以把代码推到 Github 上去了： git push origin master。
完成后，在 Github 上就可以看到刚才推上去的代码了。（整个过程可以参考上边的演示录像）。", + "在 Github 上创建一个新的仓库，然后拷贝仓库的 .git 地址。
在 Codeanywhere 的命令行窗口中，用刚刚新建的 Github 仓库地址设置 Remote URL : git remote set-url origin 。
然后，就可以把代码推到 Github 上去了： git push origin master。
完成后，在 Github 上就可以看到刚才推上去的代码了。（整个过程可以参考上边的演示录像）。", "https://github.com/new" ], [ "//i.imgur.com/Qn0K65B.gif", "A gif showing you how to add add-ons to Heroku.", - "现在，你已经掌握如何在 c9.io 上开发部署 App 。后续我们将会进一步介绍在 Heroku 上部署 Clementine 的步骤（后续几个挑战都需要把完成的 App 部署到 Heroku 上，所以，请根据 Heroku 的文档自己练习一下如何部署 App 到 Heroku ）。", + "现在，你已经掌握如何在 Codeanywhere 上开发部署 App 。后续我们将会进一步介绍在 Heroku 上部署 Clementine 的步骤（后续几个挑战都需要把完成的 App 部署到 Heroku 上，所以，请根据 Heroku 的文档自己练习一下如何部署 App 到 Heroku ）。", "" ] ], diff --git a/seed/challenges/03-back-end-development-certification/git.json b/seed/challenges/03-back-end-development-certification/git.json index 8cdc55eb9..ab4721fac 100644 --- a/seed/challenges/03-back-end-development-certification/git.json +++ b/seed/challenges/03-back-end-development-certification/git.json @@ -8,14 +8,14 @@ "id": "bd7353d8c341eddeaeb5bd0f", "title": "Save your Code Revisions Forever with Git", "description": [ - "我们将在 Cloud 9 中完成这个挑战，Cloud 9 是一个非常强大的在线代码编辑器，它包含了一个完整的 Ubuntu 环境，所有的一切都是运行在云端。", - "如果你还没有 Cloud 9 的账号，可以点击链接http://c9.io注册。", - "打开http://c9.io并登入你的账号。", - "点击 c9 页面右上角的“+”号创建一个新的工作空间。", - "为你的工作空间设置一个名称。", - "在下面的图形选择区域选择 Node.js 模板。", - "点击“Create workspace”按钮，完成工作空间的创建。", - "进入刚刚创建的工作空间，在页面的下方你会看到有一个 bash 命令窗口。在这个小窗口里面输入下面的命令，你现在没有必要去了解这个命令的含义。", + "我们将在 Codeanywhere 中完成这个挑战，Codeanywhere 是一个非常强大的在线代码编辑器，它包含了一个完整的 Ubuntu 环境，所有的一切都是运行在云端。", + "如果你还没有 Codeanywhere 的账号，可以点击链接https://codeanywhere.com注册。", + "打开https://codeanywhere.com并登入你的账号。注意，你需要登录你的邮箱激活账号。", + "点击菜单栏的Editor 按钮，进入编辑器", + "在连接向导的Name 里输入项目名称，如freecodecamp", + "在下面的选项里滚动找到MEAN(选中最后面为Ubuntu 14.04 的那个)，点击CREATE，稍等系统初始化", + "初始化完成后关闭提示框，点击第一个标签，进入终端命令窗口", + "在终端命令窗口里面输入下面的命令，你现在没有必要去了解这个命令的含义。", "在命令窗口中输入npm install -g git-it安装git-it", "现在在命令窗口中输入git-it开始我们的教程。", "你可以通过拖动命令窗口的边框来调整窗口的大小。", diff --git a/seed/challenges/03-back-end-development-certification/mongodb.json b/seed/challenges/03-back-end-development-certification/mongodb.json index 7b53ff299..517763c7c 100644 --- a/seed/challenges/03-back-end-development-certification/mongodb.json +++ b/seed/challenges/03-back-end-development-certification/mongodb.json @@ -8,15 +8,15 @@ "id": "bd7243d8c341eddeaeb5bd0f", "title": "Store Data in MongoDB", "description": [ - "--译者注：如果访问 c9.io 网站比较慢，在自己电脑上安装 learnyoumongo 也可以完成这个挑战。", - "在这一节，我们将使用 Cloud 9 提供的在线开发环境, 该开发环境是一个基于 Ubuntu 14.04 的虚拟云主机。", - "如果你还没有 Cloud 9 账号，请在这个页面注册： http://c9.io 。--译者注：可以选择用 Github 账号登陆。", - "注册完成后，打开 http://c9.io 并登陆你的账号。", - "登陆后，点击屏幕右上角的 \"+\" 图标，创建一个新的开发环境（Workspace）。", - "命名你的开发环境（Workspace name），命名必须是小写、数字、下划线或者短横线，不能用大写，开发环境的描述信息（Description）可以不填。", - "在屏幕下方提供的模板中选择 Node.js 来创建你的开发环境。", - "点击屏幕下方的 \"Create workspace\" 按钮，完成创建开发环境。", - "稍等一会儿，等待 C9 完成创建并加载你的开发环境，之后你应该可以进入你刚刚创建的开发环境，并在屏幕下方会看到一个命令行终端窗口（terminal window）。以下步骤的操作都将在这个命令行终端窗口中完成。", + "--译者注：如果访问 Codeanywhere 网站比较慢，在自己电脑上安装 learnyoumongo 也可以完成这个挑战。", + "我们将在 Codeanywhere 中完成这个挑战，Codeanywhere 是一个非常强大的在线代码编辑器，它包含了一个完整的 Ubuntu 环境，所有的一切都是运行在云端。", + "如果你还没有 Codeanywhere 的账号，可以点击链接https://codeanywhere.com注册。", + "打开https://codeanywhere.com并登入你的账号。注意，你需要登录你的邮箱激活账号。", + "点击菜单栏的Editor 按钮，进入编辑器", + "在连接向导的Name 里输入项目名称，如freecodecamp", + "在下面的选项里滚动找到MEAN(选中最后面为Ubuntu 14.04 的那个)，点击CREATE，稍等系统初始化", + "初始化完成后关闭提示框，点击第一个标签，进入终端命令窗口", + "在终端命令窗口里面输入下面的命令，你现在没有必要去了解这个命令的含义。", "安装 learnyoumongo : npm install learnyoumongo -g。", "在终端中输入 learnyoumongo 开始你的挑战。", "请务必注意：在执行命令 mongod 时，请务必带上 --nojournal 参数，例如： mongod --nojournal 。", diff --git a/seed/challenges/03-back-end-development-certification/nodejs-and-expressjs.json b/seed/challenges/03-back-end-development-certification/nodejs-and-expressjs.json index 66f4a74a9..5d099f7ea 100644 --- a/seed/challenges/03-back-end-development-certification/nodejs-and-expressjs.json +++ b/seed/challenges/03-back-end-development-certification/nodejs-and-expressjs.json @@ -8,17 +8,16 @@ "id": "bd7153d8c441eddfaeb5bd0f", "title": "Manage Packages with NPM", "description": [ - "我们将在 Cloud 9 中完成这个挑战，Cloud 9 是一个非常强大的在线代码编辑器，它包含了一个完整的 Ubuntu 环境，所有的一切都是运行在云端。", - "如果你还没有 Cloud 9 的账号，可以点击链接http://c9.io注册。", - "打开http://c9.io并登入你的账号。", - "点击 c9 页面右上角的“+”号创建一个新的工作空间。", - "为你的工作空间设置一个名称。", - "在下面的图形选择区域选择 Node.js 模板。", - "点击“Create workspace”按钮，完成工作空间的创建。", - "进入刚刚创建的工作空间，在页面的下方你会看到有一个 bash 命令窗口。在这个小窗口里面输入下面的命令，你现在没有必要去了解这个命令的含义。", + "我们将在 Codeanywhere 中完成这个挑战，Codeanywhere 是一个非常强大的在线代码编辑器，它包含了一个完整的 Ubuntu 环境，所有的一切都是运行在云端。", + "如果你还没有 Codeanywhere 的账号，可以点击链接https://codeanywhere.com注册。", + "打开https://codeanywhere.com并登入你的账号。注意，你需要登录你的邮箱激活账号。", + "点击菜单栏的Editor 按钮，进入编辑器", + "在连接向导的Name 里输入项目名称，如freecodecamp", + "在下面的选项里滚动找到MEAN(选中最后面为Ubuntu 14.04 的那个)，点击CREATE，稍等系统初始化", + "初始化完成后关闭提示框，点击第一个标签，进入终端命令窗口", + "在终端命令窗口里面输入下面的命令，你现在没有必要去了解这个命令的含义。", "在命令窗口中输入npm install -g how-to-npm安装how-to-npm", "现在在命令窗口中输入how-to-npm开始我们的教程。", - "你可以通过拖动命令窗口的边框来调整窗口的大小。", "确认你现在的工作目录是在“workspace”下面，你可以通过使用命令cd ~/workspace回到工作目录中。", "需要注意的是你只能添加dist标签在第8步到第10步中发布的具体版本号。如果你收到了403或404错误，运行 how-to-npm 然后再试一次。", "另外，如果你遇到一个错误，而且你认为你理解这个错误，你可以通过在命令窗口中输入how-to-npm verify skip跳过这一步。", @@ -47,17 +46,16 @@ "id": "bd7153d8c441eddfaeb5bdff", "title": "Start a Node.js Server", "description": [ - "我们将在 Cloud 9 中完成这个挑战，Cloud 9 是一个非常强大的在线代码编辑器，它包含了一个完整的 Ubuntu 环境，所有的一切都是运行在云端。我们将会做 Node School 的 LearnYouNode 挑战的前 7 步。", - "如果你还没有 Cloud 9 的账号，可以点击链接http://c9.io注册。", - "打开http://c9.io并登入你的账号。", - "点击 c9 页面右上角的“+”号创建一个新的工作空间。", - "为你的工作空间设置一个名称和可选的描述。", - "在下面的图形选择区域选择 Node.js 模板。", - "点击“Create workspace”按钮，完成工作空间的创建。", - "进入刚刚创建的工作空间，在页面的下方你会看到有一个 bash 命令窗口。在这个小窗口里面输入下面的命令，你现在没有必要去了解这个命令的含义。", - "运行命令 sudo npm install -g learnyounode", + "我们将在 Codeanywhere 中完成这个挑战，Codeanywhere 是一个非常强大的在线代码编辑器，它包含了一个完整的 Ubuntu 环境，所有的一切都是运行在云端。", + "如果你还没有 Codeanywhere 的账号，可以点击链接https://codeanywhere.com注册。", + "打开https://codeanywhere.com并登入你的账号。注意，你需要登录你的邮箱激活账号。", + "点击菜单栏的Editor 按钮，进入编辑器", + "在连接向导的Name 里输入项目名称，如freecodecamp", + "在下面的选项里滚动找到MEAN(选中最后面为Ubuntu 14.04 的那个)，点击CREATE，稍等系统初始化", + "初始化完成后关闭提示框，点击第一个标签，进入终端命令窗口", + "在终端命令窗口里面输入下面的命令，你现在没有必要去了解这个命令的含义。", + "运行命令 npm install -g learnyounode", "现在在命令窗口中输入learnyounode开始我们的教程。", - "你可以通过拖动命令窗口的边框来调整窗口的大小。", "确认你现在的工作目录是在“workspace”下面，你可以通过使用命令cd ~/workspace回到工作目录中。", "你可以到 GitHub 上面查看本节的源码 https://github.com/workshopper/learnyounode", "完成 \"Hello World\"", @@ -82,7 +80,7 @@ "description": [ "我们继续 LearnYouNode 的挑战。这一次我们进行第 8 步到第 10 步。", "确认你现在的工作目录是在“workspace”下面，你可以通过使用命令cd ~/workspace回到工作目录中。", - "回到你在 c9.io 上创建的工作空间，运行 learnyounode 开始我们的教程。", + "回到你在 Codeanywhere 上创建的工作空间，运行 learnyounode 开始我们的教程。", "你可以在 GitHub 上找到这节课程的源码 https://github.com/workshopper/learnyounode", "完成 \"HTTP Collect\"", "完成 \"Juggling Async\"", @@ -102,7 +100,7 @@ "description": [ "我们继续 LearnYouNode 挑战的第 11 到第 13 步。", "确认你现在的工作目录是在“workspace”下面，你可以通过使用命令cd ~/workspace回到工作目录中。", - "回到你在 c9.io 上创建的工作空间，运行 learnyounode 开始我们的教程。", + "回到你在 Codeanywhere 上创建的工作空间，运行 learnyounode 开始我们的教程。", "你可以在 GitHub 上找到这节课程的源码 https://github.com/workshopper/learnyounode", "完成 \"HTTP File Server\"", "完成 \"HTTP Uppercaserer\"", @@ -120,14 +118,14 @@ "id": "bd7153d8c441eddfaeb5bd1f", "title": "Build Web Apps with Express.js", "description": [ - "我们将在 Cloud 9 中完成这个挑战，Cloud 9 是一个非常强大的在线代码编辑器，它包含了一个完整的 Ubuntu 环境，所有的一切都是运行在云端。", - "如果你还没有 Cloud 9 的账号，可以点击链接http://c9.io注册。", - "打开http://c9.io并登入你的账号。", - "点击 c9 页面右上角的“+”号创建一个新的工作空间。", - "为你的工作空间设置一个名称和可选的描述。", - "在下面的图形选择区域选择 Node.js 模板。", - "点击“Create workspace”按钮，完成工作空间的创建。", - "进入刚刚创建的工作空间，在页面的下方你会看到有一个 bash 命令窗口。在这个小窗口里面输入下面的命令，你现在没有必要去了解这个命令的含义。", + "我们将在 Codeanywhere 中完成这个挑战，Codeanywhere 是一个非常强大的在线代码编辑器，它包含了一个完整的 Ubuntu 环境，所有的一切都是运行在云端。", + "如果你还没有 Codeanywhere 的账号，可以点击链接https://codeanywhere.com注册。", + "打开https://codeanywhere.com并登入你的账号。注意，你需要登录你的邮箱激活账号。", + "点击菜单栏的Editor 按钮，进入编辑器", + "在连接向导的Name 里输入项目名称，如freecodecamp", + "在下面的选项里滚动找到MEAN(选中最后面为Ubuntu 14.04 的那个)，点击CREATE，稍等系统初始化", + "初始化完成后关闭提示框，点击第一个标签，进入终端命令窗口", + "在终端命令窗口里面输入下面的命令，你现在没有必要去了解这个命令的含义。", "运行命令 git clone https://github.com/FreeCodeCamp/fcc-expressworks.git && chmod 744 fcc-expressworks/setup.sh && fcc-expressworks/setup.sh && source ~/.profile", "执行命令 expressworks 以开始我们的教程。", "你可以通过拖动命令窗口的边框来调整窗口的大小。", From e0f352429c44770df55f74bcd9a760ac3c850e37 Mon Sep 17 00:00:00 2001 From: Chenzc Date: Fri, 25 May 2018 15:42:49 +0800 Subject: [PATCH 5/5] change log MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fork 计划及已完成功能说明 --- CHANGELOG.md | 12 ++++++++++++ README.md | 16 ---------------- 2 files changed, 12 insertions(+), 16 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 000000000..2ee509da4 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,12 @@ +# Fork 说明 + +Better freecodecamp 打造更好的FCC + +- ~~样式优化~~ +- ~~解决有些demo 不可用的问题（天气）~~ +- ~~解决有些题目失效无法解答的问题（twitch）~~ +- ~~解决有些工具无法使用的问题（c9.io）~~ +- 增加学做教功能，项目必须由已经完成项目的学员审批后方可算完成 +- 增加完善项目功能，学员可自行修复bug，并提交总库 +- 增加排名功能 +- 增加组队功能 diff --git a/README.md b/README.md index e37bd0156..245bd0e18 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,3 @@ -# Fork 说明 - -Better freecodecamp 打造更好的FCC - -- ~~样式优化~~ -- 解决有些demo 不可用的问题 -- 解决有些题目失效无法解答的问题 -- 解决有些工具无法使用的问题 -- 增加学做教功能，项目必须由已经完成项目的学员审批后方可算完成 -- 增加完善项目功能，学员可自行修复bug，并提交总库 -- 增加排名功能 -- 增加组队功能 - - - ![](https://s3.amazonaws.com/freecodecamp/wide-social-banner.png) @@ -81,4 +66,3 @@ The content of this repository bound by the following LICENSE(S) - The computer software is licensed under the [BSD-3-Clause](./LICENSE.md). - The curricular content as in the `./seed/challenges` or subdirectories and our wiki are licensed under the [CC-BY-SA-4.0](./LICENSE-freeCodeCamp-Curriculum.md) - The translation of this website follows the license of [CC-BY-NC-4.0](./LICENSE-freeCodeCamp-Translation.md)，Do not use (it) for commercial/business purpose. 知识共享许可协议 -