New examples HTML page added.

Author: photonstorm

README.md

@@ -0,0 +1,165 @@
+/* reset css starts */
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
+table {border-collapse: collapse; border-spacing: 0;}
+/* reset css ends */
+@font-face{font-family: 'HelveticaBd'; src: url('../fonts/HelveticaNeueLTStd-Bd.otf');}
+
+body{margin:0;padding:0; overflow-x:hidden; font-family: 'HelveticaBd', Helvetica, Arial, Tahoma, Verdana !important; background: #e0e4f1;}
+
+a{color:#fff; text-decoration: none;}
+a:hover{text-decoration: underline;}
+
+.helvetica{font-family: 'HelveticaBd', Helvetica, Arial, Tahoma, Verdana !important;}
+.header{background: #e0e4f1 url('../img/header-bg.jpg') no-repeat; width:100%; margin:0; padding:0; background-size: cover; height: 910px; display: block; clear:both; margin-bottom: -400px}
+.main-container{display: block; clear:both; width: 1125px; height: auto; margin:0 auto;}
+ul.nav-links{margin:0;padding:0;display: inline-block; float: right; list-style-type: none; color: #fff; font-size: 15px; line-height: 2em; margin-top: 50px; min-width: 180px;}
+ul.nav-links > li{margin:0; padding:0; list-style-type: none; padding-left: 55px;}
+ul.nav-links > li > a{color: #fff; text-decoration: none;}
+ul.nav-links > li > a:hover{text-decoration: underline;}
+.link-home, .link-latest, .link-forum, .link-docs, .link-twitter{background-image: url('../img/nav-icons.png'); background-repeat: no-repeat;}
+
+.main-title{font-size:55px;color:#fff;text-shadow:0 0 15px #b643e6; text-align: center; display: block; text-transform: uppercase; margin: 40px auto 0 auto;}
+.link-home{background-position: 0 -9px;}
+.link-latest{background-position: 0 -37px;}
+.link-forum{background-position: 0 -67px;}
+.link-docs{background-position: 0 -97px;}
+.link-twitter{background-position: 0 -127px;}
+.phaser-examples{background: url('../img/phaser-examples.png') no-repeat; display: block; width: 485px; height: 205px; margin: 20px auto;}
+.phaser-version{float: right; background: url('../img/phaser-version.png') no-repeat; display: block; width: 345px; height: 30px; color: #fff; font-size: 11px; text-shadow: 1px 1px #000; right:0; top:0; }
+.phaser-version > span{margin-top: 10px; display: inline-block; margin-left: 60px; margin-right: 25px;}
+.phaser-version > a{color: #fff; text-decoration: none; background: url('../img/version-button.png') no-repeat; background-size: cover; display: inline-block; width: 123px; height: 10px; vertical-align: middle; text-align: center;padding-top:11px; padding-bottom: 11px}
+.phaser-version > a:hover{text-decoration: underline;}
+.phaser-logo{display: block; float: right; width: 168px;height: 144px; background: url('../img/phaser-logo.png') no-repeat; margin-top: 40px; margin-right: 40px;}
+
+.line{display:block;clear:both; width:100%; margin:0;padding:0; float:left; background-color: transparent;}
+.go-top{margin-top: -200px;}
+.box5, .box10, .box15 .box20, .box25, .box30, .box35, .box40, .box45, .box50, .box55, .box60, .box65, .box70, .box75, .box80, .box85, .box90, .box95, .box100{position: relative;display: inline-block; box-sizing: border-box; padding: 5px 10px; -moz-box-sizing: border-box; vertical-align: top; margin:0;}
+.float-right{float:right !important;}
+
+.box5{width:4%; min-width: 100px; float:left;}
+.box10{width:9%; min-width: 100px; float:left;}
+.box15{width:14%; min-width: 150px;float:left;}
+.box20{width:19%; min-width: 200px;float:left;}
+.box25{width:24%; min-width: 250px;float:left;}
+.box30{width:29%; min-width: 300px;float:left;}
+.box35{width:34%; min-width: 350px;float:left;}
+.box40{width:39%; min-width: 400px;float:left;}
+.box45{width:44%; min-width: 450px;float:left;}
+.box50{width:49%; min-width: 500px;float:left;}
+.box55{width:54%; min-width: 550px;float:left;}
+.box60{width:59%; min-width: 600px;float:left;}
+.box65{width:64%; min-width: 650px;float:left;}
+.box70{width:69%; min-width: 700px;float:left;}
+.box75{width:74%; min-width: 750px;float:left;}
+.box80{width:79%; min-width: 800px;float:left;}
+.box85{width:84%; min-width: 850px;float:left;}
+.box90{width:89%; min-width: 900px;float:left;}
+.box95{width:94%; min-width: 950px;float:left;}
+.box100, .clear, .clear5, .clear10, .clear15, .clear20, .clear25{width:100%; clear: both;}
+.clear{display: block;}
+.clear5{height: 10px;}
+.clear10{height: 20px;}
+.clear15{height: 30px;}
+.clear20{height: 40px;}
+.clear25{height: 50px;}
+.strong{text-transform: uppercase !important;}
+.no-margin{margin:0 !important;}
+.no-padding{padding:0 !important;}
+.box-center{float: none !important; margin-left: auto !important; margin-right: auto !important;}
+.txt-center{text-align: center !important;}
+
+p.title{font-size: 30px; color: #fff; text-shadow: 0 1px 3px #9e6ce8; text-align: right;}
+p.count-examples{font-size: 12px; color: #676773; text-align: right;}
+
+ul.group-items{background-image: url('../img/laser1.png'); background-repeat: no-repeat; background-position: left top 5px; padding-left: 125px; width: 875px !important;}
+ul.group-items > li{width: 213px; padding-top: 15px; height: 35px; background: url('../img/group-item.png') no-repeat; text-align: center; display: inline-block; margin-bottom: 15px}
+ul.group-items > li a{display:block; width:100%; height: 100%; padding: 20px 0; margin-top: -20px; color:#333;}
+ul.group-items > li a:hover{cursor: pointer; text-decoration: underline;}
+ul.group-items > li a span.mark{display:inline-block;width: 1px; height: 25px; vertical-align: middle;}
+ul.group-items > li a:visited span.mark{background: url('../img/group-item-hover.png') no-repeat; background-position: center center;width:25px; padding-left:4px;}
+
+.laser2{background-image: url('../img/laser2.png') !important; background-repeat: no-repeat; background-position: center 20px;}
+.laser3{background-image: url('../img/laser3.png') !important; background-repeat: no-repeat; background-position: center 20px;}
+.laser4{background-image: url('../img/laser4.png') !important; background-repeat: no-repeat; background-position: center 20px;}
+.laser5{background-image: url('../img/laser5.png') !important; background-repeat: no-repeat; background-position: center 20px;}
+.laser6{background-image: url('../img/laser6.png') !important; background-repeat: no-repeat; background-position: center 20px;}
+.laser7{background-image: url('../img/laser7.png') !important; background-repeat: no-repeat; background-position: center 20px;}
+.laser8{background-image: url('../img/laser8.png') !important; background-repeat: no-repeat; background-position: center 20px;}
+.laser9{background-image: url('../img/laser9.png') !important; background-repeat: no-repeat; background-position: center 20px;}
+.laser10{background-image: url('../img/laser10.png') !important; background-repeat: no-repeat; background-position: center 20px;}
+
+.bright-bg, .dark-bg{border-bottom: 1px solid #d1d1d1; padding:25px 0;}
+.bright-bg{background-color: #e0e0ee;}
+.dark-bg{background-color:#e0e4f1;}
+.border-bottom{border-bottom: 1px solid #d1d1d1;}
+
+.prize-bg{background: url('../img/prize-bg.png') no-repeat; background-size: cover; background-position: center center; height: 326px; width: 100%;}
+.gradient{background: url('../img/gradient-bg') repeat-y;}
+.prize-button{text-transform: uppercase; color: #000; text-shadow: 1px 0 #fff; float:right; background: url('../img/prize-button.png') no-repeat; width: 300px; height: 70px; padding-top:135px; font-size: 16px; padding-left: 75px; margin-top: 25px; margin-right: 145px;}
+
+.footer{background: #e0e4f1 url('../img/footer-bg.jpg') no-repeat; background-size: cover; width:100%; height: 425px; bottom:0; color:#fff; text-shadow: 1px 1px 0 #000; line-height: 1.25em; font-size: 15px;}
+.photonstorm-logo{background: url('../img/photonstorm-logo.png') no-repeat; background-size: cover; display: block;clear:both; width:113px;height:15px; margin-bottom: 6px;}
+.flixel-logo{display:block; clear:both; width:26px; height:50px; background: url('../img/flixel-logo.png') no-repeat;}
+.forums-icon, .twitter-icon, .github-icon{background: url('../img/forums-icon.png') no-repeat; vertical-align: middle; padding-left: 68px; height: 35px; display: inline-block; padding-top: 25px;}
+.twitter-icon{background: url('../img/twitter-icon.png') no-repeat;}
+.github-icon{background: url('../img/github-icon.png') no-repeat;}
+
+.footer > .main-container > .line{margin-top: 270px;}
+
+ul.footer-links{list-style-type: none; width:100%; clear:both; padding:0; margin:0; float:right; margin-top: -20px;}
+ul.footer-links > li{display: inline-block; padding:0; margin:0; float:right;}
+
+
+.game-panel{width:800px; height: 680px; overflow: hidden; display:block; clear:both;box-shadow: 0 0 15px #6ac8f8; margin:-150px auto 0 auto; border-radius: 10px; position: relative; z-index: 10;}
+.game-screen{display:block; clear:both; width:800px;height:600px;margin:0;}
+.game-controls{display:block; width:100%; height:80px; margin:0; padding:0;background: url('../img/game-controls-bg.jpg') repeat-x;}
+ul.left-controls{float:left; list-style-type: none; margin:30px 0 0 25px;padding:0; display: inline-block;}
+ul.left-controls > li{margin:0;padding:0; display: inline-block; vertical-align: middle;}
+.controls-label{display:inline-block; width:80px; height:9px; background: url('../img/controls-label.png') no-repeat;}
+.up-label{display: inline-block; width:11px; height: 11px; background: url('../img/up-label.png') no-repeat;}
+.down-label{display: inline-block; width:11px; height: 11px; background: url('../img/down-label.png') no-repeat;}
+.left-label{display: inline-block; width:13px; height: 11px; background: url('../img/left-label.png') no-repeat;}
+.right-label{display: inline-block; width:12px; height: 11px; background: url('../img/right-label.png') no-repeat;}
+.space-label{display: inline-block; width:64px; height: 18px; background: url('../img/space-label.png') no-repeat;}
+
+ul.right-controls{float:right;list-style-type: none; padding:0; display: inline-block; margin: 15px 25px 0 0;}
+ul.right-controls > li{margin:0;padding:0; display: inline-block; vertical-align: middle;}
+.pause-button{width: 121px; height:52px; display:inline-block; background: url('../img/pause-button.png') no-repeat;}
+.mute-button{width: 121px; height:52px; display:inline-block; background: url('../img/mute-button.png') no-repeat;}
+.reset-button{width: 121px; height:52px; display:inline-block; background: url('../img/reset-button.png') no-repeat;}
+.pause-button:hover, .mute-button:hover, .reset-button:hover{cursor: pointer;}
+.filler{height: 420px;}
+.code-block{width:750px; height:auto; overflow: hidden;margin:0 auto;border-radius: 10px;background:#fdfdfd; border:0 !important; box-shadow: inset 0 5px 15px rgba(0,0,0,0.15), 0 0 10px rgba(106,200,248,0.5); padding: 25px !important;display: block; margin-bottom: 20px; margin-top: 30px;}
+.px800{width:800px; clear:both; display: block; margin:0 auto; line-height: 1.5em;}
+.gradient p{color:#333;}
+
+@media only screen and (max-width: 1235px), only screen and (max-device-width: 1235px){
+  ul.nav-links{min-width:100% !important;}
+  ul.nav-links > li{display: inline-block;}
+}
+@media only screen and (max-width: 1120px), only screen and (max-device-width: 1120px){
+  .footer .box20, .footer .box55, .footer .box15{display: block; clear:both; margin:10px auto; text-align: center; float:none;}
+  .footer .box5{display:none;}
+  .photonstorm-logo{margin:10px auto;}
+  .footer .box55{width:100%; float:none; margin:10px auto;}
+  .footer ul.footer-links{width:100%;}
+  .footer ul.footer-links > li{float:none;}
+  .footer > .main-container > .line{margin-top: 125px;}
+}
+@media only screen and (max-width: 1020px), only screen and (max-device-width: 1020px){
+  .phaser-logo{display:none;}
+  .header{margin-bottom: -350px;}
+  p.title, p.count-examples{text-align: center;}
+  .box20, .box60{min-width:100% !important; clear:both; width: 100% !important; max-width: 100% !important; text-align: center;}
+  a.prize-button{margin:0 auto; float:none;display:block;}
+  .prize-bg{background: transparent;}
+}
+@media only screen and (max-width: 810px), only screen and (max-device-width: 810px){
+  .main-container{width:100%;}
+}

examples/html/css/stylesheet.css

@@ -0,0 +1,110 @@
+<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
+  <head>
+    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
+    <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
+    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
+    <script src='./js/application.js' type='text/javascript'></script>
+    <link href='./css/stylesheet.css' media='screen' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="header">
+      <div class="box100 no-padding">
+        <div class="phaser-version">
+          <span>Phaser Version: 1.0.6</span>
+          <a href="#" class="version-button">Update to 1.0.7</a>
+        </div>
+      </div>
+      <div class="clear"></div>
+      <div class="line">
+        <div class="box20">
+          <ul class="nav-links">
+            <li class="link-home"><a href="#">Back to examples</a></li>
+          </ul>
+        </div>
+        <div class="box60 txt-center">
+          <span class="main-title">Starstruck</span>
+        </div>
+        <div class="box20">
+          <div class="phaser-logo"></div>
+        </div>
+      </div>
+      <div class="game-panel centered">
+        <img src="./img/screenshot.jpg" alt="" class="game-screen"/>
+        <div class="game-controls">
+          <ul class="left-controls">
+            <li class="controls-label"></li>
+            <li class="up-label"></li>
+            <li class="down-label"></li>
+            <li class="left-label"></li>
+            <li class="right-label"></li>
+            <li class="space-label"></li>
+          </ul>
+          <ul class="right-controls">
+            <li class="pause-button"></li>
+            <li class="mute-button"></li>
+            <li class="reset-button"></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="clear filler"></div>
+    <div class="gradient helvetica">
+      <p class="centered px800">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. </p>
+      <p class="centered px800">Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. </p>
+      <pre class="code-block prettyprint centered">
+        var Phaser;
+        (function (Phaser) {
+          var Basic = (function () {
+            function Basic(game) {
+              this.name = 'Space Harrier';
+              this._game = game;
+              this.ID = -1;
+              this.exists = true;
+              this.active = true;
+            }
+            Basic.prototype.destroy = 
+            function () {
+            };
+            // Code Comment        
+            Basic.prototype.toString = 
+            function () {
+              return "";
+            };
+            return Basic;
+          })();
+          Phaser.Basic = Basic;
+        })(Phaser || (Phaser = {}));
+      </pre>
+      <div class="clear20"></div>
+    </div>
+
+    <div class="clear"></div>
+    <div class="footer">
+      <div class="main-container centered">
+        <div class="clear25"></div>
+        <div class="line">
+          <div class="box20 helvetica">
+            <a href="#" class="photonstorm-logo"></a>
+            &copy; 2013 Photon Storm Ltd.<br/>
+            All rights reserved.
+          </div>
+          <div class="box5">
+            <div class="flixel-logo"></div>
+          </div>
+          <div class="box15 helvetica">
+            Looking for a flash game framework?<br/>
+            <a href="#">Try flixel!</a>
+          </div>
+          <div class="box55 helvetica float-right">
+            <ul class="footer-links">
+              <li><a class="forums-icon" href="#">Phaser Forums</a></li>
+              <li><a class="twitter-icon" href="#">@Photonstorm</a></li>
+              <li><a class="github-icon" href="#">Phaser on Github</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>