blob: 9b318d236b25a6804dba045bec1a303ade28535f [file] [log] [blame]
<!DOCTYPE html>
Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file.
<html lang="en" manifest="ssl.appcache" itemscope itemtype="">
<meta charset="utf-8">
<title>Try Dart!</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
TODO(ahe): Reduce the number of fonts used based on actual usage.
<link href='//,600,700,800,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="dartlang-style.css">
<link rel="alternate stylesheet" type="text/css" href="line_numbers.css" title="line_numbers">
a.diagnostic {
color: inherit;
border-bottom: 2px dotted red;
a:hover.diagnostic {
text-decoration: none;
a.diagnostic>span {
display: none;
max-width: 70%;
a:hover.diagnostic>span.diagnostic, a:hover.diagnostic>span.alert {
display: block;
position: absolute;
/* left: 1em; */
/* top: 2em; */
right: 1%;
.offline {
transition: opacity 10s;
-webkit-transition: opacity 10s;
.offlineyay {
font-weight: bolder;
opacity: 0.0;
.dart-code-completion-holder {
position: relative;
display: inline-block;
.dart-code-completion-holder /deep/ *.dart-code-completion {
display: none;
position: absolute;
left: 0px;
min-width: 200px;
background: white;
foreground: black;
border: 1px solid black;
z-index: 10;
padding-left: 5px;
} /deep/ *.dart-code-completion {
display: block;
body /deep/ .dart-static {
width: 198px;
overflow: auto;
* TODO(ahe): There are problems with scroll bars on Macs, see:
* .dart-static::-webkit-scrollbar {
* -webkit-appearance: none;
* }
* .dart-static::-webkit-scrollbar:vertical {
* width: 11px;
* }
* .dart-static::-webkit-scrollbar:horizontal {
* height: 11px;
* }
* .dart-static::-webkit-scrollbar-thumb {
* border-radius: 8px;
* border: 2px solid white; /* should match background, can't be transparent * /
* background-color: rgba(0, 0, 0, .5);
* }
* .dart-static::-webkit-scrollbar-track {
* background-color: #fff;
* border-radius: 8px;
* }
body /deep/ .dart-limited-height {
/* TODO(ahe): Make sure to compute this height to avoid jumping in the UI. */
max-height: 66px;
body /deep/ .dart-server {
width: 198px;
border-top: 1px solid black;
body /deep/ .activeEntry {
background: #86b4bf;
body /deep/ .doubleplusgood {
font-weight: 700;
body /deep/ .dart-entry {
max-width: 198px;
overflow: hidden;
white-space: nowrap;
body /deep/ .hazed-suggestion {
color: #aaa;
body /deep/ .hazed-suggestion:after {
content: " ";
.slider {
overflow-y: hidden;
height: 0;
max-height: 9999px;
transition-property: height;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
/* cubic-bezier(0, 1, 0.5, 1);*/
.myhidden {
position: absolute;
visibility: hidden;
height: auto;
.mainEditorPane {
white-space: pre;
/* Extra padding at the bottom to ensure display of error messages. */
padding: 19px 19px 70px 19px;
.lineNumber {
<meta itemprop="name" content="Try Dart!">
<meta itemprop="description" content="Write and run Dart code in your browser. Dart is a class-based, object-oriented language with lexical scoping, closures, and optional static typing.">
<meta name="description" content="Write and run Dart code in your browser. Dart is a class-based, object-oriented language with lexical scoping, closures, and optional static typing.">
<meta itemprop="image" content="try-dart-screenshot.png">
<link rel="dart-sdk" href="sdk.json">
<link rel="benchmark-DeltaBlue" href="benchmarks/DeltaBlue.dart">
<link rel="benchmark-Richards" href="benchmarks/Richards.dart">
<link rel="benchmark-base" href="benchmarks/benchmark_base.dart">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<meta name="viewport" content="initial-scale=1.0">
<!-- Chrome Mobile (Android) "Add to home screen" support -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="dart-icon-196px.png">
<!-- iOS "Add to Home Screen" support -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="dart-icon-196px.png">
<meta names="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image"
media="(device-width: 320px)
and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
<!-- Enable Google Analytics -->
<script type="text/javascript">
if (document.cookie.split(new RegExp('; *')).indexOf('org-trydart-AutomatedTest=true') == -1) {
window.parent && window.parent.postMessage('Enabling Analytics.', '*');
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26406144-2']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="//" title="Dart Homepage" target="_blank">
<ul class="nav pull-right"><li><a href="" target="_blank"><i></i></a></li><li><a href="#" id="settings"><i class="icon-cog"></i></a></li></ul>
<ul class="nav hidden-phone">
<li class="active"><a>Try Dart!</a></li>
<li><a href="//" target="_blank">API Reference</a></li>
<form class="navbar-search pull-right hidden-phone" action="//" id="cse-search-box" target="_blank">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="hl" value="en">
<input type="search" name="q" class="search-query" id="q" autocomplete="off" placeholder="Search">
<ul class="nav pull-right"><li><a><span id="appcache-status" class="offline">offline status</span></a></li></ul>
<div id="settings-dialog" class="myhidden container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="settings-body">
<a href="#" class="btn btn-primary" id="settings-done">Close</a>
<div class="container-fluid">
<article class="homepage">
<div class="callouts row-fluid">
<div class="span6" id="try-dart-column">
<h2><i class="icon-play"></i> Try Dart! <select id="code-picker"></select></h2>
<div class="span6" id="run-dart-column">
<h2><i class="icon-cogs"></i> See Dart</h2>
<div class="container">
<div class="row copyright">
<div class="span8 offset2">
Except as otherwise <a href="">noted</a>, the content of this page is licensed under the <a href="">Creative Commons Attribution 3.0 License</a>, and code samples are licensed under the <a href="">BSD License</a>.
<a href="//">Terms of Service</a>
<a href="">Privacy Policy</a>
<script type="application/javascript" src=""></script>
<script type="application/dart" src="leap.dart"></script>
<script type="application/javascript">
if (self.localStorage &&
self.localStorage, 'hasSelectionModify')) {
self.localStorage.hasSelectionModify =
typeof window.getSelection().modify != 'undefined';
<script type="application/javascript" src="leap.dart.js"></script>