summaryrefslogtreecommitdiffstats
path: root/webapp/app/templates
diff options
context:
space:
mode:
authorRaymond Hogenson <rayhogenson@openmailbox.org>2016-10-15 10:06:20 -0400
committerRaymond Hogenson <rayhogenson@openmailbox.org>2016-10-15 10:06:20 -0400
commitc4999bbbfdbca65986e876ac78863041e85cfbe4 (patch)
treeb3f300c16fb369061ea7139c3e3684e7eac8a924 /webapp/app/templates
parentMerge branch 'master' of github.com:rayhogenson/bridge (diff)
parentAdd img-disable css and usage (diff)
downloadbridge-c4999bbbfdbca65986e876ac78863041e85cfbe4.tar.zst
Merge branch 'master' of github.com:rayhogenson/bridge
Diffstat (limited to 'webapp/app/templates')
-rw-r--r--webapp/app/templates/index.html206
1 files changed, 161 insertions, 45 deletions
diff --git a/webapp/app/templates/index.html b/webapp/app/templates/index.html
index b0d9bb3..4dadb7b 100644
--- a/webapp/app/templates/index.html
+++ b/webapp/app/templates/index.html
@@ -1,55 +1,171 @@
-<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">-->
+
+ <!-- Bootstrap core CSS -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
+ <!-- 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]-->
+
+ <!-- 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 -->
- 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);
- };
+ <!-- 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>
- self.click = function() {
- self.socket.emit('spawn', {name:self.name});
- }
+ <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', {type: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('new creature', function(msg) {
+ console.log('new!');
+ var c = new creature(msg.name, socket);
+ c.render($('#creatures'));
+ });
+
+ socket.on('enable image', function(msg) {
+ console.log('enable image');
+ // to be tested
+ var name = msg.name;
+ var myImgElement = $("#" + name);
+ myImgElement.removeClass('img-disable');
+
+ });
+
+ socket.on('disable image', function(msg) {
+ console.log('disable image');
+ // to be tested
+ var name = msg.name;
+ var myImgElement = $("#" + name);
+ myImgElement.addClass('img-disable');
+ });
- socket.on('disconnect', function() {
- console.log('disconnected');
- });
+ 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);
+
+ //-----Testing------------------
+ //var name = element.id;
+ //var myImgElement = $("#" + name);
+ //myImgElement.addClass('img-disable');
+ // -----------------------------
+
+ 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>
generated by cgit v1.3.1 (git 2.54.0) at 2026-09-04 05:55:19 +0000