im not proud of this

README.md

@@ -0,0 +1,13 @@
+
+## Run with docker run command
+```
+docker run -d -p 8000:8000 git.shihaam.me/shihaam/911
+```
+## or with docker compose
+```yaml
+services:
+  nineeleven:
+    image: git.shihaam.me/shihaam/911
+    ports:
+      - "8000:8000"
+```

css/main.css

@@ -0,0 +1,402 @@
+@-webkit-keyframes animLand {
+   0% { background-position: 0px 0px; }
+   100% { background-position: -335px 0px; }
+}
+@-moz-keyframes animLand {
+   0% { background-position: 0px 0px; }
+   100% { background-position: -335px 0px; }
+}
+@-o-keyframes animLand {
+   0% { background-position: 0px 0px; }
+   100% { background-position: -335px 0px; }
+}
+@keyframes animLand {
+   0% { background-position: 0px 0px; }
+   100% { background-position: -335px 0px; }
+}
+
+@-webkit-keyframes animSky {
+   0% { background-position: 0px 100%; }
+   100% { background-position: -275px 100%; }
+}
+@-moz-keyframes animSky {
+   0% { background-position: 0px 100%; }
+   100% { background-position: -275px 100%; }
+}
+@-o-keyframes animSky {
+   0% { background-position: 0px 100%; }
+   100% { background-position: -275px 100%; }
+}
+@keyframes animSky {
+   0% { background-position: 0px 100%; }
+   100% { background-position: -275px 100%; }
+}
+
+@-webkit-keyframes animBird {
+   from { background-position: 0px 0px; }
+   to { background-position: 0px -96px; }
+}
+@-moz-keyframes animBird {
+   from { background-position: 0px 0px; }
+   to { background-position: 0px -96px; }
+}
+@-o-keyframes animBird {
+   from { background-position: 0px 0px; }
+   to { background-position: 0px -96px; }
+}
+@keyframes animBird {
+   from { background-position: 0px 0px; }
+   to { background-position: 0px -96px; }
+}
+
+@-webkit-keyframes animPipe {
+   0% { left: 900px; }
+   100% { left: -100px; }
+}
+@-moz-keyframes animPipe {
+   0% { left: 900px; }
+   100% { left: -100px; }
+}
+@-o-keyframes animPipe {
+   0% { left: 900px; }
+   100% { left: -100px; }
+}
+@keyframes animPipe {
+   0% { left: 900px; }
+   100% { left: -100px; }
+}
+
+@-webkit-keyframes animCeiling {
+   0% { background-position: 0px 0px; }
+   100% { background-position: -63px 0px; }
+}
+@-moz-keyframes animCeiling {
+   0% { background-position: 0px 0px; }
+   100% { background-position: -63px 0px; }
+}
+@-o-keyframes animCeiling {
+   0% { background-position: 0px 0px; }
+   100% { background-position: -63px 0px; }
+}
+@keyframes animCeiling {
+   0% { background-position: 0px 0px; }
+   100% { background-position: -63px 0px; }
+}
+
+
+*,
+*:before,
+*:after
+{
+   /* border box */
+   -moz-box-sizing: border-box;
+   -webkit-box-sizing: border-box;
+   box-sizing: border-box;
+   /* gpu acceleration */
+   -webkit-transition: translate3d(0,0,0);
+   /* select disable */
+   -webkit-touch-callout: none;
+   -webkit-user-select: none;
+   -khtml-user-select: none;
+   -moz-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+}
+
+html,
+body
+{
+   height: 100%;
+   overflow: hidden;
+   font-family: monospace;
+   font-size: 12px;
+   color: #fff;
+   background:#111;
+}
+
+
+#gamecontainer
+{
+   position: relative;
+   width: 100%;
+   height: 100%;
+   min-height: 525px;
+}
+@media (min-width: 1025px){
+	#gamecontainer
+	{
+	   width:500px;
+	   overflow:hidden;
+	   margin:0 auto;
+	}
+}
+
+/*
+Screen - Game
+*/
+#gamescreen
+{
+   position: absolute;
+   width: 100%;
+   height: 100%;
+}
+
+#sky
+{
+   position: absolute;
+   top: 0;
+   width: 100%;
+   height: 80%;
+   background-image: url('../assets/sky.png');
+   background-repeat: repeat-x;
+   background-position: 0px 100%;
+   background-color: #426dbd;
+   
+   -webkit-animation: animSky 7s linear infinite;
+   animation: animSky 7s linear infinite;
+}
+
+#flyarea
+{
+   position: absolute;
+   bottom: 0;
+   height: 420px;
+   width: 100%;
+}
+
+#ceiling
+{
+   position: absolute;
+   top: -16px;
+   height: 16px;
+   width: 100%;
+   background-image: url('../assets/ceiling.png');
+   background-repeat: repeat-x;
+   
+   -webkit-animation: animCeiling 481ms linear infinite;
+   animation: animCeiling 481ms linear infinite;
+}
+
+#land
+{
+   position: absolute;
+   bottom: 0;
+   width: 100%;
+   height: 20%;
+   background-image: url('../assets/land.png');
+   background-repeat: repeat-x;
+   background-position: 0px 0px;
+   background-color: #0f2641;
+   
+   -webkit-animation: animLand 2516ms linear infinite;
+   animation: animLand 2516ms linear infinite;
+}
+
+#bigscore
+{
+   position: absolute;
+   top: 20px;
+   left: 50%;
+   margin-left:-20px;
+   z-index: 100;
+}
+
+#bigscore img
+{
+   display: inline-block;
+   padding: 1px;
+}
+
+#splash
+{
+   position: absolute;
+   opacity: 0;
+   top: 75px;
+   left: 50%;
+   margin-left:-94px;
+   width: 188px;
+   height: 170px;
+   background-image: url('../assets/splash.png');
+   background-repeat: no-repeat;
+}
+
+#scoreboard
+{
+   position: absolute;
+   display: none;
+   opacity: 0;
+   top: 64px;
+   left: 50%;
+   margin-left:-119px;
+   width: 236px;
+   height: 280px;
+   background-image: url('../assets/scoreboard.png');
+   background-repeat: no-repeat;
+   
+   z-index: 1000;
+}
+
+#medal
+{
+   position: absolute;
+   opacity: 0;
+   top: 114px;
+   left: 32px;
+   width: 44px;
+   height: 44px;
+}
+
+#currentscore
+{
+   position: absolute;
+   top: 105px;
+   left: 107px;
+   width: 104px;
+   height: 14px;
+   text-align: right;
+}
+
+#currentscore img
+{
+   padding-left: 2px;
+}
+
+#highscore
+{
+   position: absolute;
+   top: 147px;
+   left: 107px;
+   width: 104px;
+   height: 14px;
+   text-align: right;
+}
+
+#highscore img
+{
+   padding-left: 2px;
+}
+
+#replay
+{
+   position: absolute;
+   opacity: 0;
+   top: 205px;
+   left: 61px;
+   height: 115px;
+   width: 70px;
+   cursor: pointer;
+}
+
+.boundingbox
+{
+   position: absolute;
+   display: none;
+   top: 0;
+   left: 0;
+   width: 0;
+   height: 0;
+   border: 1px solid red;
+}
+
+#player
+{
+   left: 60px;
+   top: 200px;
+}
+
+.bird
+{
+   position: absolute;
+   width: 93px;
+   height: 24px;
+   background-image: url('../assets/bird.png');
+   background-image: url('../assets/plane.png');
+   
+   -webkit-animation: animBird 300ms steps(4) infinite;
+   animation: animBird 300ms steps(4) infinite;
+}
+
+.pipe
+{
+   position: absolute;
+   left: -100px;
+   width: 52px;
+   height: 100%;
+   z-index: 10;
+   
+   -webkit-animation: animPipe 7500ms linear;
+   animation: animPipe 7500ms linear;
+}
+
+.pipe_upper
+{
+   position: absolute;
+   top: 0;
+   width: 52px;
+   background-image: url('../assets/pipe.png');
+   background-repeat: repeat-y;
+   background-position: center;
+}
+
+.pipe_upper:after
+{
+   content: "";
+   position: absolute;
+   bottom: 0;
+   width: 52px;
+   height: 22px;
+   background-image: url('../assets/pipe-down.png');
+}
+
+.pipe_lower
+{
+   position: absolute;
+   bottom: 0;
+   width: 52px;
+   background-image: url('../assets/pipe.png');
+   background-repeat: repeat-y;
+   background-position: center;
+}
+
+.pipe_lower:after
+{
+   content: "";
+   position: absolute;
+   top: 0;
+   width: 52px;
+   height: 22px;
+   background-image: url('../assets/pipe-up.png');
+}
+
+#footer
+{
+   position: absolute;
+   bottom: 3px;
+   left: 3px;
+}
+
+#footer a,
+#footer a:link,
+#footer a:visited,
+#footer a:hover,
+#footer a:active
+{
+   display: block;
+   padding: 2px;
+   text-decoration: none;
+   color: #fff;
+}
+
+<style type="text/css">
+body {
+    background: #000;
+}
+ 
+#explosion {
+    width: 188px;
+    height: 142px;
+    position : absolute;
+    margin-top:-50px;
+    background-image: url("../assets/explosion.png");
+	z-index:99;
+}

css/reset.css

@@ -0,0 +1,2 @@
+/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
+html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+   <head>
+      <title>Play flappy plane, September edition!</title>
+      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+      <meta name="author" content="Anonymous troll" />
+      <meta name="description" content="Play flappy plane, September edition. Rated 11/9 by most Americans!" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+
+      <!-- Open Graph tags -->
+      <meta property="og:title" content="Flappy Plane, September edition" />
+      <meta property="og:description" content="Play flappy plane, September edition. Rated 11/9 by most Americans!" />
+      <meta property="og:type" content="website" />
+      <meta property="og:image" content="https://terrorist.group/assets/thumb.png" />
+      <meta property="og:url" content="https://terrorist.group" />
+      <meta property="og:site_name" content="Flappy plane, September edition!" />
+      <!-- Style sheets -->
+      <link href="css/reset.css" rel="stylesheet">
+      <link href="css/main.css" rel="stylesheet">
+      <script type="text/javascript">var switchTo5x=true;</script>
+<script type="text/javascript">stLight.options({publisher: "2ae97540-b48e-49c1-9d0f-e9e34df112fe", doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
+ </head>
+   <body>
+
+      <div id="gamecontainer">
+	<style type="text/css">
+	#legpad {display: none}
+	#smallpad {display: none}
+	#ip4ad {display: none}
+	#hdad { display: none }
+	#leftad {display: none; float: left; padding-left: 50px; padding-top:75px}
+	#rightad {display: none; float: right; padding-right: 50px; padding-top:75px}
+	.largetab { display: none }
+	@media (orientation: portrait) and (min-width: 319px) and (max-width: 459px) {#ip4ad {display: block} }
+	@media (orientation: portrait) and (min-width: 299px) and (max-width: 318px) {#smallpad {display: block} }
+	@media (orientation: portrait) and (min-width: 200px) and (max-width: 298px) {#legpad {display: block} }
+	@media (orientation: landscape) and (min-height: 600px) and (min-width: 1270px) { #leftad {display: block;} #rightad {display: block;} #hdad { display: block; } }
+	@media (orientation: portrait) and (min-width: 760px) { .largetab { display: inline-block } }
+	@media (orientation: portrait) and (min-width: 460px) and (max-width: 759px) { #hdad {display: block} }
+	</style>
+	
+
+         <div id="gamescreen">
+            <div id="sky" class="animated">
+               <div id="flyarea">
+                  <div id="ceiling" class="animated"></div>
+                  <!-- This is the flying and pipe area container -->
+                  <div id="player" class="bird animated"></div>
+                  
+                  <div id="bigscore"></div>
+                  
+                  <div id="splash"></div>
+                  
+                  <div id="scoreboard">
+                     <div id="medal"></div>
+                     <div id="currentscore"></div>
+                     <div id="highscore"></div>
+                     <div id="replay"><img src="assets/replay.png" alt="replay"></div>
+                  </div>
+                  
+                  <!-- Pipes go here! -->
+               </div>
+            </div>
+            <div id="land" class="animated"><div id="debug"></div></div>
+         </div>
+      </div>
+      <div id="footer">
+	
+      </div>
+      <div class="boundingbox" id="playerbox"></div>
+      <div class="boundingbox" id="pipebox"></div>
+      
+      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+      <script src="js/jquery.transit.min.js"></script>
+      <script src="js/buzz.min.js"></script>
+      <script src="js/main.min.js"></script>
+    
+	
+   </body>
+</html>