diff options
Diffstat (limited to 'webapp/app/templates/index.html')
| -rw-r--r-- | webapp/app/templates/index.html | 182 |
1 files changed, 136 insertions, 46 deletions
diff --git a/webapp/app/templates/index.html b/webapp/app/templates/index.html index d4d1853..a8e3479 100644 --- a/webapp/app/templates/index.html +++ b/webapp/app/templates/index.html @@ -1,57 +1,147 @@ -<html> - <head> - <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> - <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> - - <script> - var SPAWN_URL = "/spawn"; +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> + <!--<meta name="description" content=""> + <meta name="author" content=""> + <link rel="icon" href="../../favicon.ico">--> - function creature(name, socket) { - var self = this; - self.name = name; - self.socket = socket; - - self.render = function($parent) { - var $a = $('<a>'); - $a.text(self.name); - $a.click(self.click.bind(self)); + <!-- Bootstrap core CSS --> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> - var $li = $('<li>'); - $li.append($a); - $parent.append($li); - }; + <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> + <![endif]--> - self.click = function() { - self.socket.emit('spawn', {name:self.name}); - } + <!-- Custom styles for this template --> + <link href="static/carousel.css" rel="stylesheet"> + + </head> + +<div class = "page-header"> +<center> + <h1> + Welcome to the Underwater World <br> + <small>Select your favorite sea creature and relax!</small> + </h1> +</center> + +</div> + + + <!-- Marketing messaging and featurettes + ================================================== --> + <!-- Wrap the rest of the page in another container to center all the content. --> + + <div class="container marketing"> + + <!-- Three columns of text below the carousel --> + <div class="row"> + <div class="col-lg-4"> + <img id="jellyfish" onClick="clickImg(this)" class="img-circle" src="http://animalia-life.com/data_images/jellyfish/jellyfish7.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="dolphin" onClick="clickImg(this)" class="img-circle" src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/A-G/bottlenose-dolphin-jumping.jpg.adapt.945.1.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="boat" onClick="clickImg(this)" class="img-circle" src="http://yachtpals.com/files/groupimages/woodduck.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> +<br> + <div class="row"> + <div class="col-lg-4"> + <img id="dory" onClick="clickImg(this)" class="img-circle" src="https://www.sciencenewsforstudents.org/sites/default/files/2016/06/main/articles/wt_blue_tang_dory_free.jpg" alt="Generic placeholder image" width="150" height="150"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="nemo" onClick="clickImg(this)" class="img-circle" src="http://img.wallpaperfolder.com/f/63DCF495B5BC/clown-fish-75948.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="whale" onClick="clickImg(this)" class="img-circle" src="http://media-channel.nationalgeographic.com/media/uploads/photos/content/photo/2013/01/30/KillerWhale_01_BuiltForTheKillV.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> +<br> + <div class="row"> + <div class="col-lg-4"> + <img id="stingray" onClick="clickImg(this)" class="img-circle" src="http://3.bp.blogspot.com/-enlwcfp2skQ/Tlxxws9FRlI/AAAAAAAAAmg/0-TEWn8Sokw/s1600/stingray_5.JPG" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="eel" onClick="clickImg(this)" class="img-circle" src="http://blogs.courierpostonline.com/fishhead/files/2012/11/eel.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="shark" onClick="clickImg(this)" class="img-circle" src="http://www.livescience.com/images/i/000/083/926/original/shark-attacks-increased-in-2015.jpg?interpolation=lanczos-none&downsize=*:1000" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> + + </div><!-- /.container --> + + + <!-- Bootstrap core JavaScript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> + <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> + + <script> + var SPAWN_URL = "/spawn"; + + function creature(name, socket) { + var self = this; + self.name = name; + self.socket = socket; + + self.render = function($parent) { + var $a = $('<a>'); + $a.text(self.name); + $a.click(self.click.bind(self)); + + var $li = $('<li>'); + $li.append($a); + $parent.append($li); + }; + + self.click = function() { + self.socket.emit('spawn', {name:self.name}); } + } - $(document).ready(function() { - var namespace = '/spawn'; - var socket = io.connect('http://' + document.domain + ':' + location.port + namespace); - - socket.on('connect', function() { - console.log('connected!'); - }); - socket.on('new creature', function(msg) { - console.log('new!'); - var c = new creature(msg.name, socket); - c.render($('#creatures')); - }); + $(document).ready(function() { + var namespace = '/spawn'; + socket = io.connect('http://' + document.domain + ':' + location.port + namespace); + + socket.on('connect', function() { + console.log('connected!'); + }); - socket.on('disconnect', function() { - console.log('disconnected'); - }); + socket.on('new creature', function(msg) { + console.log('new!'); + var c = new creature(msg.name, socket); + c.render($('#creatures')); + }); - socket.emit('ready'); + socket.on('disconnect', function() { + console.log('disconnected'); }); - </script> - <title>{{ title }}</title> - </head> - <body> - <h1>Ocean Fun Times</h1> - <ul id="creatures"></ul> - </body> + socket.emit('ready'); + }); + + function clickImg(element) { + console.log(element.id); + var c = new creature(element.id, socket); + c.click() + } + + </script> + <!-- Just to make our placeholder images work. Don't actually copy the next line! --> + <!--<script src="../../assets/js/vendor/holder.min.js"></script>--> + <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> + <!--<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>--> + </body> </html> |