<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width"> <title>Scratch is having trouble!</title> <style type="text/css"> * { margin: 0; } html, body { height: 100%; background-color: #4D97FF; } .page { min-height: 100%; background-color: #4D97FF; font-weight: 500; } .page:after { content: ""; display: block; } .header-wrapper { width: 100%; height: 10vh; } .header-content { width: calc(100% - 2rem); padding: 1rem; } .main { width: 100%; min-height: calc(100vh - 100px - 4vw); } .content { width: 90vw; max-width: 45rem; margin: 0 auto; text-align: center; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; color: white; /* hack to prevent content from shifting when scrollbar appears; see https://stackoverflow.com/a/30293718/2308190 */ padding-left: calc(100vw - 100%); } .content a { color: white; } hr { border-width: 0; border-top-style: solid; border-top-width: 1px; border-color: white; opacity: 25%; margin: 2rem 0; } img.main-img { width: 300px; height: 200px; } h1 { font-size: 2rem; margin: 1.5rem 1rem 2.5rem 1rem; } h2 { font-size: 1.125rem; margin: 1rem 1rem 2.25rem 1rem; } h2.reload { cursor: pointer; pointer-events: all; } h2.reload:before { margin-top: 0; margin-left: -2.25rem; content:''; background: url('http://scratch-maintenance.s3.amazonaws.com/reload.svg'); height: 66px; /*height of image*/ width: 63px; /*width of image*/ position: absolute; background-size: 24px 24px; background-repeat: no-repeat; } h2.comment:before { margin-top: 0; margin-left: -2.375rem; content:''; background: url('http://scratch-maintenance.s3.amazonaws.com/comment.svg'); height: 66px; /*height of image*/ width: 63px; /*width of image*/ position: absolute; background-size: 25px 24px; background-repeat: no-repeat; } p { font-size: 1rem; line-height: 1.5rem; margin: 1rem 1rem 1.5rem 1rem; } .narrow { padding: 0 10%; } button { cursor: pointer; border: 0; background-color: white; box-shadow: none; border-radius: .25rem; padding: 1rem 1.5rem; } button span { font-size: 1rem; color: #4D97FF; font-weight: 600; } .hidden { display: none; } .showing { display: inline-block; } .grid-wrapper { min-height: 100%; /* display: flex; */ margin-bottom: 2rem; } .grid-content { /* display: inline-block; */ } .grid-content .grid-box { width: 16rem; display: inline-block; background-color: white; font-size: 1rem; color: #4D97FF; font-weight: 600; border-radius: .5rem; padding: 1rem 1rem; margin: 0.5rem; text-align: left; vertical-align: top; } .os-name-row { margin-bottom: 0.25rem; display: flex; align-items: center; } .os-name-img { } .os-name-text { color: #575E75; line-height: 1.25rem; margin-left: 0.5rem; } .os-version { color: #aaa; font-size: 0.75rem; font-weight: 400; } .download-link-row { margin-top: 0.75rem; display: flex; align-items: center; } .store-img { flex: 1; height: 2.625rem; } .store-img img { height: 2.5rem; } .vertical-separator-left { border-right: 1px solid #d9d9d9; height: 2rem; flex: 1; } .vertical-separator-right { flex: 1; } .download-link { flex: 1; padding: .25rem 0.125rem .25rem 0; } .download-link a { color: #4D97FF; text-decoration: none; } </style> <script language="JavaScript"> var toggle = function (elem) { // If the element is visible, hide it if (window.getComputedStyle(elem).display === 'block') { elem.style.display = 'none'; return; } // Otherwise, show it elem.style.display = 'inline-block'; }; // Handler when the DOM is fully loaded var onLoaded = function() { // Listen for click events var actionShowElements = document.getElementsByClassName('toggleShowing'); if (actionShowElements && actionShowElements.length) { for (var i = 0; i < actionShowElements.length; i++) { actionShowElements[i].onclick = function() { var hiddenElements = document.getElementsByClassName('hidden'); if (hiddenElements && hiddenElements.length) { for (var j = 0; j < hiddenElements.length; j++) { hiddenElements[j].style.display = 'inline-block'; }; } var showingElements = document.getElementsByClassName('showing'); if (showingElements && showingElements.length) { for (var j = 0; j < showingElements.length; j++) { showingElements[j].style.display = 'none'; }; } }; } } }; // wait until document loaded to assign onclick handlers if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) { onLoaded(); } else { document.addEventListener("DOMContentLoaded", onLoaded); } </script> </head> <body> <div class="page"> <div class="header-wrapper"> <div class="header-content"> <img src="http://scratch-maintenance.s3.amazonaws.com/logo_sm.png" width="80px" /> </div> </div> <div class="main"> <div class="content"> <img src="http://scratch-maintenance.s3.amazonaws.com/wateringcan.svg" /> <h1>The Scratch Team is working hard to fix an issue with the Scratch website</h1> <h2 class="reload" onclick="location.reload()">Try reloading the page in a few minutes</h2> <h2 class="comment">Check <a href="https://twitter.com/scratch">@Scratch</a> for updates</h2> <hr> <div class="narrow"> <p>While the website is being fixed, you can use the Scratch app to make projects offline</p> </div> <button class="toggleShowing showing"><span>Download Scratch app</span></button> <div class="grid-wrapper hidden"> <div class="grid-content"> <div class="grid-box"> <div class="os-name-row"> <div class="os-name-img"> <img src="http://scratch-maintenance.s3.amazonaws.com/windows-logo.svg" width="28px" /> </div> <div class="os-name-text">Windows</div> </div> <div class="os-version">Windows 10+</div> <div class="download-link-row"> <div class="store-img"> <a href="https://www.microsoft.com/store/apps/9pfgj25jl6x3?cid=storebadge&ocid=badge"> <img src="http://scratch-maintenance.s3.amazonaws.com/windows-store-badge.svg" /> </a> </div> <div class="vertical-separator-left"></div> <div class="vertical-separator-right"></div> <div class="download-link"><a href="https://downloads.scratch.mit.edu/desktop/Scratch%20Setup.exe">Download</a></div> </div> </div> <div class="grid-box"> <div class="os-name-row"> <div class="os-name-img"> <img src="http://scratch-maintenance.s3.amazonaws.com/apple-logo.svg" width="28px" /> </div> <div class="os-name-text">macOS</div> </div> <div class="os-version">macOS 10.13+</div> <div class="download-link-row"> <div class="store-img"> <a href="https://apps.apple.com/us/app/scratch-desktop/id1446785996?mt=12"> <img src="http://scratch-maintenance.s3.amazonaws.com/mac-store-badge.svg" /> </a> </div> <div class="vertical-separator-left"></div> <div class="vertical-separator-right"></div> <div class="download-link"><a href="https://downloads.scratch.mit.edu/desktop/Scratch.dmg">Download</a></div> </div> </div> <div class="grid-box"> <div class="os-name-row"> <div class="os-name-img"> <img src="http://scratch-maintenance.s3.amazonaws.com/chromeos-logo.svg" width="28px" /> </div> <div class="os-name-text">ChromeOS</div> </div> <div class="os-version">ChromeOS</div> <div class="download-link-row"> <div class="store-img"> <a href="https://play.google.com/store/apps/details?id=org.scratch"> <img src="http://scratch-maintenance.s3.amazonaws.com/google-play-badge.png" /> </a> </div> </div> </div> <div class="grid-box"> <div class="os-name-row"> <div class="os-name-img"> <img src="http://scratch-maintenance.s3.amazonaws.com/android-logo.svg" width="25px" /> </div> <div class="os-name-text">Android (Tablet)</div> </div> <div class="os-version">Android 6.0+</div> <div class="download-link-row"> <div class="store-img"> <a href="https://play.google.com/store/apps/details?id=org.scratch"> <img src="http://scratch-maintenance.s3.amazonaws.com/google-play-badge.png" /> </a> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>