Browse files

Basic web site presentation (based on Bootstrap)

  • Loading branch information...
1 parent fef1672 commit b4cd402375cf30434fdc7f9fbabb63d9c56d9846 @vojtajina committed Mar 11, 2012
View
BIN img/glyphicons_009_magic.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/glyphicons_042_group.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/glyphicons_082_roundabout.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/glyphicons_163_iphone.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/glyphicons_214_resize_small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/glyphicons_266_book_open.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/grid-18px-masked.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
168 index.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Testacular - Test Runner with Balls</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
+ <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
+ <link href="testacular.css" rel="stylesheet">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- TODO(vojta): favicons -->
+ </head>
+
+ <body data-spy="scroll" data-offset="50">
+
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="navbar navbar-fixed-top">
+ <div class="navbar-inner">
+ <div class="container">
+ &nbsp;
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+<!-- Masthead
+================================================== -->
+<header class="jumbotron masthead">
+ <div class="inner">
+ <h1>Testacular</h1>
+ <p>JavaScript Test Runner with Balls.</p>
+ <p class="download-info">
+ <span class="npm-install btn-large fake-btn">npm -g install testacular</span>
+ <a href="https://github.com/vojtajina/testacular/" class="btn btn-primary btn-large">View project on GitHub</a>
+ </p>
+ </div>
+
+ <ul class="quick-links">
+ <li><a href="https://github.com/vojtajina/testacular/issues?state=open">Issues</a></li>
+ <li><a href="https://github.com/vojtajina/testacular/blob/master/CHANGELOG.md">Changelog</a></li>
+ <li><a href="https://github.com/vojtajina/testacular/blob/master/README.md">Readme</a></li>
+ <li class="divider">&middot;</li>
+ <li>
+ <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=vojtajina&repo=testacular&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="85px" height="20px"></iframe>
+ </li>
+ <li>
+ <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=vojtajina&repo=testacular&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="75px" height="20px"></iframe>
+ </li>
+ <li class="divider">&middot;</li>
+ <li class="follow-btn">
+ <a href="https://twitter.com/vojtajina" class="twitter-follow-button" data-width="190px" data-link-color="#0069D6" data-show-count="true">Follow @vojtajina</a>
+ </li>
+ <li class="tweet-btn">
+ <a href="https://twitter.com/share" class="twitter-share-button" data-width="80px" data-url="http://vojtajina.github.com/testacular/" data-count="horizontal" data-via="vojtajina">Tweet</a>
+ </li>
+ </ul>
+</header>
+
+<hr class="soften">
+
+<div class="marketing">
+ <h1>Designed for quick development.</h1>
+ <p class="marketing-byline">Relying on the best ones -
+ <a href="http://nodejs.org/" target="_blank">Node.js</a> &amp; <a href="http://socket.io/" target="_blank">Socket.io</a>.
+ </p>
+
+ <div class="row">
+ <div class="span4">
+ <img class="bs-icon" src="img/glyphicons_042_group.png">
+ <h2>Open Source</h2>
+ <p>Developed for and maintained by open source community at <a href="https://github.com/vojtajina/testacular/" target="_blank">GitHub</a>. Feel free to fork the repository and send us pull request with some cool improvements.</p>
+ </div>
+ <div class="span4">
+ <img class="bs-icon" src="img/glyphicons_214_resize_small.png">
+ <h2>Remote Control</h2>
+ <p>Control the whole workflow from command line or your IDE.</p>
+ </div>
+ <div class="span4">
+ <img class="bs-icon" src="img/glyphicons_163_iphone.png">
+ <h2>Test on Real Devices</h2>
+ <p>Test your code on real browsers and real devices such as iPhone, iPad, Android.</p>
+ </div>
+ </div><!--/row-->
+ <div class="row">
+ <div class="span4">
+ <img class="bs-icon" src="img/glyphicons_009_magic.png">
+ <h2>Easy Debugging</h2>
+ <p>Easy debugging directly from your IDE (WebStorm).</p>
+ </div>
+ <div class="span4">
+ <img class="bs-icon" src="img/glyphicons_266_book_open.png">
+ <h2>Jasmine Integration</h2>
+ <p>Testacular is framework agnostic - you can run any JS code. But we provide an adapter for <a href="http://pivotal.github.com/jasmine/" target="_blank">Jasmine</a>. Adapters for more testing frameworks coming soon.</p>
+ </div>
+ <div class="span4">
+ <img class="bs-icon" src="img/glyphicons_082_roundabout.png">
+ <h2>Super fast execution</h2>
+ <p>To be done. Execution in Node.js using jsdom implementation.</p>
+ </div>
+ </div><!--/row-->
+
+ <!--
+ easy install / set up
+ stability
+ autowatching
+ -->
+
+ <hr class="soften">
+
+ <h1>Check out Testacular in Action...</h1>
+ <p class="marketing-byline">To be done. Record a screen cast describing whole workflow...</p>
+
+ <div class="yt-video fake-btn">
+ <div style="width: 640px; height: 360px;">&nbsp;</div>
+ <!--
+ <iframe width="640" height="360" src="http://www.youtube.com/embed/Dlkx6AVOBcQ" frameborder="0" allowfullscreen></iframe>
+ -->
+ </div>
+
+</div><!-- /.marketing -->
+
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>This site is based on awesome <a href="http://twitter.github.com/bootstrap/index.html" target="_blank">Bootstrap</a> by <a href="http://twitter.com" target="_blank">Twitter</a>.</p>
+ <p>Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.</p>
+ </footer>
+
+ </div><!-- /container -->
+
+
+
+ <!-- JavaScript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+
+
+ <!-- Google Analytics
+ ================================================== -->
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-29852134-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
+
+ </body>
+</html>
View
355 testacular.css
@@ -0,0 +1,355 @@
+/* Body and structure
+-------------------------------------------------- */
+body {
+ position: relative;
+ padding-top: 90px;
+ background-color: #fff;
+ background-image: url(img/grid-18px-masked.png);
+ background-repeat: repeat-x;
+ background-position: 0 40px;
+}
+
+
+/* Tweak navbar brand link to be super sleek
+-------------------------------------------------- */
+.navbar-fixed-top .brand {
+ padding-right: 0;
+ padding-left: 0;
+ margin-left: 20px;
+ float: right;
+ font-weight: bold;
+ color: #000;
+ text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
+ -webkit-transition: all .2s linear;
+ -moz-transition: all .2s linear;
+ transition: all .2s linear;
+}
+.navbar-fixed-top .brand:hover {
+ text-decoration: none;
+}
+
+
+/* Faded out hr */
+hr.soften {
+ height: 1px;
+ margin: 54px 0;
+ background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
+ background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
+ background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
+ background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
+ border: 0;
+}
+
+
+.yt-video {
+ margin-left: 240px;
+ padding: 20px;
+}
+
+
+/* Jumbotrons
+-------------------------------------------------- */
+.jumbotron {
+ position: relative;
+}
+.jumbotron h1 {
+ margin-bottom: 9px;
+ font-size: 81px;
+ letter-spacing: -1px;
+ line-height: 1;
+}
+.jumbotron p {
+ margin-bottom: 18px;
+ font-weight: 300;
+}
+.jumbotron .btn-large {
+ font-size: 20px;
+ font-weight: normal;
+ padding: 14px 24px;
+ margin-right: 10px;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+}
+.jumbotron .npm-install {
+ font-family: 'Bitstream Vera Sans Mono','Courier',monospace;
+ font-weight: bold;
+}
+
+.fake-btn {
+ display: inline-block;
+ color: #333333;
+ text-align: center;
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+ vertical-align: middle;
+ background-color: #f5f5f5;
+ background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+ background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: linear-gradient(top, #ffffff, #e6e6e6);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
+ border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+ border: 1px solid #ccc;
+ border-bottom-color: #bbb;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+
+
+/* Masthead (docs home) */
+.masthead {
+ padding-top: 36px;
+ margin-bottom: 72px;
+}
+.masthead h1,
+.masthead p {
+ text-align: center;
+}
+.masthead h1 {
+ margin-bottom: 18px;
+}
+.masthead p {
+ margin-left: 5%;
+ margin-right: 5%;
+ font-size: 30px;
+ line-height: 36px;
+}
+
+
+/* Quick links
+-------------------------------------------------- */
+.quick-links {
+ min-height: 30px;
+ padding: 5px 20px;
+ margin: 36px 0;
+ list-style: none;
+ text-align: center;
+ overflow: hidden;
+}
+.quick-links li {
+ display: inline;
+ margin: 0 5px;
+ color: #999;
+}
+.quick-links .github-btn,
+.quick-links .tweet-btn,
+.quick-links .follow-btn {
+ position: relative;
+ top: 5px;
+}
+
+
+/* Marketing section of Overview
+-------------------------------------------------- */
+.marketing .row {
+ margin-bottom: 9px;
+}
+.marketing h1 {
+ margin: 36px 0 27px;
+ font-size: 40px;
+ font-weight: 300;
+ text-align: center;
+}
+.marketing h2,
+.marketing h3 {
+ font-weight: 300;
+}
+.marketing h2 {
+ font-size: 22px;
+}
+.marketing p {
+ margin-right: 10px;
+}
+.marketing .bs-icon {
+ float: left;
+ margin: 7px 10px 0 0;
+ opacity: .8;
+}
+.marketing .small-bs-icon {
+ float: left;
+ margin: 4px 5px 0 0;
+}
+
+
+
+/* Footer
+-------------------------------------------------- */
+.footer {
+ margin-top: 45px;
+ padding: 35px 0 36px;
+ border-top: 1px solid #e5e5e5;
+}
+.footer p {
+ margin-bottom: 0;
+ color: #555;
+}
+
+.marketing-byline {
+ margin: -18px 0 27px;
+ font-size: 18px;
+ font-weight: 300;
+ line-height: 24px;
+ color: #999;
+ text-align: center;
+}
+
+
+/* Responsive Docs
+-------------------------------------------------- */
+@media (max-width: 480px) {
+
+ /* Reduce padding above jumbotron */
+ body {
+ padding-top: 70px;
+ }
+
+ /* Change up some type stuff */
+ h2 {
+ margin-top: 27px;
+ }
+ h2 small {
+ display: block;
+ line-height: 18px;
+ }
+ h3 {
+ margin-top: 18px;
+ }
+
+ /* Adjust the jumbotron */
+ .jumbotron h1,
+ .jumbotron p {
+ text-align: center;
+ margin-right: 0;
+ }
+ .jumbotron h1 {
+ font-size: 45px;
+ margin-right: 0;
+ }
+ .jumbotron p {
+ margin-right: 0;
+ margin-left: 0;
+ font-size: 18px;
+ line-height: 24px;
+ }
+ .jumbotron .btn {
+ display: block;
+ font-size: 18px;
+ padding: 10px 14px;
+ margin: 0 auto 10px;
+ }
+ /* Masthead (home page jumbotron) */
+ .masthead {
+ padding-top: 0;
+ }
+
+ /* Don't space out quick links so much */
+ .quick-links {
+ margin: 40px 0 0;
+ }
+ /* hide the bullets on mobile since our horizontal space is limited */
+ .quick-links .divider {
+ display: none;
+ }
+
+ /* Modal example */
+ .modal-example .modal {
+ position: relative;
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ }
+
+}
+
+
+@media (max-width: 768px) {
+
+ /* Remove any padding from the body */
+ body {
+ padding-top: 0;
+ }
+
+ /* Jumbotron buttons */
+ .jumbotron .btn {
+ margin-bottom: 10px;
+ }
+
+ /* Unfloat the back to top link in footer */
+ .footer .pull-right {
+ float: none;
+ }
+ .footer p {
+ margin-bottom: 9px;
+ }
+
+}
+
+
+@media (min-width: 480px) and (max-width: 768px) {
+
+ /* Scale down the jumbotron content */
+ .jumbotron h1 {
+ font-size: 54px;
+ }
+ .jumbotron p {
+ margin-right: 0;
+ margin-left: 0;
+ }
+
+}
+
+
+@media (min-width: 768px) and (max-width: 980px) {
+
+ /* Remove any padding from the body */
+ body {
+ padding-top: 0;
+ }
+
+ /* Scale down the jumbotron content */
+ .jumbotron h1 {
+ font-size: 72px;
+ }
+
+}
+
+
+@media (max-width: 980px) {
+
+ /* Unfloat brand */
+ .navbar-fixed-top .brand {
+ float: left;
+ margin-left: 0;
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+
+ /* Inline-block quick links for more spacing */
+ .quick-links li {
+ display: inline-block;
+ margin: 5px;
+ }
+
+}
+
+
+/* LARGE DESKTOP SCREENS */
+@media (min-width: 1210px) {
+
+ /* Update subnav container */
+ .subnav-fixed .nav {
+ width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
+ }
+
+}

0 comments on commit b4cd402

Please sign in to comment.